Week 11: Interfaces
My final project won't need any sort of application or interface that runs on a desktop computer. However, since my project operates on an I2c bus and potentially has many different modules, being able to monitor the entire system status at once is a powerful debugging tool.
The demo application which sources all data from Math.random
I decided to write a web app since I have the most familiarity with controlling the styling. Over the years, I've found that HTML/CSS is generally the most frictionless design method. Beyond that, I was curious about Chrome's built in Serial support for apps.
I styled the application after minimalist graphics display like the ones used in the Apollo program. I like simple user interfaces that are fast and easily readable. I also like having good contrast for reading outside/in poor conditons.
I wrote custom HTML/CSS until I got the styling I liked. For the graphs I used canvasjs which is a trialware js library (hence the trial version note). I chose canvasjs because I had used D3js before and remember being frustrated with some of its design choices.
To make the interface dynamic, I used JQuery to modify the page values. Although my I2c interface is not fully implemented, using Math.random() to generate some example values is a pretty good way of simulating the interface.
Finally, I also got the Google Chrome serial port working by creating an extension that had read access to the serial port. I used the example code provided by Google and tested with a simple Arduino program to make sure it worked. The app can be loaded as an unpacked extension from here.
I couldn't figure out an easy way of listing all the availible serial ports and offering a drop down so the serial port is currently hardcoded. Furthermore, the current Arduino sketch simply dumps the contents of the I2c messages to serial which are then interpreted. Ideally, I will try and implement some sort of address mapping to JSON tool so that serial/off bus communication is less messy.