Customizing App Screens

The Mobibooth Cloud™ iOS app allows for photo booth operators to customize each of the screens displayed to the user. In this article we will introduce the various screens and their functions along with the customizations each support.

Start Screen #

The start screen is the screen that is displayed while the booth is idle. This screen supports the following customizations.

• Background color
• Background and overlay image
• Live view
• Custom text
• Font color and size

Instructions Screen #

The instructions screen displays a message to the user to help them prepare for the upcoming session. Text is displayed centered from the center of the screen both horizontally and vertically. This screen supports the following customizations.

• Background color
• Background and overlay image
• Custom text
• Font color and size
• Text tokens
• Timeout duration

Session Screen #

The session screen displays a countdown on the screen in addition to a live view (optionally can be turned off). This screen supports the following customizations.

• Background color
• Background and overlay image
• Live view
• Font color and size

Review / Share Screen #

The review screen displays the composite media file for the user to review. It provides the ability to retake the session or keep it. Once in the share mode all configured sharing options are presented to the user and workflow is provided for facilitating them.

This screen supports the following customizations.

• Background color
• Background and overlay image
• Media file layout
• Timeout duration
• Toolbar

Customizing App Screens #

Currently you can customize the Start Screen, Instructions Screen, Session Screen and Review Screen. There are some small differences in the items that can be adjusted for each of these that we will go through below.

Screen Background Color #

Using the color picker or text field you can set the background color of the screen. Screens support RGB color codes.

Screen Background / Overlay Images #

The screens of the Mobibooth Cloud™ iOS App support both a background and an overlay image. Screens are recommended to be 1024 pixels by 1366 pixels for portrait orientation and 1366 pixels by 1024 pixels for landscape orientation.

To set a new background or overlay image simply drag and drop your graphic onto the proper file drop zone. See below

When the screen has a background or overlay image already uploaded you will see it’s preview in the dropzone. You can upload a new one by dragging and dropping. You can remove the image by clicking on the remove button.

Live View #

Some screens support the display of the live feed from the camera. These screens allow you to enable/disable the live view, specify its location either in relative or a fixed manner. We will discuss each of these.

Enable/disable Live View #

As you would expect by selecting Off for the display mode will disable the live view on that screen.

Fixed Display Mode #

The fixed display mode allows you to specify the exact dimensions of the live view and the exact coordinates on the screen from the top left corner. This is the perfect mode for screen designs that decorate the live view area with an overlay or drop shadow.

Relative Mode #

The relative mode allows you to specify a percentage padding to the edge of the screen. The live view is then centered using these values and preserving its aspect ratio. The largest dimensions possible that fit within the box will be used.

Media File Layout #

The media file layout specifies where and how the final media file composite should be displayed to the user on the screen. It supports both the Fixed Mode and Relative Mode described above in the Live View section with one exception.

When in relative mode the Media File layout supports a maximum scale factor. Setting this will only allow the file to be displayed at that size. The default is 200%.

For example with the default value a media file of 400 pixels by 400 pixels would not be able to be displayed larger than 800 pixels by 800 pixels on the review/share screens.

Custom Text #

Screens that support custom text provide a text field to edit the text that will be displayed. Some screens support tokenized text where system specific tokens will be replaced with runtime data. When supported the tokens will be presented below the text field.

Different screens will display this text is designated areas. These areas are defined below.

Start screen: custom text is displayed at the bottom of the screen.

Instructions screen: custom text is displayed centered both horizontally and vertically.

Font Color and Font size #

Screens that support font color and size customization will provide a color picker and text field for color and text field for font size. Enter your desired value in their fields and the app will use them after syncing.

Text Tokens #

Different screens will display this text is designated areas. These areas are defined below.

{{PHOTO_CNT}}: this is replaced with the number of photos that will be taken by the app. This applies to the photo and gif modes.

{{GIF_LEN}}: this is replaced with the total duration of the output GIF file.

{{VIDEO_LEN}}: this is replaced by the duration of video that is going to be captured in seconds. This applies to the video mode.

{{PLURAL}}: used to denote pluralization on words based on number of photos.

Timeout Duration #

The timeout duration specifies in milliseconds how long the given screen will be displayed before proceeding to the next one. This is used for screens like the Instructions screen and Review / Share screen.

When applied to the review / share screen this time is reset whenever there is a user interaction with the toolbar. If a share modal is opened this timer will be paused indefinitely and will only resume once the share workflow is completed or cancelled.

Example: if the instructions screen is given a timeout value of 4000 it will display for 4 seconds allowing time for guests to read the screen.

Toolbar #

A few screens provide a toolbar for things like sharing. You can optionally turn this off which would essentially disable all sharing. It is not advised but is supported by the app.