How to Use JavaScript to Access Automation System
How to Use JavaScript to Access Automation System
Introduction
In this tutorial we describe how to use the StudioAPI JavaScript client to retrieve and present a value of a variable on a web page in CDP Studio, the independent automation software for open PC-based real-time distributed control systems.
Note: The following tutorial assumes that you have basic knowledge of how to create dynamic web pages using JavaScript.
StudioAPI JavaScript Client Files
The StudioAPI requires these JavaScript files to be loaded into page in order to run:
- long.min.js
- bytebuffer.min.js
- protobuf.min.js
- studioapi.js
Additionally, the studioapi.js file depends on file called studioapi.proto, that describes the StudioAPI wire protocol.
All these files are bundled with CDP. They can be added to your application using the "Add HTML5 Semantic UI Demo" wizard.
Note: For Node.js the JavaScript client is also available as a package in NPM.
Creating the Client
To use StudioAPI in a web page we need to create a client, with CDP application StudioAPI URI (e.g host:port) as a parameter. The following creates a client to connect a CDP system on the same URI where web page is opened from:
var client = new studio.api.Client(window.location.host);
Using the Client to Find Value
The client can be used to locate a CDP node, with with the find function. This function uses the routing path in order to locate a node.
When find function locates the node then it calls the callback (lambda) function that you supply, with found node as an argument. We can create a function that uses the subscribeToChildValues function to register another callback function for the value updates. Whenever the value of the node changes, this callback function will be called.
In the subscribeToChildValues callback we can write the value into the placeholder HTML div, created beforehand, so that the value will appear on our web page.
Example Code
Below is a complete HTML example that connects to the CDP application called DemoApp, locates the object named DemoSignal and shows the value and all the subsequent value changes on the webpage.
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Security-Policy" content="default-src 'none'; script-src 'self' 'unsafe-inline'; connect-src 'self' ws: wss:; base-uri 'none'; form-action 'self'"> <meta charset="UTF-8"> <!-- These JavaScript files are required for the StudioAPI to function properly. They are also required by other frameworks. --> <script src="./long.min.js"></script> <script src="./bytebuffer.min.js"></script> <script src="./protobuf.min.js"></script> <script src="./studioapi.js"></script> </head> <body> <div id="DemoSignalValue"></div> <script> var client = new studio.api.Client(window.location.host); client.find("DemoApp").then( function(DemoApp){ DemoApp.subscribeToChildValues("DemoSignal", function (value){ var div = document.getElementById("DemoSignalValue"); div.innerHTML = value; } ); } ); </script> </body> </html>
This HTML (along with other StudioAPI files listed above) can be deployed and served from any web server, including the CDP application built-in web server, as is demonstrated in Studio "Add HTML5 Semantic UI Demo" wizard.
Note: You have to change the DemoApp and DemoSignal to your application and signal name you want to show the value of.
Note: When the web page is served from a stand-alone web server (e.g. other than CDP application built-in web server) then you have to change the window.location.host to the actual hostname:port of your application.
Note: Full documentation of the API can be found here.
Get started with CDP Studio today
Let us help you take your great ideas and turn them into the products your customer will love.