#236 theme builder not defaulting correctly, example updated to use.

examples/arduino32/stm32DuinoDemo/ThemeMonoInverseBuilder.h

@@ -0,0 +1,60 @@
+#ifndef TCMENU_THEME_MONO_INVERSE
+#define TCMENU_THEME_MONO_INVERSE
+
+#include <graphics/TcThemeBuilder.h>
+
+color_t defaultItemPaletteMono[] = {1, 0, 1, 1};
+color_t defaultTitlePaletteMono[] = {0, 1, 0, 0};
+
+#define TITLE_PADDING 2
+#define TITLE_SPACING 2
+
+/**
+ * This is one of the stock themes, you can modify it to meet your requirements, and it will not be updated by tcMenu
+ * Designer unless you delete it. This sets up the fonts, spacing and padding for all items.
+ * @param gr the graphical renderer
+ * @param itemFont the font for items
+ * @param titleFont the font for titles
+ * @param needEditingIcons if editing icons are needed
+ */
+void installMonoInverseTitleTheme(GraphicsDeviceRenderer& gr, const MenuFontDef& itemFont, const MenuFontDef& titleFont,
+                                  bool needEditingIcons, BaseGraphicalRenderer::TitleMode titleMode, bool useUnicode) {
+
+    // See https://tcmenu.github.io/documentation/arduino-libraries/tc-menu/themes/rendering-with-themes-icons-grids/
+    TcThemeBuilder themeBuilder(gr);
+    themeBuilder.withSelectedColors(0, 2)
+            .dimensionsFromRenderer()
+            .withItemPadding(MenuPadding(1))
+            .withRenderingSettings(titleMode, false)
+            .withPalette(defaultItemPaletteMono)
+            .withNativeFont(itemFont.fontData, itemFont.fontMag)
+            .withSpacing(1);
+
+    if(needEditingIcons) {
+        themeBuilder.withStandardLowResCursorIcons();
+    }
+
+    if(useUnicode) {
+        themeBuilder.enableTcUnicode();
+    }
+
+    themeBuilder.defaultTitleProperties()
+            .withNativeFont(titleFont.fontData, titleFont.fontMag)
+            .withPalette(defaultTitlePaletteMono)
+            .withPadding(MenuPadding(TITLE_PADDING))
+            .withJustification(tcgfx::GridPosition::JUSTIFY_TITLE_LEFT_WITH_VALUE)
+            .withSpacing(TITLE_SPACING)
+            .apply();
+
+    themeBuilder.defaultActionProperties()
+            .withJustification(tcgfx::GridPosition::JUSTIFY_TITLE_LEFT_WITH_VALUE)
+            .apply();
+
+    themeBuilder.defaultItemProperties()
+            .withJustification(tcgfx::GridPosition::JUSTIFY_TITLE_LEFT_VALUE_RIGHT)
+            .apply();
+
+    themeBuilder.apply();
+}
+
+#endif //TCMENU_THEME_MONO_INVERSE

examples/arduino32/stm32DuinoDemo/generated/stm32DuinoDemo_menu.cpp

@@ -8,9 +8,11 @@
     use elsewhere.
  */
 
+// Generated for STM32Duino by TcMenu 4.3.1 on 2024-09-15T10:15:26.406693600Z.
+
 #include <tcMenu.h>
 #include "stm32DuinoDemo_menu.h"
-#include "../ThemeMonoInverse.h"
+#include "../ThemeMonoInverseBuilder.h"
 
 // Global variable declarations
 const  ConnectorLocalInfo applicationInfo = { "TcTT PSU", "ecd5607f-55eb-4252-a512-aab769452dd3" };
