f
updated on 03-01-2014
f

Web Console

An HTML5 based multi-device GUI

With the currently available software technology, what's better than HTML5 to have a really universal GUI?

A supervising and control console that runs on every device. Almost every modern browser supports HTML5, javascripts and canvas, on both PC or mobile device, on every operating systems.

 

The live demo to the right shows the functionalities.

Credits:
The gauges are based on the original job by Gerrit Grunwald .
The multi-touch base concepts come from Seb Lee-Delisle job.
The video streaming is based on M-JPEG streamer example found in ACME systems web site.

This is the remote side part of a more complex project that will use node.js to control a robot through web socket. Node.js will be installed on an ACME systems Aria G25 board.

 

The whole project
(HTML5, CSS stylesheet and JavaScript code)
is available as an open source at
GitHub repository

It is a demo with all the capabilities to control a real robot but with just a joystick direct feedback on instruments. Some instruments show fake values, others show values changed by the joysticks in a simulation of real life. The video stream is working only when the Aria G25 video stream is in a network visible by the client.

It has been tested on different browsers: Safari, Firefox, Chrome on Mac, Linux and Windows OSs. Explorer doesn't yet support canvas until version 9. Full touch features are available, of course, on mobile devices. Tested on Safari and Dolphin with iPad and iPhone, Dolphin and standard browser on Android 4. I've used the classes most compatible as possible to have the widest range of functionality. On touchable devices the joysticks are self-centering and multi-touch.

Web Socket Communication