SYS500Pied

Documentation version: A

Copyright © 2000 ABB Substation Automation Oy All rights reserved.

Notice 1

The information in this document is subject to change without notice and should not be construed as a commitment by ABB. ABB assumes no responsibility for any error that may occur in this document.

Notice 2

This document version complies with the program revision 8.4.3.

Notice 3

Additional information such as Release Notes and Last Minute Remarks can be found on the program distribution media.

Trademarks

Microsoft is a trademark of Microsoft Corporation. Windows NT is a trademark of Microsoft Corporation. LONWORKS is a registered trademark of Echelon Corporation.

SYS 500

Picture Editing

Configuration Manual

1MRS751255-MEN

ABB Automation

Related SYS 500 and MicroSCADA Technology Manuals

The following SYS 500 manuals are published with this software release.

Installation 1MRS751254-MEN

Picture Editing 1MRS751255-MEN

Visual SCIL User Interface Design 1MRS751256-MEN

Visual SCIL Objects 1MRS751257-MEN

System Management 1MRS751258-MUM

The following MicroSCADA technology manuals are published with this software release.

Connecting LONWORKS Devices to MicroSCADA 1MRS751249-MEN

System Configuration 1MRS751248-MEN

System Objects 1MRS751252-MEN

Application Objects 1MRS751253-MEN

Programming Language SCIL 1MRS751250-MEN

Contents

Page

1

Introduction ...1

2

Using the Picture Editor ...5

2.1 General ... 5

2.2 Handling Picture Files... 6

2.3 General Functions ... 10

2.4 Editing Elements ... 16

3

Background ...23

3.1 Selecting Graphic Features for Elements ... 23

3.2 Drawing Graphic Elements ... 31

3.3 Editing Existing Graphic Elements... 37

4

Windows ...41

4.1 Overview ... 41

4.2 Defining Windows... 43

4.3 Defining Internal Representations ... 45

4.4 Defining Library Representations ... 58

4.5 Defining Picture Representations ... 64

5

Function Keys ...67

5.1 Overview ... 67

5.2 Creating Function Keys ... 68

5.3 Defining Function Keys... 68

6

Picture Programs ...71

6.1 Overview ... 71

6.2 Using the SCIL Editor ... 72

6.3 Compilation of Picture Programs ... 73

SYS 500

Picture Editing

Configuration Manual

7

Picture Functions ...77

1

Introduction

About this Chapter

This chapter gives a brief presentation of picture handling in MicroSCADA. It intro-duces the picture editing facilities, picture elements and the editing procedure. It also describes how the pictures are stored.

Presentation

MicroSCADA is a microcomputer-based programmable system for remote and local supervision and control of energy distribution, water purification, etc. The main func-tions of MicroSCADA are man-machine communication - interaction between op-erator and control system - supervision and control, alarm and event handling, data acquisition, calculation and reporting.

Pictures in MicroSCADA

The operator can use pictures to monitor and to control the process. A variety of pic-tures and picture functions are available:

• Pictures visualize the controlled process with symbols and colors.

• The operator controls the process from screen with function keys placed in pic-tures.

• The operator enters data in the pictures.

• Pictures inform the operator about alarms and events.

• Pictures illustrate process data and historical data as tables and graphs.

• By using pictures the operator supervises and controls components of the Micro-SCADA system, for example printers and communication lines.

• Menu pictures help the operator to select reports, process control pictures, trends, alarm and event lists or tools to the screen.

Picture Editing Facilities

The physical picture editing facilities are the same as the operating facilities, which are a color display, a keyboard and a mouse. You can use any operator console for picture editing.

You create and edit pictures with picture editors. There are two different picture edi-tors in MicroSCADA. The full graphic picture editor is used with Visual SCIL (VS) monitors and the other, the semigraphic picture editor, is used mainly with other monitors or to edit semigraphic elements of old pictures. This document describes the full graphic picture editor. To learn about the semi-graphic picture editor, please refer to 8.2 manual “Picture Editing”.

SYS 500

Picture Editing

Configuration Manual

Picture Components

A picture contains the following components:

• Picture background. The picture background is the static, unchanging part of the picture. In revision 8.4.3 the picture background is usually made with the full graphic editor. You can also use the semigraphic picture editor, for example to edit semigraphic elements.

• Windows. Windows are the dynamic parts of the picture that can be shown, erased and replaced without any impact on the other picture components. Win-dows may show complete pictures, text or data, figures or graphs. You can place them anywhere in the picture, even so that they overlap one another.

• Function keys. The function keys are regtangular programmed areas. When you click a function key, a program or a data entry is executed.

• Picture programs Programs define the behaviour of the picture. A picture can contain seven types of programs:

• A start program. • An update program. • A draw program. • A background program. • An exit program. • Key programs. • Named programs.

• An error handling program.

Programs are written with a system-specific high-level language SCIL.

• Picture functions A picture function is a set of picture components that may clude all components mentioned above in this list. When a standard function is in-stalled from a library, a copy of it is added to a picture as a picture function.

Picture background Picture function Windows Functionkeys

Figure 1. An example of the picture components, except picture programs, are shown in this figure.

A picture may contain windows containing pictures. It may also contain a number of picture functions, which are, likewise, constructed as pictures. The picture functions and the pictures shown in windows can be regarded as “sub-pictures” or “part pic-tures” of the whole picture, which is called “main picture”. The sub-pictures in turn may have their own sub-pictures, which means that a hierarchical picture structure is obtained.

Do not mix the MicroSCADA internal windows and application windows. Internal windows are parts of a picture and the application windows are parts of the screen.

Picture Editing Procedure

All picture components are created and edited in the picture editor. You can add the components in any order. You do not have to use all the picture components. For ex-ample, a picture can include only a background, window or start program. If you want to display a picture as a main picture, it should at least have an exit key.

MicroSCADA pictures can be edited almost without restriction. However, you cannot edit the picture while it is being used. Likewise you cannot open the same picture in two different editors at the same time.

Picture Handling and Storage

Pictures are stored in files under the picture names with the extension .PIC. The files are situated in various standardized file directories, where they can be accessed ac-cording to the “four letter rule”. Therefore, if the path is not given in the name defini-tion, the first four letters in the name are compared to the logical path definitions. If a match is found, then the file is searched for according to the path definition. If a match is not found the file is searched for according to PICT logical path definition. For example a picture named SYS_TEST is searched for in the SYS_ folder. Pictures can be changed using !NEW PIC command. For more information, see Programming Language SCIL manual.

