1

To replace the tedious effort of editing and saving copies of .svg files with customized colors and variants, I decided that it would be nice to try and work with modern icon libraries.

To that end, I have tried to implement Google's Material Icons library as a font, inside a TwinCAT HMI project. The result looks something like this:

  • Fonts/MaterialIcons-Regular.woff2 (locally hosted font file)
  • Fonts/Fonts.css contains: 
    @font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: local('Material Icons'), 
        local('MaterialIcons-Regular'),
        url(MaterialIcons-Regular.woff2) format('woff2');
}
  • Themes/Base/BaseStyle.css contains the style definitions for the various classes 
    .material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px; /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;
  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;
}
/* Rules for using icons using custom colors */
.material-icons.orange600 { color: #FB8C00; }

This allows me to define a TcHmiHtmlHost, create an element, and voila!

<div id="material_icon_622" data-tchmi-type="TcHmi.Controls.System.TcHmiHtmlHost" data-tchmi-grid-row-index="2" data-tchmi-width="30" data-tchmi-height="30">
  <span class="material-icons md-dark ">face</span>
</div>

However, I need to define and customize an HTML host for each time I would use a symbol this way...

What other ways have people tried to efficiently work with adding icons to their TwinCAT HMI? Is there an icon framework for TwinCAT that I am missing? Is customizing SVG files the way to go? Should I just use a modern web framework?

Thanks in advance.

Hasip Timurtas
  • 983
  • 2
  • 11
  • 20
Rudi
  • 36
  • 6

1 Answers1

0

We use SVG files as icons. This is flexible, and there are loads of icons available already.

The only thing that is irritating is that Beckhoff puts the SVG file in an tag as 'src'. That has the consequence that for every icon you should have it in a specific color if needed. This is the Beckhoff way (see the included images in Twincat HMI by Beckhoff). I want to use the fill property for SVG files, however that doesn't work. So I've implemented a 'hack' according to: How to transform black into any given color using only CSS filters

Jouke Aalvanger
  • 68
  • 4
  • That does sound like a good short-term solution. Would you happen to have an example for the TwinCAT HMI? – Rudi Mar 03 '21 at 09:46
  • Step 1 is to create a 'control class' in a theme (or every theme that will be used). Example: SvgColor00ff00 (green) Step 2 is to create a css file in the theme. Add the following: `.tchmi-class-SvgColor00ff00 { /* Green */ filter: invert(51%) sepia(100%) saturate(2330%) hue-rotate(87deg) brightness(123%) contrast(122%); }` This is the filter for green. Add the classname 'SvgColor00ff00' to the object via the properties. This can also be done dynamically via actions and conditions. Then it's advisable to make a class with `filter: none;` to clear the color. – Jouke Aalvanger Mar 04 '21 at 12:44