 | |||||
| Forum | Solar-Today | Wood-Today | Burn Planner | ||
| <Prev | Table Of Contents | Next> |
Widgets
This chapter contains the details of appearance and behavior for each widget type. Some widgets are passive. These can only display a value. Others are active - they can also set an element value in the NFCS.
In each case, the first five required parameters are not discussed. They are covered in the previous chapter and are the same for all widget types.
For each widget type, one or more examples will be shown along with the corresponding specification.
Color Specifications
Most widgets allow colors to be specified. In those cases, any valid HTML color specification may be used.
Multicolor Widgets
Many widgets can use multiple colors. In general, they all follow the same approach. If only a single color (Color 1) is specified, that color will be used - as the background color for a text widget, scale color for a dial widget, for example. A 'color boundary' and second color value can be specified. In that case, if the displayed value is above the color boundary, the second color will be used for the widget background. In a similar way, a second boundary and third color can be specified.
In this example, three colors have been specified: lightgrey, yellow, and green. The two color boundaries have values of 5 and 10. That leads to the following behavior:
- For display values up to 5, the background is light grey
- For display values above 5 and up to 10, the background is yellow
- For display values above 10, the background is green
Bar Widget
The bar widget is an passive widget that displays values graphically relative to a fixed minimum and maximum. There is no numeric value displayed.
Bar graphs have a specified height and width. If the width is greater than the height, then the bar graph is horizontal, increasing to the right. If the height is greater than the width, then the bar is displayed vertically with values increasing upwards.
Besides the normal five required parameters, the bar widget has seven additional parameters. The first five are required.
| Parameter | Value in example | Description | If not present |
|---|---|---|---|
| Height | 20 | Bar height in pixels | Required |
| Width | 100 | Bar width in pixels | Required |
| Minimum | 0 | Minimum scale value | Required |
| Maximum | 200 | Maximum scale value | Required |
| Bar Color | red | Color for the bar | Required |
| Background Color | white | Color for the background | Transparent |
| Label text | 'Horizontal' | Label text to be displayed at left of widget | No label |
Dial Widget
The dial widget displays the value of an element as a needle position and as a numeric value. The size of the dial can be specified. The dial scale can have up to three colors. Normally the height and width are the same, but dials can be made with the width greater than the height.
The dial widget has ten parameters. The first four are required.
| Parameter | Value in example | Description | If not present |
|---|---|---|---|
| Height | 72 | Height of the dial face | Required |
| Width | 72 | Width of the dial face | Required |
| Minimum | 50 | Minimum scale value | Required |
| Maximum | 80 | Maximum scale value | Required |
| Color1 | yellow | First scale color | Transparent |
| Color Boundary 1 | 62 | Boundary value between displaying color 1 and color 2. | Use color 1 |
| Color 2 | lightgreen | Second color | Use color 1 |
| Color Boundary 2 | 75 | Boundary value between displaying color 2 and color 3. | Use color 1 (or 2 if present) |
| Color 3 | yellow | Third color | Use color 1 (or 2 if present) |
| Label text | 'Larger:' | Label text to be displayed below dial | No label |
Label Widget
The label widget only serves to place text on the panel. It does not connect to an element and does not update. The size of the text can be specified.
Because the label widget does not connect to any element, the element field can contain any element number - the value is not used. The label widget has three additional parameters, all required.
| Parameter | Value in example | Description | If not present |
|---|---|---|---|
| Font size | 16 | Height of font in pixels | Required |
| Position | e | Position of label relative to specified coordinates n, e, s, or w for north, east, south, and west | Required |
| Label text | 'Dials:' | Label text to be displayed at left of widget | Required |
Light Widget
The bar widget is an passive widget that displays status for discrete (on/off) elements. It is rectangular in shape and can display user-selected colors for the on and off states.
Besides the normal five required parameters, the light widget has five additional parameters. The first four are required.
| Parameter | Value in example | Description | If not present |
|---|---|---|---|
| Height | 20 | Height in pixels | Required |
| Width | 20 | Width in pixels | Required |
| Off Color | lightgreen | Color for 'off' state | Required |
| On Color | green | Color for 'on' state | Required |
| Label text | 'Status' | Label text to be displayed at left of widget | No label |
Set Widget
The set widget is an active widget. In addition to displaying a numeric value, it allows that value to be set, sending the new value to the NFCS. It provides all the same options as the text widget, and is identical in appearance.
There are some special behaviors associated with the set widget. When it has focus (when you click on it) the border chenges to the 'inset' style. This provides a visual clue that the widget is selected and ready for editing. While it is selected, it will not update. Once you're done entering data, tab (or press enter) to leave the field. The new data will be sent to the NFCS and the widget will update.
Just as with the text widget, a set widget has eight optional parameters:
| Parameter | Value in example | Description | If not present |
|---|---|---|---|
| Color 1 | lightgrey | Color 1. Background color if additional colors are not specified | Transparent |
| Border Style | solid | Can be any valid CSS border style. 'Inset' should not be used as a style because this widget uses the inset border to indicate focus. | No border |
| Border Color | blue | Border Color | Black |
| Color Boundary 1 | 5 | Boundary value between displaying color 1 and color 2. | Use color 1 |
| Color 2 | yellow | Second color | Use color 1 |
| Color Boundary 2 | 10 | Boundary value between displaying color 2 and color 3. | Use color 1 (or 2 if present) |
| Color 3 | lightgreen | Third color | Use color 1 (or 2 if present) |
| Label text | 'Set Value' | Label text to be displayed at left of widget | No label |
Text Widget
The text widget is a passive widget. It displays a numeric value with one decimal place. It provides a choice of border style and color as well as up to three background colors. A label can be specified. If present, it will be scaled to approximately the same text height as the numeric value, and positioned to the left of the text widget.
In addition to the five required parameters, a text widget has eight optional parameters:
| Parameter | Value in example | Description | If not present |
|---|---|---|---|
| Color 1 | lightgrey | Color 1. Background color if additional colors are not specified | Transparent |
| Border Style | solid | Can be any valid CSS border style. 'Inset' should not be used because it has special meaning for the 'Set' widget. | No border |
| Border Color | black | Border Color | Black |
| Color Boundary 1 | 5 | Boundary value between displaying color 1 and color 2. | Use color 1 |
| Color 2 | yellow | Second color | Use color 1 |
| Color Boundary 2 | 10 | Boundary value between displaying color 2 and color 3. | Use color 1 (or 2 if present) |
| Color 3 | green | Third color | Use color 1 (or 2 if present) |
| Label text | 'Tricolor' | Label text to be displayed at left of widget | No label |
Toggle Widget
The toggle widget is an active widget intended to be used with discrete (on/off) elements. By default, it displays a red button if the element is true, and a grey button if the element is false. In addition to displaying status, it allows that value to be controlled.
There are three possible behaviors: Clear, Set, or Toggle. 'Clear' sets the NFCS element to false (or zero). 'Set' sets the element to true (or 1). 'Toggle' inverts the current value, changing true to false and vice versa.
If the element is changed by some other mechanism (such as a rule on the NFCS) the toggle widget will update to display the correct state.
Besides the normal five required parameters, the toggle widget has four additional parameters. The first is required - it specifies the desired behavior.
| Parameter | Value in example | Description | If not present |
|---|---|---|---|
| Toggle Type | 2 | Selects behaviors. 0=clear, 1=set, 2=toggle | Required |
| Off Image | -blank- | Image to be displayed for 'Off' (false) condition | Grey Button |
| On Image | -blank- | Image to be displayed for 'On' (true) condition | Red Button |
| Label text | 'Toggle' | Label text to be displayed at left of widget | No label |
| <Prev | Table Of Contents | Next> |