SYS 500

Picture Editing

Configuration Manual

The most frequently used pictures are also stored in main memory, in the picture cache memory, which makes the picture handling faster. When the memory is full, the least requested picture is removed.

2

Using the Picture Editor

About this Chapter

This chapter describes the general principles of how to use the Picture Editor. 2.1 This first section gives an overview of the full graphic picture editor. It

describes entering and exiting from the full graphic picture editor. 2.2 The second section is about handling picture files. An explanation of

how to create a new picture, open an existing one or how to save a pic-ture is given. Commenting a picpic-ture and creating a revision history is also described.

2.3 The third section tells you about the general functions in the full graphic picture editor. The various modes that you can select, removing semi-graphs, refreshing screen and the graphic layers of a picture are dis-cussed. There is also an overview of picture size and quadrants.

2.4 The fourth section describes editing elements. This includes a discussion of selecting, moving, using snap and grid, aligning, copying, deleting and zooming.

2.1 General

Overview

Picture Editor is used like Windows programs, for example with the help of menus. In the Picture Editor you can either create a new picture or edit one that already exists. You can edit picture parts in any order. Those functions that have no effect are grayed out to show that they are disabled.

When you enter the editor, an empty drawing area is shown. You can then begin to create a new picture, which you usually start with the background. Picture programs are written in the SCIL Editor, which is a tool in the Picture Editor.

Entering and Exiting the Picture Editor

To enter the full graphic picture editor, enter the Tool Manager and choose Picture Editor with blue icon. To use the semigraphic picture editor, choose Picture Editor with black icon and refer to 8.2 manual “Picture Editing”.

To exit from the full graphic picture editor, choose Exit from the File menu. If you have not saved the picture, you are asked to do it now.

SYS 500

2 Using the Picture Editor

Picture Editing

Configuration Manual

1MRS751255-MEN

ABB Automation 6

Menu and Toolbars

The menu bar and toolbar of the Picture Editor are shown in the Figure 2. Select the functions either by clicking the correct button in the toolbar or their names in the menu bar at the top of screen. There is a drawing toolbox at the left side of screen. The buttons for snap, grid, color, font and zoom are at the bottom of screen. There are also two fields and a drop-down list box in the upper right corner of screen, also shown in the Figure 2. The first field shows the size and position of the selected ele-ment and the second shows the position of the mouse pointer. All the coordinates and sizes are always presented as SCIL coordinates. If one of the values is ambiguous or not valid, then “0 x 0” or (0, 0) is used. The drop-down list box indicates the name of the currently selected picture function or window, and the selected picture function or window can also be changed from this list.

Figure 2. The menu and toolbar

The first button in the Toolbar is the Open button and the second one the Save button. The next three buttons are Cut, Copy and Paste buttons. The sixth button is Bring To Front button and the seventh button is Send To Back button. The next two buttons are Ungroup and Group buttons. The tenth button is Rotate -90 button and the eleventh button is the Rotate +90 button. The Next four buttons are Background mode, Picture Functions mode, Function Keys mode and Windows mode buttons.

2.2

Handling Picture Files

General

From the File menu you can choose options to create a new picture, open an old one, or save the one you have on screen. You can also exit from the Picture Editor. These functions, among others are discussed in this section.

Creating a New Picture

An empty drawing area appears when you enter the Picture Editor. You can then start to create a new picture. If you already have another picture on the screen, click New in the File menu. Note that you can only edit one picture at the time. Save the changes to the previous picture before starting to create a new one. If you click New, but you have not saved changes to the picture, you are asked to do it now.

Opening an Existing Picture

Pictures that have been saved normally can be found in the PICT directory. There are three ways to open an existing picture for editing:

• Choose the name of the picture from the File menu, where the most recently ed-ited pictures are listed, if the file history is not disabled. See Figure 3. The number of the recently edited pictures shown in the File menu can be altered between 0 and 20 from File History Length… in the Options menu. If 0 is selected, the file history is disabled.

• or:

1 Choose Open by File Chooser… from the File menu. In the File Chooser the ex-isting files are listed and you choose pictures according to their location in the file system, see Figure 4.

2 Select the name of the picture you want to open and then click Open.

Figure 4. The File Chooser in the Picture Editor

• or:

1 Choose Open by Name… from the File menu. You can then type the name of the picture in the dialog box that appears. See Figure 5. The picture name can be typed

SYS 500

2 Using the Picture Editor

Picture Editing

Configuration Manual

1MRS751255-MEN

ABB Automation 8

with or without a logical path. If the name is typed without the logical path, the picture is searched with “four letter rule”.

2 Click OK.

Figure 5. The dialog box for opening a picture by its name

In the File Chooser the paths can be selected in four different modes:

Application Relative Paths Path representation in the MicroSCADA path format relative to the current MicroSCADA application home directory. The application home directory itself can't be referenced.

MicroSCADA Relative Paths Path representation in the MicroSCADA path format relative to the MicroSCADA root directory. The Mi-croSCADA root directory itself can't be referenced. Logical Paths Path representation in the MicroSCADA logical path

format.

Operating System Paths Path representation in the format used by the operat-ing system.

The default path mode is Logical Paths and the default folder is PICT, but the last used path mode and folder are saved and restored between editing sessions. The size of a file and the time of the last save operation are shown in the File Chooser, as shown in Figure 4.

In the Picture Editor one picture can be edited at a time. Loading a picture replaces the one, which was previously shown on screen. If unsaved changes had been made to the picture previously on screen, a question is asked before opening the next picture whether to save the changes or not.

Saving a Picture

To save a picture that has not been saved before:

1 Choose Save As from the File menu. The File Chooser appears as Save As dialog box.

2 Select the wanted path and folder.

3 Enter the filename you want to use by clicking the ‘Save as’ text box and type the filename there. Use at maximum 10 characters in the filename. The extension (.pic) is added to the given filename automatically. You can use letters A-Z, num-bers 0-9, and the underscore character ( _ ). Begin the filename with a letter.

4 Click Save.

Filenames that coincide with a name reserved by the operating system cannot be used e.g. LPT1, COM1, etc.

To save a picture, which has already been saved, choose Save from the File menu, click the button with diskette in the toolbar or press CTRL+S at the same time. To save a picture under another name, do it in the same way as you save a picture that has not been saved before. New folders can also be created in the File Chooser by select-ing the right path and clickselect-ing on the create directory ( ) button. Type the name of the new folder in the appearing Create Directory dialog box, or define the logical path in the opening Path & Rep_Lib Viewer tool (opens only when Logical Paths is se-lected in the File Chooser). The four modes for selecting paths in the File Chooser are listed on page 8.

Viewing Picture Format

The format of the picture is important information when working with several differ-ent formats at the same time. The picture format can be viewed as follows:

1 Select Show Picture Format from the Help menu of the Picture Editor, see Figure 6.

2 The dialog box shown in Figure 7 appears. The pictures can be either of the old pre 8.4.2 or of the new 8.4.2 format.

Figure 6. The help menu

Figure 7. The dialog box for viewing the picture format

Comments

A picture comment can include the name of the originator, the date of creating or ed-iting the picture, its connection with other pictures and other relevant facts. You can read or write them in the Comment dialog box. In the comment line you can have at maximum of 68 characters.

1 To type, edit or read a comment, choose Comment from the Edit menu. The dia-log box shown in Figure 8 appears.

SYS 500

2 Using the Picture Editor

Picture Editing

Configuration Manual

1MRS751255-MEN

ABB Automation 10

2 Type the text you want to add in the text box and click OK. Editing and reading the comment is also done in the same dialog box.

Figure 8. In this dialog box you can type, edit or read a comment that gives infor-mation about the picture.

You can include the picture comment in the picture document. It is another way to document pictures. Automatic documentation functions in MicroSCADA make it easier to document the application. They allow you to choose objects, which will be included in the document. You should note that a description of full graphic elements can not be included in the document. The result is a printed document covering the details of the application.

Revision History

You can write a revision history of the picture of up to 10 000 lines long. To type, edit or read it:

1 Choose Revision History from the Edit menu.

2 Type, read or edit the text in the editor that appears. Fill in the template form with the help of the titles and empty rows that are inserted in it.

2.3 General

Functions

Selection of Modes

• Background.

• Function Keys.

• Picture Functions.

• Windows.

In background mode you can add, delete or edit graphic elements. In windows mode you can add, delete or edit windows. You can edit function keys in the function keys mode. Picture functions are installed and configured in the picture functions mode. Only the valid menu items and buttons are always enabled in every mode.

When you open the Picture Editor, it is in background mode. To change the mode, choose the name of the mode you want to use from the Edit menu. Note that windows and function keys modes for the main picture cannot be chosen when the picture edi-tor is in the picture function mode. Choose the background mode first. Then all the other modes can be chosen for the main picture. If you have a picture function

se-lected in the picture function mode, you can choose the windows and function keys modes for that picture function.

You can also change the mode in the toolbar by clicking the mode buttons. For more information, see the page 6.

Removing Semigraphics

The full graphic picture editor does not support editing semigraphic figures. You can edit them in the semigraphic picture editor, which is also a part of the revision 8.4 of MicroSCADA. There is only one function you can do to a semigraphic element in the full graphic picture editor; you can remove the whole semigraphic background of the main picture.

To remove the semigraphic background:

1 Choose Remove Semigraphics from the Edit menu.

2 A dialog box, which is shown in Figure 9, appears. Click Yes.

Figure 9. This dialog box expects you to confirm that you want to remove semi-graphics before it removes them permanently.

Graphic Layers

Different graphics layers are drawn in the picture editors. The main graphic layers of pictures that are created using the full graphic picture editor are listed below, starting with the uppermost layer. The main graphic layers that contain picture functions are further divided into separate layers for all installed picture functions and in some cases a layer for the main picture graphics. The main graphic layers are:

• The uppermost layer is the start program of the picture functions.

• The second layer is the start program of the main picture.

• The third layer is the full graphic drawing programs of the main picture and pic-ture functions.

• The fourth layer is the full graphic background programs of the main picture and picture functions.

• The fifth layer is the semigraphic background of the picture functions.

SYS 500

2 Using the Picture Editor

Picture Editing

Configuration Manual

1MRS751255-MEN

ABB Automation 12

The currently applied order of graphic layers is shown in the Drawing Order dialog box. The default execution order of picture function layers inside main graphic layers one, three, four and five is the order in which those picture functions were installed. In the Picture Editor you can freely choose the execution order of picture functions and main picture graphics. Therefore you cannot change places of main graphic lay-ers. The order of main picture and picture functions inside layers one, three, four and five may be changed. It is done using the options from the Arrange menu.

To see the current drawing order, choose Drawing Order from the View menu. The dialog box shown in Figure 10 is shown on screen.

Figure 10. The current drawing order of the graphic layers is shown in this dialog box.

Change the order of graphic layers by using the options from the Arrange menu. When a new element is added to the picture background, it is placed on top of the previous ones. When elements have the same location or they overlap, the new ele-ment will cover the previously drawn one.

By using the options from the Arrange menu in several different ways you can put elements into correct order. You can send backward or bring forward background elements and picture functions, but not windows or keys.

Figure 11. The Arrange menu in which the raising, lowering and aligning functions are chosen

Bring to Front Places the selected element in front of other elements. See Figure 12.

Send to Back Places the selected element behind the others.

Bring Forward Raises the selected element one level, in other words it moves the element in front of the element that is currently placed directly on top of it.

Send Backward Lowers the selected element one level, in other words, it moves the element behind the element that is currently placed directly beneath it.

SYS 500

2 Using the Picture Editor

Picture Editing

Configuration Manual

Raise one level

2

1

1

1

2

2

3

3

3

(a)

(b)

Figure 12. (a) Bringing element 1 to the front. (b) Bringing element 1 forward one level.

There are several ways to change the order of elements and one possible way is de-scribed here:

1 Select the element you want to place behind the others.

2 Choose Send to Back from the Arrange menu. See Figure 11. 3 Select the element you want to place as the second lowest element.

4 Choose Send Backward from the Arrange menu. Choose it again, if you have Several layers of elements and the selected element is not yet in the right place. 5 If the order is still not correct one, select the element you want to move and choose

Send Backward repeatedly until the element is in the correct position.

Refreshing Screen

