Workflow for creating SmartHome UI with SVG-node

Hi there,

originally when starting with my SmartHome I've just been using components from the Homematic system. Because the HM-system is missing a graphical UI I've been using along with that the HomeDroid-App on my tablet. The floorplan has been created by using the freeware "Sweet Home 3D". From the very beginning a big problem has been that devices from other companies or WiFi-components are rather complicated to integrate.

In the meanwhile there is a version of node-red released, called RedMatic which is running on the same server, which is hosting the HM-system. So I decide to move the management and "programming" to the "node-red". The only thing that kept me from "moving completely" to node red was the fact that the node-red's dashboard is not what I call "ready to use" for my family.... :wink:

I was considering whether to delve further into the UI builder, but discarded the idea as i'm not really a hacker. With the SVG-node, however, I think I found exactly what I was looking for.

Unfortunately, the workflow was not as successful as I had imagined, so I thought about how a UI creation could work..... and here is the preliminary result:

  • There are somne manually build SVG-templates for my devices and a common definition block.
  • The SVG-conde snippets are placed within a Excel-file with different sheets
    • GUI-sheet: is where rectangle elements are placed by the user. Each element gets a specific name which is used to identify the type of the device and generate an Event later on.
    • In the Properties-sheet the position and the properties for the elements (like the text) is stored by a VBA-sub
    • By using Excel-formulars the data from the Properties-Sheet are edited and strored for further usage.
    • In the SVG.Common- and the SVG.Templates-sheets the above described SVG-code is stored
    • At least the whole SVG-Code is generated by another VBA-sub which is making use of the given tamplates and the properties.
    • There are three buttons:

      Get Properties: Read the properties of the given rectangels in the HUI-sheet
      Set Properties: Is rescaling the elements in the GUI-sheet by using the data from the templates
      Generate SVG: guess what :wink:

The next step is to include a text version of the whole [node-red-contrib-ui-svg]....

I thought that this might be helpful for other people so I generate this post. If so, let me know and I will describe it in more detail and of course I will gladly share the files with you. If not, just forget it :wink:


The screenshots are showing the "original" HomeDroid-UI, the floorplan with the user placed elements in Excel and the result (missing the floorplan) in node-red's Dashboard...

I forgot to mention that the templates are a animated so the user gets feedback when clicking an element:


1 Like

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.