Custom web control for WinCC Unified to show the time in form of waves
This custom web control demonstrates the usage of a existing javascript project and implementing as a functioning control in TIA Portal. It uses a javascript application of Ianto Cannon for showing the actual time as different waves (https://ianto-cannon.github.io/clock.html). The sourcecode was copied and modified to be implemented as a custom web control.
With the powershell build script build/build.ps1 the custom web control is generated by creating a zip archive with Shell.Application, setting the archive name with GUID defined in the src/manifest.json. The custom web control is then copied into the global TIA Portal directory {Program Files}\Siemens\Automation\Portal V1X\Data\Hmi\CustomControls. Please check the variable in the build script according to your settings.
The reason for using the Shell.Application API is the encoding of the zip archive. Powershell and .NET are providing UTF-8 ZIP files, but TIA Portal is expecting a codepage (e.g. Windows-1252 encoding). If you creating the zip archive with Windows Explorer you are using the Shell.Application.
Place the custom web control by drag and dropping into an WinCC Unified Picture. Adjust the screen window in terms of borders and size according to your needs.
The property WaveColor describes the hue tint of the waves. WinCC interprets the color as an integer, which is converted in the custom web control to a RGB color. From this RGB the hue is converted and used as a base color tint for the waves. The saturation and lightness are fixed values, so only the hue component is controlled by the WaveColor property.
- Structure of the custom web control
- Building of the custom web control
- Using the WebCC.start() object and its callback function
- Transfering a color property between TIA Portal and the javascript application