Scribd
Upload
16 views7 pages

Widget Library Manual

The SVGHMI.pro Widget Library Manual provides detailed instructions on using a specialized widget library for WinCC Unified, which includes various graphical elements like motors and sensors in multiple formats. It outlines limitations, usage procedures, folder structure, and troubleshooting tips for effective implementation. The manual also includes a changelog detailing updates and improvements made to the library.

Uploaded by

Zarija Aleksoski
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
16 views7 pages

Widget Library Manual

The SVGHMI.pro Widget Library Manual provides detailed instructions on using a specialized widget library for WinCC Unified, which includes various graphical elements like motors and sensors in multiple formats. It outlines limitations, usage procedures, folder structure, and troubleshooting tips for effective implementation. The manual also includes a changelog detailing updates and improvements made to the library.

Uploaded by

Zarija Aleksoski
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

[Link] Widget Library Manual.

md 2024-11-21

HMI Widget Library SVG/SVGHMI


Table of Contents
1. Description
2. Limitations
3. Usage
4. Animation/Hover effect
5. Usage in Faceplates
6. Folder structure
7. Troubleshooting
8. Changelog

Description
The widget library for WinCC Unified stands apart from the standard Siemens set and complements it
favourably. Motors, vessels, sensors, pumps and much more are included. The library comes in 4 file formats
and a composed Dynamic SVG Library for TIA Portal WinCC Unified. These formats are JPG, PNG, SVG,
SVGHMI. Thus these pictures can be used in not only in WinCC Unified. But also other SKADA and HMI
applications.

Limitations
Full functionality is supported in WinCC Unified PC RT (V18, V19 tested). Since animation and hover effect are
not officially supported by Siemens. These options work only in WinCC Unified PC RT. On panels Basic and
Comfort does not work. Accordingly, widgets that use animation such as ‘Blowers’ or Hover Effect such as
‘HoverZone’. Also blurring with svg element is not rendered on panels.

Usage
There are two ways to get widgets in your project:

SVGHMI files itself

1. Copy the contents of the SVGHMI folder into your project folder along the following path:
YOUR_PROJECT_FOLDER\UserFiles\SvgControls if folder SvgControls does not exist, then create it
2. Open your TIA Portal project
3. Open any "Screen"
4. Push the button Refreshes the outdated dynamic graphics in Dynamic widgets section
5. You will see the new widgets

1/7
[Link] Widget Library [Link] 2024-11-21

Global Library

1. Unpack Library file "SVGHMI.pro_WidgetLibrary.zalxx" into your workspace folder.

Go to "Options->Global libraries->Open library"

2. Select "Compressed libraries"

4. Unpack library in your workspace folder


5. Now you can see the [Link] library in TIA Portal Global Library tab

2/7
[Link] Widget Library [Link] 2024-11-21

Animation/Hover effect
To see the animation and hover effect in action, you need to enable the desired Property (Run usually for
animation) and load your project into Runtime. Only in Runtime will the animation and hover effect work

Usage in Faceplates
Starting with TIA Portal version V18 it is now possible to use SVGHMI Dynamic Widgets in Faceplates, but the
‘Dynamic SVG’ library element must be created beforehand to do so. Due to the fact that the package
contains a "Global Library" in which all widgets are organised, you can use them in your Faceplates without
any problems.

Folder structure
Here's a folder structure for a widget library folder:

svghmi-widget-library/
|- JPG/ # Images with white backgrounds
|- 64px/ # Width 64 pixels
|- Blowers/ # Blower images (grey, green, red, yellow)
|- Boilers/ # Boiler images (grey, green, red, yellow)
|- Containers/ # Container images (grey, green, red, yellow)
3/7
[Link] Widget Library [Link] 2024-11-21

|- Conveyors/ # Conveyor images (grey, green, red, yellow)


