Editing the Display

This article demonstrates how to edit a kiosk display from the Admin Portal.

Accessing the Kiosk Display Editor

In the Admin Portal, on the lefthand menu, navigate to Setup > Kiosk Display.

To edit the display, select one of the elements on the display or click the Edit button in the top right corner.

Background Image

To add or update the background, the user can choose an image from their device after clicking Background.

Notes:

A pre-formatted image that includes all the required content can be selected as the background image.
Currently the editor does not support removing the background image once it has been saved. To remove the background image, it must be replaced by another image.

Elements

To add an Image, Text or Shape, the user can click on the respective button.

Every element added to the display can be moved, layered, re-sized, or anchored to certain sections of the display.

To remove an element, the user can select the element and click the red cross in the top right corner.
To re-size an element, the user can select the element and drag the bottom right corner vertically or horizontally.
To change an element’s layering position, under Layer, select the left icon to bring the element all the way to the front or select the right icon to push the element all the way to the back.

For example: To ensure that the text is not hidden by an image, the Layer option can be used to send the image behind the text.

To move an element on the display, the user can select the element and drag it to any desired position or use one of the available anchoring options.

Image

To change an Image, the user can select the image they want to change and click Change Image to select a different image.

Text

The user has the option to modify the font using the available options in the editor.

Font Family

The user can select any of the 8 options available for font styles.

Font Color

The user can select font color using the following options:

Color Slider

The user can slide to the desired color palette or use the dropper to select a more specific color.

Dropper

The user can select the dropper and choose a color from anywhere on the screen by dragging their mouse across the screen.

RGB

The user can input RGB (Red-Green-Blue) values to input a desired color.

HSL & HEX

The user can select other modes of color selection by using the arrows next to RGB. HSL (Hue-Saturation-Light) and HEX are available.

Shape

The user has the option to add or modify a shape using the following available options in the editor.

Radius sets how circular the shape should be.
Fill sets the color of the shape.

Demo Pot and Winner Data

The Demo Winner toggle allows the user to preview the placement of the winning number once drawn.

The user can revise Demo Max Pot to preview the area required for the pot feed. Note that this element cannot be removed from the display.

Winner On Top

The user can choose whether the winning number appears above or below the jackpot amount. By default, the jackpot is displayed above the winning number. This order can be reversed by enabling the Number On Top toggle (shown below).

Winning Number Label

The user can customize the text that appears before the winning ticket number once a winner has been selected. In the example below, ‘Number’ is displayed, but this label can be edited to any preferred text or removed.

Relative Size (%)

The Relative Size configuration gives the user the ability to adjust the size of the jackpot and winning number.

Adjusts the size of the winning ticket text relative to the jackpot
Use the – / + buttons to decrease or increase size

Example: Reducing from 50% (shown in the screenshot above) to 20% makes the winning ticket text smaller relative to the jackpot.