DTP 160 Programming Rev F

DTP 160
Programming
Guide
[this page is intentionally blank]
Contents
About this Guide ................................................................................................ 7
Manual Overview ............................................................................................ 7
Disclaimer ..................................................................................................... 7
Copyright ...................................................................................................... 7
Topic 1: Introduction to the DTP160 Touch Screen ............................................ 8
Topic Overview............................................................................................... 8
Learning outcomes ......................................................................................... 8
Welcome to the DTP160 Touch Screen .............................................................. 8
Overview ....................................................................................................... 8
Terminology................................................................................................... 9
Touch screen connectors ................................................................................. 9
Getting Started ............................................................................................ 10
Touch screen Emulator .................................................................................. 10
Visual Web Developer ................................................................................... 10
ActiveSync................................................................................................... 10
Windows Mobile Device Centre ....................................................................... 11
Touch screen Software .................................................................................. 11
Setting up the PC Touch Screen Communicat-ions Ports .................................... 11
Entering Edit Mode ....................................................................................... 12
Getting to know the Editor Window ................................................................. 12
The Property Pane ........................................................................................ 12
The Description Pane .................................................................................... 13
Edit Handles ................................................................................................ 13
Bounding Box............................................................................................... 13
Toolbar items ............................................................................................... 13
Using the Editor ........................................................................................... 13
Elements ..................................................................................................... 13
Selecting Elements ....................................................................................... 13
Changing Properties ...................................................................................... 14
Adding Elements .......................................................................................... 14
Moving Elements .......................................................................................... 14
Changing an Elements Theme ........................................................................ 14
Class Selection Window ................................................................................. 15
Changing an Elements Behaviour ................................................................... 16
Adding a Button ........................................................................................... 16
Adding a Preset Gang.................................................................................... 17
Adding a Slider............................................................................................. 17
Adding a Slider Gang .................................................................................... 18
Adding Text ................................................................................................. 18
Adding Images ............................................................................................. 19
Behaviours Available for Element Types .......................................................... 20
Button......................................................................................................... 20
Slider .......................................................................................................... 20
Text ............................................................................................................ 20
Body ........................................................................................................... 20
Utility pages ................................................................................................ 21
What are Utility Pages? ................................................................................. 21
testdevices.html ........................................................................................... 21
config.html .................................................................................................. 22
dns.html...................................................................................................... 23
users.html ................................................................................................... 24
tasks.html ................................................................................................... 25
schedules.html ............................................................................................. 26
3
screensetting.html ........................................................................................ 27
publicholidays.html ....................................................................................... 28
Touch Screen Configuration Page Summary ..................................................... 28
Screen Settings ............................................................................................ 28
Network Settings .......................................................................................... 29
User Configuration ........................................................................................ 29
Schedules .................................................................................................... 29
Tasks .......................................................................................................... 29
Public Holidays ............................................................................................. 29
Killing the Touch Screen Application................................................................ 30
Project Methodology ..................................................................................... 31
Creating a New Project.................................................................................. 32
Themes ....................................................................................................... 33
What are themes? ........................................................................................ 33
Creating Themes .......................................................................................... 33
Modifying Themes......................................................................................... 34
Templates ................................................................................................... 35
What are Templates? .................................................................................... 35
Creating a New Page..................................................................................... 36
Adding Time to a Page .................................................................................. 36
Adding the Date to a Page ............................................................................. 37
Editor Properties .......................................................................................... 39
Default Themes ............................................................................................ 39
Grid Properties ............................................................................................. 39
Files............................................................................................................ 39
Misc Properties ............................................................................................. 39
Configuration Properties ................................................................................ 40
Miscellaneous ............................................................................................... 41
Auto Logoff .................................................................................................. 41
Backlight ..................................................................................................... 41
Default Fades ............................................................................................... 41
Active Sync ................................................................................................. 41
What is Active Sync? ..................................................................................... 41
Setting Up ActiveSync ................................................................................... 41
Deploying a Whole Project ............................................................................. 43
Choose Touch Screen Device.......................................................................... 43
Select Files to Upload .................................................................................... 44
Deploy To Device.......................................................................................... 45
Deploying a Single File .................................................................................. 46
Topic 2: Advanced Touch Screen Editing .......................................................... 47
HTML editor ................................................................................................. 47
Open the project in Microsoft Visual Web developer .......................................... 47
Defining a new touchpanel start page ........................................................... 48
Viewing changes to the touchpanel project .................................................... 48
How the code is arranged on a touchpanel page ............................................. 49
Special Files................................................................................................. 49
Page Backgrounds ........................................................................................ 50
Changing the Default Background ................................................................... 50
Adding a new backgrounds ............................................................................ 50
HTML Touch Screen Panel Elements ................................................................ 52
Adding Some Buttons.................................................................................... 52
Adding a New Page ....................................................................................... 53
Adding a Slider............................................................................................. 53
Slider Gangs ................................................................................................ 54
Create a CSS class to for the Slider Gang ........................................................ 55
4
Parameters that are available for Slider Gangs ................................................. 55

Methods that are available for Slider Gangs ..................................................... 56
Preset Gangs ............................................................................................... 56
Sample CSS Class ........................................................................................ 57
Parameters that are available for Preset Gangs ................................................ 57
Methods that are available for Preset Gangs..................................................... 57
Startup ....................................................................................................... 58
HTML Classes............................................................................................... 58
Button Classes................................................................................................. 59
Standard button ........................................................................................... 59
toggle ......................................................................................................... 59
presetbutton ................................................................................................ 59
togglepreset ................................................................................................ 60
rampbutton ................................................................................................. 61
soundbutton ................................................................................................ 62
irkey ........................................................................................................... 62
Slider Classes .............................................................................................. 63
dlhslider ...................................................................................................... 63
dlvslider ...................................................................................................... 63
dphslider ..................................................................................................... 64
dpvslider ..................................................................................................... 65
dhslider ....................................................................................................... 65
dvslider ....................................................................................................... 66
Misc Classes ................................................................................................ 66
channellevel................................................................................................. 66
pchannellevel ............................................................................................... 67
clock ........................................................................................................... 67
date ............................................................................................................ 67
current_temperature..................................................................................... 67
Style Classes ............................................................................................... 68
Buttonstyle .................................................................................................. 68
HTML Scripting............................................................................................. 70
Overview ..................................................................................................... 70
Touch Screen Object Properties ...................................................................... 70
Methods ...................................................................................................... 70
Events ........................................................................................................ 71
Network Objects........................................................................................... 72
Sending Data to the Network ......................................................................... 72
Packet Object ............................................................................................... 73
Methods ...................................................................................................... 74
Sample Code using Packets ........................................................................... 74
Receiving Dynet ........................................................................................... 74
Creating the Filter......................................................................................... 75
Decoding the Packet ..................................................................................... 75
Catching an Event ........................................................................................ 76
Sending a packet that requires a response....................................................... 76
Request Circuit Runtime ................................................................................ 77
Scheduling .................................................................................................. 77
Locale ......................................................................................................... 77
Scheduled Events ......................................................................................... 78
Sample Code Using Schedules........................................................................ 79
Public Holidays ............................................................................................. 79
Parameters .................................................................................................. 79
Sample Code Using Public Holidays ................................................................. 80
Timers ........................................................................................................ 80
Parameters .................................................................................................. 80
5
Methods ...................................................................................................... 80
Sample code using a Timer ............................................................................ 80
Security ...................................................................................................... 81
Properties .................................................................................................... 82
Methods ...................................................................................................... 82
Touch Screen Object Tree.............................................................................. 84
Figure 1 - Touch Screen Scheduling objects ..................................................... 84
Figure 2 - Touch Screen Network Objects ........................................................ 85
Figure 3 - Touch Screen Miscellaneous Objects................................................. 86
Telnet ......................................................................................................... 87
Overview ..................................................................................................... 87
Logging in ................................................................................................... 87
Appendix 1: Element Properties ....................................................................... 88
Button Properties ......................................................................................... 88
Slider Properties........................................................................................... 90
Text Properties............................................................................................. 91
Image Properties.......................................................................................... 93
Slider Gang Properties .................................................................................. 94
Preset Gang Properties.................................................................................. 96
Body Properties............................................................................................ 98
Behaviours Available for Element Types .......................................................... 99
About this Guide

Manual
Overview
This manual is designed to provide information on configuration of the DTP 160 colour
Touch screen.
It describes the use of the use of the touch screen emulator to create pages and moves
on to scripting using a HTML editor.
This document represents the functionality available under Build 2.0 of the DTP 160
software. Some changes may occur between versions that will invalidate some of the
samples herein.
Disclaimer
This guide has been prepared by Dynalite and provides information on Dynalite
products. Some information may become superseded through changes to the law and
as a result of evolving technology and industry practices.
Any reference to non-Dynalite products or web links does not constitute an endorsement
of those products or services.
Copyright
2008 Dynalite Intelligent Light Pty Ltd (ABN 97 095 929 829). All rights reserved. Not
to be reproduced without permission. Dynalite, DLight, DyNet and associated logos are
the registered trademarks of Dynalite Intelligent Light Pty Ltd.
DTP 160 Programming Manual
Introduction to the DTP160 Touch Screen
Topic 1: Introduction to the DTP160 Touch Screen

Topic Overview
This topic covers the installation and use of Touch Screen programming software to create
pages for the DTP160.
Learning
outcomes
By the end of this topic you will be able to:
Modify existing Touch Screen pages and projects
Create new Touch Screen pages and projects
Deploy pages to the DTP160.
Welcome to the DTP160 Touch Screen

Overview
Fig 1.0
The DTP160 is a feature rich colour LCD Touch Screen that uses vivid graphics and
sophisticated on screen controls which allows the Systems Installer to create visually
stunning and easy to use pages.
Control of various equipment such as lighting, AV, security and HVAC can be easily
integrated and controlled from the one location. Objects such as logos, buttons, faders,
floor plans and diagnostic icons can be placed on pages and used to perform simple and
complex conditional logic macros.
The DTP 160 Colour Touch Screen is a highly configurable programmable panel. Pages
on the DTP 160 are programmed using HTML and JavaScript.
In addition to the Dynalite Touch Panel software running on the DTP160, the Systems
Installer has full access to the Microsoft Windows CE operating system and its
components. Windows Media Player is available to play audio files.
The rear USB socket allows inexpensive expansion of available memory using standard
USB FLASH drives. Full Internet
Connectivity is supported. The DTP160 is powered from the DyNet network so does not
require a mains voltage supply.
A table of terms dealing with Touch Screen programming can be found below:
Terminology
Name
Touch Screen, DTP160
Touch Screen
Application
DyNet
Dynet Port
Key
Point
Description
The DTP 160 Device
The software that runs on the DTP 160 or PC
The Dynet Network Protocol
The port that connects the DTP 160 to the Dynet Network
Auxiliary Port
An internal port that connects the DTP 160 to the Auxiliary

Board
Auxiliary Board
This board provides, IR, LUX , Audio and USB client

support for the DTP 160
Reset Switch
Small switch on the device, accessible behind the front

Faceplate
Page
A HTML page shown on the DTP 160
Service LED
Small LED on the device, behind the faceplate. Turns off

after the Touchscreen boots up
Touch screen Project
A Directory containing all the files needed for a Touch

screen
The use of the term DyNet throughout this document refers to the DyNet1 protocol fixed 8
byte packets.
Touch screen
connectors
Fig 1.1
9
Dynet Serial Port: This is the network connection point.

Dynet Serial Port (Service use only): This is a network connection point for a PC node only.
The touch screen cannot be powered from this port.
Mini USB Type B Socket: Connection point when connecting the PC for touch screen
programming. All other connections and ancillaries are for future development.
USB Type A Socket: Connection point when connecting a USB keyboard. External
keyboard is required to stop the touch screen application when performing firmware
upgrades.
Reset Switch: Will cause the touch screen to reboot when pressed.
All other connections and ancillaries are for future development.
Getting Started
Touch screen
Emulator
The Dynalite Touch screen emulation software program is recommended as a testing

platform for any touch screen pages prior to downloading the project to the actual
touch screen.
The emulator can be found on the Dynalite CD provided as a part of this course or
alternately on the distributors site under the Downloads link.
To install the Touch screen emulator, follow the steps below:
Go to D:\Dynalite CD\Touchpanel installer.
Double click TouchPanelEditorSetup and follow the prompts.

