Touchscreen Keyboards are your email and SMS sharing screens as well as your survey screens (eg, data collection or advanced user selections). A touchscreen keyboard can contain one or more input keys, text entry areas, checkboxes or radio buttons.
In this Guide
- Email Keyboard Filenames
- SMS Keyboard Filenames
- Survey Keyboard Filenames
- Touch Screen Actions
- Input Focus
- Error Screens
- Single Page Example
- Age Gate Example
- Multi Page Example
- Survey Data
- Adding a Survey Screen
- Event Codes
Email Keyboard File Names
| File Name | Description |
|---|---|
| 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 |
| keyboard_email_background.png | Optional. If the PNG background image is not found the keyboard background will use the default_background.jpg background image instead. |
| keyboard_email.mp3 | An MP3 audio file can be played when the keyboard is displayed |
The keyboard_email_uppercase.png and keyboard_email_uppercase_pressed.png files can be omitted if you don’t need shifted characters e.g. capital letters.
SMS Keyboard File Names
| File Name | Description |
|---|---|
| keyboard_text_lowercase.png | lower case keys |
| keyboard_text_lowercase_pressed.png | lower case keys that have been pressed |
| keyboard_text_uppercase.png | upper case keys |
| keyboard_text_uppercase_pressed.png | upper case keys that have been pressed |
| keyboard_text_background.png | Optional. If the PNG background image is not found the keyboard background will use the default_background.jpg background image instead. |
| keyboard_text.mp3 | An MP3 audio file can be played when the keyboard is displayed |
The keyboard_text_uppercase.png and keyboard_text_uppercase_pressed.png files can be omitted if you don’t need shifted characters e.g. capital letters.
Survey Keyboard File Names
| File Name | Description |
|---|---|
| survey_lowercase.png | lower case keys |
| survey_lowercase_pressed.png | lower case keys that have been pressed |
| survey_uppercase.png | upper case keys |
| survey_uppercase_pressed.png | upper case keys that have been pressed |
| survey_background.png | Optional. If the PNG background image is not found the keyboard background will use the default_background.jpg background image instead. |
| survey.mp3 | An MP3 audio file can be played when the keyboard is displayed |
Where is the number of the survey eg: survey1_lowercase.png.
The survey_uppercase.png and survey_uppercase_pressed.png files can be omitted if you don’t need shifted characters e.g. capital letters.
Touch Screen Actions
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.
| Action | Description |
|---|---|
| Accepts the current screen and moves to the next | |
| Cancels the screen. If a Survey will return to the ready screen. If a sharing keyboard will return to share screen. | |
| Enables the shifted keyboard eg: to display capitalised letters etc | |
| Acts as the “space bar” | |
| Acts as the “delete key” | |
| a-z, 1-0, !@# etc | Alpha numeric characters and symbols eg, what makes up the keyboard |
.com, gmail etc | Predefined words or phrases. eg: could be used to make "domain name" shortcuts to make entering email addresses faster. eg: gmail.com |
If a touchscreen action set to 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.
Input Focus
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
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.
Learn more about how Checkboxes work in the Touchscreen Editor.
Radio Buttons
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.
Learn more about how Radio Buttons work in the Touch Screen Editor.
Age Gate
You can stop people under a certain age from using the photo booth by having them verify their age. Use a Text Field and set it’s ID to: age where is the minimum age (eg: age18)
- survey1_keyboard_lowercase.png
- survey1_keyboard_lowercase_pressed.png
- age_too_young.png
- age_error.png
Single Page Example
This example combines key actions, checkboxes and radio buttons in a single page keyboard. This could be used as a Survey, or an Email Keyboard. The file names would be:
Survey
survey1_keyboard_lowercase.png
survey1_keyboard_lowercase_pressed.png
Email Keyboard
keyboard_email_lowercase.png
keyboard_email_lowercase_pressed.png
Multi Page Example
This example combines key actions, radio buttons, multiple pages and makes use of transparency on the last survey screen, to give users a chance to align themselves before starting the count down process.
- survey1_keyboard_lowercase.png and survey1_keyboard_lowercase_pressed.png
- survey2_keyboard_lowercase.png and survey2_keyboard_lowercase_pressed.png
- survey3_keyboard_lowercase.png and survey3_keyboard_lowercase_pressed.png
- survey4_keyboard_lowercase.png and survey4_keyboard_lowercase_pressed.png
- survey5_keyboard_lowercase.png
Displaying Error Screens
Fields can be mandatory or optional and can be used to enter free text, email addresses or telephone numbers. They can also have an optional regular expression to validate the input.
| File Name | Description |
|---|---|
| invalid_email_address.png | Displayed if the id is set to “email” or “cc” the text field will only accept an email address e.g. name@site.com |
| invalid_phone_number.png | Displayed 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). |
| mandatory_text_missing.png | Displayed if the user fails to enter anything in any other mandatory text field. |
| mandatory_text_missing_.png | Displayed if the user fails to enter anything in a specific mandatory text field, where is the ID of the field, eg: mandatory_text_missing_name.png |
| regex_failed_.png | Displayed if a regular expression is used to validate the field, and it does not validate, where is the ID of the field, eg: regex_failed_phone.png |
| mandatory_checkbox_.png | Displayed if a mandatory checkbox has not been checked, where is the ID of the checkbox eg: mandatory_checkbox_privacy.png |
| mandatory_radiobtn_.png | Displayed if a mandatory Radio Button is not selected, where is the ID of the Radio Button Group eg: mandatory_radiobtn_position.png |
| age_error.png | Displayed if the age entered is in an invalid format eg 1 Feb 1998 instead of 19980201 |
| age_too_young.png | Displayed if the age entered is less than the specified in the Age ID field |
Surveys
(…keep rest of your XML, tokens, examples, and sync keyboard details exactly as is, formatted with Textile code blocks for XML snippets…)
Post your comment on this topic.