Codecore Logo
Quick Search
»
Advanced Search »

Touch Screen Builder

RSS
The Touch Screen Builder application provides a visual design experience to create rich interactive graphical user interfaces to control your system from a standard pc monitor, touch screen monitor, iPhone, iPod Touch, iPad, or PocketPC.

A touch screen hardware device is NOT required, a mouse and normal monitor can also be used.

Use the Touch Screen Viewer application to view touch screen interfaces created with the Touch Screen Builder application.

This can be installed on multiple pcs.

Table of Contents [Hide/Show]


When do you need the Touch Screen Builder application?
Sign-In
Quick Start to Building Rich, Interactive User Interfaces
Adding, Editing, or Deleting Controls
   Adding Controls
   Deleting Controls
   Editing Touch Screen Interface Properties
   Editing Control Properties
How to Select, Move, and Size Controls
   Selecting Control(s)
   Deselecting Control(s)
   Moving Selected Controls
   Sizing Controls
   Aligning Selected Controls
   Evening the Spacing Between Selected Controls
   Making Controls the Same Width, Height, or Size
   Centering Selected Controls in a Screen
   Layering Selected Controls
Cutting, Copying, and Pasting Controls
Undo/Redo Previous Actions
Importing and Exporting Touch Screen Interfaces
   The Import/Export File
   Importing
   Exporting
Touch Screen Variables
Managing Image Files
   Adding Image Files
   Deleting Image Files
   Cut, Copy, Paste Image Files
   Renaming an Image File
Tips and Tricks
   Image Directories
   Device Names
   Control Sizes
   Backgrounds and Images
   Specialized Buttons
Touch Screen Properties Window
Common Control Property Panes
   Basic
   Property Binding
   Text
   Border
   Background
   Images
   Event Actions
   User Access
Control Library
   Label
   Button
   Text Entry
   Radio Button
   Loader Button
   Loader Radio Button
   Paging Button
   Property Offset Button
   Infrared Button
   Refresh Button
   Boolean
   Slider
   Slider Label
   Image List
   Date & Time
   Spinner List
   Paged List
   Device Spinner List
   Web Browser
   Inner Touch Screen
   Media Player Cover Art
   Media Player Seek Slider
   Media Player Track Position
   Media Browser
      Searching Media with the Text Entry Control
   Media Browser Grouping Button
   Media Browser Back Button
   Media Player Playlist
   Media Library Item Text
   Media Library Item Image
Understanding When Control Display Values Are Updated
Shortcut Keys
Creating Touch Screens for iPhones and PocketPCs
   Screen Resolution
Command Line Switches


When do you need the Touch Screen Builder application?

The Touch Screen Builder application is not required for system operation and is only used for creating and editing touch screen interfaces. If you do not plan on creating or editing touch screen interfaces from a particular computer then you do not need to install or run Touch Screen Builder from that computer.

Sign-In

User's are required to sign into the application when it is started. Access to the Touch Screen Designer is restricted to those user accounts with access to it.

The user must be a member of one of the following user types:

  • Administrators
  • System Operators
  • Touch Screen Designer

Tip: To bypass the sign in window when security is not a concern, a user name and password can be added to the application shortcut as command line switches. See the Command Line Switches section later in this document.

Quick Start to Building Rich, Interactive User Interfaces

You ordinarily build Touch Screen interfaces by adding controls to the interface and developing responses to user actions, such as button presses. A control is a discrete user interface (UI) element that displays data and/or accepts user interaction such as a button press. Each control has a set of appearance and behavior properties associated with it. Each control has a set of appearance and behavior properties associated with it.

For those who would like to get right into building a touch screen interface, here is a simple overview of the process:

Creating a new touch screen interface
Start the Touch Screen Builder application, sign in and click cancel in the touch screen chooser window. You will now be editing a new touch screen.

Editing the touch screen interface properties
The first thing you will likely want to do is set the touch screen interface properties, such as size, background color, etc. To do this left click anywhere in the touch screen and select Properties (or double click it, or click the Properties icon in the toolbar). Give the touch screen a unique name that you can reference it by, an optional group name and description. Touch screens can be nested within other touch screen, known as inner-touch screens. When choosing a touch screen in the touch screen loader window, it is often convenient to filter the list and only show top level touch screens. Since this is likely your first touch screen go ahead and check the Top Level touch screen checkbox. Choose a size and an optional background color and image. Transparent backgrounds are used for inner-touch screens. When done click the ok button.

Adding your first control
Once you have set the size, you'll want to start adding controls to the touch screen interface. From the Toolbox menu, choose the Label control. Controls are always added to the touch screen in the upper right corner. If your background is transparent you may have to look closely to see the control outline. You can move the control around the interface by left clicking the control and dragging the control while the left mouse button is depressed. You can change the controls size by left clicking the lower right corner of the control and dragging the corner while the left mouse button is depressed.

Editing the control properties
To edit the control properties, right click on it and select Properties (or double click it, or select it and click the Properties icon in the toolbar). From the properties window you can choose any property pane from the property pane list on the left to edit a different group of properties for the control. Some property panes are common across most control types. For example every control has the Basic properties pane. Just to give an example of editing the control properties, click the Text pane, then enter some new text in the Text field on the right. Then click Ok. You will now see the control on the touch screen has the text you entered.

There are a large number of control types, each for a different purpose. When opening the Toolbox menu, hovering over a menu item will show a tool tip giving a short description of the control.

Continue adding controls to the interface, and when done choose Save from the File menu. You can then open the Touch Screen Viewer application and load your new touch screen interface.

Adding, Editing, or Deleting Controls

Using Touch Screen Builder, you can add, resize, edit, and delete controls in the touch screen interface. You can also edit the properties of a control, such as its ID, or whether it is initially visible at load time.

Adding Controls

