Openweather.
There is a lot going on behind the scenes with icon creation.
Aah - i think i remember the backwards and forwards on that one a while ago.
Have you done a write up ? I wouldn't mind putting something like that in ?
Craig
A write up? That sounds technical. Not my forte.....
Sorry? Does not compute That is a statement with a ? at the end as I see it.
Ha ha - meant if you had posted it as a project with a follow on in terms of icons etc
Craig
Not yet. It is still "work in progress" as I haven't ticked all the boxes for all the conditions.
I guess I could release it as is and people can do with it what they want.
I just feel guilty releasing it if it isn't complete/finished.
I wonder how many people realise how powerful uibuilder is.... it literally gives you the flexibility to build anything you can imagine.
I wish I had the time to spend to get better at web development.
EDIT: all the dashboard I've built are fully interactive, they aren't just static pages. You can click on almost anything to interact - lights on the floorplan, scheduler buttons to change schedules, zones to turn on/off automate lighting, etc etc
1 Like
Yep i am on the networking side and security etc - never had an aesthetic bone in my body so trying to get on top of something like UIBuilder just does my head in.
We are going away at XMASfor 10 days to somewhere with no phones etc so might download it all onto my laptop and give it a run there with a couple of hours dedicated to it each day
Craig
The thing about aesthetics is that is what takes so long. I built my pages as quickly as I possibly could. it would be lovely to have the luxury of time to spruce them up and make them look glamorous, but it takes just that... a lot of time.
You can see examples on this forum and in this post where people have spent a long perfecting their dashboards. I am sure if you ask them, they would all say they spent hours tweaking and tuning until they got to the finished product.
I know that feeling.
I really like the look of the dashboard though.
If you are going to tell me you knocked each of those pages up in a weekend - i will do some self harm over here !!
Craig
2 Likes
If only... I timed how long it took to build the heating engine in NR and the 3x web pages bearing in mind that I had some experience already in heating, although had never delved anywhere as far.
The engine in NR including design, build and testing was around 12 hours in total (this was not my first NR project, so I was leveraging a lot of recently learned knowledge). After 12 hours it produced the back-end of what you see in the 3x images above, which I would call a complete v1.0 product. I have lots of ideas to make it version 2.0 one day, however I am sure I will spend much more than 12 hours to implement v2.0 fully - maybe 2-3x as much time!
The webpages in total if I had to hazard a guess, took 40-50 hours for all 3x. Each page (on average) takes a good 10-12 hours to get it to a decent (but not complete) level and of course depending on how much detail / complexity there is, it can vary wildly, for example the 3rd page which is just a scheduler view, probably took 6-8 hours.
If you want to gauge the time to get a detailed web page built, I'd say 15-20 hours is reasonable. Of course you can build simple web pages in a fraction of the time and you can also spend many multiples more time researching how to do the simplest things.... it's a bottomless pit of possibility, so you just have to weigh up what you want to get out of it.
I have uploaded on github my floorplan project in a simplified version. It requires a compiler, which I have documented how to install in @TotallyInformation uibuilder website (if the steps are not there any longer, I can share them again), but tbh it's really fiddly to setup a compiler. The code link to the floorplan is here:
If you had a compiler like Parcel setup on VCS and an environment, you could drop in the code and have it running in 15-20mins, but it would take a good 2-3 hours to setup the whole environment from scratch - probably longer for me now as I haven't played with my HA for almost 5 mons, so I'm sure I have forgotten a lot of what I learnt in the first 6 months!
If you are really interested, I could pull apart the floorplan code to make it work on an uncompiled version which means you could drop 3x files into uibuilder and get it to work.... little note, you'll lose the colour picker wheel and animations as I only got them to work through a compiler.
Although it's possible to use components without compiling your code, I'm not good enough to know how, so I gave up and just setup a compiler, with a lot of help from @UnborN.
I've been wondering how to build a tutorial on how to get started with uibuilder. TBH, it's daunting at first, but as you work it out, you realise how easy it really is to do things and more importantly, once you have built one page, the rest just follows.
I suppose it's like anything new. It's hard at first, but once you figure out the ground rules, it's actually quite easy and for home automation projects I found that almost everything is reusable and in fact once you've built a few web pages and as long as you don't keep pushing the boundaries, I at least think, that 90-95% of what I do on each new project is just reusing old code / old concepts.
2 Likes
My dashboard is much more modest than those that have gone before and is used as a web app on mobile devices to monitor a PIR sensor.
The PIR sensor is attached to a Raspberry Pi. Node Red on the Pi is used to create a Dashboard web interface with cloud storage in Google Sheets and notifications via Twitter. The alerts can be switched on/off either via the Dashboard or by voice commands through Alexa. Alerts are automatically enabled whenever all household mobiles phones are away from the premises. The Raspberry Pi is also running PiVPN so that the Dashboard can be accessed securely via VPN outside the local network.
4 Likes
I think you may have jumped in the deep end there rather than starting simple 
If you had wanted to just use native Vue/bootstrap and had used the default template and no build-step, you would have been up and running in a few minutes.
Once you move beyond that, yes, it will take a bit of time to get used to the various components. I'm continuing the quest to try to make things easier though. The hot-reload feature was built-in since I think you started this. That will be improved again in a future release so that it works even if editing externally (via VScode for example).
But having more tutorials and ideas would be great - bring it on!
Yes, that's how I do things. Jump in the deep end and start swimming 
Let's face it, the floorplan I built (my first project) was not an easy first project. There were a lot of layers and tonnes of time searching the Web for components, code snippets etc. You could build the same thing very easily with less layers, but I wanted to see how hard I could push it and in the process I learnt a great deal.
It was still a hard slog for me at first as I knew ABSOLUTELY nothing about a Web page / front end development when I started with uibuilder.
The interesting thing is I didn't think it was overly difficult in the end. Maybe only marginally harder than learning how to build NR dashboard using the dashboard nodes, as there is a lot that is reusable.
The net ninja tutorials on VueJS are great and the rest you can manage through Google searches.
I think I could teach someone most of the basics in 2 to 3 hours, assuming they know how to write in JS of course.
1 Like
I need a Guinea pig
Some great layouts there, love seeing some of the work and functionality.
The flow is a bit of spaghetti, but wanted it for demonstrating functionality.
5 Likes
Hey @MyRandomThoughts - It would be good to know a little more about your music player, how you are streaming, and selecting albums & tracks.
(maybe a new topic?)
I'm sure others will also be interested.
1 Like
It's a sonos system. I am not selecting tracks/albums from here, just controlling start/stop, volume and next/prev track. For track selection I am using the fantastic Unofficial Controller For Linux
2 Likes