|- Hoppers/ # Hopper images (grey, green, red, yellow)
|- HVAC/ # HVAC images (grey, green, red, yellow)
|- Indicators/ # Indicator images (grey, green, red, yellow)
|- Mixers/ # Mixer images (grey, green, red, yellow)
|- Motors/ # Motor images (grey, green, red, yellow)
|- Palletizer/ # Palletizer images (grey, green, red, yellow)
|- Pipes/ # Pipe images (grey, green, red, yellow)
|- Pumps/ # Pump images (grey, green, red, yellow)
|- Sensors/ # Sensor images (grey, green, red, yellow)
|- Tanks/ # Tank images (grey, green, red, yellow)
|- Valves/ # Valve images (grey, green, red, yellow)
|- VesselAccessories/ # Vessel accessories images (grey, green, red, yellow)
|- 128px/ # Width 128 pixels
|- Blowers/ # Blower images (grey, green, red, yellow)
|- Boilers/ # Boiler images (grey, green, red, yellow)
|- Containers/ # Container images (grey, green, red, yellow)
|- Conveyors/ # Conveyor images (grey, green, red, yellow)
|- Hoppers/ # Hopper images (grey, green, red, yellow)
|- HVAC/ # HVAC images (grey, green, red, yellow)
|- Indicators/ # Indicator images (grey, green, red, yellow)
|- Mixers/ # Mixer images (grey, green, red, yellow)
|- Motors/ # Motor images (grey, green, red, yellow)
|- Palletizer/ # Palletizer images (grey, green, red, yellow)
|- Pipes/ # Pipe images (grey, green, red, yellow)
|- Pumps/ # Pump images (grey, green, red, yellow)
|- Sensors/ # Sensor images (grey, green, red, yellow)
|- Tanks/ # Tank images (grey, green, red, yellow)
|- Valves/ # Valve images (grey, green, red, yellow)
|- VesselAccessories/ # Vessel accessories images (grey, green, red, yellow)
|- 256px/ # Width 256 pixels
|- Blowers/ # Blower images (grey, green, red, yellow)
|- Boilers/ # Boiler images (grey, green, red, yellow)
|- Containers/ # Container images (grey, green, red, yellow)
|- Conveyors/ # Conveyor images (grey, green, red, yellow)
|- Hoppers/ # Hopper images (grey, green, red, yellow)
|- HVAC/ # HVAC images (grey, green, red, yellow)
|- Indicators/ # Indicator images (grey, green, red, yellow)
|- Mixers/ # Mixer images (grey, green, red, yellow)
|- Motors/ # Motor images (grey, green, red, yellow)
|- Palletizer/ # Palletizer images (grey, green, red, yellow)
|- Pipes/ # Pipe images (grey, green, red, yellow)
|- Pumps/ # Pump images (grey, green, red, yellow)
|- Sensors/ # Sensor images (grey, green, red, yellow)
|- Tanks/ # Tank images (grey, green, red, yellow)
|- Valves/ # Valve images (grey, green, red, yellow)
|- VesselAccessories/ # Vessel accessories images (grey, green, red, yellow)
|- PNG/ # Images with transparent backgrounds
|- 64px/ # Width 64 pixels
|- Blowers/ # Blower images (grey, green, red, yellow)
|- Boilers/ # Boiler images (grey, green, red, yellow)
|- Containers/ # Container images (grey, green, red, yellow)
|- Conveyors/ # Conveyor images (grey, green, red, yellow)
|- Hoppers/ # Hopper images (grey, green, red, yellow)
4/7
[Link] Widget Library [Link] 2024-11-21

|- HVAC/ # HVAC images (grey, green, red, yellow)