From the Toolbox menu, choose the desired control type. Controls are always added to the touch screen in the upper left corner. If your background is transparent you may have to look closely to see the control outline. Controls can also be added by using cut/copy/paste which is described later.

Deleting Controls

Select the controls to delete, then:

  • From the Edit menu select Delete.
  • Click the Delete icon in the toolbar.
  • Press the Delete keyboard key.

Editing Touch Screen Interface Properties

The touch screen properties window can be opened by:

  • Right click the touch screen background (not over a control) and select the Properties menu item.
  • Double click the touch screen background (not over a control).
  • Deselect all controls by clicking the touch screen background (not over a control), and from the Edit menu select Properties.
  • Deselect all controls by clicking the touch screen background (not over a control), and select the Properties icon in the toolbar).

Editing Control Properties

A control's properties window can be opened by:

  • Right click on the control and select the Properties menu item.
  • Double click the control.
  • Select the control and click the Properties icon in the toolbar.

How to Select, Move, and Size Controls

The Touch Screen Builder application allows you to select, move, and size controls by using mouse gestures or keyboard shortcuts.

Selecting Control(s)

  • Left click a control to select it (previously selected controls will be deselected).
  • To individually select multiple controls, while pressing down the CTRL key, click each control you want to select.
  • To select multiple controls at once, select the background or hold the ALT key + press the mouse button and outline the controls to select.
  • From the Controls menu, choose the name of the control to select (previously selected controls will be deselected).
  • To select all controls:
    • From the Edit menu, select Select All.
    • Press CTRL-A on the keyboard.
  • To inverse the selection:
    • From the Edit menu, select Inverse Selection.

Deselecting Control(s)

  • To deselect all selected controls, left click the touch screen background.
  • To deselect in individual control, left click the previously selected control(s) while pressing down the CTRL key.

Moving Selected Controls

  • While holding down the left mouse button, drag the selected controls to the desired location.
  • Position the selected controls by pressing the arrow keys. Hold shift down to move the controls by 10 pixels increments.
  • Edit the X and Y coordinates of the control in the control's Basic property pane.

Sizing Controls

  • Position the mouse over the lower right corner of the control (you will see the cursor change to indicate sizing), then left click and drag the corner while holding down the the left mouse button
  • Edit the height and width values in the control's Basic property pane.

Aligning Selected Controls

From the Layout menu, choose Align, and then choose one of the following alignments:

  • Lefts: aligns the selected controls along their left sides.
  • Centers: aligns the selected controls horizontally along their center points.
  • Rights: aligns the selected controls along their right sides.
  • Tops: aligns the selected controls along their top edges.
  • Middles: aligns the selected controls vertically along their middle points.
  • Bottoms: aligns the selected controls along their bottom edges.

Evening the Spacing Between Selected Controls

From the Format menu, choose Horizontal Spacing or Vertical Spacing, and then choose one of the following spacing alignments:

  • Make Equal: spaces controls evenly between the leftmost and the rightmost -or- topmost and the bottommost control selected.
  • Increase: increases the space between each selected control by 10 pixels.
  • Decrease: decreases the space between each selected control by 10 pixels.
  • Remove: removes the spacing so that the control's borders are touching.

Making Controls the Same Width, Height, or Size

From the Layout menu, choose Make Same Size, then choose one of the following commands:

  • Make Same Width
  • Make Same Height
  • Make Same Size

Centering Selected Controls in a Screen

From the Layout menu, choose Center In Screen, then choose one of the following commands:

  • Horizontally: Aligns the middles of the selected controls to a horizontal line in the middle of the form.
  • Vertically: Aligns the centers of the selected controls to a vertical line in the center of the form.

Layering Selected Controls

To move and keep track of controls within the context of a group, you manipulate visual layering of controls on a screen along the form's z-axis (depth).

From the Layout menu, choose one of the following commands:

  • Bring To Front: Moves the selected controls to the front of all other controls in the interface.
  • Send To Back: Moves the selected controls behind all other controls in the interface.

Cutting, Copying, and Pasting Controls

When designing or modifying a touch screen interface, you may want to make a copy of a control that is already on the interface. You can copy an existing control and paste the copy onto your interface.

To cut, copy or paste a control, use one of the following:

  • From the Edit menu, choose Cut, Copy, or Paste.
  • From the toolbar, click the Cut, Copy, or Paste icon.
  • Shortcut keys CTRL-X, CTRL-C, CTRL-V for cut, copy and paste respectively.

Copying and Pasting between two different touch screens is supported. Open the source touch screen, select and copy the desired controls, then open the destination touch screen and paste the controls.

Undo/Redo Previous Actions

To undo or redo your last action, use on the the following:
  • From the Edit menu, choose Undo or Redo.
  • From the toolbar, click the Undo or Redo icon.
  • Shortcut keys CTRL-U, CTRL-Y for undo and redo respectively.

You can repeat the undo or redo action to undo or redo previous actions.

Importing and Exporting Touch Screen Interfaces

Touch screen interfaces can be imported/exported between two different systems. This is useful for example to import touch screen interfaces created by other users, or to export your touch screen interfaces for other user's to use.

The Import/Export File

Touch screen import/export files contain one or more touch screen definitions and all the images associated with them. The files have a .j9ts file extension.

Importing

To import a j9ts file using the Touch Screen Builder application, from the File menu choose Import Touch Screen(s). From the file browser window, locate the j9ts file to import and click Open. All the touch screens and images within the file will be imported.

Exporting

To export touch screen(s) to a j9ts file, from the File menu choose Export Touch Screen(s). From the touch screen chooser window, select the touch screen name(s) you would like to export. You can select one or more touch screens, then click Ok. You will then need to choose a location to save the resulting export file.

Touch Screen Variables

Each Inner Touch Screen can store a set of variables. A variable is a name/value pair. So for example an Inner Touch Screen could store a variable named "zone" which has a numeric value of 2.

