Web UI Projects - Widget Development Kit
Development Kit for creating individual Widgets for the WinCC Open Architecture Dashboard using Angular and Nx.
Installation
npm install --save @etm_professional_control/widget-development-kit
Will install all necessary dependencies in your current Angular project.
Requirements
You need an installation of WinCC OA Version 3.18 or higher. See the WinCC OA Documentation for how to setup a dashboard project.
Developing new Widget
A very easy way to create a new widget is the WDK generator that will be installed automatically.
You can start it through the nx console or the cli command. It will ask you all necessary details about your widget:
nx generate @etm_professional_control/widget-development-kit-generator:widget
✔ Give a full name of the widget you want to create: · My First Widget
✔ Give a unique keyword for your widget · demo
✔ Provide a short description: · A basic example implementation of a dashboard widget
✔ Base directory under which your app will be generated: · widgets
✔ Base directory under which your library will be generated: · dashboard/widgets
This will create a new app in your nx workspace called widgets-demo along with a library called dashboard-widgets-demo.
The term demo will be used from your keyword input.
To try it out in your dashboard you have to compile your widget using the command:
ng build widgets-demo
This will create a production build of your widget in the folder dist/widgets/demo.
And you will find the necessary widget specifications in the folder apps/widgets/demo/widgets/.
Now you can copy the production build directory into your WinCCOA project under data/WebUI/components and the widget specifications under data/WebUI/widgets.
Your dashboard should show the new widget in the widget selector after a page refresh.
For more details about the WDK API see the WinCC OA Documentation
License
MIT