This demo uses FoamTree to implement a dashboard of readouts from a SCADA system. While the names of sensors shown here come from a real system, readout values are random-generated.
Yellow border means the value exceeds alarm thresholds, red border means the value exceeds critical alarm thresholds.
Use mouse wheel or double-click on a group to zoom-in. Esc or Right-double-click on a group to zoom out.
Thanks to Glenn Clark for the idea and feedback on this demo.
Using the stacking option to enable "flattened" view
of the treemap. Using the descriptionGroupSize option to configure the size of the parent group
description fragment depending on the layout.
Using the groupContentDecorator callback
to draw custom content representing sensor values.
Animating changed sensor values using tween.js.
Implementing onGroupDoubleClick callback
to zoom-in to a group on double click.
Loading and using custom web fonts to render FoamTree content.