Multi-level menu

[SGill.3]

Hi all,

I would like some ideas/help with designing an interface for a large multi-level menu. I need the user to be able to get to specific information about a vehicle make, model and year. My first thought was to use a scroll list or wheel for the user to select the make. That would take the user to another screen with a scroll list/wheel with the list of models for that make. The user would select the model and that would take them to a screen with a scroll list/wheel for the different years for that model. when they selected the year, the information needed would be displayed.

I had some success in doing this, but I am realizing that this method would require hundreds of screens. Is there a more elegant method of doing this? Like would having multiple layers of hidden lists and making the list visible for the models that the user selected in the make screen?

To add another layer of complexity to this, the database will need to be updated every year or two. It would be good to be able to update only the vehicle data and not have to update the firmware for the whole device.

I am currently working with a STM32F429i discovery board, so the screen size is limited. The device I am designing for will have a larger screen (3.5") than the discovery board, but the same resolution as the discovery board.

I am a little above a beginner level, but I have some time to learn what I need to. Any ideas would be greatly apricated.

Regards

[SWT-GAL]

Hi

I built a generic menu structure using the "Scrollable Container" containing a "List Layout". In the list layout, generic custom containers are added using the ListLayout::add() method. As a menu item is selected the list is cleared (ListLayout::removeAll()) and the items from the new menu level are loaded in. This allows to build the menu structure dynamically at runtime with any kind of drawable elements. This is just one approach and has advantages and drawbacks. Meanwhile TouchGFX has evolved a lot and maybe a solution with ScrollList.setDrawables() or ScrollWheel.setDrawables() may be a valid solution.

All solutions need the status to be tracked. I used a std::stack to add/remove menu depth. As the level increases, the current page is pushed to the stack and as it decreases the last element is popped from the stack. The List Layout can contain instances of custom containers or basically any drawable object. That means you can instantiate any drawable element in your C++ code instead of with the TouchGFX designer. That way data from any source can be fetched (e.g. the SD-card or from an HTTP server) and displayed in the list layout.

Hope this helps.