Semaphore WebForm Studio Manual - ioSelect

WebForm Studio 

Getting started

Disclaimer 

Every effort has been made to ensure the accuracy of the information in this guide. However, 

SEMAPHORE assumes no responsibility for the accuracy of the information. Product information is 

subject to change without notice. 

For any question, contact support@cse-semaphore.com. 

WebForm Studio, T, TWinSoft and A are registered trademark of SEMAPHORE. 

Windows ’98, 2000, XP, 2003 are trademark of Microsoft Corp. 

Internet Explorer & Front Page Express are trademark of Microsoft Corp. 

Excel is trademark of Microsoft Corp. 

Copyright 

© 2000-2008 by 

Chaussée de Bruxelles, 732a 

B-1410 Waterloo 

Edition: April 14, 2008 

Version WebForm Studio: 10.00 

Author: Jean Burton 

WebForm Studio 10.00 - Getting Started 2

Table of Contents 

1. INTRODUCTION..........................................................................................................................5 

1.1. THIS MANUAL ............................................................................................................................7 

2. STARTING WEBFORM STUDIO ..............................................................................................8 

2.1. SYSTEM REQUIREMENTS.............................................................................................................8 

2.2. STARTING FROM TWINSOFT.......................................................................................................9 

2.3. STARTING FROM 'START' MENU ..................................................................................................9 

2.4. FILES: .TWF , .HTM, TEMPLATE.............................................................................................13 

2.4.1. The Template..................................................................................................................................13 

3. CREATING A WEBFORM........................................................................................................15 

3.1. FORM PROPERTIES ....................................................................................................................15 

4. CREATING OBJECTS ...............................................................................................................16 

4.1. TEXT ........................................................................................................................................17 

4.2. BUTTON....................................................................................................................................18 

4.3. DYNAMIC LABELS ....................................................................................................................20 

4.3.1. 'General' properties .......................................................................................................................21 

4.3.2. 'Format' properties.........................................................................................................................22 

4.3.3. 'Appearance' properties .................................................................................................................23 

4.3.4. 'Write' properties............................................................................................................................24 

4.4. GRID.........................................................................................................................................25 

4.4.1. General configuration....................................................................................................................26 

4.4.2. Column configuration ....................................................................................................................27 

4.5. TABLE OF ALARMS...................................................................................................................29 

4.5.1. 'List of Alarms' properties..............................................................................................................30 

4.6. CHART......................................................................................................................................31 

4.6.1. General configuration....................................................................................................................32 

4.6.2. Configuring an historic..................................................................................................................33 

4.6.3. Download .......................................................................................................................................33 

4.6.4. Toolbar of a chart ..........................................................................................................................34 

4.6.5. Data View / Export.........................................................................................................................35 

4.7. DYNAMIC CHRONOLOGY LIST..................................................................................................36 

4.7.1. Configuration in TWinSoft .............................................................................................................37 

4.7.2. Configuration of the dynamic chronology .....................................................................................38 

4.8. DYNAMIC SAMPLING LIST........................................................................................................39 

4.8.1. Sampling Table Toolbar.................................................................................................................39 


4.9. TIMER ...................................................................................................................................... 40 

4.9.1. Timer configuration........................................................................................................................40 

4.9.2. Script ..............................................................................................................................................40 

5. CATALOGUE.............................................................................................................................. 41 

5.1. OPEN A CATALOGUE................................................................................................................. 41 

5.2. IMPORT OF AN OBJECT INTO A CATALOGUE .............................................................................. 42 

5.3. RENAME AN OBJECT IN A CATALOGUE...................................................................................... 42 

5.4. EXPORT OF AN OBJECT FROM A CATALOGUE ............................................................................ 42 

6. ACCESS PROTECTION............................................................................................................43 

6.1. LOGIN ...................................................................................................................................... 43 

6.1.1. TCP/IP connection .........................................................................................................................43 

6.1.2. With WebForm Studio ....................................................................................................................43 

6.2. DISPLAY ACCESS LEVEL ........................................................................................................... 43 

6.2.1. Simulation of Display access levels................................................................................................43 

6.3. WRITE ACCESS LEVEL .............................................................................................................. 44 

7. COMMUNICATION................................................................................................................... 45 

7.1. COMMUNICATION WHILE EDITING ............................................................................................ 45 

7.1.1. Simulation from the WebForm Studio ............................................................................................46 

7.1.2. Simulation from Internet Explorer .................................................................................................46 

7.2. LOCAL COMMUNICATION ......................................................................................................... 47 

7.2.1. Installation on the PC. ...................................................................................................................47 

7.3. DIAL-UP COMMUNICATION....................................................................................................... 48 

7.3.1. PC not equipped with TWinSoft .....................................................................................................48 

7.3.2. PC equipped with TWinSoft ...........................................................................................................48 

8. TBOX DIAL IT !.......................................................................................................................... 49 

8.1. INSTALLATION.......................................................................................................................... 49 

8.2. STARTING TBOX DIAL IT ! ....................................................................................................... 49 

8.3. CONFIGURATION ...................................................................................................................... 50 

8.3.1. ‘Dial’ page .....................................................................................................................................50 

8.3.2. ‘Address Book’ page ......................................................................................................................51 

8.3.3. The file PhoneBook.dat ..................................................................................................................51 

8.4. DIALING TBOX......................................................................................................................... 52 

8.5. ADVANCED USE OF TBOX DIAL IT!.......................................................................................... 54 


1. Introduction 

TBox is Internet compatible. 

One of the most important feature of A is the TCP/IP protocol as an embedded protocol; 

without any supplementary software, making the A a real Web Server. It is also able to 

send e-mail and files to a FTP site. 

All models of A RTU acts as WebServer: CPU3, TBox-MS, TBox-LITE, and TBox- 

LowPower 

Internet Explorer 

Modem - PSTN 

TA - ISDN 

Example through direct dial-up modem 

ISP 

W.W.W 

Example through Internet 

"PUBLIC" IP address 

ADSL 

Internet Explorer 

Router 

HTM 

HTM 

HTM 

pages 

pages 

pages 

