Vijeo designer basic руководство

Date : 03/31/2014
Type : User guide

Languages : English
Version : 6.2

Document Number : VD-userguide-V6.2

3500

7035

Vijeo-DesignerTutorial eng

2

Table of Contents

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

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

Chapter 1 General . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9At a Glance . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9Overview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10Vijeo Designer’s main tools . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13Installing Vijeo Designer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16Uninstalling Vijeo Designer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19

Chapter 2 Creating a project . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .21At a Glance . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21

2.1 Specifications . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22At a Glance . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22The Application at a Glance . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23Starting Vijeo Designer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27Basic settings . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27Creating variables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30

2.2 Creating the «Water level settings» screen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33At a Glance . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33Creating the «Water level setting» screen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34Creating lamps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39Creating navigation buttons. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43Creating an alarm display popup window . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46

2.3 Creating the «Water level meter» screen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53At a Glance . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53Creating the «Water level meter» screen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54Creating a tank . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57Creating a conduit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62Creating a navigation button . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66

2.4 Creating the «Water level data chart» screen . . . . . . . . . . . . . . . . . . . . . . . . . . . 67At a Glance . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67Creating the «Water level data chart» screen . . . . . . . . . . . . . . . . . . . . . . . . . . . 71

3

Creating a chart . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68Creating a navigation button . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73Creating a script. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74

Chapter 3 Project Download. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79At a Glance . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79 Validation / Building / Correcting errors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80Simulation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82Downloading data and exiting a project . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83

Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .87

4

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 [email protected]

September 2003 5

About the Book

6 September 2003

September 2003

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

7

Vijeo Designer at a Glance

8 September 2003

September 2003

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

9

General

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

10 September 2003

General

Main features � Re-use the data:Vijeo Designer uses two types of data: � Internal data created in the user application,� 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.

� Connect to multiple PLCs:Vijeo Designer can be used to simultaneously communicate with a number of Schneider PLCs.

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

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

� Report:Vijeo Designer also incorporates an advanced function designed to simplify the management of variables used in the animation screens, such as:� 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.

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

September 2003 11

General

Target Terminal Models

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

12 September 2003

General

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.

September 2003 13

General

The Vijeo Designer environment looks like this:

Manual_V41 — Vijeo-Frame — [InfoViewer]

Graphical Panel

Name Panel1

PanelID 1

Description

Width

Height

(128,255

800

BackgroundColor600

Lamps2-states

LampO_000… LampO_000…

LampO_000…

Label

LampO_000…

LampO_000… LampO_000…

Designer

Vije

o

Designer

Vije

o

Manual_V41Designer

Vije

o

Application Scripts

Alarms

Target1

Popup Windows

Languages

IO Manager

Graphical Panels

Too..Vij… Var…Designer

Vije

o Project

1: Configuratio

??

2: Tank

3 : Chart

Text01AText02AText04AText05ALampO_0015_01

SwSpO_0005_01

SwSpO_0003_01

SwSpO_0003_02

Rectangle01

2

3

4

56

7

8

9

1

2

36

845

56

9

8

Object NameOrder 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)

DesignerV

ijeo

Icons for the working windows

ToolsFile Edit Build Search View DrawArrange

1 32

4 5 6

HelpWindow

Data Files

14 September 2003

General

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.

??

September 2003 15

General

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:� Before installing an application, be sure to close all other active applications. � If you are reinstalling the software, be sure to remove the previous version of

Vijeo Designer first.� Vijeo Designer must be installed by the system administrator. � 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.

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

16 September 2003

General

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: � User name� Company name� Serial number

Click «Next».

CancelNext ><Back

Enter the information.Client Information

Enter your name, the name of the company for which you workand the product serial number.

Username:

VijeoDesigner

Company name:

Schneider SA

Serial number

InstallShield

September 2003 17

General

