Changing an element's appearance is important for developing effective user interfaces, especially when you want to alert a user to a change in state. Some of the element attributes that you can link to server tag values are:
  • Background, Foreground and Border style
    Apply colors to items based on one or more tags to indicate changing states
  • Background, Foreground and Border flashing on change
    Trigger elements to flash to quickly grab a user's attention
  • Opacity & Visibility
    Layering elements and adjusting opacity or visibility is a simple way to indicate relative status
  • Positioning, Size & Scale
    Both x and y position and scale can be controlled independently to generate simple but effective gauges
Background Color
Background Flash
(on false)
Foreground Color
Foreground Flash
(on false)
Border Color
Foreground Flash
(on false)
Opacity
Visibility
Position & Scale

<!-- 
There are many different attributes you can add to your HTML elements to control their appearance.
For example...  
-->

<!-- 
Background Color

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

The 'all_f' setting is used when all values are FALSE.
The 'bad_q' setting is used when bad data quality is detected.
The 'group' lets you list a series of server tags background to associate when they are TRUE.

Since we just want to monitor one tag, only one item is in the group. Notice how all of the settings above define a 'color' listed as a valid HTML hex color.  You can also define 'cls' for a CSS class, and 'style' for a custom inline style.
-->
<div id="bg1"
  opc-tag-bkg='{"type":"group",
    "all_f":{"color":"#F00"},
    "bad_q":{"color":"#FC0"},
    "group":[
      {"tag":"Pump.Value","config":{"color":"#0C0"}}
    ]}'>
</div>