In this tutorial, we will develop a Photo Booth app. I’ll show you how you can develop an app that allows you to accomplish the following tasks. The app will be developed using MIT App Inventor
- Take pictures using your smart phone,
- Saving picture onto canvas
- Display the last 4 pictures on your device
- Select one of the pictures and get the picture name
- Post / transmit a selected picture to a PHP server
What will be covered in this tutorial?
- Camera — allows you take, save picture
- Canvas – for displaying pictures onto canvas (4 canvases will be used)
- Notifier – for displaying messages
- Web – for posting the picture to a PHP server
- Button, Label, TextBox, Arrangements
We will be working toward the design shown in figure blow:
Below figure is showing you, at high level, how the components are arranged in our design editor. It also shows you the non-visible components (e.g. Camera, Web, Notifier). that are used in the sample app.
For the layout, we use Vertical and horizontal screen arrangements to contain the four canvases. After a camera picture is taken, one of the canvas background images is changed to show the image. To keep the canvases spaced properly, we use Label component with its Text background set to None. Using this approach, the Label serves as a spacer and puts spacing between our canvas components. The figure below shows this layout:
Assumption:
This tutorial assumes you know the basics of App Inventor. For additional tutorials, please see HERE.
App Inventor Blocks
The layout includes 4 canvases. The canvases are used to show the pictures that are taken. Once a picture is taken, it will be saved and shown onto first canvas. The second picture will be saved onto second canvas. This will continue through all four canvases and then we rotate back again to first canvas. To keep track of which canvas should be used, we declare and use a global variable as shown below. We also set the default value to zero
To take a picture, we are using a Button component, btnTakePicture with Text of ‘Take Picture’. Once btnTakePicture is clicked, we start the device camera using the Camera component. Figure below shows the block for invoking the device camera:
Once the camera lens opens and picture is taken, the Camera.AfterPicture will be triggered. In this event, the global variable canvasNum is increased by 1. This will allow us to rotate the image and save, as background, to Canvas1 through Canvas4. When the canvasNum is over 4, we rotate it back to 1 so that we can save the picture back to Canvas1. A procedure named setPictureInCanvas is used to set the image as background of one of the canvases. The figure below shows the relevant blocks for this logic:
We provide ability for user to select an image that is already displayed on the canvas. Once the canvas is touched, we retrieve its background image and display its image name in a text box. The blocks for this logic are shown in figure below:
Once an image is selected, and its name displayed in TextBox (txtPictureToPost), we allow the user to tap on a Button (btnPostImage) to transmit / post the selected image using Web component. The Web component URL is set to point to PHP script on the server. The blocks for the Web and invoking the PHP script is shown in figure below. On each post, if successful, it will store the file, on the server, as myPhoto.jpg.
PHP Code:
The following is the PHP code that needs to be saved onto your server and invoked using the blocks shown in the above figure.
<?php /* FileName: tempSaveFile.php * Simple PHP script to save image file. * Note: This simple PHP requires much update for data validation */ $dataToWrite = $_REQUEST['fileName']; $fileName = "myPhoto.jpg"; file_put_contents($fileName, $dataToWrite); ?>
Download source / apk
John Smith
February 27, 2015 at 4:15 am
Photo Booth Android app – good work…
blog online
September 12, 2014 at 2:45 am
It’s hard to come by knowledgeable people for this
subject, but you seem like you know what you’re talking about!
Thanks
Replica New Balance
August 31, 2014 at 4:00 am
It’s amazing in favor of me to have a web
site, which is beneficial designed for my know-how. thanks admin
Warren M. Walker
May 22, 2014 at 8:09 am
I downloaded your aia and it runs perfectly on my tablet, everything is great, takes the photo, but when i upload the pic it only sends 63k and not the entire pic, help
Android
May 14, 2014 at 2:40 pm
Great and nice blog. It’s also very interesting.
Bernard
March 11, 2014 at 1:31 am
Nice Tutorial. I think you mean “Photo Booth” not BOOT:)
M. Hossein Amerkashi
March 11, 2014 at 7:23 am
oops. Will fix typo; the case of missing H 🙂
Omer Rosenbaum
March 2, 2014 at 4:54 am
I managed to run the app successfully including changing the web1.url to the url where the php file is, but I have 2 problems.
1. the file uploded cannot be opened as it is corrupted.
2. only one file can be uploaded to the server. Is there a way to have a loop that will give a new name to each photo so the new photo that was uploaded will not delete the previous?
M. Hossein Amerkashi
March 2, 2014 at 9:56 am
You have to update your php file to save with different names.
You’ll need to do some scripting for this.
Re picture being corrupt, I’ll check into the script
Omer Rosenbaum
March 2, 2014 at 1:09 pm
Ok. I will try to build a loop so each image will get a new name.