Screen Interface Prototype
While I have been rather negligent with my blog updates I have been kicking goals with progress on the Grid-Eye thermal sensor, BananaPi screens and the user interface. Of these it is user interface that I am going to blather about here.
My primary goal of this project is to improve the microwave user interface, shifting away from four character seven segment displays to a more interactive fully featured display.
Everything else, most of the work, is to support and implement this improvement. As I am now up to playing with the screens, selecting screen sizes and touch interfaces it seemed worthwhile to spend a bit of time considering what the GUI will actually look like.
I did a few pages of pencil sketches, useful to work through a wide variety of ideas.

Then I did a prototype implementation in HTML to iterate the better ideas. This prototype is below, it is a fully interactive webpage – some bits pretend to work, other bits are stubbed out.
I would really appreciate it if people would play and give feedback. It is designed for a fixed screen size of 480×800 pixels, the primary user interface will be finger on a touchscreen, there will also be general web browser access for PCs and portable devices.
The source code is available on github, it is prototype code so there are more than few shortcuts and lots of poor practices.
- Intuitive to use
- No instruction manual or help pages
- No advanced touch interfaces (sliding, multitouch etc.)
- Large, obvious, touch targets
- Accessible colour scheme and aria support
- Forgiving of mistakes
- Not too hideously ugly