Create Dynamic SVG HMI for WinCC V8 & Unified 🔋 😎
In this video we create a dynamic SVG Battery Charge indicator that can be used in WinCC 7.5 - 8 and WinCC Unified V17. WinCC SVGHMI Objects are reusable display objects. We will use the free Inkscape SVG Editor to create the battery, and then convert it to the Siemens Dynamic SVG HMI Format. We will review the Siemens documentation on converting the file. We will create some properties and use hmi-bind to create a WinCC property interface. Then we will import the SVG into the WinCC project folder, add it to a screen and animate it with a tag. Be sure to watch until the end to pick up on several great tips and tricks along the way.
00:00 Introduction
00:35 Get Inkscape SVG Software
00:59 Create SVG File
01:26 Create Battery Charge Shape
01:59 Name Battery Components
02:41 group SVG Objects
02:58 Set Document Properties
03:10 Save SVG File
03:48 Open SVG Code file in Notepad++
04:14 Review Siemens SVG HMI Documentation
04:40 SVGHMI File Structure
05:07 SVG Functions NOT Supported by WinCC
06:04 Convert SVG to SVGHMI Format
07:48 Change Object Display Name
08:03 Save As .svghmi
08:14 Import the new .svghmi into WinCC Project
08:35 Add Battery Charge to WinCC Screen
08:46 View battery symbol properties
09:05 Customize Battery Properties
09:41 How to bind parameter to object property
11:05 import the updated svghmi file
11:24 test new property color change
11:35 make battery fill level dynamic
13:03 Test Fill Level property
13:23 Add Percent Of Charge Indicator
13:36 How svghmi handles text
14:52 How to convert number to text
15:30 View Simple Gauge code file
15:54 the Converter.FormatPattern function
16:33 Add text to Battery codefile
17:46 Test % Charge feature
18:53 Animate Battery Charge Indicator with Tag
link for documentation and examples (Please consider subscribing!):
https://iqagent.sharefile.com/d-sf11d...
#siemens #simatic #wincc