Keyboards and Surveys

Top  Previous  Next

Touchscreen keyboards are used to capture user input such as email addresses and phone numbers for sharing photos or for responses to survey questions. A touchscreen keyboard can contain one or more keys, text entry areas, checkboxes or radio buttons.

 

The appearance of the touchscreen is defined by PNG screen images e.g.

 

The appearance of the keyboard is defined by up to four PNG screen images e.g.

keyboard_email_lowercase.png - lower case keys

keyboard_email_lowercase_pressed.png - lower case keys that have been pressed

keyboard_email_uppercase.png - upper case keys

keyboard_email_uppercase_pressed.png - upper case keys that have been pressed

 

The behavior is defined by actions added using the touchscreen actions editor in the Event Editor and is saved in an XML file e.g.

keyboard_email.xml

 

The alpha channel of the PNG images can be used to control their transparency allowing areas of the keyboard to fully or semi-transparent so that the screens beneath them are visible.

 

When the keyboard is displayed initially it uses the lower case image e.g. keyboard_email_lowercase.png.

 

If the touchscreen action for a normal key is pressed (e.g. 'a') the area corresponding to the touchscreen action is copied from the "lower case pressed" image to provide a visual indication that it has been pressed and then it reverts to the "lower case" image. The letter (or word) in the touchscreen action is added to the text area that has focus.

If a touchscreen action set to <shift> is pressed the keyboard is updated to use touchscreen areas copied from the "upper case" image and the next normal key pressed will perform the upper case action. A visual indication that the key has been pressed is provided by copying the touchscreen action area from the "upper case pressed" image. The keyboard then reverts to the lower case state.

 

If keyboard has one or more text fields the currently selected one (aka the text field having input focus) is highlighted by copying the area assigned to the text field from the "lower case pressed" image. All other text fields will display the area copied from the "lower case" image. This provides a way of giving the user a visual indication of which text field will receive input.

 

Checkboxes can be selected or not selected. When the user taps on the touchscreen area for a checkbox it toggles its state i.e. switches from selected to not selected or vice versa. The checkbox's state is indicated by copying the touchscreen area from the "lower case" image when it is not selected or from the "lower case pressed" image if it is selected.

 

Radio buttons are similar to checkboxes except that they can be defined in groups and one and only one radio button can be selected within a group. If you tap on a radio The radio button's state is indicated by copying the touchscreen area from the "lower case" image when it is not selected or from the "lower case pressed" image if it is selected.

 

The different types of keyboard have different prefixes:

keyboard_email_ for the touchscreen keyboard displayed when sharing by email e.g. keyboard_email_lowercase.png

keyboard_text_ for the touchscreen keyboard displayed when sharing by text e.g. keyboard_text_lowercase.png

survey<n>_keyboard_ for the touchscreen keyboard for survey screen <n> e.g. survey1_keyboard_lowercase.png

 

Survey Keyboard Example Images

 

survey1_keyboard_lowercase

survey1_keyboard_lowercase.png
 

survey1_keyboard_lowercase_pressed

survey1_keyboard_lowercase_pressed.png

survey1_keyboard_uppercase

survey1_keyboard_uppercase.png

survey1_keyboard_uppercase_pressed

survey1_keyboard_uppercase_pressed.png

 

 

When the survey keyboard is first displayed it will show the lower case image with the area for the first text field highlighted by copying the area from the survey1_keyboard_lowercase_pressed.png image:

 

survey1_keyboard_initial

 

When tapping the normal keys the key will be briefly highlighted using an area copies from the survey1_keyboard_lowercase_pressed.png image and the text added to the highlighted text field. Tap on the shift (up arrow) key and all the keys will copied from the survey1_keyboard_uppercase.png image except the two shift keys which are copied from the survey1_keyboard_uppercase_pressed.png image because they are pressed:
 

survey1_keyboard_shifted

 

Keyboard Images for checkboxes and radio buttons

 

Checkboxes and radio buttons only require the lowercase and lowercase_pressed keyboard images. They display an area copied from the lowercase keyboard image when not selected and from the lowercase_pressed image when selected.

