Hot Water Cylinder Visualiser #294
Replies: 7 comments 36 replies
-
|
That's very neat! |
Beta Was this translation helpful? Give feedback.
-
|
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
|
Beta Was this translation helpful? Give feedback.
-
|
Very cool! If the template card creates some weirdness (like zoom getting reset) Then you can replace the $ with $ex |
Beta Was this translation helpful? Give feedback.
-
|
Oh cool - I'll try that out and drop the template card to see if it resolves the weirdness. Thanks for the tip! |
Beta Was this translation helpful? Give feedback.
-
|
What sensors do you use to measure the hot water cylinder temperature? |
Beta Was this translation helpful? Give feedback.
-
|
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. |
Beta Was this translation helpful? Give feedback.
-
|
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. |
Beta Was this translation helpful? Give feedback.
-
|
How do you get the gradient transition between the heatmap blocks? I assumed it was |
Beta Was this translation helpful? Give feedback.
-
|
I'm trying to get that shape thing running. But it seems plotly or HASS has issues while scaling the svg paths. and this here is what HASS does: When I play around with $vars.x and $vars.y I can stretch it a little bit around. But the shape isn't only squeezed but also completely broken. Any ideas, what's going wrong here?! Here is my full YAML: |
Beta Was this translation helpful? Give feedback.
-
|
Basically I got it. Inkscape output seems not to be 100% compatible with plotly. So I converted it around with several SVG Online tools. Now it works.
here my full YAML: |
Beta Was this translation helpful? Give feedback.
-
|
I'll give that ago 😄 |
Beta Was this translation helpful? Give feedback.
-
Hey @n300home, glad you got it working. I haven't been near this since my last post and haven't even fitted the device and probes yet. |
Beta Was this translation helpful? Give feedback.
-
|
@deltamelter Thanks for the hint to set the path string format to absolute. Google told me the same some days ago, which makes it possible to scale your shape to the correct size I need. But it's still impossible draw any thing working from scratch. Sorry, it's my first trial with SVG design. |
Beta Was this translation helpful? Give feedback.
-
|
Hello all, I loved the idea when I saw it. I played a bit with the code posted here, here is the result: The ticktext on the tank are not perfectly centered (it's an axis, right aligned) if someone want to replace it with annotations, it would be perfect I think. type: custom:plotly-graph
fn1: |
$ex {
vars.title = 'Water Tank'
vars.mask_height = 175 // SVG
vars.tank_height = 180
// sensors from bottom to top
vars.sensor_names = [
'sensor.tmp_eaufroide',
'sensor.tmp_chauffeeau1_temp2',
'sensor.tmp_chauffeeau2_temp2',
'sensor.tmp_chauffeeau3_temp2',
'sensor.tmp_chauffeeau4_temp2']
vars.sensor_heights = [
1,
20,
65,
105,
145]
// temp of a virtual top temp sensor
vars.top_temp_factor = 1.06
// colorscale
vars.min_temp = 0
vars.mid_temp = 38
vars.max_temp = 65
}
fn2: |
$ex {
// linearly interpolate between sensors in steps of 1cm (not accurate)
interps = []
vars.sensor_values = vars.sensor_names.map(sensor=>isNaN(hass.states[sensor]?.state) ? sensor : Math.round(hass.states[sensor]?.state))
let Ts = vars.sensor_values.slice()
let Hs = vars.sensor_heights.slice()
Ts.push(vars.sensor_values[vars.sensor_values.length-1]*vars.top_temp_factor)
Hs.push(vars.tank_height)
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])
interps.push([interp,interp,interp]);
}
}
vars.z = interps;
vars.x = [10,20,70];
// array 0 - to height of tank (-1)
vars.y = Array.from(
{ length: Hs[Hs.length -1] },
(_, i) => i
).map(y=>y*vars.mask_height/vars.tank_height)
vars.tick_height = vars.sensor_heights.map(h=>15+h*vars.mask_height/vars.tank_height)
vars.tick_text = vars.sensor_values.map(v=>Math.round(v)+'°C')
}
entities:
- entity: ""
z: $ex vars.z
x: $ex vars.x
"y": $ex vars.y
type: heatmap
zmax: $ex vars.max_temp
zmid: $ex vars.mid_temp
zmin: $ex vars.min_temp
showscale: false
colorscale: Bluered
contours_coloring: heatmap
raw_plotly_config: true
refresh_interval: auto
ha_theme: true
config:
staticPlot: true
layout:
paper_bgcolor: rgba(0,0,0,0)
plot_bgcolor: rgba(0,0,0,0)
title: $ex vars.title
yaxis:
tickvals: $ex vars.tick_height
ticktext: $ex vars.tick_text
tickwidth: 0
tickfont:
size: 12
color: white
showgrid: false
zeroline: false
showticklabels: true
showline: false
visible: true
position: 0.57
scaleanchor: x
scaleratio: 0.9
xaxis:
visible: false
margin:
t: 40
b: 20
shapes:
- type: path
name: cylinderMask
path: >-
M0,185 V0 H105.09 V184.46 Z M52.71,171.43
C72.88,171.43,89.26,158.75,90.43,142.73 V28.37
C90.43,23.34,87.75,18.76,83.62,16.65 L81.97,15.8
C62.7,6.1,40.47,6.38,21.4,16.53 C17.41,18.71,14.86,23.22,14.86,28.13
V142.71 C16.03,158.73,32.55,171.41,52.71,171.41 Z
fillcolor: rgba(18, 18, 18, 1)
line: null
color: rgba(18, 18, 18,1)
|
Beta Was this translation helpful? Give feedback.
-
|
@miljbee - if I put the lowest senor at the correct height of 30cm rather than 1, it shortens the mask. I thin Also, how do I change the decimal place of the temperature text? |
Beta Was this translation helpful? Give feedback.
-
|
Try this one: type: custom:plotly-graph
fn1: |
$ex {
vars.title = 'Chauffe-eau'
vars.mask_height = 175 // SVG
vars.tank_height = 170
// sensors from bottom to top
vars.sensor_names = [
'sensor.tmp_eaufroide',
'sensor.tmp_chauffeeau1_temp2',
'sensor.tmp_chauffeeau2_temp2',
'sensor.tmp_chauffeeau3_temp2',
'sensor.tmp_chauffeeau4_temp2']
vars.sensor_heights = [
1,
20,
65,
105,
155]
// colorscale
vars.min_temp = 0
vars.mid_temp = 38
vars.max_temp = 65
}
fn2: |
$ex {
// linearly interpolate between sensors in steps of 1cm (not accurate)
vars.sensor_values = vars.sensor_names.map(sensor=>isNaN(hass.states[sensor]?.state) ? sensor : Math.round(hass.states[sensor]?.state))
let vData = vars.sensor_values.slice()
let hData = vars.sensor_heights.slice().map(h=>h*vars.mask_height/vars.tank_height)
const extrapolateV = h => {
const l = hData.length;
if (l !== vData.length) return null; // Ensure hData and vData have the same length
if (h < hData[0]) {
// Extrapolation for h less than the range
const [h1, v1, h2, v2] = [hData[0], vData[0], hData[1], vData[1]];
return v1 + (h - h1) * (v2 - v1) / (h2 - h1);
} else if (h > hData[l - 1]) {
// Extrapolation for h greater than the range
const [h1, v1, h2, v2] = [hData[l - 2], vData[l - 2], hData[l - 1], vData[l - 1]];
return v1 + (h - h1) * (v2 - v1) / (h2 - h1);
} else {
// Interpolation if h is within the range
for (let i = 1; i < l; i++) {
if (h >= hData[i - 1] && h <= hData[i]) {
const [h1, v1, h2, v2] = [hData[i - 1], vData[i - 1], hData[i], vData[i]];
return v1 + (h - h1) * (v2 - v1) / (h2 - h1);
}
}
return null; // Should not reach here if data is sorted and h is within range
}
};
vars.z = []
for (let i=0; i<vars.mask_height; i++) {
let e = extrapolateV(i)
vars.z.push([e,e,e])
}
vars.x = [10,20,70];
// array 0 - to height of mask
vars.y = ([...Array(vars.mask_height).keys()])
vars.tick_height = hData.map(h=>18+h*0.85)
vars.tick_text = vData.map(v=>Math.round(v)+'°C')
}
entities:
- entity: ""
z: $ex vars.z
x: $ex vars.x
"y": $ex vars.y
type: heatmap
zmax: $ex vars.max_temp
zmid: $ex vars.mid_temp
zmin: $ex vars.min_temp
showscale: false
colorscale: Bluered
contours_coloring: heatmap
raw_plotly_config: true
refresh_interval: auto
ha_theme: true
config:
staticPlot: true
layout:
paper_bgcolor: rgba(0,0,0,0)
plot_bgcolor: rgba(0,0,0,0)
title: $ex vars.title
yaxis:
range:
- 0
- 175
tickvals: $ex vars.tick_height
ticktext: $ex vars.tick_text
tickwidth: 0
tickfont:
size: 12
color: white
showgrid: false
zeroline: false
showticklabels: true
showline: false
visible: true
position: 0.57
scaleanchor: x
scaleratio: 0.9
xaxis:
visible: false
margin:
t: 40
b: 20
shapes:
- type: path
name: cylinderMask
path: >-
M0,185 V0 H105.09 V184.46 Z M52.71,171.43
C72.88,171.43,89.26,158.75,90.43,142.73 V28.37
C90.43,23.34,87.75,18.76,83.62,16.65 L81.97,15.8
C62.7,6.1,40.47,6.38,21.4,16.53 C17.41,18.71,14.86,23.22,14.86,28.13
V142.71 C16.03,158.73,32.55,171.41,52.71,171.41 Z
fillcolor: rgba(18, 18, 18, 1)
line: null
color: rgba(18, 18, 18,1)
|
Beta Was this translation helpful? Give feedback.
-
|
Hi, I real love this thx for all the effort , but in my case i have 2 Tanks and i want to show them smaler and in an horizontal card. But there is somehow a problem with the scaling to the svg. Any idea how to solve this ? . I tried to reduce the height and some mappings in the path to get done - but i failed ....
Any help would be great . My current solution is to use a web service with a python backend which dynamic builds the svg . ( also not my idea and found "somewhere" . But i would prefere your solution ...
thx, Dietmar |
Beta Was this translation helpful? Give feedback.
-
|
got it working for me .
thx, Dietmar |
Beta Was this translation helpful? Give feedback.
-
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.)
Beta Was this translation helpful? Give feedback.
All reactions