## 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. ![Rectangle example](https://server.svghmi.pro/media/blog/converter-display-connection/yellow-rectangle) Here's an example: the yellow square on the right will not be shown, because it has the display attribute set to** ‘none’**. ```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: ```xml 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. ```bash 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’** ![new connection](https://server.svghmi.pro/media/blog/converter-display-connection/710-120-max.png) 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. ![display connection preview](https://server.svghmi.pro/media/blog/converter-display-connection/display-connection) 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: ```xml ``` I would also like to point out that the WinCC input parameter **‘ShowElement’** has a value: ```bash 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: ![Number type of control](https://server.svghmi.pro/media/blog/converter-display-connection/number-type) 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: ```xml ``` 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: ```bash # 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 | Bit number | Description | |------------|---------------------------| | 1 | Position (Opened) | | 2 | Position 2 (Closed) | | 3 | Open Command | | 4 | Close Command | | 5 | Warning | | 6 | Fault | | 7 | Position (Opened) Timeout | | 8 | Position (Closed) Timeout | 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. ![valve image example](https://server.svghmi.pro/media/blog/converter-display-connection/valve-display-bit-example.png) 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. ![display warning connection](https://server.svghmi.pro/media/blog/converter-display-connection/Display-warning.png) One more connection for the element with ID **‘fault’**. The 6th bit will be responsible for it. ![display fault connection](https://server.svghmi.pro/media/blog/converter-display-connection/Display-fault.png) And the last connection which will use two bits 7 and 8. ![display timeout connection](https://server.svghmi.pro/media/blog/converter-display-connection/Display-timeout.png) 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. ![fill connection bgColor](https://server.svghmi.pro/media/blog/converter-display-connection/Fill-bgColor.png) Click the convert button and we see in the report that the connections have found the required elements and have been processed. ![report for valve display and fill connections](https://server.svghmi.pro/media/blog/converter-display-connection/Valve-report-example.png) 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. ![final result in wincc unified](https://server.svghmi.pro/media/blog/converter-display-connection/valve-display-bit-example-2.png) 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. Display-SVGHMI.pro.svg
Display-SVGHMI.pro.svghmi ## 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.