Included in the emulator is the Touch Screen editor which offers page making and
editing features. The editor contains templates for buttons, sliders, and gangs and
allows for the quick creation of projects.
Visual Web
Developer
For more advanced projects and page creation an html editor is required. As a
development package Dynalite suggests Microsoft Visual Web developer 2005. This is
a freeware application that must be downloaded from the internet and installed onto the
developers PC prior to training. The software is available at:
http://www.download.com/Visual-Studio-2005-SP1/3000-10251_4-10618634.html
ActiveSync
Active Sync is required to transfer pages to the Touch screen, to install active sync
follow the steps below:
Go to C:\program files\Dynalite\Touchpanel\ActiveSync.
Double click the ActiveSync installer and follow the prompts.
10
Key
Point
Windows Mobile
Device Centre
Active sync 4.5 or higher is required for the touch screen, See page 42 for further
installation instructions.
If you are running Windows Vista you will be prompted to install Windows Mobile
Device Centre. The current version is 6.1.6965.
Touch screen Software

Setting up the PC
Touch Screen
Communicat-ions
Ports
Once you have installed the touch screen software, the COM port needs to be set for the
program. To complete this, follow the steps below:
Run the Touch Screen Software. Start > All Programs > Dynalite > Touchpanel > Launch
PC Touchpanel.
Fig 1.2
To set your COM Ports. Go to File > Set Comm Port and select the correct comm
ports.
Key
Point
The Setup page (top left, Fig 1.2) requires password access, the password is: 6666.
11
Entering Edit Mode

To Enter Edit Mode, go to the Edit Menu and select Enter Edit Mode
Fig 1.3
You will see the window in Figure 1.4
Once you are in Edit Mode you can begin editing your Touch Screen Pages.
Getting to know the Editor Window
Fig 1.4
The Property Pane
The Property Pane (found on the right hand side of Fig 1.4) will show the properties of the
active element. The details in this pane will be dependent on the element selected.
12
The Description
Pane
The Description Pane (found on the right hand side of Fig 1.4) will show the description for
the property that you are editing in the Property Pane.
Edit Handles
The Edit Handle shows the ID of the active element.

It also allows you to select an element that is too small to be selected otherwise.
Bounding Box
The Bounding Box shows the size of the selected element. It is helpful to see where
elements overlap.
Toolbar items
- Create new page.
- Open existing page.
- Save.
- Cut.
- Copy.
- Paste.
- Snap-To-Grid.
- Toggle Property pane view.
Using the Editor

Elements
Touch Screen pages are created using elements. The term element refers to all the items
that display on the touch screen including backgrounds, buttons, sliders, text fields and
gangs.
See page 21 for a table of elements and their properties.
Selecting
Elements
To select an element click on it with the mouse or alternately, press the TAB key until it is
selected.
The elements border will change indicating that it is the active element.
Also the properties of the element will be displayed in the Property Pane on the right hand
side of the window.
Fig 1.5 Active Element border
13
Changing
Properties
Once an item is selected you can modify its properties in the Property Pane, shown in Fig
1.6.
When you have changed the value the property will be changed on the element and the
element may be redrawn.
E.g. Fig 1.6 displays the Body properties, click Background Image to change the
background picture displayed on the page.
Fig 1.6
Adding
Elements
To add a new element to the page, click Edit > Insert > (Element Type) from the toolbar
menu.
You can then move the element to the desired position and change any properties on the
element.
Moving
Elements
Once an element is selected you can drag it around the screen, alternately use the X and Y
fields in the Property Pane, see Fig 1.7.
Changing an
Elements Theme
On the Property Pane there is a property called Theme, shown in Fig 1.7. This property
allows you to select from pre-defined styles for the element.
If you double-click this property you will get the Class Selection Window, see Fig 1.8.
14
Fig 1.7
Class Selection
Window
If you change the Theme or Behaviour of an element you will see the Class Selection Window
shown in Fig 1.8. This window allows you to select multiple classes to apply to the element.
The reason that you might want to select multiple classes is because a Theme may only
modify a portion of an elements theme, such as the Font, Background Image, or Text
Colour. You can combine these by selecting multiple themes.
This allows you to select for example a glowbutton with glossy_text
Fig 1.8
15
Changing an
Elements
Behaviour
On the Properties Pane there may exist a property called Behaviour.

This property also shows the Class Selection Window (See Class Selection Window).
This property allows you to modify the action the element will complete.
E.g. A Button allows you to select a presetbutton behaviour. This enables the button to
send and receive presets.
Adding a Button
To add a button, click Edit > Insert > Button.
Click the properties pane to edit the properties of the button, shown in Fig 1.9 below.
- Button name
- Button X axis location
- Button Y axis location
- Button Width
- Button Height
- Display transparent images
- Toggle button between on / off
- Button text
- Button On text
- Button off text
- Sound for button
- Button Theme
- Behaviour for button
Fig 1.9
See Appendix 1 for more information on button properties.
Key
Point
If you are familiar with touch screen editing using an HTML editor, note that adding this
element type is the same as scripting a Standard Button.
16
Adding a Preset
Gang
To add a preset gang, click Edit > Insert > Preset Gang.
Click the properties pane to edit the properties of the preset gang, shown in Fig 1.10 below.
- Preset gang ID
- Preset gang X axis location
- Preset gang Y axis location
- Preset gang width
- Preset gang height
- Preset gang orientation
- First button preset value
- Number of rows in gang
- Number of columns in gang
- Area for presets
- Join value for presets
- Request area preset on load
- Display name on buttons
- Presets associated to buttons
- Class for buttons in gang
Fig 1.10
See Appendix 1 for more information on preset gang properties.
Adding a Slider
To add a button, click Edit > Insert > Slider.
Click the properties pane to edit the properties of the slider, shown in Fig 1.11 below.
- Slider ID
- Slider X axis location
- Slider Y axis location
- Slider width
- Slider height
- Slider theme
- Slider type
Fig 1.11
See Appendix 1 for more information on slider properties.
17
Adding a Slider
Gang
To add a slider gang, click Edit > Insert > Slider Gang.
Click the properties pane to edit the properties of the slider gang, shown in Fig 1.12 below.
- Slider gang ID
- Slider gang X axis location
- Slider gang Y axis location
- Slider gang width
- Slider gang height
- Slider gang orientation
- Slider gang 1st channel
- Slider gang last channel
- Distance between sliders
- Display level on sliders
- Allow wipe across sliders
- Where level appears
- Slider gang class
- Class for levels
- Sliders addressing mode
- Area for slider gang
- Join for slider gang
Fig 1.12
See Appendix 1 for more information on slider gang properties.
Adding Text
To add a button, click Edit > Insert > Text.

- Text field ID
- Text field X axis location
- Text field Y axis location
- Text field width
- Text field height
- Text field text
- Text alignment
- Text font type
- Text font size
- Text font style
- Text weight
- Text colour
- Text field background
- Text field theme
- Text field behaviour
Fig 1.13
See Appendix 1 for more information on text field properties.
18
Adding Images
To add a button, click Edit > Insert > Image.
Click the properties pane to edit the properties of the image, shown in Fig 1.14 below.
- Image ID
- Image X axis location
- Image Y axis location
- Image width
- Image height
- Image file path
- Image behaviour
Fig 1.14
See Appendix 1 for more information on text field properties.
19
Behaviours Available for Element Types

Element Type
Behaviour
Description
Button
Swap_page
Allows the Button to change pages when clicked.
Presetbutton
Allows the Button to send and receive buttons.
Rampbutton
Allows the button to send ramp up/ramp down

messages.
Togglepreset
Allows button to toggle between two presets for an area.
Slider
Dhslider
Horizontal Slider.
Text
Dvslider
Vertical Slider.
Dlhslider
Horizontal Logical Slider. Allows the slider to

send/receive Logical Channel Messages.
Dlvslider
Vertical Logical Slider. Allows the slider to send/receive

Logical Channel Messages.
Dphslider
Horizontal Physical Slider. Allows the slider to

Send/receive Physical Channel Message.
Dpvslider
Vertical Physical Slider. Allows the slider to Send/Receive

Physical Channel Message.
Channellevel
Displays a logical Channel Level.
Clock
Shows a Clock.
Date
Shows the Date.
Current_temperature
Shows the temperature.
Pchannellevel
Displays a physical channel level.
Security
Allows you to set a security level for the page.
Body
20
Utility pages
What are Utility
Pages?
A number of default configuration pages have been added to the Touch Screen emulator.
These pages allow access to different settings pages for such things as public holidays, tasks
and screen settings.
These pages can be found in a folder called Dynalite located within the project folder.
See below for a summary of each of the available pages.
testdevices.html
The test devices page allows you test various touch screen components.
Fig 1.15
Click the
button for each test type.
The Audio, Backlight and Light level tests require you to enter the results, once the test is
complete enter the result using the
and
buttons.
21
config.html
This page contains time and date settings as well as the box number for the Touch Screen.
Click the
button to change these details.
Fig 1.16
The configuration page also provides access to the other configuration pages.
22
The dns.html page displays networking information for the Touch Screen.
dns.html
Fig 1.17
To edit the network properties, click the
button and then click the
button for the address you wish to add.
Click the
Key
Point
button to save the changes.
The touch screen can either use DHCP to acquire TCP/IP settings or they can be manually set.
23
users.html
The users.html page is used to set access levels for users.
Fig 1.18
To modify an existing users access, follow the steps below:
Select the user by clicking on the user name you wish to modify on the left hand side of the
screen.
Click the access level buttons you wish this user to have access to.
Click on the Close button to exit the screen
24
tasks.html
The tasks page allows you to create tasks for the project.
The column on the left lists the tasks created.
The right hand side column displays each of the actions for the highlighted task on the left, see
Fig 1.14.
Fig 1.19
To create a new task, complete the steps below:
To create a new task, click the
Name the task by clicking on the
button.
button.
Edit the first action by clicking on the
Add the required number of actions by clicking on the
Click the
button.
button.
button.
25
schedules.html
Schedules are created and maintained in the schedules.html page.

The list on the right hand side of the screen details the schedules created.
Click the
and
buttons to change the status of the event.
Fig 1.20
To create a new schedule, complete the steps below:
Click the
Click the
- Name
- Time
- Days
- Dates
- Months
- Event
Click the
button to add a new schedule.
buttons to add the following details:
button to save any changes you have made.
26
screensetting.ht
ml
This page determines the screen settings for the Touch Screen. Set the backlight level and
screen brightness here.
Fig 1.21
The
button is used calibrate the touch functionality of the touch screen. If you
are experiencing issues with the touch interface of the Touch Screen, calibration maybe
required.
To calibrate the touch screen, click the
button.
Using a stylus, follow the onscreen instructions by touching the screen in the indicated places.
Once calibration is complete, you will be sent back to the screen settings page.
27
publicholidays.h
tml
The Public Holidays page allows you to set public holiday dates for the Touch Screen.
Fig 1.22
Touch Screen Configuration Page Summary

Touch Screen contains a number of configuration pages which can be accessed by clicking
on the Config button, a summary of each is provided below:
Configuration
config.html
Provides access to all other configuration pages
Contains a button to Sign-on the Touch Screen
Contains a button to exit the Touch Screen application
Set current Time
Set current Date
Set Touch Screen box number
Displays current Touch Screen and CE Image versions
Screen Settings
screensettings.html
a.
b.
c.
d.
e.
Set backlight delay period

Set backlight on level
Set backlight standby level
Set screen timeout period
Allows access to recalibrate screen
28
Network
Settings
dns.html
a.
Specify to use DHCP for network settings
b.
Set the following network properties - IP Address, Gateway,
DNS2.
User
Configuration
users.html
a.
b.
c.
d.
e.
f.
Schedules
View all schedules

Add new schedules
Remove existing schedules
Enable / Disable schedules
Modify the following schedule properties: Time, Days, Dates,
Months and
tasks.html
a.
b.
c.
d.
e.
f.
g.
Public Holidays
View all users

Add new users
Change user passcode
Modify user access levels
Login as a different user
Logout current user
schedules.html
a.
b.
c.
d.
e.
Events.
Tasks
Subnet, DNS1 and
View all tasks

Add new tasks
Remove existing tasks
View task actions
Add and remove task actions
Edit task actions
Test tasks by running
publicholdidays.html
View all public holidays
Add public holidays
Remove existing public holidays
Edit the name and date of existing public holidays.
29
Killing the Touch Screen Application

At times you may need to kill the application running on the touch screen to access the
Windows CE operating system.
To exit the application, go to the Setup screen and click the

following dialog will appear.
button. The
Fig 1.23
Alternately, this can be achieved by sending the DyNet commands below:
DyNet(0x5c,0xcf,[Box Number],0x01,0x3e,0x01,0x00)
Delay(2)
DyNet(0x5c,0xcf,[Box Number],0x02,0x21,0x00,0x00)
Stop &
Check
How do you enter Edit Mode in the Touch Screen Emulator?

File > Enter Edit Mode.
Tools > Enter Edit Mode.
Edit > Enter Edit Mode.
None of the above.
A Button is a type of?
Element.
Object.
Field.
Button.
30
Utility pages can be found by clicking on which button on the startpage.html?

The Go to Area button.
The Setup button.
The Program button.
No access from start page.
Activity
Open & modify an existing project

