I've been getting heady ideas about building a floor plan after watching this video....
I'm not entirely sure I have the time to learn how to do everything in that video and also not sure I want to....
I'm thinking a 3D model with spot lights and led strips that can colour and brightness are enough.... The room doesn't necessity have to change colour at well, although it does look cool..
I've been reading through the forum and found this :
node-red-contrib-ui-svg
But from reading up on it, it looks like it does 2d not 3d drawings.
I guess worst case I can draw a 3d floor plan, make it the background image and then add lights and figure out how to add led strips.
Does anyone have good examples of projects to share on this?
Also, would be good to hear what the art of the reasonable is vs what's possible, as I don't want this to become an enormous project.
I'll keep reading through this forum to see if I've missed anything and add it to my post.
Hi Alex,
Some folks on this forum (incl. Dave and myself) had already similar ideas as you can see in another discussion.
It is not clear to me what you mean with "not sure I want"? Do you want others to learn it for you? Well I want to learn it, but unfortunately I don't have time since I'm already busy building other nodes for the community...
There are some recent updates for that babylonjs node, so you can ask the author of that node whether this kind of stuff is already possible...
You could push it further and run Unreal Engine in your browser, and let it process json data from a node-red api url, you can fly through your house in 3d, put some VR headset on and you can see it for real, or just walk around for the real experience
I was just voicing out loud how far I think I want to go with this. I don’t have the time to pioneer something right now. Also, I am not sure other than the cool factor what it adds. I want to control the lights on the ground floor of my house. I’m not sure I want what I am looking at to be photo realistic.
I haven't had much time to progress my node red builds, but am now on holiday with a little spare time to research and read up.
Continuing from this excellent response to a question I raised:
... and after having checked all the links /responses above (thank you all for taking the time to reply! )....
I'm thinking to create a custom static 3d image of the floor plan and then, in phase 2, taking screen shots with the lights off and on at different dim levels for each room, so I can stimulate (very roughly) lights being turned off and on at different dim levels.
Users can touch lights and led strips overlayed on the static 3d floor plan image to select them and then (on a separate fixed location of the screen). using a slider or colour wheel (where relevant) change the light settings. Similarly there will be shortcuts to groups of lights so changes can be made quickly.
Light status for spots and led strips to be reflected on the page eg on and off to start with, followed by different warm white colours for different dim level ranges and led rgbw strips reporting the correct colour.
The Sonos section will mainly be to group / ungroup zones, change volumes and play /pause etc.
All of the functionality I have mentioned I know how to build using the dashboard and Sonosplus nodes with angular, except for the led strip (basically a single straight line or several connected lines that change colour).
All the home automation integration stuff is easy. I've done it already,, but I am completely new to uibuilder.
So the questions:
What frameworks should I use?
I have read that VueJS and bootstrap-vue are loaded by default. From what little I have read VueJS sounds interesting, but given how little I know everything seems to have good points.
I know that I do not want to use Angular as that is what I used to build my current dashboards which I understand to not be as efficient as uibuilder and more importantly for this project I need complete freedom in laying out user interactive objects (buttons, lights etc), so Angular doesn't work for me.
I have heard of React which seems to come up a lot, but at the end of the day it's very overwhelming delving into this without any experience.
I just hope I have asked a question that is not difficult / impossible to answer without knowing a lot more about what I want to do.
If I get the hang of uibuilder I guess I'll use it for future HA projects which will also require compete freedom on layouts and probably use dashboards when I don't need the freedom and the Web page isn't huge.
Can I visualise my room light status on my floor plan using uibuilder?
Context : this is part of my phase 2 plans. To start with I will just have the lights turn on / off / change colour.
So let me explain what I mean by the question. I don't want to render in real time light status. I'm happy to have x number of snapshot images of a room with lights at different levels and then load the image that suits. I don't care that the room may only have 1x rgbw strip on in, say blue, and that I am showing the room in a warm white. I think this compromise is good enough for now.
I would like to keep it easy by taking, say 5x snapshots (off, plus 4x dim levels) by 7x rooms and then loading which ever image suits for each room.
So the floor plan would be made up of 7 images that will independently change based on light levels in each room.
Each image will have its own exact coordinates (on my 1920x1080 screen) and will piece together like a jigsaw puzzle.
Ok, so I came up with this idea after looking at lots of floorplans and thinking about what I want to get out of my floorplan vs the time to learn how to build and render a real time 3d model vs using a 2d layout at the other end of the spectrum.
What I don't know is whether this is a realistic approach with uibuilder or whether it's completely bonkers and should be done a different way.
There are actually many more pertinent questions that I have to getting started (like how to build the led strips using uibuilder) , but I wanted to cover these off before I get knee deep into it and find out I may have the wrong tools and / or design in mind.
Thanks in advance for any help on this.
Oh, please tell me if I have misunderstood the svg node which looks to me to cover only 2d drawings and I guess doesn't have access to a furniture catalogue like the floor plan packages do.
Thank you. Very pertinent info. I'll check it out.
Edit: I was looking up some info to share the floor planner software I had come up with and my number one was https://www.floorplanner.com/
All good roads appear to lead to floorplanner.
Ha ha!
Really depends on what you already know. If you are used to traditional programming, you'll probably find jQuery easier to get on with at least initially. That used to be the default for uibuilder v1 but I changed to Vue and bootstrap-vue because you get a lot more features for about the same weight. But if you've not used a framework before, you should probably run through a few tutorials first.
Other than that, there are dozens of different frameworks you can use. But at the end of the day, the 2 most widely used are Vue and REACT. Personally, I find REACT heavier to use and so more complex than needed for the kinds of smallish UI's you are likely to build with Node-RED. Also, you will find more examples online for Vue that don't require a build step which makes learning and developing rather easier in my view.
So if you don't already know a framework, use jQuery if you want something quite familiar (it follows more familiar design patterns and still has lots of support and extensions any of which will work with uibiulder). Use Vue if you want to leverage more modern web design patterns - you will end up writing less code typically than with jQuery (a LOT less in some cases) but the logic is certainly harder to get your head around to begin with.
Either way, you can add lots of extensions. I've provided bootstrap-vue by default because, again, it requires no build step to use and gives a load of features that make it really easy to create nice-looking UI's without needing any messing around. Minimal boilerplate, no messing with CSS.
I agree, best reserved for large-scale web apps in my view. One thing to note: REACT is probably the most popular framework today but VueJS is rapidly outstripping it (growing at a faster rate).
Have you seen my 2d SVG example? I'd say that does everything you are asking for except the 3d part. So I can't think of any reason uibuilder couldn't be used.
At the end of the day, uibuilder does the following:
It provides an integrated communications channel (over websockets) between Node-RED (back-end, server) and your front-end (browser) code. With some simple pre-defined schema's for common tasks (such as cache control), following the familiar Node-RED msg format.
It provides you with a front-end library to make the comms simple (1 line of code to get things going) and it provides a simple event system so that your code can react when a new message arrives.
It enables you to install front-end modules from the NR Editor and mounts those modules to the ExpressJS web server built into Node-RED so making the libraries available to your front-end code in a standard way.
It lets you edit your front-end code from the Node-RED editor (if you want to, you don't have to).
There are plenty of other bells and whistles but those are the main parts. Lots more to come.
If you can find a way to do it using HTML, CSS and JavaScript then uibuilder will let you drive that UI with data from/to Node-RED, simple as that. It manages the comms and libraries for you and pretty much keeps out of the way otherwise. It is designed to be simple and flexible.
One last point. If you find yourself really going to extremes - using D3 or some such library - you will possibly be better off not using another framework (like Vue) at all. uibuilder doesn't care whether you use a framework or not. It simply provides you some piping and scaffold.
You suggest using jquery but then keep selling VueJS, ha ha
I did a quick search and it looks like VueJS might be the future...
Given I'm learning something new, I think I'll start on VueJS and will get a few tutorials behind me, as you wisely suggested.
No, I have not seen you SVG floorplan example. I'll search the forum, import it and read through your code. Sounds like you may have done a lot of the hard work already which is great news!!
I'm old-school having learned web services using PHP so even now I find jQuery more familiar. But Vue is great and very powerful but still simple to use for simple cases.
I have also added a new light bulb which is linked to an actual light in my office and I can get the light to show the correct status and value.
Now I want to add a slider to my web page so I can change the value of the light, and I will caveat this question by saying that I clearly need to watch / complete some more tutorials....
I have tried to add many types of sliders to my webpage but I always get errors in the browser debug window and the sliders never show on the page.
I have cleared the whole web page so it should only show the slider (to try and avoid any other issues), but I know I'm missing something fundamental and basic, for example if you take this webpage example:
I have added the script code to my HTML file and edited the template code to the following to simplify it:
Similarly I am failing at registering the component. I have added line 184 just below another component that was registered and just above new Vue (as suggested by a website.blog)
Apologies in advance as I am not ever sure if this is the right forum to be raising these questions anymore, however it still does pertain to building a HA floorplan using node red
I'm not an expert in three.js but with some tutorials and trial and error, I was able to load 3D models, add lighting and overlay buttons to control the lighting for a project.