Here are some example keyboard images for a survey2 screen with checkboxes and radio buttons:

 

survey2_keyboard_lowercase

survey2_keyboard_lowercase.png

 

survey2_keyboard_lowercase_pressed

survey2_keyboard_lowercase_pressed.png

 

 

 

The keyboard was setup so that the "free bar of chocolate" checkbox was initially set and the two radio button groups defaulted to the first radio button in each group. What is initially displayed is the survey2_keyboard_lowercase.png image with areas copied from the survey2_keyboard_lowercase_pressed.png for the "chocolate" checkbox and the "every day" and "16 or over" radio buttons:

 

survey2_keyboard_initial

 

Displaying error screens

 

Text fields can be mandatory or optional and can be used to enter free text, email addresses or telephone numbers. If the user taps the area with the "<ok>" touchscreen action and a text field contains an error an optional error screen will be displayed, the text area will be highlighted by giving it input focus and the keyboard screen won't close.

 

The type of text field is defined by the "id" entered using the touchscreen action editor in the Event Editor.

 

If the id is set to "email" or "cc" the text field will only accept an email address e.g. name@site.com.

If the user enters an invalid email address or enters nothing in a mandatory email or cc text field the optional error screen named invalid_email_address.png is displayed for a few seconds.

 

If the id is set to "phone" the text field will only accept a phone number in the form of 0 followed by a series of numbers or + followed by a series of numbers (for international dialing codes).

If the user enters an invalid phone number or enters nothing in a mandatory phone text field the optional error screen named invalid_phone_number.png is displayed for a few seconds.

 

If the id is set to anything else the text field will accept any text. If the user fails to enter anything in a mandatory text field an optional error screen can be displayed for a few seconds. The default name for the error screen is mandatory_text_missing.png but a specific error screen can be displayed by adding the id to the end of the filename e.g. if the text field id is "age" the error screen would be named mandatory_text_missing_age.png.

 

Surveys

 

Survey keyboards are displayed after the starting the shooting sequence before the initial countdown commences. The first survey screen should have the prefix survey1_keyboard_ e.g. survey1_keyboard_lowercase.png. You can define as many survey screens as you like by naming them in sequence e.g. survey1_keyboard_, survey2_keyboard_, survey3_keyboard_ etc.

 

If the user taps a touchscreen area with the action "<cancel>" the shooting sequence is aborted and the ready screen is displayed.

 

The survey data is included in the XML summary file that is saved after each session e.g.

 

<?xml version="1.0" encoding="ISO-8859-1"?>

<breeze_systems_photobooth id="86EC1E02-CCBA-49F5-ABA7-5292B475255D" app="Breeze Booth" build="26" name="iPad Pro 11" version="1.0">

       <photo_information>

               <date>2019/02/14</date>

               <time>17:35:57</time>

               <photobooth_images_folder>Portrait with survey and sharing/portrait</photobooth_images_folder>

               <prints>1</prints>

               <survey_data>

                       <survey1_text id="name">Chris</survey1_text>

                       <survey1_text id="team">Breeze</survey1_text>

                       <survey2_chkbox id="emails">0</survey2_chkbox>

                       <survey2_chkbox id="chocolate">1</survey2_chkbox>

                       <survey2_radio id="run">2</survey2_radio>

                       <survey2_radio id="age">1</survey2_radio>

               </survey_data>

               <photos>

                       <photo md5="ab18e7101d89e13dc00de241e2533651" image="1">17-35-57.jpg</photo>

                       <processed/>

                       <output md5="e55acfce5c8314afe46061ad1f895a8a">prints/17-35-57.jpg</output>

               </photos>

       </photo_information>

</breeze_systems_photobooth>

 

The survey data can also be added to print captions or included in message text using tokens. These have the form {<survey#>_<type>_<id>}  

e.g.

The token for the results from a text field with id “name” on survey screen 1 would be: {survey1_text_name}

A checkbox with id “chocolate” on survey screen 2 would be: {survey2_chkbox_chocolate} – returns 1 if checked else 0

A radio button in group “run” on survey screen 2 would be: {survey2_radio_run} – returns the id of selected radio button