Copy the project folder on the Dynalite CD and change the background of the start.html
page:
Copy the project file, found in D:\Dynalite CD\Touchpanel project\Test project to C:\Program
Files\Dynalite\Touchpanel
Change the background image of the start.html page to the image found in:
C:\Program Files\Dynalite\Touchpanel\Projects\Test Project\user\images\backgrounds
Save changes.
Project Methodology
When creating a Touch Screen project use the following steps:
1. Start a new project
2. Create/modify themes for project requirements
3. Edit template.html page for project requirements
4. Add pages required for project
5. Save & Test
6. Deploy to Touch Screen.
31
Creating a New Project

The PC Application allows you to easily create a new Touch Screen Project:
Select File > Create New Project from the menu.
Select a directory where you wish to store your project and create a folder, select this folder
and rename it, and then click
This will create all the Touch Screen files in the directory that you selected, including the
start page.
Have a look at the Directory Structure that you just selected for the project
It should look something like this:
Fig 1.23
Dynalite created files that may be changed in the future will be under the Dynalite directory.
Your files should be stored under the user directory or in the Project Directory.
Activity
Create a new project

This is the first in a series of activities in which we will create a touch screen project.
Complete the steps for the first activity below:
1. Create a new touch screen project called Trainingday.
2. Change the background image of the startpage.html to one found in:
3. \\Trainingday \user\images\backgrounds
4. Delete all but the Setup and Goto buttons that appear.
5. Change the text field to display Main Page
32
6. Add a button and name it Kitchen

7. Save changes.
Themes
What are
themes?
Themes are pre-defined styles that are applied to your elements using the Theme property.
They may be combined using the Class Selection Window where the last one in the list
should take precedence over the previous ones
Creating Themes
To create a new theme use the Edit > Create Theme >(Element Type) menu items.
You will then have to enter a Class Name for the theme which is an identifier that allows you
to apply it to elements.
You will also have to select an existing theme to copy.
Fig 1.23
The Class Name should not have any spaces or quotes in its name.
You will then see the Theme Editor window, shown in Fig 3.1 below:
Fig 1.24
The Theme Editor Window consists of an example of what the theme will look like on the
left and the properties for the theme on the right.
33
Once again modifications will take place once you have finished editing a property.
Clicking OK will save the theme to the Theme Stylesheet File and you can then continue
editing.
Exit and re-enter Edit mode to make your new theme available.
Activity
Create a new button theme

Activity details:
Modifying
Themes
Key
Point
Create a new button theme, use the glowbuttonlong theme as template.
Name the new theme training.
Change the button colour from blue to one found in, \user\images\buttonsglossy in
the Trainingday project folder.
Change the button font to Arial and the font weight to bold.
Modifying themes is almost exactly the same as creating a theme except you use the Edit
> Modify Theme > menu items and you do not need to specify a new class name for
the theme.
A new or modified theme will only be available to be used after you leave edit mode and
then re-enter it.
Fig 1.25
Key
Point
If you are modifying a theme. Any elements that use that theme will not be automatically
updated to use the modified theme. You will need to change at least one property on the
element (other than moving it) for the new theme to take effect.
34
Templates
What are
Templates?
Templates are a useful way to determine element properties for an entire project. For
example, you may like to set a specific background image for all pages on a project.
To achieve this you need to modify the template.html page for that project.
Select File > Open file > template.html
Now modify the page as required, by changing the background image in the Body
Properties.
Now, simply save the changes and this page will now be added each time you add a new
page.
Buttons, sliders and gangs can all be added to the template page if required.
Activity
Modify template
Following on from the last activity, we will now modify the template for our project so that
new pages added will conform to this projects requirements.
Complete the following steps:
Go to File > Open file and select template.html
Change the background image for the template to one found in,
/user/images/backgrounds in the Trainingday project folder.
Add a button with the theme you created in the previous activity, give it a behaviour of
swap page and link it to the start.html page.
Save changes.
35
Creating a New Page

To create a new Touch Screen page, click the New Page button on the Toolbar or use the
File > New Page menu item.
This will then ask you to specify a filename for the new page.
Fig 1.26
Key
Point
Adding Time to a
Page
The touch screen software will copy the template.html file to create the new page file, edit
this page set up particular defaults for a project.
It is possible to add a text field that displays the time on a page.

To add the time to your page, click Edit > Insert > Text.
Fig 1.27
Next, you will need to modify the Div Properties.

36
Change the Theme Property to time_large or time _small (depending on the text size you
require).
Change the Behaviour Property to clock.
You may also change the Text colour and Font properties if required.
Adding the Date
to a Page
It is also possible to add a text field that displays the date on a page.
To add the time to your page, click Edit > Insert > Text.
Fig 1.28
Next, you will need to modify the Div Properties.

Change the Theme Property to text_line.
Change the Behaviour Property to date.
You may also change the Text colour and Font properties if required.
Stop &
Check
Before deploying a project, what is the last thing you should do?
Edit the project template.
Copy the project.
Save and test the project.
What is the name of the first page that displays in a touch screen project?
Frontpage.html
Mainpage.html
37
Template.html
Startpage.html.
What behaviour type is required to display the time in a text field?
Clock
Time
Date.
Activity
Pages
Following on from the previous activity, add a new page to your trainingday project called
Kitchen.
Add the following elements to your page.
Add a text field displaying Kitchen.
Add a text field to display the time.
Add a preset gang with 4 presets for Area 2.
Add a vertical slider gang with 2 sliders for Area 2.
Save the page.
Open the Startpage.html
Change the button behaviour of the Kitchen button to Swap_page
Change the Page Link Properties to the path of the kitchen page you just created.
38
Editor Properties
The Editor Properties can be opened by selecting the Edit >Editor Properties menu item.
The Editor properties window controls the default functionality of the Editor.
Fig 1.29
Default Themes
The Default Themes items change the Theme applied when you insert a new element from
the Edit >Insert menu.
Grid Properties
The Grid Properties allow you to change the functionality of the Snap-To-Grid feature of the
Editor.
Files
The Theme File property controls the Theme file that is used in a new page.
The Page Template File property sets the file that is used for a new page.
Misc Properties
Show advanced properties option allows for the display of advanced properties.
39
Configuration Properties
The Configuration Properties window can be opened by selecting the Edit >Config
Properties menu item.
The Configuration Properties window allows you to change the most needed entries of the
config.xml file, which controls how the Touch Screen operates.
Fig 1.30
40
Miscellaneous
The miscellaneous properties determine the start page and time information for the project.
Start Page determines the first page to load in the project.
Show Test page
Auto Logoff
The Auto logoff properties control the time out page and the delay to time out.
Backlight
Backlight properties control the backlight settings for the touch screen.
Default Fades
Default fades control the fade settings for the touch screen.
Active Sync
What is Active
Sync?
In order to deploy pages created in the Touch Screen emulator Active Sync needs to be
installed. This is a Microsoft application required to copy files from one device to another.
To install active sync follow the steps below.
Setting Up
ActiveSync
Connect the DTP160 to the PC using the USB cable.
Fig 1.31
ActiveSync should start and show this screen.

Select Yes and Click
41
Fig 1.32
Click
Fig 1.33
Clear the Checkboxes and click
42
Fig 1.34
Click
Deploying a Whole Project

When in normal mode you can use the Edit >Deploy to Touchpanel menu item. This will
allow you to deploy the whole project to the Touch Screen Device.
This may take a few seconds to appear as it is detecting any available devices.
Choose Touch
Screen Device
Step one allows you to chose your Touch Screen Device.

Select your device from the Combo Box and then click the
button.
If your device is not in the Combo Box then make sure it is plugged in and then click the
button.
43
Fig 1.35
Select Files to
Upload
When you click the

button the software will start comparing the file times of
the Local and Remote files and then automatically ticks the files that need updating based
on the file times.
Fig 1.36
You can then tick extra files to add to the list of files to be deployed or un-tick them to
remove them.
When you are ready to copy the files across click the
button.
44
Deploy To
Device
After you click the

button the software will start to copy the files
between the PC and the Touch Screen Device.
There are several Status icons that can be shown on this screen:
Red Flag
These are the files that are not going to be copied to the Touch
Screen.
Green Flag
These are the files that are going to be copied to the Touch
Screen but are waiting to be sent.
Red X
An error occurred.
Green Tick
Green
Triangle
File Copied Successfully.
File in process of being copied.
Fig 1.37
45
Once the transfer is finished, a message will appear in the bottom right of the dialog box
saying Copy Complete.
Click the
button to close the dialog box.
Deploying a Single File

While in edit mode you can deploy a single file by using the File >Save and Deploy menu
item. This will copy a single file over to the attached Touch Screen.
No user interface is displayed until the operation is complete. You will then see a message
box telling you whether the operation Succeeded or Failed.
Fig 1.37
Fig 1.38
You can also chose to deploy a file when you are asked to save because you are opening
a new file, creating a new page, or leaving edit mode.
Fig 1.39
46
Advanced Touch Screen Editing
Topic 2: Advanced Touch Screen Editing

HTML editor
Whilst the Touch Screen emulator allows for the creation of a variety of pages for the
DTP160, a number of more advanced configuration features can be completed using an
HTML editor.
Open the project

in Microsoft
Visual Web
developer
To create new pages first we need to open the project in Microsoft Visual Web developer
2005.
Select File > Open Web Site

Navigate to the required project folder and click on it to select it. Click on
open the project.
to
Otherwise open the file using your own preferred web development software.
In the Solution Explorer window double click on template.html in the Colour Touch Screen
folder to open the page template file.
Select File > Save template.html as and save the page as Page1.
The new page will then appear in the Solution Explorer window.
Fig 2.0
47
Defining a new
touchpanel
start page
The Default start page for a new project is Start.html.

The start page can be easily changed by editing the file config.xml
With the development software open, double click on the file config.xml in the colour
touchpanel folder.
Edit the line:
<StartPage>.\start.html</StartPage>
To read:
<StartPage>.\MyStartPage.html</StartPage>
Save the file by clicking on File > Save Config.xml.
Viewing changes
to the touchpanel project
The Dynalite emulator allows the programmer to view changes instantly and check page
functionality without having a touch screen connected to the PC.
Open the Touch Screen emulator from the Start menu. It can be found in the Dynalite
Directory.
Click on File > Open Existing Project and navigate to the Colour Touch Screen folder within
the required Project folder.
Click on
to open the touch screen project.
Fig 2.1
48
Key
Point
How the code is

arranged on a
touchpanel
page
Each time you review changes to the touch screen pages you will need to restart the touch
screen emulator. To restart the emulator click on File > Restart.
The pages of a touch screen are in essence web pages. As this is the case, the format of
the code for a touch screen panel page will appear familiar to anyone who has worked with
HTML previously.
Each code section is defined with special key words called tags. These tags are a standard
format as can be seen below. The tags for the body of the code (where the button element
and slider element code is written) are <body> to denote the start of the body section and
</body> to provide the end of the body section.
Touch panel page layout in code:
<ht ml >
<head>
</ head>
<t i t l e></ t i t l e>
<scr i pt >
/ / Javascr i pt f unct i ons go her e.
</ scr i pt >
<body>
<! - - The code f or each page el ement goes her e - - >
</ body>
</ ht ml >
Special Files
In the Root Folder of your touch screen project, you will find a file called config.xml this is
the first file loaded by the Application and contains information about the project you have
just loaded.
By default, it looks something like this:
<r oot _obj ect Type=" Obj ect " >
<Aut oLogof f _Del ay Type=" UI nt eger " >300</ Aut oLogof f _Del ay>
<Backl i ght _Del ay Type=" UI nt eger " >30000</ Backl i ght _Del ay>
<Backl i ght _Of f Level Type=" UI nt eger " >2</ Backl i ght _Of f Level >
<Backl i ght _OnLevel Type=" UI nt eger " >255</ Backl i ght _OnLevel >
<bBackl i ght On Type=" Bool " >Tr ue</ bBackl i ght On>
<bBl ockAr eaZer oTr ansmi t Type=" Bool " >Tr ue</ bBl ockAr eaZer oTr ansmi t >
<BoxNumber >20</ BoxNumber >
<Conf i gPage>dynal i t e\ conf i g. ht ml </ Conf i gPage>
<Def aul t Logi cal Fade Type=" I nt eger " >2000</ Def aul t Logi cal Fade>
<Def aul t Physi cal Fade Type=" I nt eger " >2000</ Def aul t Physi cal Fade>
<Def aul t Sl i der Fade Type=" I nt eger " >10</ Def aul t Sl i der Fade>
<Gl obal Scr i pt >dynal i t e\ j s\ gl obal . j s</ Gl obal Scr i pt >
<Local e>dynal i t e\ l ocal es\ AUSTRALI A_Sydney. xml </ Local e>
<Packet Del ay Type=" I nt eger " >70</ Packet Del ay>
<Scr i pt Pat h>user \ j s\ user . j s</ Scr i pt Pat h>
<ShowTest Page Type=" Bool " >Fal se</ ShowTest Page>
<St ar t Page>st ar t . ht ml </ St ar t Page>
<Test Page>dynal i t e\ t est devi ce. ht ml </ Test Page>
<Ti meFor mat 12hr Type=" Bool " >Fal se</ Ti meFor mat 12hr >
49
<Ti meOut Page>st ar t . ht ml </ Ti meOut Page>

