Virtual Photo Booth (Flex AppBlock)

Overview

This type of Flex AppBlock (formerly known as "Augmented Reality") lets you, as the app builder; upload images that your app’s end user can use to overlay on top of images that they create with their devices. There are tons of interesting use cases that this functionality could be used for.  Here are just a couple, but it really could be anything you can think of!

  • Landscaping company to show off backyard designs
  • Photo booth at an internal corporate party
  • High end retail to ‘try on’ merchandise
  • Take a photo with a mascot for a sports team

The app user will be able to combine a photo of his own with any of the overlay images you upload into the platform.  The combination is known as a "composite image".

 

Photo

Overlay

Composite Image

Configuration

Global

On the Configuration page, on the Global tab, you can answer the configuration questions.

 

Overlay Images

On the Overlay Images tab, you can upload your overlay images.

 

Data Mapping

 

In Data Mapping, there are four fields by default:

  • Composite Photo (Image)
  • Comments (Long Text)
  • Date (Date & Time)
  • Location (Street Address)

These fields cannot be deleted, but you can add more using the green "Add Field" button.

 

 

Canvases

In Phone Canvases, there are three pages:

  • Input View
  • List View
  • Detail View

 

Input View

On the Input page, the upper part of the canvas is uneditable - this is where the app user will be able to manipulate the overlays with a photo from his phone (he could take a new photo or use an existing one).

 

 

From the "Inputs" tab of the Tool Box, you can add input fields to the lower part of the canvas.  This will allow the app user to enter data to go along with his composite image.

 

From the "Actions" tab of the Tool Box, you can add action buttons to the navbar or lower part of the canvas.  Be sure to add the "Save Item" button! 

 

 

List View

The List page will display the saved composite images.  You can add fields from the "My Content" tab of the Tool Box.

 

From the "Actions" tab of the Tool Box, you can add action buttons to the navbar.  Be sure to add the "Add Item" button! 

 

Detail View

The Detail page will display a single composite image.  Just like the Input canvas, the upper part of the canvas is uneditable - this is where the composite image will be displayed.

From the "My Content" tab of the Tool Box, you can add fields to the lower part of the canvas.

 

Device Behavior

 

 

When the app user first goes to create a new composite image, the app will ask for permission to use the device's camera.

Initial Screen

 

On the initial screen, the app user has a number of options:

  • Cancel button - return to the previous page
  • Flash toggle - turn camera flash on/off
  • Camera toggle - switch to front-facing camera
  • Swipe bar - change overlay
  • Gallery button - choose photo from device's gallery
  • Camera button - take new photo

 

 

The first time the app user taps the gallery button, the app will ask for permission to access the device's default photo gallery.

 

Edit Window

Once the app user takes or selects a photo, it will be displayed in the Edit window.  The user can use the swipe bar to look at the different overlays.

 

 

 

 

When the app user finds the desired overlay, he can manipulate it by touching the screen and using gestures to move, pinch, zoom, and rotate the overlay.  The overlay moves while the photo stays still.  At the bottom of the screen, "Overlay" is selected by default.  If the user taps "Image", he can manipulate the image while the overlay remains still.  **NOTE**  The image can be moved and zoomed but not rotated.

 

 

 

When the overlay is in the desired position, the app user taps "Next".

Crop Image

 

Now the user can move the composite image around to crop it - the final composite image will be a square.

 

 

Input Page

 

 

 

Finally, the user comes to the Input page.  He can enter data for the fields you put on the lower part of the Input canvas.  When finished, he can tap the Save action button you added to the navbar.

 

List Page

 

 

 

After the app user saves, he is taken to the List page where he can see the composite image he just added.

Detail Page

 

 

From the List page, the user can tap a row and go to the Detail page.

 

On the Configuration page, if you answered "Yes" to the question "Should the App User's content items be sent to the server?", then the app user's composite image will show up in AppOffice.

If you also answered "Yes" to the question "Should the Administrator/Moderator approval be required to publish the App User's content in the app?", then the user's composite image will be inactive - this means it will not show up on any user's List page.  You can make it active in AppOffice.  Look under the "Active" column and all active items will have a check, while all inactive items will have a minus sign.  Click the check/minus to toggle the item's active status.  When you change an item's active status, there is nothing to save - the change occurs immediately.