Component Styling
Several Components allow you to set a color on an attribute, such as the background color, text color, etc.
Colors
In most cases, setting a color functions the same way. You can enter a valid HTML hexadecimal color code, a valid HTML color name, or use the color picker to visually select the color you'd like. When you use the color picker, the end result will be an HTML hex color.
Borders
Most Components can have an exterior border set on them with variable styling. All borders can have their color, size (in pixels), and style configured. Additionally, some Components allow their border radius to be set. This applies a curvature to the corners of the border.
| Attribute | Description |
|---|---|
| Color | border color |
| Size | thickness in pixels |
| Style | border appearance, such as solid, dashed, dotted, etc. |
| Radius | corner radius, where applicable |
Fonts
When a Component contains a text element, the Font can often be configured.
| Attribute | Description |
|---|---|
| Base Font | the typeface |
| Size | text height pixels |
| Style | bold, italic, underline |
| Align | horizontal and vertical alignment |
| Padding | top, right, bottom, left padding to assist with text positioning |
Visibility
Components can be dynamically shown or hidden using the VIsibility property. When a Component is hidden, it will not display in Run Mode, but will still be available and visible in Edit Mode.
Flash
In some cases you may want to draw attention to a Component in your UI. For example if something enters an alarm state, or is a critical failure, an operator may not catch it. This is especially the case if your dashboard is complex with many small Components. The Flah property causes the Component to fade in and out when it is set to true. There are two additional settings on the Flash property:
| Attribute | Description |
|---|---|
| Rate | in seconds, how quickly each flash will occur. This can be set to fractions of a second if you want the flashing effect to be more pronounced. |
| Count | The number of times the Component will flash when the Flash property is true. Setting this to -1 will cause it to flash indefinitely. |