Home
Wood Heating
Choices
Data
System Design
Controller
Control Logic
Software Design
Electrical Schematic
Simple system w/ storage
Domestic Hot Water
Heat Storage
Solar Hot Water
Introduction
System Components
User Guide
Programming Guide
Failsafe Design
Sample Application
LM35 Sensor Assembly
Pinout Info
Poor Man's VS Circ
Journal
Plastic Pipe Collector
Thermistors
Forum Solar-TodayWood-TodayBurn 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.

ParameterValue in exampleDescriptionIf not present
Height20Bar height in pixelsRequired
Width100Bar width in pixelsRequired
Minimum0Minimum scale valueRequired
Maximum200Maximum scale valueRequired
Bar ColorredColor for the barRequired
Background ColorwhiteColor for the backgroundTransparent
Label text'Horizontal'Label text to be displayed at left of widgetNo 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.

ParameterValue in exampleDescriptionIf not present
Height72Height of the dial faceRequired
Width72Width of the dial faceRequired
Minimum50Minimum scale valueRequired
Maximum80Maximum scale valueRequired
Color1yellowFirst scale colorTransparent
Color Boundary 162Boundary value between displaying color 1 and color 2.Use color 1
Color 2lightgreenSecond colorUse color 1
Color Boundary 275Boundary value between displaying color 2 and color 3.Use color 1 (or 2 if present)
Color 3yellowThird colorUse color 1 (or 2 if present)
Label text'Larger:'Label text to be displayed below dialNo 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.

ParameterValue in exampleDescriptionIf not present
Font size16Height of font in pixelsRequired
PositionePosition 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 widgetRequired

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.

ParameterValue in exampleDescriptionIf not present
Height20Height in pixelsRequired
Width20Width in pixelsRequired
Off ColorlightgreenColor for 'off' stateRequired
On ColorgreenColor for 'on' stateRequired
Label text'Status'Label text to be displayed at left of widgetNo 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:

ParameterValue in exampleDescriptionIf not present
Color 1lightgreyColor 1. Background color if additional colors are not specifiedTransparent
Border Style solidCan 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 ColorblueBorder ColorBlack
Color Boundary 15Boundary value between displaying color 1 and color 2.Use color 1
Color 2yellowSecond colorUse color 1
Color Boundary 210Boundary value between displaying color 2 and color 3.Use color 1 (or 2 if present)
Color 3lightgreenThird colorUse color 1 (or 2 if present)
Label text'Set Value'Label text to be displayed at left of widgetNo 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:

ParameterValue in exampleDescriptionIf not present
Color 1lightgreyColor 1. Background color if additional colors are not specifiedTransparent
Border Style solidCan be any valid CSS border style. 'Inset' should not be used because it has special meaning for the 'Set' widget. No border
Border ColorblackBorder ColorBlack
Color Boundary 15Boundary value between displaying color 1 and color 2.Use color 1
Color 2yellowSecond colorUse color 1
Color Boundary 210Boundary value between displaying color 2 and color 3.Use color 1 (or 2 if present)
Color 3greenThird colorUse color 1 (or 2 if present)
Label text'Tricolor'Label text to be displayed at left of widgetNo 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.

ParameterValue in exampleDescriptionIf not present
Toggle Type2Selects behaviors. 0=clear, 1=set, 2=toggleRequired
Off Image-blank-Image to be displayed for 'Off' (false) conditionGrey Button
On Image-blank-Image to be displayed for 'On' (true) conditionRed Button
Label text'Toggle'Label text to be displayed at left of widgetNo label
<Prev Table Of Contents Next>