The Industrial Icons feature provides two ways to use icons to build the navigation in your solution displays. Users can add icons by dragging them from the Components Panel or using the Industrial Icon font family, which requires the conversion table. This page presents information about industrial icons, such as showing how to add them into a solution and a character conversion chartuse them in your solutions.
On this page:
| Table of Contents | ||||
|---|---|---|---|---|
|
Understanding Industrial Icons
Industrial Icons Font is a character encoding approach that transforms alphanumeric characters into icons and is available in the Draw environment. The main purpose of the Industrial Icons Font is to facilitate the process of adding navigation or graphic indicators to your display, while ensuring your solution has a modern look.
The Industrial Icons refer to graphical elements for creating intuitive navigation into your applications. They are available to use in two approaches on the Displays/Draw:
Industrial Icons font-family
The Industrial Icons font family approach converts alphanumeric characters into icons, it requires the character-to-icon conversion table.
You need to insert a component into the display to use this feature in your solution. Usually, we use a text output object (TTextBlock) to insert the character to convert to the selected industrial icon. After that, we changed the font family to Industrial Icons located at the end of the list. You do this by pressing the Font button in the Text configuration in the Drawing Properties panel to open the font settings popup.
Drag-and-drop graphical component
The drag-and-drop approach allows you to select the icon from the Industrial Icons category in the Components Panel and drag and drop the selected item to the drawing area.
| Expand | ||
|---|---|---|
| ||
|
Both approaches support controls for size, color, and alignment.
| Expand | ||
|---|---|---|
| ||
|
Using Industrial Icons in Solution Displays
Add the desired icon to your display. Double-click on the icon to access the Settings and Dynamics tabs. Enable the Action, set the Event to MouseLeftButtonDown, set the Action to OpenDisplay, and select the target display. This configuration triggers specific displays through user interaction with the icons, improving navigation and functionality.
Inserting
Users have two methods for inserting industrial icons to their displays.
The first method is by using the Industrial Icon font family. To do this, usually, users add a text output (TTextBlock), type the corresponding character code to display the desired icon, access the font settings, and choose an icon from the Industrial Icon font.
The second method is to select the industrial icons from the Components Panel. Users can open the Components Panel, which contains a library of built-in components, including icons. They can browse or search for the desired icon and then click on it to select it. Once selected, users can place the icon in the drawing area by clicking on the desired location.
Configuring
After adding the desired icon to your display, double-click on the icon to access the Settings and Dynamics tabs. In the Dynamics tab, enable the Action, set the Event to MouseLeftButtonDown, set the Action for this event to OpenDisplay, and select the target display. This configuration triggers specific displays through user interaction with the icons, improving navigation and functionality.
Create consistent and modern layouts.
Save time by using an icon font rather than a jpeg/png from the web.
Common icons are included such as Home, Alarms, Warnings, Chart, Gauge, Settings, Search, and more!
Easy and smooth resizing since the icon is actually a font!
Adding Industrial Icon to a Solution Display
To use this feature in your solution, you need to insert a component into the display. In the example below, we used a Text Output (TTextBlock).
To change the font, you need to click the text configuration button that is in the left panel. See the image below.
After clicking this button, browse for IndustrialIcons. Then, select a typeface and font size.
Now, type a character into the textbox in the left panel. You should see the corresponding icon appear on the page.
Character into Icon Conversion
The complete conversion table is available below.
In this section:
| Page Tree | ||||
|---|---|---|---|---|
|