Uibuilder + VueJS + SVG = visual IoT floorplan

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.

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?

FYI, I am using Vue 2.0.0

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.

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

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

What software did you use to draw the floorplan?

I didn't :slight_smile:

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?

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


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

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

How? What exactly is showing it?

SWG Graphics node.. Trom this thread

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