In some situations screen does not show the graphics as they will appear In the final drawing. This might happen, for example, when an element which lies behind other elements is edited. In this case it will be brought to the foreground. To get a real view of the picture, choose Refresh from the View menu. The picture will be drawn again.

Picture Size

Normally the size of the picture is equal to the size of the drawing area that is shown on screen. The size can be changed and there are three methods for doing so:

• By Pointing.

• By Inputting.

• Automatically.

All three methods always include automatically all picture functions and function keys in the picture. Those objects can not be excluded, whereas graphical elements and windows can be excluded from the picture. The minimum size in SCIL units, if no picture functions or function keys appear outside this area, is 16x20 and the maxi-mum is 1280x960.

By Pointing method for resizing a picture in the Picture Editor is used as follows: 1 Choose By Pointing from the Picture Size submenu of the Format menu. A dash

lined rectangle for defining the new size appears in the upper left corner of the Picture Editor.

2 Move the mouse pointer to determine the new size for the picture. The dash lined rectangle follows the mouse pointer indicating the new size.

3 When the rectangle indicates the desired new size, click on the position of the mouse pointer to resize the picture.

The second method for resizing a picture is By Inputting, as follows:

1 Choose By Inputting from the Picture Size submenu of the Format menu. A New Picture Size dialog box appears.

2 Define the new size for the picture in the Width and the Height boxes of the dia-log box. The size must be in SCIL units.

3 Click on OK to accept the new picture size, or on Cancel to cancel the operation. A picture can be resized also automatically. This method can be used as follows: 1 Choose Automatically from the Picture Size submenu of the Format menu. 2 The picture is resized to include all the background graphics, graphics from the

DRAW program of the main picture, picture functions and function keys in the picture without any user interaction. The picture size is automatically rounded up to the next semigraphical unit.

To have the new size when the picture is opened the next time, the picture must be saved before closing it in the Picture Editor. If you also want to keep the old version of the picture, you will have to save the new one using another filename.

Quadrants

The Control Board is divided into four quadrants. To use quadrants:

1 The picture you have on screen has to be the one you want to use in the first quad-rant, that is the upper left quadrant of the control board. Choose Quadrants from the Edit menu.

SYS 500

2 Using the Picture Editor

Picture Editing

Configuration Manual

1MRS751255-MEN

ABB Automation 16

2 In the first text box of the dialog box type the name and the logical path of the picture you want to show in the second quadrant.

3 In the second text box type the name and the logical path of the picture you want to show in the third quadrant and in the third text box type the name and the path of the picture you want to show in the fourth quadrant.

2.4

Editing Elements

General

The editing of existing elements (background elements, function keys, windows, pic-ture functions) starts by selecting an element. All types of selected elements can be moved, deleted, aligned and zoomed. The size, shape, text and the graphic features can be changed for background elements. The size of a function key can also be changed. The background elements, windows and function keys can be copied. Back-ground elements and picture functions can be brought to the front or sent to the back. Elements that are created by SCIL commands in the draw program are shown in the Picture Editor, but they cannot be edited.

Figure 13. The Edit menu

Choose the basic editing functions from the Edit menu. There are also several other editing functions which can be chosen from other menus. The functions available from the Edit menu are shown in Figure 13. You can also choose some functions by clicking the relevant buttons in the toolbar. The toolbar is located at the top of the Picture Editor.

Selecting an Element

To edit an element, first select it. Selection is done in the mode in which the element is edited (for example background elements in the background mode). To select an element:

1 Click the button with the black arrow in the drawing toolbox. 2 Click the border of the element. Handles will appear in the border.

If you have one element selected but you want to select another one, choose the Select Next from the Edit menu. This function selects the closest element to the previous one. If you choose Select Next again, the closest element that has not been selected before is selected. By repeating this action you can select the one you want. This is an important feature, if you have small elements, which are drawn close to each other. In this case selecting the right one with the mouse pointer might be difficult.

You can select several elements by holding the Shift key down while moving the pointer from one element to another one and clicking the mouse button above the elements to be selected. If you press the mouse button above an element and the Shift key is not pressed, all previously selected elements are unselected and only the cur-rent one is selected. If you click the mouse button above an already selected element and shift is pressed at the same time, only that element is unselected.

Select all elements by choosing Select All from the Edit menu. Unselect all the se-lected elements by choosing Unselect All from the same menu. All elements in a specified area are selected by pressing down the mouse button in one corner of the area. Then the pointer is dragged to the opposite corner, holding the mouse button down. This only works when no elements have already been selected.

Moving an Element

2 Show the new location by pressing the mouse button down in the middle of the element and keeping it down while dragging the pointer to the new position. A selected element can also be moved by using the arrow keys (on the keyboard). If the Shift key is pressed down, the elements move one grid point with the arrow key. In the background mode the elements move one SCIL unit when the arrow key is pressed (without the Shift key). In window, picture function and function key modes the elements always move one grid point, which is equal to 16 horizontal and 20 ver-tical SCIL units. This particular grid unit size belongs to a system of 48 lines with 80 character positions each. Note that a SCIL unit is usually not equal to a pixel.

To move an element (except a picture function) from one picture to another: 1 Select the element.

SYS 500

2 Using the Picture Editor

Picture Editing

Configuration Manual

1MRS751255-MEN

ABB Automation 18

3 Open the picture into which you want to place the element. If you have not saved changes to the old picture, you can also do it at this point. Choose Paste from the Edit menu.

4 The new element, which was moved from another picture, appears in the upper left corner of the drawing area.

5 Hold the mouse button down on it and move it with the pointer to the correct posi-tion.

While pasting windows or function keys, when the temporary positioning box is still visible, the Paste operation can be cancelled by pressing ESC key on the keyboard. This removes the positioning box and cancels the paste operation.

Snap and Grid

Snap and Grid are facilities which help you to move and align elements. The grid fa-cility includes horizontally and vertically aligned points with a selected space. The grid system can be shown or hidden.

Using the Snap option means that all end points of the elements are fastened to certain points in the drawing area, the snap points (Figure 14). The pointer jumps to snap points when you are drawing. The spaces between snap points are equal to the grid space. Grid space (and therefore also snap space) is changed by choosing Grid from the Format menu. The dialog box that appears is shown in Figure 15.

Figure 14. The Grid and Snap features are chosen from the Options menu

Figure 15. The grid space can be changed in this dialog box

