Vijeo-Designer

Tutorial
eng

35007035 00

Table of Contents

About the Book . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5

Part I Vijeo Designer at a Glance . . . . . . . . . . . . . . . . . . . . . . . . 7

At a Glance . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7

Chapter 1

General . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
At a Glance . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9 Overview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10 Vijeo Designer's main tools . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13 Installing Vijeo Designer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17 Removing Vijeo Designer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20

Chapter 2
2.1

Creating a project . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
At a Glance . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Specifications . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . At a Glance . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . The Application at a Glance . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Starting Vijeo Designer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Basic settings . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Creating variables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Creating the "Water level settings" screen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . At a Glance . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Creating the "Water level setting" screen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Creating lamps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Creating navigation buttons. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Creating an alarm display popup window . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Creating the "Water level meter" screen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . At a Glance . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Creating the "Water level meter" screen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Creating a tank . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Creating a conduit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Creating a navigation button . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Creating the "Water level data chart" screen . . . . . . . . . . . . . . . . . . . . . . . . . . . At a Glance . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Creating the "Water level data chart" screen . . . . . . . . . . . . . . . . . . . . . . . . . . . 21 23 23 24 28 29 32 36 36 37 41 45 49 56 56 57 59 63 68 69 69 70
3

2.2

2.3

2.4

Creating a chart . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72 Creating a navigation button . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75 Creating a script. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76

Chapter 3

Project Download. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81
At a Glance . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81 Validation / Building / Correcting errors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82 Simulating . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84 Download function and exiting a project . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85

Index

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89

About the Book

At a Glance
Document Scope This manual presents the basic concepts of the Vijeo Designer software application required for the development of an application. For a more detailed description of the software's functions, refer to the Vijeo Designer online help.

Validity Note Revision History

Rev. No. 1 2 Changes Initial version. pass french source language in english source language

Related Documents Product Related Warnings User Comments We welcome your comments about this document. You can reach us by e-mail at TECHCOMM@modicon.com

June 2003

About the Book

June 2003

Vijeo Designer at a Glance

I
At a Glance
Purpose of this section What's in this Part? This section presents the main functions of the software together with its installation.

This part contains the following chapters:

Chapter 1 2 3 Chapter Name General Creating a project Project Download Page 9 21 81

June 2003

Vijeo Designer at a Glance

June 2003

General

1
At a Glance
Purpose of this chapter What's in this Chapter? This chapter presents the Vijeo Designer software application.

This chapter contains the following topics:

Topic Overview Vijeo Designer's main tools Installing Vijeo Designer Removing Vijeo Designer Page 10 13 17 20

June 2003

General

Overview
About Vijeo Designer Vijeo Designer is a software application used to establish Human Machine Interfaces (HMI). It provides all the tools needed to design a project, from the acquisition of data to the creation and display of animated drawings. The table below presents the configuration required to use Vijeo Designer:
Elements Processor Memory Operating system Web browser Characteristics Pentium II 400 MHz 128 MB of RAM Windows 2000 (Service Pack 2) Windows XP Internet Explorer 5.0 or higher

Required configuration

10

June 2003

General

Main characteristics

Reusing the data: Vijeo Designer uses two types of data: l Internal data created in the user application, l External data provided by the devices (PLCs, remote I/Os, etc.). Graphical objects, Scripts and panels created with Vijeo Designer can be saved in the Toolchest (See Vijeo Designer's main tools, p. 13). It can thus be reused in other projects. This is particularly useful when optimizing the development of new applications or harmonizing screens when co-developing, for example. Connecting to several PLCs: Vijeo Designer can be used to simultaneously communicate with a number of Schneider PLCs. Creating screen pages: Vijeo Designer can be used to create dynamic screens quickly and easily. It combines various functions in a simple program, such as moving objects, zooms, level indicators, On/Off indicators, buttons or other special graphics. Animated symbols can be used to build and edit a graphical screen very simply. Using scripts: Vijeo Designer incorporates a function used to create scripts. Thus, a "building block" created by one application can easily be reused in other projects. Report: Vijeo Designer also incorporates an advanced function designed to simplify the management of variables used in the animation screens, such as: l Configuring or modifying the variables and characteristics of objects via the Inspector (See Vijeo Designer's main tools, p. 13) window. Multi-language: Vijeo Designer can store the alarm messages or text objects for the same application in more than 20 different languages. Thus, while running the user program, a simple selection from the animation screen switches the display to the selected language. Editing variables created by other applications: Vijeo Designer can import or export variables in a CSV file. Similarly, variables created in Vijeo Designer can be exported in other applications.

June 2003

11

General

Terminals targeted

The list below represents the different devices that can communicate with Vijeo Designer: l XBTG2110, l XBTG2120, l XBTG2130, l XBTG2220, l XBTG2330, l XBTG4320, l XBTG4330, l XBTG5230, l XBTG5330, l XBTG6330.

12

June 2003

General

Vijeo Designer's main tools

June 2003

13

General

At a Glance

Vijeo Designer's main tool windows are contained within the application program. You can therefore use six windows to develop your project quickly and easily. Each window provides information pertaining to a specific object or to the project. You can customize your work environment by resizing or moving the windows. Icons associated with the windows are contained in the toolbar.

14

June 2003

General

The Vijeo Designer environment looks like this: 1

Designer Vijeo

Icons for the working windows

Manual_V41 - Vijeo-Frame - [InfoViewer]

File Edit Build Arrange Search View Draw Tools Window Help

Designer Vijeo

?
Graphical Panel
Designer Vijeo

Manual_V41 Target1 Graphical Panels 1: Configuratio 2: Tank 3 : Chart Application Scripts Alarms Popup Windows Languages Data Files IO Manager

Designer Vijeo

Name PanelID Description Width Height BackgroundColor

