Instant Hot Water Panel

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 :slight_smile:

3 Likes