To use snap option, choose Snap On from the Options menu. To use grids, choose Grid On. You can also choose them by clicking the Snap and Grid check boxes at

the bottom of the picture editor. Both snap and grid functions can be on at the same time. When they are both on, the pointer moves to the grid points. You can also see the grid points so that you are able to align elements precisely.

Aligning Elements

Several elements can be aligned according to their top, bottom, center, left or right side. You can align background elements, function keys or picture functions. Align-ment functions place the eleAlign-ments so that one point of each eleAlign-ment is on the same line.

• Top alignment arranges all of the selected elements according to the uppermost selected element and its uppermost point.

• Bottom alignment places the elements according the lowest selected element, and its lowest point.

• Center alignment is done either horizontally or vertically. Horizontal center alignment moves the elements to the line that is located in the middle of the center points of the uppermost and lowest element. Vertical center alignment moves the elements to the line that is located in the middle of the center points of the ele-ments that are first in the left and last in the right side of the drawing area.

• Left alignment aligns according to the element that is selected and begins first in the left side of the drawing area.

• Right alignment places the elements according the element that is selected and reaches the farthest point to the right side of the drawing area.

To align elements:

1 Select the elements you want to align.

2 Choose the alignment function you want to use from the Arrange menu.

Update Coordinates

The place of the pointer is updated all the time at right side of the tool bar. If you do not want to update the coordinates all the time, you can cancel the selection Update Coordinates in the Options menu. This might be usefull to fasten the operating speed of the Picture Editor.

Copying an Element

To copy an element within a picture: 1 Select the element.

2 Choose Copy from the Edit menu.

3 Then choose Paste. The new element, which was copied, appears next to the original location, unless the visible drawing area has been changed from the origi-nal, then the pasting will appear in the upper left corner of the new visible area. 4 Move the element to its correct position. This is done by pressing down the mouse

SYS 500

2 Using the Picture Editor

Picture Editing

Configuration Manual

1MRS751255-MEN

ABB Automation 20

to its new position. If a second element is pasted before the first one is moved, it will be placed right and down of the last pasted element.

Selected elements can also be copied to a buffer by clicking the button in the toolbar with two text papers or pressing CTRL+C at the same time. The elements in the copy buffer can be pasted by pressing CTRL+V at the same time or by clicking on the tool with one white paper and one text paper symbol.

While pasting windows or function keys, when the temporary positioning box is still visible, the Paste operation can be cancelled by pressing ESC key on the keyboard. This removes the positioning box and cancels the paste operation.

To copy an element to another picture: 1 Select the element.

2 Choose Copy from the Edit menu.

3 Open the picture to which you want to place the copied element. If you have not saved changes to the old picture, you can also do it at this point.

4 Choose Paste from the Edit menu. The copied element appears next to the original element location.

5 Move the element to the correct position.

Deleting an Element

To delete an element: 1 Select the element.

2 Choose Delete from the Edit menu and the element disappears. This can also be done by pressing Delete (on the keyboard).

3 Click OK in the dialog box that appears to confirm that you want to delete the element.

If you do not want to confirm the delete function all the time, you can cancel the Con-firm Delete selection in the Tools menu.

When deleting picture functions that have connections to process objects, a question to delete also the process objects is asked. This question is made for each picture function containing connections. It includes the name of the picture function and the process object group as well as the group’s indices.

The fullgraphic picture editor does not support editing semigraphic figures. The only function that you can do to a semigraphic element is to remove it. For more informa-tion on this, please refer to page 11. Semigraphic elements can be edited in the semi-graphic picture editor, which is also part of MicroSCADA revision 8.4.

Zooming

To facilitate the drawing and editing of small elements you can zoom the whole pic-ture or just a part of it.

To zoom the whole picture background, choose the percentage to zoom with in the View menu. This can also be done in the box in the lower right corner of the picture editor. The percentage in the box is changed by using the spinner or by typing the cor-rect number in it. Zooming can also be done in the View menu by selecting Zoom In or Zoom Out. These functions zoom the picture by ten percent.

To zoom a part of a picture, so that this part will cover the whole drawing area, do the following:

1 Click the button with a magnifying glass in the lower right corner of the Picture Editor.

2 Then select the area you want to zoom. To select the area, press the mouse button in a corner of the area and hold it down while dragging the pointer to the opposite corner of the area you want to select. Then release the button and the correct zoom ratio is selected automatically.

3

Background

General

You can use the following functions in the Picture Editor:

3.1 Selecting graphic features for the elements: color, line style and width, font. Also the procedure of grouping elements is also described.

3.2 Selecting types of graphic elements and drawing them. You can select for example line, rectangle, circle, ellipse or arc.

3.3 Editing existing elements, for example changing size and shape, rotating elements, changing color or editing text.

3.1

Selecting Graphic Features for Elements

General

You can choose or modify the graphic features any time during the picture back-ground editing. The graphic features that can be changed are color, font, line style and width. Each of the graphic features has a default setting (for example color is white, line width is the first narrow line and style is solid). To use default or previously changed settings, you do not need to change anything. The procedure of selecting features is described in this section.

You can group elements that should have common features. This function allows you to change graphic features for several elements at the same time, instead of changing them separately for each element. When a group feature is changed, all elements be-longing to the group in question are changed accordingly. The graphic features can also be copied from an existing element. Each element belonging to a certain Graph-ics Contents (GC) group gets all its graphic features.

If an element is selected, the selection of graphic features affects that element. If there are no elements selected and you change graphic features, all elements created after this are affected.

Selecting a Color for Drawing

You can choose a color freely among a number of predefined standard colors with recommended purposes and a number of application colors, which you can specify. You can obtain any color with the RGB Color Mixer.

To select a color for drawing, click the color you want to use from the color bar. See Figure 16. The chosen color is shown separately beneath. The name of the color is also written beside it. If the color you want to use is not in the color bar, replace a color with the new one. This procedure is described in the next section, on page 24.

SYS 500

Picture Editing

Configuration Manual

Figure 16. The color bar on the bottom row of the Picture Editor, stating that the color blue is chosen.

Replacing a Color in the Color Bar

If the color you want to use is not shown in the color bar, replace a color with the one you want to use. To get a new color to stay on the color bar one of the standard colors has to be replaced with the new one, this is done as follows:

