Expert - Visualisation

1.Introduction

A visualisation basically consists of a background graphic and elements placed on it. The visualisation offers virtually unlimited scope for creating an operating structure. Any page can be called from any other page. A separate menu structure can be created for each user. If you are working with several designs (screen resolutions), it is necessary to create separate background images for each design and place the elements on them.

A visualisation page can contain the following elements:

Text
Symbol
Camera
Box
Graph

The elements can be arranged as desired. Each element can be click-sensitive. This enables every element to call up other visualisation pages or special masks and/or execute commands. All special masks which can also be called in the menu are also available in the visualisation.

2.Import/export templates

Selected elements of a visualisation page or even an entire visualisation page can be exported as a template. This also enables templates to be inserted in other projects. Templates can be inserted irrespective of the design. All objects used are queried when importing a template. If the template is imported into another project, all objects must be assigned manually. It is possible to save all symbols and modules used in the template. As a result, these are also available in other projects.

Note

When you export several elements on a visualisation page, the positions of the elements may be lost during import! This cannot happen when you import/export an entire visualisation page.

Note

If you export all the elements of the visualisation page "xxx" (instead of the page itself) and you also also export the visualisation page "yyy", which contains a link to the page "xxx", after import the link will not work in the new project! For this, you would have had to export the visualisation page "xxx" itself instead of just its elements.

3.Menu header

File
- Close - Closes the current window
View
- Show element tree - The available visualisation elements are displayed at the bottom left. From here, an element can directly dragged to and placed on the visualisation area using a drag&drop operation.
- Toolbar - Shows the toolbar at the top/bottom or hides it completely.
- Components - Shows the components bar on the left/right or hides it completely.
- Draw secondary lines - Show/hide secondary lines on the visualisation area.
- Spacing of secondary lines - Sets the spacing between the secondary lines.

4.Structure of the visualisation editor

All the designs available in the project (maximum 5) are displayed as tabs below the main menu and the menu bar. Clicking on the tab selects the desired design for editing. All the points listed below are available for each design (each tab).
A new design is created under Project/Design.

The mask (which is available separately for each tab) is divided into the areas tree structure display of the visualisation page (left), selection tree of the visualisation elements (bottom left, can be hidden), visualisation area (right) and operating symbols (above and to the left of the visualisation area). There is a mouse right-click menu for all elements in the tree structure and on the visualisation area. Other functions can be found in the menu of the header.

4.1.Components (1-7)

The component bar is shown by default to the left of the visualisation area. You can also hide it or display it to the right of the visualisation area using the main menu > View -> Components.

4.2.(1) Mode: Selection (Ctrl+A)

Within the visualisation area it is possible to change the size of elements (symbol, text, box, camera), move or align them and edit their properties using the mouse pointer.

Left-click on an element:
This selects the element and marks it with a coloured frame. The selected element can be moved by keeping the left mouse button pressed while dragging at the same time.
[CTRL]+left click on several elements:
This selects several elements and marks them with a coloured frame. The selected elements can be moved by keeping the left mouse button pressed while dragging at the same time.
Left click and keeping the mouse button pressed outside an element:
Individual or several elements can be marked at the same time and moved by keeping the left mouse button pressed.
Double-click on an element:
Opens the program item Properties ( Edit visualisation element )
[SHIFT]+cursor keys when the element is selected:
The size can be changed by pressing a cursor key. Each press of the key changes the width/height by one pixel
Left click and keeping the mouse button pressed on the right or bottom edge of a selected element:
The size can be changed by dragging and releasing.
Right-click on an element: (Context menu button)
An option menu is displayed.

4.3.(2) Mode: Insert symbol (Ctrl+S)

Clicking on this element places a symbol on the visualisation area.

Double-clicking within the visualisation area opens the program item Properties (visualisation element); the current coordinates of the mouse pointer are adopted.
Left click+Keeping mouse button pressed+dragging to the visualisation area creates a rectangle on the visualisation area, when the mouse button has been released, the program item Properties ( Edit visualisation element ). The size of the rectangle is adopted. The symbol then has this size or is scaled to this size.

4.4.(3) Mode: Insert text (Ctrl+T)

This inserts a text. Operation as for symbol (see above).

4.5.(4) Mode: Insert box (Ctrl+B)

This inserts a rectangle. Operation as for symbol (see above).

4.6.(5) Mode: Insert camera (Ctrl+K)

This inserts a camera image. Operation as for symbol (see above).

4.7.(6) Mode: Insert graph (Ctrl+D)

This inserts a graph. Operation as for symbol (see above).

4.8.(7) Import (Ctrl+I)

This imports a template. A selection window opens in which the template to be used can be selected.

4.9.(a-l) Toolbar

By default, the toolbar is shown above the visualisation area. You can also hide it or display it below the visualisation area using the main menu > View -> Toolbar.

4.10.(a) Selection box "Go to.."

All the elements found on the visualisation page with their designation are listed here. An individual visualisation element can be selected via this field.

4.11.(b) Properties of the selected element

This displays the property of the selected visualisation element.

4.12.(c) Undo last drawing action

This enables you to undo the last drawing actions step by step, such as the size or position of an element, for example. Changes such as the import of a template, or changes to the properties of a graph placed on the visualisation area which do NOT relate to the size or position of the graph on the visualisation page cannot be undone.

4.13.(d,e,f,g) Align elements on the left (Ctrl+1), right (Ctrl+2), upwards (Ctrl+3) or downwards (Ctrl+4)

The selected elements can be aligned to the left, right, upwards or downwards. All the marked elements are aligned to the element which is furthest away in the corresponding direction, i.e. the top element if "align upwards" was selected, to the element located furthest to the right if "right-align" was selected.

Important

The functionality via Context menu/Align is different!!

4.14.(h,i,j) Adjust the width, height or width+height of the elements

The selected elements are scaled to the same dimensions as the largest marked element in the respective expansion, i.e. to the width of the widest marked or the height of the highest marked element.

4.15.(k) Display/hide secondary lines (Ctrl+R)

Here you can lay a secondary line grid over the visualisation area or remove it again. The grid is only used as orientation and is not part of the visualisation area.
You can set the spacing of the lines in the main menu -> View -> Spacing of secondary lines (Unit: pixels).

4.16.(I) Information on visualisation page

Here, you can define or change the designation, 2 headers, the symbol and the background image of the visualisation page. The corresponding mask is opened.

5.Status bar (A-B)

Infirmation is displayed in the status bar at the bottom edge of the screen.

5.1.(A) Information on the object which is under the mouse pointer

The following information is displayed in the left-hand area of the status bar:

X x Y / W x H /[ Action /][ Control object /] Designation

X x Y
Coordinates of the top left-hand corner of the object, in relation to the top left-hand corner of the visualisation area

W x H
width x height of the object in pixels

Action
The action for "mouse click" entered for the object". Is only displayed if an action is entered

Control object
The control communication object for dynamic objects. Is only displayed if a dynamic text, dynamic symbol or dynamic box is involved

Designation
Designation of the object

5.2.(B) Current mouse position (cursor position)

The current position of the mouse pointer is specified in the right-hand area of the status bar, in relation to the top left-hand corner of the visualisation area.

6.Operating menu (tree structure -> right-click on an element)

7.Cut (Ctrl+X)

This saves the marked visualisation page temporarily and removes it at the same time. The clipboard is only available within the HS/FS Expert. The clipboard is deleted when Expert has been exited.

7.1.Copy (Ctrl+C)

This saves the marked visualisation page temporarily. The clipboard is only available within the HS/FS Expert.

7.2.Paste (Ctrl+V)

The clipboard (see Cut and Copy) is inserted below the marking.

7.3.Duplicate

A selected menu item or a menu page and all subordinate menu items are duplicated below the current marking.

7.4.Remove (Del)

A selected visualisation page is deleted.

7.5.References

Note: This item is only displayed if you have right-clicked on a visualisation page.
All the objects which refer to these visualisation page are displayed in a window.

7.6.Copy to Global Library

Note: This item is only displayed if you have right-clicked on a visualisation page.
This copies the entire visualisation page to the Global Library. The positions of all objects on this page are retained during import, provided that the visualisation area is large enough to display the imported page in its entirety.

7.7.Properties

Note: This item is only displayed if you have right-clicked on a visualisation page.
Properties of the visualisation page. See point (l).

7.8.Create folder

Note: This item is only displayed if you have right-clicked on the Root entry or a folder.
This creates a new folder in which visualisation pages can be created.

7.9.Rename folder

Note: This item is only displayed if you have right-clicked on a folder.
This enables you to assign a different name to a folder.

7.10.Create visualisation page

Note: This item is only displayed if you have right-clicked on the Root entry or a folder.
This creates a new visualisation page. The Property window is automatically displayed.

8.Operating menu (visualisation area)

9.Select all elements (Ctrl+A)

All the elements on the visualisation area are marked

9.1.Undo the last action (Ctrl+Z)

