I have been quiet for some time since posting my first uibuilder/VueJS project here:
This is not because I am not continuing to develop my home automation dashboards, but because I have become self-sufficient on the Node-RED side of things and tend to search other more focused forums for VueJS, CSS and HTML queries.
Since developing my very first web page using Node-RED’s uibuilder and VueJS I have moved onto project number two being an instant hot water schedule and status panel. I have continued to learn more about VueJS – the topic is quite deep, so have learnt how to do things better than the floorplan. In many ways I would suggest that code in the floorplan highlights many ways not to do things efficiently… I live and I learn.
Below is a screenshot of my Node-RED flow:
Below is a screenshot of the panel in action:
Perhaps more interesting is a short video where you can see some basic animations that I have built in. I'm recording from a desktop, but the interface is built for a tablet. You can do quite a few things like:
- set daily schedules for instant hot water
- change the temp set points to determine the temp range for instant hot water
- change the temp of the water coming out of the cylinder
- there are some basic timers to the left hand side of the pumps to see how long pumps have been on / off for. I plan to visualise larger sets of data at a later stage
The code base was built in VueJS 2.0 using single file components. The single file component and the node-red flow has been stored in github, here.
Any questions, please shout out.
EDIT: Oh yeah, a HUGE thank you to @UnborN for his amazing support in helping me debug / develop and learn VueJS, JS, CSS etc etc.... thanks buddy, I greatly appreciate your input!
PS: I'll be posting my uibuilder based lighting panel shortly. It's getting close to being finished... or least baselined 
