# SCADA sensor dashboard

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.

Change rate: off | low | medium | high
Change probability: low | medium | high
Layout: rectangular | polygonal

### What's in the code?

- 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.

Experiment with this code on CodePen.