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.

Module 08 _ Basic graphical objects 3

Arc Informatique © Copyright 2020. All rights reserved Updated 12/11/2020
 2. This feature in PcVue architecture

Figure 1

Module 08 _ Basic graphical objects 4

Arc Informatique © Copyright 2020. All rights reserved Updated 12/11/2020
 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.

Module 08 _ Basic graphical objects 5

Arc Informatique © Copyright 2020. All rights reserved Updated 12/11/2020
 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.

Module 08 _ Basic graphical objects 6

Arc Informatique © Copyright 2020. All rights reserved Updated 12/11/2020
 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?

Module 08 _ Basic graphical objects 7

Arc Informatique © Copyright 2020. All rights reserved Updated 12/11/2020
 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.

Module 08 _ Basic graphical objects 8

Arc Informatique © Copyright 2020. All rights reserved Updated 12/11/2020
 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.

Module 08 _ Basic graphical objects 9

Arc Informatique © Copyright 2020. All rights reserved Updated 12/11/2020
 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.

Module 08 _ Basic graphical objects 10

Arc Informatique © Copyright 2020. All rights reserved Updated 12/11/2020
 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

Module 08 _ Basic graphical objects 11

Arc Informatique © Copyright 2020. All rights reserved Updated 12/11/2020
 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.

Module 08 _ Basic graphical objects 12

Arc Informatique © Copyright 2020. All rights reserved Updated 12/11/2020
 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.

Module 08 _ Basic graphical objects 13

Arc Informatique © Copyright 2020. All rights reserved Updated 12/11/2020
 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?

Module 08 _ Basic graphical objects 14

Arc Informatique © Copyright 2020. All rights reserved Updated 12/11/2020
 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.

Module 08 _ Basic graphical objects 15

Arc Informatique © Copyright 2020. All rights reserved Updated 12/11/2020
 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).

Module 08 _ Basic graphical objects 16

Arc Informatique © Copyright 2020. All rights reserved Updated 12/11/2020
 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.

Module 08 _ Basic graphical objects 17

Arc Informatique © Copyright 2020. All rights reserved Updated 12/11/2020
 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.
Module 08 _ Basic graphical objects 18
Arc Informatique © Copyright 2020. All rights reserved Updated 12/11/2020
 Insert the image BUILDING_ELEC_Energy.bmp from the BUILDING library.

Module 08 _ Basic graphical objects 19

Arc Informatique © Copyright 2020. All rights reserved Updated 12/11/2020
 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 20

Arc Informatique © Copyright 2020. All rights reserved Updated 12/11/2020