</ r oot _obj ect >
There are a couple of entries in this file that you will be interested in. They are:
StartPage This is the first page that loads in your project.
ScriptPath User scripts are stored in this directory.
Page Backgrounds
Changing the
Default
Background
Provided you are creating your pages from a template file, a default background for each
of your pages will already be defined.
The configuration for each background is defined in the style.css file, which is in the colour
touch screen panel folder. Every background image should be saved under colour touch
panel/user/images/backgrounds. The image should be no greater than 640 x 480 pixels
and should preferably be exactly this size.
To view a list of the different background options currently available to you in your project,
open the style.css file and scroll through the list of backgrounds that are already
accessible. This list can be added to as required, as we will explain later.
To change the background for a page, open that pages HTML code in the development
software and edit the class for the body of the code. The class is defined inside the
opening body tag e.g. <body class=name of background reference goes here >.
Replace the italicized code with the name of the background as defined in the style.css file.
<body class="defaultBody" >
Can be changed to
<body class=background_gradients_aqua >
Adding a new
backgrounds
To add a new background complete the steps below:

1. A background image should be 640x480 pixels to ensure it fills the screen as
required.
2. Create the picture file and save it in the user/images/backgrounds folder, which is
in the Touch Screen Panel project folder.
3. Open the style.css file and copy an existing background style class text.
4. Paste it in below the existing background style classes and rename it using a
name to reflect the image.
5. On the background-image line replace background.gif with the filename and
extension of the new background.
6. Save the style.css file and then open the page file that is to use the new
background.
50
7. Retype the line <body class="???"> to read <body class="new background

name">
8. Save the file and check the display in Design view to test.
Revised style.css file:
. def aul t Body
{
backgr ound- i mage: ur l ( user / i mages/ backgr ounds/ backgr ound. gi f ) ;
backgr ound- r epeat : no- r epeat ;
backgr ound- col or : #000000;
bor der - st yl e: none; mar gi n: 0%;
}
. backgr ound_house
{
backgr ound- i mage: ur l ( user / i mages/ backgr ounds/ House. j pg) ;
backgr ound- col or : #000000;
bor der - st yl e: none;
mar gi n: 0%;
}
51
Scripting
HTML Touch Screen Panel Elements

Adding Some
Buttons
Open the file you created in the previous step (MyStartPage.html) in a text editor.
It should look like this:
<ht ml xml ns=" ht t p: / / www. w3. or g/ 1999/ xht ml " xml ns: dynal i t e>
<head>
<l i nk i d=" dynal i t e_ht c" hr ef =" dynal i t e/ dynal i t e. css" t ype=" t ext / css"
r el =" st yl esheet " / >
<l i nk i d=" PageSt yl e" hr ef =" st yl e. css" t ype=" t ext / css" r el =" st yl esheet " / >
<t i t l e></ t i t l e>
<scr i pt l anguage=" JScr i pt " t ype=" t ext / JavaScr i pt " >
</ scr i pt >
</ head>
<body cl ass=" body1" >
</ body>
</ ht ml >
After the line that says <body class="body1"> add two new lines:
<DYNALI TE: BUTTON cl ass=" pr eset but t on gl owbut t onl ong" ar ea=" 1" pr eset =" 1"
r equest onl oad=" t r ue" >On</ DYNALI TE: BUTTON>
<DYNALI TE: BUTTON cl ass=" pr eset but t on gl owbut t onl ong" ar ea=" 1"
pr eset =" 4" >Of f </ DYNALI TE: BUTTON>
In the Touch Screen Application use File > Restart. You should end up with this.
Fig 2.2
Key
Point
If you have your COM ports setup correctly these buttons will send Dynet messages when
you click them. And also change their state when a Preset message for Area 1 comes in on
the Dynet Network.
52
Adding a New
Page
Scripting
1.
Copy Template.html and rename it to Page2.html.
2.
Add the following line in between the Body tags:

<DYNALI TE: BUTTON cl ass= gl owbut t onl ong
oncl i ck= TouchPanel . GoToPage( MySt ar t Page. ht ml ) >Page
1</ DYNALI TE: BUTTON>
3. Add the following line to MyStartPage.html after the two buttons:

<DYNALI TE: BUTTON cl ass= gl owbut t onl ong
oncl i ck= TouchPanel . GoToPage( Page2. ht ml ) >Page 2</ DYNALI TE: BUTTON>
4. Select File > Restart on the Touch Screen Menu.
Adding a Slider
1.
Open the file Page2.html in a Text Editor.
2.
Add the following lines after the button:
<di v cl ass=" dl vsl i der sl i der 1" ar ea=" 1" channel =" 4"
st yl e=" posi t i on: absol ut e; l ef t : 300px; t op: 200px; " ></ di v>
<di v cl ass=" channel l evel " ar ea=" 1" channel =" 4" st yl e=" posi t i on: absol ut e;
l ef t : 300px; t op: 180px; " >0</ di v>
3. Save your file.
4. Select File > Restart on the Touch Screen Menu.
Fig 2.3
Key
Point
If you have your COM ports set up correctly then moving this slider will send Dynet
Channel Level commands to Area 1 Channel 4. It will also follow any Channel Level
messages transmitted on the network by other devices.
53
Scripting
Slider Gangs
Fig 2.4
Slider Gangs allow you to create multiple sliders that control contiguous channels in an
Area. This is a lot quicker to create pages and also is a lot quicker when running on the
panel. Various properties that change the functionality and appearance of the sliders make
it easy to quickly and uniformly change all the sliders on a page.
1.
Create a new page by copying Template.html and renaming it to SliderGang.html.
2.
Add a button on MyStartPage.html that will move you to SliderGang.html.
3.
Add the following between the body tags:

<DYNALI TE: SLI DERGANG i d=" gang"
st yl e=" posi t i on: absol ut e; t op: 100px; l ef t : 100px; wi dt h: 480px;
Hei ght : 230px; "
ar ea=" 4" or i ent at i on=" ver t i cal " channel mi n=" 1"
channel max=" 8" j oi n=" 255" gap=" 60" sl i der cl ass=" sl i der 3"
l evel cl ass=" l evel t ext " showl evel s=" t op" >
</ DYNALI TE: SLI DERGANG>
As you can see, many attributes have been set for this slider. If you are reusing this style of
slider, you may wish to create a CSS class and use it to set most of the parameters. Any
parameters that have been set in both the CSS class and in the <DYNALI TE: SLI DERGANG>
tag will use the parameters that have been set in the tag.
54
Create a CSS
class to for the
Slider Gang
Scripting
1.
Open style.css.
2.
At the end add the following:

mygang
{
sl - or i ent at i on: ver t i cal ;
sl - channel mi n: 1;
sl - channel max: 8;
sl - j oi n: 255;
sl - gap: 60;
sl - sl i der cl ass: sl i der 3;
sl - l evel cl ass: l evel t ext ;
sl - showl evel s: t op;
}
3. In SliderGang.html change the <DYNALI TE: SLI DERGANG> tag to read:

<DYNALI TE: SLI DERGANG i d=" gang" cl ass=" mygang" ar ea=" 4"
></ DYNALI TE: SLI DERGANG>
This makes your HTML pages much neater, and allows you to reuse the slider with the
same parameters on other pages.
Parameters that
are available for
Slider Gangs
Attribute
name
orientation
Class
Attribute
sl-orientation
channelmin
sl-channelmin
channelmax
sl-channelmax
gap
sl-gap
area
join
devicecode
boxnumber
perc
sl-area
sl-join
sl-devicecode
sl-boxnumber
sl-perc
allowwipe
sl-allowwipe
showlevels
sl-showlevels
sliderclass
sl-sliderclass
levelclass
sl-levelclass
channels
sl-channels
Description
The Orientation of the sliders.
Possible values are vertical,
horizontal
The channel number of the first
slider
The channel number of the last
slider
The gap between the sliders in
pixels
The Area
The Dynet Join Value
The Device Code
The Box Number
Whether the level value is
displayed as a percentage or
the actual level
Allows you to wipe your finger
across the sliders to set the
values.
Where the level appears. top,
bottom, left, right, none
The CSS class to use for the
sliders
The CSS class to use for the
level text
Comma delimited channel
numbers blank or 0 to skip a
slider
Default
Value
vertical
1
1
0
255
True
true
none
Channelmin,cha
nnelmax
55
Key
Point
Scripting
Either the Area and Join or the Device Code and Box Number can be used. This
determines whether the sliders send Logical or Physical Dynet Messages. If you specify
both then Logical Channel Messages will be sent.
If you select Logical Sliders, then the SliderGang object will automatically request levels
whenever a Preset changes.
Methods that are

available for
Slider Gangs
Method name
int Level (int
ChannelNumber)
void RequestLevels ()
Description
Returns the current level of the specified channel number.
void ProgramPreset (int

Preset)
Sets the specified preset to the current channel levels of the

slider gang.
Requests the slider gang to send a dynet message requesting

the current channel level for each of the channels.
Preset Gangs
Fig 2.5
Preset Gangs allow you to create multiple Preset buttons in a grid. All the buttons must be
sequential and in the same Area.
1.
Open myStartPage.html.
2.
After the last button enter the following:
<DYNALI TE: PRESETGANG i d=" pr ese t s"

st yl e=" posi t i on: absol ut e; t op: 150px; l ef t : 250px; WI DTH: 130px; HEI GHT: 100px"
or i ent at i on=" downr i ght " ar ea=" 4" j oi n=" 255" col s=" 2" r ows=" 4"
pr eset mi n=" 1" names=" P 1| P 2| P 3| P 4| P 5| P 6| P 7| P 8"
but t oncl ass=" but t on2" >
</ DYNALI TE: PRESETGANG>
56
Sample CSS
Class
Scripting
Like Slider Gangs, Preset Gangs allow you to specify frequently used parameters in a CSS
class.
. mypr eset gang
{
pr - or i ent at i on: downr i ght ;
pr - pr eset mi n: 1;
pr - r ows: 4;
pr - col s: 2;
pr - names: P1| P2| P3| P4| P5| P6| P7| P8;
pr - but t oncl ass: but t on2;
pr - r equest onl oad: t r ue;
wi dt h: 130px;
hei ght : 100px;
posi t i on: absol ut e;
}
Parameters that
are available for
Preset Gangs
Methods that are

available for
Preset Gangs
Attribute
name
orientation
Class
Attribute
pr-orientation
presetmin
pr-presetmin
Rows
pr-rows
Cols
pr-cols
Area
Join
pr-area
pr-join
Names
pr-names
buttonclass
pr-buttonclass
requestonload
pr-requestonload
presets
pr-presets
Method name
int currentpreset()
void RequestCurrentPreset()
void RecallPreset(int Preset)
Description
Default Value
The order that the

buttons are drawn
in. Possible
Values.
Downright.
RightDown
DownRight
The First Buttons

Preset value
The number of
Rows
The number of
Columns
The Area
The Dynet Join
Value
The names of the
Presets
The button class
used to draw the
buttons
Whether to
request the
current Preset for
the Area when the
page is loaded
Comma delimited
Preset numbers, 0
or blank to skip a
button
1
1
1
1
255
Preset 1| Preset 2
button
true
Presetmin ..
Presetmin+rows*cols
Description
Returns the current Preset.
Requests the Preset gang to send a dynet message
requesting the current Preset.
Sends a dynet Preset command for the specified
Preset.
57
Scripting
1. Read Config.xml.
Startup
2. Creates the Touch Screen Objects.

