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.
This page includes the following three examples:
- Example 1 is an example Web page to show a single dynamic value using the IzoT Vision Show Value object. This example does not require any external devices.
- Example 2 is Example 1 with a dynamic image that changes color based on a CPU utilization datapoint. This example also does not require any external devices.
Example 3 is an IzoT device application that has an input datapoint to a switch and a feedback datapoint for the output of the switch (typically, state-setting-1 and state-1 datapoints). This example requires an external device (such as an FT 6000 EVB, CPM 4200 EVB, or Raspberry Pi).
To get started, follow these steps:
- Install a Web page editing tool if you do not have one. You can use any tool that can edit HTML Web pages. Here are a few examples:
Any Windows text editor such as Windows Notepad or the free Notepad++ text editor. Make sure to save the file as text only if the editor supports formatting
Any Linux text editor such as nano or vim. You can use the text editor on the sample platform with the IzoT Server such as the IzoT Router. Make sure to save the file as text only if the editor supports formatting.
Any HTML editor and Web size integrated development environment such Adobe Dreamweaver, JetBrains WebStorm, or BlueGriffon.
Install an SFTP program to transfer the files to the IzoT Server platform. Some advanced HTML tools such as Dreamweaver or WebStorm include this capability. You can also use a standalone tool such as WinSCP.
Install an IzoT Router as described in Setting Up the IzoT Router, or an IzoT Server as described in Getting Started with the IzoT SDK. The IzoT Server provides the IzoT Server REST interface required by IzoT Vision. The IzoT Router includes an IzoT Server. The IzoT Router includes an IzoT Server. The IzoT Server includes the following Web pages that you can use with IzoT Vision:
IzoT Device Browser — to identify the datapoint pathnames, to change device names as necessary, and to verify that values change as expected.
IzoT Charts — to view datapoints from multiple devices simultaneously.
Example 1 - Single Dynamic Value using IzoT Vision Show Value
To create this simple Web page (shown below) to view the IzoT Server CPU utilization, follow these steps:
To open the IzoT Device Browser Web page on the IzoT Server, enter the following address in a Web browser:
http://<IzoT Server IP Address>/dashboard/dpview.html
- Find the Server CPU utilization device name and datapoint name. You will need these in step 6. For example, the device name may be localhost and the datapoint name may be cpu_utilization.
- Click the Device Browser Export button to get a list of all devices or the Export Device button to get all the datapoints for a specific device.
- Create a new HTML file in your Web page editing tool or text editor and name it test1.html.
Copy the following code to test1.html:
<!DOCTYPE html> <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=9 IE=10" /> <!-- IzoT Vision styles --> <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 JavaScript --> <script src="/dashboard/scripts/izotvisionobjects.js"></script> <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> </head> <body> <button type="button" style="float:right;margin-right:20px;background:none;border:none" onclick="loginServer('Log out')">Log out</button> <div style="left:200px; top:110px; z-index:1; position: absolute;"> <span data-izot-type="showvalue" data-izot-name="device_name/datapoint_name">---</span> </div> </body> </html>- Replace device_name/datapoint_name with the CPU device name and datapoint name that you found in step 2. The device name and datapoint name are case sensitive so both the case and spelling must match.
- If you created the file on your computer, save the test1.html file and SFTP it to the IzoT Server dashboard directory at /home/debian/izot-sdk/www/user. If you created the file on your IzoT Server host, copy the test1.html file to the /home/debian/izot-sdk/www/user directory.
Open a Web browser and copy the following link, substituting the IP address with the IP address of your IzoT Router:
http://<IzoT Server IP Address>/user/test1.html
The CPU value changes every 10-15 seconds. Hover your mouse over the CPU value to make the Web page tooltip pop up and show you which datapoint is displayed by that IzoT Vision object.
Example 2 - Adds a Dynamic Image
Example 2 adds a dynamic image to Example 1. The image is a bell that changes color based on host CPU load as shown in the following table.
CPU Value | Color |
|---|---|
0 - 19 | Green |
20 - 50 | Yellow |
51 - 79 | Orange |
80 - 100 | Red |
To add the dynamic bell to Example 1, follow these steps:
Add the follow code and change the device_name/datapoint_name to the CPU device name and datapoint name from Example 1 step 2.
<div style="left: 250px; top: 110px; z-index: 1; position: absolute;"> <div data-izot-type="imageswapper" data-izot-name="device_name/datapoint_name" data-izot-range="math" > <img data-izot-type="image" style="display: none;" src="/dashboard/images/bellred.png" data-izot-value=">=80"> <img data-izot-type="image" style="display: none;" src="/dashboard/images/bellorange.png" data-izot-value=">=50"> <img data-izot-type="image" style="display: none;" src="/dashboard/images/bellyellow.png" data-izot-value=">=20"> <img data-izot-type="image" style="display: none;" src="/dashboard/images/bellgreen.png" data-izot-value="<20"> <img data-izot-type="image" style="display: none;" src="/dashboard/images/bellgrey.png" data-izot-value="-1" data-izot-default="true"> </div> </div>
- Refresh (F5) the Web page in your Web browser. The bell image changes colors depending on the CPU value. It may take a minute or more before the image changes.
Example 3 - IzoT Device Application
Example 3 demonstrates how to update a datapoint from a Web page. The example uses two Image Swappers, one to control the state of the switch (switch image) and one to show the state of the switch (lamp image). This example requires that at least one device on the IzoT Server with state-setting-1 and state-1 datapoints.
s
To implement this example, follow these steps:
- Open the IzoT Device Browser Web page on the IzoT Server and find a device with state-setting-1 and state-1 datapoints.
- If there is another device with the same name in the browser device list, click the Config button for one of the devices, change the name to be unique, and then click Submit. Repeat this step for any additional devices with the same name.
- Create a new HTML file in your Web page editing tool or text editor and name it test3.html.
Copy the following code to test3.html:
<!DOCTYPE html> <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=9 IE=10" /> <!-- IzoT Vision styles --> <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 JavaScript --> <script src="/dashboard/scripts/izotvisionobjects.js"></script> <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> </head> <body> <button type="button" style="float:right; margin-right:20px;background:none; border:none" onclick="loginServer('Log out')">Log out</button> <div style="left:250px; top:100px; z-index:1; position:absolute;"> <div data-izot-type="imageswapper" data-izot-name="device_name/state-setting-1" data-izot-mode="rw"> <img data-izot-type="image" style="display: none;" src="/dashboard/images/switchTradOff.gif" data-izot-value="off"> <img data-izot-type="image" style="display: none;" src="/dashboard/images/switchTradGreenOn.gif" data-izot-value="on" data-izot-default="true"> </div> </div> <div style="left:550px; top:100px; z-index:1; position:absolute;"> <div data-izot-type="imageswapper" data-izot-name="device_name/state-1"> <img data-izot-type="image" style="display: none;" src="/dashboard/images/lampOff.gif" data-izot-value="off"> <img data-izot-type="image" style="display: none;" src="/dashboard/images/lampOn.gif" data-izot-value="on" data-izot-default="true"> </div> </div> </body> </html>- Replace device_name with the device name you found in step 1.
- If you created the file on your computer, save the test3.html file and SFTP it to the IzoT Server dashboard directory at /home/debian/izot-sdk/www/user. If you created the file on your IzoT Server host, copy the test3.html file to the /home/debian/izot-sdk/www/user directory.
Open a Web browser and copy the following link, substituting the IP address with the IP address of your IzoT Router:
http://<IzoT Server IP Address>/user/test3.html
Open the following page in a second Web browser for the IzoT Device Browser, and open it side-by-side with your test3.html window:
http://<IzoT Server IP Address>/dashboard/dpviewer.html
- Click the image on the left switch image to update the state-setting datapoint value. The image changes when you click it. The state-setting-1 datapoint value also changes in the Device Browser. Depending on the hardware and application you are using, you may see an immediate change on your device. For example, if you use an FT 6000 EVB with the default NcMultiSensorExampleApp, you will see the LED turn on and off when you click the left-hand image.
The right-hand lamp image represents the current state of the lamp output datapoint. It will change after a minimum of 8-10 seconds. The time it takes for the lamp image to change depends on whether there is a broadcast connection between the state-1 datapoint and a datapoint on another device or whether the datapoint is polled. The poll rate depends on the settings in the device class file and the number of datapoints that are being polled. As a result, the lamp image may take seconds or minutes to change depending on your network settings. - Hover your mouse over the image to see what datapoints are being used. If you see an error message, go to the Troubleshooting the IzoT Router topic.