When I showed an earlier DiveIno version to my friends, one of them said, it looks ugly. I asked why? She replied that she hates graphical menus in the age of touch screens and smart phones. The problem is that DiveIno doesn’t have a touch screen, because in the watertight case you are unable to touch it with your fingers. Instead you can use the IR remote control for navigation.

Honestly I have to agree with her that the current user interface design is not too pretty and reminds me those times when the programmers were responsible for the UX (User eXperience design) as a full stack developer. I am not a UX designer, but maybe I can do some improvements. First of all start with the Main Menu!

First look

On a smartphone you often use icons to access different applications from the start screen. Maybe I can do the same in the Main Menu! I started to find free icons with Iconfinder. Once I had the candidates I edited them with Gimp.

The UTFT library, which DiveIno uses for presentation, supports bitmap image display from its proprietary data array format. The ImageConverter tool can be used to transform the icons into the right UTFT compatible format.

Once I converted my icons and modified the menu display logic the end result looks like this:

Problems

I tested the code on my Arduino Due board first. It worked most of the time. When the board had power issues, the UI became unstable. This is more like a hardware and not a software problem.

I tried to support this new menu layout on Arduino Mega as well, but I hit the wall. Let me explain why!

First of all the UTFT library stores the image data in the program space. It is accessible with the PROGMEM keyword. The Arduino Memory tutorial explains the various memory types like this:

There are three pools of memory in the microcontroller used on Arduino boards :

• Flash memory (program space), is where the Arduino sketch is stored.
• SRAM (static random access memory) is where the sketch creates and manipulates variables when it runs.
• EEPROM is memory space that programmers can use to store long-term information.

Arduino Mega 2560 has 256 KB Flash, 8 KB SRAM, 4 KB EEPROM. Arduino Due has 512 KB Flash, 96 KB SRAM and no EEPROM. The Flash memory (program space) has to store both the code and the image data. Thankfully it is big enough on both board types. Actually the problem is not with the Flash size instead the image data location in the memory:

On a Mega the number of images stored in FLASH must be limited, because they are large enough to push the executable code start over the 64K 16 bit address limit. Then the Mega will fail to boot even though the sketch compiles and uploads correctly.

I experience the same thing on the Arduino Mega based DiveIno setup. This means that the graphical menu is not supported on Arduino Mega right now!

Options

Obviously the SRAM is too small to store the image data. There is no EEPROM on Arduino Due and it is also too small. The only option is to store it on the SD card and load it from there.

The UTFT library has an add-on for this purpose called UTFT_tinyFAT. It is able to load the image files in UTFT proprietary data format from the SD card. The problem is that Arduino Due is not supported and the library only works with smaller than 4 GB SD cards. This means it is not an option for DiveIno!

I found a replacement add-on on GitHib called UTFT_SdRaw. It should work with Arduino Due and Arduino Mega 2560. It also supports large sized SD cards. I will give it a try later!

The other option is to drop UTFT support and switch over to the widely used Adafruit GFX Library. It has a quite fast Arduino Due port and able to load bmp images to the screen from an SD card. It also supports other display types like the 3.5 Inch TFT Color Screen Module, which I have ordered for my Arduino M0 PRO board. Maybe this will be my second step to make DiveIno user interface prettier!