3. Open the GlobalScript file from the Config.xml and sets it as the Global variable for
any other scripts , then calls Main.
4. Open the user.js file from the <ScriptPath> directory and sets it as the User
variable for any other scripts, then calls Main.
5. Opens the <StartPage> or <TestPage>.
Key
Point
Please put any user generated files in the user directory because future releases may
overwrite the Dynalite directory.
HTML Classes
All pages are HTML documents so you can use your favourite HTML editor to modify them.
To give all your pages the same look and feel you should use template.html as a template
for any new pages
Dynalite.css is a stylesheet that is shipped by Dynalite that exposes enhanced functionality
to your HTML pages.
If you look at the template.html file you will see two lines:
<l i nk i d=" dynal i t e_ht c" hr ef =" dynal i t e/ dynal i t e. css" t ype=" t ext / css"
r el =" st yl esheet " / >
<l i nk i d=" PageSt yl e" hr ef =" st yl e. css" t ype=" t ext / css" r el =" st yl esheet " / >
The first of these lines exposes the Dynalite skinned buttons and sliders to your page
The second of these lines applies a user defined skin to these objects. You may want to
modify this file to change the look of buttons and sliders on your pages.
If you do not wish to use the Dynalite defined buttons and sliders then these two lines can
be left out. You will still be able to call Dynalite defined scripting objects through the Global
and Touch Screen variables. (If this is the case then skip ahead to the Scripting section of
this document.)
Key
Point
Dynalite.css is shipped by Dynalite and may change in future releases. Do Not Modify It.
58
Scripting
Button Classes
Standard button
toggle
presetbutton
Class
No behaviour class is required, only a style class is needed.
Usage
<DYNALITE:BUTTON
class=buttonstyle>ButtonText</DYNALITE:BUTTON>
Description
Creates a skinned button that depresses when clicked.
Properties
Name
alpha
Usage
<DYNALITE:BUTTON class=toggle buttonstyle

onchange=IveBeenToggled()>
ButtonText</DYNALITE:BUTTON>
Description
Creates a skinned button that toggles between up and down.

Sound and IR features available.
Properties
Name
alpha
Description
Display alpha transparent images
Default
false
sound
Name and path of a sound file to

play
none
state
Specifies if the button is up or

down
false (up)
ontext
Text displayed when the button is

in the down state
On
offtext

in the upstate
Off
Event
onchange
Event fired when the button

changes state
Method
Toggle
Method called to toggle the

button state
Usage
<DYNALITE:BUTTON class=presetbutton buttonstyle area=?

join=? preset=?> ButtonText</DYNALITE:BUTTON>
Description
Creates a skinned button that sends a Preset. And shows the

whether the Preset is active. Sound and IR features available.
Properties
Name
alpha
Description
Description
Default
false
Default
false
59
togglepreset
Scripting
sound

play
none
preset
Preset to send when the button is

pressed
area
Area for the Preset
join
Join for the Preset
255
fade
Fade for the Preset
channel
Channel for the Preset. If

specified then the Preset button
acts as a channel Preset if not
the button acts as a normal
Preset
Config.DefaultFa
de
none
requestonlo
ad
Current Preset is requested when

button first loaded
false
Usage
<DYNALITE:BUTTON class=togglepreset buttonstyle area =?

Join=? preseton=? presetoff=?
Channel=?>ButtonText</DYNALITE:BUTTON>
Description
Creates a skinned button that toggles between two Presets. Sound

and IR features available.
Properties
Name
alpha
Description
Default
false
sound

play
none
state
Specifies if the button is up or

down
false (up)
ontext

in the down state
On
offtext

in the upstate
Off
60
rampbutton
Scripting
preseton

up
presetoff

down
area
Area for the Preset
join
Join for the Preset
255
fade
Fade for the Preset
channel
Channel for the Preset. If

specified then the Preset button
acts as a channel Preset if not
the button acts as a normal
Preset
Config.DefaultFa
de
none
requestonlo
ad
Current Preset is requested when

button first loaded
Event
onchange
Event fired when the button

changes state
Method
Toggle
Method called to toggle the

button state
Usage
<DYNALITE:BUTTON class=rampbutton buttonstyle area =?

Join=? channel=? fade=? direction=up/down
repeating=false/true>ButtonText</DYNALITE:BUTTON>
Description
Creates a skinned button that ramps a logical channel. Sound

available.
Properties
Name
alpha
Description
Default
false
sound

play
none
area
Area for the fading
join
Join for the fading
255
fade
fade for the fading
Config.DefaultFa
de
channel
Channel for the fading
255
false
61
soundbutton
irkey
Scripting
direction
Specifies to ramp up or ramp

down
none
repeating
Specifies to if the ramp is

repeated while the button is
pressed
false
Usage
<DYNALITE:BUTTON class=soundbutton buttonstyle

soundstyle> ButtonText</DYNALITE:BUTTON>
Description
Same as standard button but can play a sound when pressed.
Properties
Name
alpha
Description
Default
false
sound

play
none
Usage
<DYNALITE:BUTTON class=irkey buttonstyle

soundstyle>ButtonText</DYNALITE:BUTTON>
Description
Same as standard button but can be linked to an infra-red remote

control button.
Properties
Name
alpha
Description
Default
false
sound

play
none
devicecode
Devicecode of the device with IR

sensor
boxnumber
Boxnumber of the device with IR

sensor
key
The IR key that is linked to the

button
_ for Touch
screen . Leave
blank for all
device codes
_ for Touch
screen . Leave
blank for all box
numbers
_ for all IR keys
62
Scripting
Slider Classes
dlhslider
Usage
<div class=dlhslider sliderstyle area=? join=? channel=?></div>
Description
Creates a horizontal skinned slider that controls a logical channel.
Properties
Name
min
Description
Minimum value of the slider
Default
0
max
Maximum value of the slider
255
value
Current value of the slider
area
Area for the slider
join
Join for the slider
255
channel
Channel number for the slider
255
requestonloa
d
Request the current channel

level when slider first loaded
true
requestonpre
set

level when a Preset is received
false
linstenonly
Do not send out channel level

when is slider is moved
false
onchange
Event fired when the slider

position changes
onchannelcha
nge
Event fired when the value of

the channel changes
Method
IsDragging
Returns true when the slider is

being moved
Usage
<div class=dlvslider sliderstyle area=? join=? channel=?></div>
Description
Creates a vertical skinned slider that controls a logical channel.
Properties
Name
min
Description
Default
0
max
255
value
area
Area for the slider
Event
dlvslider
63
Scripting
join
Join for the slider
255
channel
255
requestonloa
d

true
requestonpre
set

false
linstenonly

false
onchange

position changes
onchannelcha
nge

the channel changes
Method
IsDragging

being moved
Usage
<div class=dphslider sliderstyle devicecode=? boxnumber=?

channel=?></div>
Description
Creates a horizontal skinned slider that controls a physical channel.
Properties
Name
min
Description
Default
0
max
255
value
devicecode
Devicecode for the slider
80
boxnumber
Boxnumber for the slider
channel
255
requestonloa
d

true
linstenonly

false
onchange

position changes
onchannelcha
nge

the channel changes
Event
dphslider
Event
64

Method
dpvslider
IsDragging

being moved
Usage
<div class=dpvslider sliderstyle devicecode=? boxnumber=?

channel=?></div>
Description
Creates a vertical skinned slider that controls a physical channel.
Properties
Name
min
Description
Default
0
max
255
value
devicecode
Device code for the slider
80
boxnumber
Box number for the slider
channel
255
requestonloa
d

true
linstenonly

false
onchange

position changes
onchannelcha
nge

the channel changes
Method
IsDragging

being moved
Usage
<div class=dhslider sliderstyle min=? max=?></div>
Description
Creates a horizontal skinned slider that has a level value between min
and max.
Properties
Name
min
Description
Default
0
max
255
value
Event
dhslider
Scripting
65
dvslider
Scripting
Event
onchange

position changes
Method
IsDragging

being moved
Usage
<div class=dvslider sliderstyle min=? max=? ></div>
Description
Creates a vertical skinned slider that has a level value between min and
max.
Properties
Name
min
Description
Default
0
max
255
value
Event
onchange

position changes
Method
IsDragging

being moved
Misc Classes
channellevel
Usage
<div class=channellevel textstylearea=? join=? channel=?

></div>
Description
Displays a logical channel level.
Properties
Name
value
Description
Default
0
perc
Display the value as

percentage
true
area
Area for the channel
join
Join for the channel
255
channel
Channel number
255
requestonloa
d

level when class first loaded
true
requestonpre
set

false
66
pchannellevel
clock
date
current_temperat
ure
Scripting
false
linstenonly

when the value is changed
Event
onchannelcha
nge

the channel changes
Usage
<div class= pchannellevel textstyle devicecode=? Boxnumber=?

Channel=> </div>
Description
Properties
Name
value
Description
Default
0
perc
Display the value as

percentage
true
devicecode
Device code for the channel
80
boxnumber
Box number for the channel
channel
Channel number
255
requestonloa
d

level when class first loaded
true
requestonpre
set

false
linstenonly

when the value is changed
false
Event
onchannelcha
nge

the channel changes
Usage
<div class=clock textstyle > </div>
Description
Displays the current time.
Usage:
<div class=date textstyle > </div>
Description
Displays the current date.
Usage:
<div class=current_temperature textstyle boxnumber=?

pollinterval=?> </div>
Description
Polls the network for the current temperature and displays it.
Properties
Name
Description
Default
67
Scripting
BoxNumber
Box number of the device
pollinterval
Polling interval in milliseconds

to request the current
temperature
3000
Style Classes
In the above class usages, you will have seen classes in italics these are your user
defined skinning classes.
Buttonstyle
Sample:
. but t onst yl e
{
/ * wi dt h and hei ght of t he but t on * /
wi dt h: 100px;
hei ght : 38px;
c ol or : #f f f f f f ;
t ext - al i gn: cent er ;
ver t i cal - al i gn: mi ddl e;
mar gi n: 0%;
/ * i f y ou do not want t o of f set your t ext t hen you can r emove
t hese 2 l i nes * /
t ext - of f set y: 0;
t ext - of f set x: 0;
/ * add a backgr ound i mage on t he but t on so i t i s
vi si bl e i n an ht ml edi t or * /
background-image: ur l ( user / i mages/ but t ons/ But t on_up. gi f ) ;
/ * your up and down i mage f or t he but t on * /
upI mage: user / i mages/ but t ons/ But t on_up. gi f ;
downI mage: user / i mages/ but t ons/ But t on_down. gi f ;
}
Sliderstyle
Sample:
. sl i der 2
{
/ * wi dt h and hei ght of t he sl i der * /
wi dt h: 203px;
hei ght : 30px;
/ * t he i mage f or t he handl e of t he sl i der */
sl - handl eI mg: user / i mages/ sl i der s/ handl e_h. gi f ;
/ * t he i mage f or t he backgr ound of t he sl i der * /
backgr ound- i mage: ur l ( user / i mages/ sl i der s/ sl i der _h. gi f ) ;
/ * t hi s l i ne may not be needed, dependi ng on your backgr ound
i mage
*/
backgr ound- r epeat : r epeat - x;
}
68

Togglepresetst
yle
Scripting
Sample:
. t oggl epr eset st yl e
{
/ * wi dt h and hei ght of t he but t on * /
wi dt h: 100px;
hei ght : 38px;
c ol or : #f f f f f f ;
t ext - al i gn: cent er ;
ver t i cal - al i gn: mi ddl e;
mar gi n: 0%;
/ * i f you do not want t o of f set your t ext t hen you can r emove
t hese 2 l i nes * /
t ext - of f set y: 0;
t ext - of f set x: 0;
/ * add a backgr ound i mage on t he but t on so i t i s
vi si bl e i n an ht ml edi t or * /
backgr ound- i mage: ur l ( user / i mages/ but t ons/ But t on_up. gi f ) ;
/ * your up and down i mage f or t he but t on * /
upI mage: user / i mages/ but t ons/ But t on_up. gi f ;
downI mage: user / i mages/ but t ons/ But t on_down. gi f ;
/ * Def i ne t he t ext t o di spl ay f or bot h on and of f st at es * /
t gl - ont ext : On;
t gl - of f t ex t: Of f ;
}
soundstyle
Sample:
. soundst yl e
{
/ * a sound pr oper t y can be ei t her set as a pr oper y i n a but t on
or i n t he st yl e of a but t on * /
sound: user / medi a/ di ng. mp3;
}
textstyle
Sample:
. t ex ts ty le
{
/ * any st yl e modi f yi ng your t ext her e * /
col or : whi t e;
f ont - si ze: 10px;
f ont - f ami l y: Ar i al ;
f ont - wei ght : bol d;
}
69
Scripting
HTML Scripting
Overview
Touch Screen
Object
Properties
Methods
The DTP160 features JavaScript based scripting of the Touch Screen Objects.
This is accessible from your scripts through the Touch Screen variable.
Property
Scheduler
Description
This is the scheduler object.
NetworkHandler
This is the Networking object.
BacklightController
The Backlight controller object.
Security
The Security object.
BoxNumber
The box number for the Touch Screen.
Version
The Version of the Touch Screen software.
DHCP
Whether DHCP is enabled.
IPAddress
The current IP Address.
Subnet
The current Net Mask.
Gateway
The current Gateway.
DNS1
The first DNS server.
DNS2
The second DNS server.
document
The current HTML document . This is the same as

document on a HTML page.
Window
The current HTML window. This is the same as

