Icons

TcHmiBa contains various icons that are necessary for the implementation of visualizations for building automation. The icons are created in *.svg format and are intended for use on the web.

Installation

In order to use the icons, the NuGet package Beckhoff.TwinCAT.HMI.BA.Icons must be installed.

Icons 1:
Icons 2:

Since there is a dependency on the Beckhoff.TwinCAT.HMI.Framework, this is also installed.

Use

There are three different application options.

ZIP archive

A NuGet package is basically a ZIP archive that allows direct use of the icons after unpacking. The unpacked content looks like this:

Icons 3:

Only the folder Icons is relevant. It contains the various icons divided according to content categories.

GalleryExplorer

After installing the NuGet package in a TwinCAT HMI project, the icons integrate into the GalleryExplorer.

Icons 4:
Icons 5:

The icons here are arranged according to function. To use an icon from the GalleryExplorer, it must be dragged and dropped into a folder in the project.

Icons 6:

The icon is created as a copy in the project directory, not as a reference.

Use as reference

When using the icons as reference, their extended functionalities can be used. In addition, the icons benefit directly from updates to the NuGet package.

TcHmi project

With the function 

TcHmi.BuildingAutomation.Functions.GetBaIconPath()

the icons can be used as a reference in a TcHmi project.

The following steps are required:

1. Drag a control (e.g. a button) to the content/view.
2. Create the Function Binding.
Icons 7:
3. In the field Backgroundimage enter GetBaIconPath (function is suggested).
Icons 8:
4. Path specification to the icon, e.g. "HVAC/fan" (quotation marks must be observed).
5. Adjust size and position.
Icons 9:

The path information can be taken from the structure of the GalleryExplorer.

After that the button should look like this:
Icons 10:

The extended functions of the icons can only be used with controls from the NuGet package Beckhoff.TwinCAT.HMI.BA.Controls.
The controls that have a category Icon have extended setting options.

As an example, the button from the category BA | Common is used below.

Icons 11:

The Icon attribute can be set again using the 

TcHmi.BuildingAutomation.Functions.GetBaIconPath()

function.

This form of embedding allows the icon to change dynamically. The following attributes are available:

In the code

For using the icons in the code, e.g. when developing framework controls, the icon paths can be accessed even more easily. The namespace

TcHmi.BuildingAutomation.Icons

contains constants that point to the respective icons in the NuGet package (e.g. TcHmi.BuildingAutomation.Icons.HVAC.Fan.path).

HVAC symbols

Symbols for P&I diagrams.

Icons 12:

The icons are drawn with appropriate size ratios for an P&I diagram and are only shown differently in this listing.

Icons 13:

Event symbols

Symbols to represent alarms, events or notifications.

Events

The concept of alarms uses the following icons.

Icon

Name

Icons 14:

Alarm

Icons 15:

Fault

Icons 16:

Maintenance

Icons 17:

Notification

Icons 18:

Miscellaneous

The events are displayed in different states.

Flag

The flag icons are displayed when one of the StatusFlags of an object is active.

Icon

Name

Icons 19:

InAlarm

Icons 20:

Fault

Icons 21:

Overridden

Icons 22:

OutOfservice

Priorities

Icon

Name

Icons 23:

LifeSafety

Icons 24:

Critical

Icons 25:

ManualLocal

Icons 26:

ManualRemote

Lock

Icon

Name

Icons 27:

High

Icons 28:

Medium

NodeType

Icon

Name

Icons 29:

Aggregate

Icons 30:

Buildings

Icons 31:

Building element

 

Component

Icons 32:

Control cabinet

Icons 33:

Floor

Icons 34:

Information focus

Icons 35:

Property

Icons 36:

Plant

Icons 37:

Room

Icons 38:

Technical system

ObjectType

Symbols for the different object types.

Icons 39:

Room Automation

Symbols for room automation.

Icons 40:

Standard

Standard symbols for visualizations.

Icons 41: