You can create custom Web pages that enable users to interact with devices in a LonTalk/IP or LON network. These custom Web pages query and update datapoints served by the IzoT Server available on the IzoT Router and included with the IzoT SDK. You can access the IzoT Server directly using the IzoT Server REST API as described in IzoT Server REST API Overview. To simplify development of custom Web pages, you can use IzoT Vision. IzoT Vision is a set of HTML objects and JavaScript libraries that allow you to easily create Web pages for the IzoT Server. You can use the IzoT Server to monitor and control IzoT and LON devices that are part of a self-installed network using ISI, or a managed network using an IzoT Net or LNS Server. With IzoT Vision you can create advanced Web pages that interact with the IzoT Server in a matter of hours.

You can use IzoT Vision objects to read from or write to IzoT Server datapoints from a Web page by adding a couple lines of HTML code for each datapoint. All background processing needed to read from and write to the IzoT Server datapoints is handled in the built-in IzoT Vision JavaScript files. There are multiple IzoT Vision object types to provide you flexibility in creating your custom Web page. Most IzoT Vision object types have advanced functions to provide you even more flexibility. In most cases, IzoT Vision objects are used with one or two datapoints. You can use two datapoints to write a value to a device and read the feedback for the datapoint from the device. For example, on an IzoT switch you can use a state-setting-1 input datapoint to turn a light on, and a state-1 output datapoint to show the current state. You can use feedback datapoints to confirm the actual state of a device function (for this example, whether the switch is on).

Example 1

This example HTML shows a lux value (luminance datapoint) of a light sensor device named LightSensor1:

<span data-izot-type="showvalue" data-izot-name="LightSensor1/luminance">---</span>

When using IzoT Vision, all devices on the IzoT Server must have unique device names. Duplicate names can cause IzoT Vision to retrieve or update the incorrect datapoints on devices with duplicate names.

You can use the Device Browser Web page to change a device name in the IzoT Server. If you change a device name in the IzoT Server, the name is not also changed in the IzoT CT or IzoT Net Server database.

IzoT Vision Objects use datapoint pathnames to define the datapoint. The pathname format is:

"<device name>/<datapoint name>"

An example datapoint pathname is "LightSensor1/luminance".

The IzoT Vision objects include the Show Value, Text Field, Text Area, Image Swapper, Drop Down, and Radio Button objects. You can use these objects to read and write to IzoT Server datapoints.  When you write updated values to these objects, the updated values are sent immediately to the IzoT Server.

You can work with many datapoints at the same time by using the IzoT Vision JavaScript object. For example, you can use the IzoT Vision JavaScript object to see the average for multiple temperature sensors. When working with multiple datapoints, you define the datapoints to monitor, and when any of the datapoint values change the IzoT Vision JavaScript object calls a JavaScript function that you define. You can write to one or more datapoint values using the IzoT Vision JavaScript send command.

You can create a template Web page that can be used with multiple devices of the same type. To create a template Web page, use the IzoT Vision SubTags object. For example, if you have 100 rooms with each with an identical switch device and an identical sensor device, you can either create a single template Web page that supports all 100 rooms, or you can create 100 Web pages where each room is represented. To create a template Web page, use substitution tags to create a Web page that represents a single room and provides a mechanism for you to select which one of the 100 rooms to be monitored and controlled.

You can create a Web page that requires users to click a Submit button before sending any updated datapoint values to the IzoT Server. To create a Web page that requires the user to click a Submit button, use the IzoT Vision Submit All or Submit Selected objects. You can use the IzoT Vision Clear object to clear any temporary values. 

To use an IzoT Vision object, add the following lines at the top of your Web page HTML file.

<head>     
	<meta http-equiv="X-UA-Compatible" content="IE=9 IE=10" />     
	<link rel="stylesheet" href="/css/smoothness/jquery-ui-1.10.3.custom.css">     
	<link rel="stylesheet" type="text/css" href="/dashboard/styles/izotvisionobjects.css"> <!—IzoT Vision  -->     
	<script  src="/js/vendor/jquery-1.9.1.js"></script>     
	<script  src="/js/vendor/jquery-ui-1.10.3.custom.js"></script>     
	<script  src="/dashboard/scripts/main.js"></script> <!—IzoT Vision -->     
	<script  src="/dashboard/scripts/izotvisionobjects.js"></script> <!—IzoT  Vision --> 
</head>

You can embed IzoT Vision objects in tables, and you can position IzoT Vision objects on your custom Web pages by adding a parent <div>.

Example 2

The following example positions an IzoT Vision object at pixel location x = 200 and y = 110.

<div style="left: 200px; top: 110px; z-index: 1; position: absolute;">     
	[IzoT  Vision Object] 
</div>

Two IzoT Vision template HTML files are included in the IzoT Server dashboard directory at /home/debian/izot-sdk/www/dashboard to get you started:

1. simple.html – a simple Web page with a single single IzoT Vision Show Value object. Replace the Show Value object with your code.
   
   
2. span style="font-weight: bold;">dashboardstatic.html – a static version of the example dashboard that you can modify to create a custom dashboard. To create a custom dashboard, rename dashboard.html to dashboardorig.html then copy dashboardstatic.html to dashboard.html and add your code.

For additional information, see the following:

1. IzoT Server Dashboard: <IP address of IzoT Server>/dashboard
   
   
2. IzoT Server Device Browser: <IP address of IzoT Server>/dashboard/dpviewer.html
   
   
3. Web development basics: www.w3schools.com