3

5
0
0
7
0
3
5
Vijeo-Designer
Tutorial

eng

2
3
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 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
Uninstalling Vijeo Designer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
Chapter 2 Creating a project . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
At a Glance . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
2.1 Specifications . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
At a Glance . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
The Application at a Glance . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
Starting Vijeo Designer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
Basic settings . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
Creating variables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
2.2 Creating the "Water level settings" screen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
At a Glance . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
Creating the "Water level setting" screen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34
Creating lamps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
Creating navigation buttons. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43
Creating an alarm display popup window . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46
2.3 Creating the "Water level meter" screen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53
At a Glance . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53
Creating the "Water level meter" screen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54
Creating a tank . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57
Creating a conduit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62
Creating a navigation button . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66
2.4 Creating the "Water level data chart" screen . . . . . . . . . . . . . . . . . . . . . . . . . . . 67
At a Glance . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67
Creating the "Water level data chart" screen . . . . . . . . . . . . . . . . . . . . . . . . . . . 71
4
Creating a chart . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68
Creating a navigation button . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73
Creating a script. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74
Chapter 3 Project Download. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79
At a Glance . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79
Validation / Building / Correcting errors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80
Simulation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82
Downloading data and exiting a project . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83
Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87
September 2003 5
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 feature description, refer to Vijeo Designer's online help.
Related
Documents
User Comments We welcome your comments about this document. You can reach us by e-mail at
TECHCOMM@modicon.com
About the Book
6 September 2003
September 2003 7
I
Vijeo Designer at a Glance
At a Glance
Purpose of this
section
This section presents the main functions of the software together with its installation.
What's in this
Part?
This part contains the following chapters:
Chapter Chapter Name Page
1 General 9
2 Creating a project 21
3 Project Download 79
Vijeo Designer at a Glance
8 September 2003
September 2003 9
1
General
At a Glance
Purpose of this
chapter
This chapter describes the Vijeo Designer software application.
What's in this
Chapter?
This chapter contains the following topics:
Topic Page
Overview 10
Vijeo Designer's main tools 13
Installing Vijeo Designer 16
Uninstalling Vijeo Designer 19
General
10 September 2003
Overview
About Vijeo
Designer
Vijeo Designer is a state-of-the-art software application that allows you to create
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.
Required
configuration
The table below presents the configuration required to use Vijeo Designer:
Elements Characteristics
Processor Pentium II 400 MHz or higher
Memory 128 MB of RAM
Operating
system
Windows 2000 (Service Pack 2)
Windows XP
Web browser Internet Explorer 5.0 or higher
General
September 2003 11
Main features l Re-use 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 standardizing screens when co-developing, for example.
l Connect to multiple PLCs:
Vijeo Designer can be used to simultaneously communicate with a number of
Schneider PLCs.
l Create 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.
l Use 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.
l 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.
l 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.
l Edit 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.
General
12 September 2003
Target Terminal
Models
The list below represents the different units 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.
General
September 2003 13
Vijeo Designer's main tools
At a Glance Vijeo Designer's main tool windows are located on the program's main screen. 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 located in the toolbar.
General
14 September 2003
The Vijeo Designer environment looks like this:
Manual_V41 - Vijeo-Frame - [InfoViewer]
Graphical Panel
Name Panel1
PanelID 1
Description
Width
Height
(128,255
800
BackgroundColor
600
Lamps\2-states
LampO_000... LampO_000...
LampO_000...
Label
LampO_000...
LampO_000... LampO_000...
Designer
V
ije
o
Designer
V
ije
o
Manual_V41
Designer
V
ije
o
Application Scripts
Alarms
Target1
Popup Windows
Languages
IO Manager
Graphical Panels
Too.. Vij... Var...
Designer
V
ije
oProject
1: Configuratio
? ?
2: Tank
3 : Chart
Text01
A
Text02
A
Text04
A
Text05
A
LampO_0015_01
SwSpO_0005_01
SwSpO_0003_01
SwSpO_0003_02
Rectangle01
2
3
4
5
6
7
8
9
1
2
36
8
45
56
9
8
Object Name Order Position
Objects
Romizing
Calling romizer
Romizer successful
Total size of HMI Runtime files is 813 KB.
(832,540 bytes).
Downloading
Downloading Target1...
Build
Download Complete - 0 error(s), 2 warning(s)
Designer
V
i
j
e
o
Icons for the working windows
Tools File Edit Build Search View Draw Arrange
1
3 2
4 5
6
Help Window
Data Files
General
September 2003 15
Icons associated
with the working
windows
The following table presents the different working windows:
Number Screen/Icon
name
Description
1 Navigator This tool is mainly used to create applications. The
information on each project is listed hierarchically as in a
document explorer.
2 View Info Displays the online help or report contents.
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.
4 Data list 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 a list of the
objects that make up the group by clicking +. Each object can
be selected separately.
5 Feedback Zone 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 view the error location, double-click
the message.
6 Toolchest A library of components (bar chart, timers, etc.) provided by
the manufacturer or previously made by you. 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.
? ?
General
16 September 2003
Installing Vijeo Designer
At a Glance This product is available on a CD-ROM. The CD-ROM contains the installation of
Vijeo Designer.
Prior to installing the application, be aware of the following points:
l Before installing an application, be sure to close all other active applications.
l If you are reinstalling the software, be sure to 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 Prior to starting up Vijeo Designer for the first time, read the "Readme.txt" text
file. This file can be accessed from the "Start \ Programs \ Schneider Electric \
Vijeo-Designer" menu.
General
September 2003 17
Installation
procedure
Description of the installation steps:
Step Action
1 Insert the CD-ROM in the computer's CD drive. (1)
2 Select Vijeo-Designer.
3 Select the installation language and click "OK".
4 Click "Next".
5 You must enter the requested information in order to personalize the software:
l User name
l Company name
l Serial number

Click "Next".
Cancel Next > <Back
Enter the information.
Client 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
General
18 September 2003
(1) Vijeo Designer's "Autorun" program will automatically start the installation
program. If the installation does not begin automatically, click "Start \ Run" and then
enter "x:\SETUP.EXE" in the "Open" box and click OK (x represents your CD-ROM's
drive letter).
6 Enter the software activation key.
Click "Next".
7 If you accept the terms of the license agreement, click "Yes".
8 Choose the installation folder (by default, this folder is "c:\Program
Files\Schneider Electric"). Click "Next".
9 Select Program Folder. Click "Next".
10 Select "Yes" to create a shortcut icon on desktop.
11 InstallShield will now install Vijeo Designer or one of its components.
Click "Finish" when the installation is complete.
Note: At the end of the installation process, if the program ask to restart your
computer, you must do it and so, all newly installed components are updated in the
system. You mustnt restart the computer if the program dont ask to do.
Step Action
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.
InstallShield
KEY
Cancel Next > <Back
General
September 2003 19
Uninstalling Vijeo Designer
Uninstall
procedure
The procedure for uninstalling Vijeo Designer is as follows:
l Use the "Add/Remove Programs" (Start \ Settings \ Control Panel menu), select
Vijeo Designer and then select "Remove".
l Alternatively, you can select the Start \ Programs \ Schneider Electric \ Vijeo
Designer \ Uninstall menu.
At the end of the uninstall process, you must restart your computer to take account
of all the newly removed components.
Note: Before beginning to remove the software, close all other active applications.
General
20 September 2003
September 2003 21
2
Creating a project
At a Glance
Purpose of this
chapter
This chapter gives a step by step description of how to produce a simple application
using Vijeo Designer's main functions.
What's in this
Chapter?
This chapter contains the following sections:
Section Topic Page
2.1 Specifications 22
2.2 Creating the "Water level settings" screen 33
2.3 Creating the "Water level meter" screen 53
2.4 Creating the "Water level data chart" screen 67
Creating a project
22 September 2003
2.1 Specifications
At a Glance
Purpose of this
subchapter
This subchapter describes Vijeo Designer's general features as well as the steps to
create a sample project.
What's in this
Section?
This section contains the following topics:
Topic Page
The Application at a Glance 23
Starting Vijeo Designer 27
Basic settings 27
Creating variables 30
Creating a project
September 2003 23
The Application at a Glance
At a Glance The project you are going to create is named "Manual_v41".
It consists of 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 animated items, a numerical value input field, a chart and an
alarm.
The project, called "Manual_V41", can be found at c:\Program Files\Schneider
Electric\Docs\samples.
Viewing the
project
Use the following steps to view the project:
Step Action
1 Click on the "Vijeo Manager" tab.
2 Double-click the project to open it.
3 Right-click "Target 1" and select "Start Simulation (Build)".
Creating a project
24 September 2003
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. 34)" screen.
Perform the following steps in the order given.
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. 46),
l A red lamp blinks (See Creating lamps, p. 39),
l An error message blinks (See Creating an alarm message, p. 41).
Number Description
1 Click in this area to display the numeric keypad.
2 Numeric Keypad: enter a value and press "Enter" to validate the input.
3 Navigation button for accessing the "Water level meter" screen.
Water level setting
Water level
Setting value
Next
0
Water level setting
Water level
Setting value
Next
123
Esc - - - - B6
7 8 9 + / -
4 5 6 Del
1 2 3
0 . Enter
1 2
3
Creating a project
September 2003 25
The following diagram presents the settings screen with the warnings.
The following table presents numbers description.
Number Description
1 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.
2 The lamp lights up.
3 Alarm array.
Water level setting
Water level
Setting value
Next
123
Alarm setting
03/01/08 19:04:20 The value of this setting
Close
1
2
3
Creating a project
26 September 2003
Graphic
representations
Water level changes can also be shown graphically.
"Water Level Meter (See Creating the "Water level meter" screen, p. 54)" screen
display:
"Water Level Data Chart (See Creating the "Water level data chart" screen, p. 71)"
screen display:
The following table presents numbers description.
Number Description
1 Graph representing the tank water level.
2 Navigation button for returning to the "Water level setting" screen.
Water level meter
Next
9
Water level data chart
Back
(History)
100
90
80
70
60
50
40
30
20
10
0
2 1
Creating a project
September 2003 27
Starting Vijeo Designer
Procedure To start Vijeo Designer, select Start \ Programs \ Vijeo Designer or double-click
the Vijeo Designer icon on the desktop.
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.
Creating a project
28 September 2003
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 Action
1 This dialog box appears when Vijeo Designer is started. Click "Next" to continue.
Note: If the above dialog box does not appear when you start Vijeo Designer,
select the Navigator's "Vijeo-Manager" tab, then right-click "Vijeo-Manager" and
select "New project".
Don't show this dialog box again
Create new project
Open Last project
Finish < Back Next > Cancel
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.
Vijeo-Designer
Creating a project
September 2003 29
2 l Enter the name of your project and click OK (in our case, enter "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.
Note: To add another "Target" to the project, right-click "my project" then select
"New project".
3 Save your project.
Step Action
Manual_V41
Graphical Panels
Designer
V
ije
o
Too.. Vij...
Application Scripts
Alarms
Target1
Popup Window
Languages
IO Manager
Var...
Designer
V
ije
o
Project..
Data Files
Creating a project
30 September 2003
Creating variables
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, since we will not be communicating with any PLCs, we will create only
internal variables.
The following table describes the procedure to follow for creating variables:
Step Action
1 Click the "Variables" tab in the "Navigator" window, then click right to select "New
variable" and "Discrete".
Variable List: Sort By Target Name, Filter
Toolchest Vije.
Target1
Variables
Designer
V
ije
o
Project
Paste
Import Variables
Export Variables
Properties...
Ctrl+V
New Variable
Integer
Float
String Ctrl+E
Discrete
Ctrl+I
Alt+Enter
Structure
Creating a project
September 2003 31
2 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.
3 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.
Step Action
Too... Vij... Var...
Designer
V
ije
o
Pro...
Variable List: Sort By Target Name, Filter
Target1
alarm
INT
- Variable
Name Alarm
Description
ArrayDimension 0
DataType Discrete
Source Internal
+ DataDetails
+ Alarm Enabled
+ KeepHistory Disabled
INT
INT
Too... Vij... Var...
Designer
V
ije
oPro..
Variable List: Sort By Target Name, Filter
Target1
alarm
INT
sec
value
Creating a project
32 September 2003
4 In KeepHistorys parameter select "Disabled" for the "alarm" and "value" variable
and select Enabled for the "sec" variable .
5 Save your project.
Step Action
- Variable
Name alarm
Description
ArrayDimension 0
DataType Discrete
Source Internal
+ DataDetails
+ Alarm
+ KeepHistory Disabled
Enabled
Creating a project
September 2003 33
2.2 Creating the "Water level settings" screen
At a Glance
Purpose of this
subchapter
This subchapter describes how to create the first water level settings screen.
What's in this
Section?
This section contains the following topics:
Topic Page
Creating the "Water level setting" screen 34
Creating lamps 39
Creating navigation buttons 43
Creating an alarm display popup window 46
Creating a project
34 September 2003
Creating the "Water level setting" screen
Illustration The screen we will create looks like the following illustration.
Procedure The following table describes the procedure to follow to create the first screen:
Water level setting
Water level
Setting value
Next
123
Esc - - - - B6
7 8 9 + / -
4 5 6 Del
1 2 3
0 . Enter
Step Action
1 Click the "Project" tab in the "Navigator" window and click on "Target1".
2 Double-click "Graphical Panels" to open the folder.
3 Rename "1:Panel1" as "1:Configuration" then double click on it to open the
graphic screen window.

4 In the "Inspector" window, select blue (153,255,255) on Backgroundcolor
parameter.
Manual_V41
Designer
V
ije
o
Application Scripts
Alarms
Target1
Popup Window
Languages
IO Manager
Graphical Panels
1: Configuration
Data Files
Creating a project
September 2003 35
Create a title in
the screen
The title of this screen is: "Water level setting".
The following table describes the procedure to follow to create text:
Step Action
1 Click inside the graphic screen, and select the "Text" icon in the toolbar.
2 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.
3 When the "Text Editor" window appears:
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

4 In the Inspector window, enter:
l The text color = "blue(102,102,255)"
l The BackColor = "transparent"
l The LineColor = "transparent"
Graphical Editor
Text Editor
Cancel OK
Water level setting
Vijeo Sans Serif
1: Language1
Normal
Language:
Font:
Font Style:
16 Font Width:
16 Font Height:
Creating a project
36 September 2003
Create a
numerical
indicator
The "#" text is used to enter numerical data, while the "Water level setting" text is
used as the title.
The following table describes the procedure to follow to create the "#" text:
Note:
Only use the "#" text to configure data in the animation.
Do not press the "Enter" key after the "#" character. Doing so will invalidate the
data animation settings.
Step Action
1 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. 35), and configure the text properties as shown
in the following screen:
2 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"
Text Editor
Cancel OK
#
Vijeo Gothic
1: Language1
Normal
Language:
Font:
Font Style:
32 Font Width:
32 Font Height:
Creating a project
September 2003 37
3
Click the icon to the right of "Animation" to open the "Animation Properties"
window:
4 In the "Animation Properties" dialog box, click the "Value" tab and check:
l "Enable Value Animation"
l "Keypad/Keyboard Input"
l "Display Popup Keypad"
l "Zero Suppress"
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
Step Action
...
Animation Properties
Value
Enable Value Animation
Cancel OK Apply
Color Value Position Visib. 12
Dec. Format:
Integer Data Type:
3 Display Digits: 0
Keypad/Keyboard Input
Zero Suppress
Display Popup Keypad
Interlock
Input Status Variable
Group No.: Unassigned Order No.
Beep on Touch
0
Creating a project
38 September 2003
5 Next, create the "Water level, Setting value" text.
Repeat steps 1 and 2 above with the following configuration:
l Enter "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

