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.
The reason it works as a popup and not as a layer is that your page hosts the
PX. Turn it round and let the PX host the heat map.
bajaui:PxInclude renders the included PX inline in the same document — in the
ux profile it is a plain div hosting a PxWidget, no second browsing context —
so a wrapper PX with your floor plan included and the heat map above it gives
you one DOM and one coordinate space. If the values have to be live,
workbench:WebWidget takes an ORD in its js slot pointing at a bajaux widget
in your own -ux module, and you get the framework’s subscriber mixin instead of
a polling loop.
The alignment is BCanvasPane: it nests the content in
.-t-CanvasPane-viewPane and applies a CSS transform whose scale is viewPane
width divided by viewSize width, with transform-origin from halign — and
halign/valign default to centre, so the content sits offset even at scale
none. An overlay outside that element has to recover left, top and both scale
factors from getBoundingClientRect() on the viewPane.
Worth checking the units on the layout x/y in the PX XML too: percent
resolves as viewSize width times x over 100, so a hardcoded pixel list is
already wrong for any other viewSize.
