Basically, each device specifies it's own layout in the template with it's status message, what icon

to use (see: Angular Material Icons), and what it's last state was. Remember that the "color"
property is actually going to be added for us by the function node we setup earlier.

And that's really it. Click "DEPLOY" and go look at your nice blank overhead view of your house.
Next we wire incoming device updates to the this control.

Step 4: Wire It Up

The wireup is actually very simple. You just have to take the incoming message, and translate it
into a message of the above form, with a "link" output node to link it to our UI flow.

As an example, you can pull in an "mqtt" input, a "function" node, and a "link" output node, and
wire them together like so:

You can ignore the "text" UI elements there, this flow actually feeds not just my overhead view,
but also another status screen.

Double click the "link" node and point it at our previously defined "Visual First Floor State
Update" "link" node.

Now double click the "function" node, and paste the following in:

return {
"topic": msg.topic,
"payload": {
"icon": (msg.payload === "true" ? "person" :
"person_outline"),
"top": 130,
"left": 365,
"state": (msg.payload === "true"),
"text": null
}
};

This function shows how I translate an incoming MQTT message to the status messages my
"template" node's state is made up of. You can see I'm dynamically choosing between two
different icons here based on the payload of the incoming MQTT message. You can choose your
icons from any