(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 FilesSchneider 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 must’nt restart the computer if the program don’t 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

CancelNext ><Back

18 September 2003

General

Uninstalling Vijeo Designer

Uninstall procedure

The procedure for uninstalling Vijeo Designer is as follows:

� Use the «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 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.

September 2003 19

General

20 September 2003

September 2003

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

21

Creating a project

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

22 September 2003

Creating a project

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:� The Water level setting screen,� The Water level meter screen,� 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 FilesSchneider ElectricDocssamples.

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)».

September 2003 23

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. 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:� An alarm array (See Creating an alarm display popup window, p. 46),� A red lamp blinks (See Creating lamps, p. 39), � 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 levelSetting value

Next

0

Water level setting

Water levelSetting value

Next

123Esc — — — — B6

7 8 9 + / —

4 5 6 Del

1 2 3

0 . Enter

1 2 3

24 September 2003

Creating a project

The following diagram presents the settings screen with the warnings.

The following table presents number’s 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 levelSetting value

Next

123Alarm setting

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

Close

1

2

3

September 2003 25

Creating a project

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 number’s 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)1009080706050403020100

21

26 September 2003

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.

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.

September 2003 27

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

28 September 2003

Creating a project

2 � Enter the name of your project and click OK (in our case, enter «Manual_V41»).� Select the XBT-G Target.� 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

Vije

o

Too..Vij…

Application Scripts

Alarms

Target1

Popup Window

Languages

IO Manager

Var…Designer

Vije

o Project..

Data Files

September 2003 29

Creating a project

Creating variables

At a Glance A variable is a memory address indicated by a name. Vijeo Designer handles the following five types of variables:� Discrete,� Integer,� Float,� String,� 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

ToolchestVije.

Target1

VariablesDesigner

Vije

o Project

Paste

Import Variables

Export Variables

Properties…

Ctrl+V

New Variable

Integer

Float

StringCtrl+E

Discrete

Ctrl+I

Alt+Enter Structure

30 September 2003

Creating a project

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

Vije

o Pro…

Variable List: Sort By Target Name, Filter

Target1

alarmINT

— Variable

Name AlarmDescriptionArrayDimension 0DataType Discrete

Source Internal

+ DataDetails+ Alarm Enabled

+ KeepHistory Disabled

INT

INT

Too…Vij… Var…Designer

Vije

o Pro..

Variable List: Sort By Target Name, Filter

Target1

alarmINT

secvalue

September 2003 31

Creating a project

4 In KeepHistory’s parameter select «Disabled» for the «alarm» and «value» variable and select Enabled for the «sec» variable .

5 Save your project.

Step Action

— Variable

Name alarmDescriptionArrayDimension 0DataType Discrete

Source Internal

+ DataDetails+ Alarm

+ KeepHistory Disabled

Enabled

32 September 2003

Creating a project

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

September 2003 33

Creating a project

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 levelSetting value

Next

123Esc — — — — 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_V41Designer

Vije

o

Application Scripts

Alarms

Target1

Popup Window

Languages

IO Manager

Graphical Panels

1: Configuration

Data Files

34 September 2003

Creating a project

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:� Enter «Water level setting»� Select «Vijeo Sans Serif» as the font � Select «16» as the font size� Select «Normal» as the font style� Click OK

4 In the Inspector window, enter:� The text color = «blue(102,102,255)»� The BackColor = «transparent»� The LineColor = «transparent»

Graphical Editor

Text Editor

CancelOK

Water level setting

Vijeo Sans Serif

1: Language1

Normal

Language:

Font:

Font Style:

16Font Width:

16Font Height:

September 2003 35

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.

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:� the TextColor = «blue (0,0,255)» � the BackColor = «yellow (255,255,0)»� the LineWidth = «3»� the HorizontalAlign = «Center»� the VerticalAlign = «Middle»

Text Editor

CancelOK

#

Vijeo Gothic

1: Language1

Normal

Language:

Font:

Font Style:

32Font Width:

32Font Height:

36 September 2003

Creating a project

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:� «Enable Value Animation»� «Keypad/Keyboard Input»� «Display Popup Keypad»� «Zero Suppress»

