# Workflow for creating SmartHome UI with SVG-node

**URL:** <https://discourse.nodered.org/t/workflow-for-creating-smarthome-ui-with-svg-node/41518>\
**Category:** Dashboard\
**Created:** [23 February 2021 23:08 UTC](https://discourse.nodered.org/t/workflow-for-creating-smarthome-ui-with-svg-node/41518 "2021-02-23T23:08:45Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![JoeWiseman](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joewiseman/32/37679_2.png) [@JoeWiseman](https://discourse.nodered.org/u/JoeWiseman)\
**Post date:** [23 February 2021 23:08 UTC](https://discourse.nodered.org/t/workflow-for-creating-smarthome-ui-with-svg-node/41518/1 "2021-02-23T23:08:46Z")

</div>

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...

 ![Screenshot-HomeDroid-small](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/8/280e3e7d3db437230c062815e613efc215fb8de1.jpeg)  
 ![Screenshot-Excel-Floorplan-small](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/a/7a1c47a0cd0d2ae57c3a52c589f0c07e8ab3ee63.jpeg) ![Screenshot-NodeRedUI-small](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/3/b37d69508a6b08241132c51b1d827380dc6cea16.jpeg)

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

![AnimatedIconsAndTemplates](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/d/8dc15268503b5715e97f48489c1334f55df48142.gif)

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [25 March 2021 23:09 UTC](https://discourse.nodered.org/t/workflow-for-creating-smarthome-ui-with-svg-node/41518/2 "2021-03-25T23:09:27Z")

</div>

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