1 Select a color to be replaced by clicking the respective button of the color on the color bar, when no elements are selected. See the Figure 16.

2 Click the button with colored circles, located on the bottom row of the color bar as shown in the Figure 16. The Color chooser appears. See the Figure 18.

3 Choose one from four alternative color types by selecting the appropriate page. Then choose the color you want to use.

4 When the color is chosen, click on Apply to get the color to the color bar or on OK to get the color to the color bar and to close the Color chooser. Cancel command button cancels the operation and closes the Color chooser. To get all the standard colors back to the color bar, the Picture Editor has to be restarted.

Figure 18. The User Colors page of the Color Chooser where colors can be changed

System Colors The System Color group includes predefined colors that all have a specific purpose. You are supposed to use each color for the same purpose every time.

To select and/or modify the System Colors:

1 In the System Colors tab, in the list box, click the color element that you want to select or modify. See Figure 19.

2 Select the Color Mixer tab.

3 Select a ready made colour or make your own colour mix. The selected colour is shown in the lower left corner under the text Selected Color.

4 Click Apply, if you want to select or modify another color element, otherwise click OK, which closes the color selector.

Figure 19. The system colors are chosen from the list box that is shown in the Sys-tem Colors page in the Color Chooser.

User Color The User Color group contains predefined colors that do not have to be used for any specific purpose. Click the Color Selector drop-down list box. Then select the name of the color you want to use. The color is shown in the upper left corner of the dialog box under the text Selected Color.

The RGB Color The RGB Color stands for Red Green Blue Color Mixer. With this tool you can freely mix your own color with shades of red, green and blue. The selection is done in the dialog box shown in Figure 20. Choose a shade of red by scrolling the pen with the black ar-rows. You can also move the red pen with the mouse. This is done by holding the mouse button down while dragging the pointer to

SYS 500

Picture Editing

Configuration Manual

the desired location. The current color with its selected shades is shown in the upper left corner of the dialog box. Then select shades of green and blue in the next rows in the same way as se-lecting the shade of red. After the correct shades for red, green and blue are chosen, the color is ready. Click OK.

Figure 20. A color can be mixed using shades of red, green and blue

Semigraphic color Semigraphic color is a color that can be chosen from the group of eight semigraphic colors. Click the Color Selector drop-down list box. Then select the name of the color you want to use. The color is shown in the upper left corner of the dialog box under the text Selected Color.

Filling Elements with a Color

Some drawn elements can be filled with the same color that is used in its border. The elements that can be colored are arc, circle, polyline and rectangle.

To fill an element with the same color that is used in its border:

1 Click the black arrow in the drawing toolbox. Then click on the border of the element you want to color.

2 Click the second button in the drawing toolbox, the button with a can pouring blue color.

To remove the fill, select the element and click the same button. This will unfill the color.

Line Style and Width

Lines can be solid, dashed, dotted, or a mixture of them. There are six options, which are shown in the Figure 21. There are different line widths available.

To change line style:

1 Choose Line Style from the Format menu.

2 Various styles are shown. Select the style option you want to use.

Figure 21. The dialog box where line style is chosen

3 Click OK.

To change the line width:

1 Choose Line Width from the Format menu.

2 Various widths are shown, see Figure 22. Select the width you want to use.

Figure 22. The dialog box where line width is chosen

SYS 500

Picture Editing

Configuration Manual

Choosing a Font

Choose the font you want to use before typing any text. To choose the font: 1 Click the button with the letter “F” at the bottom of the window. The Font

Chooser shown in the Figure 23 appears.

2 In the Font dialog box you can choose Mixed, System or User fonts page. Choose the System fonts.

3 From the System font list box you have a choice of predefined fonts. Select the font you want to choose. After choosing a font, a sample of it will appear at the bottom of the dialog box. The number of the font is shown on the right side of the System font list, this is also shown as a sample of the font. To use a font that is not listed, add it yourself to your user fonts.

4 Click OK.

Figure 23. The font is selected in this dialog box

In the Mixed Fonts page, shown in Figure 24, any family, face name and font size can be typed to the corresponding fields, but only existing fonts can be selected. The de-fault families shown in the Mixed Fonts are the ones currently used by the System and User Fonts.

Free fonts, on Mixed Fonts page, are only for special needs, because they are monitor dependent. The fonts defined with an exact font family, face and size are shown exactly as designed only on the same monitor type (VS Local, VS Remote or X monitor) and the same picture size.

Figure 24. The Mixed Fonts page of the Font Chooser

Defining Text Alignment

Defining the text alignment means choosing the attachment point of the text. The at-tachment point is the place to which the cursor is attached while placing the text, and by which the placed text is anchored. The alignment possibilities are:

• Default

• Left

• Center

• Right

Default means usually Left alignment, but this is font dependent. To change the de-fault alignment for texts to be placed:

1 Check that no texts are selected.

2 Select one of the four alignments from the Text Alignment submenu of the For-mat menu. The new texts placed after this are now aligned according to the new selection.

Grouping and Ungrouping Elements

If you want to give the same graphic features to several elements or you want them to be handled together, for example moved together, it is convenient to define them as a group. If you only want to give the same graphic features for several elements you can

SYS 500

Picture Editing

Configuration Manual

form a GC (Graphical Contents) group. GC groups are discussed at the end of this section.

You can change a feature of a group in the same way as you change a feature of one element. Handling elements as a group is especially useful if some of the features may have to be changed at a later stage. A group can also include elements that do not have the same features as the other elements. This is only possible if the features are chosen before grouping. You cannot resize a group. A group cannot be cut or copied. To define a group:

1 Select the first element of the group.

2 Press the Shift key and hold it down while selecting the other members of the group.

3 Choose Group from the Arrange menu.

Now you can perform actions on the group or select features you want to give to the group.

It is also easy to add new elements to the group later. To add a member: 1 Select any member of the group.

2 Press the Shift key down and select the new member (or members) of the group. You will then have to redefine the group features, if every member of the group does not have the same ones already.

If you want to change a feature for a member of a group, but you do not want to change features for all members, ungroup the elements. To ungroup:

1 Select the group by selecting one element that is member of it. 2 Choose Ungroup from the View menu.

Choosing Features for a Group

Select one element of the group. Now the whole group is selected. After this select graphic features in the same way as you select them for a single element.

Graphical Contents Group

