.png){kind=logo}
Photo booth app
Today you will build an application in which we will use the camera and take pictures.
The app has a 'Photo Photo' button and four Surfaces for displaying images. Each time an image is taken, it will appear on a different screen from the four.
Follow the instructions on this screen and follow them in the MIT App Inventor. Try to follow each instruction yourself, if you are not sure How - Click the arrow to the left of the prompt for more detailed instructions.
This is how the app will look:
Code screen
We now want to define the logic by which each image taken will appear on a different surface.
First we will define that pressing the button activates the camera, we will drag the block when TakePictureButton.Click and into it we will drag Camera1.TakePicture. The block will look like this:
For this we will use a global variable that will remember for us what is the next surface we need to change, out of the four existing surfaces.
From the Built-in category, select variables and select the block "Initialize global name to".
We will change the name to canvasNum.
From the Math category we will select block "0" and connect it to the socket of the block of the new variable as follows:
In order not to create many blocks that will be repeated for each of the canvases, we will create a process (procedure) that will accept the image that was taken and apply it to the appropriate surface, according to the global variable we created.
We will add the procedure: From the built-in category we select procedures then to procedure do.
Instead of a procedure we write setPictureToCanvas, which will be the name of the process. Click on the gear and in the window that opens we drag the input: x into the right side where it says inputs. To the process will be added an input that we can use, we will change the name of x to be an image.
In this way we can define a process that uses the image and repeat its use.
In the process, we will examine the value of the global canvasNum variable.
If it is equal to 1, we will put the image taken as the background of Canvas1.
If it is equal to 2, we will put the image in Canvas2, and so on.
To do this we will use the if-then-else block.
We will drag the block from the control category into the procedure we created. Click on the gear and set 4 parts by dragging else if to the left of the right part 3 times.
We will fill in the 'if' part as follows:
We will drag from the Math block category of equality and connect it to the socket of the if.
In the left part we put a number from the Math category, and in the right part we put the value of get global canvasNum, which we take from the variable categories.
We will fill in the 'then' part as follows:
We will drag a block set canvas1.BackgroundImage to and connect to the socket of the then.
From the image variable we got we take the get image and connect them.
In the same way we will fulfill all the other conditions. Note: You can right-click on a block and select duplicate to duplicate it. So it remains only to place it and change the number and canvas we change.
We now want to define a number of actions that will occur once a new image has been taken.
We will increase the value of canvasNum by 1, unless the value is 4 then we will change it to 1.
We will set the setPictureToCanvas process we created to run and pass the new image to it.
First we will drag a block of the type when Camera1.AfterPicture, and within it we will define these actions.
The blocks will eventually look like this:
Well done, You've finished the Photos app!
Is the lesson over? Click here to go to the instructions for saving the phone app.
Is there any more time? Click here to go to the bonus guide.
Now each picture you take will appear on one of the surfaces in order, and when all the surfaces are filled, the next picture will replace the one on one surface and God forbid.