Web Pages

Owned by Sacha Parisot (Unlicensed)
06-Jun-2022
8 min read

You can use the IzoT Server as a Web application server for IzoT networks. The IzoT Server connects IzoT and LON devices to Web clients, providing local Web access to operate communities of devices. This includes discovering devices, monitoring their data, and controlling them via network inputs.

A set of example Web pages are included with the IzoT Server. To use the example Web pages, configure the IzoT Server as described in Configuring the IzoT Server, and then click the green Example Dashboard (Local) button on the Server page.

The pages are organized by tabs. You can use these pages to try the server for yourself, or use them as the starting point for your own custom Web pages. You can also use IzoT Vision which allows you to easily create advanced Web pages. See Creating Custom Web Pages with IzoT Vision for more information on IzoT Vision.

The example Web pages are contained in the following tabs:

  • Dashboard — home page for the example pages displaying summary status and providing high-level controls
  • LED Control — device-specific page for the example LED devices providing control of the LED devices
  • Sensors — device-specific page for the example Environment Sensor devices displaying summary status for all Environment Sensor devices and providing an interface to configure the Environment Sensor devices
  • Charting — general-purpose charting page for charting data such as temperature, humidity, light-level, and occupancy from Environment Sensor devices
  • Device Browser — general-purpose browser for display current datapoint values from all devices monitored by the IzoT Server, and for updating input datapoints
  • Test Page — general-purpose page where you can directly enter IzoT REST requests to learn and experiment with the IzoT REST API

This section consists of the following:

Dashboard

The Dashboard tab provides a live look at the example Web pages home page.  The display on this page reflects the example devices using the IzoT Server. Upon startup, the Dashboard queries the IzoT Server for example devices. As the IzoT Server responds with devices, the Dashboard automatically adds supported devices to the display.  If you later add a new supported device to the network, you will see a message asking if you want to reload the Dashboard to reflect it, or continue with the Dashboard as shown. The Dashboard is split into panels that reflect the LED lights themselves and also reflect results from the environment sensor in panels for temperature, humidity, light sensor, and occupancy.

In addition to LEDs and environment sensors, you can include keypads on your platform. These, too, can work with the Dashboard.

Once the LEDs appear in a panel, you can control them from the dashboard one at a time, or as a group.  You can also set scenes to activate all LEDs in your environment. If you are setting a scene, the information is first sent to the keypads, and then to the LEDs.  Scenes are defined in the LED Controller per LED.  They are set using the pull down menu on the dashboard.  If you are working with the LEDs individually, you can turn them on and off and change colors one LED at a time using the dashboard display panel.

LEDs consume power, which is reflected on the dashboard in the power gauge reading Total Power. A one-minute history of power is charted next to the gauge.

The environment sensor displays on the dashboard as Temperature, Humidity, Light Sensor, and Occupancy.  If you have one environment sensor, the data displayed on the dashboard will reflect the exact readings.  If you have more than one environment sensor, the reading will reflect an average of the sensors.  The highest and lowest readings will also be shown.  Occupancy reflects the state detected by the environment sensor as occupied or unoccupied.

The dashboard has six tabs: the dashboard tab itself, the home tab, followed by tabs labeled LEDs for LED color selection, Sensors for configuring the environment sensors, Charts for environment sensor displays, Device Browser to display device output, and a Test page.

Web page error messages are displayed at the bottom of the Dashboard. Error messages remain displayed until the error is cleared.  There is a Clear Error button located next to the error messages.

LED Control

The LED tab of the dashboard gives you control of the colors of your LEDs.

You can select primary colors with the color bar. You select any color with the color wheel or color value boxes. You can vary hue saturation with the sliders.

You can set LEDs to a scene, where the color is determined by the scene configuration stored in each LED. To set a scene, select the scene in the Scene box.

To set the individual color of an LED, select the LED by clicking the check box next to, and then use the color choices described above. The color will change in the LED you selected.  

To set the color of multiple LEDs, either select the check boxes for all the LEDs to be changed, or select the check boxes for Keypad devices that are connected to the LEDs. The LED Web page uses individual messages to control each LED. You can use connected Keypad to simultaneously change multiple LEDs.  

You can perform your own color test, which cycles through a variety of hue factors, or select a test from the menu shown, and cycle through the different intensities of red shades, green shades, or blue shades. There is a box provided in the test area which lets you select the length of time before the test moves to the next test value.

You can both select and unselect LEDs to change colors using the select and unselect button. To repeat a color, use the Set Color Again button.

Charting

The Charts tab provides a charting function that displays a dataoints values in a chart and in a table. The chart is color-coordinated to the table shown on the same page. In the Chart, you can mouse over the dots, diamonds, and circles on the chart to see output corresponding to that device.

