8/15/2019 DTP 160 Programming Rev F
1/99
DTP 160Programming
Guide
8/15/2019 DTP 160 Programming Rev F
2/99
2
[this page is intentionally blank]
8/15/2019 DTP 160 Programming Rev F
3/99
3
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
8/15/2019 DTP 160 Programming Rev F
4/99
4
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 touch- panel start page ........................................................... 48 Viewing changes to the touch- panel project .................................................... 48 How the code is arranged on a touch- panel 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
8/15/2019 DTP 160 Programming Rev F
5/99
5
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
8/15/2019 DTP 160 Programming Rev F
6/99
6
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
8/15/2019 DTP 160 Programming Rev F
7/99
About this Guide
ManualOverview
This manual is designed to provide information on configuration of the DTP 160 colourTouch screen.
It describes the use of the use of the touch screen emulator to create pages and moveson to scripting using a HTML editor.
This document represents the functionality available under Build 2.0 of the DTP 160software. Some changes may occur between versions that will invalidate some of thesamples herein.
Disclaimer This guide has been prepared by Dynalite and provides information on Dynaliteproducts. Some information may become superseded through changes to the law andas a result of evolving technology and industry practices.
Any reference to non-Dynalite products or web links does not constitute an endorsementof those products or services.
Copyright © 2008 Dynalite Intelligent Light Pty Ltd (ABN 97 095 929 829). All rights reserved. Notto be reproduced without permission. Dynalite, DLight, DyNet and associated logos arethe registered trademarks of Dynalite Intelligent Light Pty Ltd.
8/15/2019 DTP 160 Programming Rev F
8/99
DTP 160 Programming Manual Introduction to the DTP160 Touch Screen
8
Topic 1: Introduction to the DTP160 Touch Screen
Topic Overview This topic covers the installation and use of Touch Screen programming software to createpages for the DTP160.
Learningoutcomes
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
Fig1.0
The DTP160 is a feature rich colour LCD Touch Screen that uses vivid graphics andsophisticated on screen controls which allows the Systems Installer to create visuallystunning and easy to use pages.
Control of various equipment such as lighting, AV, security and HVAC can be easilyintegrated 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 andcomplex 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 SystemsInstaller has full access to the Microsoft Windows CE operating system and itscomponents. Windows Media Player is available to play audio files.
The rear USB socket allows inexpensive expansion of available memory using standardUSB FLASH drives. Full InternetConnectivity is supported. The DTP160 is powered from the DyNet network so does notrequire a mains voltage supply.
8/15/2019 DTP 160 Programming Rev F
9/99
DTP 160 Programming Manual Introduction to the DTP160 Touch Screen
9
Terminology A table of terms dealing with Touch Screen programming can be found below:
Name Description
Touch Screen, DTP160The DTP 160 Device
Touch Screen
Application
The software that runs on the DTP 160 or PC
DyNetThe Dynet Network Protocol
Dynet PortThe port that connects the DTP 160 to the Dynet Network
Auxiliary Port
An internal port that connects the DTP 160 to the AuxiliaryBoard
Auxiliary Board
This board provides, IR, LUX , Audio and USB clientsupport 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 offafter the Touchscreen boots up
Touch screen Project
A Directory containing all the files needed for a Touchscreen
KeyPoint
The use of the term ‘DyNet’ throughout this document refers to the DyNet1 protocol fixed 8byte packets.
Touch screenconnectors
Fig 1.1
8/15/2019 DTP 160 Programming Rev F
10/99
DTP 160 Programming Manual Introduction to the DTP160 Touch Screen
10
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 screenprogramming. All other connections and ancillaries are for future development.
USB Type A Socket: Connection point when connecting a USB keyboard. Externalkeyboard is required to stop the touch screen application when performing firmwareupgrades.
Reset Switch: Will cause the touch screen to reboot when pressed.
All other connections and ancillaries are for future development.
Getting Started
Touch screenEmulator
The Dynalite Touch screen emulation software program is recommended as a testingplatform for any touch screen pages prior to downloading the project to the actualtouch screen.
The emulator can be found on the Dynalite CD provided as a part of this course oralternately 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 andediting features. The editor contains templates for buttons, sliders, and gangs andallows for the quick creation of projects.
Visual WebDeveloper
For more advanced projects and page creation an html editor is required. As adevelopment package Dynalite suggests Microsoft Visual Web developer 2005. This isa 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
Act iveSync Active Sync is required to transfer pages to the Touch screen, to install active syncfollow the steps below:
Go to C:\program files\Dynalite\Touchpanel\ActiveSync.
Double click the ActiveSync installer and follow the prompts.
http://www.download.com/Visual-Studio-2005-SP1/3000-10251_4-10618634.htmlhttp://www.download.com/Visual-Studio-2005-SP1/3000-10251_4-10618634.html
8/15/2019 DTP 160 Programming Rev F
11/99
DTP 160 Programming Manual Introduction to the DTP160 Touch Screen
11
KeyPoint Active sync 4.5 or higher is required for the touch screen, See page 42 for furtherinstallation instructions.Windows Mobile
Device Centre
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
Setti ng up the PCTouch ScreenCommunicat-ionsPorts
Once you have installed the touch screen software, the COM port needs to be set for theprogram. To complete this, follow the steps below:
Run the Touch Screen Software. Start > All Programs > Dynalite > Touchpanel > LaunchPC Touchpanel.
Fig 1.2
To set your COM Ports. Go to File > Set Comm Port… and select the correct commports.
KeyPoint The Setup page (top left, Fig 1.2) requires password access, the password is: .
8/15/2019 DTP 160 Programming Rev F
12/99
8/15/2019 DTP 160 Programming Rev F
13/99
DTP 160 Programming Manual Introduction to the DTP160 Touch Screen
13
The DescriptionPane
The Description Pane (found on the right hand side of Fig 1.4) will show the description forthe property that you are editing in the Property Pane.
Edit HandlesThe 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 BoxThe Bounding Box shows the size of the selected element. It is helpful to see whereelements overlap.
Toolbar items
- Create new page.
- Open existing page.
- Save.
- Cut.
- Copy.
- Paste.
- Snap-To-Grid.
- Toggle Property pane view.
Using the EditorElements 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 andgangs.
See page 21 for a table of elements and their properties.
SelectingElements
To select an element click on it with the mouse or alternately, press the TAB key until it isselected.
The element’s 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 handside of the window.
Fig 1.5 Active Element border
8/15/2019 DTP 160 Programming Rev F
14/99
DTP 160 Programming Manual Introduction to the DTP160 Touch Screen
14
ChangingProperties
Once an item is selected you can modify its properties in the Property Pane, shown in Fig1.6.
When you have changed the value the property will be changed on the element and theelement may be redrawn.
E.g. Fig 1.6 displays the Body properties, click Background Image to change thebackground picture displayed on the page.
Fig 1.6
AddingElements
To add a new element to the page, click Edit > Insert > (Element Type) from the toolbarmenu.
You can then move the element to the desired position and change any properties on theelement.
MovingElements
Once an element is selected you can drag it around the screen, alternately use the X and Yfields in the Property Pane, see Fig 1.7.
Changing anElements Theme
On the Property Pane there is a property called Theme, shown in Fig 1.7. This propertyallows 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.
8/15/2019 DTP 160 Programming Rev F
15/99
DTP 160 Programming Manual Introduction to the DTP160 Touch Screen
15
Fig 1.7
Class SelectionWindow
If you change the Theme or Behaviour of an element you will see the Class Selection Windowshown 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 onlymodify a portion of an element’s theme, such as the Font, Background Image, or TextColour. You can combine these by selecting multiple themes.
This allows you to select for example a glowbutton with glossy_text
Fig 1.8
8/15/2019 DTP 160 Programming Rev F
16/99
DTP 160 Programming Manual Introduction to the DTP160 Touch Screen
16
Changing anElements’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 tosend 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.
Fig 1.9
- 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
See Appendix 1 for more information on button properties.
KeyPoint If you are familiar with touch screen editing using an HTML editor, note that adding thiselement type is the same as scripting a Standard Button.
8/15/2019 DTP 160 Programming Rev F
17/99
DTP 160 Programming Manual Introduction to the DTP160 Touch Screen
17
Adding a PresetGang
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.
Fig 1.10
- 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
See Appendix 1 for more information on preset gang properties.
Adding a SliderTo add a button, click Edit > Insert > Slider.
Click the properties pane to edit the properties of the slider, shown in Fig 1.11 below.
Fig 1.11
- Slider ID
- Slider X axis location
- Slider Y axis location
- Slider width
- Slider height
- Slider theme
- Slider type
See Appendix 1 for more information on slider properties.
8/15/2019 DTP 160 Programming Rev F
18/99
DTP 160 Programming Manual Introduction to the DTP160 Touch Screen
18
Adding a SliderGang
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.
Fig 1.12
- 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
See Appendix 1 for more information on slider gang properties.
Adding Text To add a button, click Edit > Insert > Text.
Fig 1.13
- 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
See Appendix 1 for more information on text field properties.
8/15/2019 DTP 160 Programming Rev F
19/99
DTP 160 Programming Manual Introduction to the DTP160 Touch Screen
19
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.
Fig 1.14
- Image ID
- Image X axis location- Image Y axis location- Image width- Image height- Image file path- Image behaviour
See Appendix 1 for more information on text field properties.
8/15/2019 DTP 160 Programming Rev F
20/99
DTP 160 Programming Manual Introduction to the DTP160 Touch Screen
20
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 downmessages.
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 tosend/receive Logical Channel Messages.
Dlvslider Vertical Logical Slider. Allows the slider to send/receiveLogical Channel Messages.
Dphslider Horizontal Physical Slider. Allows the slider toSend/receive Physical Channel Message.
Dpvslider Vertical Physical Slider. Allows the slider to Send/ReceivePhysical Channel Message.
Channellevel Displays a logical Channel Level.
Body 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.
8/15/2019 DTP 160 Programming Rev F
21/99
DTP 160 Programming Manual Introduction to the DTP160 Touch Screen
21
Utility pages
What are UtilityPages?
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.
8/15/2019 DTP 160 Programming Rev F
22/99
DTP 160 Programming Manual Introduction to the DTP160 Touch Screen
22
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.
8/15/2019 DTP 160 Programming Rev F
23/99
DTP 160 Programming Manual Introduction to the DTP160 Touch Screen
23
dns.html The dns.html page displays networking information for the Touch Screen.
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 button to save the changes.
KeyPoint The touch screen can either use DHCP to acquire TCP/IP settings or they can be manually set.
8/15/2019 DTP 160 Programming Rev F
24/99
DTP 160 Programming Manual Introduction to the DTP160 Touch Screen
24
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 thescreen.
Click the access level buttons you wish this user to have access to.Click on the Close button to exit the screen
8/15/2019 DTP 160 Programming Rev F
25/99
DTP 160 Programming Manual Introduction to the DTP160 Touch Screen
25
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, seeFig 1.14.
Fig 1.19
To create a new task, complete the steps below:
To create a new task, click the button.
Name the task by clicking on the button.
Edit the first action by clicking on the button.
Add the required number of actions by clicking on the button.
Click the button.
8/15/2019 DTP 160 Programming Rev F
26/99
DTP 160 Programming Manual Introduction to the DTP160 Touch Screen
26
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 button to add a new schedule.
Click the buttons to add the following details:- Name- Time
- Days- Dates- Months- Event
Click the button to save any changes you have made.
8/15/2019 DTP 160 Programming Rev F
27/99
DTP 160 Programming Manual Introduction to the DTP160 Touch Screen
27
screensetting.html
This page determines the screen settings for the Touch Screen. Set the backlight level andscreen 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 mayberequired.
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.
8/15/2019 DTP 160 Programming Rev F
28/99
DTP 160 Programming Manual Introduction to the DTP160 Touch Screen
28
publicholidays.html
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 clickingon the Config button, a summary of each is provided below:
Configuration config.html
Provides access to all other configuration pagesContains a button to Sign-on the Touch ScreenContains a button to exit the Touch Screen applicationSet current TimeSet current DateSet Touch Screen box number
Displays current Touch Screen and CE Image versions
Screen Settingsscreensettings.html
a. Set backlight delay periodb. Set backlight on levelc. Set backlight standby leveld. Set screen timeout periode. Allows access to recalibrate screen
8/15/2019 DTP 160 Programming Rev F
29/99
8/15/2019 DTP 160 Programming Rev F
30/99
DTP 160 Programming Manual Introduction to the DTP160 Touch Screen
30
Killing the Touch Screen Application
At times you may need to kill the application running on the touch screen to access theWindows CE operating system.
To exit the application, go to the Setup screen and click the button. Thefollowing dialog will appear.
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.
8/15/2019 DTP 160 Programming Rev F
31/99
DTP 160 Programming Manual Introduction to the DTP160 Touch Screen
31
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 projectCopy the project folder on the Dynalite CD and change the background of the start.htmlpage:
Copy the project file, found in D:\Dynalite CD\Touchpanel project\Test project to C:\ProgramFiles\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.
8/15/2019 DTP 160 Programming Rev F
32/99
8/15/2019 DTP 160 Programming Rev F
33/99
DTP 160 Programming Manual Introduction to the DTP160 Touch Screen
33
6. Add a button and name it ‘Kitchen’
7. Save changes.
Themes
What arethemes?
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 listshould 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 youto 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.
8/15/2019 DTP 160 Programming Rev F
34/99
DTP 160 Programming Manual Introduction to the DTP160 Touch Screen
34
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 continueediting.
Exit and re-enter Edit mode to make your new theme available.
Activity Create a new button theme Activity details:
• 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 inthe Trainingday project folder.
• Change the button font to ‘Arial’ and the font weight to ‘bold’.
ModifyingThemes
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 forthe theme.
KeyPoint A new or modified theme will only be available to be used after you leave edit mode andthen re-enter it.
Fig 1.25
KeyPoint If you are modifying a theme. Any elements that use that theme will not be automaticallyupdated to use the modified theme. You will need to change at least one property on theelement (other than moving it) for the new theme to take effect.
8/15/2019 DTP 160 Programming Rev F
35/99
DTP 160 Programming Manual Introduction to the DTP160 Touch Screen
35
Templates
What areTemplates?
Templates are a useful way to determine element properties for an entire project. Forexample, 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 BodyProperties.
Now, simply save the changes and this page will now be added each time you add a newpage.
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 thatnew 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 ofswap page and link it to the start.html page.
Save changes.
8/15/2019 DTP 160 Programming Rev F
36/99
DTP 160 Programming Manual Introduction to the DTP160 Touch Screen
36
Creating a New Page
To create a new Touch Screen page, click the New Page button on the Toolbar or use theFile > New Page menu item.
This will then ask you to specify a filename for the new page.
Fig 1.26
KeyPoint
The touch screen software will copy the template.html file to create the new page file, editthis page set up particular defaults for a project.
Adding Time to aPage
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.
8/15/2019 DTP 160 Programming Rev F
37/99
DTP 160 Programming Manual Introduction to the DTP160 Touch Screen
37
Change the Theme Property to time_large or time _small (depending on the text size yourequire).
Change the Behaviour Property to clock.
You may also change the Text colour and Font properties if required.
Adding the Dateto 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
8/15/2019 DTP 160 Programming Rev F
38/99
DTP 160 Programming Manual Introduction to the DTP160 Touch Screen
38
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.
8/15/2019 DTP 160 Programming Rev F
39/99
DTP 160 Programming Manual Introduction to the DTP160 Touch Screen
39
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.29Default 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 theEditor.
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 PropertiesShow advanced properties option allows for the display of advanced properties.
8/15/2019 DTP 160 Programming Rev F
40/99
DTP 160 Programming Manual Introduction to the DTP160 Touch Screen
40
Configuration Properties
The Configuration Properties window can be opened by selecting the Edit >ConfigProperties 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
8/15/2019 DTP 160 Programming Rev F
41/99
DTP 160 Programming Manual Introduction to the DTP160 Touch Screen
41
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 ActiveSync?
In order to deploy pages created in the Touch Screen emulator Active Sync needs to beinstalled. 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 .
8/15/2019 DTP 160 Programming Rev F
42/99
DTP 160 Programming Manual Introduction to the DTP160 Touch Screen
42
Fig 1.32
Click .
Fig 1.33
Clear the Checkboxes and click .
8/15/2019 DTP 160 Programming Rev F
43/99
DTP 160 Programming Manual Introduction to the DTP160 Touch Screen
43
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 TouchScreen 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.
8/15/2019 DTP 160 Programming Rev F
44/99
DTP 160 Programming Manual Introduction to the DTP160 Touch Screen
44
Fig 1.35
Select Files toUpload
When you click the button the software will start comparing the file times ofthe Local and Remote files and then automatically ticks the files that need updating basedon 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 toremove them.
When you are ready to copy the files across click the button.
8/15/2019 DTP 160 Programming Rev F
45/99
DTP 160 Programming Manual Introduction to the DTP160 Touch Screen
45
Deploy ToDevice
After you click the button the software will start to copy the filesbetween the PC and the Touch Screen Device.
There are several Status icons that can be shown on this screen:
Red FlagThese are the files that are not going to be copied to the TouchScreen.
Green FlagThese are the files that are going to be copied to the TouchScreen but are waiting to be sent.
Red X An error occurred.
Green TickFile Copied Successfully.
GreenTriangle
File in process of being copied.
Fig 1.37
8/15/2019 DTP 160 Programming Rev F
46/99
DTP 160 Programming Manual Introduction to the DTP160 Touch Screen
46
Once the transfer is finished, a message will appear in the bottom right of the dialog boxsaying 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 menuitem. 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 messagebox 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 openinga new file, creating a new page, or leaving edit mode.
Fig 1.39
8/15/2019 DTP 160 Programming Rev F
47/99
DTP 160 Programming Manual Advanced Touch Screen Editing
47
Topic 2: Advanced Touch Screen Editing
HTML edito r Whilst the Touch Screen emulator allows for the creation of a variety of pages for theDTP160, a number of more advanced configuration features can be completed using an
HTML editor.
Open the projectin MicrosoftVisual Webdeveloper
To create new pages first we need to open the project in Microsoft Visual Web developer2005.
Select File > Open Web Site…
Navigate to the required project folder and click on it to select it. Click on toopen the project.
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 Screenfolder 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.
Fig2.0
8/15/2019 DTP 160 Programming Rev F
48/99
8/15/2019 DTP 160 Programming Rev F
49/99
DTP 160 Programming Manual Advanced Touch Screen Editing
49
KeyPoint Each time you review changes to the touch screen pages you will need to restart the touchscreen emulator. To restart the emulator click on File > Restart.
How the code isarranged on atouch- panelpage
The pages of a touch screen are in essence web pages. As this is the case, the format ofthe code for a touch screen panel page will appear familiar to anyone who has worked withHTML previously.
Each code section is defined with special key words called tags. These tags are a standardformat as can be seen below. The tags for the body of the code (where the button elementand slider element code is written) are to denote the start of the body section and to provide the end of the body section.
Touch panel page layout in code:
/ / Javascr i pt f unct i ons go her e.
< - - The code f or each page el ement goes here - - >
Special Files
In the Root Folder of your touch screen project, you will find a file called config.xml this isthe first file loaded by the Application and contains information about the project you havejust loaded.
By default, it looks something like this:
300
30000
2
255
Tr ue
Tr ue
20
dynal i t e\ conf i g. htm
2000
2000
10
dynal i t e\ j s\ gl obal . j s
dynal i t e\ l ocal es\ AUSTRALI A_Sydney. xm
70
user\ j s\ user. j s
Fal se
st ar t . ht m
dynal i t e\ t est devi ce. ht m
Fal se
8/15/2019 DTP 160 Programming Rev F
50/99
DTP 160 Programming Manual Advanced Touch Screen Editing
50
st ar t . htm
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 theDefaultBackground
Provided you are creating your pages from a template file, a default background for eachof your pages will already be defined.
The configuration for each background is defined in the style.css file, which is in the colourtouch screen panel folder. Every background image should be saved under colour touchpanel/user/images/backgrounds. The image should be no greater than 640 x 480 pixelsand 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 alreadyaccessible. This list can be added to as required, as we will explain later.
To change the background for a page, open that page’s HTML code in the developmentsoftware and edit the class for the body of the code. The class is defined inside theopening body tag e.g. .
Replace the italicized code with the name of the background as defined in the style.css file.
Can be changed to…
Adding a newbackgrounds
To add a new background complete the steps below:
1. A background image should be 640x480 pixels to ensure it fills the screen asrequired.
2. Create the picture file and save it in the user/images/backgrounds folder, which isin 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 aname to reflect the image.
5. On the background-image line replace background.gif with the filename andextension of the new background.
6. Save the style.css file and then open the page file that is to use the newbackground.
8/15/2019 DTP 160 Programming Rev F
51/99
DTP 160 Programming Manual Advanced Touch Screen Editing
51
7. Retype the line to read
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- r epeat : no- r epeat ;
backgr ound-col or: #000000;
bor der - st yl e: none;
mar gi n: 0%
}
8/15/2019 DTP 160 Programming Rev F
52/99
DTP 160 Programming Manual Scripting
52
HTML Touch Screen Panel Elements
Adding SomeButtons
Open the file you created in the previous step (MyStartPage.html) in a text editor.
It should look like this:
After the line that says add two new lines:
On
O f
In the Touch Screen Application use File > Restart. You should end up with this.
Fig 2.2
KeyPoint 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 onthe Dynet Network.
8/15/2019 DTP 160 Programming Rev F
53/99
DTP 160 Programming Manual Scripting
53
Adding a NewPage
1. Copy Template.html and rename it to Page2.html.
2. Add the following line in between the Body tags:
Page
1
3. Add the following line to MyStartPage.html after the two buttons:
Page 2
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:
0
3. Save your file.
4. Select File > Restart on the Touch Screen Menu.
Fig 2.3
KeyPoint If you have your COM ports set up correctly then moving this slider will send DynetChannel Level commands to Area 1 Channel 4. It will also follow any Channel Levelmessages transmitted on the network by other devices.
8/15/2019 DTP 160 Programming Rev F
54/99
DTP 160 Programming Manual Scripting
54
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 thepanel. Various properties that change the functionality and appearance of the sliders makeit 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:
As you can see, many attributes have been set for this slider. If you are reusing this style ofslider, 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 tag will use the parameters that have been set in the tag.
8/15/2019 DTP 160 Programming Rev F
55/99
DTP 160 Programming Manual Scripting
55
Create a CSSclass to for theSlider Gang
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 mn: 1;
sl - channel max: 8;
sl - j oi n: 255;
sl - gap: 60;
sl -sl i der cl ass: sl i der3;
sl - l evel cl ass: l evel t ext ;
sl - show evel s: t op;
}
3. In SliderGang.html change the tag to read:
This makes your HTML pages much neater, and allows you to reuse the slider with thesame parameters on other pages.
Parameters thatare available forSlider Gangs
Attributename
ClassAttribute
Description DefaultValue
orientation sl-orientation The Orientation of the sliders.Possible values are “vertical”,“horizontal”
“vertical”
channelmin sl-channelmin The channel number of the first
slider
1
channelmax sl-channelmax The channel number of the lastslider
1
gap sl-gap The gap between the sliders inpixels
0
area sl-area The Area join sl-join The Dynet Join Value 255 devicecode sl-devicecode The Device Code boxnumber sl-boxnumber The Box Numberperc sl-perc Whether the level value is
displayed as a percentage orthe actual level
True
allowwipe sl-allowwipe Allows you to wipe your fingeracross the sliders to set thevalues.
true
showlevels sl-showlevels Where the level appears. “top”,“bottom”, “left”, right”, “none”
“none”
sliderclass sl-sliderclass The CSS class to use for thesliders
levelclass sl-levelclass The CSS class to use for thelevel text
channels sl-channels Comma delimited channelnumbers blank or 0 to skip aslider
Channelmin,channelmax
8/15/2019 DTP 160 Programming Rev F
56/99
DTP 160 Programming Manual Scripting
56
KeyPoint Either the Area and Join or the Device Code and Box Number can be used. Thisdetermines whether the sliders send Logical or Physical Dynet Messages. If you specifyboth 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 areavailable fo rSlider Gangs
Method name Description int Level (intChannelNumber)
Returns the current level of the specified channel number.
void RequestLevels () Requests the slider gang to send a dynet message requestingthe current channel level for each of the channels.
void ProgramPreset (intPreset)
Sets the specified preset to the current channel levels of theslider gang.
Preset Gangs
Fig 2.5
Preset Gangs allow you to create multiple Preset buttons in a grid. All the buttons must besequential and in the same Area.
1. Open myStartPage.html.
2. After the last button enter the following:
8/15/2019 DTP 160 Programming Rev F
57/99
DTP 160 Programming Manual Scripting
57
Sample CSSClass
Like Slider Gangs, Preset Gangs allow you to specify frequently used parameters in a CSSclass.
. mypreset gang
{
pr - or i ent at i on: downr i ght ;
pr - pr eset mn: 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;
w dt h: 130px;
hei ght : 100px;
posi t i on: absol ut e;
}
Parameters thatare available forPreset Gangs
Attributename
ClassAttribute
Description Default Value
orientation pr-orientation The order that thebuttons are drawnin. PossibleValues. Downright.RightDown
DownRight
presetmin pr-presetmin The First Button’sPreset value
1
Rows pr-rows The number ofRows
1
Cols pr-cols The number of
Columns
1
Area pr-area The Area 1 Join pr-join The Dynet Join
Value 255
Names pr-names The names of thePresets
Preset 1| Preset 2 …
buttonclass pr-buttonclass The button classused to draw thebuttons
button
requestonload pr-requestonload Whether torequest thecurrent Preset for
the Area when thepage is loaded
true
presets pr-presets Comma delimitedPreset numbers, 0or blank to skip abutton
Presetmin ..Presetmin+rows*cols
Methods that areavailable fo rPreset Gangs
Method name Description int currentpreset() Returns the current Preset. void RequestCurrentPreset() Requests the Preset gang to send a dynet message
requesting the current Preset.void RecallPreset(int Preset) Sends a dynet Preset command for the specified
Preset.
8/15/2019 DTP 160 Programming Rev F
58/99
DTP 160 Programming Manual Scripting
58
Startup 1. Read Config.xml.
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 directory and sets it as the Uservariable for any other scripts, then calls Main.
5. Opens the or .
KeyPoint Please put any user generated files in the user directory because future releases mayoverwrite 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 templatefor any new pages
Dynalite.css is a stylesheet that is shipped by Dynalite that exposes enhanced functionalityto your HTML pages.
If you look at the template.html file you will see two lines:
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 tomodify 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 canbe left out. You will still be able to call Dynalite defined scripting objects through the Globaland Touch Screen variables. (If this is the case then skip ahead to the Scripting section ofthis document .)
KeyPoint Dynalite.css is shipped by Dynalite and may change in future releases. Do Not Modify It.
8/15/2019 DTP 160 Programming Rev F
59/99
8/15/2019 DTP 160 Programming Rev F
60/99
DTP 160 Programming Manual Scripting
60
sound Name and path of a sound file toplay
none
preset Preset to send when the button ispressed
1
area Area for the Preset 1
join Join for the Preset 255
fade Fade for the Preset Config.DefaultFade
channel Channel for the Preset. Ifspecified then the Preset buttonacts as a channel Preset if notthe button acts as a normalPreset
none
requestonload
Current Preset is requested whenbutton first loaded
false
togglepreset Usage ButtonText
Description Creates a skinned button that toggles between two Presets. Soundand IR features available.
Properties Name Description Defaultalpha Display alpha transparent images false
sound Name and path of a sound file toplay
none
state Specifies if the button is up ordown
false (up)
ontext Text displayed when the button isin the down state
On
offtext Text displayed when the button isin the upstate
Off
8/15/2019 DTP 160 Programming Rev F
61/99
DTP 160 Programming Manual Scripting
61
preseton Preset to send when the button isup
1
presetoff Preset to send when the button isdown
4
area Area for the Preset 1
join Join for the Preset 255
fade Fade for the Preset Config.DefaultFade
channel Channel for the Preset. Ifspecified then the Preset buttonacts as a channel Preset if notthe button acts as a normalPreset
none
requestonload
Current Preset is requested whenbutton first loaded
false
Event onchange Event fired when the buttonchanges state
Method Toggle Method called to toggle thebutton state
rampbutton Usage ButtonText
Description Creates a skinned button that ramps a logical channel. Soundavailable.
Properties Name Description Default
alpha Display alpha transparent images false
sound Name and path of a sound file toplay
none
area Area for the fading 1
join Join for the fading 255
fade fade for the fading Config.DefaultFade
channel Channel for the fading 255
8/15/2019 DTP 160 Programming Rev F
62/99
DTP 160 Programming Manual Scripting
62
direction Specifies to ramp ‘up’ or ramp‘down’
none
repeating Specifies to if the ramp isrepeated while the button ispressed
false
soundbutton Usage ButtonText
Description Same as standard button but can play a sound when pressed.
Properties Name Description Defaultalpha Display alpha transparent images false
sound Name and path of a sound file toplay
none
irkey Usage ButtonText
Description Same as standard button but can be linked to an infra-red remotecontrol button.
Properties Name Description Defaultalpha Display alpha transparent images false
sound Name and path of a sound file to
play
none
devicecode Devicecode of the device with IRsensor
‘_’ for Touchscreen . Leaveblank for alldevice codes
boxnumber Boxnumber of the device with IRsensor
‘_’ for Touchscreen . Leaveblank for all boxnumbers
key The IR key that is linked to thebutton
‘_’ for all IR keys
8/15/2019 DTP 160 Programming Rev F
63/99
DTP 160 Programming Manual Scripting
63
Slider Classes
dlhslider Usage
Description Creates a horizontal skinned slider that controls a logical channel.
Properties Name Description Defaultmin Minimum value of the slider 0
max Maximum value of the slider 255
value Current value of the slider 0
area Area for the slider 1
join Join for the slider 255
channel Channel number for the slider 255
requestonload
Request the current channellevel when slider first loaded
true
requestonpreset
Request the current channellevel when a Preset is received
false
linstenonly Do not send out channel levelwhen is slider is moved
false
Event onchange Event fired when the sliderposition changes
onchannelchange
Event fired when the value ofthe channel changes
Method IsDragging Returns true when the slider isbeing moved
dlvslider Usage
Description Creates a vertical skinned slider that controls a logical channel.
Properties Name Description Defaultmin Minimum value of the slider 0
max Maximum value of the slider 255
value Current value of the slider 0
area Area for the slider 1
8/15/2019 DTP 160 Programming Rev F
64/99
DTP 160 Programming Manual Scripting
64
join Join for the slider 255
channel Channel number for the slider 255
requestonload
Request the current channellevel when slider first loaded
true
requestonpreset
Request the current channellevel when a Preset is received
false
linstenonly Do not send out channel levelwhen is slider is moved
false
Event onchange Event fired when the sliderposition changes
onchannelchange
Event fired when the value ofthe channel changes
Method IsDragging Returns true when the slider isbeing moved
dphslider
Usage
Description Creates a horizontal skinned slider that controls a physical channel.
Properties Name Description Defaultmin Minimum value of the slider 0
max Maximum value of the slider 255
value Current value of the slider 0
devicecode Devicecode for the slider 80
boxnumber Boxnumber for the slider 1
channel Channel number for the slider 255
requestonload
Request the current channellevel when slider first loaded
true
linstenonly Do not send out channel levelwhen is slider is moved
false
Event onchange Event fired when the sliderposition changes
onchannelchange
Event fired when the value ofthe channel changes
8/15/2019 DTP 160 Programming Rev F
65/99
DTP 160 Programming Manual Scripting
65
Method IsDragging Returns true when the slider isbeing moved
dpvslider Usage
Description Creates a vertical skinned slider that controls a physical channel.
Properties Name Description Defaultmin Minimum value of the slider 0
max Maximum value of the slider 255
value Current value of the slider 0
devicecode Device code for the slider 80
boxnumber Box number for the slider 1
channel Channel number for the slider 255
requestonload
Request the current channellevel when slider first loaded
true
linstenonly Do not send out channel levelwhen is slider is moved
false
Event onchange Event fired when the sliderposition changes
onchannelchange
Event fired when the value ofthe channel changes
Method IsDragging Returns true when the slider isbeing moved
dhslider Usage
Description Creates a horizontal skinned slider that has a level value between minand max.
Properties Name Description Defaultmin Minimum value of the slider 0
max Maximum value of the slider 255
value Current value of the slider 0
8/15/2019 DTP 160 Programming Rev F
66/99
DTP 160 Programming Manual Scripting
66
Event onchange Event fired when the sliderposition changes
Method IsDragging Returns true when the slider isbeing moved
dvslider Usage
Description Creates a vertical skinned slider that has a level value between min andmax.
Properties Name Description Defaultmin Minimum value of the slider 0
max Maximum value of the slider 255
value Current value of the slider 0
Event onchange Event fired when the sliderposition changes
Method IsDragging Returns true when the slider isbeing moved
Misc Classes
channellevel Usage
Description Displays a logical channel level.
Properties Name Description Defaultvalue Current value of the slider 0
perc Display the value aspercentage
true
area Area for the channel 1
join Join for the channel 255
channel Channel number 255
requestonload
Request the current channellevel when class first loaded
true
requestonpreset
Request the current channellevel when a Preset is received
false
8/15/2019 DTP 160 Programming Rev F
67/99
DTP 160 Programming Manual Scripting
67
linstenonly Do not send out channel levelwhen the value is changed
false
Event onchannelchange
Event fired when the value ofthe channel changes
pchannellevel Usage
Description Displays a physical channel level.
Properties Name Description Defaultvalue Current value of the slider 0
perc Display the value aspercentage
true
devicecode Device code for the channel 80
boxnumber Box number for the channel 1
channel Channel number 255
requestonload
Request the current channellevel when class first loaded
true
requestonpreset
Request the current channellevel when a Preset is received
false
linstenonly Do not send out channel levelwhen the value is changed
false
Event onchannelchange
Event fired when the value ofthe channel changes
clock Usage
Description Displays the current time.
date Usage:
Description Displays the current date.
current_temperature
Usage:
Description Polls the network for the current temperature and displays it.
Properties Name Description Default
8/15/2019 DTP 160 Programming Rev F
68/99
DTP 160 Programming Manual Scripting
68
BoxNumber Box number of the device 1
pollinterval Polling interval in millisecondsto request the currenttemperature
3000
Style Classes
In the above class usages, you will have seen classes in italics these are your userdefined skinning classes.
Buttonstyle Sample:
. but t onst yl e
{
/ *w dt h and hei ght of t he but t on */
w dt h: 100px;
hei ght : 38px;
c o or : #f f f f f f ;
backgr ound- r epeat : no- r epeat ;
t ext - al i gn: cent er ;
vert i cal -al i gn: mddl e;
bor der - st yl e: none;
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 background i mage on t he but t on so i t i s
vi si bl e i n an ht m 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 der2
{
/ *w dt h and hei ght of t he sl i der */
w 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;
}
8/15/2019 DTP 160 Programming Rev F
69/99
DTP 160 Programming Manual Scripting
69
Togglepresetstyle
Sample:
. t oggl epr eset st yl e
{
/ *w dt h and hei ght of t he but t on */
w dt h: 100px;
hei ght : 38px;
c o or : #f f f f f f ;
backgr ound- r epeat : no- r epeat ;
t ext - al i gn: cent er ;
vert i cal -al i gn: mddl e;
bor der - st yl e: none;
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 background i mage on t he but t on so i t i s
vi si bl e i n an ht m 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 ex : On;
t gl - of f t ex t: O f ;
}
soundstyle Sample:
. soundst yl e
{
/ * a sound pr opert y can be ei t her set as a proper 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:
. tex 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 aml y: Ar i al ;
f ont - wei ght : bol d;
}
8/15/2019 DTP 160 Programming Rev F
70/99
DTP 160 Programming Manual Scripting
70
HTML Scripting
Overview The DTP160 features JavaScript based scripting of the Touch Screen Objects.
Touch ScreenObjectProperties
This is accessible from your scripts through the Touch Screen variable.
Property Description
Scheduler 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 asdocument on a HTML page.
Window The current HTML window. This is the same aswindow on a HTML page.
PacketDelay The current default packet delay.
Methods Method Description
EventID =RegisterForEvent(EventName, Parameters,Callback)
Registers a script function to be called when acertain event is raised.
UnRegisterForEvent(EventID)
Cancels a previously registered event handler.
RaiseEvent(EventName,Parameters)
Raises an event.
Log( LogText) Write to the Log Device.
8/15/2019 DTP 160 Programming Rev F
71/99
8/15/2019 DTP 160 Programming Rev F
72/99
DTP 160 Programming Manual Scripting
72
IRButton Raised when an IRButton is pressed
The packet, plus DeviceCode,BoxNumber, Button, ButtonState (press, release, repeat)
Button Raised when a Buttonmessage is received
The packet plus DeviceCode,BoxNumber, Button, ButtonState (
press, release, repeat)
Preset Raised when a Presetmessage is received
The packet plus Area, Join, Fade,Preset, Source( portnumber) andpossible Channel
ScheduledEvent Raised when aScheduled EventOccurs
The schedule object or if theschedule doesn’t exist the packetplus EventNumber
UserChanged Raised when a userLogs in
The Security Object
ChannelPreset Raised when a channelPreset message isreceived
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 seri