Skip to content

Home | Touch

HTML Based Panel Builder and Runner

Immersive Touch Panels offers HTML web based interface to visually define and use the touch panels. The software provides a HTML server that can be configured to run on a given port number. Once enabled, the HTTP server will offer a web application to be used from any web enabled device. Just point the browser to the IP address and the port specified and start to use the application.

The web application has two entry points: The Viewer and the Builder. User can switch between the entry points using the menu available from the top left button.

Viewer

The Viewer entry point (the default) screen. On this screen a list of all defined panels is shown, and the user can click on the desired panel to open it. The URL address of the panel can be also copied to clipboard using the “Copy to clipboard” button on the right side of the panel name.

Builder

Before a panel can be used, the panel has to be fully designed and built. The Builder screen offers a simple but powerful visual editor to create the most sophisticated and professional touch control panels.

From the top menus, select the “Builder” interface. The user will be presented with the entry point of the builder interface. Here the already defined panels are listed. Clicking on the panels the panel editor will be opened to edit the panel elements. Using the New button, user can create a new panel and directed to the panel editor page.

When a new panel is created, just give it a unique panel name to be able to find and use this panel from the Viewer interface. Use the save button to save the panel definition.

Panel is composed of Widgets that can be put on the pane. The top level element is the panel element that can contain widgets. 3 types of widgets are supported: Buttons, Labels and Groups. Widgets can be dragged and dropped to the panel. Give each instance of the widgets a unique name that can be seen in the widgets list. Each type of widget will be described in details.

The panel element can be configured to have a defined resolution (to match the touch device screen resolution. The background can be configured to be a single color background or an image from the uploaded images.

Button Properties

A Button is a widget that can be used to execute commands on the targets, or navigate to other panels. Button has the following groups of properties:

  • Text: To defined the button text properties
  • Background: To define the button background properties
  • Position: To define the button position, size and order on the panel
  • Command: To defined the target and the command to be executed on the target when he button is pressed. First select the desired target. A special target “Navigate To” is available to navigate to another (previously defined) touch panel. Once the target is selected, a list of commands for this target is presented. When the commands is selected, the possible parameters of the command can be entered.

Label Properties

A Label is a widget that can be used to show static text or to show a text coming from a target source. The target sources provide a dynamic text that will update the label text when the source changes. Label has the following groups of properties:

  • Text: To defined the label text properties. If the dynamic text is selected, the user can select and target and the source from that target to provide the text for the label.
  • Background: To define the label background properties
  • Position: To define the label position, size and order on the panel

Group Properties

A Groups is a widget that can be used to visually group one or more widgets and to provide visual containers group related buttons or labels. Group has the following groups of properties:

  • Text: To defined the group text properties.
  • Background: To define the group background properties
  • Border: To defined the group border properties.
  • Position: To define the group position, size and order on the panel

For crating the most appealing and professional touch panels, users can create images that can be used as a background for the panel, button, labels and groups. This way the visual representation of the panels can be 100% customized to match the user preferences. The fowling panel uses an image for the background and each button uses its own background image.