6 In the "Inspector" window, enter:
l "blue (0,0,255)" for the TextColor
l Set:
l The BackColor to "transparent"
l The LineColor to "transparent"
7 Click OK
Note: You can access and modify an object's settings in the "Inspector" window.
Step Action
Text Editor
Cancel OK
Water level
Setting value
Vijeo Gothic
1: Language1
Normal
Language:
Font:
Font Style:
16 Font Width:
16 Font Height:
Creating a project
September 2003 39
Creating lamps
At a Glance "Animated symbols" are used to create lamps that light up when an error is
detected.
The following table describes the procedure to follow to create lamps:
Step Action
1 Click the "Toolchest" tab in the navigator, then click the "Lamps" folder and then
"2 States".
Water level setting
Water level
Setting value
123
Alarm setting
Toolchest
Toolchest Vij...
BarGraph
Var...
Designer
V
ije
oPro...
DateDisplay
HistoricalTrend
Lamps
Meter
Switches
CircleGraph
DataGraph
Keypad
Blank
SpecialKeys
NumericDisplay
PieGraph
SEI toolchest
2 Sates
4 States
Special
Creating a project
40 September 2003
2 Drag & drop "Lamp2St0_0015_01" onto the panel.
3
In the "Inspector" window, click the icon to the right of "Variable" and select
the "alarm" variable:
Step Action
Lamps\2-state
Label
LampO_000...
LampO_001...
LampO_000... LampO_000...
LampO_000... LampO_000...
Label
LampO_000...
LampO_000... LampO_000... LampO_000...
LampO_001... LampO_001...
LampO_0013_... LampO_0014_... Lamp2StO_001
5_01
...
Inspector
Smart Part
Name Lamp2StO_0015_01
Description 2-state lamps 0015 V4.0
Top 120
Left
Width 40
alarm
ForeColor(OFF) (0,255,0)
40
ForeColor(ON) (255,0,0)
240
Height
Blink FALSE
1 : SOLID
BackColor (0,0,0)
FrameColor (102,102,102)
RestoreDefaults
Variable
Pattern
_Minutes
_Months
_Seconds
_SystemLanguage
_UserApplicationLanguage
_Year2
_Year4
Value
alarm
alarm
Select an item
Creating a project
September 2003 41
Creating an
alarm message
You will now create text that blinks when the user enters an incorrect value or an
error is detected.
The following table describes the procedure to follow to create an error message
that blinks:
Step Action
1 Create the "Alarm setting" text.
Repeat steps 1 and 2 (See Create a title in the screen, p. 35) using the following
settings:
2 In the "Inspector" window, enter:
l "red (255,0,0)" for the TextColor
l Set:
l The BackColor to "transparent"
l The LineColor to "transparent"
Text Editor
Cancel OK
Alarm setting
Vijeo Gothic
1: Language1
Normal
Language:
Font:
Font Style:
16 Font Width:
16 Font Height:
Creating a project
42 September 2003
3
Double-click the previously created text or click the icon to the right of
"Animation" in "Inspector".
The "Animation properties" dialog box is displayed:
4 Click the "Visib." tab.
l Check the "Enable Visibility Animation" and "Enable Blink Animation"
check boxes.
l Click the icon and select the "alarm" variable.
l Click OK.
Step Action
...
Animation Properties
Enable Visibility Animation
Slow
Speed:
alarm
Enable Blink Animation
Cancel OK Apply
Color Value
alarm
Position Visib.
Creating a project
September 2003 43
Creating navigation buttons
At a Glance We will use the "Smart Part" to create buttons for navigating between the "Water
level setting" and "Water level meter" screens.
The following table describes the procedure to follow to create buttons:
Step Action
1 Click the "Toolchest" tab in the navigator and then click the "Special function
switches" folder.
Water level setting
Water level
Setting value
Next
0
Toolchest
Toolchest Vij...
BarGraph
Var...
Designer
V
ije
o
Pro...
DateDisplay
HistoricalTrend
Lamps
Meter
Switches
Special function switches
Bit switches
Word switches
CircleGraph
DataGraph
Keypad
Blank
SpecialKeys
NumericDisplay
PieGraph
SEI toolchest
TankGraph
Creating a project
44 September 2003
2 Drag & drop "SwSp0_0005_01" onto the screen.
3 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:
Step Action
Switches\Special function switches
Label
SwSpO_000...
SwSpO_001...
SwSpO_000... SwSpO_000...
SwSpO_000... SwSpO_000...
Label
SwSpO_000... SwSpO_000... SwSpO_000...
SwSpO_001... SwSpO_001...
SwSpO_0005_
01
Inspector
Smart Part
Width 80
Height 40
Operation Change Panel
ID
ForeColor
FALSE Interlock
(0,255,0)
Buzzer
(0,0,255)
2
Label
Pattern 1 : SOLID
FrameColor
(0,0,0)
RestoreDefaults
(153,153,153)
Animation
TextColor
BackColor
TRUE
Creating a project
September 2003 45
4
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:
Step Action
...
Text Editor
Cancel OK
Next
Vijeo Sans Serif
Language1
Normal
Language:
Font:
Font Style:
8 Font Width:
16 Font Height:
Creating a project
46 September 2003
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 appears after the user enters an incorrect
value.
yy/mm/dd
24:00:00 XxXxXxXx
Close
24:00:00
yy/mm/dd
24:00:00 XxXxXxXx 24:00:00
yy/mm/dd
24:00:00 XxXxXxXx 24:00:00
Creating a project
September 2003 47
Create a popup
window
The following table describes the procedure to follow to create a popup window:
Step Action
1 Click the "Project" tab in the "Navigator" window and right-click "Popup
windows" in order to select "New popup window":
2 Rename "1:Window" as "1:AlarmWindow" and "10001:Panel4" as
"10001:Alarmarray".
Click "10001:Alarmarray" to open the drawing.
Manual_V41
Designer
V
ije
o
Application Scripts
Alarms
Target1
Popup Windows
Languages
IO Manager
Graphical Panels
1: Configuration
Tool... Vij... Var...
Designer
V
ije
oProject
1: Language1
2: Language2
Paste Popup Window Ctrl+V
New Popup Window
Delete All Popup Windows... Delete
Properties Alt+Enter
Insert
Data Files
Creating a project
48 September 2003
Displaying the
alarms
The following table gives the procedure to create an alarm display table:
Step Action
1
Click the "Alarm Summary" drawing icon to create the "Alarm" object.
2 In the "Inspector" window, change the following settings:
l Enter "16" in the "FontHeight" field.
l Enter "16" in the "FontWidth" field.
l Enter "(white) 255,255,255" in the "BackAreaColor" field.
l Set the "Frame" property to "Enabled".
l Enter "(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 No
(0,0,153)
(0,0,0)
Enabled
0 : SOLID
1
Enabled
1
0 : SOLID
FALSE
(0,0,0)
Frame
LineColor
LineStyle
ShowColumnTitles
BackAreaColor
LineWidth
BackAreaColor
Ruler
LineColor
LineStyle
LineWidth
BackAreaColor
(255,255,255)
(255,102,0)
FontHeight 16
FontWidth 16
Creating a project
September 2003 49
Create an alarm
message
After an error is detected, an alarm message is displayed in the "Alarm display" array
(see "Displaying the alarms" above).
The following table gives the procedure to create an alarm message:
Step Action
1 Click the "Variables" tab in the "Navigator" window in order to select the
"alarm" variable.
2 In the "Inspector" window, change the following settings:
Set "Alarm" zone to "Enabled".
3
Click the icon in the "AlarmMessage" zone.
4 In the "Alarm Message Editor" window, enter "The value of this setting
exceeds 100" in the dialog box and then click OK.
Inspector
Variable
Name alarm
Description alarm
ArrayDimension 0
DataType
Source
KeepHistory
AlarmMessage
Discrete
TriggerConditon
Enabled
Internal
DataDetails
When high
FALSE
Alarm
AlarmGroup RootAlarmGroup