HTM 

HTM pages 

HTM pages 

pages 

HUB 

"PRIVATE" IP address 


The 3 Internet features that A offers: 

• Web Server 

A contains HTML pages and is directly accessible from any Internet Browser. The HTML 

pages must be created with a specific HTML editor, dedicated to A: the WebForm 

Studio. It can be started from the folder ‘Web & Report files’ from the Project workspace of 

TWinSoft. 

Any files can be associated to the HTML pages (.GIF, .JPEG, .BMP, …) knowing that the more 

you will put into the image, the longer downloading image will be. Think of it when 

communicating through modem. 

• E-mail 

A is able to send e-mail, with a text message or a full report and an attached file with data 

logging. Sending of e-mail is launched with an alarm condition and a specific alarm recipient. 

You need to subscribe an e-mail account to a local ISP. 

The reports are created directly from TWinSoft from the folder ‘Web & Report files’. 

If A is configured to do data logging, the data are sent together with the e-mail as an 

attached file. This file represents an image of the A memory (with its configuration and its 

data). 

It can be used directly in an e-mail or collected by T to update an historical database. 

• FTP 

A is able to send a file to a FTP site on an alarm condition with the help of a specific 

alarm recipient. 

The idea is to refresh, on a regular base a FTP site with HTML pages of the A. 

Afterwards, anyone can visit the site with a Browser (in HTTP) to display the situation of each 

A. 

You are then able to build your own Portal of A stations. 

T can also collect data sent by A using FTP. 

To understand exactly what are the A capabilities, related to Internet, you can read the 

manual ‘TBox & Internet’. Please call your distributor, or go to the Web Site: www.tbox.biz 

page ‘Support’. 


1.1. This Manual 

This manual relates to the Web Server functionality and to the creation of HTML pages. The 

tool used is the WebForm Studio, and it can be used for all models or A RTU: CPU3, 

TBox-MS, TBox-LITE, and TBox-LowPower. For making reading easy, we’ll mention A 

all along the manual. 

At chapter 8 of this manual, TBox Dial It ! utility is presented. It makes dialing and connection 

very easy. 

A good knowledge of TWinSoft is required to the understanding of WebForm 

configuration. 

This manual explains how to create HTML pages dedicated to A. A HTML page sent to 

A is made of a ‘Form’ and a ‘Template’. Both are combined by the WebForm Studio to 

form the final A .HTM page. 

The WebForm Studio allows creating ‘WebForms’ (equivalent to ‘Forms’ in programming 

languages). 

On the 'Form' you will place pre-defined objects, A oriented, that will display the 

situation of your process, and will let you monitor the A. It can be under the form of 

digital 'Color spots', buttons, display of analog values, … 

The display of a chart and of a list of the A alarms is also available. 

The 'Template' is the background page on which the 'Form' is placed. It contains general 

information like background color, logo, …A Template is not indispensable, but if needed must 

be created with a standard HTML editor. 

Demo applications are installed in the sub-directory of TWinSoft \Samples\ 


2. Starting WebForm Studio 

2.1. System requirements 

• For TWinSoft: 

Hardware: Pentium or higher. 

Memory: 16-MB minimum. We recommend 32 MB. 

Hard Disk: 50 MB required plus the application files. 

Display: VGA, SVGA with a minimum resolution of 640 x 480. We recommend 800 x 600. 

Mouse: any Windows compatible mouse. 

Parallel port: required in case of parallel dongle license. 

USB port: required in case of USB dongle license. 

Serial port: required for a local connection to A or for an external modem. 

Modem: any modem properly configured in Windows. 

Operating system: Windows ’98, 2000, XP, 2003. 

• To Browse A: 

Internet Browser: as ActiveX is used, Microsoft Internet Explorer (MSIE) only can be used. 

TBox Dial It ! needs version 5.00 or higher. 

The CD-ROM of TWinSoft includes MSIE version 5.00 


The WebForm Studio can be started on 2 ways: 

2.2. Starting from TWinSoft 

In the folder ‘Web & Report files’ of the Project workspace, you click ‘Add a Web or Report 

file’. Select the option ‘New Web form’. 

You give a name (with A CPU3, long names are authorized as of OS 54xx) and save 

in order to create the HTML page. 

This action creates 2 files, a .TWF and a .HTM (see chapter 2.4. Files: .TWF, .HTM, 

Template). 

Example: creation of the Form 'Test': 

Clicking the .TWF file automatically starts the WebForm Studio . 

Clicking the .HTM file automatically starts the Internet Browser installed on your PC. 

2.3. Starting from 'Start' menu 

A shortcut WebForm Studio is installed in the group of programs where TWinSoft has been 

installed. The default group is ‘Techno Trade’. 


Catalogue 

Standard 

Objects 

VU meter 

Set Point 

WebForm Studio 10.00 - Getting Started 10 

FORM 

Hyperlink 

Color 

Spots

This page is blank 


The picture of page 10 shows the main features of the WebForm Studio: 

• The Form (see chapter 3: ‘Creating a Form’). 

• The list of your pre-defined objects (button, color spots, VU meter, Gauge, …, see chapter 4: 

‘Creating objects’). 

• The catalogue of custom objects. You can create your own catalogues with your proper 

objects (or group of objects, see chapter 5: ‘Catalogues’). 

• On-line editing capabilities. While editing a 'Form', you see the values 'on line'. 

Other feature available: 

• On-line simulation of the display with ‘Microsoft Internet Explorer’ (see chapter 7: 

‘Communication’). 


2.4. Files: .TWF , .HTM, Template. 

When saving a ‘'Form’ with the WebForm Studio, 2 files are created: 

• the .TWF: which contains all the definitions of the ‘'Form’. It represents the link to the 

A. It is composed of texts and objects linked to the variables of A. 

• the .HTM: which contains all that must be displayed. It includes a reference to a .TWF, to a 

Template if defined, to possible .GIF, .BMP, … 

2.4.1. The Template 

The Template is the background of the .HTM pages sent to A. It is associated to the 'Form' 

(see chapter 3: ‘Creating a Form’), meaning the ‘Form’ will be placed on the Template. 

