05 October 2017 IconTV information radiator

Icon Agency’s digital team were recently presented with a fantastic internal challenge – create a wall mountable 'information radiator'. A radiator is a generic term for handwritten, drawn, printed or electronic displays which a team places in a highly visible location.

The requirements of the project included working out how best to present a continual feed of information to staff within the agency on multiple television sets in the communal areas of the business. 

IconTV was born out of this concept and we currently have a fully fledged, multi-system platform, consisting of a native multi-channel desktop application supporting Windows, OSX and Linux, a web based administration system that provides full control over content, queuing, scheduling whilst providing remote and instant control over connected applications, a REST API for Slack integration, as well as a 'Master Worker' for keeping the whole eco-system in sync.

Staff are able to add content to separate channels from external sources such as YouTube and Vimeo, GIPHY, an image URL, or text-based announcement. We’ll be using IconTV to showcase work, ideas, and keep the team informed and inspired. 

Tech Breakdown

The IconTV application itself is an ElectronJS based system. ElectronJS allows us to use traditional web technologies such as HTML, CSS and Javascript to build native desktop programs for platforms such as OSX, Windows and Linux. There are a number of different technologies at work within the application and its supporting systems including Socket.io and Redis for the subscribing to, and publishing of, system messages and notifications, MySQL and Sqlite3 for data storage as well as the aforementioned HTML, CSS & Javascript (ES6) for presentation and logic.

Several separate frameworks and tools were leveraged for each of the various system components; Laravel 5.5 for the RESTful API and web based administration system, of course ElectronJS to support the desktop requirements of the project, Electron-Forge as a compiler for app development. 

The "Master Worker", whose responsibility it is to notify connected applications of changes in content, keep track of connections and generally keep everything in sync, was built in NodeJS.

The cross-platform requirements of the project (i.e. the support of both Windows & OSX) meant we had to find a way of building out several different versions for each platform on each code change for testing. For this we made use of the Appveyer and TravisCI continuous integration tools. 

These platforms meant that once we were able to produce a configuration that suited our Windows and OSX targets we could push changes to our code repositories, GitHub & BitBucket, and have them immediately start to build out installable versions of the IconTV app for our testers to play around with.  

The available open source tooling and technologies used meant that we could go from chalkboard to finished product in a little under six weeks. A great first dive into the world of desktop app development.

A full list of the technologies and tools in play with IconTV are as follows:
PHP7, Javascript, CSS, HTML, NodeJS, Electron, Electron-forge, GitHub, BitBucket, Socket.io, MySQL, SQLite, Redis, Webpack, AppVeyer, and TravisCI.

Hit us up for demo if you'd like to see how it works.