Hot Water Cylinder Visualiser

[DuncanDotPY]

I have 2 temperature sensors, (soon to be 4) in my hot water cylinder. It's a very tall cylinder and can often have significant temperature differences between the top and the bottom of the tank.

I put this visualization together using a heatmap and linearly interpolating between the temperature sensor states to get an idea of the cylinder's overall "state of charge". It's useful for planning hot water availability and best using available solar thermal, hot water diversion and deciding when to boost it with the immersion where automations can't help so well- e.g. if you have many guests staying over and your consumption pattern is discontinuous.

The tick labels are at the relative height of the four sensors in the cylinder (the top and bottom are placeholders until I get the 2 additional sensors into HA.)

[dbuezas]

That's very neat!
You forgot to post the yaml

[DuncanDotPY]

I was hoping to iron out an issue or two first (e.g. tapping on the plot on HA mobile shows a hover box for a point much lower than where tapped etc.) but I think that may be something to do with nesting it in a config-template card to get the temperature sensor states to display as tick labels. Here's the first pass in any case:

type: custom:config-template-card
title: Hot Water
variables:
  T1: |
    temp => {
      return states[temp].state;
    }
entities: >-
  -sensor.myenergi_eddi_21508400_temp_tank_1
  -sensor.myenergi_eddi_21508400_temp_tank_2
card:
  type: custom:plotly-graph
  fn: |
    $ex {
      // specify order of temperature sensors
      
      let Ts = [10 - 0.01,           // simplifying assumption - bottom sensor - 0.01 deg
                        10,          //this is a placeholder for a sensor yet to be installed
                        'sensor.myenergi_eddi_21508400_temp_tank_2',
                        'sensor.myenergi_eddi_21508400_temp_tank_1',
                        60,         //this is a placeholder for a sensor yet to be installed
                        60 + 0.01   // simplifying assumption - top sensor - 0.01 deg
                        ].map(sensor=>isNaN(hass.states[sensor]?.state) ? sensor : Math.round(hass.states[sensor]?.state))

      // specify positions of temperature sensors w.r.t cylinder base
      let Hs = [0,  // bottom of the tank = 0cm
                36, // 1st sensor, 36cm above bottom of tank
                51, // 2nd sensor height
                96, // 3rd sensor height
                163, // 1st sensor height
                186, // height of the tank
                ];

      // now we linearly interpolate between sensors in steps of 1cm (not accurate)
      
      let interps = [];

      for (let i = 0; i < Ts.length - 1; i++) {
        for (let step = 0; step < Hs[i + 1] - Hs[i]; step++) {
          let interp = [Ts[i] + (step * (Ts[i + 1] - Ts[i])) / (Hs[i + 1] - Hs[i]),
          Ts[i] + (step * (Ts[i + 1] - Ts[i])) / (Hs[i + 1] - Hs[i]),
          Ts[i] + (step * (Ts[i + 1] - Ts[i])) / (Hs[i + 1] - Hs[i])];
      interps.push(interp);
        }
      }

      vars.z = interps

      // arbritraty width - X axis length unimportant
      vars.x = [0,1,2]
        
     // array 0 - to height of tank (-1)         
      vars.y = Array.from({ length: Hs[Hs.length -1] }, (_, i) => i)
    }
  entities:
    - entity: ''
      z: $ex vars.z
      x: $ex vars.x
      'y': $ex vars.y
      text_auto: true
      type: heatmap
      zmax: 60
      zmid: 40
      zmin: 20
      showscale: false
      colorscale: RdBu
      contours_coloring: heatmap
      hovertemplate: '<b>Temp: </b>%{z:.2f}°C</br><extra></extra>'
  raw_plotly_config: true
  refresh_interval: auto
  ha_theme: true
  layout:
    hovermode: true
    paper_bgcolor: rgba(0,0,0,0)
    plot_bgcolor: rgba(0,0,0,0)
    title:
      text: Cylinder Temperature
      x: 0.5
      xref: paper
      yref: paper
      font:
        size: 22
        family: Balto
        color: Black
    yaxis:
      tickvals:
        - 36
        - 51
        - 96
        - 163
      ticktext:
        - ${"10°C"}
        - ${T1("sensor.myenergi_eddi_21508400_temp_tank_2") + "°C"}
        - ${T1("sensor.myenergi_eddi_21508400_temp_tank_1") + "°C"}
        - ${"60°C"}
      tickwidth: 3
      tickcolor: Grey
      tickfont:
        size: 20
        family: Balto
        color: Black
      tickangle: 0
      showgrid: true
      zeroline: false
      showticklabels: true
      visible: true
    xaxis:
      showgrid: false
      zeroline: false
      showticklabels: false
      ticks: false
      visible: false
    height: 600
    width: 400
    margin: null
    l: 80
    t: 40

[dbuezas]

Very cool!
Btw, you could also use

$ex vars.T1 = (temp) => hass.states[temp].state

If the template card creates some weirdness (like zoom getting reset)

Then you can replace the $ with $ex

[DuncanDotPY]

Oh cool - I'll try that out and drop the template card to see if it resolves the weirdness. Thanks for the tip!

[andrzej-r]

What sensors do you use to measure the hot water cylinder temperature?

[DuncanDotPY]

I have 4 PT1000 sensors - 2 connected to a MyEnergi Eddi Immersion Controller & the other 2 are connected to my Solar Thermal controller - both are connected to HomeAssistant. If you're only looking for temperature I'm sure there's a cheap ESP-based solution.

[andrzej-r]

Thanks. I'm currently using Telsa T-Smart immersion heater (only for temperature measurement) but it only measures temperature at one point (obviously) and it's WiFi connection is not very reliable, which is a major issue for using it as a part of a control loop.

How did you attach the PT1000 sensors? I've seen people with copper cylinders making a hole in the insulation foam. But my cylinder is stainless steel+insulation+outer shell and I was rather wary of drilling into the shell.

[deltamelter]

How do you get the gradient transition between the heatmap blocks? I assumed it was contour_coloring: heatmap but that doesn't seem to apply to heatmap type plots...

[deltamelter]

absolutely the same hardware then. I use LD2410c because it has light sensor and better "still" energy detection. These things capture 8-15 bands of distance, measuring the motion energy and "still" energy at each distance, so would make an ideal windrose/heatmap mashup 😁
I mean I only use it to control 1 light, but sounds like fun. The multi target (LD2450) can be used to measure actual direction too..

[borpin]

@deltamelter - could you post your final YMAL, please?

[deltamelter]

@deltamelter - could you post your final YMAL, please?

Travelling during Xmas period, so no direct access to yaml. I will share when I am back on my own network 🎅
I wired up a 18b20 cable bundle and attached to an old sonoff basic, but didn't get around to actually fitting it yet.

[borpin]

@deltamelter - no bother. It was the shape of the tank and how you did that I'm missing. Yes, I've a load of those sensors on a Wemos Mini D1 running Tasmota. They work really well.

[deltamelter]

@deltamelter - no bother. It was the shape of the tank and how you did that I'm missing.

The tank shape (mask) yaml is included above in a previous comment. Shape elements are a bit of a pain because they share their coordinates with the existing axes. (so if the existing x axis is time based you won't see the shape unless you zoom into the epoch 0) The original 4 bar heatmap was easier because that used the default scale of y4 and x1 so I sized the SVG to 4x1 units starting at -0.5 x -2.
The gradient fill is also x*1, but y becomes much bigger depending on how much you interpolate. It was at this point I started manipulation the axis scales rather than resizing the SVG
in the end I used 2 different implementations overlaid to get the annotations to display correctly and have yet to decide whether I prefer gradient or 1 bar per sensor, and which colour scheme.


Inverted mask to show "the magic behind the curtain" 😜