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
Hossein Amerkashi's Blog 