window on a HTML page.
PacketDelay
The current default packet delay.
Method
EventID =
RegisterForEvent(
EventName, Parameters,
Callback)
Description
Registers a script function to be called when a
certain event is raised.
UnRegisterForEvent(Even
tID)
Cancels a previously registered event handler.
RaiseEvent(EventName,
Parameters)
Raises an event.
Log( LogText)
Write to the Log Device.
70
Scripting
LoadScript( ScriptID,
Filename)
Load a user script.
RemoveScript( ScriptID)
Unload a user script.
Persist( Filename,
variable)
Store Data to file.
variable = UnPersist(
Filename)
Load Data from file.
Calibrate()
Calibrate the Touch Screen.
GoToPage( htmlPage)
Goes to a HTML page relative to the starting

directory.
SetLocalTime(
dateobject)
Sets the Date and Time for the Touch Screen.
Close()
Exits the Touch Screen application.
Events
In the Touch Screen, information is passed from the DTP160 software to client pages and
scripts by Events. A client application must register for events using the
TouchPanel . Regi st er For Event method.
This simply adds a user script function to be called when that Event occurs.
The Events that are currently defined are:
Event
BacklightOn
Raised When?
Raised When the
Backlight turns On
Parameters Defined
No Parameters
BacklightOff
Raised when the

Backlight turns Off
No Parameters
PhysicalLevel
Raised when a physical

channel message is
received
Raised when a logical
channel message is
received
The Packet. Plus DeviceCode,

BoxNumber, Channel, Level, Fade
Panic
Raised when a panic

message is received
The packet, plus Area, Join, Fade,

State( true, false)
SignOn
Raised when a device

signs on
The packet, plus DeviceCode,

BoxNumber, VersionHi, VersionLo
Reset
Raised when a
device resets.

BoxNumber
LogicalLevel
The Packet. Plus Area, Join, Channel,

Level, Fade
71
Scripting
IRButton
Raised when an IR
Button is pressed

BoxNumber, Button, ButtonState (
press, release, repeat)
Button
Raised when a Button

message is received
The packet plus DeviceCode,

BoxNumber, Button, ButtonState (
press, release, repeat)
Preset
Raised when a Preset

message is received
The packet plus Area, Join, Fade,

Preset, Source( portnumber) and
possible Channel
ScheduledEvent
Raised when a
Scheduled Event
Occurs
The schedule object or if the

schedule doesnt exist the packet
plus EventNumber
UserChanged
Raised when a user

Logs in
The Security Object
ChannelPreset
Raised when a channel

Preset message is
received
Same as Preset , plus channel
Network Objects
The Networking objects in the Touch Screen take care of the Dynet Communications.
Once a packet has been received from the network it is passed through a series of filters,
which decode the packet, and send an appropriate event to the client.
Sending Data to
the Network
The simplest way of sending a packet is to use the

TouchPanel . Net wor kHandl er . SendPacket method
E.g:
TouchPanel.NetworkHandler.SendPacket( [ 0x1c, 0x01, 0x00, 0x6b, 0x00, 0x40,
0xff]);
Several methods have been added to the Global script for the most commonly used
Dynet commands.
72
Scripting
Gl obal . ReqReset ( Devi ceCode, BoxNumber )

Gl obal . Request Si gnon( Devi ceCode, BoxNumber )
Gl obal . SendSi gnon( Devi ceCode, BoxNumber , FWLo, FWHi )
Gl obal . Set Physi cal Level ( Devi ceCode, BoxNumber , Fade, Channel , Val ue)
Gl obal . Request Physi cal Level ( Devi ceCode, BoxNumber , Channel )
Gl obal . St ar t Ext er nal Task( Devi ceCode, BoxNumber , Task, Acc, Xr eg)
Gl obal . St opExt er nal Task( Devi ceCode, BoxNumber , Task)
Gl obal . PauseExt er nal Task( Devi ceCode, BoxNumber , Task)
Gl obal . SendPr eset ( Ar ea, Joi n, Pr eset , Fade)
Gl obal . SendRamp( Ar ea, Channel , RampTi me, Joi n, Di r ect i on)
Gl obal . SendSt opFade( Ar ea, Channel , Joi n)
Gl obal . SendI ncr ement Ar ea( Ar ea, Joi n)
Gl obal . SendDecr ement Ar ea( Ar ea, Joi n)
Gl obal . Set Logi cal Level ( Ar ea, Joi n, Fade, Channel , Val ue)
Gl obal . Pr ogr amPr eset Level ( Ar ea, Joi n, Pr eset , Channel , Val ue)
Gl obal . SendChannel ToPr eset ( Ar ea, Joi n, Pr eset , Channel , Fade)
Gl obal . Request Cur r ent Pr eset ( Ar ea, Joi n)
Gl obal . Request Logi cal Level ( Ar ea, Joi n, Channel )
The more complex way of sending a packet is to create a Packet object. This allows you
to set various parameter that change the way some packets are sent.
Packet Object
Parameters
Count
Description
The number of bytes in the packet.
Packet Ti me
A value indicating the time the packet was sent.
Por t Number
The Port that packet was received on.
Packet Sent
A callback function that is called after the packet is sent.
Dest i nat i onPor t s
The Ports that the packet will be sent from (either Global.DynetPort
or Global.AuxPort or Global.DynetPort + Global.AuxPort ).
Del ay
How long to wait after sending this packet before the next packet is
allowed to be sent ( Defaults to TouchPanel.PacketDelay ).
* Logi cal
Set when the packet is a logical packet.
* Opcode
The opcode of a packet.
* Ar ea
The Area of a logical packet.
* Joi n
The join of a logical packet.
* Devi ceCode
The Device Code of a physical packet.
* BoxNumber
The Box Number of a physical packet.
* Fade
The Fade value set in the packet.
* Channel
The Channel value from the packet.
* Syn c
The Sync byte value.
* Bl ock
Is the packet a Block Packet.
73
Scripting
*These parameters are set when a packet is received from the network. If
you are creating a packetfilter then some of these values are set (Area,
Join, DeviceCode, BoxNumber, Sync, Opcode, Block) and it is your
responsibility to set the rest of these values for event handlers.
Methods
Sample Code
using Packets
Receiving Dynet
Methods
Add(byte)
Description
Adds a byte to the end of a packet.
Remove(index)
Removes the byte at index.
Assign(array)
Sets array as the bytes of the packet.
QuickDecode()
Decodes the packet into ( Ar ea, Joi n, Devi ceCode,

BoxNumber , Sync, Opcode, Bl ock) parameters.
f unct i on SendPacket ( )
{
var packet = new Act i veXObj ect ( Dynal i t e. Packet ) ;
packet . Del ay = 100; / / del ay 100 mi l l i seconds bef or e sendi ng t he
next packet
packet . Assi gn( [ 0x1c, 0x01, 0, 0x7d, 1, 2, 0xf f ] ) ; / / assi gni ng 7
byt es l et t he Packet obj ect
/ / cal cul at e t he checksu m
packet . Dest i nat i onPor t s = Gl obal . Dynet Por t ; / / onl y send out t he dynet
por t
TouchPanel . Net wor kHandl er . SendPacket ( packet ) ;
}
Receiving Dynet is probably the most complicated thing that you will have to do with the
Touch Screen, this is because it contains 3 separate parts:
1.
Creating a filter.
2.
Decoding the Packet.
3.
Catching an event.
We will use the following example to illustrate the process:

We want to listen to Dynet Messages for the current temperature.
74
Creating the
Filter
Scripting
The Dynet message for current temperature looks like this.

0x5c, DeviceCode, BoxNumber, 0xb8, 0x03, ValueHigh, ValueLow, Checksum
Here is the code:
var f = new Act i veXObj ect ( Dynal i t e. Packet Fi l t er ) ;
/ / cr eat e t he f i l t er . The byt es of t he packet we car e about ar e t he sync
byt e ( 0x5c)
/ / t he opcode( 0xb8) and t he f eat ur e ( 0x03) al l t he r est ar e set t o nul l
/ / meani ng we don t car e what t he val ue i s.
f . Packet ToMat ch = [ 0x5c, nul l , nul l , 0xb8, 0x03, nul l , nul l , nul l ] ;
/ / The OnPacket Mat ch par amet er i s a f unct i on t hat wi l l be cal l ed when t he
packet mat ches
f . OnPacket Mat ches = DecodeTemper at ur e;
/ / Add The Fi l t er
TouchPanel . Net wor kHandl er . I nFi l t er s. Add( f ) ;
Usually you would do this part in your user.js file when the touch screen first starts up.
Decoding the
Packet
Decoding the packet takes place in the function that you set using f . OnPacket Mat ches
this normally resides in a function in your user.js file.
What you do in here occurs as soon as the packet has been matched, and does impact
the performance of the Touch Screen. Therefore, do as little as possible in this function
before raising your event.
This function is to decode the packet into useful parameters for your event.
The reason that we raise an event is this allows any page that you have created to get the
temperature by only doing step 3 below:
f unct i on DecodeTemper at ur e( packet )
{
/ / at t hi s poi nt t he packet has been par t i al l y decoded. That means t hat
t he st andar d
/ / dynet par amet er s have been ext r act ed f r om t he packet and var i abl es
have been set on
/ / packet obj ect . . i n t hi s case packet . Devi ceCode, packet . BoxNumber ,
packet . Sync have
/ / al r eady been set
/ / t he
/ / and
var hi
var l o
hi byt e of t he val ue i s i n t he 6t h byt e of t he packet

t he l o byt e i s i n t he 7t h byt e
= packet [ 5] ;
/ / t hi s i s t he 6 t h by te. 0 i s t he f i r st by te
= packet [ 6] ;
/ / make a ni ce par amet er i n t he packet so t hat we can mat ch i t wi t h

event s
packet . t emper at ur e = Gl obal . MakeWor d( hi , l o) ;
/ / r ai se an event
TouchPanel . Rai seEvent ( t emper at ur e , packet ) ;
}
75
Catching an
Event
Scripting
So far we have received the packet, and decoded it. Now all we have to do is catch the
event that is raised.
The first thing that must be done is you must register for the event when your page is
loaded.
The second thing that must be done is to use the information from the event.
In your HTML page add an onload handler for the body of the HTML Page:
<HTML>
<BODY onl oad=PageLoaded>
</ BODY>
</ HTML>
1. In the Script section register for the event:

<scr i pt >
f unct i on Temper at ur ePar ams( )
{
/ / we want t o l i st en f or t emper at ur e event s f or
Devi ceCode
0x50 BoxNumber 0x01
t hi s. BoxNumber = 0x01;
t hi s. Devi ceCode = 0x50;
}
f unct i on PageLoaded( )
{
/ / we want t o l i st en f or t emper at ur e event s f or Devi ceCode
0x50
BoxNumber 0x01
/ / so we need t o make an obj ect t hat hol ds t hose val ues f or
use
/ / i f we want t o r ecei ve any t emper at ur e event s t hen we can
j ust
pass
/ / a nul l val ue i nst ead of t empPar ams
var t empPar ams = new Temper at ur ePar ams( ) / / cr eat es t he
obj ect usi ng t he f unct i on above
Sending a
packet that
requires a
response
/ / r egi st er f or t he Event and t el l i t t o cal l t he

OnTemper at ur e f unct i on
TouchPanel . Regi st er For Event ( t emper at ur e , t empPar ams,
OnTemper at ur e) ;
}
f unct i on OnTemper at ur e( event Par ams)
{
/ / wr i t e t he t emper at ur e t o t he t ouchpanel
/ / because i n st ep 2 ( Decodi ng t he Packet ) we set t he t emper at ur e
/ / var i abl e i n t he packet t hen we now have i t avai l abl e her e
document . wr i t el n( t emper at ur e i s +event Par ams. t emper at ur e) ;
}
</ scr i pt >
Some packets that you send via Dynet solicit a response from devices on the network.
An example of this sort of packet is the Request Circuit Runtime packet.
In cases like this where you wish to send a packet and receive a response within a certain
time period you would use the Dynalite.PacketWithResponse object.
The PacketWithResponse object contains the functionality of both a packet and a packet
filter, plus allows the packet to retry if it doesnt get a response within the timeout period;
76
Request Circuit
Runtime
Scripting
f unct i on ReqCi r cui t Runt i me( dc, bn, channel )

