Tank 1
Tank 2
Main Valve

Tank Level Control

This example demonstrates how HTML HMI can be used to build a user interface that displays numerical, textual and spatial information, while allowing the user to control multiple aspects of the system. In this case, the user can toggle on/off the various pumps and valves.
Try clicking on the Pumps and Valves to see how each one can affect the system as a whole.
Within this small but comprehensive example, many HTML HMI features are utilized including:
  • Changing images (pump and valve colors)
  • Changing text (pump, valve, and button labels)
  • Altering text style/color (pump and valve labels)
  • Resizing an element to reflect a current value (tank levels)
  • Updating server values when a user clicks/taps an element (pumps, valves, and buttons)

<!-- 
Many techniques are used in this example, but the following is just a demonstration on how to configure a single image tag to switch between Red/Green/Yellow versions based on the value of a Boolean server tag.

The opc-tag-src attribute on the img element automatically sets the img tag src attribute based on a group of boolean values.

The 'group' lets you list a series of server tags and the src to associate when each is true. Since we just want to monitor one tag, only one item is in the group. When that tag == true, the src will be set accordingly.
The 'all_f' setting picks the src when all values are FALSE, or in this case when the one tag value is false.
The 'bad_q' setting picks the src when bad data quality is detected. This allows you to set up a visual indicator when the server data is corrupted, preventing false positives or negatives.

The opc-tag-set attribute makes the element interactive, setting a server value when it is clicked.

The 'tag' setting picks the server tag to alter.
The 'evt' setting monitors the click event.
The 'set' setting tells the server to toggle the value between true and false.
-->

<img id="imgt1v1"
    opc-tag-src='{"type":"group",
      "group":[{"tag":"WPF.New Tanks Demo.Tank1 Inlet Valve.Value","config":"images/new_tanks/ValveTopLeft_Green.png"}],
      "all_f":"images/new_tanks/ValveTopLeft_Red.png",
      "bad_q":"images/new_tanks/ValveTopLeft_Yellow.png"
    }'
    opc-tag-set='{"tag":"WPF.New Tanks Demo.Tank1 Inlet Valve.Value","config":{"evt":"click","set":"toggle"}}' 
/>