The Template is a standard HTML file created with a standard HTML editor. 

The Template includes general information that should be displayed on every .HTM page, like a 

background color, the logo of your company, title, text, hyperlink,…any information that will be 

in the final .HTM page sent to A. 

At the place where you wish the ‘Form’ to be inserted, you must type a specific notification: 

• %TBOX_FORM% (or %WEB_FORM%): will be replaced by the ‘Form’. 

The title of the 'Form' can also be displayed with the help of the notification: 

• %TITLE%: At the position where it is typed, the title of the ‘Form’ will appear. It can also 

be typed as ‘title’ in the properties of the Page in order to display the title of the current 

‘Form’ in the Title bar of the Internet Browser (see next). 

Example of a Template: 


This Template is created with ‘Front Page Express’. It includes a A logo (.GIF file) and a 

blue background (.GIF file). 

All the external files used in the Template must be added to the folder of ‘Web & Report 

files’ in order to be sent together with the HTM files to the A. The Template file must not 

be added to the list ‘Web & Report file’. 

At the place of %TBOX_FORM% the ‘Form’ will be displayed. 

At the place of %TITLE% the title of the ‘Form’ will be displayed. 

Example of properties of the template (Page properties): 

In the ‘Title’ field, you type any text including %TITLE%. In this way, the title of the ‘Form’ 

will be available in the 'Title bar' of your Internet Browser and displayed in the ‘History’ list. 

The HTML pages must end with extension .HTM. 


3. Creating a WebForm 

A ‘WebForm’ can be created on 2 ways: 

• As mentioned in chapter 2.2 ‘Starting from TWinSoft’ by adding a Form in the folder of 

'Web & Report files'. 

• From the WebForm Studio, click on ‘File’ ‘New’ or from the main toolbar, click the 

icon . 

Clicking a .TWF file from the ‘Web & Report files’ folder automatically opens the 

WebForm Studio with the associated ‘Form’. 

3.1. Form properties 

Before inserting objects in the ‘Form’, you have to configure the properties of the ‘Form’: 

• Form Title: name that will appear in the Title bar of the Form. It is also the name that will 

replace the notification %TITLE% defined in the Template. 

• Default station file (*.tws): in order to display values or status of the A, we associate 

the TWinSoft document to the ‘Form’ This gives you direct access to the Tags of the 

TWinSoft document (see chapter 4: ‘Creating objects’). 

The reference to a TWinSoft document is also needed to establish communication with a 

A. 

• HTML Template file: The template associated to the ‘Form’. The ‘Form’ will be placed at 

the position of the %TBOX_FORM% notification of the Template. 

If no Template is selected, the ‘Form’ is associated to a white background template. 


4. Creating objects 

To make configuration easy, specific objects are available to display values and status of 

A . 

In ‘Edit view’ mode, a Toolbar is available with the following principal icons: 

To select an object. 

To insert a Text. The possible actions are: 'Set point' and 'Hyperlink'. 

To insert a Button. The possible actions are: 'Set point' and 'Hyperlink'. 

Dynamic Label: Text. Used to display a digital or analog Tag in a Text Format. 

Dynamic Label: Gauge. Used to display an analog Tag. 

Dynamic Label: VU meter. Used to display an analog Tag. 

Dynamic Label: Color Spot. Used to display a digital Tag. 

To insert a Grid. The grid displays a series of Tags. Column, size and Tags can be 

configured. 

To insert a standard table of alarms. It includes alarm parameters (start time, message, 

addressee number, …). 

To insert a Chart. Several Tags can be configured in one chart. This object allows 

downloading database of A. 

Time: Used to display the current time in A. 

Date: Used to display the current date in A. 

Dynamic chronology list: To list chronology data in a table with description and state or 

unit 

Dynamic sampling list: To list historical data in several columns, listed per time 

Timer: Provide a Tik event at periodical rate (originally implemented for WebForm for 

T) 

To insert a bitmap. 

WARNING: check the memory of A for HTML pages doing a TWinSoft compilation. 

The possible actions are: 'Set point' and 'Hyperlink'. 

To define a HotSpot on the ‘Form'. The Hotspot is an area that becomes selectable. The 

possible actions on the Hotspot are 'Set point' and 'Hyperlink'. 


4.1. Text 

To type a text, select the icon from the Toolbar. Draw a rectangle on the 'Form' at the place 

you want to display the text. Fonts, colors, grid, … can be modified from the 'Font Bar': 

To edit a ‘Text’, select it (it is then surrounded with small green squares) and type a new text. 

1. You cannot make any style changes to the Text (font, size, …) while in Edit mode of the 

text. 

2. Before changing a text, the 'object' must be selected (surrounded with small green 

squares). 

One ‘Action’ can be defined for a ‘Text’ object. From the context menu (right clicking the 

object) the ‘actions type’ menu is available. 

Two actions are available (see next chapter for more details): 

• Set point: when clicking the text, a value can be changed in A. 

• Link: when clicking the text, you jump to another HTML page (Hyperlink action). 


4.2. Button 

To draw a button, select the icon from the Toolbar. Draw a rectangle in the ‘Form’ at the 

place you want to insert the button. 

Font and colors can be changed with the help of the ‘Font Bar’ (see chapter 4.1: ‘Text’). 

To edit the text of a ‘Button’, select it (it is then surrounded with small green squares) and type a 

new text. 

One ‘Action’ can be defined on a button. From the context menu (right clicking the object) the 

‘Action type’ menu is available: 


Two actions are available: 

• Set point: when clicking the text, a value can be changed in A. The value can be 

changed in different ways: 

If the associated Tag is digital: 

- Choice menu: a choice box with a ON and OFF status is displayed. 

- Toggle value: the status is automatically inverted when clicking the button. 

- On / Off: you select a fixed status (ON or OFF) when clicking the button. 

If the associated Tag is analog: 

- Choice menu: different values are stored in a table, from which you select one value. 

- Edit box: you can write a value within a configurable range. 

- No user input: only a fixed value is written in the Tag. 

• Link: when clicking the text, you jump to another HTML page (Hyperlink action). 

