Introduction

This article explains how the Photo Booth - Share via QR Code sample experience was built and how you can reuse it for your own needs. To access this sample, use the Examples tab of the Experiences panel in Composer. This sample is designed to be used across a wide range of use cases, from trade shows to retail stores.

About the "Photo Booth - Share via QR Code" sample

This Intuiface experience has been published as a webpage, despite using the same traditional approach to experience creation that has always been possible with Intuiface. In other words, nothing special was done to this experience to make it web-ready. This is the magic of Player.

Below is a live, interactive version of this experience.

You can interact with the experience below using any device with a camera. Go ahead - tap it!

What you are seeing is the web-published experience running within an iFrame. Below is the HTML code. Note that the "src" value is the URL of the published experience. Pasting that URL in a browser tab will run the experience full-screen. Try it - if you dare!

<iframe src="https://web.intuiface.com/photo-booth-share-via-qrcode" frameborder="0" width="100%" height="auto"></iframe>

How is this experience built?

The experience has been designed for easy customization through a built-in stylesheet and utilizes a Headless CMS base called "Photo Booth Content" to manage frames, props, and themes, all of which are images that can be easily replaced with your own content.

We are also using a variety of out-of-the-box Interface Assets - Global Variables, Cloudinary, Shopping List, Countdown, Share via Email (Hosted), and QR Code Generator - to bring this experience to life. 

Disclaimer: This experience is configured to use Intuiface's Cloudinary account and associated storage. Obviously, for your own use, you will need to create your own free (or paid) Cloudinary account and use that storage instead. 

The following stylesheet, located in the experience, serves as the primary resource for defining the background, button release states, font colors, and fonts. If you modify the fonts and colors here, the changes will be reflected throughout the experience.

Scene breakdown

"Attract" scene

The "Attract" Scene consists of several assets, including Image, Text, and Button Assets. One of the buttons is transparent and overlays the entire scene, ensuring a tap anywhere will be directed at that button. This button is used to simulate a tap on another button, located outside the visible scene and called the "Animation" button.

The Animation button is in all scenes. It triggers outro animation that appears just before navigating from scene to scene.

When you interact with this scene, you will be navigated to the "Home" scene and presented with two options. 

"Home" scene

Within the "Home" scene, you are presented with two buttons: "Single Photo (1x1)" or "Photo Grid (2x2)". When either of these buttons is released, we filter the "Matrix" property in the "Frames" collection of the Headless CMS base using either the value "1x1" or "2x2". We then set the global variable "Photo Amount" to either "1" or "4". All of these configurations affect the "Take Photo" scene, which is accessed when either of the two buttons is pressed.

(Single Photo Button) - Trigger and Actions

"Take Photo" scene

The "Take Photo" scene utilizes the Webcam Asset to capture photos.

The "Photo Amount" global variable set in the previous scene is analyzed by two conditional triggers to check if the value equals either "1" or "4". If it is "4" and the "Take Your Photo" button is released, the Webcam Asset takes four photos; if it is "1", only a single photo is taken.

"Take Your Photo" Button - Conditional Trigger for the value "1"

"Customization" scene

Within the "Customization" scene, you can select a theme, frame, and props to add to your photos. Once the "All done" button is released, it captures a snapshot of the Photo Group. At the scene level, when the snapshot is taken, the image is uploaded by the Cloudinary Interface Asset, using the credentials specified in the "Cloud Name" and "Upload Preset" global variables. When the image is uploaded, you will automatically be navigated to the "Save As" scene. If the photo upload fails, you will be presented with an error message.

When the image is uploaded, Cloudinary returns a URL. We assign this URL to the QR Code Generator to produce an on-screen image of the QR Code for the "Save As" scene.

We utilise the Shopping List Interface Asset in the "Customization" scene to store the list of props added to a photo. Whenever a prop is selected, it is added to the Shopping List. A Pinboard Collection in the Photo Group uses this Shopping List as a data feed. Every time a prop image is added to the Shopping List, it also becomes visible in the Pinboard Collection.

"Save As" scene

Finally, the "Save As" scene displays your customised photo along with its Cloudinary QR code. The QR Code's URL permits anyone with a phone to access the image.

How to reuse this experience

The easiest way to reuse this experience is to carry out the following steps:

1. Open the "Photo Booth - Share via QRCode" experience in Composer.
2. Use 'Save as" to create a copy of the experience with a preferred name.
3. When you use "Save As," Composer will ask if you want to duplicate the Headless CMS Base. Select "Duplicate" to duplicate the Headless CMS Base. (You don't want to have to create it yourself!)
4. Input your credentials in the "Upload Preset" and "Cloud Name" global variables after creating a Cloudinary account.
5. Customize the experience to suit your needs by altering the stylesheet or content within the H-CMS base.

Data structure of the H-CMS Base

The structure of the H-CMS base for this experience consists of three Components, which are used within the customisation scene.

• Props
• Themes
• Frames

As you can see from the screenshots, the structure is comprised of three Property types: Text, Number, and Image.

Content of the H-CMS Base

"Props" Content

The content of the Props component can be altered to contain any list of images you desire. These images must be transparent PNG images if you wish to display them on top of a photo. For each item you need to assign an image and an "Item Index", both of which are used in the Shopping List Interface Asset

"Themes" Content

The content for the Themes component can be modified to include any list of collection styles you prefer. The selected theme is used to filter the Frames list.

"Frames" Content

The content for the Frames component can be modified to include any list of frame images you wish. In this experience, we have provided two versions: a 1x1 matrix and a 2x2 matrix, enabling you to filter down to the appropriate layout.