Touch Screen Builder

Modified on 2012/05/13 20:09 by Administrator — Categorized as: Uncategorized

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:


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:


Editing Touch Screen Interface Properties

The touch screen properties window can be opened by:


Editing Control Properties

A control's properties window can be opened by:


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)


Deselecting Control(s)


Moving Selected Controls


Sizing Controls


Aligning Selected Controls

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


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:


Making Controls the Same Width, Height, or Size

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


Centering Selected Controls in a Screen

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


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:


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:


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:
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:



Variables can be used in the following ways:


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:



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:


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).













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.





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.




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.



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.




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.


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.



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:





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:


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:


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:


*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:


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:



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:


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:


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:



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:


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:


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:


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:



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.




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.


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.


Ideal Uses:



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:


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:


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:


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:


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:


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.


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.


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:


Updated Immediately and at Timed Intervals for redundancy.


At timed intervals.


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:


Example: