IMG_7163.jpg

Tech

#TechTip Creating dynamic control interfaces

June 15, 2015

by Stephen Von Takach 

Here at ACA we do a lot of corporate meeting rooms. On the surface you may think one size fits all, however this fairly narrow domain is actually quite diverse and is a great example of the challenges faced managing the internet of things.

Above, boardroom, seminar rooms, open spaces and small meeting rooms in a single snapshot. One interfaces works across all spaces.  Above, boardroom, seminar rooms, open spaces and small meeting rooms in a single snapshot. One interfaces works across all spaces. 

Clients often find it surprising to hear that it is much easier to integrate with booking systems, including outlook or google calendars for example, in concert with occupancy detection or people tracking, to automatically set up a room (turn on displays, drop the blinds, set the volume levels, adjust the lighting and indicate the room is in use etc).

FindMe by Microsoft can find people based on location sensors and proximity to WiFi access points. ACA can use this data to trigger control events.  FindMe by Microsoft can find people based on location sensors and proximity to WiFi access points. ACA can use this data to trigger control events. 

The challenge is providing users the tools to make adjustments and customise their experience!

Where rooms use different hardware, physically function in different ways and have different features, a good system will provide consistency in both behaviour and branding across heterogeneous spaces.

We approached this problem by breaking it down into independent and manageable components.

  1. We chose the web as our platform for ubiquity

  2. Systems are defined as a collection of devices / things

  3. User Interfaces work with any system, detecting what features to display

  4. JSON configuration ties it all together

The JSON not only defines how the system is to work, it provides all the information the interface needs to represent the system.

Example tablet interface Example tablet interface

Example Mobile Interface Example Mobile Interface

Above. An example interface in tablet and mobile view. The interface will change automatically based on the screen-size. I.E If you browse to the control URL on your tablet you'll see the interface on the left, if you use your phone you'll see the interface on the right.  

To avoid any duplication, JSON configuration can be supplied by zones, which are analogous to tags, allowing systems to inherit configuration and apply customisations as required.

This makes it easy to create and update multiple systems, maintaining consistency whilst reducing the risk of error.

You can see our meeting room configuration guide as well as our system management guide for a more detailed look at how a room is configured.

Setting up a room in ACAEngine's admin interface Setting up a room in ACAEngine's admin interface

Interface templates are typically static web applications that communicate with ACA Engine servers, inspecting system configuration to determine what they should display.

To simplify the process of creating a new template we used AngularJS to build a meta language that extends HTML5 to avoid having to write javascript. Allowing designers to build responsive interfaces, focusing on what they do best.

One issue still remains, Interfaces are interactive applications and designers probably do not have access to hardware or even ACA Engine! So using modern web tool kits (NodeJS, Bower, Gulp) we provide a control system emulator so you can test designs against a range of configurations completely independently of any hardware - with instant updates as you edit.

Test and Emulate your interface Test and Emulate your interface

By utilising standard technologies, utilising best practices and embracing openness not only will most designers be able to build and modify interface templates, they might even enjoy it too.

 



Newer Post #FridayDemo Room booking panel with built in payments Older Post Docker- Rapid deployment for your web applications.