This node serves two functions.

First, it is going to load a "flow variable", basically just a variable

that persists on the flow itself instead of just on the node. This allows us to maintain state
between executions in a simple way. You could do something much more robust around this,
like saving and loading to an external database, etc., but this is a simple place to start. The
variable in question just contains a dictionary of msg.topic, which identifies my devices, to
the last state message that was sent through this flow.

It then adds a property to the incoming message based on its payload.state property value.
This is done here so that my (many) input nodes don't have to specify their color, and I only
have to change this one place if I decide to play with different colors.

It then updates the state variable and saves the new state to the flow variable "firstFloorState",
and passes this state object to the "template" node.

Basically, this function node serves as an aggregator of state messages into a single state object
for the whole system.

Step 3: The "template" Node

This is the deceptively simple last step in the actual UI node. Double click the "template" node,
and set the various values for "Name", "Group", etc., and make it general look like this. You'll
have to play with the size settings, and I recommend you choose a size that you
like before placing all the icons, because changing it later will change the layout and you'll have
to go through and place them all again:
For the template, we are going to paste an Angular HTML template into this field, that looks like
the following:

<div style="background: url(http://<ip-of-raspberry-

pi>/staticContent/<image.png>) center/contain no-repeat; height:
500px; position: relative;">
<div ng-repeat="el in msg.payload" style="left:
{{el.left}}px; position: absolute; top: {{el.top}}px;">
<ng-md-icon icon="{{el.icon}}" size="20" style="border-
radius: 50%; border: 2px solid {{el.color}}; fill: {{el.color}};
padding: 3px 0px 0px 3px;"></ng-md-icon>
<br />
<div style="color: {{el.color}}; font-size: 10px;
padding-top: 2px; text-align: center;">
{{el.text}}</div>
</div>
</div>
</div>

If you know basic HTML, this shouldn't look too daunting besides some Angular specific stuff,
but here's the 100,000 view of what this is doing.

1. The whole template is basically one big <div> element with the overhead image of the house
set as the background. The style rules are necessary to make things overlay the image in a
minute.
2. The second <div> element represents each one of our devices. The special sauce here is the
angular "ng-repeat", which tells the UI framework to repeat this element and its contents for
each element in the msg.payload which is handed to this node. That msg.payload is going to be
an array of individual device status objects that our previous function node put together for us.
So for each device status, create one <div> element.
3. Various aspects of the <div> element will be taken off the status object for a device. That's
hard to visualize with seeing the message