Variables are assigned in the following ways:

  • When an Inner Touch Screen is loaded:
    • The initial variables that are assigned when an Inner Touch Screen is loaded can be set in the following controls:
      • Inner Touch Screen
      • Loader Button
      • Loader Radio Button properties.
    • When using the scripting language to load an Inner Touch Screen, the variables can be specified in the TouchScreen.LoadTouchScreen(...) method call.

  • After an Inner Touch Screen has already been loaded:
  • New variables can be assigned and existing variables can be changed by using the TouchScreen.SetVariable(...) method in a Script.

Variables can be used in the following ways:

  • When binding a control to an array property the index can be specified as a variable name instead of a static index number.
  • Within control text macros.
  • Within scripts that are run from controls within the Inner Touch Screen.

Variables provide a great way to create reusable touch screens for different zones. So for instead of create a different touch screen for each audio zone. example a single touch screen could be created which uses the zone # stored in a variable. This allows each control to control or display information for a particular zone. When the variable is changed, each control will then be bound to the new zone specified in the variable.

Whenever an Inner Touch Screen is loaded (including when it is changed), the variables will be cleared and reset to any variables specified by the loading entity (loader button, loader radio button, script, etc). Therefore you should not use touch screen variables for long term data storage.

Managing Image Files

You can add, delete, and move image files using the Image Browser window.

To open the image browser window, do one of the following:

  • From the File menu, click Manage Image Library.

  • When editing control properties, from the Images property page, click the open folder icon.

Adding Image Files

From the Image Browser window choose the folder you would like to place the image(s). If the folder does not exist, you can create a new one with the New Folder toolbar icon.

Click the Import Image toolbar button, then choose the file(s) to import and click Open.

Deleting Image Files

Deleting an image removes it from the image library and makes it unavailable to any touch screen interfaces that may use it. You can not recover the image once it has been deleted.

From the Image Browser window choose the image you would like to delete and click the Delete Item toolbar icon.

Cut, Copy, Paste Image Files

You can cut, copy, and paste image files between folders using the Image Browser window. Use the cut, copy, and paste toolbar icons just as you would in windows explorer.

Renaming an Image File

To rename an image file from the Image Browser window, click the Rename toolbar icon, edit the image file name, and press the enter key.

Tips and Tricks

Image Directories

When creating a new set of touch screens, it is recommended that you use the Image Manager to create a new directory to save all the touch screens images. This will help organize your images and help prevent naming conflicts with images for other touch screen sets.

Device Names

It is highly recommended that when you add devices to your system you use the default device names. This will make sharing your touch screen interface with other users more convenient since the users won't need to change the action lists and device bindings to reflect the name of their devices. For example the default device name for all the lighting devices is 'lighting', the default device name for all the media player devices is 'mediaplayer'.

Control Sizes

When designing an interface for a touch screen monitor, keep in mind that controls need to be large enough and separated enough that the user won't inadvertently press the wrong control with their finger.

On a smaller monitor such as a 7" display, heavily used buttons (such as menu buttons or play/pause buttons) should be no smaller than 60x60 pixels. Lesser used controls should be no smaller than 40x40 pixels and should have at least 20 pixels between them.

When designing smaller controls, it is often helpful to make the control's size larger than the actual displayed control (for example center the control's image in the control and make the control larger than the image). This lets the user be less precise when pressing the control with their finger. This is especially the case with the Slider control, where the user has to drag their finger across the screen.

Backgrounds and Images

Although the user may be inclined to set the image properties on each control when designing the layout, if you are graphically inclined (such as using Photoshop) it is usually quickest to design your touch screen layout as one image that you use as the touch screen background, and then place transparent controls over the top of it. Then add a pressed image to your button controls to polish it off. Although it can be quicker to design your touch screen this way, it comes with the downside of limiting the ability to tweak the layout from the Touch Screen Designer application.

Specialized Buttons

Use specialized button controls when you can. Although you can use the action list to load a touch screen when a button is pressed, or send an IR command, or change the page on a Media Browser control... there are specialized button controls to perform these functions which are quicker to configure and perform quicker in the Viewer application.

The following specialized button controls provide quicker editing and are more performant in the viewer application than using the action list to do the equivalent function:

  • Radio Button
  • Loader Button
  • Loader Radio Button
  • Pager Button
  • Radio Button
  • Property Offset Button
  • Infrared Button
  • Refresh Button
  • Media Browser Grouping Button

It is highly recommended that you use the above controls instead of using the action list to perform the same functionality.

Touch Screen Properties Window

Image
This window is used to specify properties that apply to the whole touch screen (as opposed to an individual control).

  • Name
    The name of the touch screen which will be listed in the touch screen chooser. Each touch screen must have a unique name.

  • Group Name
    An optional group name to that the touch screen will be grouped under in the touch screen chooser.

  • Description
    An optional description of the touch screen.

  • Top Level Touch Screen
    This is used to filter the touch screen chooser list.

  • Width
    The width of the touch screen in pixels.

  • Height
    The height of the touch screen in pixels.

  • Background Color
    The background color of the touch screen.

  • Background Image
    The optional background image to use.

  • Background Opacity
    The opacity of the background image.

  • Load Sound
    The optional WAV file to play when the touch screen loads.

  • Unload Sound
    The optional WAV file to play when the touch screen unloads.

  • Button Press Sound
    The optional WAV file to play when a button is pressed.

Sound files paths (WAV file paths) must be on or accessible from the pc running Touch Screen Viewer.

Common Control Property Panes

Each control has a set of appearance and behavior configuration properties. These properties are grouped into property panes in the control's Properties Window. See the documentation earlier in the document on how to edit a control by displaying the control's Properties Window.

The following is a list of the property panes that are associated with most controls.

Basic

