dbuezas / lovelace-plotly-graph-card

Highly customisable Lovelace card to plot interactive graphs. Brings scrolling, zooming, and much more!
411 stars 19 forks source link

Temperature Heatmap, it is possible? #483

Open Trikos opened 21 hours ago

Trikos commented 21 hours ago

Here’s a corrected and polished version:

I’m looking for a library that can display temperature sensors as a heatmap, creating a colored graph similar to those seen on weather channels. IMG_0324

Instead of a map of American states, I’d like to visualize my house’s layout (viewed from above) to get a real-time temperature heatmap of the rooms and walls.

Is this possible?

The graph only needs a way to: • Define the outline of the house (e.g., using a paint-style image or a simple layout sketch). • Position the sensors at specific (x, y) coordinates, such as near a wall or in precise locations. • Automatically blend colors between hot and cold areas where sensor ranges overlap.

Additionally, it would be great if:

  1. The sensor heatmap starts with a circular area around each sensor and expands as their values dictate.
  2. Overlapping areas merge smoothly to show a continuous gradient.
  3. The radius of each sensor’s influence could be adjustable (e.g., in meters).

Do you think I’m dreaming?

dbuezas commented 16 hours ago

You're definitely dreaming, but it is a really cool idea!

This is how I would approach it:

  1. Put an image behind and make the plot area transparent like this user did: https://github.com/dbuezas/lovelace-plotly-graph-card/discussions/48
  2. Create a variable with a matrix of say 10 x 10,
  3. Grab each temperature sensor and put their values in the approximate coordinates inside the matrix so they match with the sketch of your house. leave all cells which are not sensors as undefined
  4. Plot it as a heatmap e.g https://github.com/dbuezas/lovelace-plotly-graph-card/discussions/277
  5. Fill the undefined cells via interpolation. You'll have to create an algorithm for that which is not trivial
  6. Give up writing the algorithm from scratch, open ChatGPT and tell it something like

    i have a sparse matrix where some values are defined and some are undefined. Those are temperatures. Fill the undefined values of the matrix using interpolation in javascript. Put everything in a single function I can call with the matrix as a parameter`

Good luck and come back to say how it went! :)