{
var p = new Act i veXObj ect ( Dynal i t e. Packet Wi t hResponse ) ;
/ / assi gn t he packet we wi sh t o send
p. Assi gn( [ 0x5c, dc, bn, 0xb4, ch, 0, 0] ) ;
/ / assi gn t he packet we wi sh t o wai t f or
p. Packet ToMat ch = [ 0x5c, dc, bn, 0xb5, ch, nul l , nul l ] ;
/ / r et r y up t o 3 t i mes i f we don t get a r esponse wi t hi n 200
p. Ret r i es=3;
p. Ti meout = 200;
ms
/ / Funct i on t o cal l when we r ecei ve t he packet we ar e l ooki ng

p. OnFi l t er Mat ches = Repor t Ci r cui t Runt i me;
f or
/ / Funct i on t o cal l when we have r et r i ed 3 t i mes and st i l l

no r esponse
p. OnTi meout = Runt i meFai l ed;
have
/ / send t he packet
TouchPanel . Net wor kHandl er . SendPacket ( p) ;
}
f unct i on Repor t Ci r cui t Runt i me( packet Reci eved)
{
var r unt i me = Gl obal . makeWor d( packet Reci eved[ 5] , packet Reci eved[ 6] ) ;
/ / do somet hi ng wi t h t he r unt i me her e
}
f unct i on Runt i meFai l ed( )
{
/ / r unt i me f ai l ed
}
Scheduling
Scheduling in the Touch screen is handled by the Scheduler Object. This can be found
at TouchPanel . Schedul er when using JavaScript Code.
The Scheduler object takes care of Scheduled Events, Sunrise/Sunset calculations,
Public Holidays, and Timers.
Locale
The Locale setting can be found at TouchPanel.Scheduler.Locale when using JavaScript

and is responsible for Astronomical Time support in the Touch Screen.
For accurate Sunrise and Sunset calculations make sure that your current locale is
specified as closely as possible for your location.
Once the Locale has been set then the read-only properties at:
TouchPanel . Schedul er . Ci t y
TouchPanel . Schedul er . Count r y
TouchPanel . Schedul er . Lat
TouchPanel . Schedul er . Long
TouchPanel . Schedul e. Ti mezone
77
Scripting
Will be populated with the correct values. If this is not the case then please contact the
Dynalite Support Team.
Scheduled
Events
Scheduled Events are stored in the xml file Schedules.xml and are accessible from the
TouchPanel.Scheduler.Schedules collection via JavaScript.
This xml file is automatically loaded on start-up you should not load this
xml file using UnPersist.
Key
Point
To create a new Scheduled Event from JavaScript use:

new ActiveXObject( Dynalite.Schedule);
This will create a new Schedule object that you can modify and add to the schedules
collection.
Parameters
Name
Description
A user defined name for the schedule. This is not used internally.
EventNumber
This is the Dynet event number that is used by this Schedule. This
allows you to enable , disable and trigger this schedule from a Dynet
message.
DayOfMonth
This is a string containing the days of the month that this schedule
may be valid for.
Valid Values are 1-31 or all.
Parameters
MonthOfYear
Description
This is a string containing the months of the year that this schedule
may be valid for.
Valid Values are [Jan-Dec][January-December] or all.
DayOfWeek
This is a string containing the days of the week that this schedule
may be value for
Valid Values are [Mon-Sun][Monday-Sunday] [wd,we][weekdays
weekends] all,
and PH which is Public Holiday.
RelativeTo
This specifies what the Hours and Minutes values are relative to.
Valid Values are Midnight, Sunrise, Sunset, SR, SS.
Hours
The number of hours from the above (RelativeTo value) that this
schedule will occur.
Valid Values +-[0-24].
Minutes
The number of minutes from the RelativeTo value that this schedule
will occur.
Valid Values +-[0-59].
78
Sample Code
Using Schedules
Scripting
f unct i on Sampl eSchedul e( )

{
var sched = new Act i veXObj ect ( Dynal i t e. Schedul e ) ;
sched. Name= My Schedul e ;
sched. Event Number =10;
/ / Dynet Event 10
sched. DayOf Mont h= al l ;
/ / any day of t he mont h
sched. Mont hOf Year = al l ;
/ / any mont h of t he year
sched. DayOf Week= PH ;
/ / onl y on publ i c hol i days
sched. Rel at i veTo= Sunr i se ; / / r el at i ve t o sunr i se
sched. Hour s = - 1;
/ / 1 hour bef or e sunr i se
sched. Mi nut es = 0;
sched. Enabl e = t r ue;
/ / enabl e i t
/ / add i t t o t he col l ect i on of mai nt ai ned schedul es
TouchPanel . Schedul er . Schedul es. Add( sched) ;
/ / You must save af t er you have f i ni shed addi ng schedul es ot her wi se i t wi l l
not
/ / exi st af t er t he t ouchpanel r eset s
TouchPanel . Schedul er . Save( ) ;
}
When a schedule triggers it will fire a TouchPanel Event named ScheduledEvent
Key
Point
A schedule will trigger when all of the DayOfMonth AND the MonthOfYear
AND the DayOfWeek values match.
Public Holidays
Public Holidays are stored in the xml file PublicHolidays.xml and are accessible from the
TouchPanel.Scheduler.PublicHolidays collection.
Key
Point
This xml file is automatically loaded on start-up, you should not load this xml file using
UnPersist.
A new PublicHoliday Object can be created by calling
new ActiveXObject(Dynalite.PublicHoliday);
This will create a new PublicHoliday object that you can modify and add to the
TouchPanel . Schedul e. Publ i cHol i days collection.
Parameters
Name
A user defined name for the public holiday.

This is not used internally.
Year
The year that the Public Holiday will occur.

If you use a value of 0 it means that the Public Holiday will occur every year.
Month
The month that the Public Holiday will occur.

Valid values [1-12].
Day
The day of the month that the Public Holiday occurs.

Value values [1-31].
79
Sample Code
Using Public
Holidays
Scripting
f unct i on Sampl ePubl i cHol i day( )

{
var ph = new Act i veXObj ect ( Dynal i t e. Publ i cHol i day ) ;
ph. Name= New Year s Day ;
ph. Year =0;
/ / ever y year
ph. Mont h=1;
ph. Day=1;
/ / Add t o t he mai nt ai ned l i st of Publ i c Hol i days
TouchPanel . Schedul er . Publ i cHol i days. Add( ph) ;
/ / You must save af t er you have f i ni shed addi ng hol i days ot her wi se i t wi l l
not
/ / exi st af t er t he t ouchpanel r eset s
TouchPanel . Schedul er . Save( ) ;
}
Timers
The Touch Screen Objects include a Timer Object. Although you can use setInterval from
HTML pages to do timer related things, these HTML timers expire when the user
changes pages. To Create a Dynalite Timer use:
new ActiveXObject(Dynalite.Timer);
This will create a new Timer Object that you can modify.
Parameters
Methods
Sample code
using a Timer
Period:
The time in milliseconds that the timer takes to expire.
OneShot:
Setting this to true means the timer will only trigger once.
Setting it to false means the timer recurs.
Name:
A user defined name for the timer.

This is not used internally
Callback:
A user defined function that is called when the timer is triggered.
Start
Starts the timer.
Cancel
Cancels the timer.
f unct i on Test ( )
{
var t i mer = new Act i veXObj ect ( " Dynal i t e. Ti mer " ) ;
t i mer . Per i od=100;
t i mer . OneShot = t r ue;
t i mer . Name=" Mi ne" ;
t i mer . Cal l back = myCal l backFunct i on;
t i mer . St ar t ( ) ;
r et ur n t i mer ;
}
It is possible to make the timer recur by setting the OneShot parameter to false.
80
Scripting
If you want the Callback Function to take a parameter then you will need to use the
following code:
f unct i on Test 2( )
{
t i mer . Cal l back = new Funct i on( myCal l backFunct i on( 1) ; ) ;
r et ur n t i mer ;
}
Within the Callback routine you can change the period of the Timer so that the next time
that it runs it will wait for the new period, and also change the OneShot value to determine
whether the timer will run again.
f unct i on Test 3( )
{
t i mer . Cal l back =myCal l backFunct i on
r et ur n t i mer ;
}
f unct i on myCal l backFunct i on( t i mer )
{
t i mer . Per i od = 200; / / next t i me t he t i mer i s cal l ed wai t 200
mi l l i s ec onds
t i mer . OneShot = f al se; / / make t he t i mer r un agai n i f you set t hi s t o t r ue
t hen t he
/ / t i mer wi l l not r un agai n
}
Security
The Touch Screen exposes a multilevel security object that allows you to set the access
needed to visit certain pages. This object is available at TouchPanel.Security from
JavaScript.
The following code shows how to add a security check to a page by including the a div
with the security class. Note: If you are using this security class then you must include the
keypad JavaScript code.
<HTML>
<HEAD>
<l i nk i d=" dynal i t e_st yl es" hr ef =" dynal i t e/ Dynal i t e. css"
t ype=" t ext / css" r el =" st yl esheet " / >
<scr i pt l anguage=" JScr i pt " sr c=" dynal i t e/ j s/ keypad. j s" / >
</ HEAD>
<BODY>
<DI V cl ass= Secur i t y secur i t yl evel = 2 >
<OTHER_BODY_ELEMENTS_HERE/ >
</ DI V>
</ BODY>
</ HTML>
81
Scripting
Class
Security
Usage:
<div class=security
securitylevel=1><all_other_body_elements/></div>
Description
Adds a security check to the page. The current user must have the
security level specified in the securitylevel property or a login screen is
displayed. Only when a user passcode with the required security level
is entered will the page be displayed. After three-failed login attempts
the previous page will be displayed.
The class can be added to the body tag of the page but it is
recommended that the security class is added to a div element inside
the body. This div tag should then enclose all other elements in the
body. This results in the elements of the page being hidden until a valid
user has been entered.
Properties
Name
securitylevel
Description
The required user security

level 1-9, 0 requires user to
be an administrator.
Default
9
The Touch Screen.Security object provides the following properties and methods for
accessing and editing user control.
Properties
Methods
Current User
This is the current user of the Touch screen.
Users
This returns an array of Users that exist on the Touch screen.
IsAdmin
Tests to see whether the User is an Administrator.
CheckUserLeve
l (Level)
Tests to see whether the User is granted access for a specific

security level.
Logout()
Logout the current user and sets the current user to guest.
Login
(PassCode)
Checks the passcode and if it matches a users passcode. Then

logs them in.
AddUser
(
UserNcessLeve
ls)
SetUserLevels(
UserNamls)
Adds a user to the touch screen. This must be done by the

Administrator.
SetPassword(
UserName,
NewPassword)
Sets the password for the specified user. This must be done by
the Administrator or the User that is getting the password changed.
Set new access levels to a user. This must be done by the

Administrator.
82

GetUserLevels(
UserName)
Scripting
Gets the Access Levels of a user. This must be done by an
Administrator.
83

Scripting
Touch Screen Object Tree

Figure 1 - Touch Screen Scheduling objects
TouchPanel
+Scheduler : Scheduler = ReadOnly
+NetworkHandler : NetworkHandler
+BoxNumber : Integer
+BacklightController : BacklightController
+Version : String
+DHCP : Boolean
+IPAddress : String
+Subnet : String
+Gateway : String
+DNS1 : String
+DNS2 : String
+Security : Security
+document : Object
+window : Object
+RegisterForEvent(in EventName : String, in Params : Object = null, in Callback : Object) : Integer
+RaiseEvent(in EventName : String, in Parameters : Object)
+UnRegisterForEvent(in EventID : Integer)
+Log(in logtext : String)
+LoadScript(in ScriptName : String, in FileName : String) : Boolean
+RemoveScript(in ScriptID : String)
+Persist(in PersistName : String, in Ob : Object)
+UnPersist(in PersistName : String) : Object
+Calibrate()
+GoToPage(in Page : String)
+SetLocalTime(in localtime : Date)
Scheduler
ScheduleCollection
+Schedules : ScheduleCollection
+PublicHolidays : PublicHolidayCollection
+Locale : String
+Lat : Decimal = ReadOnly
+Long : Decimal = ReadOnly
+City : String = ReadOnly
+Timezone : String = ReadOnly
+Save()
+item : Schedule
+length : Integer
+Add(in schedule : Schedule)
+Remove(in Index : Integer)
Schedule
PublicHolidayCollection
+item : PublicHoliday
+length : Integer
+Add(in publicholiday : PublicHoliday)
+Remove(in Index : Integer)
+Name : String
-EventNumber : Integer
-DayOfMonth : String
-MonthOfYear : String
-DayOfWeek : String
-RelativeTo : String
-Hours : Integer
-Minutes : Integer
-Enable : Boolean
+Trigger()
PublicHoliday
Timer
+Period : Integer
+OneShot : Boolean
+Name : String
+Callback
+Enabled : Boolean
+Id : Long
+Start()
+Cancel()
+Name : String
-Year : Integer
-Month : Integer
-Day : Integer
84
Scripting
Figure 2 - Touch Screen Network Objects

TouchPanel
+Version : String
+DHCP : Boolean
+IPAddress : String
+Subnet : String
+Gateway : String
+DNS1 : String
+DNS2 : String
+document : Object
+window : Object
+Calibrate()
NetworkHandler
+InFilters : PacketFilterCollection
+OutFilters : PacketFilterCollection
+Port : Port
+SendPacket(in packet : Object)
PacketFilterCollection
+item : PacketFilter
+Count : Integer
+Add(in filter : PacketFilter)
+Remove(in index : Integer)
PacketFilter
Port
+PortNumber : Integer
+InFilters : PacketFilterCollection
+OutFilters : PacketFilterCollection
+FilterPacket : Object = DefaultPacketFilter

