# Instant Hot Water Panel

**URL:** <https://discourse.nodered.org/t/instant-hot-water-panel/36098>\
**Category:** Share Your Projects\
**Created:** [17 November 2020 21:45 UTC](https://discourse.nodered.org/t/instant-hot-water-panel/36098 "2020-11-17T21:45:31Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![alex88](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/alex88/32/55523_2.png) [@alex88](https://discourse.nodered.org/u/alex88)\
**Post date:** [17 November 2020 21:45 UTC](https://discourse.nodered.org/t/instant-hot-water-panel/36098/1 "2020-11-17T21:45:31Z")

</div>

I have been quiet for some time since posting my first uibuilder/VueJS project here:

> [@Building an interactive floorplan using uibuilder](https://discourse.nodered.org/t/building-an-interactive-floorplan-using-uibuilder/33378/3):
>
> Since posting this topic, I have baselined the project. Posting a picture of how it looks here: My most interesting finding is that unless you have a very small Sonos system and low network traffic I would steer away from creating an interactive real-time Sonos panel using the current Sonos Plus node. Too much traffic is created going real-time, at least without some serious coding to minimise the traffic (which I don’t have the time to do right now) and als…

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:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/0/9090e9d8db0e364f9f2dfef92f46b9a1a4350909.png)

Below is a screenshot of the panel in action:

 ![hot water](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/f/6fe11cc774d2ba6b353564c745665234f01d41fe.jpeg)

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

![U3vkuzScyY](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/b/9b80966b0e3b0fbcad6f9ea39e3095add10b33c1.gif)

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](https://github.com/amilanov75/instant-hot-water-complied/wiki).

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 🙂

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [16 January 2021 21:45 UTC](https://discourse.nodered.org/t/instant-hot-water-panel/36098/2 "2021-01-16T21:45:36Z")

</div>

This topic was automatically closed after 60 days. New replies are no longer allowed.