Image
The Basic pane displays the basic information about the control.

  • Name
    Each control has a unique name. This name is is used to reference the control from action lists and to choose the control from the Controls menu.

  • Description
    The Description field is optional, and provide a place to describe the use of the control or any other information.

  • Visible
    To hide the control, uncheck the Visible checkbox.

  • Location and Size
    The X, Y coordinates and the Width and Height of the control can be edited. Values are in pixels.


Property Binding

Image
The Property Binding pane allows you to connect the control's display value directly to a chosen device's property. This means when the property value changes, the displayed value (usually text or an image) are also updated. Some controls also allow user feedback, so the user can change the value of the control and the device property is automatically updated.

The Device Property Offset Button and the Image List controls both use this property page. The Slider control uses a variation of this concept, but has extended functionality. Please see each control section for details.

From the Property Binding pane, choose the device which has the Property you wish to bind to. Not all device properties allow binding, and only those properties that do will be listed in the Property Name drop down list. If the property you choose is an array, you will need to either specify a specific index to bind to or you can specify a parent touch screen variable name to retrieve the index from. Touch screen variables are assigned in the Inner Touch Screen, Loader Button, and Loader Radio button controls. Also some bindable properties are read only and do not allow user feedback.

Text

Image
Many controls provide the ability to display text. Use the Text property pane to define the text and/or text appearance for your control. Some controls only allow the appearance of the control text to be configured.

  • Font
    This indicates the type face, size and color of the font.

  • Horizontal and Vertical Alignment
    The horizontal and vertical alignment settings provide a way to indicate where the text should be shown in the control, for example centered horizontally and vertically.

  • Text
    The text field accepts a combination of text to display as is and macros which are translated to their text equivalent on the fly.

To add a macro to the text field, click the Insert Macro button, and then choose the device and property.

The following text field example would display "Press Me" in the control:
Press Me

The following text field example would display "Temperature: 81 degrees". It assumes there is a weather device named "weather" in your system:
Temperature: { weather.CurrentTemperature } degrees

The following text field example would display the level of the light device with and id of 5. It assumes there is a lighting device named "lighting" in your system:
Kitchen Light: { lighting.LightLevels[5]% }

You can also use Touch Screen Variables within macros. In the following examples assume the parent touch screen has a variable named "zone" with a value of 2:

The following text field example would display "Zone #: 2" in the control:
Zone #: {zone}

The following text field example would display the volume level of media player's zone 2. It assumes there is a media player device named "mediaplayer" in your system which has at least 2 zones:
Kitchen Volume: { mediaplayer.ZoneVolumes[zone]% }

Border

Image
An optional border can be drawn at the edge of the control. Choose the style, color and width (in pixels) of the desired border.

Background

Image
An optional background color and background image can be assigned to most controls.

  • Background Color
    The optional color to fill the control's background with. Choose a color from the drop down list or click the Custom button to create your own color. To remove the background color, set the color to Transparent.

  • Background Image
    The optional image to display in the control's background. To choose an image, click the open folder button. To remove the background image from the control, click the black X button.


Images

Image
Some controls can display different images under different situations. For example the Button control has a normal image that is displayed when the button is not depressed and when the mouse (if any) is not over the control; a Pressed image that is displayed when the button is depressed; and a Mouse Over button that is displayed when the the mouse moves over the control.

Each image is optional, so if you do not specify an image, nothing will be shown.

  • Image Location
    To specify an image, select the image location, choose the opacity, and indicate how the image should be sized. The image location can be an image in the image library, an http url to an image on the world wide web, or a uri to a device property image. A device property image uri is formatted as follows: DEVICEIMAGE://devicename/propertyname -or- DEVICEIMAGE://devicename/propertyname/arrayindex.

  • Opacity
    The opacity indicates how opaque the image is. Reducing the opacity makes the image more transparent and the content behind the image will bleed through.

  • Size Modes
    Specifies how the image should be sized in the control.
    Normal : The image is placed in the upper-left corner of the control and is cropped if it is larger than the control.

    Stretch to Size: The image is stretched or shrunk to fit the size of the control.

    Show Entire image (no cropping) : The image is placed in the upper-left corner of the control and is NOT cropped if it is larger than the control.

    Center Image : The image is displayed in the center if the control is larger than the image. If the image is larger than the control, the picture is placed in the center of the control and the outside edges are cropped.

    Proportional Stretch to Size : The size of the image is increased or decreased maintaining the control's size ratio.



Event Actions

Image
The Event Action property pane provides an interface to assign action lists to touch screen control events. Each touch screen control has a list of events that it triggers.

  • Event Name
    The Event drop down list contains all the events that may occur in the control. You can define an action list for each event. A description of the event will be displayed below the selected event name.

The most commonly used event is the Pressed event. This event occurs when the control is pressed and held for a short period (about 1/4 second) or when it is released (whichever occurs first). When the Pressed event is triggered, and actions associated with it will be run.

  • Action List Editor
    The Action List editor is the same editor that is used to configure Rules in the Elve Management Studio application except it allows touch screen controls to be manipulated as well. Because the use of the Action List editor is the same, for details on its use please see the Action List documentation in the Elve Management Studio document.


User Access

Image
Each control's use can be restricted by user type.

Use User Access the property pane to choose the minimum user type which has access to the control.

If the user does not have access to the control can be disabled (meaning it is shown, but the user can not interact with it), or the control can be hidden.

For example if you had button to turn on a subwoofer and you wanted to prevent your children from using the button, you could restrict the use of the button by user type and hide the button control when someone else was signed in.

Entire touch screen interfaces can also be restricted by user type, which is configured in the user settings of the Elve Management Studio application.

The User Access concepts only apply when the system is set up with multiple users, and each users signs in with their own username.

Control Library

A control is a discrete user interface (UI) element that displays data and/or accepts user interaction such as a button press. Each control has a set of appearance and behavior properties associated with it.

Touch Screen Builder contains a variety of controls that you can add to an interface: controls that display text, buttons, radio buttons, and even Web pages.

Label

The Label control is a general user interface control for displaying any of the following:

  • Static Text
    Static text is text that is shown exactly as you have entered it, for example the name of a thermostat might be placed as a label on the touch screen.

  • Dynamic Text
    Dynamic text is text that changes when the corresponding device property's value changes. Dynamic text is shown by adding a macro tag to the Text property of the Label control. For example, a thermostat's current temperature could be shown, and when the temperature changes, the label's displayed text would change as well.

  • Static and dynamic text
    Static and Dynamic Text (macros) can be show within the same control.

  • A static image
    Additional appearance properties (which are present in most other controls as well) such as a background color and a border can also be shown. The background image does not change, unless an action list explicitly changes it.

Although the Button control is usually used to execute action scripts when the control is pressed, you can assign actions to the Label control as well, such as when it is pressed.

Ideal Uses:

  • Displaying general text. Ex: Upstairs
  • Displaying a device property value as text (see examples below).
  • Displaying current weather temperature. Ex: {weather.Temperature}°F
  • Displaying a media player volume level. Ex: {mediaplayer.Volume}%
  • Displaying a media player's current track title. Ex: { mediaplayer.Title }
  • Displaying a thermostat temperature. Ex: { elkm1.ThermostatCurrentTemperatures[1] }°F
  • Displaying a thermostat set point. Ex: { elkm1.ThermostatHeatSetPoints[1] }°F
  • Displaying alarm system area status. Ex: { elkm1.AreaArmStatusTexts[1] }
  • Displaying alarm system area arm status. Ex: { elkm1.AreaArmUpStateTexts[1] }

Button

The button control behaves similar to a Label control, but has additional image properties allowing a different image to be displayed while the button is depressed. For example you could set the Normal image to an image with a concave appearance, and set the Pressed image to an image with a convex appearance. When the user presses the button, the convex image would be should while the button is depressed.

Just as with the Label control, static and dynamic text can be displayed within the Button control as well.

Two keyboards are supported, a full keyboard and a numeric keyboard. Both keyboards support custom images of any size and the full keyboard supports assigning any text to each key.

Text Entry

The text entry control provides an single-line, multi-line, or password entry field using a an on-screen keyboard or a physical keyboard. This can used for entering security codes, searching with the Media Browser control, entering passwords, or even entering an email message.

You can choose between using a full on-screen keyboard or a numeric on-screen keyboard. You can optionally use your own custom keyboard image as well. Custom keyboard images can be any size and the system will automatically calculate where each key's location is based on the scaling. When the Text entry field is clicked on, an on-screen keyboard will be shown in an area of the screen which does not cover the text entry control (if possible).

The Text Changed or Keyboard Closed events are usually used to trigger an action such as searching with a Media Browser control. If your action is not fast it is better to use the Keyboard Closed event.

Ideal Uses:

  • Use as a music search field.
  • Use as a security code entry field.
  • Use as a password entry field.
  • Use anytime the user should enter text.

Radio Button

Image
A Radio Button control behaves similar to a Button control but maintains a 'checked' appearance that can be toggled on and off by clicking any Radio Buttons in the same container (touch screen or inner touch screen). This is a client side manipulated control as opposed to the Image List control which can provide the similar functionality but from the server side by being bound to a device property.

Adding more than one Radio Button to a touch screen creates a set of controls that are mutually exclusive; checking one button in a container will uncheck all others.

The Radio Button gets its name from old fashioned radios that had a group of preset station buttons, which when pressed in would push out the previously pressed in button.

The Radio Button's Behavior Property Pane seen to the right allows you to indicate the initial 'checked/selected' state of the control. One (and only one) Radio Button per touch screen should be marked as initially checked.

This functionality is also available using an actions list, but this button provides a performance boost over a network.

Note: If you would like something similar to the Radio Button but would like each control to be bound to a device property use the Image List control.


Loader Button

Image
The Loader Button control behaves similar to a Button control but provides a better way to:

  • Load a touch screen
  • Load an inner touch screen*
  • Show a popup
  • Close a popup

*While the drop down list is only filled with names of inner touch screens in the current touch screen, any inner touch screen name within the entire runtime hierarchy can be specified.

This functionality is also available using an action script but this control provides the following advantages:

  • It is quicker to configure since it has a dedicated property page for simple configuration.
  • The property page allows you to choose the touch screen name from a list.
  • It loads and closes touch screens quicker than when using the action list when using over a network.

You may optionally assign a set of touch screen variables which will be assigned to the inner touch screen when it is loaded. They can be used by controls within the inner touch screen. See the Touch Screen Variables section for more information.

Ideal Uses:

  • To change the touch screen in the main window.
  • To change the touch screen in an Inner Touch Screen control. (See Loader Radio Button also)
  • To show a modal popup.
  • To close a modal popup.


Loader Radio Button

The Loader Radio Button control combines the features of a Loader Button and a Radio Button. You can create a set of Loader Radio Button controls which are mutually exclusive; pressing one button in the container will un-press all others and will load the specified touch screen.

You may optionally assign a set of touch screen variables which will be assigned to the inner touch screen when it is loaded. They can be used by controls within the inner touch screen. See the Touch Screen Variables section for more information.

This control is ideal when you would like a group of buttons that change the touch screen in an inner touch screen control. Each Loader Radio Button control can be configured to load a different touch screen interface into the specified inner touch screen, and the most recently pressed control can display a highlighted image.

Ideal Uses:

  • When you want several controls to load different inner touch screens and want the active button to be highlighted. See above for more details.

Paging Button

Image
The Paging Button control behaves similar to a Button control but automatically instructs controls that support paging to page forward or backward.

The following controls support paging:

  • Media Browser
  • Media Player Playlist
  • Paged List
  • Device List
  • Spinner List

For example, if you have a Media Browser control on a touch screen you can add two Paging Buttons; one to navigate the Media Browser to the previous page and one to navigate to the next page.

This functionality is also available using an actions list, but this button provides a performance boost over a network.

