# Uibuilder + VueJS + SVG = visual IoT floorplan

**URL:** <https://discourse.nodered.org/t/uibuilder-vuejs-svg-visual-iot-floorplan/17461>\
**Category:** Share Your Projects\
**Tags:** uibuilder\
**Created:** [3 November 2019 14:20 UTC](https://discourse.nodered.org/t/uibuilder-vuejs-svg-visual-iot-floorplan/17461 "2019-11-03T14:20:46Z")\
**Posts on this page:** 14\
**Page:** 3

<div class="post-metadata">

**Author:** ![jasoncao99](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/jasoncao99/32/58493_2.png) [@jasoncao99](https://discourse.nodered.org/u/jasoncao99)\
**Post date:** [24 March 2022 05:08 UTC](https://discourse.nodered.org/t/uibuilder-vuejs-svg-visual-iot-floorplan/17461/42 "2022-03-24T05:08:43Z")

</div>

> The unsupported stylesheet issues are usually because you've not got `type="text/css" rel="stylesheet"` on your stylesheet links in the HTML.

I have these lines below.

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/5/65b9bf23c8d4f4558e3420ce60ee67ce38741873.png)

> The 404 errors are catastrophic. They should be causing all sorts of issues. Again please go to the network tab, click on one of the 404 entries and show the details. Without these, you cannot be showing the bulb images because they are build using Vue.

Is this what you are looking for?

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/d/3df2e9c5a1a0a60d54f39b3663087643f93e5b61.png)

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/4/74f3ebc6902eb6bae7dd853b8a3559515c269f8e.png)

