Using the Touch Screen Layout

The touchscreen layout allows you to control the look and feel of the user interface that the operator sees. The layout is made up of 400 individual pages, and you can place buttons on the screen by dragging and dropping. Each button has a set of attributes that you can use to customise the look.

This will take you to the ‘Touch Screen Layout’ Page. If you click Accept.

You will see the ‘Loading screen’ followed by;

Here is a breakdown of the functions you will see on this page.

(Example touch screen layout editor screenshot) Explanation of the button menu area 

Screens on Left/Right
This option determines whether the screen appears to the left or the right of the transaction window.

Name
The name used for the current screen page. This is not used anywhere else and only serves to aid in design.

Screen Colour
The background colour used for the screen page.

Screen Page
Determines which screen page is being displayed. Either enter the number of the screen page or use the arrows to scroll to the appropriate screen page.

Step Size
This option Increases the alignment accuracy of the buttons.

Search Tab
You can drag and drop a record from any of the tables mentioned onto here. The system will then perform a search and will display a list of screens that the dropped item exists on. Using the alt key, you can then jump direct to a particular screen by clicking one of the results.

Placing a Button on to the Touch Screen Layout
There are two methods to placing a button on to the screen Drag and Drop or Snap to Grid, both are explained below;

Method One Drag and Drop
To place a button on the touch screen using this method simply highlight the button on the relevant list and drag and drop it into position. The button can easily be re-sized by holding the mouse down over one of the small squares around the button frame and dragging it into position. The appearance of the button can also be changed by editing the button properties (See the button properties section Further down).

Method Two Snap to Grid
A grid can be placed on the layout. Buttons can then be dragged and dropped on to the grid. The button will automatically re-size to the grid dimensions. Using a grid makes aligning the buttons easier and can save time.

To add a grid to the layout select the Grids tab. On the grids tab select which size grid to utilise from the dropdown list (NOTE: Columns and Rows can be added\removed once the grid is in place.) then click Add New. The grid will now appear on the layout. The grid can be re-sized by holding the mouse down over one of the small squares around the grid frame and dragging and dropping it into position.

The grid can be moved by clicking on the small square in the middle of the grid and dragging it into position. The appearance of the grid can also be adjusted by editing the grid properties.

Right-click over the grid and select ‘Copy Grid and Buttons’ then right-click either on the same screen or another screen and select paste. The grid will be pasted it to the same position on the screen.

Copying the Grid and Buttons to multiple screens
Right-click over the grid and select ‘Copy Grid and Buttons’ then right-click anywhere else on the screen and select ‘Paste to Multiple Screens’. A box will appear which lists all of the available screens, select which screens/ to paste the grid to and click ‘Paste’ to complete. 

NB: the copy and paste function makes individual copies of the grid onto multiple screens. For dynamic updating see pinned grids below.

Deleting the Grid
To delete a grid from the layout highlight it and either press the ‘Delete’ key on the keyboard or right-click and select delete grid.

Deleting a Button from the Grid
Highlight the buttons then right-click and select the delete button. Making a grid dynamically update (pin grid)

It is now possible to make a grid exist on more than one screen and dynamically update if anything changes on any of them. Unlike the copy and paste to multiple screens, this mode allows the grid to be dynamically updated on all screens that it appears on. To do this, click the grid you want to pin and make the pin grid attribute True. You will be asked at this point which screens this grid should also exist on. Select the screens in question and click Pin to finish. 

Any changes made will now be reflected on all.

Merging buttons within a grid
You can merge a button with another on a grid to give a grid with a custom layout within a single grid.

(Example of a 6 x 5 grid that has had the clear and 0 keys merged to make larger buttons)

To do this, first, click the top-left button (or the leftmost button). Hold down the ctrl key and select the bottom right button (or the rightmost button). Right-click (or bring up show menu) and click merge buttons.