Touchscreen Keyboard

Top  Previous  Next

An optional touchscreen keyboard can be displayed to allow users to enter information such as their email address. To enable the keyboard select "Display touchscreen keyboard" in the kiosk mode menu item editor:

 

kiosk_menu_editor

 

 

The touchscreen keyboard can be tested by pressing the "Test keyboard..." button. The default keyboard layout will fill the screen and look similar to the screenshot below:

 

keyboard

 

The text entered by the user is saved in the {user1} token (and the {user2} token if two text fields are defined)  and can be used in the command run after selecting a menu item. The checkbox status, if defined, is stored in the {chkbox1}, {chkbox2} etc. tokens. For example the command to email an image using the email_image.exe utility from Breeze Systems' Hotfolder Prints software might look something like:

 

"C:\Program Files\BreezeSys\HotFolder Prints\email_image.exe" -r{user1} -osales@breezesys.com -s"Photos from John and Sue's Wedding" "{parentDir}\HFP\{file}"

 

Customizing the keyboard

The layout of the keyboard can be customized by creating an XML settings file called keyboard.xml and putting this in the keyboard settings folder. This gives control over the size and position of the keys, the background color etc. A series of keyboard images can also be used if you need more control of the appearance of the keyboard.

 

The easiest way to customize the keyboard is to save a copy of the XML file and TIFF screen images used to define the default keyboard layout and then edit them as required. The files can be saved by first displaying the keyboard by pressing the "Test keyboard..." button and then holding down both the Shift and Ctrl keys and pressing the left mouse button. The keyboard.xml file will look something like this:

 

<?xml version="1.0" ?>

<breeze_systems_photobooth version="2.2">

<photobooth_settings>

 <keyboard>

   <text_point_size>480</text_point_size>

   <prompt1>Please enter your email address:</prompt1>

   <text1_y>411</text1_y>

   <text1_x>50</text1_x>

   <text1_w>300</text1_w>

   <background_color>0x000080</background_color>

   <transparent_color>0x000080</transparent_color>

   <text_color>0xFFFFFF</text_color>

   <show_cursor>0</show_cursor>

   <key>

     <left>58</left>

     <top>630</top>

     <width>112</width>

     <height>89</height>

     <legend>q</legend>

     <shifted_legend>Q</shifted_legend>

     <code>q</code>

     <shifted_code>Q</shifted_code>

   </key>

   <key>

     <left>186</left>

     <top>630</top>

     <width>112</width>

     <height>89</height>

     <legend>w</legend>

     <shifted_legend>W</shifted_legend>

     <code>w</code>

   </key>

   ...

   <key>

     <left>1296</left>

     <top>840</top>

     <width>160</width>

     <height>89</height>

     <legend>Shift</legend>

     <shifted_legend>Shift</shifted_legend>

     <code>Shift</code>

     <shifted_code>Shift</shifted_code>

   </key>

   <key>

     <left>400</left>

     <top>945</top>

     <width>368</width>

     <height>89</height>

     <legend>Send email</legend>

     <shifted_legend>Send email</shifted_legend>

     <code>OK</code>

     <shifted_code>OK</shifted_code>

   </key>

   <key>

     <left>784</left>

     <top>945</top>

     <width>368</width>

     <height>89</height>

     <legend>No thanks!</legend>

     <shifted_legend>No thanks!</shifted_legend>

     <code>Cancel</code>

     <shifted_code>Cancel</shifted_code>

   </key>

 </keyboard>

</photobooth_settings>

</breeze_systems_photobooth>

 

The <prompt1> tag defines the text that is displayed above the user input area and defaults to "Please enter your email address:". The <text1_x> and <text1_y> tags specify the position of the user input area. This is specified as the number of pixels down from the top, left corner of the screen. The width in pixels of the user input area can be specified using the <text1_w> tag.

Additional prompts can be added by including <prompt2>, <text2_x>, <text2_y>, <text2_w> etc. tags up to a maximum of 10 user input areas. The prompt tags can have an optional password field which if set to "1" will display the text in the user input area as * characters e.g. <prompt1 password="1">Please enter your password:</prompt1>.

When more than one user input area is defined users can switch between the input areas by touching them. The currently selected input area is highlighted in red.

 

