Adding your own buttons to RightBooth

Updated January 2023
This article explains how to create your own buttons that you can add to the RightBooth Media Library.  These buttons can then be chosen to appear on the button items on any of your RightBooth event screens.

New Button
Each button in the RightBooth Media Library comprises two images, an unselected image and a selected image.  Here is an example of a button that is installed in the  Media 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 have designed your two images (using your favourite image editing app) , you then need to place them the following RightBooth Media Library folders:

• The 'unselected' image is placed in the folder:  C:\Users\Public\Public Documents\RightBooth7 Library\Images\Buttons
• The 'selected' image is placed in the folder:  C:\Users\Public\Public Documents\RightBooth7 Library\Images\Buttons\Down

The file format for the button images must be PNG.
If you want your button to look like it has been 'pressed down' you must design the 'selected' 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 correctly 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 stored 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 PNG files and place them in a new sub folder within the following folder in the RightBooth Media Library:

C:\Users\Public\Public Documents\RightBooth7 Library\Images\Buttons\Icons

For example, create a folder:
C:\Users\Public\Public Documents\RightBooth7 Library\Images\Buttons\Icons\Fancy

The Fancy folder must then contain a set of image icons that have the same names as the other icons found in the other Icon sub folders, e.g. back.png, bin.png, etc.

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