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.
