Hi, I have an SVG file and I would like to dynamize different paths inside the SVG.

For instance I would like to hide / set different colors to different groups inside the main SVG. Is there anyway do to this In WinCC unified. Is there a way to get the inner HTML of the SVG object and dymamize elements of it using tags?

Best regards Stian Krogstad

------------------------------------------------------------------------------------------
Split from WinCC Unified – Simple Sample - SVG graphics.

Yesterday i  had a chance to install Wincc 7.5 SP 1 and saw dynamic widgets,dynamic svg objects or industrGraphicLibraryV2.0. And unlike normal wincc objects, Symbol property features attracted my attention. Then I thought maybe I would use the same method and I reached this point. There are those who are looking for answers to the same questions like me. Maybe I can help a little.

Siemens uses svghmi format for dynamic svg objects. These are modified svg files.As far as I understand, they are recalling these svg templates in a framework. But I did not understand exactly which framework they used. If anyone knows, I would be happy if they explain.

As an example, I will use a Siemens object. All I do is open the file with a text editor. I think this will not be against the forum rules.

 <!DOCTYPE svg PUBLIC "-//SIEMENS//DTD SVG 1.0 TIA-HMI//EN" "http://tia.siemens.com/graphics/svg/1.4/dtd/svg14-hmi.dtd">

<!-- SIMATIC WINCC Copyright (C) Siemens AG 2017. All Rights Reserved. -->

<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:hmi-bind--xlink="http://svg.siemens.com/hmi/bind/xlink/"
xmlns:hmi="http://svg.siemens.com/hmi/"
xmlns:hmi-bind="http://svg.siemens.com/hmi/bind/"
xmlns:hmi-element="http://svg.siemens.com/hmi/element/"
xmlns:hmi-feature="http://svg.siemens.com/hmi/feature/"
xmlns:hmi-event="http://svg.siemens.com/hmi/event/"
viewBox="0 0 300 23"
preserveAspectRatio="none">

<hmi:self type="widget" displayName="BasePlate" name="extended.BasePlate" version="1.0.1" performanceClass="L">
<hmi:paramDef name="BasicColor"         type="HmiColor"  default="0xFFEEEEEE"  />
</hmi:self>

<defs>
<hmi:localDef name="Color" type="HmiColor" hmi-bind:value="{{ParamProps.BasicColor}}"  />
</defs>
<g id="Support_Horizontal_Bottom_1_">
<linearGradient id="Shape_3_" gradientUnits="userSpaceOnUse" x1="-9.8003" y1="-46.9941" x2="395.3835" y2="120.4733">
<stop offset="0" hmi-bind:stop-color="{{Converter.RGBA(Converter.Darker(ParamProps.BasicColor, 0.398))}}" />
<stop offset="0.2954" hmi-bind:stop-color="{{Converter.RGBA(Converter.Darker(ParamProps.BasicColor, 0.433))}}" />
<stop offset="0.7771" hmi-bind:stop-color="{{Converter.RGBA(Converter.Darker(ParamProps.BasicColor, 0.527))}}" />
<stop offset="1" hmi-bind:stop-color="{{Converter.RGBA(Converter.Darker(ParamProps.BasicColor, 0.582))}}" />
</linearGradient>
<rect id="Shape_2_" x="2.4" y="17.5" fill="url(#Shape_3_)" stroke="#575756" stroke-width="0.75" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" width="295.3" height="3.1" />
<line id="Reflection_Line_1_" fill="none" stroke="#CFCFCE" stroke-width="0.75" stroke-linejoin="round" stroke-miterlimit="10" x1="2.8" y1="18.3" x2="297.3" y2="18.3" />
</g>
<g id="Front">
<linearGradient id="Shape_4_" gradientUnits="userSpaceOnUse" x1="-7.3613" y1="-76.7437" x2="121.9497" y2="-4.2509">
<stop offset="0" hmi-bind:stop-color="{{Converter.RGBA(Converter.Darker(ParamProps.BasicColor, 0.398))}}" />
<stop offset="0.2954" hmi-bind:stop-color="{{Converter.RGBA(Converter.Darker(ParamProps.BasicColor, 0.433))}}" />
<stop offset="0.7771" hmi-bind:stop-color="{{Converter.RGBA(Converter.Darker(ParamProps.BasicColor, 0.527))}}" />
<stop offset="1" hmi-bind:stop-color="{{Converter.RGBA(Converter.Darker(ParamProps.BasicColor, 0.582))}}" />
</linearGradient>
<rect id="Shape_1_" x="10.1" y="5.5" fill="url(#Shape_4_)" stroke="#575756" stroke-width="0.75" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" width="279.8" height="12.1" />
<rect id="Shadow_5_" x="10.1" y="5.5" fill="#575756" stroke="#575756" stroke-width="0.75" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" width="279.8" height="3.1" />
</g>
<g id="Support_Horizontal_Top_1_">
<linearGradient id="Shape_5_" gradientUnits="userSpaceOnUse" x1="-9.8013" y1="-62.1426" x2="395.384" y2="105.3254">
<stop offset="0" hmi-bind:stop-color="{{Converter.RGBA(Converter.Darker(ParamProps.BasicColor, 0.398))}}" />
<stop offset="0.2954" hmi-bind:stop-color="{{Converter.RGBA(Converter.Darker(ParamProps.BasicColor, 0.433))}}" />
<stop offset="0.7771" hmi-bind:stop-color="{{Converter.RGBA(Converter.Darker(ParamProps.BasicColor, 0.527))}}" />
<stop offset="1" hmi-bind:stop-color="{{Converter.RGBA(Converter.Darker(ParamProps.BasicColor, 0.582))}}" />
</linearGradient>
<rect id="Shape" x="2.4" y="2.4" fill="url(#Shape_5_)" stroke="#575756" stroke-width="0.75" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" width="295.3" height="3.1" />
<line id="Reflection_Line_6_" fill="none" stroke="#CFCFCE" stroke-width="0.75" stroke-linejoin="round" stroke-miterlimit="10" x1="2.8" y1="3" x2="297.3" y2="3" />
</g>
</svg>

  This part is where you define your interface wit svg object and wincc. In this example you define  a property with the name "BasicColor" and type of it as "HmiColor" and give a default value. I think it is clear enough.

<hmi:self type="widget" displayName="BasePlate" name="extended.BasePlate" version="1.0.1" performanceClass="L">
<hmi:paramDef name="BasicColor"         type="HmiColor"  default="0xFFEEEEEE"  />
</hmi:self>

 

<defs>
<hmi:localDef name="Color" type="HmiColor" hmi-bind:value="{{ParamProps.BasicColor}}"  />
</defs>
 

The rest of the code is Svg objects. you can get more infomartion on the internet. To reach local varaibles you need to use LocalProps instead of ParamProps.

You can learn about the frameworks of this template by getting information about frameworks such as angular and vue.

I hope I could help you a little bit.

Sincerly.

M.