Ideal Uses:

  • Page through tracks/artists/etc in a Bedia Browser control.
  • Cycle the selected device in a Device List control.
  • Change pages in a Paged List control.
  • Cycle through items in a Spinner List control.


Property Offset Button

Image
The Property Offset Button control behaves similar to a Button control but automatically increments or decrements a device property value.

For example you could use this control to increase or decrease the volume of a media player device.

The Repeat Behavior setting is unavailable at this time.

This functionality is also available using an action script, but this button provides simpler configuration and a performance boost to the operation over a network.

Ideal Uses:

  • Changing any numeric property up or down by a specify #.
  • Changing thermostat set points.

Infrared Button

Image
The Infrared Button control behaves similar to a Button control but provides a simpler way to send an infrared command than using an action list and provides a performance boost over a network.

If you want to send multiple infrared commands when a button is pressed, choose a standard Button control and use the action list editor to add the infrared commands.

This control requires that an infrared blaster device be configured, and associated with an Infrared Library IR Device.

Ideal Uses:

  • Buttons to control home theater equipment via IR.

Refresh Button

The Refresh Button control can be used to force the touch screen interface to refresh it's dynamic display values (such as dynamic text and images) when it is pressed.

The Touch Screen Viewer application listens for device property changes and will update dynamic display values (such as dynamic text or images). To ensure the display values are current, the Touch Screen Viewer application for the PC requests all dynamic display values at a timed interval (default is 60 seconds).

Boolean

Image
A boolean control is used to display an image based on a device property's current value or the result of a true/false (boolean) expression. This can be used as a checkbox for example.

In the Boolean pane of the control's Properties Window, indicate if the control should be bound to a boolean device property or if you would like to enter a j9Script expression that will evaluate to true or false.

For the best performance and for the control to automatically update when the associated property changes, use property binding.

If using a script you will get better results if you use one of the following formats:

  • <device_name.property_name> <comparison operator> <true | false | a number | a string>
  • <device_name.property_name> <comparison operator> <device_name.property_name>

The following example would evaluate to true when the device named mediaplayer has a mode property equal to "play":
mediaplayer.mode == "play"

When the expression evaluates to true, the text in the True Text pane will be displayed and the True image specified in the Images page will be displayed. When the expression evaluates to false, the text in the False Text pane will be displayed and the False image specified in the Images page will be displayed.

Ideal Uses:

  • Toggling a media player between play and pause.
  • Toggling a light between on and off.
  • Toggling an irrigation valve between on and off.
  • Toggling the zone power of a multi-zone media player.


Slider

Image
The Slider control enables the user to adjust a numeric value in a finite range along a horizontal or vertical axis.

The Slider control can also be used with a Slider Label control to display the Slider control's current value.

  • Slider Orientation
    Indicates if the slider thumb will slide horizontally (left-right) or vertically (up-down).

  • Slider Value Range
    The Minimum Value is the value of the slider when the thumb is positioned in the minimum position.
    The Maximum Value is the value of the slider when the thumb is positioned in the maximum position.

  • Limit Value Range by User Type
    The range that the thumb can be positioned can be assigned by user type. The range can be set for each user type in the drop down list.
    This for example could be used to prevent your children from setting the stereo reviewer volume too high.


Image
Auto Refresh proves a way to keep the slider value in sync with a device property value or the return value of a script.

  • Property Binding
    Selecting this option binds the slider control to a device property value and provides two-way value synchronization. When the device property changes, the slider control will automatically be updated to display the slider thumb in the position for the current device property value. When the user moves the slider's thumb, the device property value will automatically be set to the value at the slider's current thumb position.

A common use is to bind the slider control to a media player volume property.

For more details on property binding, see the documentation for the Property Binding pane elsewhere in this document.

  • Script
    Selecting this option provides a way to set the slider's thumb position to be set to the return value of a script. The control's Value Changed event's action list can be edited to run actions when the user changes the slider's thumb position.

Ideal Uses:

  • To control a media player's volume.
  • To control the level of a light.


Slider Label

The Slider Label control displays the current position value of a slider control that is within the same touch screen. As the associated Slider control's thumb is moved, the Slider Label control's text will be updated.

Although a normal Label control can be display the value of a device property that a Slider control might be bound to, it does not update the display value as the slider is moved. The Slider Label control display's the Slider control's value even as the thumb is being moved.

Ideal Uses:

  • Whenever you want to see a slider control's current value.

Image List

Displays an image associated to the current value of a device property.

Using the Property Binding pane, first choose the device property to bind this control to. You will need to choose a property that uses an enumerated list. For example a media player's Shuffle property might have the following 3 values: Off, Song, Album. The Images property pane will be populated with a list of all the property values. You can then assign an image to each property value.

When the bound device property changes, the control will automatically display the image associated with the new value. So using the Shuffle property example above, when the media player's shuffle mode changes to Off, the image you have assigned to Off will automatically be displayed in the control.

For more details on assigning images, see the Images Pane documentation elsewhere in this document.

Ideal Uses:

  • Displaying weather icons for a weather device.
  • Displaying alarm system zone statuses on top of a house image.
  • Choosing a zone source for a multi-zone media device.

Date & Time

The Date & Time control displays the current date and/or time in the specified format.

Time format notation:

h = hour; m = minute; s = second; t = am or pm

h = 12 hour
H = 24 hour

hh, mm, ss = leading zero
h, m, s = no leading zero

Date format notation:

d = day; M = month; y = year

d, M = no leading zero
dd, MM, yy = leading zero
ddd, MMM = abbreviated name of day or month
dddd, MMMM = full name of day or month
y = last 2 digits of year, no leading zero
yy = last 2 digits of year, leading zero
yyyy = full year

Example: h:mm t

Ideal Uses:

  • Displaying the current date and/or time.

Spinner List