Click the icon then:

� Select the «Value» variable� Enter 3.0 in the «Display Digits» field� Select «Integer» in «Data Type» field� Click OK

Step Action

…

Animation Properties

Value

Enable Value Animation

CancelOK Apply

Color ValuePosition Visib.12

Dec.Format:

IntegerData Type:

3Display Digits: 0

Keypad/Keyboard Input

Zero Suppress

Display Popup Keypad

Interlock

Input Status Variable

Group No.: Unassigned Order No.

Beep on Touch

0

September 2003 37

Creating a project

5 Next, create the «Water level, Setting value» text.Repeat steps 1 and 2 above with the following configuration: � Enter «Water level» and «Setting value»� Select «Vijeo Gothic» as the font � Select «16» as the font size� Select «Normal» as the font style� Click OK

6 In the «Inspector» window, enter:� «blue (0,0,255)» for the TextColor� Set:

� The BackColor to «transparent»� 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

CancelOK

Water levelSetting value

Vijeo Gothic

1: Language1

Normal

Language:

Font:

Font Style:

16Font Width:

16Font Height:

38 September 2003

Creating a project

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 levelSetting value

123Alarm setting

Toolchest

ToolchestVij…

BarGraph

Var…Designer

Vije

o Pro…

DateDisplayHistoricalTrend

Lamps

Meter

Switches

CircleGraphDataGraph

Keypad

BlankSpecialKeys

NumericDisplayPieGraphSEI toolchest

2 Sates4 StatesSpecial

September 2003 39

Creating a project

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

Lamps2-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_0015_01

…

InspectorSmart 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

Valuealarm

alarmSelect an item

40 September 2003

Creating a project

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:� «red (255,0,0)» for the TextColor� Set:

� The BackColor to «transparent»� The LineColor to «transparent»

Text Editor

CancelOK

Alarm setting

Vijeo Gothic

1: Language1

Normal

Language:

Font:

Font Style:

16Font Width:

16Font Height:

September 2003 41

Creating a project

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.� Check the «Enable Visibility Animation» and «Enable Blink Animation»

check boxes.

� Click the icon and select the «alarm» variable.

� Click OK.

Step Action

…

Animation Properties

Enable Visibility Animation

Slow

Speed:

alarm

Enable Blink Animation

CancelOK Apply

Color Value

alarm

Position Visib.

42 September 2003

Creating a project

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 levelSetting value

Next

0

Toolchest

ToolchestVij…

BarGraph

Var…Designer

Vije

o Pro…

DateDisplayHistoricalTrend

LampsMeter

Switches

Special function switchesBit switches

Word switches

CircleGraphDataGraph

Keypad

BlankSpecialKeys

NumericDisplayPieGraphSEI toolchest

TankGraph

September 2003 43

Creating a project

2 Drag & drop «SwSp0_0005_01» onto the screen.

3 In the «Inspector» window, enter 2 on ID. The number 2 on ID represents ID’s screen who will be open when click on the button:

Step Action

SwitchesSpecial 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

InspectorSmart Part

Width 80

Height 40

Operation Change Panel

ID

ForeColor

FALSEInterlock

(0,255,0)

Buzzer

(0,0,255)

2

Label

Pattern 1 : SOLID

FrameColor

(0,0,0)

RestoreDefaults

(153,153,153)

Animation

TextColor

BackColor

TRUE

44 September 2003

Creating a project

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

CancelOK

Next

Vijeo Sans Serif

Language1

Normal

Language:

Font:

Font Style:

8Font Width:

16Font Height:

September 2003 45

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 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 XxXxXxXx24:00:00

yy/mm/dd 24:00:00 XxXxXxXx24:00:00

46 September 2003

Creating a project

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_V41Designer

Vije

o

Application Scripts

Alarms

Target1

Popup Windows

Languages

IO Manager

Graphical Panels

1: Configuration

Tool…Vij… Var…Designer

Vije

o Project

1: Language1

2: Language2

Paste Popup Window Ctrl+V