Alarm Message Editor

Cancel OK
The value of this setting exceeds 100!
1: Language1 Language:
Creating a project
50 September 2003
Creating a button
to close a
window
The procedure for creating a button to close a window is described below.
Step Action
1 Click "10001:Alarmarray" to open the drawing.
2 Click the "Rectangle" drawing icon and then draw a rectangle on
"10001:Alarmarray" window.
3 Input "(yellow) 255,255,102" in the "ForeColor" property.
4
Click the icon in the "Animation" zone.
5 Click the "Touch" tab and then click "Enable Touch Animation" check box.

Animation Properties
Enable Touch Animation
Cancel OK Apply
Option
Reverse On Touch Buzzer On Touch
Bit Toggle:
Function Operation
1 Always
Condition
Insert Add
Color Fill Size Position Rotate Touch Visib.
Delete
Creating a project
September 2003 51
6 l Double click the "Operation" property to call up 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.

l In the "Animation Properties" window, click OK to close the window.
7 Click the "Text" icon and create a text object named "Close", and enter the
following settings:
Step Action
Function Setting
Open Popup Panel Close Popup Panel
Popup Panel
Function
Panel:
Panel Name
Panel ID(Expression)
Position:
At Position
Centered
X Y 0 0
Cancel OK
10001:Alarmarray
Text Editor
Cancel OK
Close
Vijeo Gothic
1: Language1
Normal
Language:
Font:
Font Style:
16 Font Width:
16 Font Height:
Creating a project
52 September 2003
8 l Enter "(red) 255,0,102" in the "TextColor" field.
l Check the "Transparent" check box in the "BackColor" and "LineColor"
fields.
9 Save your project.
Step Action
Creating a project
September 2003 53
2.3 Creating the "Water level meter" screen
At a Glance
Purpose of this
subchapter
This subchapter describes how to create the second "Water level meter" screen.
What's in this
Section?
This section contains the following topics:
Topic Page
Creating the "Water level meter" screen 54
Creating a tank 57
Creating a conduit 62
Creating a navigation button 66
Creating a project
54 September 2003
Creating the "Water level meter" screen
Illustration In this section, you are going to create a second screen:
Water level meter
Next
#
Creating a project
September 2003 55
Procedure The following table describes the procedure to create a second screen:
Step Action
1 Click the "Project" tab in the navigator.
2 Right-click "Graphical Panels" and select "New panel".
3 Rename "2:Panel2" as "2:Tank" to open the graphical screen window.
In the "Inspector" window, change the back area color by entering (yellow)
"255,255,153".
Manual_V41 - Vijeo-Frame - [Target1 - Tank]
Designer
V
ije
o
Designer
V
ije
o
Manual_V41
Designer
V
ije
o
Application Scripts
Alarms
Target1
Popup Windows
Languages
IO Manager
Graphical Panels
Too... Vij... Var...
Designer
V
ije
o
Project
1: Confiion
Report...
Paste Panel
Delete All Panels...
Properties
Ctrl+T
New Panel
Alt+Enter
Insert
Ctrl+V
Delete
File Edit Build Search View Draw Arrange
Data Files
Creating a project
56 September 2003
Create a title in
the screen
Here, we will create the following title: "Water level meter".
The following table describes the procedure to create text:
Step Action
1 Click inside the graphic screen, and select the Toolbar's "Text" icon to draw an
area on the screen where the text will be placed.
2 When the "Text Editor" window appears:
l Enter "Water level meter"
l Select "Vijeo Sans Serif" as the font
l Select "16" as the font size
l Click OK