The spinner list control contains a list of name/value pairs, with the selected item's name being displayed in the control. The currently selected item can be changed by adding a 'Paged Button' control to the touch screen, or by invoking the SelectNext() and SelectPrevious() methods of the control, which is usually done by other button controls on the touch screen. Items must be programatically added to the control from a script using the control's Add() or Insert() methods, from the OnLoad action script for example. The currently selected value can be reference using the 'SelectedValue' property, ex: TouchScreen.MyList.SelectedValue

Paged List

The paged list control contains a list of name/value pairs, with multiple items of the list being shown vertically. The selected item's name is highlighted in the control. The currently displayed page can be changed by adding a 'Paging Button' control to the touch screen, or by invoking the NextPage() and PreviousPage() methods of the control, which is usually done by other button controls on the touch screen. Items must be programatically added to the control from a script using the control's Add() or Insert() methods, from the OnLoad action script for example. The currently selected value can be referenced using the 'SelectedValue' property, ex: TouchScreen.MyPagedList.SelectedValue

Although it would be rare to use it, the date format used for an initial date/time value is: YYYY-MM-DD HH:mm:ss

Device Spinner List

The device list control displays all the current devices that are running for a particular device type. The currently selected device can be changed by adding a 'Paged Button' control to the touch screen, or by invoking the control's SelectNext() and SelectPrevious() methods, which is usually done via other button controls on the touch screen. The currently selected device can be referenced in a script using the 'SelectedValue' property, ex: device = TouchScreen.MyDeviceList.SelectedValue;

Web Browser

Image
The Web Browser control is used to display a web resource, such as a web page or image on the web.

Enter the web address (URL) of the web page to display and indicate if the web page should be reloaded at a timed interval and if the browser scroll bars should be hidden.

You may also optionally hide the web browser scroll bars.

A common use is to show the video from an MPEG4 ip camera. The IP Camera control can be used to show JPEG and MJPEG video streams from ip cameras.

Web Browser controls will always appear above other control types in the viewer, including popups.

Ideal Uses:

  • Using a web browser in a touch screen.
  • Displaying an animated weather map from the web.
  • Displaying an ip camera feed which uses a non jpeg/mjpeg format.

NOTE: The Web Browser control is not supported in the Touch Screen Viewer Lite or Elve Mobile applications. It is supported in the Touch Screen Viewer application.


Inner Touch Screen

Image
The Inner Touch Screen control is a container used to embed a separate touch screen interface within the current touch screen. This allows nesting of touch screens within each other. The touch screen interfaces shown in an Inner Touch Screen control should be smaller than the containing touch screen interface.

You may optionally assign a set of touch screen variables which will be assigned to the inner touch screen when it is loaded. They can be used by controls within the inner touch screen. See the Touch Screen Variables section for more information.

It is best to assign a globally unique name to each Inner Touch Screen control. This allows the Loader Button and Loader Radio Button controls to find a specific Inner Touch Screen control within the entire viewer's touch screen hierarchy by its name.

A typical use of the Inner Touch Screen control is to add a group of Loader Radio Buttons to the main touch screen that are used to load different touch screen interfaces into an Inner Touch Screen control.

Media Player Cover Art

Image
The Media Player Cover Art control displays the cover art for a specified media player device's currently playing track.

This control requires that a media player device be configured.

Media Player Seek Slider

The Media Player Seek Slider displays the a media player's current track time position as a movable slider control.

Media Player Track Position

The Media Player Track Position displays the a media player's current track time position as numeric text.

For example: 1:34

Media Browser

Image
The Media Browser control displays a tiled view or list view with thumbnail images for a specified media library, such as a music library, image library, or video library.

Music library items can be grouped by artist, album, title, genre, or playlist. You can use the Media Browser Grouping Button control to change the grouping.

Video and Image libraries are always grouped by file system directory. Pressing a folder thumbnail image will display all the items within the folder.

In the media browser property pane, choose the media library device name and how each media item (such as a music track) should be shown. The media library device is used to retrieve the media items. Items can be shown in tiled mode or list mode.

In the media player property pane, choose the media player device name that the media browser control should use. When a media item is short pressed, the media player will be passed the list of selected items and played.

The Media Browser control responds to quick presses and long presses. You can specify how the control behaves for both but the default is as follows: Quick pressing a tile or row drill down into the item, for example clicking an album will show the titles in the album. Quick pressing a title however will clear the current playlist and play selected title. Press and holding an item will clear the playlist and play all items associated with the selected item.

In title grouping mode you may also configure the Media Browser control to show an append button and/or a play button on each row. You can also configure these buttons to take other alternative actions if you prefer.

You may also add buttons to your touch screen to play all the items in the current grouping now, play next or append them to the end of the current playlist. You may do this my executing the following Media Browser actions: Play All, Insert All, Append All


Searching Media with the Text Entry Control

You can use Text Entry control with the Media Browser control for searching media.

  1. Add a Text Entry control and Media Browser control to a touch screen interface.
  2. Edit the Text Entry control's properties and select the Event Actions property pane.
  3. Choose either the Text Changed or Keyboard Closed event. The use of the Text Changed event is dependent on your system performance. If it is slow you might want to use the Keyboard Closed event.
  4. Use the Action List Editor to have the Media Browser control search using the text in the Text Entry control.

    1. If you wanted to use the action list you would:
      1. Choose Add Action -> Touch Screen Control -> MediaBrowser -> Search (Your Media Browser Control may vary.)
      2. The name of your media browser may vary.
      3. Click the search text link to specify the search text.
      4. Since you want to use the text from the Text Entry control you must use script, so click the Script tab and enter: this.Text

    2. If you wanted to use scripting it it's as simple as the following. Be sure to change MediaBrowser to the name of your Media Browser Control:


       TouchScreen.MediaBrowser.Search(this.Text);


Media Browser Grouping Button

Image
The Media Browser Grouping Button control is used in conjunction with a Media Browser control to change the current grouping state of the Media Browser control.

