<!--
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 oas-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 oas-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"
oas-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"
}'
oas-tag-set='{"tag":"WPF.New Tanks Demo.Tank1 Inlet Valve.Value","config":{"evt":"click","set":"toggle"}}'
/>