WinCC Unified: svg to svghmi widget converter

Introduction

This converter is designed to convert svg images into svghmi widgets for Siemens TIA Portal WinCC Unified. It also offers support for WinCC V8. The main function of the converter is to translate an SVG image into a format that is compatible with WinCC Unified, known as svghmi. One of the key features of the converter is its ability to bind different attributes to property variables.

For instance, you can dynamically change the color by binding the property to the fill attribute. Similarly, you can adjust the opacity, stroke-color, stroke-width, rotation, display attribute, and even add animations using the converter, all without the need to open a text editor. If you are curious about these features, let's explore each one in detail.

SVG - Scalable Vector Graphics

SVG is a vector image format and here we have already learned how it differs from svghmi. If you want to start with the basics, this is a good place where to start.

In this article, we'll talk about how to use svghmi.pro/converter converter to its full potential. You can open it in the next tab and try all the features immediately. This converter offers a wide range of settings, which we will delve into to understand their significance.

Disclaimer

The tool only supports vector files in the svg format. If a bitmap image is included, it won't function. There are numerous websites that claim to convert bitmap images to svg or other vector formats. Basically, they just embed a raster image into a vector one. If this still works on the web browser, this svghmi converter will not accept it.

If you try to upload a picture containing bitmap blocks inside you will get the following message. There are two options: either to redraw these elements manually in a vector graphics editor or to tick "Remove Raster Images" and the converter will remove raster blocks from the picture, but of course be prepared that some elements or the whole image will disappear.

Additionally, there must be no file errors and the file structure should be correct. You could check your svg file as an example here, and you shouldn't get any errors. To do this, open your svg image with any text editor and copy all the contents into the syntax checker field.

Bare-Metal

If you uncheck all the boxes, only the basic functionality will work.

As follows

1. all tags associated with vector editors (Adobe Illustrator, CoralDraw, Inkscape, Sketch, etc.) will be removed from the file.
2. the contents of the <svg> tag are regenerated and overwritten.
3. <style> attributes are converted to a supported attribute format and removed.
4. The <hmi:self/> tag is added with a mandatory variable.

These 4 actions are the minimum required for TIA Portal to be able to add and open the simplest svg image without gradients as a dynamic widget. It may not be displayed correctly, some elements may be lost, but it will be added in the editor without compiler errors.

Connections

Fill Attribute

The primary goal of developing this converter was to enhance a crucial feature to the widget. This feature allows convenient modification of an element or group of elements' color, similar to the WinCC Unified standard library of widgets. Where each widget have property BasicColor or sometimes also ContrastColor.

So all you need to do is open your SVG file with any vector graphics editor. Select the image element you want to dynamically change the color of and assign some id. This can be a simple element (<rect>, <circle>, <path>) or a group of elements. And if it is a group of elements, the ability to change the color will be added to each of them. And not less interesting possibility if this element will have a gradient instead of filling with a solid color, then this gradient will be saved and the possibility of dynamic color change will be added to it too.

If the fill attribute is set to "none", no change will be applied to it.

Using the Inkscape editor as an example, right-click on the desired element (group of elements) and select "Object Properties" in the pop-up window

Return back to converter and add new connection:

A few words about the available options

Change Color On Hover

It's an incredibly new feature that allows you to change the color of a widget when you hover over it. This feature is very useful for buttons, for example, or if you want to emphasize a detail in an image. It adds more responsiveness to your HMI interfaces.

Strict ID Searching

The converter has two algorithms for searching given IDs:

1. Strict search - looks for an exact match of the ID name. This means that every character in the name must match.
2. Non-strict search - in this case, the name serves as a prefix for the search. For example, if you have elements named "bgColor01", "bgColor02", and "bgColor03", specifying "bgColor" in the field will retrieve all three elements since "bgColor" is present in each of them.

Prettify WinCC Preview

