Changing the background of keyboard screens used by Breeze Kiosk, DSLR Remote Pro & Webcam Photobooth

This tutorial explains how to change the colors displayed in touchscreen keyboards in Breeze Kiosk, DSLR Remote Pro and Webcam Photobooth.

Changing the background color of the keyboard screens is explained in detail. The tutorial then explains how to change other keyboard colors in a similar way.

DSLR Remote Pro keyboard backgrounds are the same color as the screen background chosen in the setup wizard. The setup wizard also generates special XML files for email and text keyboards when these options are checked in the wizard.

Kiosk and Webcam Photobooth touch screen keyboards come with navy blue backgrounds. Letter and number buttons turn from dark gray to light gray when they are pressed.

This tutorial assumes you start from a working design for DSLR Remote Pro, Webcam Photobooth or Kiosk, which includes email &/or text sharing.

Warning: This tutorial is not suitable for  systems using keyboard images (keyboard_uppercase.tif, keyboard_uppercase_pressed.tif, keyboard_lowercase.tif, keyboard_lowercase_pressed.tif, keyboard_uppercase.jpg, keyboard_uppercase_pressed.jpg, keyboard_lowercase.jpg and keyboard_lowercase_pressed.jpg). To change keyboard colors in systems using keyboard images go to the Touchscreen Keyboard section of the user manual.

Working out Hex color code for the color you want to use

You need to know the hexadecimal  (HEX) codes for any colors you wish to use. If HEX notation for RGB colors is new to you, use Photoshop or google RGB color checker to find the code for your chosen color.

