N4 Responsive Panes

Since the introduction of the Responsive Pane into the Platform, Niagara can now build some really nice HTML5 mobile pages what work well on both desktop browser and mobile device. The examples below show just a couple of designs I am working on for One Sightsolutions. The first screenshot is a draft design for an Air Handling Unit, which uses 2D graphics in the overview image. Having used the Responsive Pane on a purely mobile page, I found that the individual Panes are ideal for relativising data so that a single Pane can be used over and over again. The AHU has 4 Supply and 4 Extract fans.

If you have a small selection of data that is repeated, using a variable in place of the 'Ord' like $(supply) allows for re-use on multiple data folders. A really nice feature of this design is the ability to make Panes invisible so that you can de-clutter a page when viewed. This can be achieved by toggling the invisibility property of the Responsive Pane... nice!

Transport for London and Our API
The second page shows how the Responsive Pane can be used in conjunction with the One Sightsolutions API reader to provide a Dashboard of Public Data. This Dashboard shows the Car Parking space availability in London for Transport station car parks. Building up a simple design using some Icons, the design is easy on the eye and functional.