Hi. Could someone please advise how to implement a room heat map?
I could not find any ready-made solution, so I tried to build it myself as best I could. But I ran into navigation issues. It works fine as a separate popup, but I cannot properly overlay it as a layer on top of the main visualization.
I built the heat map not inside PX itself, but as a separate heatmap.html placed over it.
How it works:
The HTML opens a regular PX inside an iframe and places a transparent canvas layer on top of it. The heat map is drawn on this upper layer, so the main PX stays unchanged and does not break.
Where the points come from:
The HTML contains a predefined list of temperature points and their coordinates taken from the PX XML .txt file. So the points are not placed manually by eye. Only the required points are used, and the unnecessary ones are excluded.
How the map is generated:
The page reads the current values of these points from Niagara, then calculates intermediate values between the sensors and draws a colored temperature field across the whole area. So this is not just a set of colored circles, but a smooth heat map.
Why the transitions are smooth:
Interpolation is applied between the points, and then the layer is additionally smoothed. Because of this, there are no sharp borders between neighboring sensors.
What can be changed for another site:
You need to change the path to the new PX, its dimensions, and the list of points with coordinates from the new PX XML. The core logic — iframe + overlay + canvas — remains the same.
Result:
The main PX works as before, while the heat map is simply overlaid on top as a separate semi-transparent layer.
I’m currently onboarding customers in Utah but this weekend once I get to my destination for my N4 Class, I’ll go over some other suggestions.
Charles! which part of Utah ![]()
Salt Lake City. Right now I’m in Layton.