1. The extension must be .HTM. 

2. All files must be located in the same directory (A has no idea of directory). 


4.3. Dynamic Labels 

A dynamic label is a display of a Tag of the A. It can be displayed with different 

appearances. 

For each, a specific icon is available: 

Text 

VU meter 

Gauge 

Color spot 

To insert a ‘Dynamic Label’, select the proper icon from the Toolbar. Draw a rectangle in the 

‘Form’ at the place you want to insert it. 

To enter the properties of the ‘Label’, double-click the object, when it is in Edit mode 

(surrounded with small green squares and with the 'double arrow' cursor). 

Font and colors can be changed with the help of the ‘Font’ and ‘Colors’ tabs, but also from the 

‘Tools’ of the Standard toolbar (see chapter 4.1: Text). 

The ‘Properties’ menus are the same for each type of dynamic label. 


4.3.1. 'General' properties 

The first Tab concerns the general information of the object: 

The Tag associated to the object can be selected from its name or from its ModBus address. 

• Select Tag: you browse the list of Tags of the TWinSoft document associated to the 

Form (see chapter 3: ‘Creating a Form’). 

If a Tag is missing, you can return to TWinSoft and create it, without leaving the 

WebForm Studio. Be sure to save the document, for Tags to be available. 

It displays the value of the Tag. 

• Select Address: if the Tag has not been created, but you still wish to visualize it, you can 

type its ModBus address. It is also useful for objects you wish to save in a catalogue (see 

chapter 5: ‘Catalogue’). 

Address and type must fit together. 

It displays the value at the ModBus address. 

• Indirect addressing: if ‘Indirect addressing’ is checked, the value displayed is the value 

contained in the address specified. 

Example : 

Tag ‘Register0’ = 22016 (22016 is the ModBus address of the seconds). 

WITHOUT indirect addressing: displays the value 22016 

WITH indirect addressing: displays the seconds of A. 

This function allows displaying various information in a field by changing its address in 

the A program. 

By default, the address of the analog special register ‘Second’ is selected (address: 22016). 


4.3.2. 'Format' properties 

The second Tab concerns the format of the object: 

• If the Tag is digital: 

Value: displays 0 or 1. 

Custom texts: you type the text you want to display for ON and OFF states. 

On/Off: displays ON or OFF 

Engineer: displays the text defined in the 'Tags Minitel/Terminal' in TWinSoft. 

• If the Tag is analog: 

Value: numeric display of the value. 

Text and Value: a text can be added to the value. Format specification strings are 

allowed. 

Examples: 

1. the seconds are displayed with 1 digit between 0 9. To display them always on 

2 digits type in the text: %02u 

- '0' indicates the leading character. 

- '2' indicates the number of characters. 

- 'u' = Unsigned. 

2. to display the year in four digits: 200%u (example: 2002) 

3. to display a Floating point with 3 decimals: %3.3f (example: 123.456) 

Day: day of the week. The Regional setting of the PC determines the language used. 

Month: The Regional setting of the PC determines the language used. 

Time: display in hh:mm format of an analog Tag (value 0 1439 = number of minutes 

in 1 day) 

Binary: display of 32 bits. 

Wide String: the Tag is the first of a series of successive Tags (see Length below). 

The display shows the selected Tag followed by the consecutive ModBus addresses. 

This format is used to display the Tag in Text format (ASCII). 

Length: the number of characters you want to display. Each character corresponds to 

one ModBus address. Each ModBus address contains the ASCII code of the 

character. 

Engineer (A CPU3): The value is displayed according to the scaling declared in 

the ‘Terminal Tag’ definition in TWinSoft. 


4.3.3. 'Appearance' properties 

The third Tab concerns the appearance of the object. It is automatically selected according to the 

icon selected: Text, VU meter, Gauge or Color spot. 

• If the Tag is digital: 

Text: text displayed according to the format specified (see here above). 

Color spot: colors can be adjusted (see Tab ‘Colors’). Default colors are: 

OFF: red 

ON: green 

Invisible: When programming VB script in Web Form, it is sometime needed to access 

a Tag of A without displaying it. 

This parameter is an ActiveX parameter. When looking at the ‘Object properties’, to 

the tab ‘Normal’, the ‘Visible’ parameter is still ‘True’. In this way, even when the 

object is not displayed (depending on the ActiveX parameter), it is still available and 

dynamic for VB script programming. 

• If the Tag is analog: 

Text: text displayed according to the format specified (see above). 

Gauge: colors can be adjusted (see Tab ‘Colors’). Minimum and maximum values are 

configurable. Orientation depends on the shape of the object (long or high). 

VU meter: colors can be adjusted (see Tab ‘Colors’). Minimum and maximum values 

are configurable. In case the value is under or over the range, the arrow is in red 

color and fixed at the minimum or maximum side. 

Invisible: When programming VB script in Web Form, it is sometime needed to access 

a Tag of A without displaying it (for detail, see above in ‘the Tag is digital’). 


4.3.4. 'Write' properties 

The fourth Tab concerns the ‘write access level’ option of the object. In case a write level has 

been assigned to a ‘Label’, a ‘Set point’ action is added to the display function. Three access 

levels are possible: 

• Write protected: the value cannot be changed, no ‘Set point’ available. 

• Read/Write: only a user logged as Engineer or Read/Write can change the value of the Tag 

associated to the object. 

Engineer: only a user logged as Engineer can change the value of the Tag associated to the 

object. 

The access levels correspond to those used by TWinSoft to access A. 

In order to simulate the access level: you need to: 

- protect the A. 

- do a 'Login' (from the menu ‘Tools’). 

- put WebForm Studio in ‘Simulate’ mode. From the menu ‘View’, clear the option ‘Edit 

view’ (accelerator key ). 

For details, see chapter 7.1.1: 'Simulation from the WebForm Studio'. 


4.4. Grid 

A ‘Grid’ is a table used to display a list of variables. Size, number of lines and columns can be 

configured. 

To draw a ‘Grid’, select the icon from the Toolbar. Draw a rectangle on the 'Form' at the 

place you want to display the 'Grid'. 

