Hi all, just a quick post to share something I've been messing with for the last couple of days. Posted the flow to the flows site because it is too long for Discourse. That flow is very likely to get updated as it gets improved. Looks like I'll also be publishing a package of VueJS components at s…

The Bulb tag is a Vue component that is defined partly by the <script type="text/x-template" id="bulb-template"> line in the html and partly by Vue.component('bulb', { ... }) in the js file. So no, you don't need any other file or image. Can you check out a few things? Firstly, can you check what…

I installed Vue 2.0.0 and I also tried removed line 77-80 but I am still having issues. Thank you for helping me. I've added the files below. The code is copied exactly from the files provided in this project. I've only modified the floorplan line to display background.svg. <!doctype html><html l…

I have just tried your code and it is working fine for me. Are there any errors in the browser console (F12 to open then view the console tab)? Also, what browser/version are you using? With bulb A and B turned on (I'm using dark-mode so things look a bit strange): [image]

Good catch. I am using chrome Version 99.0.4844. In the console I see many errors. I am new to html, css, and js. Do you know what these mean? [image]

I did a reboot and it now works! BUT i still get the console errors. Doesn't matter if it works :slight_smile: Thank you very much for your help. It's been years since you posted this and you have been very responsive. I really appreciate it! [image]

[image] jasoncao99: In the console I see many errors. I am new to html, css, and js. Do you know what these mean? You should not be getting those. I don't see them in my version with your code. I'm amazed that anything is working. The unsupported stylesheet issues are usually because you've …

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] The 404 errors are catastrophic. They should be causing all sorts of issues. Again please go to the network tab, click …

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.

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

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

Node-RED

Node-RED Forum

Uibuilder + VueJS + SVG = visual IoT floorplan

Share Your Projects

Topic		Replies	Views
Floor plan suggestions General	139	8129	1 October 2020
Template Svg Graphic General node-red-dashboard	14	857	8 May 2023
Uibuilder dynamic SVG example - no framework needed Share Your Projects uibuilder	6	594	2 October 2024
UIBUILDER + VueJS Dynamic Floorplan - assistance needed General uibuilder	24	552	24 April 2025
New home dashboard using uibuilder and bootstrap-vue Share Your Projects uibuilder	62	23954	19 August 2021

Copyright OpenJS Foundation and Node-RED contributors. All rights reserved. The OpenJS Foundation has registered trademarks and uses trademarks. For a list of trademarks of the OpenJS Foundation, please see our Trademark Policy and Trademark List. Trademarks and logos not indicated on the list of OpenJS Foundation trademarks are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them.

Uibuilder + VueJS + SVG = visual IoT floorplan

Related topics