If you want to give the same graphic features for elements, but apart from that you do not want to handle them together, form a Graphical Contents group. To form a GC group:

1 Choose GC Groups... from the Format menu. The dialog box shown in the Figure 25 appears.

2 Click New.

3 In the dialog box that appears type the name of the graphical contents group. Click OK.

4 Choose the graphical features of the group. You can choose the color, font, line style and width that will be used. Defining graphical features is discussed in section 3.1. Click OK.

Figure 25. The graphical features for a GC group are chosen in this dialog box

To edit the features shown in the Figure 25 choose GC Groups... from the Format menu and change the features.

When no GC group is active in the Picture Editor, the GC Group combo box in the bottom of the Picture Editor shows the group name as (None). When an element is selected, at the same time the name of the GC group is selected from the combo box and the current GC group of the Picture Editor changes. When unselecting elements, the active GC group of the picture Editor does not change, but remains as the last se-lected.

To use the Graphical Contents (GC) groups:

1 Select the element or elements whose graphical features you want to change. 2 Choose the GC group in the text box at the bottom of the Picture Editor. The

graphical features of the GC group are applied to the element(s). If no elements were selected as instructed in the first step, only the active GC group of the Picture Editor changes.

3.2

Drawing Graphic Elements

General

You can select graphic features, for example color, line width and style and text font, before you start to draw. You can also do this after drawing by editing the elements. Begin drawing by selecting an element from the drawing toolbox. Select either basic elements (for example line, rectangle, circle) or compound elements. A graphic ele-ment is drawn by pointing out a location with the mouse, pressing the mouse button and holding it down while dragging the pointer to a second point.

Drawing Tools

The drawing toolbox includes buttons for basic drawing and editing tools. The up-permost button, the black arrow, is for selecting elements. SeeFigure 26. The second button is for filling elements. The next six buttons are for drawing the elements shown on the buttons. The button with the letter “A” is for typing text.

SYS 500

Picture Editing

Configuration Manual

Figure 26. The drawing toolbox

To open the additional part of the drawing toolbox, which includes the compound elements, choose Extended Toolbox from the Options menu. The extended toolbox is described in more details on page 35.

Straight Line

There are two ways to draw a line. To draw a straight line:

1 Click the button with the line symbol or choose Line from the Draw menu. 2 Place the pointer at the starting point of the line in the drawing area, hold the

mouse button down and drag the pointer to the end point. Release the button and a line is drawn.

Polyline

A polyline consists of several straight lines connected at sharp angles. If you choose the fill option for polyline, the polyline changes to polygon that is filled with the se-lected color. To draw a polyline:

1 Click the button with the polyline symbol or choose Polyline from the Draw menu.

2 Place the pointer at the starting point of the line in the drawing area, hold the mouse button down and drag the pointer to the angle point.

3 Release the mouse button and press it again to start drawing the next part of the line.

4 Release the button again at the next angle point. Repeat the procedure until the end point is reached.

5 Double-click at the end point of the polyline and the element is complete.

Circles

To draw a circle:

1 Click the button with the circle symbol or choose Circle from the Draw menu. 2 Place the pointer in the center of the circle.

3 Hold the mouse button down and drag until the circle reaches the size you want.

Ellipses

To draw an ellipse:

1 Click the button with the ellipse symbol or choose Ellipse from the Draw menu. 2 Place the pointer in the center of the ellipse.

3 Hold the mouse button down and drag the pointer both sideways and lengthwise until the ellipse is the size and shape you want to.

Arcs

Arcs are drawn as parts of a circle. Therefore drawing an arc begins by drawing a cir-cle. Then the part of the circle forming the arc is limited.

To draw an arc:

1 Choose Arc Modes from the Format menu. The alternative modes, Pieslice and Chord, are shown after you have chosen Arc Mode. You can select one of them. The Pieslice mode is chosen by default. If you change the mode in one picture, the mode will also be applied to the other pictures made in the editor before closing it, unless you change it again.

2 Click the button with the arc symbol or choose Arc from the Draw menu. 3 Place the pointer in the center of the circle in the drawing area.

4 Hold the mouse button down and drag the pointer until the circle reaches the size you want.

SYS 500

Picture Editing

Configuration Manual

Figure 27. From the Format menu you can choose one of the Arc Modes. The avail-able choices are Pieslice and Chord.

5 Place the pointer on the circle, on the point where the arc starts or ends. Press the mouse button down.

6 Move the pointer counterclockwise along the circle to draw the arc, or move it clockwise to remove parts of the circle. Hold the mouse button down during this procedure.

Figure 28. The arc modes. The upper filled arc is pieslice and the other is chord.

Rectangle

To draw a rectangle:

1 Click the button with the rectangular symbol or choose Rectangle from the Draw menu.

2 Place the pointer in one corner of the rectangle in the drawing area. Hold the mouse button down and drag the pointer to the opposite corner.

Compound Standard Elements

The buttons for compound graphic elements are raised fields, window frames and separators, in standardized colors and shadings. To draw compound elements:

1 Choose Extended Toolbox from the Options menu and the buttons for compound elements are shown on screen.

2 Click the button with the correct figure.

3 Place the pointer in one corner of the rectangle in the drawing area. Hold the mouse button down and drag the pointer to the opposite corner.

4 Release the mouse button.

With the help of buttons for compound graphical elements you can easily draw plex elements. You can draw for example window frames or raised fields. The com-pound graphical elements are made of boxes so that they can be drawn in the same way as boxes. They can also be edited individually.

Figure 29. The Extended Toolbox, which can be chosen from the Options menu

Text

A font has to be chosen before typing any text. This procedure is described under title Choosing a Font in page 28. To insert text in a picture:

1 Click the button with the letter “A” in the drawing toolbox or choose Text from the Draw menu. If a font has not been chosen, an error message

“No font defined.”

appears. Click OK and define the font as described.

2 The dialog box shown in the Figure 30 appears. Type the text in the text box and then click OK.

SYS 500

Picture Editing

Configuration Manual

In the resizable dialog box, shown in the Figure 30, it is possible to select between One line (text) and Multiple lines (text vector) type. The default type is One line, but when adding a new text without exiting the Picture Editor in between, the previously used type is used as the default. If Multiple lines is selected, the text field has the ver-tical scroll bar enabled and the OK button is not the confirm item of the dialog box, as it is for the One line type. If One line type is selected for a text with multiple lines, the first line is preserved.