The optional <text_point_size> tag defines the size of the text font used in the user input area. This is specified in tenths of a point and defaults to 480 (a point size of 48).

 

Up to 10 checkboxes can be added using the <chkbox1_prompt>, <chkbox1_x>, <chkbox1_y>, <chkbox2_prompt>, <chkbox2_x>, <chkbox2_y> etc. tags. The <chkbox1_prompt> tag specifies the text displayed to the right of the text box and can include a value attribute to specify whether the checkbox is initially checked or not e.g. <chkbox1_prompt value="0">Checkbox prompt (default off)</chkbox1_prompt> or <chkbox1_prompt value="1">Checkbox prompt (default on)</chkbox1_prompt>. The <chkbox1_x> and <chkbox2_y> tags specify the position of the checkbox.

The checkbox status is stored in the <chkbox1>, <chkbox2> etc. fields in the XML file saved with the photos.

 

The <background_color> tag specifies the background color of the window and the <key_text_color> specifies the color for the prompt text and key legends.

The optional <text_foreground_color> tag specifies the foreground color for text displayed in the user input areas. The default value if this tag is omitted is black (0x000000).

The optional <text_background_color> tag specifies the background color for the user input areas. The default value if this tag is omitted is white (0xFFFFFF).

The optional <transparent_color> tag specifies a color which will be made transparent when the keyboard is displayed.

All colors should be hexadecimal RGB values e.g. 0x000000 for black, 0xFF0000 for red, 0x00FF00 for green, 0x0000FF for blue, 0xFFFFFF for white.

 

The <show_cursor> tag specifies whether a gray cursor is shown in the user input area. Set this to 1 to display the cursor or 0 to hide it. The cursor display is useful if the keyboard allows the entry of spaces.

 

The <key> tag specifies the size and position of each key, its legends and what should be typed when it is pressed. The top left corner of the key is defined using the <left> and <top> tags and the width and height are specified using the <width> and <height> tags (all values are in pixels). The <shifted_legend> tag specifies what is displayed on the key when the shift key is pressed and the <legend> specifies the key legend when shift is not pressed.

The <shifted_code> tag specifies what is typed when the key is pressed when shift is pressed and the <code> tag specifies what is typed when the shift key is not pressed. The following codes have special values:

"Shift" - puts the keyboard into shifted mode (i.e. upper case) when pressed

"OK" - closes the keyboard window and returns the user input if at least one text input field contains text

"OK all" - closes the keyboard window and returns the user input only if all the text input fields contain text

"OK none" - closes the keyboard window and returns the user input even if none of the input fields contain text

"Cancel" - closes the keyboard window and cancels the user input

 

Keyboard images

Separate keyboard screen images can be defined if you need more control over the appearance of the keyboard. These images should be TIFF images the same size as the resolution of the screen and should be placed in the keyboard settings folder. The keyboard images should be named as follows:

 

keyboard_uppercase.tif - keyboard image showing upper case key legends

keyboard_uppercase_pressed.tif - keyboard image showing upper case key legends with the keys pressed

keyboard_lowercase.tif - keyboard image showing lower case key legends

keyboard_lowercase_pressed.tif - keyboard image showing lower case key legends with the keys pressed

 

If TIFF keyboard images aren't found the software will attempt to load JPEG images instead (keyboard_uppercase.jpg, keyboard_uppercase_pressed.jpg, keyboard_lowercase.jpg and keyboard_lowercase_pressed.jpg).

 

Please take care that the keys are in the same positions in each of the keyboard images and that these also correspond to the values in the keyboard.xml file. The <background_color>, <text_color>, <prompt>, <legend> and <shifted_legend> tags in the keyboard.xml file are ignored when keyboard images are used to define the appearance of the keyboard.

 

Note: If you only need to change the keyboard layout and are happy with the default keyboard display you only need to create a keyboard.xml file in the photo booth images folder and can delete the keyboard screen images (keyboard_uppercase.tif, keyboard_uppercase_pressed.tif, keyboard_lowercase.tif and keyboard_lowercase_pressed.tif). If keyboard images are defined the <prompt> tags in the keyboard.xml file will be ignored.