WinCC: Rotation of dynamic SVG

Introduction

WinCC Unified is a state-of-the-art HMI development platform that offers a wide range of possibilities for visualisation and process control. One of the interesting tasks that can be solved with SVGHMI in WinCC Unified is to control the rotation of all or part of an image. This not only improves the user experience, but also allows for a more visual display of the plant status.

In this article we will discuss how to add the

hmi-bind:transform='rotate()'

attribute to an SVG element to implement the rotation of a valve flap. We will discuss how to correctly define the centre of rotation, which is critical for correct rotation. With this knowledge, we will show how to use hmi-bind to dynamically control the rotation angle of the flap. We will offer two approaches to accomplish this task: the first is a manual method, and the second is to use the SVGHMi converter that will simplify the process of creating the animation.

By following our recommendations, you will be able to create an efficient and intuitive interface that is not only functional but also visually appealing. Let's go!

Transformation basics

One of the key features of SVG is the ability to apply transformations to graphical elements. Transformations allow you to change the position, size, angle and other properties of objects. There are several types of transformations available in SVG, including

translate() - move an element along the X and Y axes.
scale() - change the size of an element.
rotate() - rotates the element around a specified point.

The transform attribute is used to apply these transformations to SVG elements. For example, to rotate an element by a certain angle, you need to specify the transform attribute with the rotate() function, which takes the rotation angle and the coordinates of the centre of rotation.

An example of using the transform attribute to rotate an element:

<rect x="50" y="50"
  width="100" height="100"
  fill="blue" transform="rotate(45, 100, 100)" />

In this example, the rectangle will be rotated 45 degrees around the point (100, 100). Understanding how the transform attribute works is the foundation for creating animations and interactive elements in SVG.

Calculation of the centre of rotation

The centre of rotation is the point around which the element rotates. Choosing the right centre of rotation is critical to creating a natural and intuitive animation. In the case of a valve handle, the centre of rotation must be at the point where the handle connects to the valve body for the rotation to look realistic.

Determining the centre of rotation

To determine the centre of rotation for an SVG element, you need to consider the following factors:

• Element geometry: For simple shapes such as rectangles or circles, the centre of rotation can be easily defined using their dimensions and coordinates. For example, for a rectangle with coordinates (x, y) and dimensions (width, height), the centre would be at:

  Centre=(x+width/2,y+height/2)

• Element position: If the element is in a group or has other transformations, their effect on the coordinates of the centre of rotation must be taken into account. In this case it may be necessary to calculate the centre relative to the parent element.

• Aesthetic considerations: In some cases it may be necessary to shift the centre of rotation slightly to achieve a more attractive visual effect. For example, if a valve handle looks better when rotated around a point slightly offset from its base, this should also be considered.

Example calculation of the centre of rotation

Let's look at an example with a valve handle represented as a rectangle. Suppose we have the following SVG code:

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
    <rect id="valve-handle" x="90" y="50" width="20" height="100" fill="green" />
</svg>

For this rectangle, the coordinates of its upper left corner (x, y) are (90, 50) and its width and height are 20 and 100 respectively. To find the centre of rotation, we can use the formula:

Centre=(90+20/2​, 50+100/2​)=(100,100)

Thus, the centre of rotation for this valve handle will be at (100, 100).

Reflecting transformations

If an element is inside a group or has other transformations, you must consider their effect on the coordinates of the centre of rotation. For example, if the rectangle is inside a group that has been moved or scaled, the coordinates of the centre of rotation may change.

Example:

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
   <rect width="200" height="200" fill="none" stroke="#000" stroke-width="1"/>
    <g transform="translate(30, 0)">
        <rect id="valve-handle" x="90" y="50" width="20" height="100" fill="green" />
    </g>
</svg>

In this case, the group has been moved by (30, 0). To find the new centre of rotation, we must take this displacement into consideration:

New centre=(100+30,100+0)=(130,100)

The new centre of rotation for the rectangle will therefore be at point (130, 100).

Visualisation of the centre of rotation