@@ -104,7 +106,6 @@ ActionMenuItem menu33(&minfo33, &menu45, INFO_LOCATION_PGM);
 
 void setupMenu() {
     // First we set up eeprom and authentication (if needed).
-    CombinedMessageProcessor::setFormTemplatesInFlash(tcMenuAllEmbeddedForms);
     setSizeBasedEEPROMStorageEnabled(false);
     glBspRom.initialise(0);
     menuMgr.setEepromRef(&glBspRom);
@@ -121,9 +122,7 @@ void setupMenu() {
     switches.init(internalDigitalIo(), SWITCHES_POLL_EVERYTHING, true);
     menuMgr.initForEncoder(&renderer, &menu33, PC8, PC10, PC9);
     remoteServer.addConnection(&ethernetConnection);
-    renderer.setTitleMode(BaseGraphicalRenderer::NO_TITLE);
-    renderer.setUseSliderForAnalog(false);
-    installMonoInverseTitleTheme(renderer, MenuFontDef(nullptr, 1), MenuFontDef(u8g2_font_prospero_bold_nbp_tr, 1), true);
+    installMonoInverseTitleTheme(renderer, MenuFontDef(nullptr, 1), MenuFontDef(u8g2_font_prospero_bold_nbp_tr, 1), true, BaseGraphicalRenderer::NO_TITLE, false);
 
     // We have an IoT monitor, register the server
     menuRuntimesIoTMonitor.setRemoteServer(remoteServer);
@@ -132,47 +131,3 @@ void setupMenu() {
     menuRuntimesAuthenticator.init();
 }
 
-// Embedded form data
-
-const uint8_t formData_MobileFriendly_d8[] {
-0x1f,0x8b,0x08,0x00,0x00,0x00,0x00,0x00,0x00,0xff,0xd5,0x96,0x5d,0x6f,0x9b,0x30,
-0x18,0x85,0xef,0x27,0xed,0x3f,0x58,0x96,0x76,0x97,0x2c,0x40,0x80,0xa4,0x12,0xb4,
-0xca,0x12,0xb2,0x46,0x22,0x50,0x05,0x58,0xa5,0xdd,0x20,0x83,0x9d,0x0a,0xc9,0xd8,
-0x15,0x98,0xae,0xf9,0xf7,0x33,0x34,0x5a,0xa0,0xd3,0x5a,0x2e,0x2a,0xc1,0x6e,0x90,
-0x39,0x58,0xc7,0x8f,0x0f,0xfe,0x78,0xad,0x9b,0xe7,0x9c,0x82,0x27,0x52,0x94,0x19,
-0x67,0x36,0x54,0xbf,0x2a,0x10,0x10,0x96,0x72,0x9c,0xb1,0x07,0x1b,0x46,0xe1,0x76,
-0xba,0x84,0xa0,0x14,0x88,0x61,0x44,0x39,0x23,0x36,0x64,0x1c,0xde,0x5c,0x7f,0xfe,
-0x64,0x39,0x79,0x42,0xf0,0x9a,0x33,0x51,0x70,0x0a,0x12,0x8e,0x0a,0x1c,0x55,0x19,
-0xb6,0x21,0x49,0xb1,0x61,0x2a,0x8b,0xe3,0xd4,0x30,0x48,0x32,0xd5,0x35,0x43,0x9b,
-0x22,0x43,0x95,0x0f,0x94,0x2c,0xcc,0x2b,0xdd,0xd0,0x30,0x9e,0x43,0x40,0xd1,0x89,
-0x57,0xc2,0x43,0xb9,0x74,0xdc,0xf3,0x24,0xa3,0x04,0x6c,0x8b,0x8c,0x30,0x4c,0x4f,
-0x50,0xba,0x03,0x60,0xed,0x09,0xab,0xdc,0xa6,0x57,0xd9,0x08,0x1d,0x09,0xa4,0x9c,
-0x96,0x36,0xd4,0x20,0x38,0x4a,0x82,0x1d,0x3b,0x72,0x89,0xae,0x28,0x5f,0x20,0x28,
-0x48,0x5a,0xc9,0xb9,0x3c,0x49,0x5f,0x51,0x54,0x44,0x0a,0x9c,0x8b,0x9d,0xe4,0x52,
-0xe0,0xd9,0xe6,0x6c,0xe4,0x50,0x92,0x13,0x26,0x00,0xa2,0xd9,0x03,0xab,0x5b,0x36,
-0x5c,0x3b,0x5e,0xe8,0x1c,0x60,0x6d,0xce,0x8b,0x80,0x48,0xe5,0x3b,0xe5,0x09,0xa2,
-0xb5,0xd2,0xcc,0x33,0x3c,0x3d,0x4a,0xdf,0x6f,0x51,0x18,0xfa,0x5e,0xbc,0xf6,0xbd,
-0xf0,0xe0,0xbb,0xf2,0x63,0x55,0x0a,0x9e,0x6f,0x0a,0xf4,0xab,0x4e,0x87,0xc9,0x31,
-0xb1,0x6c,0xef,0x39,0x96,0x7d,0x83,0x5b,0xff,0x3e,0xf6,0x56,0x7b,0xe7,0x6f,0x52,
-0x39,0x66,0x55,0x83,0xa9,0x57,0x10,0x3c,0xf2,0x32,0x13,0xcd,0x0f,0x50,0x26,0x0a,
-0x9c,0x8d,0x94,0x54,0x53,0xba,0xa4,0xea,0x78,0x49,0xd5,0x36,0xa9,0x3a,0x78,0xa6,
-0xf1,0x8f,0x95,0x1b,0xbd,0xc1,0x6b,0x76,0x71,0x87,0x0e,0xf6,0x3d,0xdc,0x45,0x1b,
-0x57,0x1b,0x3c,0xdd,0x7f,0x83,0x2e,0xbb,0xa0,0x7d,0x72,0x75,0x9d,0x6d,0xf8,0x2e,
-0xe6,0xad,0x7f,0xd8,0xfd,0x94,0x8c,0x2b,0x37,0x0e,0xdc,0xdd,0xa6,0x99,0xd8,0x47,
-0x04,0xab,0xcd,0xdb,0xc0,0xf3,0x89,0xdc,0x63,0x13,0x6d,0xf4,0xd0,0x7a,0x1b,0x5a,
-0xff,0x4f,0xa0,0x8d,0x36,0xb4,0xd1,0x1b,0x7a,0xa0,0xf3,0xac,0x73,0x40,0x98,0x23,
-0xde,0x71,0x7a,0x17,0x74,0xe8,0x93,0xec,0x8d,0x6b,0xb7,0x73,0x45,0x2c,0xba,0x91,
-0x06,0x02,0x89,0x2c,0x0d,0xc9,0x73,0xaf,0x05,0xfb,0x7a,0x88,0xb6,0xad,0x0a,0xaf,
-0x03,0x9e,0x13,0x50,0x7b,0x59,0xb3,0x8b,0xef,0xb8,0x77,0x47,0x27,0x9b,0x65,0xaf,
-0xe5,0xd6,0x8b,0x37,0xba,0x8b,0x37,0xfe,0xfd,0x47,0x5f,0x47,0xaa,0xd9,0xc5,0xbd,
-0x2c,0x3a,0x6b,0x76,0xa9,0x19,0x5f,0xca,0xca,0x96,0xf0,0x52,0x57,0x5a,0xeb,0x33,
-0x72,0x39,0x3b,0xbf,0xff,0x41,0x92,0x25,0x70,0x23,0x5a,0xb3,0x76,0xb1,0x2b,0x85,
-0xdf,0x3b,0xb6,0x57,0x86,0x35,0x0b,0x00,0x00
-};
-const EmbedControlFlashedForm formData_MobileFriendly {
-    "Mobile Friendly",
-    formData_MobileFriendly_d8,
-    521
-};
-
-const EmbedControlFlashedForm* tcMenuAllEmbeddedForms[] { &formData_MobileFriendly, nullptr };

examples/arduino32/stm32DuinoDemo/generated/stm32DuinoDemo_menu.h

@@ -85,6 +85,4 @@ void CALLBACK_FUNCTION largeNumDidChange(int id);
 void CALLBACK_FUNCTION onDecimalStepChange(int id);
 void CALLBACK_FUNCTION saveWasPressed(int id);
 
-extern const EmbedControlFlashedForm* tcMenuAllEmbeddedForms[];
-
 #endif // MENU_GENERATED_CODE_H

examples/arduino32/stm32DuinoDemo/stm32DuinoDemo.emf

@@ -511,7 +511,7 @@
     "lastRemoteUuids": [
       "0877131c-e03e-426b-8eaf-228e01f5e7f1"
     ],
-    "lastThemeUuid": "0dd60ceb-7e0f-46e2-8d40-b264eb3aa7e0",
+    "lastThemeUuid": "396ED4DF-AD7B-4951-A848-A9E5838A549B",
     "applicationUUID": "ecd5607f-55eb-4252-a512-aab769452dd3",
     "applicationName": "TcTT PSU",
     "lastProperties": [
@@ -685,9 +685,7 @@
     },
     "packageNamespace": "",
     "appIsModular": false,
-    "listOfEmbeddedForms": [
-      "Mobile Friendly"
-    ]
+    "listOfEmbeddedForms": []
   },
   "stringLists": []
 }

