Dynamically position icon on VPD chart

Share your Projects! Dashboards & Frontend
1

Hi HA Community,

I’m very new to HA configuration, so apologies in advance if this has been covered before. I searched for everything that I could think of, but can’t seem to find what I’m trying to do.

I want to plot a top / left position based on readings from my temperature and humidity sensors over a VPD chart like this one:

Scynce_VPD_chart-01
Scynce_VPD_chart-011101×1201 45.4 KB

Has anyone built something similar?

2

I guess there’s different ways to achieve this. Being a fan of the custom button card, I’d be inclined to go this route:

  • create table element as a custom field in button card (your own html), giving id’s to the various value cells (e.g. for the row 22℃: id="22a" ; id="22b" … )
  • write javascript inside the custom field to read out the value of your sensor(s) and apply styling directly or adding a class to the cells that need the icon/badge ; If you go the class-route you’ll also need card-mod to define the class style on the button card

This assumes of course you’re comfortable writing html, css and javascript.

3

Thanks for your response. I love this idea, but unfortunately I’m really comfortable with any of those :frowning:

I was thinking of a less elegant option where I calculate the top and left values and use those to place the icon over the image. I have seen example code where calculations are done inside {{ }} , but I haven’t been able to find a guide for writing this code. Could anyone point me in the right direction?