Module 08 - Basic Graphical Objects

PcVue Solutions Training
Graphical objects
Purpose
n About the basic shapes,
n Create a button,
n Insert an image in a mimic.
Contents
1. Introduction 3
1.1. PcVue version 3
1.2. Files used in this module 3
1.3. Third party software used in this module 3
2. This feature in PcVue architecture 4

3. Basics 5
3.1. The basic graphical objects 5
3.1.1. Insert a shape 5
3.1.2. Select multiple objects 6
3.1.3. Duplicate a graphical object 7
3.1.4. Properties of objects 8
3.2. The Arrange tools 11

3.2.1. Using groups 12
3.2.2. Lock objects 12
3.2.3. Managing the ordering of objects 12
3.2.4. Moving and resizing objects 13
3.3. Create a button 13

3.4. Using images 15
3.4.1. Insert an image 15
3.4.2. Transparent color 16
3.4.3. Image from the PcVue Library 18
4. Summing-up 20
Module 08 _ Basic graphical objects 2

Arc Informatique © Copyright 2020. All rights reserved Updated 12/11/2020
1. Introduction
1.1. PcVue version
This module applies to PcVue version 15.0.
1.2. Files used in this module
The PcVue project as at the end of Module 07.
The following image files, taken from Materials folder, should be copied to B folder of
your project before starting.
l Floor_Standard.png
l floorplan123.png
l Ld_Led01_Blue.bmp
l Ld_Led01_Green.bmp
l light_ns_48.png
l light_off_48.png
l light_on_48.png
1.3. Third party software used in this module
None.

2. This feature in PcVue architecture
Figure 1

3. Basics
3.1. The basic graphical objects
All graphical objects available in PcVue are located in the Drawing toolbar.
Figure 2
[A] Selection tools: also in the Draw Menu.
[B] Properties tools: also in the Edit Menu.
[C] Basic graphical objects (shapes): also in the Draw Menu.
[D] Special objects: also in the Insert Menu.
[E] Macro animation objects: also in the Insert Menu.
This module covers only [A], [B] and [C].
3.1.1. Insert a shape
To insert a shape in a mimic:
1. Step 1 Open the mimic in Design mode.
Step 2
2. The mouse is in Select mode:
3. Step 3 Select the command Draw / <object to include> or click the object’s icon
in the Drawing toolbar. The mouse switches to drawing mode: or
4. Step 4 Click and drag the mouse in the mimic to draw the selected object.
5. Step 5 The mouse stays in drawing mode. Select the command Draw / Select to
switch the mouse to Select mode.
The best way to switch the mouse to Select mode is to press the ESC key.

Figure 3
Drag one of the black handles to resize the graphical object.
You can move an object with the mouse after selection. By default when moving, the
object “snaps” to the grid. You can disable this function in Window properties (option Dis-
play tab / Grid / Enable).
You can move a selected object one pixel at a time using the arrow keys, or one grid
unit using SHIFT and the arrow keys.
3.1.2. Select multiple objects
There are several ways to select multiple objects:
l Drag the mouse over the objects you want to select,
l Select one object, press and hold the Shift key, select another object and so on …
When several objects are selected you can move them together.

3.1.3. Duplicate a graphical object
There are several ways to duplicate an object. You can select the object and copy it by:
l Clicking the Edit / Copy command or
l Pressing the Ctrl + C key combination or
l Right-clicking the object and selecting the Copy command.
Then you can paste the object by:
l Clicking the Edit / Paste command or
l Pressing Ctrl + V key combination or
l Right-clicking where you want to paste it and using the Paste here command.
The best way to copy/paste is as follows:
l Press the Ctrl key,
l Select the object and hold down the left mouse button,
l Drag and drop the object.
Of course, these methods also work when several objects are selected (multiple selections).
Exercise 1.
l Create a new mimic: Basic objects.
l Insert several basic graphical objects.
l “Play” with them (copy, paste, multiple selections…).
Draw a polygon representing a triangle. How many

points have been created? Why?

Right-click on one point of this polygon. What is dis-
played?
3.1.4. Properties of objects
Every graphical object has various properties: color, size, position etc…
There are several ways to display the properties of an object. Select the object and:
l Use the Edit / Properties command or
l Right-click and select the Properties command or
l Double-click on it
PcVue opens the Properties dialog.

Figure 4
Here, you can change any property you want and click the OK button.
To change the background or the line color:
1. Step 1 Click (don’t double-click) the color icon. PcVue displays the Colors palette.

Figure 5
2. Step 2 Left-click (don’t double-click) the color you want to apply.
There are also Advanced Properties which are hidden by default. To display the Advanced
Properties of an object :
1. Step 1 Open the Object properties.
2. Step 2 Click the Advanced Properties button.

Figure 6
This feature will be covered in the Advanced module.
Exercise 2.
Change properties of several objects.
3.2. The Arrange tools

The most of the Arrange tools are located in the Menu Arrange, the Arrange toolbar and
via a right-click on a selected object / Arrange.
Figure 7

Figure 8
A description of the Arrange tools is available in the online Help in: Developing
the HMI / Drawing / Selecting moving and arranging drawing elements /
Arrange toolbar.
3.2.1. Using groups
After making a multiple selection you can group the objects. Then if you change a property
of the group it is applied to all objects belonging to the group.
3.2.2. Lock objects
If you don’t want to move an object by mistake you can lock it using this tool.
3.2.3. Managing the ordering of objects
Every time you insert a new object it is automatically displayed in the top level of the hier-
archy of objects. You can use these tools to change the level of an object.

When one or more objects are drawn on top of one another so that the objects
underneath are invisible, you can select each object in turn by positioning the
mouse over the objects and using the TAB key.
3.2.4. Moving and resizing objects
When you are manipulating several objects you often need to align, centre or resize them
in bulk with respect to each another. These tools allow you to do so.
To align, resize or centre objects you must have a reference object. It is highlighted by
black handles as follows:
Figure 9
In this example if you select Align Top the result will be as follows:
Figure 10
Exercise 3.
Use the Arrange tools to group/ungroup, lock/unlock, align, order and resize
objects.
3.3. Create a button

To create a button you must select the Button or Colored Button option in the tab section
object properties / Aspect tab / Appearance list.

Figure 11
If you want to change the color of a button in Runtime mode you must select
Colored button.
Exercise 4.
Create a normal button.
Try to change the background of the button. Why are

you unable to do so?

3.4. Using images
The HMI supports the use of images in BMP, JPG, PNG, WMF, GIF and animated GIF
formats.
The use of images can greatly enhance the appearance of your application, however there
are two points which you must always take into account.
Images, particularly those with many colors, use large amounts of memory.
Images frequently use different color palettes. If you display two or more images at the
same time with different palettes, and the graphic adapter you are using does not have suf-
ficient colors to display them, then you will get bizarre effects with the displayed colors
changing from their usual appearance.
3.4.1. Insert an image
Before you can insert an image you must copy it to the correct folder: Project path\B.
To insert an image:
1. Step 1 Select the command Insert / Image or click the object’s icon in the
Drawing toolbar. The Insert Image dialog appears.
2. Step 2 Select the image needed and click the OK button or drag and drop it dir-
ectly on the mimic.
When you copy an image into the project subfolder Project path\B while PcVue
is running you will not see it in the Insert Image dialog!! You must refresh the
image list using the Refresh button.

Figure 12
If you select the Medium icon display option, the contents of the dialog
changes from just a list, to actual previews the images.
Figure 13
3.4.2. Transparent color
You can define one of the colors that is used in an image as transparent. That is, you can
see the background of the mimic or any drawing elements under it through any area of
that color.
To select the transparent color:
1. Step 1 Open the tab Properties / Picture of the image object.
2. Step 2 Select the Transparent color option.
3. Step 3 Click the color icon to select the transparent color in the colors palette (see
Figure 14) or click directly on the image. The corresponding pixel’s color will
become the transparent color (see Figure 15).

Figure 14
Figure 15
Transparent color is not handled the same way with a PNG image.
Exercise 5.
Using images.
a. Insert the image Ld_Led01_Blue.bmp in the mimic.
Select the background as the transparent color.

Using the Aspect tab, change the image to the Button appearance so that it
looks like a button.
b. For our project:
Create a new mimic: Floor 1 and save it.
Insert the image Floor_Standard.jpg
3.4.3. Image from the PcVue Library
PcVue provides a large library of images. To insert an image from the library select the
Library drop-down list in the Insert Image dialog.
Figure 16
Then the way to manipulate the image is the same as described.
You can recognize an image that is from the library by its path displayed in the
Image properties / Picture tab.
Figure 17
Note that the folder name is not necessarily the same as the library name!
Exercise 6.
Insert the image BUILDING_ELEC_Energy.bmp from the BUILDING library.

4. Summing-up
l Using the basic graphical objects you can draw the most common mimics used in a tra-
ditional SCADA project.
l There are many Arrange tools that enable you to make a complete mimic.
l The most common image formats are supported by PcVue.


Module 08 - Basic Graphical Objects

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Module 08 - Basic Graphical Objects

Uploaded by

Copyright:

Available Formats

PcVue Solutions Training

2. This feature in PcVue architecture 4

3.2. The Arrange tools 11

3.3. Create a button 13

Module 08 _ Basic graphical objects 2

1.1. PcVue version

This module applies to PcVue version 15.0.

1.2. Files used in this module

The PcVue project as at the end of Module 07.

1.3. Third party software used in this module

Module 08 _ Basic graphical objects 3

Module 08 _ Basic graphical objects 4

3.1. The basic graphical objects

[A] Selection tools: also in the Draw Menu.

[B] Properties tools: also in the Edit Menu.

[C] Basic graphical objects (shapes): also in the Draw Menu.

[D] Special objects: also in the Insert Menu.

[E] Macro animation objects: also in the Insert Menu.

This module covers only [A], [B] and [C].

3.1.1. Insert a shape

To insert a shape in a mimic:

1. Step 1 Open the mimic in Design mode.

in the Drawing toolbar. The mouse switches to drawing mode: or

Module 08 _ Basic graphical objects 5

Drag one of the black handles to resize the graphical object.

3.1.2. Select multiple objects

There are several ways to select multiple objects:

l Drag the mouse over the objects you want to select,

Module 08 _ Basic graphical objects 6

l Clicking the Edit / Copy command or

l Pressing the Ctrl + C key combination or

l Right-clicking the object and selecting the Copy command.

Then you can paste the object by:

l Clicking the Edit / Paste command or

l Pressing Ctrl + V key combination or

The best way to copy/paste is as follows:

l Press the Ctrl key,

l Drag and drop the object.

l Insert several basic graphical objects.

l “Play” with them (copy, paste, multiple selections…).

Draw a polygon representing a triangle. How many

Module 08 _ Basic graphical objects 7

3.1.4. Properties of objects

l Use the Edit / Properties command or

l Right-click and select the Properties command or

PcVue opens the Properties dialog.

Module 08 _ Basic graphical objects 8

To change the background or the line color:

Module 08 _ Basic graphical objects 9

2. Step 2 Left-click (don’t double-click) the color you want to apply.

1. Step 1 Open the Object properties.

2. Step 2 Click the Advanced Properties button.

Module 08 _ Basic graphical objects 10

This feature will be covered in the Advanced module.

3.2. The Arrange tools

Module 08 _ Basic graphical objects 11

3.2.1. Using groups

3.2.2. Lock objects

3.2.3. Managing the ordering of objects

Module 08 _ Basic graphical objects 12

3.2.4. Moving and resizing objects

3.3. Create a button

Module 08 _ Basic graphical objects 13

Try to change the background of the button. Why are