Vermont Energy Control Systems

Practical monitoring and control for the real world

Graphical User Interface


This document is a guide to using and creating Graphical User Interfaces (GUIs) for the Vesta monitoring and control system.


There are several terms that have specific meanings in this document:

  • GUI: Graphical User Interface. In this document, a web page that is live so that data is continuously updated, It may also allow user interaction, such as setting values or turning things on or off.
  • Data Element: Any input, output, or variable in a Vesta unit.
  • Widget: A graphical representation of an indicator light, gauge, bar graph or other object. Widgets are connected to Vesta data elements, and are placed on a background image to create a custom GUI.

Vesta Web Interfaces

Out of the box, Vesta provides a simple web-based user interface that's used to set up and program the system:

Screenshot of default user interface

Figure 1: Standard Web Interface (Vantage & Pro: Classic is similar)

This interface allows creation of data elements, creation and editing of rules, monitoring of all inputs and outputs, and a variety of system management functions.

In addition to this simple web interface, the Vesta controller has the ability for users to create a customized graphical user interface (GUI) that's more relevant to their needs. This interface updates automatically and provides the ability to directly set Vesta 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:

Screenshot of a customized web interface

Figure 2: Custom Web Interface

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 Vesta. A numeric display widget can also allow the value to be changed, and set an Vesta variable to the new value.

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

Vesta Address Used In Examples

Throughout this document, examples assume that your controller is at the standard address of Change as necessary to match your configuration.