Professional Documents
Culture Documents
Programming
Guide
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 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
4
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
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.
This topic covers the installation and use of Touch Screen programming software to create
pages for the DTP160.
Learning
outcomes
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
Auxiliary Board
Reset Switch
Page
Service LED
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
Getting Started
Touch screen
Emulator
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.
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.
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
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.
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
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.
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.
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
Adding a 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
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
Fig 1.13
See Appendix 1 for more information on text field properties.
18
Adding Images
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
Behaviour
Description
Button
Swap_page
Presetbutton
Rampbutton
Togglepreset
Slider
Dhslider
Horizontal Slider.
Text
Dvslider
Vertical Slider.
Dlhslider
Dlvslider
Dphslider
Dpvslider
Channellevel
Clock
Shows a Clock.
Date
Current_temperature
Pchannellevel
Security
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
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
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
Click the
Key
Point
The touch screen can either use DHCP to acquire TCP/IP settings or they can be manually set.
23
users.html
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:
button.
button.
Click the
button.
button.
button.
25
schedules.html
Click the
and
Fig 1.20
To create a new schedule, complete the steps below:
Click the
Click the
- Name
- Time
- Days
- Dates
- Months
- Event
Click the
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.
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
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.
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
Months and
tasks.html
a.
b.
c.
d.
e.
f.
g.
Public Holidays
schedules.html
a.
b.
c.
d.
e.
Events.
Tasks
publicholdidays.html
View all public holidays
Add public holidays
Remove existing public holidays
Edit the name and date of existing public holidays.
29
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
30
Activity
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
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
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
Modifying
Themes
Key
Point
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
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.
Fig 1.27
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
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
Fig 1.31
41
Fig 1.32
Click
Fig 1.33
42
Fig 1.34
Click
Choose Touch
Screen Device
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
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
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
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
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
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.
To create new pages first we need to open the project in Microsoft Visual Web developer
2005.
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
touch- panel
start page
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
Fig 2.1
48
Key
Point
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
There are a couple of entries in this file that you will be interested in. They are:
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
51
Scripting
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.
2.
Adding a Slider
1.
2.
<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.
2.
3.
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.
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.
Method name
int Level (int
ChannelNumber)
void RequestLevels ()
Description
Returns the current level of the specified channel number.
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.
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
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
DownRight
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
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
Usage
<DYNALITE:BUTTON
class=buttonstyle>ButtonText</DYNALITE:BUTTON>
Description
Properties
Name
alpha
Usage
Description
Properties
Name
alpha
Description
Display alpha transparent images
Default
false
sound
none
state
false (up)
ontext
On
offtext
Off
Event
onchange
Method
Toggle
Usage
Description
Properties
Name
alpha
Description
Display alpha transparent images
Description
Display alpha transparent images
Default
false
Default
false
59
togglepreset
Scripting
sound
none
preset
area
join
255
fade
channel
Config.DefaultFa
de
none
requestonlo
ad
false
Usage
Description
Properties
Name
alpha
Description
Display alpha transparent images
Default
false
sound
none
state
false (up)
ontext
On
offtext
Off
60
rampbutton
Scripting
preseton
presetoff
area
join
255
fade
channel
Config.DefaultFa
de
none
requestonlo
ad
Event
onchange
Method
Toggle
Usage
Description
Properties
Name
alpha
Description
Display alpha transparent images
Default
false
sound
none
area
join
255
fade
Config.DefaultFa
de
channel
255
false
61
soundbutton
irkey
Scripting
direction
none
repeating
false
Usage
Description
Properties
Name
alpha
Description
Display alpha transparent images
Default
false
sound
none
Usage
Description
Properties
Name
alpha
Description
Display alpha transparent images
Default
false
sound
none
devicecode
boxnumber
key
_ 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
Description
Properties
Name
min
Description
Minimum value of the slider
Default
0
max
255
value
area
join
255
channel
255
requestonloa
d
true
requestonpre
set
false
linstenonly
false
onchange
onchannelcha
nge
Method
IsDragging
Usage
Description
Properties
Name
min
Description
Minimum value of the slider
Default
0
max
255
value
area
Event
dlvslider
63
Scripting
join
255
channel
255
requestonloa
d
true
requestonpre
set
false
linstenonly
false
onchange
onchannelcha
nge
Method
IsDragging
Usage
Description
Properties
Name
min
Description
Minimum value of the slider
Default
0
max
255
value
devicecode
80
boxnumber
channel
255
requestonloa
d
true
linstenonly
false
onchange
onchannelcha
nge
Event
dphslider
Event
64
dpvslider
IsDragging
Usage
Description
Properties
Name
min
Description
Minimum value of the slider
Default
0
max
255
value
devicecode
80
boxnumber
channel
255
requestonloa
d
true
linstenonly
false
onchange
onchannelcha
nge
Method
IsDragging
Usage
Description
Creates a horizontal skinned slider that has a level value between min
and max.
Properties
Name
min
Description
Minimum value of the slider
Default
0
max
255
value
Event
dhslider
Scripting
65
dvslider
Scripting
Event
onchange
Method
IsDragging
Usage
Description
Creates a vertical skinned slider that has a level value between min and
max.
Properties
Name
min
Description
Minimum value of the slider
Default
0
max
255
value
Event
onchange
Method
IsDragging
Misc Classes
channellevel
Usage
Description
Properties
Name
value
Description
Current value of the slider
Default
0
perc
true
area
join
255
channel
Channel number
255
requestonloa
d
true
requestonpre
set
false
66
pchannellevel
clock
date
current_temperat
ure
Scripting
false
linstenonly
Event
onchannelcha
nge
Usage
Description
Properties
Name
value
Description
Current value of the slider
Default
0
perc
true
devicecode
80
boxnumber
channel
Channel number
255
requestonloa
d
true
requestonpre
set
false
linstenonly
false
Event
onchannelcha
nge
Usage
Description
Usage:
Description
Usage:
Description
Polls the network for the current temperature and displays it.
Properties
Name
Description
Default
67
Scripting
BoxNumber
pollinterval
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 ;
backgr ound- r epeat : no- r epeat ;
t ext - al i gn: cent er ;
ver t i cal - al i gn: mi ddl 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 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
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 ;
backgr ound- r epeat : no- r epeat ;
t ext - al i gn: cent er ;
ver t i cal - al i gn: mi ddl 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 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
BacklightController
Security
BoxNumber
Version
DHCP
IPAddress
Subnet
Gateway
DNS1
DNS2
document
Window
PacketDelay
Method
EventID =
RegisterForEvent(
EventName, Parameters,
Callback)
Description
Registers a script function to be called when a
certain event is raised.
UnRegisterForEvent(Even
tID)
RaiseEvent(EventName,
Parameters)
Raises an event.
Log( LogText)
70
Scripting
LoadScript( ScriptID,
Filename)
RemoveScript( ScriptID)
Persist( Filename,
variable)
variable = UnPersist(
Filename)
Calibrate()
GoToPage( htmlPage)
SetLocalTime(
dateobject)
Close()
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
No Parameters
PhysicalLevel
Panic
SignOn
Reset
Raised when a
device resets.
LogicalLevel
71
Scripting
IRButton
Raised when an IR
Button is pressed
Button
Preset
ScheduledEvent
Raised when a
Scheduled Event
Occurs
UserChanged
ChannelPreset
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
Several methods have been added to the Global script for the most commonly used
Dynet commands.
72
Scripting
Packet Object
Parameters
Count
Description
The number of bytes in the packet.
Packet Ti me
Por t Number
Packet Sent
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
* Opcode
* Ar ea
* Joi n
* Devi ceCode
* BoxNumber
* Fade
* Channel
* Syn c
* Bl ock
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)
Assign(array)
QuickDecode()
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.
3.
Catching an event.
74
Creating the
Filter
Scripting
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
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>
</ HTML>
Sending a
packet that
requires a
response
76
Request Circuit
Runtime
Scripting
ms
f or
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
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
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
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
Year
Month
Day
79
Sample Code
Using Public
Holidays
Scripting
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:
OneShot:
Setting this to true means the timer will only trigger once.
Setting it to false means the timer recurs.
Name:
Callback:
Start
Cancel
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( )
{
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 = new Funct i on( myCal l backFunct i on( 1) ; ) ;
t i mer . St ar t ( ) ;
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( )
{
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 ;
}
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
Default
9
The Touch Screen.Security object provides the following properties and methods for
accessing and editing user control.
Properties
Methods
Current User
Users
IsAdmin
CheckUserLeve
l (Level)
Logout()
Logout the current user and sets the current user to guest.
Login
(PassCode)
AddUser
(
UserNcessLeve
ls)
SetUserLevels(
UserNamls)
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.
82
Scripting
Gets the Access Levels of a user. This must be done by an
Administrator.
83
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
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
Packet
+item : Integer
+Count : Integer
+PacketTime : Integer
+PortNumber : Integer
+DestinationPorts : Integer
+Delay : Integer
+Logical : Boolean
+Opcode : Byte
+Area : Integer
+Join : Byte
+DeviceCode : Byte
+BoxNumber : Integer
+Fade : Integer
+Channel : Integer
+Sync : Byte
+Block : Boolean
+Assign(in packet : Object)
85
Scripting
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
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
>
/ / Sc rol l i ng
87
Appendix:1
Description
ID
Element ID.
Width
Element width.
Height
Element height.
Alpha
Toggle
Text
On Text
Off Text
Sound File
88
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
89
Appendix:1
Slider Properties
Name
Description
ID
Element ID.
Width
Element width.
Height
Element height.
Theme
Slider Type
90
Appendix:1
Text Properties
Name
Description
ID
Element ID.
Width
Element width.
Height
Element height.
Text
Text
Alignment
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
Font Style
91
Appendix:1
Text Colour
Background
Image
Theme
92
Appendix:1
Image Properties
Name
Description
ID
Element ID.
Width
Element width.
Height
Element height.
Image
Behaviour
93
Appendix:1
Description
ID
Element ID.
Width
Element width.
Height
Element height.
Orientation
Min Channel
Max Channel
Slider
Distance
Show
Percentage
Allow Wipe
Options:
True
False.
Allows you to wipe your finger across the sliders to set the values.
Options:
True
False.
94
Appendix:1
Slider Class
Level Class
Addressing
Mode
Area
Join
95
Appendix:1
Description
ID
Element ID.
Width
Element width.
Height
Element height.
Orientation
Min Preset
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
Join
Request on
Load
Button
Names
96
Button Class
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
Appendix:1
Body Properties
Name
Description
ID
Element ID.
Background
Image
Theme
Behaviour
Element width.
Available Classes:
security.
98
Appendix:1
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
Logical Channel Messages.
Vertical Logical Slider. Allows the slider to send/receive
Logical Channel Messages.
Horizontal Physical Slider. Allows the slider to Send/receive
Physical Channel Message.
Vertical Physical Slider. Allows the slider to Send/Receive
Physical Channel Message.
Displays a logical Channel Level.
Shows a Clock.
Shows the Date.
Shows the temperature.
Displays a physical channel level.
Allows you to set a security level for the page.
99