To enter the properties of the ‘Grid’, double-click the object, when it is in edit mode 



There are 2 groups of configuration: 

4.4.1. General configuration 

• Tab ‘General’: you declare the columns you want to display. To access the column 

configuration, select a column and click 'Properties'. 

• Tab ‘Layout’: you configure the number of rows and general display parameters of the 

columns. 


4.4.2. Column configuration 

• Tab ‘General’: 

You declare the title, the size and the increment of addresses of the column. 

The Column displays values of successive addresses. The fist cell displays the value of the 

variable declared in the field 'Tag' or 'Address', the following cells display the value of the 

following ModBus addresses according to the increment specified. 

Example: 

You wish to display 3 'FLOW' values. All 3 Tags must have successive addresses, example 

AIR06, AIR07 and AIR08. You declare in the Tag (or address) field, the one concerning the 

first FLOW and an increment of '1'. 

• Tab ‘Format’: 

If the Tag is digital: 

Value: displays 0 or 1. 

Custom texts: you type the text you want to display for ON and OFF states. 

On/Off: displays ON or OFF 

Engineer: displays the text defined in the 'Tags Minitel/Terminal' in TWinSoft. 

If the Tag is analog: 

Value: numeric display of the value. 

Text and Value: a text can be added to the value. Format specification strings are 

allowed. 

Examples: 

1. the seconds are displayed with 1 digit between 0 9. To display them always on 

2 digits: %02u 

- '0' indicates the leading character. 

- '2' indicates the number of characters. 

- 'u' = Unsigned. 

2. to display the year in four digits: 200%u (example: 2002) 

3. to display a Floating point with 3 decimals: %3.3f (example: 123.456) 

Day: day of the week. The Regional setting of the PC determines the language used. 

Month: The Regional setting of the PC determines the language used. 

Time: display in hh:mm format of an analog Tag (value 0 1439 = number of minutes 

in 1 day) 

Binary: display of 32 bits. 

Wide String: the Tag is the first of a serie of successive Tags (see Length following). 

The display shows the selected Tag followed by the consecutive ModBus addresses. 

This format is used to display Tag in Text format (ASCII). 

Length: the number of character you want to display. Each character corresponds to 

one ModBus address. Each ModBus address contains the ASCII code of the 

character. 

Engineer (A CPU3): The value is displayed according to the scaling declared in 

the ‘ Terminal Tag’ definition in TWinSoft. 


• Tab ‘Write’: 

It concerns the 'write access level' option of the column. In case a write level has been 

assigned to a column, each cell will have a 'Set point' action added to the display function. 

Three access levels are possible: 

Write protected: the value cannot be changed, no 'Set point' available. 

Read/Write: only user logged as Engineer or Read/Write can change the value of the Tag 

associated to the object. 

Engineer: only user logged as Engineer can change the value of the Tag associated to the 

object. 

The access levels correspond to those used by TWinSoft to access A. 

In order to simulate the access level: you need to: 

- protect the A. 

- do a 'Login' (from the menu 'Tools'). 

- put WebForm Studio in 'Simulate' mode. From the menu 'View', clear the option 'Edit view'. 

(accelerator key ). 

For details, see chapter 7.1.1: 'Simulation from the WebForm Studio'). 

• Tab ‘Layout’: 

To configure colors of cells and text. 


4.5. Table of Alarms 

The Alarms object displays the alarm stack of RTU (maximum 48 alarms for A CPU3 and 

can be adjusted in application for TBox-MS, TBox-LITE, and TBox-LowPower). 

It includes for each alarm the following parameters: 

- start time 

- end time (TBox-MS, TBox-LITE, and TBox-LowPower only) 

- message 

- index of the alarms 

- name of the recipient (10 characters maximum) 

- status of the alarm 

To draw a ‘List of alarms’, select the icon from the Toolbar. Draw a rectangle on the 

'Form' at the place you want to display the 'List'. 

Example with a TBox CPU3 

Example with a TBox LP300 

The ‘Loudspeaker’ at the beginning of the line indicates the status of the alarm on a visual way: 

ON, OFF, acknowledged or Auto-acknowledged. 

The list can be sorted on each item, ascending or descending. 

To enter the properties of the ‘List of Alarms’, double click the object, when it is in edit mode 

(surrounded with small green squares and with the ‘double arrow’ cursor). 


4.5.1. 'List of Alarms' properties 

• Enable printing: display the ‘Printer’ button on the Toolbar. 

• Display toolbar: toolbar with the ‘Acknowledge’ and ‘Printer’ button. 

Here you define the level needed to acknowledge alarms: Read only (acknowledge not allowed), 

Read/Write level or Engineer level). 


Data box 

4.6. Chart 

A chart is a specific object used to display historical values of 1 or several Tags of a A. 

The data are downloaded on the PC and automatically displayed. It is not possible to save the 

data in the PC. 

Saving data on the PC requires the software T (please call your A distributor). 

The Toolbar gives options to improve data analysis: display of a data box, display of cursor, 

zoom, export… 

To draw a 'Chart', select the icon from the Toolbar. Draw a rectangle in the 'Form' at the 

place you want to display the 'Chart'. 

Export 

Markers 

Cursors Tracking Moving 

Zooms 

WebForm Studio 10.00 - Getting Started 31 

Export

A configuration is needed to indicate which Tags you wish to download. 

To enter the properties of the 'Chart', double click the object, when it is in edit mode 


There are 2 groups of configuration: 

4.6.1. General configuration 

• Tab ‘General’: 

Displays a list of historic data already configured. To access the configuration of a 

selected ‘historic’, click 'Properties'. 

• Tab ‘Layout’: 

To configure the default period displayed: automatic or adjustable. 

To define a TITLE for the chart. When printing the chart, it is easier to distinguish. 

• Tab ‘Colors’: to configure the colors of the window. 


4.6.2. Configuring an historic 

• Tab ‘Logged Tag’: you declare : 

The descriptive name of the historic. 

The comment which will appear to the scale of values. 

The Tag of A. Only Tags declared in A data logging are available to be 

downloaded. 