The last action is undone.

9.2.Cut (Ctrl+X)

This saves the marked elements temporarily and removes them on insertion at this position.

9.3.Copy (Ctrl+C)

This saves the marked elements temporarily.

9.4.Paste (Ctrl+V)

The clipboard is inserted below the mouse position.

9.5.Duplicate (Ctrl+D)

Duplicates the marked element. The duplicated element is inserted shifted 10 pixels to the right and downwards.
The duplication of several marked elements is not possible!

9.6.Remove (Del)

Permanently removes the marked elements from the visualisation page.

9.7.Go to

If the marked elements is linked to a visualisation page, this visualisation page is displayed in the editor.

9.8.Arrange

Arranges the marked elements in a specific order:

Forwards (Ctrl+Home):
Moves the element in the sequence to the front position. All the other elements are located below this element.
Backwards (Ctrl+End):
Moves the element in the sequence to the last position. All the other elements are located above this element.
One forwards (Ctrl+pg up):
Moves the element in the sequence one step forwards.
One backwards (Ctrl+pg dn):
Moves the element in the sequence one step backwards.

9.9.Align

left (Ctrl+5), right (Ctrl+6), upwards (Ctrl+7), downwards (Ctrl+8)
The selected elements can be aligned to the left, right, upwards or downwards. All the selected elements are aligned to the element which was right-clicked on to call the context menu.
IMPORTANT: The functionality via Toolbar/Align is different!!
Centre horizontally
The marked elements are arranged over one another, with their central points forming an exact vertical line. This requires that there is sufficient space available on the visualisation area, otherwise centring cannot be carried out exactly.
Centre vertically
The marked elements are arranged next to one another, with their central points forming an exact horizontal line. This requires that there is sufficient space available on the visualisation area, otherwise centring cannot be carried out exactly.
Horizontal with same spacing
Requirements:
- at least 3 elements are marked
- The sum of the width of all marked elements is smaller than the distance between the left edge of the left-most element and the right edge of the right-most element.
The left-most and the right-most elements remain where they are. The other marked elements are distributed between these two with the same horizontal spacing.
Vertical with same spacing
Requirements:
- at least 3 elements are marked
- The sum of the height of all marked elements is smaller than the distance between the upper edge of the top element and the lower edge of the bottom element.
The top and the bottom elements remain where they are. The other marked elements are distributed between these two with the same vertical spacing.

9.10.Move elements on the visualisation area

Grid is OFF
- Marked elements are moved 1 pixel in the corresponding direction using the arrow key
- Marked elements are moved 5 pixels in the corresponding direction with Ctrl+arrow key
Grid is ON
- Marked elements are moved 1 grid width in the corresponding direction using the arrow key
- Marked elements are moved 2 grid widths in the corresponding direction with Ctrl+arrow key

For more information on the grid see Spacing of secondary lines .

9.11.Size

More information on this can be found under points h,i,j Adjust size in the toolbar of the editor.

9.12.Quick assignment

Quick assignment enables quick formatting. The following attributes can be changed via the quick assignment.
A change of the "Type" or the assignment of a static symbol if a dynamic symbol is actively assigned is not possible!
Changes are only made to the marked elements which have the corresponding property:
- Background colour (texts and boxes)
- Font colour (only text elements)
- Font (only text elements)
- Text alignment (only text elements)
- Internal spacing (only text elements)
- User group ("Use of user groups" must be activated in the project)

9.13.Save as template

Save (incl. symbols and modules)
All marked elements are exported as a template. The elements can therefore also be inserted in other projects. Symbols and modules are also exported and automatically inserted in the new project if the corresponding data is not yet present. The data is synchronised with the symbol key and the module key. If symbols and/or modules with an identical key are contained in the project, these will not be adopted from the template. Templates can be inserted in the project with the menu item New/Import template.
Save (without symbols and modules)
All marked elements are exported as a template. The elements can therefore also be inserted in other projects. Symbols and modules are not exported and should therefore be present in the importing project. The data is synchronised with the symbol key or the module key. If symbols and/or modules with an identical key are contained in the project, these will automatically be assigned during import. Templates can be inserted in the project with the menu item New/Import template.
Copy to Global Library
see Global Library

9.14.New

Sub-items: Symbol, Text, Camera, Box, Graph, Import template
Creates a new visualisation element or imports an existing template in the visualisation page.

9.15.Properties (Ctrl+E)

Displays the Properties window of the current visualisation element. If no element is marked, the Properties window of the visualisation page is displayed.