examples/arduino32/stm32DuinoDemo/stm32DuinoDemo.ino

@@ -16,6 +16,7 @@
 #include "RawCustomDrawing.h"
 #include "app_icondata.h"
 #include <stockIcons/wifiAndConnectionIcons16x12.h>
+#include <graphics/TcThemeBuilder.h>
 
 // We added a RAM based scroll choice item, and this references a fixed width array variable.
 // This variable is the RAM data for scroll choice item Scroll
@@ -29,47 +30,69 @@ const uint8_t myManualIp[] = { 192, 168, 0, 202 };
 const uint8_t myManualMac[] = { 0xde, 0xed, 0xbe, 0xef, 0xfe, 0xed };
 const uint8_t standardNetMask[] = { 255, 255, 255, 0 };
 
-
-// here we provide two title widgets, for ethernet connection, and client connection
-TitleWidget widgetConnection(iconsConnection, 2, 16, 12, nullptr);
-TitleWidget widgetEthernet(iconsEthernetConnection, 2, 16, 12, &widgetConnection);
-
-
 //
 // We use a card layout to present the items, here we demonstrate how to set it up and prepare custom menu items that
 // have different layouts and fonts.
 //
 // START card layout and custom layout code
 
-// first we need to define both a left and right button, we use the ones from stockIcons/directionalIcons.h
-DrawableIcon iconLeft(-1, Coord(11, 22), tcgfx::DrawableIcon::ICON_XBITMAP, ArrowHoriz11x22BitmapLeft, nullptr);
-DrawableIcon iconRight(-1, Coord(11, 22), tcgfx::DrawableIcon::ICON_XBITMAP, ArrowHoriz11x22BitmapRight, nullptr);
+// here we provide two title widgets, for ethernet connection, and client connection
+TitleWidget widgetConnection(iconsConnection, 2, 16, 12, nullptr);
+TitleWidget widgetEthernet(iconsEthernetConnection, 2, 16, 12, &widgetConnection);
 
 color_t defaultCardPalette[] = {1, 0, 1, 1};
 
 void setupGridLayoutForCardView() {
-    auto & factory = renderer.getGraphicsPropertiesFactory();
-
-    // Now we define the grid layouts for the 33, 45 and 78 action items, each one has custom font size and therefore a
-    // custom height as well. It avoids the use of icons for the speed selectors.
-    factory.setDrawingPropertiesForItem(tcgfx::ItemDisplayProperties::COMPTYPE_ACTION, menu33.getId(), defaultCardPalette,
-                                        MenuPadding(2), u8g2_font_inr33_mn, 1, 2, 44, tcgfx::GridPosition::JUSTIFY_CENTER_NO_VALUE, MenuBorder());
-    factory.setDrawingPropertiesForItem(tcgfx::ItemDisplayProperties::COMPTYPE_ACTION, menu45.getId(), defaultCardPalette,
-                                        MenuPadding(2), u8g2_font_inr33_mn, 1, 2, 44, tcgfx::GridPosition::JUSTIFY_CENTER_NO_VALUE, MenuBorder());
-    factory.setDrawingPropertiesForItem(tcgfx::ItemDisplayProperties::COMPTYPE_ACTION, menu78.getId(), defaultCardPalette,
-                                        MenuPadding(2), u8g2_font_inr33_mn, 1, 2, 44, tcgfx::GridPosition::JUSTIFY_CENTER_NO_VALUE, MenuBorder());
-
-    // now we make the two settings and status menus use icons instead of regular drawing.
+    // we're going to use this a few times so declare once
     const Coord iconSize(APPICONS_WIDTH, APPICONS_HEIGHT);
-    factory.addImageToCache(DrawableIcon(menuSettings.getId(), iconSize, DrawableIcon::ICON_XBITMAP, settingsIcon40Bits));
-    factory.addImageToCache(DrawableIcon(menuStatus.getId(), iconSize, DrawableIcon::ICON_XBITMAP, statusIcon40Bits));
-    factory.addGridPosition(&menuSettings, GridPosition(GridPosition::DRAW_AS_ICON_ONLY, GridPosition::JUSTIFY_CENTER_NO_VALUE, 4, 40));
-    factory.addGridPosition(&menuStatus, GridPosition(GridPosition::DRAW_AS_ICON_ONLY, GridPosition::JUSTIFY_CENTER_NO_VALUE, 5, 40));
 
-    // after adding things to the drawing properties, we must refresh it.
-    tcgfx::ConfigurableItemDisplayPropertiesFactory::refreshCache();
+    // create a theme builder to help us configure how to draw.
+    TcThemeBuilder themeBuilder(renderer);
+
+    // enable card layout providing the left and right icons. This enables for root menu
+    themeBuilder.enableCardLayoutWithXbmImages(Coord(11, 22), ArrowHoriz11x22BitmapLeft, ArrowHoriz11x22BitmapRight, true);
+
+    // override menu33 to draw text centered in a large font with more padding
+    themeBuilder.menuItemOverride(menu33)
+            .withJustification(tcgfx::GridPosition::JUSTIFY_CENTER_NO_VALUE)
+            .withNativeFont(u8g2_font_inr33_mn, 1)
+            .withPadding(MenuPadding(2))
+            .onRow(0)
+            .apply();
+
+    // override menu45 to draw text centered in a large font with more padding
+    themeBuilder.menuItemOverride(menu45)
+            .withJustification(tcgfx::GridPosition::JUSTIFY_CENTER_NO_VALUE)
+            .withNativeFont(u8g2_font_inr33_mn, 1)
+            .withPadding(MenuPadding(2))
+            .onRow(1)
+            .apply();
+
+    // override menu78 to draw text centered in a large font with more padding
+    themeBuilder.menuItemOverride(menu78)
+            .withJustification(tcgfx::GridPosition::JUSTIFY_CENTER_NO_VALUE)
+            .withNativeFont(u8g2_font_inr33_mn, 1)
+            .withPadding(MenuPadding(2))
+            .onRow(2)
+            .apply();
+
+    // override settings to draw as an icon only
+    themeBuilder.menuItemOverride(menuSettings)
+            .withImageXbmp(iconSize, settingsIcon40Bits)
+            .withPalette(defaultCardPalette)
+            .onRow(3)
+            .withDrawingMode(tcgfx::GridPosition::DRAW_AS_ICON_ONLY).apply();
+
+    // override status to draw as an icon only
+    themeBuilder.menuItemOverride(menuStatus)
+            .withImageXbmp(iconSize, statusIcon40Bits)
+            .withPalette(defaultCardPalette)
+            .onRow(4)
+            .withDrawingMode(tcgfx::GridPosition::DRAW_AS_ICON_ONLY).apply();
+    // now we make the two settings and status menus use icons instead of regular drawing.
+    themeBuilder.apply();
 
-    // and now we set the title widgets that appear on the top right, for the link status we check the ethernet library
+    // now we set the title widgets that appear on the top right, for the link status we check the ethernet library
     // status every half second and update the widget to represent that status.
     renderer.setFirstWidget(&widgetEthernet);
     taskManager.scheduleFixedRate(500, [] {
@@ -122,9 +145,8 @@ void setup() {
         renderer.takeOverDisplay();
     });
 
-    // lastly, we set the card layout for the main "root" menu. The last parameter is an optional touch screen interface
-    // that the card layout will interact with, to "flip" between cards. Set to null when no touch screen available.
-    renderer.enableCardLayout(iconLeft, iconRight, nullptr, true);
+    // set the list to have 10 rows, for each row the custom callback further down will be called to get the value.
+    menuRuntimesCustomList.setNumberOfRows(10);
 
     // now we set up the layouts to make the card view look right.
     setupGridLayoutForCardView();

src/graphics/BaseGraphicalRenderer.h

@@ -421,6 +421,15 @@ namespace tcgfx {
     void preparePropertiesFromConfig(ConfigurableItemDisplayPropertiesFactory &factory,
                                      const ColorGfxMenuConfig<const void *> *gfxConfig, int titleHeight,
                                      int itemHeight);
+
+    /**
+     * Gets the default drawing mode based on item type
+     * @param item the item
+     * @param useSlider if sliders are enabled.
+     * @return grid drawing mode
+     */
+    GridPosition::GridDrawingMode modeFromItem(MenuItem* item, bool useSlider);
+
 } // namespace tcgfx
 
 #endif //TCMENU_BASEGRAPHICALRENDERER_H

src/graphics/TcThemeBuilder.cpp

@@ -67,8 +67,12 @@ void ThemePropertiesBuilder::initForLevel(TcThemeBuilder *b, ItemDisplayProperti
         }
         border = props->getBorder();
         justification = props->getDefaultJustification();
+        if(menuItem != nullptr) {
+            drawingMode = modeFromItem(menuItem, b->getRenderer().isUseSliderForAnalog());
+        }
     } else {
         justification = GridPosition::JUSTIFY_TITLE_LEFT_VALUE_RIGHT;
+        drawingMode = GridPosition::DRAW_TEXTUAL_ITEM;
         border = MenuBorder(0);
     }
 }
