Starting UI design

A project log for BicycleCompanion

A modern, low-power and hackable cycling computer designed for bicycle-touring

Matias N.Matias N. 04/17/2020 at 01:590 Comments

Since I will probably not be able to build the hardware soon, I decided to work a bit on the software side since at least I have a Nucleo board and the Memory LCD already. I decided to start with the user interface. First, I did some mock-ups using Gimp, which was a bit of a pain but at least I can decide exact font sizes and only then make the conversion of the fonts to C arrays for littlevgl. Moreover, I can build NuttX with the simulation target and render littlevgl to a framebuffer which maps to an X11 window. Thus, I can play with littlevgl without needing to flash the uC. First, I designed a clock screen, which could be the screen that is set when the device is asleep, which looks like this (this is a screen capture of the 128x128 px window):

If you recognize the fonts it is because I used the one that the Pebble uses, which I think is very good for this screen. Then, I designed a "main" screen which shows the speed with big numbers and has a top row of small numbers and two smaller rows of medium numbers:

If I did things more or less correctly, I shouldn't need to explain this much, but at the top you could see the temperature, compass heading and time. The bottom two rows would display traveled distance and last row, the altitude from sea-level. My idea is to have the lower two rows change by pressing the buttons. For example, you could also have moving time and, if you set a "target distance" you could have a down-counting distance and ETA time based on average speed.

I'm thinking that speed is what you will always want to see in big numbers and then you will want this extra data which you should be able to switch easily. However, I would also design some other "detail" pages where you the screen would focus on a given reading and maybe a chart of recent measurements (for example, current elevation but also the elevation profile sensed while moving as a plot, or temperature with minimum, maximum and again a plot, and so on). If you have ideas in this regard, it would be cool to know. I would also design a full-screen compass and calendar. Then I would have to think about settings, which will be probably based on menus and sub-menus.

I will also flash this to the Nucleo and see how it looks like on the real screen (which will be smaller than what you see here, since the screen is only 23x23 mm.