Versions Compared

Key

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

Overview

Industrial Icons 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 presents provides information about industrial icons , showing and demonstrates how to use them in your solutions.

On this page:

Table of Contents
maxLevel3
stylenone


Understanding

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 approaches ways on the Displays /Draw:.


Industrial Icon Font Family

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

You need to insert a component into the display to use this feature in your solution.

  1. Go to Displays / Draw.
  2. Add a component into the display — such as TTextBlock.
  3. Click once on the component you just added to select it. 
  4. On Drawing Properties / Text located at the right panel, click the font name to open the Font selection window.
  5. Scroll down until the end of the list and select the last option (IndustrialIcons).

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.


Expand
titleIndustrial Icons conversion table

Image Removed

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 Displays /  Draw.
  2. On the Components Panel, select IndustrialIcons 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.

Expand
titleApproaches for Industrial Icons

Image Removed

  1. Size
  2. Color
  3. Alignment

Image Added

Using Industrial Icons in Solution Displays

Inserting

Users have two methods for inserting industrial icons to their displays.

The first method is by using the Industrial Icon font family.

  1. Go to Displays / Draw.
  2. Add a text output — such as TTextBlock.
  3. Type the corresponding character code.
  4. Access the font settings and choose an icon from the IndustrialIcon font.

The second method is to select the industrial icons from the Components Panel.

  1. Go to Displays / Draw.
  2. On the Components Panel, select the component you wish by clicking it.
  3. Once selected, click on the Drawing area to add the component to the display.

Configuring



Configuring Industrial Icons

  1. Add the 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.

Character-Icon Conversion

The complete conversion table is available below.

Image RemovedImage Removed


In this section:

Page Tree
root@self@parent
spacesV10