New Popup Window

Delete All Popup Windows… Delete

Properties Alt+Enter

Insert

Data Files

September 2003 47

Creating a project

Displaying the alarms

The following table gives the procedure to create an alarm display table:

Step Action

1Click the «Alarm Summary» drawing icon to create the «Alarm» object.

2 In the «Inspector» window, change the following settings: � Enter «16» in the «FontHeight» field.� Enter «16» in the «FontWidth» field.� Enter «(white) 255,255,255» in the «BackAreaColor» field.� Set the «Frame» property to «Enabled».� Enter «(orange) 255,102,0» in the «Line Color» field.Next, set «Ruler» to «Enabled», and «Line Color» to «(dark blue) 0,0,153».

InspectorAlarm

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

48 September 2003

Creating a project

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

3Click 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.

InspectorVariable

Name alarmDescription alarmArrayDimension 0DataType

SourceKeepHistory

AlarmMessage

Discrete

TriggerConditon

Enabled

Internal

DataDetails

When high

FALSE

Alarm

AlarmGroup RootAlarmGroup

•••

Alarm Message Editor

CancelOK

The value of this setting exceeds 100!

1: Language1Language:

September 2003 49

Creating a project

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.

4Click the icon in the «Animation» zone.

5 Click the «Touch» tab and then click «Enable Touch Animation» check box.

•••

Animation Properties

Enable Touch Animation

CancelOK Apply

Option

Reverse On Touch Buzzer On Touch

Bit Toggle: Function Operation

1 AlwaysCondition

InsertAdd

Color Fill Size Position Rotate Touch Visib.

Delete

50 September 2003

Creating a project

6 � Double click the «Operation» property to call up the «Function Setting» dialog box.

� Select «Popup Panel» from the «Function» drop-down list, then click «Close Popup Panel».

� Select «10001:Alarmarray» from the «Panel Name» drop-down list, and click OK.

� 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 PanelFunction

Panel:Panel Name

Panel ID(Expression)

Position:At Position

CenteredX Y 00

CancelOK

10001:Alarmarray

Text Editor

CancelOK

Close

Vijeo Gothic

1: Language1

Normal

Language:

Font:

Font Style:

16Font Width:

16Font Height:

September 2003 51

Creating a project

8 � Enter «(red) 255,0,102» in the «TextColor» field.� Check the «Transparent» check box in the «BackColor» and «LineColor»

fields.

9 Save your project.

Step Action

52 September 2003

Creating a project

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

September 2003 53

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

#

54 September 2003

Creating a project

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

Vije

o

Designer

Vije

o

Manual_V41Designer

Vije

o

Application Scripts

Alarms

Target1

Popup Windows

Languages

IO Manager

Graphical Panels

Too…Vij… Var…Designer

Vije

o Project

1: ConfiionReport…

Paste PanelDelete All Panels…

Properties

Ctrl+T

New Panel

Alt+Enter

Insert

Ctrl+VDelete

File Edit Build Search View DrawArrange

Data Files

September 2003 55

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 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: � Enter «Water level meter»� Select «Vijeo Sans Serif» as the font � Select «16» as the font size� Click OK

3 In the Inspector window, enter:� The text color = «pink (255,153,255)»� The BackColor = «transparent»� The LineColor = «transparent»

Graphical Editor

Text Editor

CancelOK

Water level meter

Vijeo Sans Serif

1: Language1

Normal

Language:

Font:

Font Style:

16Font Width:

16Font Height:

56 September 2003

Creating a project

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 � Ellipse 1: Change the fore color to «grey (153.153.153)» and the line color to transparent.

� 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 2Ellipse 3

September 2003 57

Creating a project

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

58 September 2003

Creating a project

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:

� Check the «Enable Vertical Fill Animation» check box.

� Click the icon and select the «_seconds» variable.

� Configure the following fields:� Set «Start point» to «Top».� Set «Back Area Color» to 0,0,255.� 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:

0From:

Value Range

59To:

0Min %:

Display Range

100Max %:

_seconds

Enable Vertical Fill Animation

Start Point:

From:

Value Range

To:

Min %:

Display Range

Max %:

Enable Horizontal Fill Animation

CancelOK Apply

Back Area Color:

Left 0

100

0

100

Color Fill Size Position Rotate Touch Visib.

Graduatedscale

September 2003 59

Creating a project

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:

� Enter «#»� Select «1: Language1» as the language� Select «Vijeo Gothic» as the font� Select «16» as the font size� 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

CancelOK

#

Vijeo Gothic

1: Language1

Normal

Language:

Font:

Font Style:

16Font Width:

16Font Height:

60 September 2003

Creating a project

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:

� Check the «Enable Value Animation» check box.

� Click the icon and then select the «_Seconds» variable.

� In the «Display Digits» field, enter «2.0».� Click OK.

Step Action

…

Animation Properties

_Seconds

Enable Value Animation

CancelOK Apply

Color ValuePosition Visib.12

Dec.Format:

IntegerData Type:

2Display Digits: 0

Keypad/Keyboard Input

Zero Suppress

Display Popup Keypad

Interlock

Input Status Variable

Group No.: Unassigned Order No.

Beep on Touch

0

September 2003 61

Creating a project

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:� Click point A.� Click point B. Repeat the operation until point G.� Right-click.

Water level meter

Next

#

AG

BC

D

EF

62 September 2003

Creating a project

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

Vije

o

Designer

Vije

o

Manual_V41Designer

Vije

o

Application Scripts

Alarms

Target1

Popup Windows

Languages

IO Manager

Graphical Panels

Too…Vij… Var…Designer

Vije

o Project

1: Panel

Send to Back

GroupUngroup

Align

Bring to Front

Rotate LeftRotate RightFlip HorizontalFlip Vertical

File Edit Build Search View DrawArrange

Data Files

September 2003 63

Creating a project

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

Vije

o

Designer

Vije

o

Manual_V41Designer

Vije

o

Application Scripts

Alarms

Target1

Popup Windows

Languages

IO Manager

Graphical Panels

Too…Vij… Var…Designer

Vije

o Project

1: Panel

Send to Back

Ungroup

Align

Bring to Front

Rotate LeftRotate RightFlip HorizontalFlip Vertical

Group

File Edit Build Search View DrawArrange

Data Files

64 September 2003

Creating a project

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

CancelOK Apply

Color Smart PartSize Position Rotate Touch Visib.

September 2003 65

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:

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

66 September 2003

Creating a project

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

September 2003 67

Creating a project

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

1Click the «Chart» icon and then draw a chart on the 3:Chart screen.

68 September 2003

Creating a project

2 In the «Inspector» window, enter the following settings:� «PlateColor» = sky blue (102,255,255).� «BorderColor» = green (0,153,0).� Click «+» to the left of «DataAxisLabel» and set the TextColor to «orange

(255,102,0)».� Click «+» to the left of «Channel1» and enter the «sec» variable.

Step Action

InspectorTrendGraph

DescriptionPlateColor (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

EnabledChannel1

Variable

DisplayFormat

Sec

Line

Disabled

Disabled

Track

Mark

Color

DisabledOutOfRangeColor

FontWidth 8

Height 240

Width 300

September 2003 69

Creating a project

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… VariablesDesigner

Vije

o Pro…

sec

InspectorVariable

Name sec

Description

ArrayDimension 0

DataType

Source

KeepHistory

NumberOfDays

Integer

RecordRate [sec] 1

1

Internal

DataDetails

Alarm Disabled

Enabled

70 September 2003

Creating a project

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)1009080706050403020100

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)».

September 2003 71

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 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: � Enter «Water level data chart (History)»� Select «Vijeo Sans Serif» as the font � Select «16» as the font size� Click OK

3 In the Inspector window, enter:� The text color = «orange (255,153,0)»� The BackColor = «transparent»� The LineColor = «transparent»

Graphical Editor

Text Editor

