Versions Compared

Old Version 2

changes.mady.by.user Sacha Parisot

Saved on

compared with

New Version 3

changes.mady.by.user Sacha Parisot

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

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 topic describes 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:

  1. 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.

  2. 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.

  3. 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:

Image RemovedImage Added


  1. To open the IzoT Device Browser Web page on the IzoT Server, enter the following address in a Web browser:

    Code Block
    http://<IzoT Server IP Address>/dashboard/dpview.html


  2. 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.

...


  1. Image Added

  2. 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.

  3. Create a new HTML file in your Web page editing tool or text editor and name it test1.html.

  4. Copy the following code to test1.html:

    Code Block
    <!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>

  5. 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.

  6. 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.

  7. Open a Web browser and copy the following link, substituting the IP address with the IP address of your IzoT Router:

    Code Block
    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.

...

  1. Add the follow code and change the device_name/datapoint_name to the CPU device name and datapoint name from Example 1 step 2.

    Code Block
    <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>


  2. 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.

Image Modifieds

To implement this example, follow these steps:

...