Using ui_template I want to have a Home page with several linked "area" monitoring sub pages which show information for those areas. The home page would look like the screen shot below. Each areas data is periodically updated and injected into the ui_template node.
What I am trying to achieve is a way to only update data in a specific linked area page based on the template receiving a msg (tag) with msg.area = "areaX" where X = the area ID. So if the msg.area = "area1" then the page data is updated for Area 1, but not in any of the other areas (they just ignore the incoming msg data as the tag is not = to their area).
The msg data comes from a function node and contains straight forward data (no arrays): msg.area (area ID), msg.message (text to display in the HTML), msg.icon (material icon reference) and msg.colour (colour of the text/icon). That all works, its how I get to update per area page basis?
I thought that using javascript in each areas sub-page might help, but don't see how I can use that to allow the HTML in that page to be updated, or to ignore the data.
The really inefficient and ugly solution is to have separate ui_templates for each area and select them from NR menu. I may have up to 50 areas so not only does this mean having up to 50 templates, it also means 50 connections to the function node and having to differentiate in the function node which output to send the data.
I am far from fluent on javascript or HTML and have done lots of research on how I might be able to achieve this, but drawn a blank as far a a good example goes. Any useful pointers/examples appreciated.