|- Indicators/ # Indicator images (grey, green, red, yellow)
|- Mixers/ # Mixer images (grey, green, red, yellow)
|- Motors/ # Motor images (grey, green, red, yellow)
|- Palletizer/ # Palletizer images (grey, green, red, yellow)
|- Pipes/ # Pipe images (grey, green, red, yellow)
|- Pumps/ # Pump images (grey, green, red, yellow)
|- Sensors/ # Sensor images (grey, green, red, yellow)
|- Tanks/ # Tank images (grey, green, red, yellow)
|- Valves/ # Valve images (grey, green, red, yellow)
|- VesselAccessories/ # Vessel accessories images (grey, green, red, yellow)
|- 128px/ # Width 128 pixels
|- Blowers/ # Blower images (grey, green, red, yellow)
|- Boilers/ # Boiler images (grey, green, red, yellow)
|- Containers/ # Container images (grey, green, red, yellow)
|- Conveyors/ # Conveyor images (grey, green, red, yellow)
|- Hoppers/ # Hopper images (grey, green, red, yellow)
|- HVAC/ # HVAC images (grey, green, red, yellow)
|- Indicators/ # Indicator images (grey, green, red, yellow)
|- Mixers/ # Mixer images (grey, green, red, yellow)
|- Motors/ # Motor images (grey, green, red, yellow)
|- Palletizer/ # Palletizer images (grey, green, red, yellow)
|- Pipes/ # Pipe images (grey, green, red, yellow)
|- Pumps/ # Pump images (grey, green, red, yellow)
|- Sensors/ # Sensor images (grey, green, red, yellow)
|- Tanks/ # Tank images (grey, green, red, yellow)
|- Valves/ # Valve images (grey, green, red, yellow)
|- VesselAccessories/ # Vessel accessories images (grey, green, red, yellow)
|- 256px/ # Width 256 pixels
|- Blowers/ # Blower images (grey, green, red, yellow)
|- Boilers/ # Boiler images (grey, green, red, yellow)
|- Containers/ # Container images (grey, green, red, yellow)
|- Conveyors/ # Conveyor images (grey, green, red, yellow)
|- Hoppers/ # Hopper images (grey, green, red, yellow)
|- HVAC/ # HVAC images (grey, green, red, yellow)
|- Indicators/ # Indicator images (grey, green, red, yellow)
|- Mixers/ # Mixer images (grey, green, red, yellow)
|- Motors/ # Motor images (grey, green, red, yellow)
|- Palletizer/ # Palletizer images (grey, green, red, yellow)
|- Pipes/ # Pipe images (grey, green, red, yellow)
|- Pumps/ # Pump images (grey, green, red, yellow)
|- Sensors/ # Sensor images (grey, green, red, yellow)
|- Tanks/ # Tank images (grey, green, red, yellow)
|- Valves/ # Valve images (grey, green, red, yellow)
|- VesselAccessories/ # Vessel accessories images (grey, green, red, yellow)
|- SVG/ # Vector image type
|- Blowers/ # Blower images
|- Boilers/ # Boiler images
|- Containers/ # Container images
|- Conveyors/ # Conveyor images
|- Dashboard/ # Dashboard images
|- Hoppers/ # Hopper images
|- HVAC/ # HVAC images
|- Indicators/ # Indicator images
5/7
[Link] Widget Library [Link] 2024-11-21

|- Mixers/ # Mixer images


|- Motors/ # Motor images
|- Palletizer/ # Palletizer images
|- Pipes/ # Pipe images
|- Pumps/ # Pump images
|- Sensors/ # Sensor images
|- Tanks/ # Tank images
|- Valves/ # Valve images
|- VesselAccessories/ # Vessel accessories images
|- SVGHMI/ # WinCC dynamic widget type
|- Blowers/ # Blower widgets
|- Boilers/ # Boiler widgets
|- Containers/ # Container widgets
|- Conveyors/ # Conveyor widgets
|- Dashboard/ # Dashboard widgets
|- Hoppers/ # Hopper widgets
|- HVAC/ # HVAC widgets
|- Indicators/ # Indicator widgets
|- Mixers/ # Mixer widgets
|- Motors/ # Motor widgets
|- Palletizer/ # Palletizer widgets
|- Pipes/ # Pipe widgets
|- Pumps/ # Pump widgets
|- Sensors/ # Sensor widgets
|- Tanks/ # Tank widgets
|- Valves/ # Valve widgets
|- VesselAccessories/ # Vessel accessories widgets

Troubleshooting
If you have made manualy changes to a widget, in order to see the effect you need to close all screens
in TIA Portal refresh widgets and then open them. Also for these changes to be applied in Runtime
(Browser) it is necessary to do ‘Compile->Rebuild All’. This way when loading delta changes the
widget will not be updated.

The file name of the widget must be unique and must match any other file in your SvgControl folder,
both the one in the project folder and the one in the TIA Portal folder. Also in the widget itself at the
beginning of the file in the <hmi:self /> element there are two attributes ‘displayName’ and
‘name’ they should also be unique. ‘name’ should start with ‘extended.’ prefix.

Changelog
Version 0.9 (Beta) [12 Nov 2024]

Added motors pack


Fix shaft property in some widgets
Changed default colors

Version 1.0 (Release) [20 Nov 2024]

Added indicators widgets

6/7
[Link] Widget Library [Link] 2024-11-21

Fix gradient of "[Link]"


Fix bugs with default values

References
[Link]
Component page
Changelog

7/7

You might also like