Author Topic: Dynamic updating of displayed device variable?  (Read 295 times)

Offline tinman

  • Full Member
  • ***
  • Posts: 168
  • Karma: +10/-0
Dynamic updating of displayed device variable?
« on: March 13, 2018, 11:43:50 am »
I'm updating a device plugin. I've had to change the code for a settings tab from JSON to a page created by Javascript code. The previous JSON created page included a device variable that has its value updated often in the background. When the value changed the displayed value was updated as well. I don't know what mechanism allows this to happen for JSON. I'd like to know if there is a way to make this happen now that the page is created using Javascript to build the HTML. I'm still pretty much of a novice when it comes to web development.

Offline rigpapa

  • Hero Member
  • *****
  • Posts: 640
  • Karma: +94/-1
Re: Dynamic updating of displayed device variable?
« Reply #1 on: March 13, 2018, 12:50:08 pm »
If you're creating the tab from JavaScript and populating elements from JSON, you have to do the updates on your own... periodic JSON fetches and refreshes of placed data, or action-based fetches and refreshes, or both, as needed.
Author of Reactor, DelayLight, SiteSensor, Rachio, Deus Ex Machina II, Intesis WMP Gateway, Auto Virtual Thermostat and VirtualSensor plugins. Vera Plus w/100+ Z-wave devices. Vera3 sandbox.

Offline tinman

  • Full Member
  • ***
  • Posts: 168
  • Karma: +10/-0
Re: Dynamic updating of displayed device variable?
« Reply #2 on: March 16, 2018, 03:16:05 pm »
I've found a way to do this using the javascript setTimeout(myTimeTriggeredFunction, timeInterval). When the tab displaying the variable I want to keep updated is displayed I use the setTimeout method to trigger my function to retrieve the device variable. If it has changed since the last time I retrieved it, I use jquery to update the variable's displayed value. This time triggered function also checks to see if the tab of interest is still displayed (by using document.getElementById("an ID of an element on the tab") and if so it again calls SetTimeout to schedule itself to run again after the interval. If the element is not found the time triggered function stops being scheduled.


Offline rigpapa

  • Hero Member
  • *****
  • Posts: 640
  • Karma: +94/-1
Re: Dynamic updating of displayed device variable?
« Reply #3 on: March 16, 2018, 04:20:03 pm »
Good work! That's the way it's done. Since you're using jQuery to update your displayed field, you might keep your code consistent by using jQuery to find your key field for your setTimeout test as well, e.g. if ( jQuery("#id-of-element").length > 0 ) { setTimeout(...); }.

I had forgotten when I posted previously that there are also callbacks available in the Vera JavaScript API, and it seems reasonable to guess that one (or more) of them would trigger when the device data changes (that is, a state variable changes underneath you). But I couldn't tell you if that's absolutely true (but shocked if it wasn't), or which callback(s) it may be if so, because I haven't used the callbacks for anything but the control panel closing (another way you might know to stop running setTimeout).

The way you've done it, however, is probably more common even on Vera, and certainly more portable and applicable to more than just Vera.
Author of Reactor, DelayLight, SiteSensor, Rachio, Deus Ex Machina II, Intesis WMP Gateway, Auto Virtual Thermostat and VirtualSensor plugins. Vera Plus w/100+ Z-wave devices. Vera3 sandbox.