FAQ 326: How to create a custom instrument using HTML in Controldesk

Question

How do I create a custom instrument with a string display or graphics in Controldesk?

Solution

You can create custom instruments using Browser instruments, HTML, and JavaScript

Example of creating a browser instrument

In this example,  display the value of the variable assigned to the instrument as a string and a circular gauge.It is written in an HTML file containing JavaScript.

1. Place the Browser instrument in the ControlDesk Layout
2. Specify the following HTML file in Browser Properties>Browser>URL of the browser instrument.
3. Variables Connection nodes... Click Add, add variable, and change Connection Info>Unique name to Node0.
4. Drag and drop the variable you want to display to the Browser and select Node0.

ControlDesk_browser_example.html

<!DOCTYPE html>
<html>
 
<head>
      <title>ControlDesk browser instruments HTML</title>
</head>
 
<body>
<script>
Counter = 0;
function write_text(val) {
      str = "Node0 = " + String(val) + "<br>"+"Counter = "+String(Counter);
      document.getElementById("text").innerHTML = str;
}
 
function draw(val) {
      var ctx = document.getElementById("canvas").getContext("2d");
      startAngle = 180 * (Math.PI / 180);
      endAngle = startAngle + val * 180 * (Math.PI / 180);
      ctx.clearRect(0, 0, 200, 200);
      ctx.beginPath();
      ctx.fillStyle = 'blue';
      ctx.moveTo(100, 100);
      ctx.arc(100, 100, 80, startAngle, endAngle, false);
      ctx.fill();
      ctx.beginPath();
      ctx.moveTo(100, 100);
      ctx.fillStyle = 'white';
      ctx.arc(100, 100, 40, startAngle, endAngle + 1, false);
      ctx.fill();
}
 
function valueChanged(jsonData) { //ControlDesk Value change event
      data = JSON.parse(jsonData); //Get connection nodes value
      Val = {};
      data.Variables.forEach(function (variable) {
            if (Array.isArray(variable.Value)) { //Array
                  if (!Array.isArray(variable.Value[0])) { //1D Array
                        v = [];
                        for (i = 0; i < variable.Value.length; i++) {
                              v[i] = parseFloat(variable.Value[i]);
                        }
                  } else {
                        v = [];
                        for (i = 0; i < variable.Value.length; i++) { //2D Array
                              tmp = []
                              for (j = 0; j < variable.Value[0].length; j++) {
                                    tmp[j] = parseFloat(variable.Value[i][j]);
                              }
                              v[i] = tmp;
                        }
                  }
            } else {
                  v = parseFloat(variable.Value);//Scalar
            }
            Val[variable.UniqueName] = v;
      });
 
      Counter = Counter + 1;
      write_text(Val.Node0);
      draw(Val.Node0);
}
 
</script>
</head>
 
<body>
 
      ControlDesk Browser Demo<br>
      Text<br>
      <div id="text"></div><br>
      Graphic<br>
      <canvas id="canvas" width="200" height="200">
      </canvas>
 
</body>
 
</html>