Vermont Energy Control Systems

Practical monitoring and control for the real world

HTML File

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

Screenshot of the HTML file for a custom page

Figure 4: HTML File for custom page

This is one of two files that MUST be edited by the user, either directly or using Edit Mode, to create a user interface. If it's hosted on Vesta, then it should be in either the public or private directories (/www/apache/htdocs/public/ and /www/apache/htdocs/public/ respectively). We'll go through it line by line.

Lines 3 and 4 contain references to the Javascript source files. That reference has to be valid. In most cases, you can simply use the version that's shipped with your Vesta. If your HTML file is also on Vesta, then these lines are correct as shown. If your HTML file is on a different web server, then you must specify a path to valid copies of the javascript files. In this example, src="http://192.168.1.8/ctlpanel.js" and src="http://192.168.1.8/jquery-latest.min.js" would work. This becomes more complex when access is desired through a firewall. See the section on firewalls and routers below.

Line 6 contains the TCP port number for communication with Vesta. It should be 7280 unless you have changed the Vesta's default behavior.

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 Vesta controller. This can cause delayed rule execution. A good rule of thumb is to take the number of widgets and multiply by 5 to get the minimum delay in milliseconds. For a display with 50 widgets like the example above, the delay should be about 50 * 5, or 250 milliseconds. With this delay on the standard CPU, a single display instance on a single browser will use about 4% of CPU capacity. This allows several instances (iPad, Smart Phone, Computer in den) to be updated simultaneously without affecting system performance. At total rates above 1000 widget updates per second, system performance may start to be affected.

NOTE: If you are running an older version of the system software (earlier than 2.0.1451), then you need to use much longer delays. Multiply the number of widgets by 50 rather than 5 to get the minimum delay. With the older software, a 50-widget display should have a delay of at least 2500 milliseconds.

Line 8 specifies the widget configuration file - in this case, "/private/gaugepanel.txt". This file contains a list of widgets to be displayed. In addition to the HTML file, this file must be created by the user.

Line 12 contains the background image - in this case, "/public/gaugepanel.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, Vesta is distributed with a transparent image that can be used instead. In this case, the width and height must be specified as in this example:

<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.