Visualisation
Contents

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 up 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:
The elements can be arranged as desired. Each element can be click-sensitive. This enables each element to call up other visualisation pages or special masks and/or execute commands. All special masks which can also be called up in the menu are also available in the visualisation.

2.Importing/exporting 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 into 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.
When saving, the path to the template folder is automatically opened in the file dialogue window.
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

4.Structure of the visualisation editor

------ Text up to and incl. 4.10 -----
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 input screen (which is available separately for each tab) is divided into the following areas: tree structure display of the visualisation pages (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 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.

------ New text as of 4.11 -----
Below the main menu and the menu bar, the sidebar is located in the left part of the visualisation window. The working surface of the visualisation editor is displayed on the right.
The component bar is displayed between the two; its position can be switched between several positions via a menu item if required.
The toolbar is displayed above the visualisation editor, but can also be displayed below it or hidden completely if desired.
The status bar is displayed below the visualisation editor.

4.1.The sidebar

The sidebar is displayed on the left side of the visualisation window and consists of two areas: The lower one shows the visualisation element tree and a preview of a graphical element, if one has been selected there. This area can be switched on and off via the menu item“View -> Show visualisation element tree”.
The upper area shows by default the tree structure of the visualisation pages (Visualisation pages), but can be switched to the view of all elements of a visualisation page (Visualisation page (elements)), or to the search function (Search visualisation).

4.1.1.Tree structure of the visualisation pages

Here, all visualisation pages of a design are displayed in a tree structure.
If more than one design is defined in the project, a combo box appears directly below the symbol line, which on the one hand shows the active design and from which on the other hand another design existing in the project can be selected for editing.

By clicking on a visualisation page, it is displayed to the active page and on the right.

4.1.2.All elements of a visualisation page

Here, all elements of a visualisation page are displayed as a list. Several list items can be selected simultaneously. Using the context menu, you can then delete all of them at once. You can also call up the properties of an element using the context menu.

4.1.3.Search function

The search function is described in this document.

4.1.4.Visualisation element tree

All visualisation elements available for the current design are displayed here in a tree structure.
If a displayable element is clicked, a preview is displayed below the tree structure.
All elements can be dragged and dropped onto the current visualisation page.
Special feature: If a file in “.htvisu” format is dragged from the “Templates” folder to the visualisation page, the“Import templates” dialogue must be edited. Afterwards, the elements saved in the template are placed on the visualisation page as they were placed when the template was created.

4.2.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.(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 the 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 dropping.
  • Right-click on an element: (Context menu button)
    An option menu is displayed.

4.2.2.(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 on the visualisation area creates a rectangle on the visualisation area; when the mouse button has been released, the program item Properties appears ( Edit visualisation element). The size of the rectangle is adopted. The symbol then has this size or is scaled to this size.

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

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

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

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

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

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

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

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

4.2.7.(7) Import (Ctrl-I)

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

4.3.Toolbar (a-l)

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.3.1.(a) “Go to..” selection box

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.3.2.(b) Properties of the selected element

This displays the property of the selected visualisation element.

4.3.3.(c) Undoing the 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.3.4.(d,e,f,g) Aligning elements to the left (Ctrl+1), right (Ctrl+2), top (Ctrl+3) or bottom (Ctrl+4)

The selected elements can be aligned to the left, right, top or bottom. 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, or to the element located furthest to the right if “right-align” was selected.
Important
The functionality via Context menu/Align is different!!

4.3.5.(h,i,j) Adjusting 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 element or the height of the highest marked element.

4.3.6.(k) Displaying/hiding 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.3.7.(l) Information about the visualisation page

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

4.4.Status bar (A-C)

Some information is displayed on the status bar at the bottom edge of the screen.

4.4.1.(A) Information about the object 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. 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

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

4.4.3.(C) Current design

The name of the design currently being edited is displayed on the far right of the status bar.

5.Operating menu

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

5.1.1.Cut (Ctrl+X)

This saves the marked visualisation page to the clipboard 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.

5.1.2.Copy (Ctrl+C)

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

5.1.3.Insert (Ctrl+V)

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

5.1.4.Duplicate

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

5.1.5.Delete (Del)

A selected visualisation page is deleted.

5.1.6.References

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

5.1.7.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 the import process, provided that the visualisation area is large enough to display the imported page in its entirety.

5.1.8.Properties

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

5.1.9.Creating a 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.

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

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

5.2.Operating menu (visualisation area)

5.2.1.Select all elements (Ctrl+A)

All the elements in the visualisation area are marked

5.2.2.Undo last action (Ctrl+Z)

The last action is undone.

5.2.3.Cut (Ctrl+X)

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

5.2.4.Copy (Ctrl+C)

This saves the marked elements to the clipboard.

5.2.5.Insert (Ctrl+V)

The clipboard is inserted below the mouse position.

5.2.6.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!

5.2.7.Remove (Del)

Permanently removes the marked elements from the visualisation page.

5.2.8.Go to

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

5.2.9.Order

Arranges the marked elements in a specific order:
  • To the front (Ctrl+Home):
    Moves the element in the sequence to the front position. All the other elements are located below this element.
  • To the back (Ctrl+End):
    Moves the element in the sequence to the last position. All the other elements are located above this element.
  • One step forward (Ctrl+pg up):
    Moves the element in the sequence one step forward.
  • One step backward (Ctrl+pg dn):
    Moves the element in the sequence one step backward.

5.2.10.Align

  • left (Ctrl+5), right (Ctrl+6), top (Ctrl+7), bottom (Ctrl+8)
    The selected elements can be aligned to the left, right, top or bottom. All the selected elements are aligned to the element which was right-clicked to call up 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 leftmost element and the right edge of the rightmost element.
    The leftmost and rightmost elements remain where they are. The remaining marked elements are distributed with the same horizontal distance between them.
  • 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 uppermost element and the lower edge of the lowermost element.
    The uppermost element and the lowermost element remain where they are. The remaining marked elements are distributed with the same vertical distance between them.

5.2.11.Moving elements in 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.

5.2.12.Size

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

5.2.13.Quick assignment

Quick assignment enables quick formatting. The following attributes can be changed via 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 (text elements only)
- Font (text elements only)
- Text alignment (text elements only)
- Internal spacing (text elements only)
- User group (“Using user groups” must be activated in the project)

5.2.14.Saving as a template

  • Save (incl. symbols and nodes)
    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 are synchronised with the symbol key and the node key. If symbols and/or nodes with an identical key are contained in the project, they 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 are synchronised with the symbol key or the node key. If symbols and/or nodes 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

5.2.15.New

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

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