Wood Heating
System Design
Control Logic
Software Design
Electrical Schematic
Simple system w/ storage
Domestic Hot Water
Heat Storage
Solar Hot Water
System Components
User Guide
Programming Guide
Failsafe Design
Sample Application
LM35 Sensor Assembly
Pinout Info
Poor Man's VS Circ
Plastic Pipe Collector
Forum Solar-TodayWood-TodayBurn Planner
<Prev Table Of Contents Next>

User Defined Graphical Interface

The NFCS has the ability for users to define a user interface that's relevant to their needs. This interface updates automatically and provides the ability to directly set NFCS internal elements (variables and outputs). The interface supports a variety of graphical elements (widgets) and allows them to be placed arbitrarily on an image background of the user's choice. In the example above, a variety of display widgets were placed on top of a system plumbing schematic.

By default, all widgets update every 5 seconds. That means that dial pointers move, digitial displays refresh, and indicators change color automatically. This is done 'behind the scenes' so the page doesn't have to be refreshed.

In addition to real-time display, some widgets allow interaction. For instance, a pushbutton can be defined which will set or toggle a discrete output on the NFCS. A numeric display widget can also allow the value to be changed, and set an NFCS variable to the new value.

This interface is based on AJAX and SVG (Scalable Vector Graphics). It works with Google's Chrome browser, Firefox, and Safari (including iPhone). At present, it does not work with Internet Explorer or with some Android browsers.

Creating and modifying this interface requires some familiarity with web pages and web server terminology.


The User Defined Interface is composed of multiple parts. All the components can be on the NFCS, or they can reside on different web servers. The key components are as follows:

  1. A skeletal HTML file that provides the framework for the page.
  2. A text file containing definitions for all of the desired widgets.
  3. A javascript file containing the widget code.
  4. Optionally, a background image


The HTML file contains references to the other two files and the background image. It also contains variable definitions that will be discussed below. A typical HTML file would look like the following:

The NFCS has a version of this file named index.html, and versions are available from the nofossil web site. This is one of two files that MUST be edited by the user to create a user interface. We'll go through it line by line.

Line 3 contains a reference to the javascript source file. That reference has to be valid. In most cases, you can simply use the version that's shipped with your NFCS. If your HTML file is also on the NFCS, then src="/ctlpanel.js" will work as shown. If your HTML file is on a different web server, then you must specify a path to a valid javascript file. In this example, src="" would work. This becomes more complex when access is desired through a firewall. See the section on firewalls and routers below. (not written yet)

Line 5 contains the IP address of your NFCS. This is used as the default IP in situations with more than one NFCS.

Line 6 contains the TCP port number for communication with the NFCS. It should be 8080 except when accessing the system from outside a firewall.

Line 7 specifies the delay between updates of the widgets in the interface. The delay is in milliseconds, so a value of 5000 means that all the widgets will update every five seconds. If you have a lot of widgets (50 or more) specifying too small a delay can overload the NFCS. This can cause delayed rule execution. A good rule of thumb is that the number of widgets divided by the delay in seconds should be less than 20.

Line 8 specifies the widget configuration file - in this case, "/ctlpagedata.txt". This file contains a list of widgets to be displayed.

Line 12 contains the background image - in this case, "/photos/plumbing-diagram.gif". This line is required, and must specify a valid image. The size of the image defines the area available for display widgets. The image can reside anywhere as long as the browser can access and display it. If the user does not wish to provide an image, the NFCS is distributed with a transparent image that can be used instead. In this case, the width and height must be specified as follows:

<img id=MyImage style="position: absolute; top: 0; left: 0;" width=1280 height=1024 src=/images/pxclear.gif>

In each case, only edit the parameters and file references. All of the other content is required and should not be changed.

Widget Configuration File

The widget configuration file is a plain text file that can be created and edited with any text editor. It contains a series of one line widget definitions as well as optional comments. A portion of a widget configuration file might look like this:

Comments are C++ style (double slash). Blank lines are allowed. Each widget definition takes a single line.

Widget Definitions

There are several widget types, all with different capabilities and options. Widget definitions specify the type of widget and a list of parameters that determine details of appearance and behavior.

One key specification is widget position. Widget position is specified in pixels from the left edge and top edge of the page. In most cases, the specified point will be the top left corner of the widget.

In the NFCS, all inputs, outputs, and variables are collectively known as data elements. Any active widget must be connected to an NFCS data element. This is accomplished by specifying the ID number of the desired data element. Element ID mumbers can be obtained by going to the NFCS 'System' tab. Near the bottom is a list of files. Click on 'elements.csv' and print the resulting page. For each element, the element ID is the number at the beginning of the line. In the excerpt below, the element ID for 'Wood In' is 3.

2,1,0,"p","i",166.299530,"Wood Out"
3,1,1,"p","i",147.707291,"Wood In"

Required Parameters

The first five parameters are required, and are the same for every widget type:

  1. Widget Type - quoted text. Must be a valid widget type.
  2. Left Pixel coordinate - numeric. Left edge position of this widget
  3. Top Pixel coordinate - numeric. Top edge position of this widget
  4. NFCS IP address - quoted text. Enter an empty quoted string (pair of double quotes) to use the default from the HTML file.
  5. Element ID - the ID number of the element that this widget is connected to.

Consider this widget definition from the example above:


This defines a widget of type "text". It's top left corner is 220 pixels from the left edge and 328 pixels from the top edge of the page. The double quotes in the next position indicate that it's connected to the default NFCS. Finally, it's connected to element 3. The additional parameters specify characteristics that are specific to 'text' widgets.

Optional Parameters

In almost all cases, any parameters after the first five are optional. Optional parameters can be left out and the widget will still display and function. However, parameters are position-specific. If you want to skip the sixth and seventh parameters but specify a value for the eighth, you must use a pair of quotes as a placeholder for each empty parameter. In the example above, the seventh parameter (border style) is left blank. The next chapter will discuss optional parameters for each widget type.

function textwidget(wid,lp,tp,ip,eid,c1,bstyle,bcolor,c1val,c2,c2val,c3,ltext){
<Prev Table Of Contents Next>