Vermont Energy Control Systems

Software Architecture

Creating A New Custom GUI

While newer Vestas can create new GUI pages through Edit Mode, to create a custom page on older Vestas, the user needs to do the following:

1. Create a new skeletal HTML file
2. Create a new empty text file
3. Create and upload a background image file if desired

These steps require the use of command-line tools or FTP. Detailed instructions are contained in this manual.

Once the required files are in place, 'widgets' are created by adding lines to the text file. On older Vesta units, this is a manual process. On newer Vestas, the Edit Mode tools allow drag-and-drop creation and editing of all widget attributes.

Under The Hood

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.

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

1. A skeletal HTML file loaded by the user's browser. This file provides the framework for the page. This HTML file in turn loads:
2. Javascript files containing the widget code and other function libraries. When the Javascript is all loaded, it in turn performs an initialization, which loads:
3. A text file containing definitions for all of the desired widgets
4. Optionally, a background image

All required files are delivered with the system.

Default Pages: Vesta Classic

In the Vesta Classic, there are two default GUI pages that are built automatically by the system. Both display all system inputs, outputs, and variables. One is intended for 'internal' use - that is, use by the system owner. It allows the user to set any output or variable in the system. The other version is intended for 'external' use - perhaps to be displayed to the outside world. The public version is read-only.

The above example allows the user to set any outputs or variables. The 'GUI Button' can be toggled by clicking on it, for instance.

The password-protected private version is at http://192.168.1.8/private/index.html, while the public version is at http://192.168.1.8/public/index.html.

There are links to both on the Home Page of the standard web interface.

Vesta Vantage and Pro

In the Vesta Vantage and Pro, the built-in 'Elements & Rules' tab is a live interactive custom GUI that's built automatically by the system. Documentation for this tab is in the User Manual.