@@ -137,3 +141,4 @@ TcThemeBuilder& TcThemeBuilder::manualDimensions(int x, int y) {
     return *this;
 }
 
+

src/graphics/TcThemeBuilder.h

@@ -293,18 +293,26 @@ namespace tcgfx {
         ConfigurableItemDisplayPropertiesFactory &factory;
         ThemePropertiesBuilder propertiesBuilder;
         color_t defaultPalette[4] = {};
-        MenuPadding globalItemPadding = MenuPadding(1);
-        MenuPadding globalTitlePadding = MenuPadding(2);
-        const void *fontData = nullptr;
-        uint8_t fontMag = 1;
-        uint8_t defaultSpacing = 1;
+        MenuPadding globalItemPadding;
+        MenuPadding globalTitlePadding;
+        const void *fontData;
+        uint8_t fontMag;
+        uint8_t defaultSpacing;
     public:
         /**
          * Creates a theme builder by providing the renderer to use with it.
          * @param renderer the renderer to use, must be a GraphicsDeviceRenderer
          */
         explicit TcThemeBuilder(GraphicsDeviceRenderer& renderer) : renderer(renderer), factory(renderer.getGraphicsPropertiesFactory()),
                                                                     propertiesBuilder(this) {
+            auto titleDef = factory.configFor(nullptr, ItemDisplayProperties::COMPTYPE_TITLE);
+            globalTitlePadding = titleDef->getPadding();
+            auto itemDef = factory.configFor(nullptr, ItemDisplayProperties::COMPTYPE_ITEM);
+            memcpy(defaultPalette, itemDef->getPalette(), sizeof defaultPalette);
+            globalItemPadding = itemDef->getPadding();
+            fontData = itemDef->getFont();
+            fontMag = itemDef->getFontMagnification();
+            defaultSpacing = itemDef->getSpaceAfter();
         }
 
         /**