Adding your own buttons to RightBooth

A customer recently asked about adding their own buttons to use in RightBooth.  So here's how...

New Button
Each button in the RightBooth buttons library comprises two images, an unselected image and a selected image.
Here is an example of a button we ship with RightBoothfrom library:

Unselected button image

Selected button image

Notice how the selected image makes the button look pressed.
You can design your button images however you like, the pressed image can be the same as the unpressed image, or you could make it look highlighted,  or pressed,  as in the above example.

Once you've got your two images, you need to place them the following RightBooth Library folders:

• 'Unpressed' image is placed in the folder:  Documents\RightBooth5 Library\Buttons
• 'Pressed' image is placed in the folder:  Documents\RightBooth5 Library\Buttons\Down

The file format for the button images must be PNG.
If you want your button to look 'pressed' you must design the down image so that it moves in the Y down direction only.

Now you need to give your button images a filename that RightBooth can use to help position any icon that might be placed on it during the event...

New Button filename

Your button filename has to use the following naming convention if you want the button icons to appear on them in RightBooth...

BUTTON_NAME # ICON_CENTRE_Y_UNPRESSED # ICON_WIDTH # ICON_CENTRE_Y_EXTRA_PRESSED # .png

where...

• BUTTON_NAME can be any combination of valid characters
• ICON_CENTER_Y_UNPRESSED is the central position where the button icon will be placed on the button image as a percentage of the height of the button, measured from the top of the button.
• ICON_WIDTH is the width (and height) of the icon as a percentage of the button width.
• ICON_CENTRE_Y_EXTRA_PRESSED is the additional amount the icon image will move down when the button is pressed. Again as a percentage of the height of the button.

Taking our example button shown above, the filename for this button is:   B4#40#50#5#.png

This means...

• the button name is B4.
• the centre of the button icon will be positioned 40% down height of the button.  Note: icons are always positioned centrally across the width of the button.
• the width and height of the icon is 50% of the width of the button.
• when the button is shown pressed, the icon will be shown another 5% further down the button height, in this example it will be placed at 45% down from the top.

If you don't want the icon to change position when the button is pressed, set the last parameter to 0,  for example see button:   B1#50#60#0#.png

Remember that both your button images must have the same filename, which is possible because they are in different folders.


New Button Icons
If you want to design and use your own set of button icons within Rightbooth, you need to create a new set of icon PNG files and place them in a new sub folder within the RightBooth icons library folder:

Documents\RightBooth 5 Library\Buttons\Icons

For example, create a folder:   Documents\RightBooth 5 Library\Buttons\Icons\My Icons

The My Icons folder must then contain a set of icons having the same names as the other icons found in the other icon folders, e.g. agree.png, back.png, etc.

All icon files must be PNG files. The icon image width and height MUST be square, e.g. 150x150 pixels.