3 The input text attaches to the cursor by its font dependent attachment point. Posi-tion the text to the place where you want to add the text and click the mouse but-ton.

Figure 30. In this dialog box type the text, which you want to add

When new text is placed into a picture, the alignment is Default by default, which in most cases means Left alignment. Other alignment possibilities are Left, Center and Right. To change the alignment of, for example a Left aligned text:

1 Select the text or texts to which the new alignment is to be applied.

2 Select either of the other two alignments, Center or Right from the Text Align-ment submenu of the Format menu. The text changes alignAlign-ment according to the new selection. Note that the alignment of an existing text can not be changed to Default.

Image

To insert an image as background of a picture:

1 Click the Image button in the toolbox or choose Image on the Draw menu. The Insert Image dialog box, shown in the Figure 31, appears.

2 Enter the name of a .VSO file or click Browse to select a with the file chooser. 3 Click Fetch Images.

4 Click the arrow in the drop-down combo box to see a list of available images in the file. The tag size to use depends on the size of the monitor. The tag sizes corre-spond to monitors 840*640, 960*720, 1280*960 and 1600*1200.

5 To customize height and width uncheck the predefined options and enter values for height and width in pixel units.

Figure 31. The Insert Image dialog box

To edit a background image: 1 Select the image.

2 Click the Image button in the toolbox or choose Image on the Draw menu. The Edit Image dialog box, shown in the Figure 32, appears.

3 Edit the width or/and the height by unchecking the predefined options and entering values for height and width in pixel units. Also the tag names can be altered. 4 Click Apply to make the changes take place or click OK to make the changes take

place and to close the dialog box.

Figure 32. The Edit Image dialog box

The VSO file name fields in the Figure 31 and the Figure 32 accept MicroSCADA relative paths, logical paths and operating system paths.

3.3

Editing Existing Graphic Elements

General

A selected element can be moved or deleted, its size, shape and the graphic features can be changed and texts can be edited. You can also bring the elements to the front

SYS 500

Picture Editing

Configuration Manual

or send them to the back. Elements that are created by SCIL commands in the draw program are shown in the Picture Editor but they cannot be edited.

Figure 33. The Edit menu

Choose the basic editing functions from the Edit menu. The functions in the Edit menu are shown in the Figure 33. Some of them can also be chosen by clicking the buttons in the toolbar. Several other editing functions can be chosen from other menus.

Changing Size or Shape

To change the size or shape of an element: 1 Select the element.

2 Place the pointer on one of the handles, hold the mouse button down and drag the pointer to the new location of the handle.

3 Release the mouse button.

Alternatively, use the arrow keys on the keyboard to move the handle one grid unit at a time.

Rotating an Element

A rectangle or hyperbola can be rotated by + 90, 180 or - 90 degrees. To rotate: 1 Select the element.

3 The option - 90 degrees rotates the element to the right and + 90 degrees rotates it to the left. The option 180 degrees rotates the element upwards. These options are shown on screen. Select the one you want to use. The element is rotated.

Changing the Color of an Element

1 Select one or more element(s).

2 Select the color that you want to use from the color bar. The color of the element is changed.

Another way to change the color: 1 Select one or more element(s).

2 Click the button with colored circles, located on the bottom row of the color bar as shown in the Figure 16 or select Color from the Format menu. The Color chooser appears with the current element color selected, see the Figure 18.

3 Choose one from four alternative color types by selecting the appropriate page. Then choose the color you want to use.

4 When the color is chosen, click Apply to change the color of the element(s) or click OK to change the color of the element(s) and to close the Color chooser. Cancel button closes the Color chooser.

Editing Text

1 Select the element.

2 Click the button with letter A.

3 The “Edit Text” dialog box appears. Edit the text in the text box. Click OK. To change the font:

1 Select the element.

2 Click the button with the letter “F” at the bottom of the screen or choose Font from the Format menu.

3 The Font Chooser appears. Now change the font in the same way as it was selected before typing the text. For more information on this, see page 28.

4

Windows

About this Chapter

This chapter discusses the following subjects:

4.1 Features, window and representation types are described in this section. 4.2 This section handles creating and defining windows.

4.3 The third section tells you how to define all types of Internal Represen-tations.

4.4 The fourth section tells you how to define all types of Library Represen-tations.

4.5 The fifth section tells you how to define all types of Picture Representa-tions.

4.1 Overview

Window Features

Windows are the dynamic and changing, “pop-up” parts of the pictures. A window can be regarded as a rectangle in which you can show values, symbols, graphs and other picture components that are not needed continuously. The look of the window is defined by representation. The representation is the content of the window. The size of the window is automatically adjusted to the representation displayed in it, at the display moment. The size can be anything from one grid unit to the whole screen. Windows can be located anywhere on screen, even overlapping one another either partially or totally. When a picture is shown in a window, you can use all its elements. The elements are acting independently of the main picture. This way you can view several process parts in the same picture and produce or erase temporary function keys. While a window is shown on screen, the covered areas of the picture cannot be used. However, windows can be moved from one location to another with SCIL. Windows are edited in the windows mode. Windows can also be seen in the windows mode.

Window Types

There are three types of window:

• Library representation. A library representation is stored in a library under its name. You can use it in the entire base system.

• Internal representation. An internal representation belongs to a certain picture and is stored together with it. The internal representation can be used only in that pic-ture.

SYS 500

Picture Editing

Configuration Manual

• Picture. A window type picture is an ordinary picture that is displayed in a win-dow. Any picture can be used for this purpose. It can contain function keys and windows, which in turn can contain pictures. The use of picture representations extends the usability of pictures and enables a large variety of picture solutions.

Representation Types

There are six types of representation:

• Bar • Curve • Field • Multifield • Selector • Figure FIELD: 09:26:53 ON OFF 18.1 9.3 -2.8 -7.9 9.7 NOTE! 20 0 -20 20 0 -20 MULTIFIELD: CURVE: BA R: PICTURE: SELECTOR: FIGURE:

Figure 34. Examples of different representation types and a picture

The representation types are shown in Figure 34. Bars and curves are used to show data in graphs. They can also be used to show trends, prognoses or level changes. You can use them for example to illustrate voltage measurements. The accuracy in which the curves are drawn depends on the resolution of the screen you are using. You can show several curves or bars in the same window.