Floormap / heatmap

I plan to create a floormap of my place on a habpanel dashboard with rectangles representing the rooms that color code information I have in a dictionary / json.
The json looks like

{"Office": 4, "Flur": 292, "Clara": 234, "SK": 295, "Medi": 328, "Kueche": 238}

roomName:intValue with the values giving the time in seconds since the PIR sensor in that room triggered last. But it could be anything, lux, humidity, temperature.

And then the tile for office is set to bright red (most recently triggered) and the hall has a yellow tile and kitchen green and balkony dark blue…

Search on the terms in the subject returned with no results and I simply don’t know where to start (and didn’t do any js/css/html for ages so I’ll certainly have to learn a few things for that).
Glad for any input on: what would be the basic approach for such a thing?
Thanks in advance for any pointers

1 Like

I’d probably start here:

Following Yannick’s awesome tutorial you should be able to overlay objects on each room of a static floor plan image and dynamically change the color of those objects.

…and then strap yourself in for this awesomeness from Scott:


Oh, thanks a lot to @JustinG and @hafniumzinc.