Touchscreen Editor

Top  Previous  Next

The touchscreen editor provides an interactive way to add touchscreen actions to control the photo booth. It also provides a way to edit touchscreen keyboards and survey screens.

Click on "Touchscreen actions..." in the "General" tab of the "Photo Booth Settings" dialog to open the touchscreen editor:

 

touchscreen_editor

 

Touchscreen actions control what happens when different parts of a screen are touched. Different actions can be defined for specific areas of each screen.

 

There is a list of screen and keyboard images on the left of the window and on the right there is a preview showing the screen and any touchscreen actions that have been defined for that screen. Click on any screen image in the list to select that screen. A brief description of the selected screen is displayed on the left above the list of screens. Please see Screens Displayed to the User for more information about the different screens.

 

Touchscreen actions are shown in the preview as gray boxes with a caption in the center indicating their action. Click on touchscreen action to select it. The box defining the active area of the touchscreen action will be highlighted to indicate that it has been selected (as shown below) and a brief description of the action will be displayed on the left above the list of screen images.

 

touchscreen_action_selected

 

The touchscreen area can be moved by left clicking the mouse and dragging it to the new position. The size of the touchscreen area can be adjusted by clicking on one of the corner handles and dragging it. Right click on the touchscreen action to display an option menu:

 

touchscreen_action_menu

 

Select "Add action..." to add a new touchscreen action (you can also right click anywhere on the screen preview to display a menu to add a new action). This will display a list of the touchscreen actions that can be added to the screen:

 

add_touchscreen_action

 

Select an action from the list and click "OK" to add it or "Cancel" to dismiss the dialog.

 

Select "Edit action..." from the right click menu to edit an existing action:

 

edit_touchscreen_action

 

The action can be changed to a different action by selecting the new action from the dropdown list. The position and size of the the active area is defined as percentages of the screen width and height. This ensures that the touchscreen actions appear in the same relative position on the screens of iPads with different screen resolutions.

 

Live View Area

 

The live view area defines the size and position of the live view display on the screen and is only shown when one of the ready screens is selected in the touchscreen editor. There can only be one live view area in the ready screen. It can be moved and resized in the same way as touchscreen actions but it cannot be deleted.

 

Keyboards and Survey Screens

 

The touchscreen editor can also be used to edit keys, text inputs, checkboxes and radio buttons for keyboards and survey screens. Keyboards and survey screens work in a similar way. Their visual appearance is defined by two or four PNG images e.g.

keyboard_text_lowercase.png - keyboard appearance when no keys are pressed and shift is not pressed

keyboard_text_lowercase_pressed.png - defines the appearance of a key when it is pressed and shift is not pressed

keyboard_text_uppercase.png - keyboard appearance of a key when it is not pressed but shift is pressed

keyboard_text_uppercase_pressed.png - defines the appearance of a key when it is pressed and shift is pressed

 

Their behavior is defined by the key, text area, checkbox and radio button actions defined using the touchscreen editor. Select the keyboard_text_lowercase.png screen image from the list to display the keyboard used for entering phone numbers when sending texts:

 

touchscreen_editor_text_kbd

 

Adding/Editing Keyboard Actions

 

Right click on a key to edit it (or right click on the screen image and select "Add key action..." to add one):

 

touchscreen_keyboard_menu

 

add_keyboard_action

 

Each key can have a lower case action (which is applied when it is tapped and shift is not pressed) and an upper case action (which is applied when it is tapped and shift is pressed). The action can be a single character (e.g. the number 4 for entering a phone number), a string of characters (.e.g. "gmail.com" to provide shortcuts for entering common email addresses) or one of the following special actions enclosed in angle brackets:

 

<ok> - validate the input and close the keyboard if all the input fields are valid else display an error screen if available

<cancel> - cancel keyboard input and close the keyboard screen without validating the inputs

<delete> - delete the last character from the currently selected text input area

<shift> - toggle keyboard shift: all the keys on the keyboard will be updated by copying areas from the lower case image if shift is not selected or the upper case image if shift is selected

<space> - add a space to the currently selected text input area

 

Adding/Editing Text Inputs

 

Right click on a text input to edit it (or right click on the screen image and select "Add text input..." to add one):

 

edit_keyboard_text

 

The text input id is used to identify the text input when it is saved in the XML summary file. The following special ids perform extra validation when closing the keyboard:

phone - checks that the phone number starts with an optional + (for international numbers) followed by a series of digits

email - checks whether the text is an email address in the form name@domain.com

cc - checks whether the text is an email address in the form name@domain.com

 

Text keyboards can only contain a single text input with id "phone". Any additional text inputs with id "phone" are ignored.

 

Email keyboards can have 1 or more text inputs with id "email" and zero or more text inputs with id "cc". The "email" fields are used as the "to" addresses when sending emails and the "cc" fields are set to the CC email addresses.

 

The size of the text displayed in the text input is defined as a percentage of the screen height to ensure screens appear the same on different iPads with different screen sizes and resolutions.

The color setting specifies the color of the text in the text input.

The background appearance of the text input area is copied from the lower case keyboard image if the text area is not selected or the upper case keyboard image if it is selected. The area defined in the touchscreen editor specifies the area that is copied from the lower case or upper case keyboard image.

Please see Keyboards and Surveys for more information.

 

If the "Mandatory input" checkbox is selected the text input must contain one or more characters and must be a valid phone number (if the id is set to "phone") or a valid email address (if the id is set to "email" or "cc").

 

Adding/Editing Checkboxes

 

Right click on a checkbox to edit it (or right click on the screen image and select "Add checkbox input..." to add one):

 

add_touchscreen_checkbox

 

The checkbox id is used to identify the checkbox input when it is saved in the XML summary file.

 

The appearance of the checkbox is copied from the lower case keyboard image if the checkbox is not selected or the upper case keyboard image if it is selected. The area defined in the touchscreen editor specifies the area that is copied from the lower case or upper case keyboard image.

Please see Keyboards and Surveys for more information.

 

The "Initially checked" checkbox specifies whether the checkbox should be selected when the keyboard or survey screen is displayed.

If the "Mandatory" checkbox is selected the checkbox must be selected before the keyboard closed using the "<ok>" action.

 

Adding/Editing Radio Buttons

 

Right click on a radio button to edit it (or right click on the screen image and select "Add radio button..." to add one):

 

add_touchscreen_radio_button

 

Radio buttons are similar to checkboxes but allow multiple choice type questions where one and only one button can be selected. The "Radio button group" setting is used to define groups of radio buttons. One and only one button can ever be selected within a given group of radio buttons.

 

The button id is used to identify the selected button when it is saved in the XML summary file.

 

The appearance of the each radio button is copied from the lower case keyboard image if the button is not selected or the upper case keyboard image if it is selected. The area defined in the touchscreen editor specifies the area that is copied from the lower case or upper case keyboard image.

Please see Keyboards and Surveys for more information.

 

Menus

 

Menus are displayed in a similar way to keyboards and survey screens but only need two screens to define them e.g. menu1.png and menu1_selected.png. Menus can only contain touchscreen actions. Actions that represent a state (e.g. colorStyle) are displayed using the main image (e.g. menu1.png) with the touchscreen area being copied from the "selected" image (e.g. menu1_selected.png).

Please see Menus for more information.