Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Overview

Industrial icons are graphical components used in user interface navigation design, enabling the creation of globally recognizable and user-friendly interfaces. Their purpose is to facilitate intuitive navigation within solution displays. This page provides information about industrial icons and demonstrates how to use them in your solutions.

On this page:

Table of Contents
maxLevel3
stylenone


Industrial Icons Gallery

Image Added

The Industrial Icons refer to graphical elements for creating intuitive navigation into your applications. They are available to use in two ways on Displays → Draw.


Industrial Icon Font Family

The industrial icon font family approach converts alphanumeric characters into icons using a character-to-icon conversion table.

This behind-the-scenes association is not required, as you can drag and drop the images directly. However, it can be useful for advanced scenarios where you want to use the #IndustrialIcons font directly on text elements.


Blue squares with rounded edges show the icons.

Gray squares show the corresponding characters.

Image Added



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.

  1. Go to DisplaysDraw.
  2. On the Components Panel, select Industrial Icons.
  3. Drag-and-drop the icon at your choice to the Drawing area.


Differences Between Approaches

Both approaches support size, color, and alignment controls, but each handles these slightly differently.

  1. Size
  2. Color
  3. Alignment

Image Added



Configuring Industrial Icons

  1. Add the desired icon to your display following the steps above.
  2. Double-click the icon to access the Settings and Dynamics tabs.
  3. Check the Action checkbox.
  4. Set the Event to MouseLeftButtonDown.
  5. 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.


In this section:

Easy Heading Macro
headingIndent40
navigationTitleOn this page
selectorh2,h3
wrapNavigationTexttrue
navigationExpandOptiondisable-expand-collapse
This page presents information about industrial icons, such as how to add them into a project and a character conversion chart.

Overview

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 project has a modern look. 

  • 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!

Industrial Icons FontImage Removed

Configuration

Adding to a Project Display

To use this feature in your project, 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. 

Text configuration button location, on the left panelImage Removed

After clicking this button, browse for IndustrialIcons. Then, select a typeface and font size.

Font selection screen optionsImage Removed

Now, type a character into the textbox in the left panel. You should see the corresponding icon appear on the page.

Image Removed

Character into Icon Conversion

The complete conversion table is available below.

Image RemovedImage Removed

In this section...

Page Tree
root@parent
spacesV10