Editing Screen Designs

In Breeze Booth, every single screen a user interacts with can be customized. But before diving in to editing your screen designs, it's important to understand the basic concept of how Breeze works. Each screen is made up of a design (which could be a jpg, png, video or all of them combined). The screens then have a touch screen action applied on top of them. Screens all have specific file names. For example, your start screen typically uses a file called ready.jpg and/or ready_overlay.png and your sharing screen typically uses a file called share.jpg.

Screens are designed as a whole, not as individual elements. You design how you want the entire screen to look, and then save it with the required file name, and place it in your Screen Folder and then apply your touch screen actions.

In this Guide

• Screen Designs
• Touch Screen Editor
• Example Edit of a Start Screen
• Regenerating Manifests
• More about Custom Interfaces

Screen Designs

Your screen designs are the visual elements users interact with (for example: your start screen, confirm printing screen, sharing screen etc). All these screens are saved within an event specific folder and have a specific filename. You can locate this folder from the General tab in the Event Editor.

Click the Open... button at the end of the Screen folder field to be taken to where these images are stored. These are the files that make up your event and can be edited to your liking.

Touch Screen Editor

The Touch Screen Editor is where you assign touch screen actions over your screen designs. You can open the Touch Screen Editor from the General Tab and click Touchscreen actions...

On the left hand side is a list of all the screens in your Screen Folder. And on the right hand side is a preview of that screen with any touch screen actions that have been applied. Click on a screen name to preview it. Right click on the Preview of that screen to add a touch screen action and/or view the list of actions available for that particular screen. You can also Right click on an existing touch screen action to edit its action. You can select a touch screen action by clicking on it, and dragging it to a new position or resize it by grabbing the corners.

Example Edit of a Start Screen

Let's make a simple edit to the Start Screen of one of the Demo events. We'll use the Simple demo, but any event will work. Firstly we'll locate the folder of Screen Designs, by Editing the Event, going to the General tab, and clicking on Open...

Take a copy of the file ready_overlay.png and edit it to your liking. When done, save a copy into the Screen Folder, replacing the original version with the new version.

Once that file has been replaced, open the Touch Screen Editor and select the screen name from the left hand list so you can preview it. You will need to make some adjustments. We can see (in the image below) that the existing touch screen actions (switchToStillsAndStart and switchToGIFAndStart) do not fully cover the new graphics. This means if a user were to tap on the PHO part of the new Photo button, nothing would happen.

To correct this, we have clicked on the touch screen action to select it, and then dragged the corners out so it fully covers the word PHOTO. We will do the same for the BOOM touch screen action.

Lastly, we will delete the two touch screen actions in the top left hand corner of the screen as they are not needed in this example. Right click on each action, and select Delete action. We will leave the touch screen action in the top right hand corner as this serves as a hidden menu with some operator functions.

Regenerate Manifests

Any time you edit a graphical element (a screen design, print overlay, video background etc) you need to Update the Manifests. This basically just tells the Breeze Booth app that there's a new file available to download. You do this from the list of events, by right clicking the event name, and selecting Regenerate manifests...

Learn More About Custom Interfaces

If you're ready to dive into learning more about Custom Interfaces, head over to the guides on Building Custom Interfaces.