If you have used WinCC dynamic widgets, you may have observed that when you drag a widget from the symbol library, they all have a black fill. It can be challenging to differentiate between the widgets until you place them on the screen, where they will adopt their intended color. To address this issue, there is a checkbox that colors the elements in the preview window.

Default Color

This specifies the color that the item will have when you drag it onto the screen. You can either specify a value in HEX format or select one from the palette.

Stroke color

The action of this connection is very similar to the previous one. Only here we change the stroke color. The same way you can activate Prettify and Hover Color options.

Fill And Stroke Opacity

Here, the settings are much simpler. To dynamically change the transparency of the fill or stroke, you just need to specify the ID of the element(s) and set the initial transparency. Also you can change the name of the Property that you will see in WinCC and the way of searching ID strict or usual.

Stroke Width

Another great feature is the ability to dynamically change the stroke line thickness, which is commonly used when creating icons. As usual, you need to specify the id to find the item(s) and the name of WinCC Property, then set the line thickness in pixels. Additionally, you can find the checkbox "Fixed on scaling," which serves a useful purpose. When checked, the line thickness will remain visually unchanged when scaling the widget. If unchecked, the line thickness will adjust proportionally as the widget is resized. Refer to the picture below for further clarification.

Display

There are times when you need to dynamically hide part of a widget, such as the image of a motor, which is not easily done in the built-in Siemens library where all motors have a shaft. In such cases, you may need to think of a workaround like overlaying a rectangle in the background color or using a different method. You can assign a unique ID to the element you want to hide and use the "display connection" to hide it effectively.

Rotate Angle

Allows you to add the ability to dynamically rotate an element or a group of elements. The rotation will occur around the center of the frame in which the element fits. If it's a group of elements, the converter will calculate the center of the frame encompassing the entire group.

If you wish to change the rotation center, you can use the "Center's ID" field to enter the ID of the element whose center you want to be the rotation center. Please note that there is no "strict" checkbox here, as this type of adjustment applies either to a single element or to the entire group.

I'll show you an example. There is a simple slide widget like this.

In this simple variant, I assigned the shutter ID "shutter" and specified it. As you can see I left the "Centre's id" field blank. The default angle is zero. And the rotation direction is clockwise.

Next example: also a shutter, but with its center of rotation shifted.

Ensure that if you add rotation to an object, it is positioned correctly within the ViewBox in all positions. If needed, adjust it in Inkscape or your preferred vector graphics editor.

For this option, the settings are the same except for the "Center's ID" where I specified the ID of the circle element for the rotation pivot. Additionally, I changed the rotation direction to anticlockwise. Result.

Rotary Animation

And the cherry on top is the animation feature. Now, it only takes a minute to create a spinning fan. The interface is quite similar to "Rotate angle," with the only difference being the parameter "Default Speed" instead of "Default Value." This parameter specifies the default speed from 0 to 100%. Additionally, if you need to change the rotation center, you can optionally specify the ID of the element that should serve as the new rotation center.

Attention! If the centre of rotation is incorrect, try exporting your image to Plain SVG1.2

I would like to note that the animation will be visible only in the browser when you load the project into Runtime/Simulator.

Connection Restrictions

Connections can be combined with each other. For example, you can bind attributes such as "fill," "stroke," "fill-opacity," and "stroke-opacity" simultaneously to the same element.

You can use the same name "WinCC Property" for different connections. For example, you can bind "fill" and "stroke" to the same "WinCC Property," and it will be correctly processed, as long as they are the same type (color, number).

However, you cannot control "opacity" and "fill" with one "Property" since "fill" is a color and "opacity" is a number from 0 to 100. By combining these elements, you have the ability to create beautiful and informative widgets limited only by your imagination. However, conflicting situations may arise.

Options

Add Flip properties

A very useful option that I have always missed in the standard TIA Portal library. For example, there is a compressor, a pipe goes to it and then a pneumatic line goes somewhere else. Often it is necessary to rotate the compressor or some other element so that it faces the opposite direction. Sometimes you can cheat by turning it 180 degrees. But this is not always possible. When you select this option, a new element called Flip is added to Properties. This allows you to flip your widget.