You can manually select which Device datapoints are visible on the chart and datapoint table. You can search for datapoints with a common name that is available for multiple devices.  The Chart defaults to doing a search for illuminance datapoints which is a common datapoint for the IzoT SDK examples.

To search for one or more datapoints change the Devices selector to Search For and then type the search string in the Datapoints box and then click Search. Below are example search strings:

  • Full datapoints name (e.g., *temperature”, “led-state-1”)
  • * before and/or after search string (“*ature”, “temp*” or *perat”)
  • Single character “?” (e.g., “led-state-?”)

The datapoint table shows all datapoints that are being monitored. Each datapoint in the table has a Chart color for the datapoint, a check box that you can use to select which dataponts are shown in the chart, a Datapoint ID, Device Name, Datapoint Name, Latest Value, Last time the IzoT Server updated the Latest Value, Min and Max values for numeric values and a Display button. Select the Device Info check box to see the datapoint device’s Device ID, Unique ID (neuron ID), and Device Type.

You can export the datapoint values to a text .csv file. To export values, click the Export button. Depending on what Web browser you use, if you open the exported file in Excel, you may find that Excel does not always show the full Last Update time due to the cell format. If this happens, you can change the cell format for timestamps to m/d/yyyy h:mm:ss AM/PM to see the complete timestamp.

You can display all stored datapoint values for a specific datapoint in the Datapoint Value table at the bottom of the page. To display values, click the Display button.

You can clear the logged data or pause the output using the buttons above the table. To clear all saved data values in both the chart and table, click the Clear Chart button. You can pause display updates so that the chart and table are not updated while you zoom and browse data. To pause display update, click the Pause button. To stop all polling, clear the Poll Data check box.

Sensors

You can use the Sensors tab to view the datapoint outputs of the Environment Sensor devices. You can also use the Sensors tab to view and modify the configuration datapoints for the Environment Sensor devices.

You can view the sensor values in the Sensor Table that is displayed by default. For the Occupancy Mode value, the value displayed will be Auto, Test,Force On, or Force Off. Force Occupied is reflected at the environment sensor as a green LED and Force Unoccupied is a red LED.

To view or modify the configuration of one or more Environment Sensor devices, click the Config button. This displays the Configuration Datapoint Value Table with the configuration datapoint values.

You can copy the configuration of any of the Environment Sensor devices to the Configuration Datapoint Value Table. To copy the configuration datapoint values from an Environment Sensor device, click the Copy Config button for the device.

You can copy the configuration specified by the Configuration Datapoint Value Table to any of the displayed sensor devices. To copy the configuration to a set of sensor devices, select the check boxes for the sensor devices to be updated, and then click the Submit button at the top of the Configuration Datapoint Value Table.

Device Browser

The Device Browser Web page displays the current data from a selected IzoT device. The devices appear in a table, with Name, Value, Timestamp, and URL columns displayed on the page. Each device entry shows the device name and the current active state. You can use this page to monitor output datapoints, update input datapoints on your IzoT devices, and wink your IzoT devices to identify them.

The Device Browser adapts to discovered devices so you do not have to modify the browser to support a new type of IzoT device.

To monitor and update datapoints on a device, click the device entry. If the IzoT Server had a matching device class file for the device, the datapoints for the device are displayed, along with the most recent value for each datapoint that was received by the IzoT Server. If the IzoT Server discovered a device without a matching device class file, the name of the device is Unknown Device.

You can hide any entry in the device list. This hides the device both in the Device Browser as well as any Web pages that check the hidden flag. The browser shows the total number of devices with a breakdown by the active state (Active, Marginal, Pending, and Offline devices). The Hidden count is not included in the total device count.

By default, active, marginal, and pending devices are shown in the Device Browser—offline and hidden devices are not shown. You can show all devices by selecting the Show All Devices check box.

You can configure the device browser to automatically update datapoint values, and you can configure the frequency that the Device Browser queries the IzoT Server for new datapoint values. To enable automatic updates, select the Auto Update check box. To configure the request frequency, set the polling interval next to the Auto Update check box.

You can change the name, category, and notes for a device. To change the name, category or notes, click the Config button, make your changes, and then click the Submit button to save the changes. If you change the name of a device and click Submit, the name change is saved in the IzoT Server. It is also changed in the device if the device implements a SCPTname configuration datapoint. The device name may not be the same as the device name that you will see in an IzoT CT network drawing.

Test Page

The Test Page tab opens a page where you can enter requests to the IzoT Server and view the server's responses. This page is a valuable tool for learning the IzoT REST API, and is also valuable for testing purposes when you are building and testing your custom IzoT applications and networks.

The page includes a space to enter GET and PUT requests, buttons to submit the requests, and a place for URLs and data.  Once a request is completed, you can use the Clear button and move on to another test.