FYI, I am using Vue 2.0.0

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [24 March 2022 09:28 UTC](https://discourse.nodered.org/t/uibuilder-vuejs-svg-visual-iot-floorplan/17461/43 "2022-03-24T09:28:51Z")

</div>

That is a different set of errors to what you showed before.

Now you are failing to load bootstrap-vue - I would say that you don't have it installed. It provides the CSS and a number of useful components that make life easier when writing a UI.

---

<div class="post-metadata">

**Author:** ![jasoncao99](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/jasoncao99/32/58493_2.png) [@jasoncao99](https://discourse.nodered.org/u/jasoncao99)\
**Post date:** [24 March 2022 18:28 UTC](https://discourse.nodered.org/t/uibuilder-vuejs-svg-visual-iot-floorplan/17461/44 "2022-03-24T18:28:06Z")

</div>

Thank you. I checked my bootstrap-vue and other packages. Did an update and restart and now it looks much better.

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/a/9a14f12d2199f939ebd8d1a6d6cbf27b6614ad7c.png)

---

<div class="post-metadata">

**Author:** ![jasoncao99](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/jasoncao99/32/58493_2.png) [@jasoncao99](https://discourse.nodered.org/u/jasoncao99)\
**Post date:** [27 March 2022 00:40 UTC](https://discourse.nodered.org/t/uibuilder-vuejs-svg-visual-iot-floorplan/17461/45 "2022-03-27T00:40:57Z")

</div>

What would be the process to change the floor plan. Can I just swap the .svg files?

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [27 March 2022 09:14 UTC](https://discourse.nodered.org/t/uibuilder-vuejs-svg-visual-iot-floorplan/17461/46 "2022-03-27T09:14:33Z")

</div>

The floorplan itself is simply a background image set by the style attribute for the outer div tag. Replace that with whatever you like and resize according to need. The bulbs are, of course, simply placed using their x/y coordinates.

I really should do a new version - I think it should be possible to do a web components version fairly easily where Vue wouldn't be needed (though could still be used).

---

<div class="post-metadata">

**Author:** ![TadyTheFish](https://avatars.discourse-cdn.com/v4/letter/t/839c29/32.png) [@TadyTheFish](https://discourse.nodered.org/u/TadyTheFish)\
**Post date:** [12 December 2022 07:31 UTC](https://discourse.nodered.org/t/uibuilder-vuejs-svg-visual-iot-floorplan/17461/47 "2022-12-12T07:31:17Z")

</div>

What software did you use to draw the floorplan?

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [12 December 2022 09:52 UTC](https://discourse.nodered.org/t/uibuilder-vuejs-svg-visual-iot-floorplan/17461/48 "2022-12-12T09:52:29Z")

</div>

I didn't 🙂

I grabbed an image from the internet.

However, thankfully, many apps and services will now output SVG as an export - even Microsoft Office and Visio will now work well with SVG. Plenty of online tools as well. I've used Sketchup in the past to do 3d-models for house renovations (getting some measure of confidence that our ideas would work before going to an architect) - I think that can output SVG images?

---

<div class="post-metadata">

**Author:** ![TadyTheFish](https://avatars.discourse-cdn.com/v4/letter/t/839c29/32.png) [@TadyTheFish](https://discourse.nodered.org/u/TadyTheFish)\
**Post date:** [12 December 2022 13:38 UTC](https://discourse.nodered.org/t/uibuilder-vuejs-svg-visual-iot-floorplan/17461/49 "2022-12-12T13:38:40Z")

</div>

I made one and its different in nodred than it is in a viewer

 ![Screenshot_20221212_143757](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/0/f090c66be0b315f6970f23b6baf7489d5902e184.jpeg)  
 ![Screenshot_20221212_143734](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/8/38edf759d214e4b944e29f885279ce49a7f27ca0.jpeg)

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [12 December 2022 18:12 UTC](https://discourse.nodered.org/t/uibuilder-vuejs-svg-visual-iot-floorplan/17461/50 "2022-12-12T18:12:06Z")

</div>

What tool did you use? Not all SVG capable tools are the same sadly.

I think that I've used this before:

[Free online drawing tools, SVG editor, generators, png converter - drawsvg](https://www.drawsvg.org/)

---

<div class="post-metadata">

**Author:** ![TadyTheFish](https://avatars.discourse-cdn.com/v4/letter/t/839c29/32.png) [@TadyTheFish](https://discourse.nodered.org/u/TadyTheFish)\
**Post date:** [13 December 2022 11:44 UTC](https://discourse.nodered.org/t/uibuilder-vuejs-svg-visual-iot-floorplan/17461/51 "2022-12-13T11:44:02Z")

</div>

I used software to draw the floorplan and exported SVG... Those pictures that I posted are the same svg file. But one is opened with Edge and the other one is shown in Nodred

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [13 December 2022 13:40 UTC](https://discourse.nodered.org/t/uibuilder-vuejs-svg-visual-iot-floorplan/17461/52 "2022-12-13T13:40:25Z")

</div>

> [@TadyTheFish](#):
>
> other one is shown in Nodred

How? What exactly is showing it?

---

<div class="post-metadata">

**Author:** ![TadyTheFish](https://avatars.discourse-cdn.com/v4/letter/t/839c29/32.png) [@TadyTheFish](https://discourse.nodered.org/u/TadyTheFish)\
**Post date:** [13 December 2022 14:41 UTC](https://discourse.nodered.org/t/uibuilder-vuejs-svg-visual-iot-floorplan/17461/53 "2022-12-13T14:41:12Z")

</div>

SWG Graphics node.. Trom this thread

> [@Having fun with SVG - playing with light sources](https://discourse.nodered.org/t/having-fun-with-svg-playing-with-light-sources/38346):
>
> Hi folks, A HAPPY NEW YEAR to the entire community!! champagne champagne champagne While the wife and kids were still sleeping, I sneaked downstairs to experiment with light sources in SVG. Not sure whether this is called dedication, or just me being pathetic rofl With this simple flow: [image] [{"id":"4a7aaca8.bd6084","type":"ui\_svg\_graphics","z":"7f1827bd.8acfe8","group":"7185c2fb.c66bbc","order":0,"width":"12","height":"12","svgString":"\<div class=\"contain-demo\"\> \n \<svg wi…

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [13 December 2022 17:35 UTC](https://discourse.nodered.org/t/uibuilder-vuejs-svg-visual-iot-floorplan/17461/54 "2022-12-13T17:35:47Z")

</div>

I'm afraid I can only suggest trying a few different SVG editing apps or web pages such as the last one I mentioned.

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [12 December 2024 11:52 UTC](https://discourse.nodered.org/t/uibuilder-vuejs-svg-visual-iot-floorplan/17461/55 "2024-12-12T11:52:59Z")

</div>

A post was split to a new topic: [UIBUILDER + VueJS Dynamic Floorplan - assistance needed](https://discourse.nodered.org/t/uibuilder-vuejs-dynamic-floorplan-assistance-needed/93875)

[Previous page](https://discourse.nodered.org/t/uibuilder-vuejs-svg-visual-iot-floorplan/17461.md?page=2)