Top level menu as a scrollable graphical list

[vzahradnik]

Hello,

I'm wondering whether it would be possible to create a top level menu completely as a slideshow. After clicking on the selected icon, users would see respective submenu.

If it's not supported, is it something you'd appreciate as well?

Attached are the example designs to help you imagine what I mean.

[davetcc]

Although the exact code to do this isn't there most of the parts that would be needed are, it actually would not be particularly difficult to create an extension of the current GraphicsDeviceRenderer class that did this. Icon-drawn menu items with text formatting underneath are already available. Look at the ESPAmplifier menu example for this.

I imagine all that would be needed was a full-height menu item and the arrows drawn in somehow on the left and the right.

For nearly all cases I have larger screens that work better with a dashboard, then switching into the menu as needed, so this isn't something I've considered. But agreed, this would be handy for many. I'm a bit tied up now, with a few projects and the i18n support, but if you wanted to try it, I'd be happy to give guidance on where to start with this.

[vzahradnik]

OK, if this involves changes in TcMenu, let's start by moving this into an issue.

First of all, I'm not yet familiar with how you handle graphics inside TcMenu. So far I worked just with text. If you give me guidance, I'll do the necessary work.

Thanks!

[davetcc]

Give me a bit of time to think about it first, it may be easier than I first thought, in fact so trivial it could go in a patch. After work today, I'll give it a bit of thought. There was a major oversight in the dashboard support that needs a patch anyway.

[davetcc]

So I've thought about this, and I have to do a small release to fix an oversight in the dashboard. This can go along with that.

On the display renderer I'll add another method that allows specific menus to use a horizontal card layout instead of a vertical scrolling layout. Choosing this option will allocate a bit of extra memory, to keep the left and right buttons, and a few other items in memory. this should be minimal, maybe 100 bytes or somewhere in that order.

On devices that are encoders (or button-based emulations of encoders) then the active item will be the one that is on display and changing active item will work exactly as now, by turning the encoder.

On touch screens clicking the left and right icon buttons will move between them (this may not be in the first version).

[Ales-Svoboda]

Sounds good. Will such a menu be configurable in the TcMenuDesigner (including icons)?

[davetcc]

At the moment you can convert the icons to xbmp and make the menu structure in designer, but the themes are handled in code (beyond initially applying a base theme in designer).

Personally, I suggest that we focus on making themes easier to apply in code rather than try and create what could be an exceptionally complex UI.

[Ales-Svoboda]

Yes, you're right. I was just thinking that maybe it could also be a kind of theme/template. But let's not focus on it now. We will play with the horizontal menu with @vzahradnik and maybe come up with some other ideas.

[vzahradnik]

I agree as well. We just need a way how to achieve this behavior. Later, with our experience, we may think on better ways how to integrate it in the designer, etc.

[davetcc]

BTW there is a theme template, it's the theme that you choose in designer. The designer never updates that intentionally, so you can make changes to it if you wish. It will only ever update if you delete/remove the file.

[davetcc]

I imagine I'll have something working on master in a day or two. It is easier than I thought.

You can see something very similar in ESPAmplifier, take a look at the code here:

https://github.com/davetcc/tcMenuLib/blob/master/examples/esp/esp32Amplifier/esp32Amplifier.ino#L88

It adds Icon images to the cache and then sets out a grid layout. Although our case will be slightly different, you'll get the idea. My take is that we can possibly streamline the API a bit to make it a bit easier to use, and secondly (and probably more importantly) create a youtube video tutorial that shows how to use themes in detail.

[Ales-Svoboda]

Perfect!

I think we can support you with making the video tutorial.

[davetcc]

So let's go through the procedure:

• We would first create a menu structure using designer
• Then we could use a drawing package to prepare the icons, and make sure they have 100% transparency on the background.
• Once ready, open the Code->Bitmap/Widget converter in tcMenu designer and export the icons to xbmp, it will create a header file in the project that has the XBM format image in it.
• Now in the code we would cache the images and setup the grid positions, ensuring they draw as icons (see above example)
• Set the root menu (or other) to render as a horizontal card set.
• Job done, should use the custom settings.

Also, note that icons can render as text and icons, meaning you shouldn't need to internationalize the icons themselves, just the name text which will render underneath.

[davetcc]

It is on master now, needs a bit more work. It is called card layout. You can set any menu to work in card layout mode, in fact at the moment there is an issue with dialogs and other custom entries going into card layout, which I'll fix before releasing. Other than that it is working quite well but is subject to change. There are two examples updated to work with card layout:

• esp32s3TftEncoder - ST7735 color display, encoder.
• stm32DuinoDemo - OLED U8G2, encoder.

There is even no reason that this should not work with touch, and I'll test it before releasing it with that too. This release really cleans up the core at the same time, putting some support (first class buttons, drawable helper) in place that had been missing for a while.

[vzahradnik]

Thanks, I will try it out.

[vzahradnik]

Should inclusion of your latest TcMenuLib code be enough or I need anything else, like to re-generate the code?

I have the menu icons ready so whether I'll test now or after you complete this, it should be quick code update for me.

[davetcc]

It should not require any designer updates, just simply update tcMenu and tcUnicode libraries . The examples should be quite easy to follow.

[vzahradnik]

OK, TcUnicode was probably the culprit. I updated just the tcMenu. Yes, your examples are quite easy to follow. I just need to figure out how to set the coordinates for my case.

[davetcc]

Not sure what coordinates you mean there, the only thing you need to set is the size of the icon and the order in which you want them to appear, starting at 1 as the row number. This is to some extent documented in the docs already https://www.thecoderscorner.com/products/arduino-libraries/tc-menu/themes/rendering-with-themes-icons-grids/

[vzahradnik]

I already figured it out. Yes, it's the icon size. I understood the logic once I adapted your example in my code.

[vzahradnik]

Here's how it looks. I'd say that I will need to fine-tune the UI a little bit but otherwise it looks good.
https://www.youtube.com/watch?v=vS2BNILbuuE

[vzahradnik]

How does height work in GridPosition? If my icons are too large for the display, do I need to render them in lower resolution? Because it looks like you're not doing resampling here.

        /**
         * Create a simple grid position that represents a row with a single column with optional override of the row height
         * @param mode the mode in which to draw the item
         * @param justification the desired justification for this item
         * @param row the row on which to draw the item
         * @param height the height of the item or leave blank for default
         */
        GridPosition(GridDrawingMode mode, GridJustification justification, int row, int height = 0)
                : gridSize(1), gridPosition(1), gridHeight(height),rowPosition(row), drawingMode(mode), justification(justification) { }

[davetcc]

Yes, at the moment the size must be correct, this is rendering on an embedded device, and interpolation is slow and costly, especially on smaller devices. Anything that looked decent with aliasing would use a lot of memory.

[vzahradnik]

By the way, is it possible to optionally hide the top bar? In screens like card view it doesn't make sense. I'd like to disable it on this screen but keep it for the remaining screens.

[davetcc]

I think if you look through the docs, and the theme config file in your project you'll see how to adjust the title, you can adjust it at will. Personally I wanted to keep it for my cases. See renderer.setTitleMode(..) with one of https://www.thecoderscorner.com/ref-docs/tcmenu/html/classtcgfx_1_1_base_graphical_renderer.html#a13fd732e9587370329390d126fbfe31d

In terms of inverting the keyboard to left and right, I think I have a simple solution there, I can test it in isolation to some extent, but I don't have a hardware configuration to fully test it, you may need to debug and finish it off.

[davetcc]

Step 1 - TcMenu/IoAbstraction#187

[davetcc]

Step 2 - TcMenu/tcMenuLib#188 - I'm building out the support in the library

[vzahradnik]

I'll test it out and report back. Thanks!

[davetcc]

At the moment it is not fully there. Step 3 is to detect card layout and switch intent to sideways. Along with updating the three plugins that use it accordingly.

[vzahradnik]

OK, thanks! So I'll start with hiding the top panel and this one I can check when it's ready.