Tuesday, 24 November, 2020

Case Study: Designing a Bespoke Embedded Web Application

AudioDesign's ProDAB2 runs on specialised hardware requiring a lightweight web application.

Introduction

The ProDAB is a professional hardware unit from Audio Design for receiving and monitoring DAB/DAB+/FM signals.

The unit comes as a neat looking little rack mounted unit (1U), and is configured as either a single or dual tuner (for signal change over in case of signal interruption), and has a smart, versatile LCD display with a bunch of cleverly arranged push keys for controlling the unit.

enter image description here

Background

Audio Design came to me for help building a lightweight web interface to allow remote configuration. It's not unusual for these units to be half way up a mountain or tucked away somewhere in the back of a chilly server room.

The unit's engineering team provided a PHP API for controlling the unit and I had access to the underlying Linux operating system, including the inbuilt web server, but with one strict caveat: that all processing should be pushed from the server to the remote client to keep the unit as fast and nimble as possible.

Of course, there were also other requirements and considerations like: multiple operating system support , remote updates, dynamic graphics, user control and SMNP support.

The Options

When trying to provide wide operating system support there are a two clear choices :

  1. Design and code using a platform independent programming language which can be built, packaged and deployed to all the target environments (Windows, Linux, Mac, Android, iOS, ... ) .
    1. Create a web application built on Standard compliant technologies available to all modern, main-stream browsers.

The choice here was clear from the start. We we're going to go with a web application to keep things simple and provide the widest possible support. Although there was a compromise solution, to provide a website wrapped in the Electron or Atom shell, allowing non-standard components and tools to be packaged with the application.

Next the unit needed a light weight web server: IIS wasn't an option, Apache was considered too heavy, we needed something with a smaller footprint like Nginx or Lighttpd.

It also needed had to visualise data. I looked at Chartist.js, Flot, HighCharts.js, Raphael.js, Google Charts and Data Driven Documents (D3.js); all good options offering tremendous visualisation options.

The language was a foregone conclusion, it had to JavaScript. The only question was were we going to use any libraries such as JQuery, Knockout or Angular.

enter image description here

The Solution

The final solution was as straigh forward web application using HTML5, PHP, JQuery, and Ajax. The user interface was built using Bootstrap 3; with unit testing provided by PHPUnit and QUnit.

For graphics I went for a blend of Raphael.JS and Flot.js simply for their ease of use and ability to draw dynamically. Flot is really easy to use and produces some beautiful graphs, while Raphael.JS provides more fine grained control for visual instruments - such as the audio levels - which I had to create from scratch.

As for Javascript libraries, I was leaning towards JQuery anyway, and since Flot is dependant on it, it made perfect sense.

The Future

This product is under constant development and has already been modified to run under PHP7 since it's first release. We expect to upgrade it to Bootstrap 4 soon; and are always on the look out for new and interesting way to visualise the data so we may very well be incorporating D3 soon.