To better understand where the centre of rotation is, you can temporarily add a visual element such as a circle to indicate the centre of rotation. This will help you make sure that the centre is selected correctly.

Example code with visualisation of the rotation centre:

In this example, the red circle marks the centre of rotation, allowing you to visually check that it is correct.

Thus, defining the centre of rotation is an important step in creating animations using SVG. Choosing the correct centre allows you to achieve a natural and realistic behaviour of the elements

Applying 'hmi-bind' for 'rotate()’ to the SVG element

Now that we've sorted out the theory of how it all fits inside the svg, it's time to add WinCC dynamism. In order that this attribute can be controlled from WinCC it is necessary to add to attribute ‘transform’ prefix ‘hmi-bind:’

Example code using hmi-bind:

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
    <g id="valve-handle" hmi-bind:transform="rotate({{ ParamProps.valveAngle }}, 100, 100)">
        <rect x="90" y="50" width="20" height="100" fill="green" />
    </g>
</svg>

The expression inside the double curly brackets will be calculated in the process of execution and substituted.

Here I have omitted mandatory elements that describe the interface of the widget so as not to clutter it. But you can read more about it .

Saving time with the

But so far we have considered simple examples, with a single rectangle for which it is easy to find the centre. Real life examples with which I work and users of our portal are usually complex compound pictures. The most common example is when you need to rotate a group of elements in an image. Not the whole image, but some part of it. Then you need to find all extreme positions of this group and calculate its centre. Quite a non-trivial task, especially if you are a beginner. Fortunately, we were able to automate this process.

And, of course, the example.

We have this image of the valve. I want to control its position with its red handle.

I added all the stick elements to a group called (stick).

And I want to rotate it relative to the square drawn at its base.

Out of curiosity I opened this file in a text editor and saw that the group consists of 18 ‘path’ elements like this:

<path
     stroke-width="1"
     stroke-linecap="miter"
     fill="#ffffff"
     opacity="0.553"
     d="m 304.10781,201.38881 c 0,0 -0.62,-3.46 3.123,-3.45 4.32,0.012 94.88,0.32 101.44,0.32 6.56,0 14.924,4.655 15.302,15.687 0,0 -2.502,-13.927 -15.142,-13.927 -12.64,0 -101.026,-0.027 -101.026,-0.027 0,0 -2.917,-0.223 -3.697,1.397 z"
     id="path197" />

It is a difficult task to calculate the size of the rectangle in which this shape can be inscribed.

You can see for yourself. Download image here:

But thank goodness I can use a converter. Which is about to do all of that. I download the file or just drag and drop it into the download field. I add one connection - Rotate Angle. And set the following few settings. Basically I need to specify the id of the group I want to rotate is "stick" and the id of the element that will be the centre of rotation is "center".

Press the "Convert" button. On the picture below you can see the report. The file has been processed, there are no errors and the rotation centre has been calculated automatically. It is shown in square brackets. This can be convenient if you make some complex widget, and you may need these coordinates in the future.

Now I want to show you how the centre of rotation will change if you clear the ‘Center's id’ field

You can see how the value on the X has changed, it's gone to the right.

Here's what this widget looks like in TIA Portal, as well as what the control interface looks like.

When you use the "Rotate Angle" connection in the , two properties are automatically added to the widget interface.

• RotateAngle

• RotateAngleDirection

These can of course be changed and given their own names. For the Direction property, your name will serve as a prefix.

RotateAngle - here the value of the rotation angle is specified in degrees. It can take both positive and negative values.

RotateAngleDirection - controls the direction of rotation. With positive values of degrees and when the attribute is "True" the rotation will be clockwise, if "False" it will be counterclockwise.

Conclusion

I suggest you try to do the same operations yourself add the widget to the converter bind ID and convert and get the result. Or download the file that I received and test it in WinCC. This works as for WinCC Unified and for WinCC V7, V8, Professional V20. Or just download a ready-made svghmi . Also I would like to note that this valve is included in our you can see here.

Additional resources