A typical use of this control would be to add a Media Browser control to your touch screen and a set of Media Browser Grouping Buttons to change the Media Browser's grouping state to display cover art by Artist, Album, Title, Playlist, etc.

Media Browser Back Button

The Media Browser Back Button is used with a Media Browser control to navigate back in your browsing history. If no history is available then the button will not be visible.

Media Player Playlist

The Media Browser Playlist provides display of all the items in a media player's playlist and provides functionality to change the current item, remove items, and move items up or down in the playlist.

Up to 5 buttons may be shown on each row of the playlist control. You may choose from any of the following actions for each button:

  • Handle Manually : Allow you to add custom actions to the Button # Pressed events.
  • Play : Changes the currently playing item to the selected item.
  • Remove : Removes the selected item from the playlist.
  • Move Up : Moved the selected item up 1 index in the playlist.
  • Move Down : Moved the selected item down 1 index in the playlist.

Media Library Item Text

Image
The Media Library Item Text is used with a Media Browser control to display the selected media library item's field, such as a song's Artist.

You may bind the Media Library Item Text control with a Media Browser which is in the same touch screen, your you may manually set the Media Library Item Text control's ItemID equal to the Media Browser's SelectedItemID value in the Selection Changed event.

Media Library Item Image

Image
The Media Library Item Text is used with a Media Browser control to display the selected media library item's cover art image, such as a song's Album.

This is useful for displaying a larger version of the selected cover art image.

You may bind the Media Library Item Image control with a Media Browser which is in the same touch screen, your you may manually set the Media Library Item Image control's ItemID equal to the Media Browser's SelectedItemID value in the Selection Changed event.

Understanding When Control Display Values Are Updated

Many touch screen controls can display information that is obtained from the Elve system. For example a label control might display the temperature for a thermostat, or an Image List control might show an image based on a security zone's status, or a slider control might be set to a media player's volume level.

To provide the best user experience in the Touch Screen Viewer application it is important to understand when a control's visual elements are updated when displaying information obtained from the Elve system. Depending on the information source, the control might be updated immediately when the information changes or the system may be polled for the display information at timed intervals, or both.

  • Updated Immediately:

Only controls which are bound to a property that supports property binding will be updated immediately. If there is network lag the update could take a few seconds.

  • Timed Interval Polling:

All controls which display information from the system are updated at timed intervals. The default polling interval is every 60 seconds but this can be overridden by specifying the refreshrateseconds command line parameter.

The following indicates how quickly most controls controls are updated based on the information source:

  • A device property which supports property binding:

Updated Immediately and at Timed Intervals for redundancy.

  • A device property which does not support property binding:

At timed intervals.

  • Text Macros and Scripts:

Most controls which have a Text property pane for entering text to display in the control also support macros. Macros are very simple scripts which return a value to display. The typical macro just displays a property value, but macros can also display the result of an invoked method or an even more complicated script.

If a macro returns the value of a single device property which supports property binding then the control's value will be updated immediately. If the property is an array then a touch screen variable can be specified as the index. (One of the examples below uses a variable named "zone".

Example Text: { weather.CurrentTemperature }°F
Example Text: Kitchen Light: { lighting.LightLevels[5]% }
Example Text: Kitchen Volume: { mediaplayer.ZoneVolumes[zone]% }

If a macro returns the value of a single device property which does not support property binding or contains more than just a single device property then the control's value will be updated at timed intervals.

Example Text: { mediaplayer.Title.ToUpper() }
Example Text: Kitchen Volume: { mediaplayer.ZoneVolumes[zone + 1]% }

Some controls such as the Boolean and Slider controls support scripting when evaluating the value to display. In some cases when a script is very simple the Touch Screen Viewer application is able to parse the script and update the control if the script contains a reference to a device property that supports property binding. The control will also be updated at timed intervals for redundancy.

The boolean control can parse simple scripts which are use the following formats:
<literal> <comparison operator> <device property>
<device property> <comparison operator> <literal>
<device property> <comparison operator> <device property>

Example: weather.Temperature > 90

When using a script to evaluate a Slider control's value, the control will be updated at timed intervals.

Shortcut Keys

F1About Window (and shortcut key help)
CTRL-LLoad Touch Screen
CTRL-XExit Application
ALT-F4Exit Application
CTRL-Left ClickSelect multiple controls while holding CTRL.
Arrow KeysNudge the selected control(s) by one 1 pixel.
CTRL-Arrow KeysNudge the selected control(s) by one 10 pixels.
CTRL-ASelect all controls in the touch screen interface.
CTRL-XCut selected control(s).
CTRL-CCopy selected control(s).
CTRL-VPaste control(s).
DeleteDelete control(s).
CTRL-UUndo previous action.
CTRL-YRedo previous action.

Creating Touch Screens for iPhones and PocketPCs

The Touch Screen Builder application can be used to create touch screens for iPhones, Windows Mobile devices and PocketPC devices.

The Web Browser control is not supported in Elve Mobile.

Screen Resolution

The iPhone 3G an iPod Touch have a screen resolution of 320 x 480. The iPad has a screen resolution of 1024 x 768. PocketPC devices generally have a screen resolution of 480 x 640 (and sometimes 240 x 320).



Command Line Switches

The following command line switches can be added to the Touch Screen Builder shortcut:

  • /designer : Puts the application in designer mode. (REQUIRED)
  • /touchscreen : The full path of the touch screen to show on startup. Quotes are needed for touch screen paths that contain spaces. Ex: "\Home\Main TS"
  • /username : The username to auto sign in as.
  • /password : The password to auto sign in with.

Example:

  • "C:\Program Files\Elve\TouchScreen.exe" /designer /touchscreen "\Lighting\Living Room" /username Admin /password admin
Privacy Policy | Conditions Of Use

Copyright ©2014 Codecore Technologies, All rights reserved.