Adding a Plain JS Web GUI to Automation System
This home-control example uses some simulation components in order to have values to display and change. The example uses css classes from w3css for the basic layout and styling, w3css is a stylesheet from w3schools.
For more information about how to use web user interfaces with CDP Studio, see the GUI - Web UI documentation.
How to Run the Example
To run the example from CDP Studio, open Welcome mode and find it under Examples. Next, in Configure mode right click on the library project and select Build, then right click on the system project and select Run & Connect. See the Running the Example Project tutorial for more information.
When the application is running and connected, click on the application in Configure mode Project tree and choose the Table Editor tab. Go to the Properties section, find the property called WebURL. This is the link for the web browser. You can also open the browser directly by clicking the icon next to the url. Note that there is a WebFilesToServe property in the application configuration that must list all files and folders that should be accessible in the web browser. If the WebFilesToServe is not set up correctly, then the web browser might not show the content correctly, or it might not function correctly. Then the web-page displayed above should open in your web browser.
The Files of the Project
In the calls to studioapi we are providing callback functions that change elements of our site, we find these elements using the ids mentioned above. The callback functions provided to the "subscribe" functions are called on value updates, other callbacks are called only once when the server has handled the request.
The Way Forward
We recommend visiting and checking out the learning material and examples made available at "http://www.w3schools.com/". They also cover the most popular frameworks and some of their own alternatives as well.
Introduction and reference is available at http://www.w3schools.com/w3css/default.asp