3 In the Inspector window, enter:
l The text color = "pink (255,153,255)"
l The BackColor = "transparent"
l The LineColor = "transparent"
Graphical Editor
Text Editor
Cancel OK
Water level meter
Vijeo Sans Serif
1: Language1
Normal
Language:
Font:
Font Style:
16 Font Width:
16 Font Height:
Creating a project
September 2003 57
Creating a tank
Illustration The graphic below represents the object to create.
Use the following procedure to create a tank:
Step Action
1 Click the "Rectangle" drawing icon, then draw two rectangles shown below:
2 For each rectangle, change the fore color to "pale green (153.153.102)" and the
line color to transparent.
3 Click the "Ellipse" drawing icon, then draw three ellipses shown below:
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.
Water level meter
Next
#
Ellipse 1
Ellipse 2
Ellipse 3
Creating a project
58 September 2003
5 Click the "Rectangle" drawing icon, then draw a rectangle at the center of the large
rectangle:
6 Change the previously created rectangle's fore color to "white" (255.255.255) and
the line color to "white" (255.255.255).
Step Action
New Rectangle
Creating a project
September 2003 59
7
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:
l Check the "Enable Vertical Fill Animation" check box.
l Click the icon and select the "_seconds" variable.
l Configure the following fields:
l Set "Start point" to "Top".
l 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 and can only be used by Vijeo
Designer.
8
Click the drawing icon, then draw a graduated scale:
9 Select "255,0,0" as the line color.
Step Action
...
Animation Properties
Top
Start Point:
0 From:
Value Range
59 To:
0 Min %:
Display Range
100 Max %:
_seconds
Enable Vertical Fill Animation
Start Point:
From:
Value Range
To:
Min %:
Display Range
Max %:
Enable Horizontal Fill Animation
Cancel OK Apply
Back Area Color:
Left
0
100
0
100
Color Fill Size Position Rotate Touch Visib.
Graduated
scale
Creating a project
60 September 2003
10 Click inside the graphic screen, and select the Toolbar's "Text" icon to draw an area
on the screen where the text will be placed.
11 When the "Text Editor" window is displayed:
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".
Step Action
#
Text Editor
Cancel OK
#
Vijeo Gothic
1: Language1
Normal
Language:
Font:
Font Style:
16 Font Width:
16 Font Height:
Creating a project
September 2003 61
13
Double-click the previously created "#" text or click the icon to the right of
"Animation" in the "Inspector" window to open the "Animation Properties"
window. Next, click the "Value" tab:
l Check the "Enable Value Animation" check box.
l Click the icon and then select the "_Seconds" variable.
l In the "Display Digits" field, enter "2.0".
l Click OK.
Step Action
...
Animation Properties
_Seconds
Enable Value Animation
Cancel OK Apply
Color Value Position Visib.
12
Dec. Format:
Integer Data Type:
2 Display Digits: 0
Keypad/Keyboard Input
Zero Suppress
Display Popup Keypad
Interlock
Input Status Variable
Group No.: Unassigned Order No.
Beep on Touch
0
Creating a project
62 September 2003
Creating a conduit
Illustration The graphic below represents the object to draw.
The following table describes the procedure to create a conduit:
Step Action
1 Click the "Rectangle" drawing icon and then draw the following two rectangles:
2 Change the line color to "transparent" and the fore color to "grey"
(153,153,153).
3
Click the "Polygon" drawing icon and then draw the following the following
object:
Procedure:
l Click point A.
l Click point B. Repeat the operation until point G.
l Right-click.
Water level meter
Next
#
A G
B
C
D
E
F
Creating a project
September 2003 63
4 Change the line color to "white" (255,255,255) and the fore color to blue
(0,0,255).
5 Click the "Selection" icon and then select the arrow created in step 4.
6 In the main menu bar, select "Edit" then "Copy" and "Paste".
7 Select this arrow and choose "Rotate Right" in the pull-down "Arrange" menu.
The arrow should have rotated clockwise so that the arrow is pointing to the
left:
8 Repeat step 6. Select this arrow and choose "Rotate Left" in the pull-down
"Arrange" menu. The arrow should have rotated anti-clockwise so that the
arrow is pointing to the right:
9 Duplicate (using "Copy/Paste") two more left-facing and right-facing arrows.
Step Action
Manual_V41 - Vijeo-Frame - [Target1 - Tank]
Designer
V
ije
o
Designer
V
ije
o
Manual_V41
Designer
V
ije
o
Application Scripts
Alarms
Target1
Popup Windows
Languages
IO Manager
Graphical Panels
Too... Vij... Var...
Designer
V
ije
oProject
1: Panel
Send to Back
Group
Ungroup
Align
Bring to Front
Rotate Left
Rotate Right
Flip Horizontal
Flip Vertical
File Edit Build Search View Draw Arrange
Data Files
Creating a project
64 September 2003
10 Place the seven arrows created in steps 3 to 9 in the rectangles as shown in
the figure below:
Note: You can drag any of these arrows or rectangles to increase or reduce
their size..
11 Select all the arrows. Select "Group" in the pull-down "Arrange" menu to
create a group object.
Note: To select several objects at once, press and hold down the "Shift" key
while selecting the objets.
Step Action
Manual_V41 - Vijeo-Frame - [Target1 - Tank]
Designer
V
ije
o
Designer
V
ije
o
Manual_V41
Designer
V
ije
o
Application Scripts
Alarms
Target1
Popup Windows
Languages
IO Manager
Graphical Panels
Too... Vij... Var...
Designer
V
ije
o
Project
1: Panel
Send to Back
Ungroup
Align
Bring to Front
Rotate Left
Rotate Right
Flip Horizontal
Flip Vertical
Group
File Edit Build Search View Draw Arrange
Data Files
Creating a project
September 2003 65
12
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. Enter the
following settings:
Step Action
...
Animation Properties
Enable Visibility Animation
Slow
Speed:
_Seconds
Enable Blink Animation
Cancel OK Apply
Color Smart Part Size Position Rotate Touch
Visib.
Creating a project
66 September 2003
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:
Procedure Use the following procedure to create the navigation button::
Water level meter
Next
#
Step Action
1 Click "1:Configuration" in the navigator in order to open the "Water level
setting" screen.
2 Click the "Select" drawing icon and select the button "SwSp0_0005_01" (See
Creating navigation buttons, p. 43).
3 In the main menu bar's "Edit" menu, select the "Copy" command.
4 Click "2:Tank" in the navigator in order to open the above screen.
5 Click the drawing and, from the main menu's "Edit" menu, select the "Paste"
command.
6 Select the "SwSp0_0005_01" button.
7 Input "3" in the property "ID" (See Creating navigation buttons, p. 43).
Creating a project
September 2003 67
2.4 Creating the "Water level data chart" screen
At a Glance
Purpose of this
subchapter
This subchapter describes the procedure to create the third "Water level data chart"
screen.
What's in this
Section?
This section contains the following topics:
Topic Page
Creating the "Water level data chart" screen 71
Creating a chart 68
Creating a navigation button 73
Creating a script 74
Creating a project
68 September 2003
Creating a chart
Procedure Here we will create a chart that will show the water level changes in the tank.
The following table describes the procedure to create a chart:
Step Action
1
Click the "Chart" icon and then draw a chart on the 3:Chart screen.
Creating a project
September 2003 69
2 In the "Inspector" window, enter the following settings:
l "PlateColor" = sky blue (102,255,255).
l "BorderColor" = green (0,153,0).
l Click "+" to the left of "DataAxisLabel" and set the TextColor to "orange
(255,102,0)".
l Click "+" to the left of "Channel1" and enter the "sec" variable.

