Refined settings menu item styling and switched Edge 550/850 to settings menu. (#253)

TheNinth7 · TheNinth7 · commit 610703080073 · 2026-02-27T09:09:26.000+01:00
diff --git a/monkey.jungle b/monkey.jungle
@@ -30,12 +30,6 @@ annotCiq510Plus=exclForCiq510Plus;exclForCiq400Plus
 # - Button-based: all devices with buttons for up/down/enter/back,
 #                 even if they also have a touch screen. Such 
 #                 devices include: Fenix, Epix, Forerunner, Edge 540/840
-# Note: Although the Edge 850 is button-based,
-# they are affected by two firmware bugs: one prevents the delegate
-# functions required to reach the settings menu from working
-# correctly, and another causes the menu focus to be displayed
-# incorrectly. Therefore, these two devices are treated as touch
-# devices.
 annotTouch=exclForTouch;exclForSettingsMenuItem
 annotButton=exclForButton;exclForSettingsFooter
 
@@ -44,7 +38,9 @@ annotButton=exclForButton;exclForSettingsFooter
 # menu boundaries from working correctly.
 # Therefore, on these devices, the settings are shown as a regular
 # menu item instead. All other button-based controls remain unchanged.
-# This applies to Edge 540, Edge MTB, and Edge 550.
+# This applies to Edge 540 / 840, Edge MTB, and Edge 550 / 850.
+# https://github.com/openhab/openhab-garmin/issues/253
+# https://github.com/openhab/openhab-garmin/issues/260
 annotButtonWithSettingsMenuItem=exclForButton;exclForSettingsMenuItem
 
 # Either on of these should be assigned, depending
@@ -361,21 +357,11 @@ edgemtb.resourcePath=$(resEdgeShort);$(resLauncherIcons)/36x36-dark
 edgemtb.excludeAnnotations = $(edge540.excludeAnnotations)
 edgemtb.sourcePath = $(srcEdgeButtonX40)
 edge550.resourcePath=$(resEdgeShort);$(resLauncherIcons)/56x56-dark
-edge550.excludeAnnotations = $(annotCiq510Plus);$(annotButton);$(annotScreenRectangular);$(annotFullMenu)
+edge550.excludeAnnotations = $(annotCiq510Plus);$(annotButtonWithSettingsMenuItem);$(annotScreenRectangular);$(annotFullMenu)
 edge550.sourcePath = $(srcEdgeButtonX50)
 edge850.resourcePath=$(edge550.resourcePath)
-
-# The Edge 850 is a button-based device, with touch,
-# However Garmin bugs prevent the button control to work
-# properly, so we treat them as touch devices 
-# https://github.com/openhab/openhab-garmin/issues/260
-# https://github.com/openhab/openhab-garmin/issues/267
-
-# edge850.excludeAnnotations = $(edge550.excludeAnnotations)
-# edge850.sourcePath = $(srcEdgeButtonX50)
-edge850.excludeAnnotations = $(annotCiq510Plus);$(annotButton);$(annotScreenRectangular);$(annotFullMenu)
-edge850.sourcePath = $(srcEdgeX50Touch)
-
+edge850.excludeAnnotations = $(edge550.excludeAnnotations)
+edge850.sourcePath = $(srcEdgeButtonX50)
 
 # Touch-based, CIQ >= 5.1.0
 edge1040.resourcePath=$(resEdgeTall);$(resLauncherIcons)/40x40-dark
diff --git a/resources/edge/icons-widgets/icons-widgets.xml b/resources/edge/icons-widgets/icons-widgets.xml
@@ -94,7 +94,8 @@
     <bitmap id="menuScreenOff" scaleX="13%" filename="../../icons-widgets/screen-off.svg" dithering="none"/>
     <bitmap id="menuScreenOn" scaleX="13%" filename="../../icons-widgets/screen-on.svg" dithering="none"/>
 
-    <bitmap id="menuSettings" scaleX="11%" filename="../../icons-widgets/settings.svg" dithering="none" />
+    <bitmap id="menuSettingsLightGray" scaleX="11%" filename="../../icons-widgets/settings-lt-gray.svg" dithering="none" />
+    <bitmap id="menuSettingsDarkGray" scaleX="11%" filename="../../icons-widgets/settings-dk-gray.svg" dithering="none" />
 
     <bitmap id="menuSoundVolume00" scaleX="13%" filename="../../icons-widgets/soundvolume-00.svg" dithering="none"/>
     <bitmap id="menuSoundVolume04" scaleX="13%" filename="../../icons-widgets/soundvolume-04.svg" dithering="none"/>
diff --git a/resources/icons-widgets/_icons-widgets.xml b/resources/icons-widgets/_icons-widgets.xml
@@ -87,7 +87,7 @@
     <bitmap id="menuScreenOff" scaleY="11%" filename="screen-off.svg" dithering="none"/>
     <bitmap id="menuScreenOn" scaleY="11%" filename="screen-on.svg" dithering="none"/>
 
-    <bitmap id="menuSettings" scaleY="10%" filename="settings.svg" dithering="none" />
+    <bitmap id="menuSettingsLightGray" scaleY="10%" filename="settings-lt-gray.svg" dithering="none" />
 
     <bitmap id="menuSoundVolume00" scaleY="12%" filename="soundvolume-00.svg" dithering="none"/>
     <bitmap id="menuSoundVolume04" scaleY="12%" filename="soundvolume-04.svg" dithering="none"/>
diff --git a/resources/icons-widgets/settings-dk-gray.svg b/resources/icons-widgets/settings-dk-gray.svg
@@ -0,0 +1,49 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   version="1.1"
+   x="0px"
+   y="0px"
+   viewBox="0 0 79.999998 79.999998"
+   xml:space="preserve"
+   id="svg2"
+   sodipodi:docname="settings-dk-grey.svg"
+   width="80"
+   height="80"
+   inkscape:version="1.4.2 (f4327f4, 2025-05-13)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns:i="http://ns.adobe.com/AdobeIllustrator/10.0/"><defs
+     id="defs2" /><sodipodi:namedview
+     id="namedview2"
+     pagecolor="#000000"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:zoom="6.856"
+     inkscape:cx="29.171529"
+     inkscape:cy="41.642357"
+     inkscape:window-width="1920"
+     inkscape:window-height="1111"
+     inkscape:window-x="-9"
+     inkscape:window-y="-9"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg2" /><switch
+     id="switch1"
+     transform="matrix(0.84121977,0,0,0.84121977,-2.1030494,-2.1030494)"
+     style="fill:#555555;fill-opacity:1"><foreignObject
+       requiredExtensions="http://ns.adobe.com/AdobeIllustrator/10.0/"
+       x="0"
+       y="0"
+       width="1"
+       height="1" /><g
+       i:extraneous="self"
+       id="g1"
+       style="fill:#555555;fill-opacity:1"><path
+         d="M 94.8,40.8 84.2,39 c -0.6,-1.9 -1.4,-3.7 -2.3,-5.5 l 6.2,-8.7 C 89,23.5 88.9,21.7 87.8,20.6 L 79.3,12.1 C 78.2,11 76.4,10.8 75.1,11.8 L 66.4,18 C 64.7,17.1 62.8,16.3 60.9,15.7 L 59.2,5.2 C 58.9,3.6 57.6,2.5 56,2.5 H 44 c -1.6,0 -2.9,1.1 -3.2,2.7 L 39,15.8 c -1.9,0.6 -3.7,1.4 -5.5,2.3 L 24.8,11.9 C 23.5,11 21.7,11.1 20.6,12.2 l -8.5,8.5 c -1.1,1.1 -1.3,2.9 -0.3,4.2 l 6.2,8.7 c -0.9,1.7 -1.7,3.6 -2.3,5.5 L 5.2,40.8 C 3.6,41.1 2.5,42.4 2.5,44 v 12 c 0,1.6 1.1,2.9 2.7,3.2 L 15.8,61 c 0.6,1.9 1.4,3.7 2.3,5.5 l -6.2,8.7 c -0.9,1.3 -0.8,3.1 0.3,4.2 l 8.5,8.5 c 1.1,1.1 2.9,1.3 4.2,0.3 L 33.6,82 c 1.7,0.9 3.6,1.7 5.5,2.3 l 1.8,10.6 c 0.3,1.6 1.6,2.7 3.2,2.7 h 12 c 1.6,0 2.9,-1.1 3.2,-2.7 L 61,84.2 c 1.9,-0.6 3.7,-1.4 5.5,-2.3 l 8.7,6.2 c 1.3,0.9 3.1,0.8 4.2,-0.3 l 8.5,-8.5 c 1.1,-1.1 1.3,-2.9 0.3,-4.2 L 82,66.4 c 0.9,-1.7 1.7,-3.6 2.3,-5.5 l 10.6,-1.8 c 1.6,-0.3 2.7,-1.6 2.7,-3.2 V 44 C 97.5,42.4 96.4,41.1 94.8,40.8 Z M 50,67.1 c -9.5,0 -17.1,-7.7 -17.1,-17.1 0,-9.5 7.7,-17.1 17.1,-17.1 9.4,0 17.1,7.6 17.1,17.1 0,9.5 -7.6,17.1 -17.1,17.1 z"
+         id="path1"
+         style="fill:#555555;fill-opacity:1" /></g></switch></svg>
diff --git a/resources/icons-widgets/settings-lt-gray.svg b/resources/icons-widgets/settings-lt-gray.svg
@@ -6,7 +6,7 @@
    viewBox="0 0 79.999998 79.999998"
    xml:space="preserve"
    id="svg2"
-   sodipodi:docname="settings.svg"
+   sodipodi:docname="settings-lt-grey.svg"
    width="80"
    height="80"
    inkscape:version="1.4.2 (f4327f4, 2025-05-13)"
@@ -25,7 +25,7 @@
      inkscape:pagecheckerboard="0"
      inkscape:deskcolor="#d1d1d1"
      inkscape:zoom="6.856"
-     inkscape:cx="29.0986"
+     inkscape:cx="29.171529"
      inkscape:cy="41.642357"
      inkscape:window-width="1920"
      inkscape:window-height="1111"
diff --git a/source-themes/theme-definitions/base/Theme.mc b/source-themes/theme-definitions/base/Theme.mc
@@ -45,6 +45,9 @@ typedef Theme as interface {
     // openHAB logo for the menu footer
     var logoOpenhabText as ResourceId;
 
+    // The icon shown for the settings menu item
+    var menuSettings as ResourceId;
+
     // The icon shown on the loading screen
     var iconHourglass as ResourceId;
 
diff --git a/source-themes/theme-definitions/device-default/DefaultTheme.mc b/source-themes/theme-definitions/device-default/DefaultTheme.mc
@@ -28,6 +28,8 @@ class DefaultTheme extends BaseTheme {
 
     public var logoOpenhabText as ResourceId = Rez.Drawables.logoOpenhabTextWhite;
 
+    public var menuSettings as ResourceId = Rez.Drawables.menuSettingsLightGray;
+
     public var iconHourglass as ResourceId = Rez.Drawables.iconHourglassWhite;
 
     public var iconPlayButton as ResourceId = Rez.Drawables.iconPlayButtonLightGrey;
diff --git a/source-themes/theme-definitions/device-night-mode/dark/DarkTheme.mc b/source-themes/theme-definitions/device-night-mode/dark/DarkTheme.mc
@@ -14,7 +14,6 @@ import Rez.Styles;
  */
 class DarkTheme extends DefaultTheme {
 
-    //public var textColor as ColorType = 0xFFFBFF;
     public var backgroundColor as ColorType = 0x31353A;
     public var menuTitleBackgroundColor as ColorType = 0x212429;
     public var menuTitleDividerColor as ColorType = 0xC5C2C5;
diff --git a/source-themes/theme-definitions/device-night-mode/light/LightTheme.mc b/source-themes/theme-definitions/device-night-mode/light/LightTheme.mc
@@ -24,6 +24,8 @@ class LightTheme extends BaseTheme {
 
     public var logoOpenhabText as ResourceId = Rez.Drawables.logoOpenhabTextBlack;
 
+    public var menuSettings as ResourceId = Rez.Drawables.menuSettingsDarkGray;
+
     public var iconHourglass as ResourceId = Rez.Drawables.iconHourglassBlack;
 
     public var iconPlayButton as ResourceId = Rez.Drawables.iconPlayButtonDarkGrey;
diff --git a/source/user-interface/menu-views/base/BaseMenuItem.mc b/source/user-interface/menu-views/base/BaseMenuItem.mc
@@ -27,14 +27,18 @@ class BaseMenuItem extends CustomMenuItem {
         CustomMenuItem.initialize( id, {} );
     }
 
+    // Draw the menu item.
+    //
+    // This method draws the divider and delegates further layout 
+    // and drawing to subclass implementations.
     public function draw( dc as Dc ) as Void {
         try {
             if( ! _hasLayout ) {
                 _hasLayout = true;
                 onLayout( dc );
             }
 
-            var theme = isFocused() ? ThemeManager.focused : ThemeManager.current;
+            var theme = getCurrentTheme();
             
             dc.setColor( theme.textColor, theme.menuItemBackgroundColor );
             dc.clear();
@@ -56,6 +60,16 @@ class BaseMenuItem extends CustomMenuItem {
         }
     }
 
+    // Returns the theme to apply when drawing.
+    //
+    // Subclasses should use this method to retrieve the theme and
+    // apply colors on every onUpdate() call, as the theme may change at any time.
+    public function getCurrentTheme() as Theme {
+        return isFocused()
+               ? ThemeManager.focused
+               : ThemeManager.current;
+    }
+
     // May be implemented by subclasses to perform layout calculations
     public function onLayout( dc as Dc ) as Void;
 
diff --git a/source/user-interface/menu-views/commands/CommandMenuItem.mc b/source/user-interface/menu-views/commands/CommandMenuItem.mc
@@ -61,8 +61,8 @@ class CommandMenuItem extends BaseMenuItem {
     * This event handler is responsible for rendering the content.
     */
     public function onUpdate( dc as Dc ) as Void {
+        var theme = getCurrentTheme();
         if( _labelTextArea != null ) {
-            var theme = isFocused() ? ThemeManager.focused : ThemeManager.current;
             _labelTextArea.setColor( theme.textColor );
             _labelTextArea.setBackgroundColor( theme.menuItemBackgroundColor );
             _labelTextArea.draw( dc );
diff --git a/source/user-interface/menu-views/settings/menu-items/SettingsSitemapRefreshMenuItem.mc b/source/user-interface/menu-views/settings/menu-items/SettingsSitemapRefreshMenuItem.mc
@@ -34,13 +34,11 @@ class SettingsSitemapRefreshMenuItem extends BaseSitemapMenuItem {
 
     // Called by the base class to render the menu item.
     public function onUpdate( dc as Dc ) as Void {
-        var theme = isFocused() ? ThemeManager.focused : ThemeManager.current;
-
         if( ConnectionHandler.get().isWifiConnected() ) {
-            BaseSitemapMenuItem.setLabelColor( theme.textColor );
+            BaseSitemapMenuItem.setLabelColor( getCurrentTheme().textColor );
             BaseSitemapMenuItem.setActionIcon( ACTION_ICON_COMMAND );
         } else {
-            BaseSitemapMenuItem.setLabelColor( theme.stateColor );
+            BaseSitemapMenuItem.setLabelColor( getCurrentTheme().stateColor );
             BaseSitemapMenuItem.setActionIcon( null );
         }
         BaseSitemapMenuItem.onUpdate( dc );
diff --git a/source/user-interface/menu-views/settings/menu-items/SettingsTextMenuItem.mc b/source/user-interface/menu-views/settings/menu-items/SettingsTextMenuItem.mc
@@ -67,15 +67,17 @@ class SettingsTextMenuItem extends BaseMenuItem {
         // Colors need to be updated on every draw, since switch
         // focus change and switch between standard and night mode 
         // could happen anytime
-        var color = isFocused()
-                    ? ThemeManager.focused.textColor
-                    : ThemeManager.current.textColor;
-        ( _labelTextArea as TextArea ).setColor( color );
-        ( _subLabelTextArea as TextArea ).setColor( color );
+        var color = getCurrentTheme().textColor;
 
-        // Draw the text fields
-        ( _labelTextArea as TextArea ).draw( dc );
-        (_subLabelTextArea as TextArea ).draw( dc );
+        if( _labelTextArea != null ) {
+            _labelTextArea.setColor( color );
+            _labelTextArea.draw( dc );
+        }
+
+        if( _subLabelTextArea != null ) {
+            _subLabelTextArea.setColor( color );
+            _subLabelTextArea.draw( dc );
+        }
     }
 
     // Set the sub label
diff --git a/source/user-interface/menu-views/sitemap/menu-items/_base/BaseSitemapMenuItem.mc b/source/user-interface/menu-views/sitemap/menu-items/_base/BaseSitemapMenuItem.mc
@@ -431,9 +431,7 @@ class BaseSitemapMenuItem extends BaseMenuItem {
         _labelTextArea.setColor(
             _labelColor != null 
             ? _labelColor 
-            : isFocused()
-              ? ThemeManager.focused.textColor
-              : ThemeManager.current.textColor
+            : getCurrentTheme().textColor
         );
     }
 
@@ -452,9 +450,7 @@ class BaseSitemapMenuItem extends BaseMenuItem {
     private function updateStateDrawablesColor() as Void {
         var stateColor = _stateColor != null 
                          ? _stateColor 
-                         : isFocused()
-                           ? ThemeManager.focused.stateColor
-                           : ThemeManager.current.stateColor;
+                         : getCurrentTheme().stateColor;
 
         if( _stateDrawable instanceof StateText ) {
             _stateDrawable.setColor( stateColor );
diff --git a/source/user-interface/menu-views/sitemap/menu-items/settings/SettingsMenuItem.mc b/source/user-interface/menu-views/sitemap/menu-items/settings/SettingsMenuItem.mc
@@ -1,5 +1,6 @@
 import Toybox.Lang;
 import Toybox.WatchUi;
+import Toybox.Graphics;
 
 /*
  * This menu item implementation represents the settings menu.
@@ -27,12 +28,20 @@ class SettingsMenuItem extends BaseSitemapMenuItem {
         // the font is colored in light grey
         BaseSitemapMenuItem.initialize( { 
             :id => "__settings__",
-            :icon => Rez.Drawables.menuSettings,
             :label => "Settings",
-            :labelColor => ThemeManager.current.stateColor
+            :actionIcon => ACTION_ICON_PAGE
         } );
     }
 
+    // Sets the color dynamically to accommodate
+    // night mode and focus changes.
+    public function onUpdate( dc as Dc ) {
+        var theme = getCurrentTheme();
+        setLabelColor( theme.textColor );
+        setIcon( theme.menuSettings );
+        BaseSitemapMenuItem.onUpdate( dc );
+    }
+
     // On select, show the settings
     public function onSelect() as Boolean {
         SettingsMenuHandler.showSettings( WatchUi.SLIDE_LEFT );
