Software Developer Blog

Preamble

Audio Design Reading Ltd (ADRL), a supplier of professional audio equipment for the broadcast sector, were looking to update an almost legendary product of theirs called the SyncroGenius.

The SyncroGenius is an audio and video master clock generator and synchronisation tool. Explaining exactly what a master clock generator does is not easy, but in essence it's a highly accurate and robust clock used to reliably synchronise the timing of devices in recording studio environments to prevent audio drift and jitter (pops and clicks) in the combined audio.

ADRL asked me to help build the web interface for the new SyncroGenius. The solution used Laravel, a server-side PHP framework, and Vue.js, a front end JavaScript framework which pairs well with Laravel. You can see a short video of the final web interface at https://www.dropbox.com/s/bieal67ber7zhfn/SyncroGenius.mp4?dl=0.

Read on to find out more.

The Requirements

The new SyncroGenius would be a 1U rack mounted unit running on Linux. It would require a web server to host a "command and control" Web Application which would need to:

• Reflect the unit's state and configuration in real-time.
• Have a small resource footprint on the server.
• Enable a way to update the unit remotely.
• Work on an intranet without an external connection to the internet.

The Options

There are multiple Web Servers available for Linux, including the Apache, Nginx and Lighttpd.  Typically, these run server side code under PHP or NodeJS, but there are other options such as Ruby, Python or Java, even potentially ASP.Net Core. 

The frontend website needed to be dynamic and capable of receiving and processing updates from the server. Put simply it required JavaScript, which could implement the dynamic behaviour using vanilla JavaScript or any number of frameworks including: JQuery, Angular, Vue.JS or React!

The real-time updates would required the receiving regular data updates from with the server, possible options included Polling, Web Sockets and Server Side events.

The Solution

We went for an Apache Webserver with Laravel PHP server side, Vue.JS and BootstrapVue for the frontend, a PHP API for issuing commands, and Laravel Echo(Web sockets) for receiving real-time updates.

Laravel is a grownup PHP framework based on sound software engineering principles and patterns, offering  many useful features out of box, such prebuilt components for securely handling user login and URL routing, helping to improve the speed of development and overall security of the application.

Laravel also comes with support for SQLite to enable the web application to persist state information on the server (such as user profiles and preferences). It comes with Laravel Mix, a wrapper around Web Pack, allowing developers to minimise and bundle code for better performance; and its documentation is tremendous.

Vue.JS was chosen to enable the easy creation and reuse of user-interface components. This was paired with Bootstrap Vue to give a common set of controls out of the box. Updating the dashboard to visually represent the data arriving via Laravel Echo using Vue's data binding facilities was natural and elegant with the view updating as the data flowed in to the application.

Problems

Laravel isn't designed with embedded systems in mind, some features expect the website to be hosted on a traditional webserver, with full online access to the internet and its myriad of cloud services. Occasionally this caused a problem and required thinking outside of the box and finding solutions other to those recommended by the documentation.

For example, to deploy and update new versions of the application we needed to wrap the website files up along with some system (hardware) file updates and bash scripts, these needed to zipped and signed using OpenSSL and to be remotely applied using the web interface. Laravel and Laravel Mix just don't imagine being used this way! To resolve this issue we had to build a Grunt task runner wrapper around Laravel Mix to support our installation build process.

Conclusion

This was an enjoyable project. 

Laravel and Vue worked well to produce an attractive real-time dashboard interface, although there were some off-road challenges implementing many of the embedded system's requirements and features, the versatility of Vue.JS and fantastic Laravel documentation really helped resolve the issues and signpost me towards potential solutions.