Step Action
Inspector
TrendGraph
Description
PlateColor (102,255,255)
BorderColor (0,153,0)
GraphSettings
RangeSettings
ValueRange...
ValueRangeTo... 100
DisplayRangeMax
0
100
(255,102,0)
DisplayRangeMin
0
Enabled
0
16
1
DataAxisLabel
TextColor
FontHeight
Spacing
Decimals
DataAxisScale Enabled
DataAxisGridLine Enabled
TimeAxisScale Enabled
TimeAxisGridLine Enabled
Enabled Channel1
Variable
DisplayFormat
Sec
Line
Disabled
Disabled
Track
Mark
Color
Disabled OutOfRangeColor
FontWidth 8
Height 240
Width 300
Creating a project
70 September 2003
3 Click the "Variables" tab in the "Inspector" window. Select the "sec" variable and
set the "RecordRate [sec]" field to "1".
Step Action
Variable List: Sort By Target Name, Filter
Target1
alarm
value
INT
INT
INT
Too.. Vij... Variables
Designer
V
ije
oPro...
sec
Inspector
Variable
Name sec
Description
ArrayDimension 0
DataType
Source
KeepHistory
NumberOfDays
Integer
RecordRate [sec] 1
1
Internal
DataDetails
Alarm Disabled
Enabled
Creating a project
September 2003 71
Creating the "Water level data chart" screen
Illustration The graphic below shows the screen to create:
Create a new
screen
The following table describes the procedure to create a new screen:
Water level data chart
Back
(History)
100
90
80
70
60
50
40
30
20
10
0
Step Action
1 Click the "Project" tab in the "Navigator" window.
2 Repeat step 1 (See Procedure, p. 55) of the "Water level meter" chapter to create
a new panel. Right-click "Graphical Panel" and select "New panel".
3 Rename "3:Panel3" as "3:Chart".
4 Click "3:Chart" to open the graphical screen window.
5 In the "Inspector" window, change the back area color by inputting "green
(153,255,0)".
Creating a project
72 September 2003
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 create the title:
Step Action
1 Select the Toolbar's "Text" icon and draw an area on the screen where the text will
be placed.
2 When the "Text Editor" window appears:
l Enter "Water level data chart (History)"
l Select "Vijeo Sans Serif" as the font
l Select "16" as the font size
l Click OK

