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.... 
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
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
Regards
Joe
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:
