#### Real Time Pump Status

In this example, we set the visibility of an image based on the status of the Pump.Value server tag. When it is active, we show a green image. When it is stopped, the green image is hidden and we display a red image. Click the pump image to toggle the state.

###

    <!--
    An image that switches between Red/Yellow/Green based on the Pump.Value server tag. Pump.Value is a boolean.

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

    The 'all_f' setting picks the src when all values are FALSE.
    The 'bad_q' setting picks the src when bad data quality is detected.
    The 'group' lets you list a series of server tags and the src to associate when they are true.
    Since we just want to monitor one tag, only one item is in the group.

    The oas-tag-set attribute makes the element interactive.

    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="imgPump1"
      src="images/Pump Yellow Front.png"
      oas-tag-src='{"type":"group",
        "all_f":"images/Pump Red Front.png",
        "bad_q":"images/Pump Yellow Front.png",
        "group":[
          {"tag":"Pump.Value","config":"images/Pump Green Front.png"}
        ]}'
      oas-tag-set='{"tag":"Pump.Value","config":{"evt":"click","set":"toggle"}}'
    />

    <!--
    The label that corresponds to the Pump.Value status, but in a more human-readable format is configured as follows, dispaying formatted text as well as changing foreground color based on status.
    -->
    <h3 id="pumpStat"
      oas-tag-txt='{"tag":"Pump.Value",
        "config":{
          "formats":{
            "bad_q":"?????",
            "bool_f":"Stopped","bool_t":"Running",
            "string":"Transfer Pump is {0}"
          }
        }
      }'
      oas-tag-fg='{"type":"group",
        "all_f":{"color":"#C00"},
        "bad_q":{"color":"#FC0"},
        "group":[
          {"tag":"Pump.Value","config":{"color":"#0C0"}}
        ]
      }' >
    </h3>