3 In the Inspector window, enter:
l The text color = "orange (255,153,0)"
l The BackColor = "transparent"
l The LineColor = "transparent"
Graphical Editor
Text Editor
Cancel OK
Water level data chart
(History)
Vijeo Sans Serif
1: Language1
Normal
Language:
Font:
Font Style:
16 Font Width:
16 Font Height:
Creating a project
September 2003 73
Creating a navigation button
Procedure Here we will create a "Back" button to return from the "Water level data chart
(History)" screen to the "Water level setting" screen:
Step Action
1 Click "1:Configuration" in the navigator to open the first screen (See Creating
the "Water level setting" screen, p. 34).
2 Click the "Select" drawing icon and select the button "SwSp0_0005_01" (See
Creating navigation buttons, p. 43).
3 In the main menu bar's "Edit" menu, select the "Copy" command.
4 Click "3:Chart" in the navigator to open the third screen (See Creating the
"Water level data chart" screen, p. 71).
5 Click the sceen and, from the main menu's "Edit" menu, select the "Paste"
command.
6 Select the "SwSp0_0005_01" button.
7 Enter "1" in the property "ID" (See Creating navigation buttons, p. 43) field.
8
In the "Inspector" window, click the icon to the right of "Label" to open the
"Text Editor" dialog box and set up each field as shown below:
...
Text Editor
Cancel OK
Back
Vijeo Sans Serif
Language1
Normal
Language:
Font:
Font Style:
8 Font Width:
16 Font Height:
Creating a project
74 September 2003
Creating a script
At a Glance In Vijeo Designer, a script can be used to automate some tasks of a communication
program. 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.
Creating a project
September 2003 75
Create the
"Over_100"
script
The following script is run when a predefined value is entered in screen 1. If that
value is over 100, the alarm popup window is displayed (See Creating an alarm
display popup window, p. 46).
The following table describes the procedure to create the "Over_100" script:
Step Action
1 Click the "Project" tab in the "Navigator" window, then right-click
"1:Configuration" and select "New script":
2 In the "Inspector" window's:
l Enter "Conditional" in the "Trigger" field.
l Enter "value" in the "Trigger Variable" field.
l Enter "On Data Change" in the "Trigger Condition" field.
l Rename "Script 1" as "Over_100".
Manual_V41 - Vijeo-Frame - [Target1 - Configuration]
Designer
V
ije
o
Designer
V
ije
o
Manual_V41
Designer
V
ije
o
Application Scripts
Alarms
Target1
Popup Windows
Languages
IO Manager
Graphical Panels
Tool... Vijeo... Var...
Designer
V
ije
oProject
1: Panel1
Rename Panel
Report...
Cut Panel
Copy Panel
Open In New Window
Ctrl+C
Ctrl+T
Ctrl+X
Delete Panel... Delete
Paste Script Ctrl+V
New Script Insert
Properties Alt+Enter
File Edit Build Search View Arrange
Data Files
Inspector
Panel Script
Name Over_100
Trigger Conditional
Trigger Variable value
Trigger Condition On Data Change
Creating a project
76 September 2003
3 Click "Over_100" to open the script editor window and enter 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. 46) screen is displayed. If the "value"
variable's value is less than or equal to 100, the bit corresponding to the
variable is FALSE.
Step Action
Creating a project
September 2003 77
Create the
"Refresh_per_se
c" script
The following table presents the procedure to create the "Refresh_per_sec" script.