• Tab ‘Layout’: you configure the parameters on the line and of the scale of values. 

4.6.3. Download 

• In edit mode: when the Web Form is opened, the historical associated to the object are 

automatically downloaded. 

• At the opening: being in simulation (see chapter 7.1.1: 'Simulation from WebForm 

Studio'), or when you display a chart with the help of Internet Explorer, download is carried 

out automatically at the opening of the Web Form. Data are then frozen. 

• Context menu: To execute a new download, click anywhere on the chart with right button 

of the mouse and select option ‘Download’: 


4.6.4. Toolbar of a chart 

Display a Data box. This box displays different values according to the 

definition of the cursors (see below). 

In display mode, one can access the data box by a double click anywhere on 

the chart. 

Print out of the chart, as it appears on the screen. 

Export of a chart. 

The available formats are: Bitmap (.bmp), Metafile (.wmf), and jpeg (.jpg). 

To export data in file, see ‘Data view’ next section. 

Displays markers. Each dot corresponds to a record. 

Choice of cursors : 0, 1 or 2 cursors. 

Tracking is associated to the use of cursors (see above). 

It allows to move a cursor from dot to dot, meaning from record to record. 

The scales can be defined either ‘automatic’ (adjusted to the values 

downloaded) or adjustable (see chapter 4.6.1 and 4.6.2) . 

Possible options : 

- Moving on the scale of values. 

- Moving on the scale of time. 

It is also possible to move with the help of the mouse ; by pressing the right 

button and moving on the chart. 

Zooms are carried out from the center of the chart. 

Zoom +: a specific part of the chart can also be displayed by drawing a 

rectangle with the help of the cursor. One draws a rectangle starting at the 

top left corner. 

Zoom -: to come back to the default display, one draws a rectangle starting at 

the bottom right corner. 

Data View: opens a list with historic data (see ‘Data View / Export’ following). 


4.6.5. Data View / Export 

Opening the list might take several seconds as data need to be sorted. 

The available features from the ‘List’ display are: 

• From the combo box, you can select the Tag(s) you want to display. 

• You can export data, as they are displayed, to a text file. Two formats are supported: 

CSV (values separated by a comma) 

TXT (values separated by a ‘tab’). 

• You can copy data into the clipboard. They are then available for any Windows program, 

with the help of a simple ‘Paste’ action; for instance Excel. 


4.7. Dynamic Chronology List 

This object allows displaying chronology in a table with psecific comments and value formats: 

- with A CPU3: in the ‘Web/Minitel/Terminal’ Tags of TWinSoft. 

- with TBox-MS, TBox-LITE, and TBox-LowPower: in the Tag ‘Presentation’ of TWinSoft.. 

This gives you a possibility to display ‘Events’, with date and time, ‘status’ of digital Tags and 

‘units’ and description of the Tags 

To draw a ‘dynamic chronology’, select the icon from the Toolbar. Draw a rectangle in the 

‘Form’ at the place you want to display the table. 

Example: 


4.7.1. Configuration in TWinSoft 

The Tags you want to display in such a table must be configured in the list of chronologies of 

TWinSoft. 

The information associated to the Tags is defined in the Web/Minitel/Terminal Tags of 

TWinSoft: 

Example for A CPU3 

The ‘Comments’ of Terminal Tags will be used as ‘Description’ in the Chronology table 

The ‘States’ and ‘Units’ of Terminal Tags will be used as ‘Value’ in the Chronology table. 

Example with TBox-MS 

‘Presentation’ configuration for a Digital 

Tag. 


4.7.2. Configuration of the dynamic chronology 

A configuration is needed to indicate which Tags you wish to display. 

To enter the properties of the 'Dynamic chronology', double click the object, when it is in edit 

mode (surrounded with small green squares and with the 'double arrow' cursor). 

Chronology selection: you select which type of data you want to display: analog or digital. 

You cannot combine both types. When needed, you have to create 

2 tables, one for analog and one for digital 

ModBus range: you filter the Tags you want to display using range(s) of ModBus 

addresses. 

By default, it displays all Tags, from ModBus address 0 to 32767. 


4.8. Dynamic Sampling List 

This object allows displaying several historical data in several columns. The title of the column 

can be adapted for each series (see Series configuration) 

A configuration is needed to indicate which Tags you wish to display. 

To draw a Dynamic Sampling table, select the icon from the Toolbar. Draw a rectangle on 

the 'Form' at the place you want to display the table. 

Double click the object to change its configuration and Add any logged Tag in the RTU (either 

in Chronology or Sampling Table). 

4.8.1. Sampling Table Toolbar 

The Toolbar gives option to improve the analyze of the data: 

Allows saving the data in .TXT or .CSV file. 

Print out of the table, as it appears on the screen. 

Export of a table. 

The available formats are: Bitmap (.bmp), Metafile (.wmf), and 

jpeg (.jpg). 

To export data in file, see 'Save' above. 

Refresh the table. 


4.9. Timer 

This object has been implement to activate a timer within the WebForm for T. 

It requires using VB Script to access ‘Events’. 

Timer starts running when the WebForm it contains is opened. 

When the period has elapsed, the EventTik is activated. 

4.9.1. Timer configuration 

4.9.2. Script 

Example of script on event ‘EventTik’ 

You give the Timer a period. 

At the end of the period, the 

‘EventTik’ will be activated 

(see next) 


5. Catalogue 

The catalogue contains your own specific objects (or groups of objects) saved with their 

configuration. 

Those objects are saved in an external file (the catalogue) and can be exported to be used in any 

new ‘Form’. 

Examples: 

- Title with a specific font, color and underline. 

- Groups of time variable to display date and time information. 

By default the catalogue window is displayed at the left side of the WebForm Studio. 

5.1. Open a catalogue 

Right click in the Catalogue window (yellow window). 

Select “open” (or new if you have not created any yet). 


5.2. Import of an object into a catalogue 

Be sure a catalogue is opened. 

Select the object (or a group of objects). 

Press and drag the selection to the Catalogue window. 

5.3. Rename an object in a catalogue 

In the catalogue window, select an object. 

When the object is selected, single-click on the name. 

It can now be edited. 

5.4. Export of an object from a catalogue 

Open a catalogue. 

Select an object. 

Drag the object with the left button to the ‘Form’. 

The object can now be resized and edited in the ‘Form’ if needed. 


6. Access Protection 

The goal of the protection is to protect objects from being displayed, or in the case of an 

‘Action’, objects to be ‘write’ protected. 

It relates to ‘A access protection’ explained in ‘TBox User’s Guide’. 

6.1. Login 

Access protection is activated when connected to a protected A locally or through modem. 

In that case, you need to ‘login’ to get an access level. 

6.1.1. TCP/IP connection 

The login, are the name and password you enter when dialing. 

6.1.2. With WebForm Studio 

While developing with WebForm Studio connected to a communication port of A which 

is protected, one must login before starting: from the main menu ‘Tools’ ‘Login’. 

6.2. Display access level 

When creating an object, a display access level is always assigned to each object. By default, it 

is the ‘Read’ only level. This means that the object can be seen by anyone. 

Three access levels are supported, which correspond to the protection of communication port of 

the A: Engineer, Read/Write and Read only (see TWinSoft). 

Example: 

All objects defined with access level ‘Engineer’, will not be visible for a user logged in with 

‘Read/Write’ or ‘Read’ level. 

6.2.1. Simulation of Display access levels 

While editing, to display the ‘Form’ with a specific access level to simulate the ‘Run Time’ 

display, go from the main menu: ‘View’ ‘Access Level’ and select a level: 


6.3. Write access level 

For an object assigned with an ‘Action’ (Set point or Link), a write access level can be defined 

in the properties of the object. 

See chapter 4: ‘Creating an object’. 

When the WebForm Studio is in simulation mode (see chapter 7: ‘Communication’), those 

access levels can be tested. 

Before testing access levels, the port of A must be protected (see TWinSoft). 

From the WebForm Studio you can log yourself from the ‘Communication’ menu of the main 

Tool Bar. When logged, your access level is displayed in the status bar. 


7. Communication 

7.1. Communication while editing 

Two situations are possible: 

• The WebForm Studio has been started from TWinSoft, by clicking a .TWF file. 

In this case, the communication port has been already captured by TWinSoft, but WebForm 

Studio is also able to communicate, at the same time . 

• The WebForm Studio has been started from the ‘Start’ menu and then of course TWinSoft 

is not online. 

In that case, communication is carried out by the WebForm Studio. 

As for TWinSoft, the communication of the COM port of the PC must be configured to fit with 

the configuration of the COM port used in the A. The WebForm Studio allows local 

communication only, for testing and simulation. 

From the main menu bar, click ‘Communication’ ‘PC Communication Setup’. 

When communication is started with A, the ‘Access level’ is displayed in the status Bar 

(Engineer, Read/write or Read only). The ‘Form’ is then refreshed automatically. 


7.1.1. Simulation from the WebForm Studio 

In order to test the final view of the ‘Form’, and to test the ‘Actions’ and the access levels, you 

must quit the ‘Edit view’ mode. 

From the ‘View’ menu, clear the option 

‘Edit View’. 

The accelerator key will 

toggle modes (Edit, Simulation) 

7.1.2. Simulation from Internet Explorer 

In the same ‘View’, the option ‘Preview in browser’ opens the default browser of your PC 

(which must be Microsoft Internet Explorer) and display the real HTM files, as it will be for a 

dial-up connection. 

You are then able to display the 'Form' and its associated ‘Template’. 

1. As of Version 7.1 (of TWinSoft and WebForm Studio) a new mechanism of communication 

has been developed that allows simultaneous communication of different software. It 

means that TWinSoft, WebForm Studio and Internet Explorer are able to communicate at the 

same time, with the same local communication port. 

However, if one of those is having communication error, it will penalize the communication 

of the others (caused by the multi-tasking of Windows). 

2. From TWinSoft and WebForm Studio, you can toggle between Online and Offline with the 

accelerator keys: . 


7.2. Local communication 

HTM pages can be displayed locally. 

It means that HTM pages are located on the PC and refreshed by a local connection to a 

A. As URL of Internet Explorer, you select the location on the PC where the HTM pages 

have been saved. 

Examples: C:\Program Files\Techno Trade\Samples\WebServer\index.htm 

The connection can be either a point to point connection (RS232) or a LAN connection (via the 

Ethernet interface of A). 

7.2.1. Installation on the PC. 

On the PC, the utility WebFormViewer must be installed, to display the specific objects defined 

in the Web Forms. It is available from the CD-ROM of TWinSoft. It installs the ActiveX library 

and the communication utility (see next). 

As of version 7.1, the configuration of communication is available from the Web Form itself. 

Right clicking the Web Form, opens a menu where the ‘PC communication Setup’ menu can be 

accessed. 

You can then select the media used to access A (local-RS232 or LAN-Ethernet). A 

modem connection is also possible, but with HTM pages inside A (see chapter 7.3: Dialup 

communication) 


7.3. Dial-up communication 

This is the final step. 

In order to dial-up a Web Server, a ‘dial-up networking’ configuration is needed. 

The utility TBox Dial It! allows you to create a list of A to dial. It handles dialing, 

connection and IP identification. 

Therefore, you don’t need to create ‘network connection’ configuration. 

Working with Windows XP, you should check some properties of the ‘network 

connection’ (see details in TBox Dial It! manual available in group of Programs ‘Techno Trade’ 

‘Documentation’) 

We usually don't connect to A through the WWW, but in point to point connection: the PC 

calls the A. A WWW connection requires a permanent connection between a Provider and 

the A; very expensive ! 

Two situations are possible: 

• You call the A with a PC that is not equipped with TWinSoft (see chapter 7.3.1: 'PC 

not equipped with TWinSoft'). 

• You call with a PC equipped with TWinSoft (see chapter 7.3.2: 'PC equipped with 

TWinSoft'). 

7.3.1. PC not equipped with TWinSoft 

Imagine you develop the A application on your PC, but different operators need to call 

A as Web Server, to monitor the process. 

In case TWinSoft has not been installed on the PC Browser, supplementary software must be 

installed: WebFormView.exe. 

It must be copied on the PC, then be executed. It installs ActiveX library of specific A 

objects. This utility is available on the CD-ROM of TWinSoft, or from our Web Site 

www.tbox.biz page ‘Support’ → ‘Software’. 

The dial-up procedure entry can be automatically handled by the TBox Dial It! utility (see 

chapter 8). 

7.3.2. PC equipped with TWinSoft 

The dial-up procedure entry can be automatically handled by the TBox Dial It! utility (see 

chapter 8). 


8. TBox Dial It ! 

TBox Dial It ! is a utility dedicated to dialing A ‘Web Server’. It is used directly from 

Internet Explorer and makes dial-up A very easy and friendly ! 

TBox Dial It ! has the following features: 

• Automatic creation of 'dial-up entry'. It is not needed anymore to create the dial-up 

entry, or .INS file from TWinSoft. 

• Creation of an address book with the list of A to dial. 

• Dial of A. 

• When connected, automatic identification of the IP address and loading of index 

HTML page (standard) or a specific URL. 

• Within a standard HTML page, possibility to create hyperlink to dail a A. 

Internet Explorer 5.00 minimum needed. 

8.1. Installation 

As of TWinSoft 8.00, TBox Dial It ! is automatically installed with the WebForm Viewer, also 

installed together with TWinSoft. 

In case you only need to dial A, to display HTML pages, you install the WebForm Viewer 

only. It contains the ActiveX dedicated to A and the utility TBox Dial It ! . 

The installation can be carried out from the CD-ROM of TWinSoft or from our Web Site 

www.tbox.biz page ‘Support’ → ‘Software’. 

8.2. Starting TBox Dial It ! 

TBox Dial It ! is accessible directly from Internet Explorer. 

A TBox Dial It ! toolbar button is available. It is automatically inserted in the ‘Standard button’ 

toolbar. 

Clicking the button, opens an Explorer window at the left side of Internet Explorer window. 

According to the version of Windows and Internet Explorer, the button might not be installed 

automatically. In such case, you can do it manually from the menu ‘View’ → ‘Toolbars’ → 

‘Customize’. Then you select the button ‘TBox Dial It!’ 


8.3. Configuration 

TBox Dial It ! is composed of several HTML pages: 

‘Dial’ page Where the list of A appears. 

It can also be used to dial a TBox manually, without any configuration. 

‘Address Book’ page Where you create the A stations with their tel. number, … 

‘Preference’ page Where you select a language (Français, English, Deutsch, …). 

You can also change the modem selection. 

‘Help’ page Where the use of TBox Dial It ! is explained. 

8.3.1. ‘Dial’ page 

When TBox Dial It ! has been started from the ‘Start’ button of Windows, under the ‘Programs’ 

folder, the following HTML page is opened. 

List of Stations. 

To dial a A manually, 

without any configuration 

Clicking ‘Address Book’ allows you to create the A stations. 


8.3.2. ‘Address Book’ page 

From the Address Book, you create the station (A you wish to dial). 

Click ‘Click here to create a new station’ or ‘New Station’ from the list to open the following 

page: 

8.3.3. The file PhoneBook.dat 

Name which appears in the List. 

It cannot start with a number. 

Each station configuration is saved in the text file ‘PhoneBook.dat’. 

This file is located in the personnal directory of the PC user: 

..\Document s and Settings\\Application Data\TBox DialIt!). 

HTML page opened when connected. 

When left empty the ‘index.htm’ is 

opened 

The advantage to have this configuration in a separate file allows you to create the address book 

on one PC and to transfer it to another PC. 

For instance you are integrator, and you install regularly new station. Each time you install a new 

A ‘Web Server’, you add it to the address book, and send the file ‘PhoneBook.dat’ to your 

customer to keep him updated. 


8.4. Dialing TBox 

After creation of the stations, they are available in a list on the ‘Dial’ page. 

Example with opening of the Explorer Bar ‘TBox Dial It!’ at the left side of the screen, using the 

toolbar button ‘TBox Dial It!’. 

1. 

Selection of the station. 

Dial of the station. 

2. 

When connected, automatic 

identification of the IP 

3. 

Loading of ‘index.htm’ or of the 

page declared as URL 


The procedure is the following: 

1. Selection of the station in the list window. 

Opening of the ‘connection’ dialog box where you can enter your name and password 

(in case A is protected). 

Important : Depending on the version of Windows, you have to type a name and 

password, even if the RTU is not protected. In some case Windows requires a name and 

password to continue the connection procedure. 

2. When the PC is connected to A, Internet Explorer automatically identifies the IP 

address of the A it is connected to and copies it as URL in the Address bar. 

3. Loading of the HTML page declared as URL (optional). 

In case there is no URL declared, the default ‘index.htm’ is loaded. 


8.5. Advanced use of TBox Dial It! 

TBox Dial It ! introduces its own syntax in URL’s. It can be used from any standard HTML page 

or directly from the Address bar to access a page. 

Syntax: tbox: 

tbox:dial Opens the ‘Dial’ page. 

tbox:config Opens the ‘Address Book’ page. 

tbox:preferences Opens the ‘Preferences’ page. 

tbox:help Opens the ‘Help’ page. 

tbox:Oostend Dial the TBox Station ‘Oostend’ (from the address book). 

tbox:0451234567 Manual Dial to the A with tel. number 0451234567. 

tbox:=AB3030 Manual Dial to the A with tel. number 3030. The sign ‘=’ allows 

to insert letters in telephone number. The URL is then not considered as 

a Station name but as a telephone number. 

Example: 

In an HTML page, the URL referring to Station name, or telephone number can be used as 

hyperlink, to access the stations by simply clicking an objects in an image, or on area on a map 

for instance. 

Link to : 

http://192.168.1.99 

(TBox on the local network) 

Link to : 

tbox:Westend 

Link to : 

tbox:Oostend

Semaphore WebForm Studio Manual - ioSelect

You also want an ePaper? Increase the reach of your titles

Delete template?

Save as template?