dtp 160 programming rev f

8/15/2019 DTP 160 Programming Rev F

1/99

DTP 160Programming

Guide


2/99

2

[this page is intentionally blank]


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


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 touchpanel start page ........................................................... 48 Viewing changes to the touchpanel project .................................................... 48 How the code is arranged on a touchpanel page ............................................. 49

Special Files................................................................................................. 49

Page Backgrounds ........................................................................................ 50 Changing the Default Background ................................................................... 50 Adding a new backgrounds ............................................................................ 50

HTML Touch Screen Panel Elements ................................................................ 52 Adding Some Buttons .................................................................................... 52 Adding a New Page ....................................................................................... 53

Adding a Slider ............................................................................................. 53 Slider Gangs ................................................................................................ 54

Create a CSS class to for the Slider Gang ........................................................ 55


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


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


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


9/99


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


10/99


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


11/99


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


12/99


13/99


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


14/99


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.


15/99


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


16/99


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.


17/99


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.


18/99


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.


19/99


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.


20/99


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.


21/99


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.


22/99


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.


23/99


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.


24/99


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


25/99


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.


26/99


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.


27/99


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.


28/99


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


29/99


30/99


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.


31/99


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.


32/99


33/99


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.


34/99


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.


35/99


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.


36/99


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.


37/99


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


38/99


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.


39/99


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.


40/99


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


41/99


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 .


42/99


42

Fig 1.32

Click .

Fig 1.33

Clear the Checkboxes and click .


43/99


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.


44/99


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.


45/99


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


46/99


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


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


48/99


49/99


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


50/99


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.


51/99


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-col or: #000000;

bor der - st yl e: none;

mar gi n: 0%

}


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.


53/99


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.


54/99


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.


55/99


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


56/99


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:


57/99


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.


58/99


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.


59/99


60/99


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


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


61/99


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


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


62/99


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.



none

irkey Usage ButtonText

Description Same as standard button but can be linked to an infra-red remotecontrol button.


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


63/99


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.




area Area for the slider 1


64/99


64

join Join for the slider 255


requestonload


true

requestonpreset


false


false


onchannelchange



dphslider

Usage

Description Creates a horizontal skinned slider that controls a physical channel.




devicecode Devicecode for the slider 80

boxnumber Boxnumber for the slider 1


requestonload


true


false


onchannelchange



65/99


65


dpvslider Usage

Description Creates a vertical skinned slider that controls a physical channel.




devicecode Device code for the slider 80

boxnumber Box number for the slider 1


requestonload


true


false


onchannelchange



dhslider Usage

Description Creates a horizontal skinned slider that has a level value between minand max.





66/99


66



dvslider Usage

Description Creates a vertical skinned slider that has a level value between min andmax.






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


false


67/99


67

linstenonly Do not send out channel levelwhen the value is changed

false

Event onchannelchange


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


false

linstenonly Do not send out channel levelwhen the value is changed

false

Event onchannelchange


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


68/99


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 ;


t ext - al i gn: cent er ;

vert i cal -al i gn: mddl e;


mar gi n: 0%

/ * i f y ou do not want t o of f set your t ext t hen you can r emove

t hese 2 l i nes */

t ext -of f set y: 0;

t ext -of f set x: 0;

/ *add a 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;

}


69/99


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 ;


t ext - al i gn: cent er ;

vert i cal -al i gn: mddl e;


mar gi n: 0%

/ * i f you do not want t o of f set your t ext t hen you can r emove

t hese 2 l i nes */

t ext -of f set y: 0;

t ext -of f set x: 0;

/ *add a 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;

}


70/99


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.


71/99


72/99


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

dtp 160 programming rev f

Documents