Panel1 1 800 600 (128,255

Order 1 2 3 4 5 6 7 8 9

Vijeo

Vij...

Designer

Project

Var...

Too.. Position 8 2 36 8 45 56 9 Calling romizer Romizer successful Total size of HMI Runtime files is 813 KB. (832,540 bytes). Downloading Downloading Target1... Download Complete - 0 error(s), 2 warning(s) Romizing

Object Name

Lamps\2-states

A A A A

Rectangle01 Text01 Text02 Text04 Text05 LampO_0015_01 SwSpO_0005_01 SwSpO_0003_01 SwSpO_0003_02

LampO_000... LampO_000... Label LampO_000... LampO_000...

LampO_000... LampO_000...

Objects

Build

June 2003

15

General

Icons associated with the working windows

The following table presents the different working windows:

Number 1 Screen name / associated icon Navigator Description This tool is mainly used to create applications. The information on each project is listed hierarchically as in a document explorer. Displays the online help or the contents of the reports.

View Info

?
3 Inspector Displays the selected object's parameters. When more than one object is selected, only those parameters common to the various objects are displayed. Lists all the objects appearing in the drawing, giving their creation order, name, position, animations and associated variables. The highlighted object in the list is selected in the drawing. Similarly, information is displayed for a group of objects (its order, name and position). You can display the list of objects that make up the group by clicking +. Each object can be selected separately. Displays the progress and results of the error check, compilation and load. When an error occurs, the system displays an error message or warning message. To identify the error, double-click the message. A library of components (bar chart, timers, etc.) provided by the manufacturer or components that you have created previously. To place a component in the drawing, you must select the component and then drag it onto the drawing. Your own components can be exported and/or imported.

Data list

Feedback Zone

Toolchest

16

June 2003

General

Installing Vijeo Designer

At a Glance This product is available on a CD-ROM. The CD-ROM contains the installation of Vijeo Designer. Here are some precautions before installing the application: l Before beginning the installation, close all other active applications. l If you are reinstalling the software, you must remove the previous version of Vijeo Designer first. l Vijeo Designer must be installed by the system administrator. l A project created and opened with this software version cannot be opened with an earlier version of Vijeo Designer. Also, before opening an application created using an earlier version of Vijeo Designer, you are advised to perform a complete backup of the initial project. l Before you start Vijeo Designer for the first time, read the "Readme.txt" text file. This file can be accessed from the "Start \ Programs \ Schneider Electric \ VijeoDesigner" menu.

June 2003

17

General

Installation procedure

The steps in the installation process are as follows:

Step 1 2 3 4 5 Action Insert the CD-ROM in the computer's CD drive. (1) Select Vijeo-Designer. Select the installation language and click "OK". Click "Next". You must enter the requested information in order to personalize the software:
l User name l Company name l Serial number

Client Information
Enter the information. Enter your name, the name of the company for which you work and the product serial number. Username: VijeoDesigner Company name: Schneider SA Serial number

InstallShield
<Back Next > Cancel

Click "Next".

18

June 2003

General

Step 6

Action Enter the software activation key. KEY CODE Input

Input the KEY CODE made up of 15 alphanumeric characters and 2 hyphens, exactly as it appears on the back of the CD-ROM case.

KEY

InstallShield
<Back Next > Cancel

Click "Next". 7 8 9 10 11 If you accept the terms of the license agreement, click "Yes". Choose the installation folder (by default, this folder is "c:\Program Files\Schneider Electric"). Click "Next". Select Program Folder. Click "Next". Select "Yes" to create a shortcut icon on desktop. InstallShield is in the process of installing Vijeo Designer or one of its components. Click "Finish" when the installation is complete.

(1) The installation of Vijeo Designer is launched automatically by an Autorun. If the installation does not begin automatically, click "Start \ Run" and then type "x:\SETUP.EXE" in the "Open" box and click OK (x represents the CD-ROM drive letter).

Note: At the end of the installation process, if the program ask to restart your computer you must do it and so that all newly installed components are updated in the system. You mustnt restart the computer if the program dont ask to do.

June 2003

19

General

Removing Vijeo Designer

Removal procedure The procedure for removing Vijeo Designer from your computer is as follows: Note: Before beginning to remove the software, close all other active applications.
l l

Using "Add/Remove Programs" (Start \ Settings \ Control Panel menu), select Vijeo Designer and then select "Remove". Alternatively, you can select the Start \ Programs \ Schneider Electric \ Vijeo Designer \ Uninstall menu.

At the end of the removal process, you must restart your computer to take account of all the newly removed components.

20

June 2003

Creating a project

2
At a Glance
Purpose of this chapter What's in this Chapter? This chapter gives a step by step description of how to produce a simple application using Vijeo Designer's main functions. This chapter contains the following sections:
Section 2.1 2.2 2.3 2.4 Topic Specifications Creating the "Water level settings" screen Creating the "Water level meter" screen Creating the "Water level data chart" screen Page 23 36 56 69

June 2003

21

Creating a project

22

June 2003

Creating a project

2.1
At a Glance
Purpose of this subchapter What's in this Section?

Specifications

This subchapter provides a general description of the specifications then describes the initial steps for creating the application. This section contains the following topics:
Topic The Application at a Glance Starting Vijeo Designer Basic settings Creating variables Page 24 28 29 32

June 2003

23

Creating a project

The Application at a Glance

At a Glance The project you are going to create is called "Manual_v41". It consists in creating three screen pages: l The Water level setting screen, l The Water level meter screen, l The Water level data chart screen. These screens contain animations, a numerical value input field, a chart and an alarm. This example, called "Manual_V41", can be viewed at c:\Program Files\Schneider Electric\Docs\samples.

Viewing the project

The following table gives the procedure to follow to view the project:
Step 1 2 3 Action Click on the "Vijeo Manager" tab. Double-click the project to open it. Right-click "Target 1" and select "Start Simulation (Build)".

24

June 2003

Creating a project

Settings screens

The water level must be set to display signals, alarms and error messages. The following diagrams present the "Water level settings (See Creating the "Water level setting" screen, p. 37)" screen. Water level setting
Water level Setting value

Water level setting

Water level Setting value

0
Esc

123
-- -7 4 1 8 5 2 . 9 6 3 Enter B6 +/Del

Next

Next

The following table presents numbers description.

Number 1 2 3 Description Click in this area to display the numeric keypad. Numeric Keypad: input a value and press "Enter" to validate the input. Navigation button for accessing the "Water level meter" screen.

When the numeric value input by the user is outside the permitted range (0 to 100), three warnings are displayed: l An alarm array (See Creating an alarm display popup window, p. 49), l A red lamp blinks (See Creating lamps, p. 41), l An error message blinks (See Creating an alarm message, p. 44).

June 2003

25

Creating a project

The following diagram presents the settings screen with the warnings. Water level setting
Water level Setting value Alarm setting

123
2
03/01/08 19:04:20 The value of this setting

Next

Close

The following table presents numbers description.

Number 1 2 3 Description The blinking of this message shows that the input value is outside the range. It is displayed at the same time as the alarm array. The lamp lights up. Alarm array.

26

June 2003

Creating a project

Graphic representations

Water level variations can also be represented graphically. "Water Level Meter (See Creating the "Water level meter" screen, p. 57)" screen display: Water level meter
9

Next

"Water Level Data Chart (See Creating the "Water level data chart" screen, p. 70)" screen display: Water level data chart (History)
100 90 80 70 60 50 40 30 20 10 0

Back

1 The following table presents numbers description.

Number 1 2 Description Graph representing the tank water level.

Navigation button for returning to the "Water level setting" screen.

June 2003

27

Creating a project

Starting Vijeo Designer

Procedure To start Vijeo Designer, select Start \ Programs \ Vijeo Designer or double-click the Vijeo Designer icon on the desktop.

28

June 2003

Creating a project

Basic settings
At a Glance Configuring your project correctly is essential before you begin to create a drawing. The following procedure does not describe how to configure the external inputs/ outputs, however. A project created in Vijeo Designer is a simple chain of information (database). Within a project, the target terminals are configured and organized in a hierarchical structure. Each target shows the hardware (PLC device) environment in which the project will be run.

June 2003

29

Creating a project

Create a project and configure its target

The following table describes the procedure to follow to create a project and select the remote device:
Step 1 Action This dialog box appears when Vijeo Designer is started. Click "Next" to continue.
Vijeo-Designer Welcome to Vijeo-Designer To create a project, click Next. To open the last project created, select "Open Last Project" and then click Finish. You can reconfigure the project settings in the following dialog boxes. Create new project Open Last project

Don't show this dialog box again

< Back

Next >

Finish

Cancel

Note: If the above dialog box is not displayed when you start Vijeo Designer, you must select the "Vijeo-Manager" tab in the navigator, then right-click "VijeoManager" and select "New project".

30

June 2003

Creating a project

Step 2

Action
l Enter the name of your project and click OK (in our case, type "Manual_V41"). l Select the XBT-G Target. l Select the required screen size. New folders (screens, scripts, alarms, popup windows, languages, data files, etc.) are created.

Designer Vijeo

Manual_V41 Target1 Graphical Panels Application Scripts Alarms Popup Window Languages Data Files IO Manager

Note: To add another "Target" to the project, right-click "my project" then select "New project". 3 Save your project.

Vijeo

Vij...

Designer

Project..

Var...

Too..

June 2003

31

Creating a project

Creating variables

32

June 2003

Creating a project

At a Glance

A variable is a memory address indicated by a name. Vijeo Designer handles the following five types of variables: l Discrete, l Integer, l Float, l String, l Structure. Vijeo Designer uses the variables to communicate with the PLCs. You can also define internal variables that will only be used by Vijeo Designer. In our tutorial, we are going to create internal variables as we will not communicate with the equipment. The following table describes the procedure to follow for creating variables:
Step 1 Action Click the "Variables" tab in the "Navigator" window, then click right to select "New variable" and "Discrete".

Variable List: Sort By Target Name, Filter Target1 New Variable Paste Import Variables Export Variables Properties... Ctrl+V Ctrl+I Ctrl+E Alt+Enter Discrete Integer Float String Structure

Vijeo

Vije.

Designer

Project Variables

Toolchest

June 2003

33

Creating a project

Step 2

Action You will now change the name of the Discrete-type "Discrete01" variable to "alarm". Once the variable has been created, a properties window, "Inspector", will open.
Variable List: Sort By Target Name, Filter Target1 INT alarm

- Variable Name Description ArrayDimension DataType Source + KeepHistory + DataDetails + Alarm Alarm 0 Discrete Internal Disabled Enabled

Repeat steps 1 and 2 to create integer-type variables called "sec" and "value". You have just created one Discrete variable and two integer variables.
Variable List: Sort By Target Name, Filter Target1 INT alarm INT sec INT value

Vijeo

Vij...

Designer

Pro...

Var...

Too...

34

Vijeo

Vij...

Designer

Pro..

Var...

Too...

June 2003

Creating a project

Step 4

Action For the "alarm" and "value" variable select "Disabled" in KeepHistorys parameter and for the "sec" variable select Enabled.
- Variable Name Description ArrayDimension DataType Source + KeepHistory + DataDetails + Alarm

alarm 0 Discrete Internal Disabled Enabled

Save your project.

June 2003

35

Creating a project

2.2
At a Glance
Purpose of this subchapter What's in this Section?

Creating the "Water level settings" screen

This subchapter describes the procedure to follow to create the first water level settings screen page. This section contains the following topics:
Topic Creating the "Water level setting" screen Creating lamps Creating navigation buttons Creating an alarm display popup window Page 37 41 45 49

36

June 2003

Creating a project

Creating the "Water level setting" screen

Illustration The graphic below represents the screen to create: Water level setting
Water level Setting value

123
Esc

-- -7 4 1 0 8 5 2 . 9 6 3

B6 +/Del

Enter

Next

Procedure

The following table describes the procedure to follow to create the first screen:
Step 1 2 3 Action Click the "Project" tab in the "Navigator" window and click on "Target1". Double-click "Graphical Panels" to open the folder. Rename "1:Panel1" as "1:Configuration" then double click on it to open the graphic screen window.

Designer Vijeo

Manual_V41 Target1 Graphical Panels 1: Configuration Application Scripts Alarms Popup Window Languages Data Files IO Manager

In the "Inspector" window, select blue (153,255,255) on Backgroundcolor parameter.

June 2003

37

Creating a project

Create a title in the screen

The title of this screen will be: "Water level setting". The following table describes the procedure to follow to create text:
Step 1 Action Click inside the graphic screen, and select the "Text" icon in the toolbar.
Graphical Editor

Click on the panel window where you want the text zone top left corner to be placed. Release the mouse button. Move the mouse to the position where you want to place the text zone right bottom corner. Click to enter the position. When the "Text Editor" window is displayed:
l Enter "Water level setting" l Select "Vijeo Sans Serif" as the font l Select "16" as the font size l Select "Normal" as the font style l Click OK Text Editor Language: Font: Font Style: 1: Language1 Vijeo Sans Serif Normal Font Width: 16 Font Height: 16

Water level setting

OK

Cancel

In the Inspector window, enter: l The text color = "blue(102,102,255)" l The BackColor = "transparent" l The LineColor = "transparent"

38

June 2003

Creating a project

Create a numerical indicator

The "#" text is used to enter numerical data, while the "Water level setting" text is used as the title. Note: Only use the "#" text to configure data in the animation. Do not press the "Enter" key after inputting "#", otherwise the data input will not be validated. The following table describes the procedure to follow to create the "#" text:
Step 1 Action Create a "#" text object. To do so, refer to steps 1 and 2 in the "Create a title" table (See Create a title in the screen, p. 38), and configure the text properties as shown in the following screen:
Text Editor Language: Font: Font Style: 1: Language1 Vijeo Gothic Normal Font Width: 32 Font Height: 32

OK

Cancel

In the "Inspector" window, enter: l the TextColor = "blue (0,0,255)" l the BackColor = "yellow (255,255,0)" l the LineWidth = "3" l the HorizontalAlign = "Center" l the VerticalAlign = "Middle"

June 2003

39

Creating a project

Step 3

Action Click the window:

Animation Properties Color Position
12 ...

icon to the right of "Animation" to open the "Animation properties"

Value

Visib. Data Type: Integer

Enable Value Animation Value

Display Digits: Zero Suppress Keypad/Keyboard Input Display Popup Keypad Interlock Input Status Variable Group No.: Unassigned Order No. 0 Format: Dec.

Beep on Touch
Cancel

OK

Apply

In the "Animation properties" dialog box, click the "Value" tab and check:
l The "Enable Value Animation" box l The "Keypad/Keyboard Input" box l The "Display Popup Keypad" box l The "Zero Suppress" box

Click the

icon then:

l Select the "Value" variable l Enter 3.0 in the "Display Digits" field l Select "Integer" in "Data Type" field l Click OK

40

June 2003

Creating a project

Step 5

Action You are now going to create the "Water level, Setting value" text. Repeat steps 1 and 2 above with the following configuration: l Type "Water level" and "Setting value" l Select "Vijeo Gothic" as the font l Select "16" as the font size l Select "Normal" as the font style l Click OK

Text Editor Language: Font: Font Style: 1: Language1 Vijeo Gothic Normal Font Width: 16 Font Height: 16

Water level Setting value

OK

Cancel

In the "Inspector" window, enter: l "blue (0,0,255)" as the TextColor l Configure: l The BackColor as "transparent" l The LineColor as "transparent" Click OK

Note: You can access and modify an object's settings in the "Inspector" window.

Creating lamps

June 2003

41

Creating a project

At a Glance

"Animated symbols" are used to create lamps that light up when an error is detected. Water level setting
Water level Setting value Alarm setting

123

The following table describes the procedure to follow to create lamps:

Step 1 Action Click the "Toolchest" tab in the navigator, then click the "Lamps" folder and then "2 States".
Toolchest BarGraph CircleGraph DataGraph DateDisplay HistoricalTrend Keypad Blank SpecialKeys Lamps 2 Sates 4 States Special Meter NumericDisplay PieGraph SEI toolchest Switches

42

Vijeo

Vij...

Designer

Pro...

Var...

Toolchest

June 2003

Creating a project

Step 2

Action Drag & drop "Lamp2St0_0015_01" onto the panel.

Lamps\2-state Label LampO_000... LampO_000... Label LampO_000... LampO_000... LampO_000... LampO_000...

LampO_000...

LampO_000...

LampO_000...

LampO_001... LampO_001...

LampO_001...

LampO_0013_... LampO_0014_... Lamp2StO_001 5_01

In the "Inspector" window, click the the "alarm" variable:

Inspector
Smart Part Name Description Top Left Width Height Variable ForeColor(OFF) ForeColor(ON) Blink Pattern BackColor FrameColor RestoreDefaults FALSE 1 : SOLID

...

icon to the right of "Variable" and select

Lamp2StO_0015_01 2-state lamps 0015 V4.0 120 240 40 40 alarm (0,255,0) (255,0,0) Select an item alarm _Minutes _Months _Seconds _SystemLanguage _UserApplicationLanguage _Year2 _Year4 alarm Value

(0,0,0) (102,102,102)

June 2003

43

Creating a project

Creating an alarm message

You will now create text that will blink when the user inputs an incorrect value or an error is detected. The following table describes the procedure to follow to create an error message that blinks:
Step 1 Action Create the "Alarm setting" text. Repeat steps 1 and 2 (See Create a title in the screen, p. 38) with the following configuration:
Text Editor Language: Font: Font Style: 1: Language1 Vijeo Gothic Normal Font Width: 16 Font Height: 16

Alarm setting

OK

Cancel

In the "Inspector" window, enter: l "red (255,0,0)" as the TextColor l Configure: l The BackColor as "transparent" l The LineColor as "transparent"

44

June 2003

Creating a project

Step 3

Action Double-click the previously created text or click the

...

icon to the right of

"Animation" in "Inspector". The "Animation properties" dialog box is displayed:

Animation Properties Color Position Value Visib.

Enable Visibility Animation alarm

Enable Blink Animation alarm Speed: Slow

OK

Cancel

Apply

Click the "Visib." tab.

l Check the "Enable Visibility Animation" and "Enable Blink Animation"

check boxes.
l Click the l Click OK.

icon and select the "alarm" variable.

Creating navigation buttons

June 2003

45

Creating a project

At a Glance

Use the "Smart Part" to create buttons for navigating between the "Water level setting" and "Water level meter" screens. Water level setting
Water level Setting value

Next

The following table describes the procedure to follow to create buttons:

Step 1 Action Click the "Toolchest" tab in the navigator and then click the "Special function switches" folder.
Toolchest BarGraph CircleGraph DataGraph DateDisplay HistoricalTrend Keypad Blank SpecialKeys Lamps Meter NumericDisplay PieGraph SEI toolchest Switches Bit switches Special function switches Word switches TankGraph
Vijeo

Vij...

Designer

Pro...

Var...

Toolchest

46

June 2003

Creating a project

Step 2

Action Drag & drop "SwSp0_0005_01" onto the drawing.

Switches\Special function switches Label SwSpO_000... SwSpO_000... Label SwSpO_000... SwSpO_0005_ 01 SwSpO_000... SwSpO_000...

SwSpO_000... SwSpO_000...

SwSpO_000...

SwSpO_001... SwSpO_001...

SwSpO_001...

In the "Inspector" window, enter 2 on ID. The number 2 on ID represents IDs screen who will be open when click on the button:
Inspector
Smart Part Width Height Operation ID ForeColor Label TextColor Interlock Buzzer Pattern BackColor FrameColor RestoreDefaults Animation FALSE TRUE 1 : SOLID (0,0,0) (153,153,153) (0,0,255) 80 40 Change Panel 2 (0,255,0)

June 2003

47

Creating a project

Step 4

Action In the "Inspector" window, click the

...

icon to the right of "Label" to open the

"Text Editor" dialog box and configure each field as shown below:
Text Editor Language: Font: Font Style: Language1 Vijeo Sans Serif Normal Font Width: 8 Font Height: 16

Next

OK

Cancel

48

June 2003

Creating a project

Creating an alarm display popup window

Introduction A popup window is a window that appears in front of a window already open. The following figure shows an alarm list that is displayed when the user inputs an incorrect value.
yy/mm/dd yy/mm/dd yy/mm/dd XxXxXxXx XxXxXxXx XxXxXxXx

24:00:00 24:00:00 24:00:00

24:00:00 24:00:00 24:00:00

Close

June 2003

49

Creating a project

Create a popup window

The following table describes the procedure to follow to create a popup window:
Step 1 Action Click the "Project" tab in the "Navigator" window and right-click "Popup windows" in order to select "New popup window":
Designer Vijeo

Manual_V41 Target1 Graphical Panels 1: Configuration Application Scripts Alarms Popup Windows New Popup Window Languages Paste Popup Window 1: All Popup Windows... Delete Language1 2: Language2 Properties Data Files IO Manager Insert Ctrl+V Delete Alt+Enter

Rename "1:Window" as "1:AlarmWindow" and "10001:Panel4" as "10001:Alarmarray". Click "10001:Alarmarray" to open the drawing.

50

Vijeo

Vij...

Designer

Project

Var...

Tool...

June 2003

Creating a project

Displaying the alarms

The following table gives the procedure to create an alarm display table:
Step 1 Action Click the "Alarm Summary" drawing icon to create the "Alarm" object.

In the "Inspector" window, change the following settings:

l Input "16" in the "FontHeight" field. l Input "16" in the "FontWidth" field. l Input "(white) 255,255,255" in the "BackAreaColor" field. l Set the "Frame" property to "Enabled". l Input "(orange) 255,102,0" in the "Line Color" field.

Next, set "Ruler" to "Enabled", and "Line Color" to "(dark blue) 0,0,153".
Inspector
Alarm RTNBlink FontHeight FontWidth BackAreaColor ShowColumnTitles Frame LineColor LineStyle LineWidth BackAreaColor Ruler LineColor LineStyle LineWidth BackAreaColor 1 (0,0,0) Enabled (0,0,153) 0 : SOLID 1 (0,0,0) No 16 16 (255,255,255) FALSE Enabled (255,102,0) 0 : SOLID

June 2003

51

Creating a project

Create an alarm message

The alarm messages are generated and displayed in the "Alarm display" array (see "Displaying the alarms" above) when an error is detected. The following table gives the procedure to create an alarm message:
Step 1 2 Action Click the "Variables" tab in the "Navigator" window in order to select the "alarm" variable. In the "Inspector" window, change the following settings: Set "Alarm" zone to "Enabled".
Inspector
Variable Name Description ArrayDimension DataType Source KeepHistory DataDetails Alarm AlarmMessage alarm alarm 0 Discrete Internal FALSE Enabled

TriggerConditon When high AlarmGroup RootAlarmGroup

Click the

icon in the "AlarmMessage" zone.

In the "Alarm Message Editor" window, type "The value of this setting exceeds 100" in the dialog box and then click OK.
Alarm Message Editor Language: 1: Language1

The value of this setting exceeds 100!

OK

Cancel

52

June 2003

Creating a project

Creating a button to close a window

The procedure for creating a button to close a window is described below.

Step 1 2 3 4 Action Click "10001:Alarmarray" to open the drawing. Click the "Rectangle" drawing icon and then draw a rectangle on "10001:Alarmarray" window. Input "(yellow) 255,255,102" in the "ForeColor" property. Click the

icon in the "Animation" zone.

Click the "Touch" tab and then check the "Enable Touch Animation" check box.
Animation Properties Color Fill Size Position Rotate Touch Visib.

Enable Touch Animation Function 1 Bit Operation Toggle: Condition Always

Add

Insert

Delete

Option Reverse On Touch Buzzer On Touch

OK

Cancel

Apply

June 2003

53

Creating a project

Step 6

Action
l Double click the "Operation" property in order to display the "Function

Setting" dialog box.

l Select "Popup Panel" from the "Function" drop-down list, then click "Close

Popup Panel".
l Select "10001:Alarmarray" from the "Panel Name" drop-down list, and click

OK.
Function Setting Function Popup Panel Open Popup Panel Close Popup Panel

Panel: 10001:Alarmarray Panel Name Panel ID(Expression) Position: At Position Centered

OK Cancel

X 0

Y 0

l In the "Animation Properties" window, click OK to close the window.

Click the "Text" drawing button and create on rectangle drawing a text object called "Close", and then set the following configuration:
Text Editor Language: Font: Font Style: 1: Language1 Vijeo Gothic Normal Font Width: 16 Font Height: 16

Close

OK

Cancel

54

June 2003

Creating a project

Step 8

Action
l Input "(red) 255,0,102" in the "TextColor" field. l In the "BackColor" and "LineColor" fields, check the "Transparent" check

box. 9 Save your project.

June 2003

55

Creating a project

2.3
At a Glance
Purpose of this subchapter What's in this Section?

Creating the "Water level meter" screen

This subchapter describes the procedure to follow to create the second "Water level meter" screen page. This section contains the following topics:
Topic Creating the "Water level meter" screen Creating a tank Creating a conduit Creating a navigation button Page 57 59 63 68

56

June 2003

Creating a project

Creating the "Water level meter" screen

Illustration In this section, you are going to create a second screen: Water level meter
#

Next

June 2003

57

Creating a project

Procedure

The following table describes the procedure to follow to create a second screen page:
Step 1 2 Action Click the "Project" tab in the navigator. Right-click "Graphical Panels" and select "New panel".
Designer Vijeo

Manual_V41 - Vijeo-Frame - [Target1 - Tank]

File Edit Build Arrange Search View Draw

Designer Vijeo

Designer Vijeo

Manual_V41 Target1 Graphical Panels New Panel 1: Confiion Report... Paste Panel Application Delete All Panels... Scripts Alarms Properties Popup Windows Languages Data Files IO Manager Insert Ctrl+T Ctrl+V Delete Alt+Enter

Rename "2:Panel2" as "2:Tank" to open the graphical screen window. In the "Inspector" window, change the back area color by inputting (yellow) "255,255,153".

58

Vijeo

Vij...

Designer

Project

Var...

Too...

June 2003

Creating a project

Create a title in the screen

Here, we will create the following title: "Water level meter". The following table describes the procedure to follow to create text:
Step 1 Action Click inside the graphic screen, and select the "Text" icon in the toolbar to draw an area on the screen where the text will be placed.
Graphical Editor

When the "Text Editor" window is displayed:

l Input "Water level meter" l Select "Vijeo Sans Serif" as the font l Select "16" as the font size l Click OK Text Editor Language: Font: Font Style: 1: Language1 Vijeo Sans Serif Normal Font Width: 16 Font Height: 16

Water level meter

OK

Cancel

In the Inspector window, enter: l The text color = "pink (255,153,255)" l The BackColor = "transparent" l The LineColor = "transparent"

Creating a tank

June 2003

59

Creating a project

Illustration

The graphic below represents the object to create. Water level meter

Next

The following table describes the procedure to follow to create a tank:

Step 1 Action Click the "Rectangle" drawing icon, then draw two rectangles as shown below:

2 3

For each rectangle, change the fore color to "pale green (153.153.102)" and the line color to transparent. Click the "Ellipse" drawing icon, then draw three ellipses as shown below: Ellipse 1

Ellipse 2 Ellipse 3 4
l Ellipse 1: Change the fore color to "grey (153.153.153)" and the line color to

transparent.
l Ellipses 2 and 3: Change the fore color to "pale green (153.153.102)" and the

line color to transparent. 5 Click the "Rectangle" drawing icon, then draw a rectangle at the center of the large rectangle:

New Rectangle

60

June 2003

Creating a project

Step 6 7

Action Change the previously created rectangle's fore color to "white" (255.255.255) and the line color to "white" (255.255.255). Double-click the previously drawn rectangle or click the
...

icon to the right of

"Animation" in the "Inspector" window in order to open the "Animation Properties" window, and then click the "Fill" tab:
Animation Properties Color Fill Size Position Rotate Touch Visib.

Enable Vertical Fill Animation _seconds Start Point: Top Value Range From: To: 0 59 Display Range Min %: Max %: 0 100

Enable Horizontal Fill Animation

Back Area Color:

Start Point: Left

Value Range From: To: 0 100

Display Range Min %: Max %: 0 100

OK

Cancel

Apply

l Check the "Enable Vertical Fill Animation" check box. l Click the
l l

icon and select the "_seconds" variable.

l Configure the following fields:

Set "Start point" to "Top". Set "Back Area Color" to 0,0,255. l Set "Value Range" from 0 to 59. Note: "_seconds" is a system variable. It is reserved for use by Vijeo Designer only. 8 Click the drawing icon, then draw a graduated scale:

Graduated scale

June 2003

61

Creating a project

Step 9 10 11

Action Select "255,0,0" as the line color. Click inside the graphic screen, and select the "Text" icon in the toolbar to draw an area on the screen where the text will be placed. When the "Text Editor" window is displayed:
Text Editor Language: Font: Font Style: 1: Language1 Vijeo Gothic Normal Font Width: 16 Font Height: 16

OK

Cancel

l Enter "#" l Select "1: Language1" as the language l Select "Vijeo Gothic" as the font l Select "16" as the font size l Select "Normal" as the font style

12

In the "Inspector" window, change the text color properties to "255,255,255" and the back area color and line color to "255,102,0".

62

June 2003

Creating a project

Step 13

Action Double-click the previously created "#" text or click the

...

icon to the right of

"Animation" in the "Inspector" window in order to open the "Animation Properties" window, and then click the "Value" tab:
Animation Properties Color Position
12

Value

Visib. Data Type: Integer

Enable Value Animation _Seconds

Display Digits: Zero Suppress Keypad/Keyboard Input Display Popup Keypad Interlock Input Status Variable Group No.: Unassigned Order No. 0 Format: Dec.

Beep on Touch
Cancel

OK

Apply

l Check the "Enable Value Animation" check box. l Click the l Click OK.

icon and then select the "_Seconds" variable.

l In the "Display Digits" field, enter "2.0".

Creating a conduit

June 2003

63

Creating a project

Illustration

The graphic below represents the object to draw. Water level meter
#

Next

The following table describes the procedure to follow to create a conduit:

Step 1 Action Click the "Rectangle" drawing icon and then draw the following two rectangles:

2 3

Change the line color to "transparent" and the fore color to "grey" (153,153,153). Click the "Polygon" drawing icon object: G and then draw the following the following

D Procedure: l Click point A. l Click point B. Repeat the operation until point G. l Right-click. 4 Change the line color to "white" (255,255,255) and the fore color to blue (0,0,255).

64

June 2003

Creating a project

Step 5 6 7

Action Click the "Selection" icon and then select the arrow created in step 4. In the main menu bar, select "Edit" then "Copy" and "Paste". Select this arrow and choose "Rotate Right" in "Arrange" on the main menu bar. The arrow should have rotated clockwise so that the arrow is pointing to the left:
Designer Vijeo

Manual_V41 - Vijeo-Frame - [Target1 - Tank]

File Edit Build Arrange Search View Draw

Designer Vijeo

Bring to Front Send to Back Group Ungroup

Designer Vijeo

Align Manual_V41 Rotate Left Target1 Rotate Right Flip Horizontal Graphical Panels Flip Vertical 1: Panel Application Scripts Alarms Popup Windows Languages Data Files IO Manager

Repeat step 6. Select this arrow and choose "Rotate Left" in "Arrange" on the main menu bar. The arrow should have rotated anti-clockwise so that the arrow is pointing to the right: Duplicate (using "Copy/Paste") two more arrows pointing to the left and to the right. Place the seven arrows created in steps 3 to 9 in the rectangles as shown in the figure below:

9 10

Note: You can increase or reduce the size of the arrows or rectangles if necessary.

Vijeo

Vij...

Designer

Project

Var...

Too...

June 2003

65

Creating a project

Step 11

Action Select all the arrows. Select "Group" in "Arrange" on the main menu bar to create a group object.
Designer Vijeo

Manual_V41 - Vijeo-Frame - [Target1 - Tank]

File Edit Build Arrange Search View Draw

Designer Vijeo

Bring to Front Send to Back Group Ungroup Align

Designer Vijeo

Manual_V41 Target1

Rotate Left Rotate Right Flip Panels Graphical Horizontal Flip Vertical 1: Panel

Application Scripts Alarms Popup Windows Languages Data Files IO Manager

Note: To select several objects at once, press and hold down the "Shift" key and select the objects at the same time.

66

Vijeo

Vij...

Designer

Project

Var...

Too...

June 2003

Creating a project

Step 12

Action Double-click the previously created arrow group or click the

...

icon to the

right of "Animation" in the "Inspector" window in order to open the "Animation Properties" window, and then click the "Visib." tab. Set the following configuration:
Animation Properties Color Size Position Rotate Touch Visib. Smart Part

Enable Visibility Animation

Enable Blink Animation _Seconds Speed: Slow

OK

Cancel

Apply

June 2003

67

Creating a project

Creating a navigation button

Illustration The graphic below represents the object to create. The "Next" button will be used to move from the "Water level meter" screen to the "Water level data chart" screen: Water level meter
#

Next

Procedure

The following table presents the procedure to follow to create the navigation button:
Step 1 2 3 4 5 6 7 Action Click "1:Configuration" in the navigator in order to open the "Water level setting" screen. Click the "Select" drawing icon and select the button "SwSp0_0005_01" (See Creating navigation buttons, p. 45). In the main menu bar's "Edit" menu, select the "Copy" command. Click "2:Tank" in the navigator in order to open the above screen. Click the drawing and, from the main menu's "Edit" menu, select the "Paste" command. Select the "SwSp0_0005_01" button. Input "3" in the property "ID" (See Creating navigation buttons, p. 45).

68

June 2003

Creating a project

2.4
At a Glance
Purpose of this subchapter What's in this Section?

Creating the "Water level data chart" screen

This subchapter describes the procedure to follow to create the third "Water level data chart" screen page. This section contains the following topics:
Topic Creating the "Water level data chart" screen Creating a chart Creating a navigation button Creating a script Page 70 72 75 76

June 2003

69

Creating a project

Creating the "Water level data chart" screen

Illustration The graphic below shows the screen to create: Water level data chart (History)
100 90 80 70 60 50 40 30 20 10 0

Back

Create a new screen

The following table describes the procedure to follow to create a new screen:
Step 1 2 3 4 5 Action Click the "Project" tab in the "Navigator" window. Repeat step 1 (See Procedure, p. 58) of the "Water level meter" chapter to create a new panel. Right-click "Graphical Panel" and select "New panel". Rename "3:Panel3" as "3:Chart". Click "3:Chart" to open the graphical screen window. In the "Inspector" window, change the back area color by inputting "green (153,255,0)".

70

June 2003

Creating a project

Create a title in the screen

As specified above, the title of this screen is: "Water level data chart (History)". The following table describes the procedure to follow to create the title:
Step 1 Action Select the "Text" icon in the toolbar and draw an area on the screen where the text will be placed.
Graphical Editor

When the "Text Editor" window is displayed:

l Type "Water level data chart (History)" l Select "Vijeo Sans Serif" as the font l Select "16" as the font size l Click OK Text Editor Language: Font: Font Style: 1: Language1 Vijeo Sans Serif Normal Font Width: 16 Font Height: 16

Water level data chart (History)

OK

Cancel

In the Inspector window, enter: l The text color = "orange (255,153,0)" l The BackColor = "transparent" l The LineColor = "transparent"

June 2003

71

Creating a project

Creating a chart

72

June 2003

Creating a project

Procedure

You are going to create a chart that will display the water level changes in the tank. The following table describes the procedure to follow to create a chart:
Step 1 2 Action Click the "Chart" icon and then draw a chart on the 3:Chart screen.

In the "Inspector" window, configure the following settings:

l "PlateColor" as sky blue (102,255,255). l "BorderColor" as green (0,153,0). l Click "+" to the left of "DataAxisLabel" and configure the TextColor as

"orange (255,102,0)".
l Click "+" to the left of "Channel1" and define the "sec" variable. Inspector
TrendGraph Width Height Description PlateColor BorderColor GraphSettings RangeSettings ValueRange... ValueRangeTo... DisplayRangeMin DisplayRangeMax DataAxisLabel TextColor FontHeight FontWidth Decimals Spacing DataAxisScale DataAxisGridLine TimeAxisScale TimeAxisGridLine Channel1 Variable DisplayFormat Color Track Mark OutOfRangeColor Disabled Disabled Disabled 16 8 0 1 Enabled Enabled Enabled Enabled Enabled Sec Line 0 100 0 100 Enabled (255,102,0) 300 240 (102,255,255) (0,153,0)

June 2003

73

Creating a project

Step 3

Action Click the "Variables" tab in the "Inspector" window. Select the "sec" variable and set the "RecordRate [sec]" field to "1".

Variable List: Sort By Target Name, Filter Target1

INT INT INT

alarm sec value

Vijeo

Vij...

Designer

Pro...

Variables

Too..

Inspector
Variable Name Description ArrayDimension DataType Source KeepHistory NumberOfDays RecordRate [sec] DataDetails Alarm Disabled 0 Integer Internal Enabled 1 1 sec

74

June 2003

Creating a project

Creating a navigation button

Procedure You are going to create a "Back" button to exit from the "Water level data chart (History)" screen to the "Water level setting" screen:
Step 1 2 3 4 5 6 7 8 Action Click "1:Configuration" in the navigator to open the first screen (See Creating the "Water level setting" screen, p. 37). Click the "Select" drawing icon and select the button "SwSp0_0005_01" (See Creating navigation buttons, p. 45). In the main menu bar's "Edit" menu, select the "Copy" command. Click "3:Chart" in the navigator to open the third screen (See Creating the "Water level data chart" screen, p. 70). Click the drawing and, from the main menu's "Edit" menu, select the "Paste" command. Select the "SwSp0_0005_01" button. Input "1" in the property "ID" (See Creating navigation buttons, p. 45) field. In the "Inspector" window, click the
...

icon to the right of "Label" to open the

"Text Editor" dialog box and configure each field as shown below:
Text Editor Language: Font: Font Style: Language1 Vijeo Sans Serif Normal Font Width: 8 Font Height: 16

Back

OK

Cancel

June 2003

75

Creating a project

Creating a script
At a Glance In Vijeo Designer, a script can be used to automate some of a communication program's tasks. You can use a script to define a procedure that runs when a condition is met. You can then add a function that is not available in a drawing's properties.

76

June 2003

Creating a project

Create the "Over_100" script

The following script is run when a predefined value is input in screen 1. If that value is over 100, the alarm array is displayed (See Creating an alarm display popup window, p. 49). The following table describes the procedure to follow to create the "Over_100" script:
Step 1 Action Click the "Project" tab in the "Navigator" window, then right-click "1:Configuration" and select "New script":
Designer Vijeo

Manual_V41 - Vijeo-Frame - [Target1 - Configuration]

File Edit Build Arrange Search View

Designer Vijeo

Designer Vijeo

Manual_V41 Target1 Graphical Panels 1: Panel1 Open In New Window Rename Panel Report... Application Scripts Cut Panel AlarmsCopy Panel Popup Delete Panel... Windows New Script Paste Script Languages Properties Data Files IO Manager
Vijeo Designer

Ctrl+T Ctrl+X Ctrl+C Delete Insert Ctrl+V Alt+Enter

Vijeo...

Project

Var...

Tool...

In the "Inspector" window's enter:

Inspector
Panel Script Name Trigger Trigger Variable Trigger Condition Over_100 Conditional value On Data Change

l "Conditional" in the "Trigger" field. l "value" in the "Trigger Variable" field. l "On Data Change" in the "Trigger Condition" field. l Rename "Script 1" as "Over_100".

June 2003

77

Creating a project

Step 3

Action Click "Over_100" to open the script editor window and input the following program: int a; a = value.getIntValue(); if (a>100){ alarm.write(1); AlarmWindow.open((short)10,(short)400); AlarmWindow.changePanel(10001); AlarmWindow.show(true); } else { alarm.write(0); } Note: When the value of the "value" variable is over 100, the bit corresponding to the "alarm" variable becomes TRUE and the "Alarm display" (See Creating an alarm display popup window, p. 49) screen is displayed. If the "value" variable's value is less than or equal to 100, the bit corresponding to the variable is FALSE.

78

June 2003

Creating a project

Create the "Refresh_per_se c" script

The following table presents the procedure to follow to create the "Refresh_per_sec" script.
Step 1 Action Repeat step 1 of the "Create the Over_100 script" procedure. Click the "Project" tab in the "Navigator" window, then right-click "3:Chart" and select "New script": Select "Periodic" in the "Trigger" field and "1000" as the "Frequency":
Inspector
Panel Script Name Trigger Frequency [msec] Refresh_per_sec Periodic 1 000

3 4

Rename "Script 2" as "Refresh_per_sec". Click "Refresh_per_sec" to open the script editor window and type the following program: sec.write(_Seconds.getIntValue()); Note: The value of the "_Seconds" system variable is assigned to the "sec" variable. Save your project.

June 2003

79

Creating a project

80

June 2003

Project Download

3
At a Glance
Purpose of this chapter What's in this Chapter? This chapter describes the different project build types and the various Project download modes. This chapter contains the following topics:
Topic Validation / Building / Correcting errors Simulating Download function and exiting a project Page 82 84 85

June 2003

81

Project Download

Validation / Building / Correcting errors

Data transfer types You must use one of the following methods to transfer a customer application to a terminal (or perform a local simulation):
Type Ethernet Tool port CompactFlash card Procedure The application produced by the built project* is transferred to products equipped with an Ethernet connector via the network. The data produced by the built project* is transferred to the product connected to the PC by the special cable XBTZ-G915. The data produced by the built project* (on a PC requiring a PCMCIA card reader) is transferred by copying to a CompactFlash card; it can then be plugged in the terminals.

Local simulation The data produced by the built project* are stored locally for simulating the customer application during its fine-tuning phase.

* Data created using the "Build" function. Validating the target The project is validated using the main menu's "Build" command and then selecting "Validate all".

Building the target

"Building" consists in building a program that can be run directly by the XBT-G from the project created with the Vijeo Designer graphical editor. You should clean each target and/or project before you build. Using the main menu's "Build" command and then selecting "Clean All". The clean command removes unnecessary files from the project folder. The target is built using the main menu's "Build" command and then selecting "Build All". Vijeo Designer can build a program in the following four ways:
Type Build Quick Build Start simulation Download Procedure Rebuilds the project completely and refreshes the results file. Although creation is quicker than when using the "Build" function. Only builds the data updated since the previous version was built, and refreshes the results file. Rebuilds the project completely and refreshes the results file. After the build the simulation starts. Before download, the target is validated and built. If no errors are detected, the user application files are transferred to the target machine.

82

June 2003

Project Download

Error correction

The system displays "Errors" and "Warnings" on the "Feedback zone" in the four cases in the table above. In the four cases the "Feedback zone" window is automatically openned and "Errors" and "Warnings" are displayed inside. The "Errors" are displayed in red and "Warnings" are displayed in yellow. When there are no errors or warnings, the result is displayed in green. Double-click the error or "warning" in the "Feedback zone", Vijeo Designer is located where the error is situated.

June 2003

83

Project Download

Simulating
Simulate your project Start Simulation The simulation function can be used to simulate your project on the PC, i.e. to display your work without downloading it to an XBT-G terminal. The following table describes the procedure to follow to start the simulation:
Step 1 2 3 4 Action Click the "Project" tab in the "Navigator" window. Right-click "Target 1". Select "Start Simulation (Build)" to begin the simulation. A build is done, then the main screen appears. To stop the simulation, press the "Ctrl" and "Z" keys simultaneously or "Alt" and "F4" keys simultaneously.

84

June 2003

Project Download

Download function and exiting a project

The Download function The Download function is used to load an application in a target. A several types can be used: l Ethernet: the download to the target is done via Ethernet. l File System: the load is done on a CF card. l Serial: load to a target directly connected to Vijeo Designer by the serial port. On the "Inspector" window you can choose the type of download on the Target component of the project.

June 2003

85

Project Download

Download procedure

The following table presents the procedure to download an application in a target (XBT-G):
Step 1 Action In fonction of XBT-G type connect the download cable on the XBT-G tool connector or ethernet cable connector and on the computer port com (COM1 or Ethernet). XBT-G2110/2120/2220/4320: only tool connector (serial) Other XBT-G you can choose Ethernet or tool connector. Click the "Project" tab in the "Navigator" window and click on "Target1". In the "Inspector" window, select Ethernet or Serial on the "Download" field.
Inspector
Target Name Description Type TargetColor PanelSize InitialPanelID Buzzer StartUpDelay [sec] ToConfiguration Download XBT-G Series 256 Colors XBT-G4330 (640x480) 1 : Panel1 Enabled 0 Top Left Corner Ethernet Ethernet File System Serialcal Target1

2 3

If you select Ethernet, enter parameters

l IPAddress l SubnetMask l DefaultGateway

If you select Serial, enter parameters

l COM Port l Baud Rate

5 6

In the "Navigator" click on "Target1" then click right to select "Download". Check on XBT-G if the application is displayed correctly. Note: If an error message appears in the "Feedback zone", this means that the download has failed. Retry the download once you have solved the problem. If you double-click an error displayed in the "Feedback zone", the error's position is indicated.

86

June 2003

Project Download

Exit Vijeo Designer

To exit Vijeo Designer, select "Exit" from the main menu bar's "File" menu and choose to save the project.

June 2003

87

Project Download

88

June 2003

Index

B C
Graphic screen, 37 Graphical panel, 11 Graphical screen, 57, 59, 63

A
Animation, 59, 63

B
Blinking lamp, 41 Building, 82 Button, 45, 68

H
HMI, 10

I C
Conduit, 63 Configuration, 29 Connection, 11 Create a graphic, 70 Installation, 17

L
Level indicator, 59

D
Data transfer, 82 Download, 85

M
Multi-language, 11

R E
Editing variables, 11 Ethernet, 82 Removal, 20 Report, 11 Reusing the data, 11

G
Generation, 82 Graduated scale, 59 Graphic, 70
June 2003

S
Script, 76 Scripts, 11 Simulation, 84 Starting Vijeo Designer, 28, 30
89

Index

T
Tank, 59 Target devices, 12

V
Variables, 32, 63

90

June 2003