+MatchesPacket : Object = DefaultPacketMatcher
+OnFilterMatches : Object = returns FALSE
+OnFilterMatchFailed : Object = returns FALSE
+Name : String = null
+Callbacks : Object = null
+PacketToMatch : Object = null
+Enable : Boolean = true
Packet
+item : Integer
+Count : Integer
+PacketTime : Integer
+PortNumber : Integer
+DestinationPorts : Integer
+Delay : Integer
+Logical : Boolean
+Opcode : Byte
+Area : Integer
+Join : Byte
+DeviceCode : Byte
+Fade : Integer
+Channel : Integer
+Sync : Byte
+Block : Boolean
+Assign(in packet : Object)
85
Scripting
Figure 3 - Touch Screen Miscellaneous Objects

TouchPanel
+Version : String
+DHCP : Boolean
+IPAddress : String
+Subnet : String
+Gateway : String
+DNS1 : String
+DNS2 : String
+document : Object
+window : Object
+Calibrate()
BacklightController
-Level : Single
-State : Boolean
-OnLevel : Single
-Delay : Integer
+Start()
+Stop()
+UserActivity()
+SaveSettings()
Security
-CurrentUser : String
+CheckUserLevel(in Level : Integer) : Boolean
+IsAdmin() : Boolean
+Logout()
+Login(in Passcode : String) : Boolean
+AddUser(in UserName : String, in PassCode : String, in AccessLevels : Object) : String
+SetUserLevels(in UserName : String, in AccessLevels : Object) : String
+SetPassword(in UserName : String, in PassCode : String) : String
86
DTP 160 Programming
Appendix:1
Telnet
Overview
The Touch Screen has a telnet debugging interface. This enables you to view anything
that is logged using the TouchPanel . Log( msg ) command and also allows you to view
variables and call functions from the interface.
Telnet can be launched on your PC by clicking the Start Button > Run and typing t el net
<I P addr ess of panel >
Logging in
When you first connect via telnet you will receive a prompt:
Ent er Passwor d >
Type in the password you have defined for the admin user:
User Logged On
>
You can now view any variables that are defined:

> TouchPanel . BoxNumber
17
Call functions (any variables or functions executed are executed within the Global script):
> SendPr eset ( 1, 2, 3) ;
Sendi ng Pr eset 3: For Ar ea 1, Fade 2000ms, Joi n 2
> TouchPanel . Log( Hel l o ) ;
Hel l o
> TouchPanel . GoToPage( Conf i g. St ar t Page) ;
/ / mov es t o t he s tar t page
> TouchPanel . Secur i t y. Cur r ent User

guest
>TouchPanel . wi ndow. al er t ( Hel l o Wor l d ) ; / / t hi s l i ne makes a popup on t he
HTML page
>TouchPanel . document . wr i t el n( <mar quee>Hel l o Wor l d</ mar quee> ) ;
Text
/ / Sc rol l i ng
>User . SomeFunct i onI nTheUser Scr i pt ( ) ; / / Cal l a f unct i on i n t he user scr i pt
87
DTP 160 Programming
Appendix:1
Appendix 1: Element Properties

Button Properties
Name
Description
ID
Element ID.
Element X axis position.
Element Y axis position.
Width
Element width.
Height
Element height.
Alpha
Display alpha-blended transparent images.

Options:
True
False.
Toggle
Button toggles between on and off states.

Options:
True
False.
Text
Text to display on button.
On Text
Text to display in on state.
Off Text
Text to display in off state.
Sound File
Sound to play when button is clicked.
88
DTP 160 Programming

Theme
Appendix:1
The CSS class to use for the Themes. Select from a list of available themes.
Available Classes:
page_heading
sliderleveltext
text_line
time_large
time_small
down_arrow
glossy_black
glossy_blue
glossy_green
glossy_grey
glossy_lightblue
glossy_pink
glossy_red
glossy_text
glowbutton
glowbuttonlong
left_arrow
right_arrow
roundbutton
smallblackbutton
up_arrow.
Behaviour
The CSS class to use for the behaviour.

Available Classes:
IR
presetbutton
o Preset
o Area
o Join
o Fade
o Channel
o Request on Load
rampbutton
o Area
o Join
o Fade
o Channel
o Repeating
swap_page
o Page
togglepreset.
o On Preset
o Off Preset
o Area
o Join
o Fade
o Channel
89
DTP 160 Programming
Appendix:1
Slider Properties
Name
Description
ID
Element ID.
Width
Element width.
Height
Element height.
Theme
The CSS class to use for the Themes.

Options:
Horizonalslider
Verticalslider.
Slider Type

Options:
dhslider
dlhslider
o Area
o Join
o Channel Number
dlvslider
o Area
o Join
o Channel Number
dphslider
o Device Code
o Box Number
o Channel Number
dpvslider
o Device Code
o Box Number
o Channel Number
dvslider.
90
DTP 160 Programming
Appendix:1
Text Properties
Name
Description
ID
Element ID.
Width
Element width.
Height
Element height.
Text
The text that is shown.
Text
Alignment
The Alignment of the Text.
Font
Options:
Inherit
Left
Right
Centre
Justify.
The Font that the text is drawn with.
Options:
Serif
Sans-Serif
Monospace
Arial
Courier New
Tahoma.
Font Size
The font size.
Font Style
The font style.

Options:
normal
italic
oblique.
91
DTP 160 Programming

Font Weight
Appendix:1
The font weight.

Options:
bold
bolder
lighter
normal.
Text Colour
The Text Colour.

Options:
white
blue
green
black
gray
aqua
fuchsia
lime
maroon
navy
olive
purple
silver
teal
yellow.
Background
Image
The background Image.
Theme

Available Classes:
page_heading
sliderleveltext
text_large
time_small.
92
DTP 160 Programming

Behaviour
Appendix:1
The CSS class to use for the behaviour.

Available Classes:
channellevel
o Area
o Join
o Channel Number
o Show Percentage
o Listen only
o Request Level on Preset
clock
current_tempreature
date
irkey
pchannellevel
o Device Code
o Box Number
o Channel Number
o Show Percentage
o Listen Only
o Request Level On Preset.
Image Properties
Name
Description
ID
Element ID.
Width
Element width.
Height
Element height.
Image
The background Image.
Behaviour
The CSS class to use for the behaviour .

Available Classes:
IR
Presetbutton
Rampbutton
Swap_page
togglepreset.
93
DTP 160 Programming
Appendix:1
Slider Gang Properties

Name
Description
ID
Element ID.
Width
Element width.
Height
Element height.
Orientation
The orientation of the sliders.

Options:
Vertical
Horizontal.
Min Channel
The lowest channel number.
Max Channel
The lowest channel number.
Slider
Distance
The distance between the sliders.
Show
Percentage
Whether the level value is displayed as a percentage.
Allow Wipe
Options:
True
False.
Allows you to wipe your finger across the sliders to set the values.
Options:
True
False.
94
DTP 160 Programming

Show Levels
Appendix:1
Where the level field appears.

Options:
None
Top
Bottom
Left
Right.
Slider Class
The CSS class to use for the sliders.

Options:
Horizonalslider
Verticalslider.
Level Class
The CSS class to use for the level text.

Available Classes:
page_heading
sliderleveltext
text_line
time_large
time_small.
Addressing
Mode
Whether the slider sends/receives logical or physical commands.

Options:
Logical
Physical.
Area
The Area for the Sliders.
Join
The Join for the Sliders.
95
DTP 160 Programming
Appendix:1
Preset Gang Properties

Name
Description
ID
Element ID.
Width
Element width.
Height
Element height.
Orientation
The order that the buttons are drawn in.

Options:
downright
rightdown.
Min Preset
The first buttons preset value.
Number of
Rows
The number of rows that the buttons will be laid out in.
Number of
Columns
The number of columns that the buttons will be laid out in.
Area
The Area to send the Preset to.
Join
The Join value for the preset.
Request on
Load
Request the current preset for the area on page load.
Only need one per area

Options:
True
False.
Button
Names
The names to be displayed on the buttons.

Separate the names by a Pipe (|) Symbol.
96
DTP 160 Programming

Preset
Numbers
The preset numbers associated with buttons.
Button Class
The CSS Class to use for the buttons.
Appendix:1
Separate the numbers by a Pipe (|) Symbol. If you want a button to not be displayed then
enter nothing between two pipes.
Available Classes:
sliderleveltext
text_line
time_large
time_small
down_arrow
glossy_black
glossy_blue
glossy_green
glossy_grey
glossy_lightblue
glossy_pink
glossy_red
glossy_text
glowbutton
glowbuttonlong
left_arrow
right_arrow
roundbutton
smallblackbutton
up_arrow.
97
DTP 160 Programming
Appendix:1
Body Properties
Name
Description
ID
Element ID.
Background
Image
Theme

Available Classes:
page_heading
sliderleveltext
text_line
time_large
time_small
body_dynalite
body_gradients_aqua
body_gradients_blue
body_gradients_green
body_gradients_orange
body_gradients_pink
body_gradients_purple.
Behaviour
Element width.
Available Classes:
security.
98
DTP 160 Programming
Appendix:1
Behaviours Available for Element Types

Element Type
Button
Behaviour
Swap_page
Presetbutton
Rampbutton
Slider
Dhslider
Dvslider
Dlhslider
Dlvslider
Dphslider
Dpvslider
Text
Channellevel
Clock
Date
Current_temperature
Pchannellevel
Body
Security
Description
Allows the Button to change pages when clicked.
Allows the Button to send and receive buttons.
Allows the button to send ramp up/ramp down messages.
Horizontal Slider.
Vertical Slider.
Horizontal Logical Slider. Allows the slider to send/receive
Vertical Logical Slider. Allows the slider to send/receive
Horizontal Physical Slider. Allows the slider to Send/receive
Vertical Physical Slider. Allows the slider to Send/Receive
Displays a logical Channel Level.
Shows a Clock.
Shows the Date.
Shows the temperature.
Allows you to set a security level for the page.
99

DTP 160 Programming Rev F

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

DTP 160 Programming Rev F

Hochgeladen von

Copyright:

Verfügbare Formate

DTP 160

[this page is intentionally blank]

Parameters that are available for Slider Gangs ................................................. 55

About this Guide

DTP 160 Programming Manual

Introduction to the DTP160 Touch Screen

Topic 1: Introduction to the DTP160 Touch Screen

By the end of this topic you will be able to:

Modify existing Touch Screen pages and projects

Create new Touch Screen pages and projects

Deploy pages to the DTP160.

Welcome to the DTP160 Touch Screen

DTP 160 Programming Manual

An internal port that connects the DTP 160 to the Auxiliary

This board provides, IR, LUX , Audio and USB client

Small switch on the device, accessible behind the front

Introduction to the DTP160 Touch Screen

A HTML page shown on the DTP 160

Small LED on the device, behind the faceplate. Turns off

Touch screen Project

A Directory containing all the files needed for a Touch

DTP 160 Programming Manual

Introduction to the DTP160 Touch Screen

Dynet Serial Port: This is the network connection point.

The Dynalite Touch screen emulation software program is recommended as a testing

Double click TouchPanelEditorSetup and follow the prompts.

Double click the ActiveSync installer and follow the prompts.

DTP 160 Programming Manual

Introduction to the DTP160 Touch Screen

Touch screen Software

DTP 160 Programming Manual

Introduction to the DTP160 Touch Screen

Entering Edit Mode

Getting to know the Editor Window

DTP 160 Programming Manual

Introduction to the DTP160 Touch Screen

The Edit Handle shows the ID of the active element.

Using the Editor

Fig 1.5 Active Element border

DTP 160 Programming Manual

Introduction to the DTP160 Touch Screen

DTP 160 Programming Manual

Introduction to the DTP160 Touch Screen

DTP 160 Programming Manual

Introduction to the DTP160 Touch Screen

On the Properties Pane there may exist a property called Behaviour.

To add a button, click Edit > Insert > Button.

DTP 160 Programming Manual

Introduction to the DTP160 Touch Screen

To add a button, click Edit > Insert > Slider.

DTP 160 Programming Manual

Introduction to the DTP160 Touch Screen

To add a button, click Edit > Insert > Text.

DTP 160 Programming Manual

Introduction to the DTP160 Touch Screen

To add a button, click Edit > Insert > Image.

DTP 160 Programming Manual

Introduction to the DTP160 Touch Screen

Behaviours Available for Element Types

Allows the Button to change pages when clicked.

Allows the Button to send and receive buttons.

Allows the button to send ramp up/ramp down

Allows button to toggle between two presets for an area.

Horizontal Logical Slider. Allows the slider to