CancelOK

Water level data chart(History)

Vijeo Sans Serif

1: Language1

Normal

Language:

Font:

Font Style:

16Font Width:

16Font Height:

72 September 2003

Creating a project

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

CancelOK

Back

Vijeo Sans Serif

Language1

Normal

Language:

Font:

Font Style:

8Font Width:

16Font Height:

September 2003 73

Creating a project

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.

74 September 2003

Creating a project

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:

� Enter «Conditional» in the «Trigger» field.� Enter «value» in the «Trigger Variable» field.� Enter «On Data Change» in the «Trigger Condition» field.� Rename «Script 1» as «Over_100».

Manual_V41 — Vijeo-Frame — [Target1 — Configuration]Designer

Vije

o

Designer

Vije

o

Manual_V41Designer

Vije

o

Application Scripts

Alarms

Target1

Popup Windows

Languages

IO Manager

Graphical Panels

Tool…Vijeo… Var…Designer

Vije

o Project

1: Panel1

Rename PanelReport…

Cut PanelCopy 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 ViewArrange

Data Files

InspectorPanel Script

Name Over_100

Trigger Conditional

Trigger Variable value

Trigger Condition On Data Change

September 2003 75

Creating a project

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

76 September 2003

Creating a project

Create the «Refresh_per_sec» 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.

InspectorPanel Script

Name Refresh_per_sec

Trigger Periodic

Frequency [msec] 1 000

September 2003 77

Creating a project

78 September 2003

September 2003

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

79

Project Download

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.

80 September 2003

Project Download

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.

September 2003 81

Project Download

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.

82 September 2003

Project Download

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:� Ethernet: an Ethernet network is used to download data.� File System: Data is downloaded to a CF Card.� 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.

September 2003 83

Project Download

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.� IPAddress� SubnetMask� DefaultGatewayIf you select Serial as your download method, be sure to enter the following data.� COM Port� Baud Rate

5 In the «Navigator» click on «Target1» then click right to select «Download».

InspectorTarget

Name Target1

Description

Type XBT-G Series

PanelSize

InitialPanelID

StartUpDelay [sec]

XBT-G4330 (640×480)

Buzzer1 : Panel1

0

Enabled

Download

TargetColor 256 Colors

ToConfiguration Top Left Corner

Ethernet

EthernetFile SystemSerialcal

84 September 2003

Project Download

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

September 2003 85

Project Download

86 September 2003

CBIndex

AAnimation, 59, 63

BBlinking lamp, 41Building, 82Button, 45, 68

CConduit, 63Configuration, 29Connection, 11Create a graphic, 70

DData transfer, 82Download, 85

EEdit variables, 11Ethernet, 82

GGeneration, 82Graduated scale, 59Graphic, 70

September 2003

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

HHMI, 10

IInstallation, 17

LLevel indicator, 59

MMulti-language, 11

RReport, 11Re-use the data, 11

SScript, 76Scripts, 11Simulation, 84Starting Vijeo Designer, 28, 30

87

Index

TTank, 59Target devices, 12

UUninstall, 20

VVariables, 32, 63

88

September 2003

Vijeo Designer Basic Configuration

A. Introduction of Vijeo Designer Basic

       Vijeo Designer Basic is software that functions to design (Buildtime), download, and simulate the application of a Human Machine Interface (HMI) system, while for running programs (runtime) already included in the HMI. But if you use Personal Computer (PC) or iPC (Industrial PC) as its running program, runtime is needed. For Vijeo Designer Basic, there is no runtime available on PC, only in Vijeo Designer Version 6.x.
Vijeo Designer Basic for the Magelis GXU series products, including:

In practice this time, the HMI to be used is the HMIGXU3512 type (7 inch wide HMI, Universal model, 2 serial ports, 1 Ethernet port) which will be connected to the M221 PLC.

After installing the application, follow the steps below.

1. Open the Vijeo Designer Basic Shortcut on the Desktop or Start Window

2. Then the display will open as below, to create a new program select Creat