Getting Started

Adding the Library

The webHMI library consists of two JavaScript (JS) files and one Cascading Style Sheet (CSS).

  • webhmi.js implements the core functionality of making machine data available to the web HMI through a WebSockets interface.
  • webhmi-data-bind.js implements data binding to make it simple to connect your machine data to HTML elements without writing JavaScript code.
  • webhmi.css contains styling for a few machine-oriented interface elements, like LEDs.

To include the library in your application, add the style sheet and JavaScript files to your HTML header, like this:

<head>

    <!-- jQuery is required for webHMI -->
    <script src="jquery/jquery-2.1.3.min.js"></script>

    <!-- webHMI library -->
    <link href="webhmi/webhmi.css" rel="stylesheet">
    <script src="webhmi/webhmi.js"></script>
    <script src="webhmi/webhmi-data-bind.js"></script>

    <!-- Bootstrap is required for tabs -->
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <script src="bootstrap/js/bootstrap.min.js"></script>

</head>

The webHMI library depends on jQuery, so jQuery must be included before including the webHMI JavaScript files. Bootstrap is required to use webHMI tabs.

Initialization

To communicate with a machine, you must create a ‘machine’ variable in JavaScript.

var machine = new WEBHMI.Machine()

This variable must be in the global scope to be accessed by the data binding functions and the rest of your HMI code. To take advantage of the default data binding, which we will get to later, this variable should be named ‘machine’.

Connecting HTML Elements to Machine Variables

webHMI data binding functionality allows you to quickly connect machine data directly to HTML elements. webHMI data binding supports buttons, numeric and text fields, LEDs, and several other types of elements. To connect HTML elements to machine data, you need to add the appropriate HTML classes and attributes and cyclically call the WEBHMI.updateHMI() function. Here is a small sample:

<body>
  
  <!-- Buttons and LEDs -->
	<button type="button" class="webhmi-btn-set" data-var-name="myTask:mySetBool">
		Set button
	</button>
	<div class="webhmi-led led" data-var-name="myTask:mySetBool"></div>

	<button type="button" class="webhmi-btn-momentary" data-var-name="myTask:myMomentaryBool">
		Momentary button
	</button>
	<div class="webhmi-led led" data-var-name="myTask:myMomentaryBool"></div>

	<button type="button" class="webhmi-btn-toggle" data-var-name="myTask:myToggleBool">
		Toggle button
	</button>
	<div class="webhmi-led led" data-var-name="myTask:myToggleBool"></div>

	<!-- Inputs -->
	<label for="text-input1">Text Input</label>
	<input type="text" id="text-input1" class="webhmi-text-value" data-var-name="gMyString">

	<label for="num-input1">Numeric Input</label>
	<input type="text" id="num-input1" class="webhmi-num-value" data-var-name="myTask:myReal">

  <!-- Tabs -->
  <div>
    
    <!-- Nav tabs -->
    <ul class="nav nav-tabs">
      <li>
        <a href="#autoMode" class="webhmi-btn-set" data-var-name="gRequestedMode" data-set-value="0">Auto Mode</a>
      </li>
      <li>
        <a href="#manualMode" class="webhmi-btn-set" data-var-name="gRequestedMode" data-set-value="1">Manual Mode</a>
      </li>
      <li>
        <a href="#serviceMode" class="webhmi-btn-set" data-var-name="gRequestedMode" data-set-value="2">Service Mode</a>
      </li>
    </ul>
  
    <!-- Tab panes -->
    <div class="tab-content">
      <div class="tab-pane webhmi-tab-pane" id="autoMode" data-var-name="gActiveMode" data-set-value="0">Auto mode content</div>
      <div class="tab-pane webhmi-tab-pane" id="manualMode" data-var-name="gActiveMode" data-set-value="1">Manual mode content</div>
      <div class="tab-pane webhmi-tab-pane" id="serviceMode" data-var-name="gActiveMode" data-set-value="2">Service mode content</div>
    </div>
  
  </div>
    
  <!-- Initialize communication and HMI update -->
  <script>
    var machine = new WEBHMI.Machine()
    setInterval(WEBHMI.updateHMI, 100)
  </script>
    
</body>
Made by Loupe