Implement UI auto-refresh heartbeat

[cpq]

Add a configuration option - a heartbeat interval. Add a visual "UI freshness" indicator to the toolbar

Adding @dvosully for the implementation feedback

[cpq]

@dvosully the autosync is done.

When device is offline, the toolbar shows red circle and the last sync time:

When device is online, a green circle is shown:

The sync interval is set in the "sidebar" panel, default is 1 second. When device state changes (a setter function is called which changes attributes), all variables are re-synchronised.

Please feedback

[dvosully]

@cpq I've tested this now. I like the concept and UI, but have a few reservations.

Things I like:

• All the API endpoints are refreshed when there is a change.
• The offline/sync status indicator is nice and clear

Things I am not yet convinced of:

• The resync only occurs if a setter is called. 'status' style elements (eg. 'Speed' or 'Temperature' on the example UI) may update on the device without a 'set'/'save' getting initiated by the user, the re-sync never catches this. It would be good if there were some way to catch this.
• If changes are made in multiple panels, and then a save is initiated on one, the changes in the other panel are overwritten by the refresh.
• If the sync interval is set large, there is a large delay between the state change and the variable re-sync. This can mean that a save is pressed, changes are begun in another panel, then the changes in the other panel are overwritten when the re-sync occurs. (Admittedly not a big issue if the sync interval is kept small as it is designed)

I don't have a clear idea of how to fix all these things cleanly, and some of the below ideas get complex or may interact badly, but following are some thoughts:

• The browser caches the variables. When a resync is performed, can the browser only update fields where the received variable is different from the cached value? This could prevent wiping unsaved changes.
• Can an individual refresh timer be put on an API endpoint? This could allow 'status' style elements eg. 'Speed' to be (fully) refreshed frequently without impacting the rest of the page elements.
• Could 'unsent' changes be visually identified somehow? This gets a bit abstract and I'm not sure I like the below ideas, but ideas nonetheless:
  • Could the 'sync' indicator display a different color/tooltip if there are any unsent/unsaved changes?
  • Could an unsent field get a colored overlay if it differs from the cached value?

I'll keep thinking about this.

[cpq]

Thanks David!

There is a API function what can trigger refresh independently from any user action:

// Increment device change state counter - trigger UI refresh
void glue_update_state(void);

Currently there is only a single global change counter. We can implement a per-endpoint counter, though that will make both the api above, and processing logic more complex. Esprecially if we want to hide counters of the privileged endpoints from the unprivileged users. Also we can employ websocket to push changes immediately instead of polling, but historically we found that websocket has a toll on both device and a UI.

Note - this change / autorefresh indicator was requested by multiple people . One company even had this as a very strong requirement, cause they had cases with their current implementation, people making changes to the stale UI shutting down the device, or making fatal changes. So for them, having a fresh up-to-date UI is a way higher priority that a user filling setting and having that updated - from the operation safety, they much prefer that rather than showing stale values.

To summarise, the current implementation

• may change the panel automatically while someone edits it (but maybe that's OK?)
• some unrelated frequent variable change may trigger a constant storm of refreshes
• refresh interval can be large (though I think 1 second should be generally good)

We plan to keep the current implementation, and address mentioned issues later, as we see them as a lower priority at this moment.