Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Custom web pages support requires SmartServer IoT 2.6 or higher.

You can create custom web pages for the SmartServer that enable users to interact with devices in a standalone or LON network. These custom web pages can query and update device datapoints served by the SmartServer. You can access the SmartServer directly by using the IAP/REST and IAP/MQ APIs. This section describes the process of creating a web page with the IAP/REST API. Similar requirements are needed for web pages created with the IAP/MQ API.Custom web pages support requires SmartServer IoT 2.6 or higher.

This section consists of the following:  

...

  1. Use the web page development tool to identify issues during development.
    1. Tools like Visual Studio Code will show formatting issue (like missing "}" and if the catch of a try catch is missing.

  2. Look at the web browser console, which shows run-time issues.
    1. Some run-time issues show up in the console, which shows the line number of the file causing an issue.

    2. Add console.log() in your source code to see messages.

  3. Web page debugger.
    1. Most web browsers have a debugger mode that you can use to troubleshoot your web pages.

    2. Look at network traffic to see if GET requests are happening.

    3. Single-step through your code.

  4. The web page does not change in the web browser after downloading new source code onto the SmartServer.
    1. This is usually due to the web browser caching the web page data.
      Chrome may cache graphic images so if the old graphic still shows up then, then clear the browsing history.

    2. Exit all tabs and web browsers accessing this web page.

    3. Delete the web browser temporary internet files (clear browser history), exit the web browser, and then start it again.

    4. Do "a" and "b" above and then restart your computer. Sometimes even deleting the cache does not work and you also need to reboot the computer.

  5. Datapoint value does not appear in the web page.
    1. The device does not exist.

    2. The datapoint path is wrong.
      1. If in IMM mode, the datapoint path needs to include device subsystems path.
        For example, device Sensor1 could have the following datapoint path Subsystem 1.classroom1.Sensor1/Thermometer/0/temp.

    3. Check datapoint path with Datapoint Browser Datapoints widget or API tester.

  6. Datapoint value does not change.
    1. Verify value changes with Datapoint BrowserDatapoints widget.

    2. If not using on-demand (max_age) for datapoint updates, then check if monitoring is enabled using the Datapoint Properties widget.

    3. If the value does not change, but you think it should, then use LonScanner Protocol Analyzer to see updates.

    4. If the value changes in Datapoint Browser widget.
      1. Verify web page tag assigned to tag.
        GET /iap/devs/*+name==Sensor1/if/LightSensor/0/nvoLuxLevel/tags/*

      2. Make sure that the datapoint pathname is correct in web page.

  7. Datapoint write does not change value on device.
    1. The SmartServer may return HTTP 204 (no content) for a PUT request whether the request was successful or not. That is, you will not get an error message if the URL or payload is incorrect. 
      1. Some write errors or warning may be reported in the write response but most other write errors or warnings show up in a WebSocket update (In the CMS Web page WebSocket updates show up as a pop up messages seen in the upper right-hand corner of the CMS Web page)
      2. If you don't use WebSockets then you can open the CMS Web page (set the Datapoint Widget polling to zero) and do a write, any write errors will show up as CMS pop up warning/error.
    2. Make sure the URL is correct and payload is properly formatted.   

    3. Use one or both of the following to see if the write PUT payload has an invalid format or the data value is invalid:
      1. ssh and issue following command (do not use the SmartServer console). Copy to notepad (or any text editor) before copying to ssh console:
               mosquitto_sub -v -t glp/0/+/ev/error 
      2. Use a MQTT tool like MQTT explorer (requires port 1883 to be open) and look at: 
               glp/0/+/ev/error

    4. Use LonScanner to see if the SmartServer sent the datapoint update.

  8. After writing to a datapoint, you see the end device change but do not see a change in the web page.
    1. For many applications you write to an input datapoint and you use a corresponding output datapoint for the status.
      1. In most cases, you should see the end device input datapoint updated quickly.
      2. Seeing output updates depends on whether the SmartServer automatically gets the updates.
        1. For certain devices (like external LON devices), the SmartServer does not get automatic updates; therefore, you need to do one or more of the following:
          1. Set up monitoring (polling or event driven), add a connection or use max_age.
        2. For internal LON devices, the SmartServer gets updated automatically, so check the status (ssh to SmartServer and type "sudo supervisorctl status") to make sure the service is running.

  9. Datapoint writes show datapoint switching back and forth between old and new values on the web page (datapoint flickering).
    1. Even though writing to datapoint changes in the device almost instantaneously, the next GET request may not show the new value.
      1. It takes a finite amount of time the write value to occur. If a GET response comes in when you are writing to a datapoint then after you process the write with a new value, processing the GET response with the old value will show your html element jumping to the new value, then the old value, and eventually the new value.
      2. If you use one datapoint to write to a device and a second feedback datapoint that shows the actual state, then it can take several GET requests to see the output value change. 
    2. To reduce datapoint flicker, you may need to add a feedback delay of up to 10 seconds for this datapoint.
      1. After you write to a datapoint, ignore all datapoint updates for this datapoint for a feedback time period.

...