Step Action
1 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":
2 Select "Periodic" in the "Trigger" field and "1000" as the "Frequency":
3 Rename "Script 2" as "Refresh_per_sec".
4 Click "Refresh_per_sec" to open the script editor window and enter the
following program:
sec.write(_Seconds.getIntValue());
Note: The value of the "_Seconds" system variable is assigned to the "sec"
variable.
5 Save your project.
Inspector
Panel Script
Name Refresh_per_sec
Trigger Periodic
Frequency [msec] 1 000
Creating a project
78 September 2003
September 2003 79
3
Project Download
At a Glance
Purpose of this
chapter
This chapter describes the different project build types and the various Project
download modes.
What's in this
Chapter?
This chapter contains the following topics:
Topic Page
Validation / Building / Correcting errors 80
Simulation 82
Downloading data and exiting a project 83
Project Download
80 September 2003
Validation / Building / Correcting errors
Types of data
transfer
You must use one of the following methods to transfer a customer application to a
terminal (or perform a local simulation):
* 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.
Be sureto clean each target and/or project before you build. This is performed by
choosing the main menu's "Build" command and selecting "Clean All". The clean
command removes unnecessary files from the project folder.
Choose the main menu's "Build" command and selecting "Build All" to build your
target.
Vijeo Designer can build a program in the following four ways:
Type Procedure
Ethernet The application produced by the built project* is transferred to products
equipped with an Ethernet connector via the network.
Tool port Data produced by the built project* is transferred to the device connected
to the PC using the special cable XBTZ-G915.
CompactFlash
card
Data produced by the built project* (on a PC equipped with a PCMCIA card
reader) is transferred by copying to a CompactFlash card; it can then be
plugged in the terminals.
Local simulation Data produced by the built project* are stored locally for simulating the
customer application during its fine-tuning phase.
Type Procedure
Build Rebuilds the project completely and optimizes the results file. Although
creation is quicker than when using the "Build" function.
Quick Build Only builds the data updated since the previous version was built, and
optimizes the results file.
Start simulation Rebuilds the project completely and refreshes the resulting file. After the
build the simulation starts.
Download Before download, the target is validated and built. If no errors are detected,
the user application files are transferred to the target machine.
Project Download
September 2003 81
Error correction In each of the above four cases, the system displays "Errors" and "Warnings" in
the "Feedback zone".
In each case the "Feedback zone" window is automatically opens and "Errors" and
"Warnings" are displayed.
"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 an error or "warning" to view detailed information.
Project Download
82 September 2003
Simulation
Simulate your
project
The simulation function can be used to simulate your project on the PC, i.e. to
display your project without downloading it to an XBT-G terminal.
Start Simulation Use the following procedure to start the simulation:
Step Action
1 Click the "Project" tab in the "Navigator" window.
2 Right-click "Target 1".
3 Select "Start Simulation (Build)" to begin the simulation. After the build is
completed, the main screen will appear.
4 To stop the simulation, press the "Ctrl" and "Z" keys simultaneously or "Alt"
and "F4" keys simultaneously.
Project Download
September 2003 83
Downloading data and exiting a project
Data download
types
The Download function is used to send an application to a target. Several download
methods can be used:
l Ethernet: an Ethernet network is used to download data.
l File System: Data is downloaded to a CF Card.
l Serial: The unit's serial port is used to download data directly to the target.
Use the "Inspector" window's Target area to select the type of download method.
Project Download
84 September 2003
Download
procedure
Use the following procedure to create to download an application to a target (XBT-
G):
Step Action
1 When using XBT-G type units, connect the download cable to the XBT-G tool
connector or ethernet cable connector and to the computer port com (COM1 or
Ethernet).
XBT-G2110/2120/2220/4320: only tool connector (serial)
Other XBT-G units allow you to choose an Ethernet or tool connector
connection.
2 Click the "Project" tab in the "Navigator" window and click on "Target1".
3 In the "Inspector" window's Download field, select Ethernet or Serial.
4 If you select Ethernet as your download method, be sure to enter the following
data.
l IPAddress
l SubnetMask
l DefaultGateway
If you select Serial as your download method, be sure to enter the following
data.
l COM Port
l Baud Rate
5 In the "Navigator" click on "Target1" then click right to select "Download".
Inspector
Target
Name Target1
Description
Type XBT-G Series
PanelSize
InitialPanelID
StartUpDelay [sec]
XBT-G4330 (640x480)
Buzzer
1 : Panel1
0
Enabled
Download
TargetColor 256 Colors
ToConfiguration Top Left Corner
Ethernet
Ethernet
File System
Serialcal
Project Download
September 2003 85
Exit Vijeo
Designer
To exit Vijeo Designer, select "Exit" from the main menu bar's "File" menu and save
your project.
6 Check your XBT-G unit to see if the application is displayed correctly.
Note:
If an error message appears in the "Feedback zone", this means that the
download has failed. After you have solved the problem try to download data
again.
If you double-click on an error displayed in the "Feedback zone", the error's
position is indicated.
Step Action
Project Download
86 September 2003
C
B
September 2003 87
A
Animation, 59, 63
B
Blinking lamp, 41
Building, 82
Button, 45, 68
C
Conduit, 63
Configuration, 29
Connection, 11
Create a graphic, 70
D
Data transfer, 82
Download, 85
E
Edit variables, 11
Ethernet, 82
G
Generation, 82
Graduated scale, 59
Graphic, 70
Graphic screen, 37
Graphical panel, 11
Graphical screen, 57, 59, 63
H
HMI, 10
I
Installation, 17
L
Level indicator, 59
M
Multi-language, 11
R
Report, 11
Re-use the data, 11
S
Script, 76
Scripts, 11
Simulation, 84
Starting Vijeo Designer, 28, 30
Index
Index
88 September 2003
T
Tank, 59
Target devices, 12
U
Uninstall, 20
V
Variables, 32, 63