HEX color codes can be shown starting with 0x (eg 0x6667AB) or hash (eg #6667AB).

You need to use the version starting 0x… If you find a reference to a hex color starting with #, replace the hash with 0x (the first digit 0 is zero not the letter O)

• 0xFFFFFF is the HEX for white
• 0x6667AB is the HEX  for Pantone’s Very Peri
• 0x000000 is the HEX for black

What next?

Next you create or amend an special XML file containing the hex code for the background color of your keyboard, and save this in your PhotoboothImage/screens folder.

Don’t panic if you have never seen XML before. 

The example below gives your keyboard screens a white background. The hex code for white is 0xFFFFFF  (aka #FFFFFF). 

Check whether custom keyboards have already been set up

Before you start check whether custom keyboards or keyboard images have already been set up. This step is especially important if someone else set up your copy of the program.

Custom keyboards

• The programs save information about email keyboard customization in a file called email_keyboard.xml
• The programs save information about text keyboard customization in a file called mms_keyboard.xml

email_keyboard.xml and  mms_keyboard.xml are not always needed, so may not exist.

Keyboard images

Some systems use keyboard screen images to control the appearance of the keyboard. This tutorial is not suitable for  systems using keyboard images.

• keyboard_uppercase.tif
• keyboard_uppercase_pressed.tif
• keyboard_lowercase.tif
• keyboard_lowercase_pressed.tif
• keyboard_uppercase.jpg
• keyboard_uppercase_pressed.jpg
• keyboard_lowercase.jpg
• keyboard_lowercase_pressed.jpg

To change keyboard colors in systems using keyboard images go to the Touchscreen Keyboard section of the user manual.

Kiosk

If you have a Kiosk screens folder check whether it contains email_keyboard.xml, mms_keyboard.xml or keyboard images.

Kiosk does not always need a screens folder, so it may not be set up.

If there is no screens folder you need to create one and tell Kiosk where to find it.

Look in the Kiosk screens folder and check whether it contains email_keyboard.xml  and/or mms_keyboard.xml .

If the screens folder is empty then there is no email_keyboard.xml  or mms_keyboard.xml yet.

DSLR Remote Pro and Webcam Photobooth

Look in the PhotoboothImages folder and check whether email_keyboard.xml, mms_keyboard.xml or keyboard images exist already.

Changing the background color of an email keyboard

When there is no email_keyboard.xml file in the PhotoboothImages/Screens folder

Copy and paste the text below into a Text Editor such as Microsoft Notepad (which comes free with Windows)

<?xml version="1.0" ?>
<breeze_systems_photobooth version="2.2" build_date="Dec 15 2021">
<photobooth_settings>
<keyboard>
<background_color>0xFFFFFF</background_color>
</keyboard>
</photobooth_settings>
</breeze_systems_photobooth>

Save this as email_keyboard.xml in the PhotoboothImages/Screen images folder.

Start the program and select the email option. This brings up the keyboard where guests enter their email address. Your keyboard should now have a white background.

Changing the background color of SMS & MMS keyboards

When there is no mms_keyboard.xml file in the PhotoboothImages/Screens folder

Copy and paste the text below into a Text Editor such as Microsoft Notepad (which comes free with Windows 11)

<?xml version="1.0" ?>
<breeze_systems_photobooth version="2.2" build_date="Dec 15 2021">
<photobooth_settings>
<keyboard>
<background_color>0xFFFFFF</background_color>
</keyboard>
</photobooth_settings>
</breeze_systems_photobooth>

Save this as mms_keyboard.xml in the PhotoboothImages/Screen images folder.

To use a different background color 0xFFFFFF (white) with the hex code for another color. Here I have changed the text screen background to 0x6667AB

Changing background color when the email_keyboard.xml or mms_keyboard.xml already exists

You may find that keyboard xml file already exists. When this happens

• Take a look at the colors which have already been defined by running the program
• Consider whether the new background color will contrast with text  and key colors etc. (You can change other colors used in the keyboard if necessary.)

Open the xml file in Notepad ( or whichever text editor you use) and look for the line <background_color>….</background_color>

• Replace the hex code for the background color as above and save the file.
• Take care not to change anything else by mistake.

<?xml version="1.0" encoding="UTF-8"?>
<breeze_systems_photobooth version="3.17.1" build_date="Mar 23 2022">
<photobooth_settings>
<keyboard>
<background_color>0x6667AB</background_color>
<prompt_color>0x8D7960</prompt_color>
<key_text_color>0xFFFFFF</key_text_color>
<key_pressed_text_color>0xFFFFFF</key_pressed_text_color>
<key_background_color>0x505050</key_background_color>
<key_pressed_background_color>0x848484</key_pressed_background_color>
<key_outline_color>0x000000</key_outline_color>
<checkbox_tick_color>0xFF0000</checkbox_tick_color>
<text_foreground_color>0x000000</text_foreground_color>
<text_background_color>0xFFFFFF</text_background_color>
<text_font_name>Arial</text_font_name>
<text_point_size>510</text_point_size>
</keyboard>
</photobooth_settings>
</breeze_systems_photobooth>

Changing the color of other parts of your keyboards

You can change the colors of text, buttons etc on your keyboards in the same way that we changed the background color.

Let’s change the prompt text color to white as an example:

The text keyboards above display the prompt text ( Please enter your cellphone number:) in black.

To change the color of the prompt text to white(hex color code 0xFFFFFF)

• Open mms_keyboard.xml
• If there is a <prompt_color> tag in the code, change the hex color code to 0xFFFFFF
• If there is no <prompt_color> tag, add <prompt_color>0xFFFFFF</prompt_color> between the two <keyboard> tags:

<?xml version="1.0" encoding="UTF-8"?>
<breeze_systems_photobooth version="3.17.1" build_date="Mar 23 2022">
<photobooth_settings>
<keyboard>
<background_color>0x6667AB</background_color>
<prompt_color>0xFFFFFF</prompt_color>
</keyboard>
</photobooth_settings>
</breeze_systems_photobooth>

Run the program again. Please enter your cellphone number:should now be displayed in white.

Dive deeper

This tutorial has scraped the surface of the changes you can make. Every aspect of your keyboards can be customized, including switching to any UTC character set.

Making more complex changes is beyond the scope of this tutorial. Learn more about customizing

• Kiosk keyboards
• Webcam keyboards
• Adding consent check boxes to the Kiosk email screen

 

© Breeze Systems 2022