Getting Started

Adding the Library

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

  • lux.js implements the core functionality of making machine data available to the web HMI through a WebSockets interface.
  • lux-data-bind.js implements data binding to make it simple to connect your machine data to HTML elements without writing JavaScript code.
  • lux.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 Loupe UX -->
    <script src="jquery/jquery-2.1.3.min.js"></script>

    <!-- Loupe UX library -->
    <link href="loupe-ux/lux.css" rel="stylesheet">
    <script src="loupe-ux/lux.js"></script>
    <script src="loupe-ux/lux-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 Loupe UX library depends on jQuery, so jQuery must be included before including the Loupe UX JavaScript files. Bootstrap is required to use Loupe UX tabs.

Initialization

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

var machine = new LUX.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

Loupe UX data binding functionality allows you to quickly connect machine data directly to HTML elements. Loupe UX 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 LUX.updateHMI() function. Here is a small sample:

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

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

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

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

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

  <!-- Tabs -->
  <div>
    
    <!-- Nav tabs -->
    <ul class="nav nav-tabs">
      <li>
        <a href="#autoMode" class="lux-btn-set" data-var-name="gRequestedMode" data-set-value="0">Auto Mode</a>
      </li>
      <li>
        <a href="#manualMode" class="lux-btn-set" data-var-name="gRequestedMode" data-set-value="1">Manual Mode</a>
      </li>
      <li>
        <a href="#serviceMode" class="lux-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 lux-tab-pane" id="autoMode" data-var-name="gActiveMode" data-set-value="0">Auto mode content</div>
      <div class="tab-pane lux-tab-pane" id="manualMode" data-var-name="gActiveMode" data-set-value="1">Manual mode content</div>
      <div class="tab-pane lux-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 LUX.Machine()
    setInterval(LUX.updateHMI, 100)
  </script>
    
</body>