Perhaps in the future Siemens itself will add the ability to make a mirror image of any object in the editor, as was the case in other versions of WinCC, but for now.

By default, this checkbox is turned on. If you do not need this functionality, you can turn it off.

Poly to Path

WinCC Unified sometimes conflict with <polygon> or <polyline> elements. So they are can be converted to <path> elements for correct display.

Example

<polygon points="30.5 8.5 0 8.5 0 25.5 30.5 25.5 71.5 34 102 34 102 0 71.5 0" fill="#aaa"/>

Converted

<path d="M 30.5 8.5 0 8.5 0 25.5 30.5 25.5 71.5 34 102 34 102 0 71.5 0z" fill="#aaa" />;

The conversion is fairly smooth since, as you can see, the structures of <polygon> and <path> are very similar.

By default, this checkbox is turned on.

Shape to Path

Similar to the previous option, there is an option to convert all elementary shapes to <path> element. Here is an example of how it works.

Example

<!--rectangle-->
<rect height="292.75" width="8.785" y="26.245" x="41.678" fill="#aaa"/>
<!--ellipse-->
<ellipse rx="5.446" ry="0.374" cy="4.39" cx="45.724" fill="#aaa"/>
<!--circle-->
<circle cx="50" cy="50" r="40" fill="#aaa" />
<!--line-->
<line x1="0" y1="0" x2="200" y2="200" />

Converted

<!--rectangle-->
<path fill="#aaa" d="M41.678 26.245H50.462999999999994V318.995H41.678z"/>
<!--ellipse-->
<path fill="#aaa" d="M45.724 4.016A5.446.374 0 1 0 45.724 4.763999999999999 5.446.374 0 1 0 45.724 4.016z"/>
<!--circle-->
<path fill="#aaa" d="M50 10A40 40 0 1 0 50 90 40 40 0 1 0 50 10z"/>
<!--line-->
<path d="M0 0 200 200"/>

You can see that every element—rectangle, ellipse, circle, and line—has been transformed into a <path>. The drawback is that it will be harder to discover the center or corner of the form if you want to dynamically move this item or apply motion to any part. This feature is available, but it isn't frequently used.

Disabled by default.

Prettify SVG

This option is only needed if you want to open the converted svghmi in a text editor and edit it manually: add animation or change visibility properties or something like that. If you are not going to edit this file manually, it is better to uncheck this box. This is because the file size will be significantly reduced, extra spaces and hyphenation marks will be removed.

Compose transforms into one

Collapse multiple transforms into one, convert matrices to the short aliases, and much more. Makes some matrices more readable because it breaks them into successive translate(), rotate(), scale() transformations for example.

It is allowed to use both commas and spaces as separators in transform and gradientTransform attributes. This option replaces all delimiters with commas. By default, this option is disabled.

Delete href links in gradients

It is very meaningfull option for WinCC Unified. Because a lot of vector editors try to optimize svg content. And in this optimization they create nested gradients. For example you can have two quite similar gradients.

Move gradients to <defs />

It's only an organizational option. Moves all gradients to a section called <defs />. It is not necessary at all, but it helps to organize the structure of the svg file. It is enabled by default.

Remove Raster Images

This option will delete all <image> elements from picture. Image snippets can't be displayed in WinCC Unified and should not be used.

Widget convertion reports

After each click on the Convert button you can see a report at the bottom of the dropzone. There you will see information about what actions were performed on the image and how successful they were.

So you can evaluate how successful the conversion was and whether you need to download the file. In the figure above, for example, you can see that default values were added to the gradients and how many transformations have been processed. And the main thing is that the id with the name bgColor was found in the file and successfully bound to WinCC Property BasicColor 10 times (bgColor id of group). And when you add this image to the TIA Portal, it will be able to change the color of this element.

After words

Now knowing what the possible converter settings are responsible for, you can use it to its full potential. I wish you to diversify your HMIs and surprise your customers in a good way.