WinCC Unified: Change visibility of svghmi elements

What is this post about?

We will explore the mechanism for hiding element(s) in svghmi widgets that are used in WinCC Unified and WinCC V7/8. We will do this using the svg attribute . And we will understand how to control this property with Bool, Number and Bit.

Let's go!

Attribute

The display attribute allows you to control the visibility of graphic and container elements.

If display=‘none’, the element and all its descendants will not be displayed on the page. Any value other than none or inherit means that the element will be visible to the browser.

If you apply display=‘none’ to a container, the container itself and all of its contents become invisible, meaning that this property affects a group of elements.

Thus, if a descendant is set to display=‘none’, it will not be displayed even if the parent is set to a different display value.

Here's an example: the yellow square on the right will not be shown, because it has the display attribute set to ‘none’.

<svg viewBox="0 0 220 100" xmlns="http://www.w3.org/2000/svg">
  <!-- Here the yellow rectangle is displayed -->
  <rect x="0" y="0" width="100" height="100" fill="skyblue"></rect>
  <rect x="20" y="20" width="60" height="60" fill="yellow"></rect>

  <!-- Here the yellow rectangle is not displayed -->
  <rect x="120" y="0" width="100" height="100" fill="skyblue"></rect>
  <rect
    x="140"
    y="20"
    width="60"
    height="60"
    fill="yellow"
    display="none"></rect>
</svg>

Hide element by binary condition

Now let's move on to the syntax used in svghmi widgets. In order to manage the attribute ‘display’ from the WinCC interface we need to modify it in the form:

hmi-bind:display

Thereby we show the development environment that this attribute can be controlled.

And in the simplest way we can do this by a simple condition that checks for True or False on the input parameter.

hmi-bind:display="{{ ParamProps.ShowElement ? 'inline' : 'none' }}"

Using ternary operator (?) we choose if ShowElement is true then ‘display’ will be set to ‘inline’ and if ShowElement is false then the value will be ‘none’ and the element will be hidden.

Now let's do the same thing with the converter. Add a new connection and select ‘display’

Now select or enter the ID of the element whose visibility we want to control. I have an element in my image with ID ‘hide’ I will select it. I leave ‘Strict search’ ticked so that the converter selects only this ID. And I select the ‘Bool’ button in the ‘Type of control’ section.

Thus the converter will add for WinCC parameter named ‘ShowElement’ with data type ‘BOOL’. At the output we will receive svghmi file with the following content:

<svg>
  <!-- some code here... -->
  <hmi:self displayName="Motor-05" name="extended.Motor-05" performanceClass="L" type="widget" version="1.0.1">
    <hmi:paramDef name="ShowElement" type="boolean" default="true"/>
  </hmi:self>
  <rect id="hide" hmi-bind:display="{{ParamProps.ShowElement ? 'inline': 'none'}}" width="60" height="20" x="0.6" y="85" fill="url(#path3626)" />
</svg>

I would also like to point out that the WinCC input parameter ‘ShowElement’ has a value:

default="true"

This is because the ‘Visible by default’ checkbox was selected in the converter. It specifies with what value by default will be added input parameter WinCC.

Hide compared to a number

Let's move on to a more complicated example. Now we will control the visibility of the object using a numeric parameter WinCC. To do this, in the ‘Type of control’ field we switch on the ‘Number’ mode in our ‘Display’ connection. As in the picture:

An additional field for entering a number appears. In it you need to enter a number at equality with which the selected element will be shown. For example, I will specify the number 10. Convert the widget and we see that the attribute ‘There is an additional field for entering a number. In it you need to enter a number in equality with which the selected element will be shown. For example, I will specify the number 10. Convert the widget and see that the attribute ‘display’ has been changed as follows:

<rect
  id="hide"
  hmi-bind:display="{{ParamProps.ShowElement == 10 ? 'inline': 'none'}}"
  width="60"
  height="20"
  x="0.6"
  y="85"
/>

Now, instead of the ternary operator (?), the converter uses ‘==’ to check the number that is given from WinCC in the ‘ShowElement’ input parameter. If you have a more complex task and you are not comfortable with simple equality comparison, you can modify the generated ‘hmi-bind:display’ attribute a bit in a text editor.

Example below:

# Not equal !=
hmi-bind:display="{{ParamProps.ShowElement != 10 ? 'inline': 'none'}}"

# Less, ShowElement < 10
hmi-bind:display="{{lt(ParamProps.ShowElement, 10) ? 'inline': 'none'}}"

# Less or equal, ShowElement <= 10
hmi-bind:display="{{le(ParamProps.ShowElement, 10) ? 'inline': 'none'}}"

# Greater, ShowElement > 10
hmi-bind:display="{{gt(ParamProps.ShowElement, 10) ? 'inline': 'none'}}"

# Greater or equal, ShowElement >= 10
hmi-bind:display="{{gt(ParamProps.ShowElement, 10) ? 'inline': 'none'}}"

You can make your interface and widget more flexible this way.

Hide by bit state

Well, it's time to move on to the last but in my opinion the most interesting option - ‘Bit number’. It allows you to implement control of an element using Status Word. This is quite a popular approach when each individual bit is responsible for some state of the actuator. I will show you an example of a valve and its Status Word that I use.

Example Status Word

I'm going to use 4 bits from this state word, namely 5, 6, 7, 8. 5 - warning icon. 6 - fault icon. 7 and 8 meaning Timeout positions will be indicated by one icon.

And an example of an image that I will modify.

Add the ‘Display’ connection and switch the ‘Type of control’ to ‘Bit №’. I tick the 5th bit. This means that the item with ID ‘warning’ will be displayed when the 5th bit is true.

One more connection for the element with ID ‘fault’. The 6th bit will be responsible for it.

And the last connection which will use two bits 7 and 8.

And let's add one connection to control the colour of the valve itself using the ‘Fill’ connection. I will perform not strict search as I have many elements in this picture with names bgColor1, bgColor2, bgColor3 and so on.

Click the convert button and we see in the report that the connections have found the required elements and have been processed.

And finally you can see that if you set different numbers in the input parameter that will correspond to different bit states. For example 16, 32, 64.

This corresponds to bits 5, 6, 7, 8. The yellow triangle is operated by the ‘or’ condition. The condition for its activation is the True state of bits 7 or 8. With this mechanism you can address 32 bits or in other words your Status Word can be a DWord data type.

Here are the files for downloading the original picture and the converted widget. You can follow this path yourself.

Summary

Now I hope you know how you can easily and simply manage the visibility of an element using different mechanisms. Such as controlling with a single input bit, comparing for equality to a number, or even a custom bit from your StatusWord.