Draw the icons with sixteen shades: the power ring on the CYD is a ring again (0.2.75)

The Material Design Icons fonts of both boards had no bpp, so ESPHome rendered them at
its default of one bit per pixel while the text fonts already had four. On the CYD, at
18 and 28 px, a thin stroke such as the ring of mdi:power came out lumpy and uneven, and
every other icon had a ragged edge. All four icon fonts of both profiles now say bpp: 4;
the icon generator and its test keep that line. Costs the CYD 95 KB of flash (90 % of
the update slot in use on top of 0.2.74), no RAM.

App 0.2.75, firmware 0.2.63. Test results in docs/TEST_RESULTS_0275.md.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

docs/TEST_RESULTS_0275.md

@@ -0,0 +1,56 @@
+# Test results app 0.2.75 / firmware 0.2.63 (2026-09-18)
+
+Max: "dit icon ziet er overal gek uit op de CYD", with a photo of the mdi:power glyph on a grey key: a lumpy,
+uneven ring. This release draws the icon fonts with four bits per pixel on both boards. See CHANGELOG 0.2.75.
+Built on 0.2.74 (full-page tiles, `bb25353`), which itself follows 0.2.73 (the Vue editor, `1ed42dc`).
+
+## What happened before
+
+- Every Material Design Icons `font:` block of both boards (28/18/12 px on the CYD, 42/26/18 px on the Guition, plus
+  the 40/64 px font of a full-page tile since 0.2.74) had no `bpp`. ESPHome's default is 1 bit per pixel: it loads
+  each glyph with `FT_LOAD_TARGET_MONO`, so every pixel is either fully on or off. The Roboto text fonts had `bpp: 4`
+  since the first release; nothing in the history or the docs says the icons were left at 1 on purpose.
+- A thin stroke suffers most. The ring of mdi:power at 18 px (the climate power key, the settings page) comes out
+  between one and two pixels wide around its circumference; at 28 px (a tile) the ring still wobbles. Filled icons
+  such as the lightbulb or the cog only get a ragged outline. Rendering the real glyphs through freetype the way
+  ESPHome does, side by side at 1 and 4 bpp, showed exactly the ring of Max's photo.
+
+## What changed
+
+- `bpp: 4` on every MDI font block of `home-like-2432s028.yaml` and `guition-4848s040.yaml`; packages regenerated.
+- `tools/generate_icons.py` (FONT_BLOCK) and `tests/test_tile_icons.py` expect the `bpp: 4` line between `size`
+  and `glyphs`, so the icon generator keeps it on every rewrite.
+- No change to the tile protocol, the layouts or the app; the app raises `FIRMWARE_VERSION` so the manager offers
+  the update.
+
+## Flash on the CYD
+
+Measured by compiling the same profile twice at the same commit (0.2.72, `9f5694b`), only the `bpp` lines differ:
+
+| Build | firmware.bin | of the 1.835 MB app slot |
+|---|---|---|
+| 1 bpp (before) | 1 538 032 bytes | 83.8 % |
+| 4 bpp (this release) | 1 632 736 bytes | 89.0 % |
+| difference | +94 704 bytes | +5.2 points |
+
+On 0.2.74 (`bb25353`, which added the 40 px full-page font and the 48-tile code) the release build is 1 655 568 bytes,
+90.2 % of the slot, static RAM 21.7 % (71 188 of 327 680 bytes); about 180 KB stay free for later rounds.
+
+The glyph bitmaps alone grow by 108 KB (309 icons at three sizes plus the big font, counted with freetype); the
+linker's alignment takes a little of that back. Fonts live in flash, so RAM does not move (24.1 % static in both
+builds). 2 bpp would have cost 38 KB but still shows four grey steps on a thin ring; the Guition has 16 MB flash and
+gets the same 4 bpp so both brands look alike.
+
+## Automated
+
+- Python (`.venv-portal`, `unittest discover -s tests`): 409 tests OK on 0.2.74 plus this change (386 before the
+  rebase, at 0.2.72; the icon-font test now insists on `bpp: 4` in all four blocks).
+- C++ (`clang++ -std=c++17 -Wall -Wextra -Werror -I.`): 17/17 PASS, before and after the rebase.
+- `tools/generate_packages.py --check` and `tools/generate_icons.py --check` green.
+- `esphome compile home-like-2432s028.yaml` and `esphome compile guition-4848s040.yaml` from a worktree
+  (`icon-bpp`), sequentially.
+
+## Hardware
+
+- Pending: the bench CYD flashed with this firmware, then Max looks at the power key, a light tile and the
+  settings page.

guition-4848s040.yaml

@@ -2,7 +2,7 @@
 # Source profile for packages/guition.yaml (tools/generate_packages.py); see docs/GUITION.md.
 # A screen gets its tiles from the ESP Screen Manager add-on while it runs. The CYD is its own profile.
 substitutions:
-  SCREEN_FIRMWARE_VERSION: "0.2.62"
+  SCREEN_FIRMWARE_VERSION: "0.2.63"
   # 0: no drift limit; LVGL decides, releasing inside the tile is a tap, leaving it is not
   # (like iOS). The CYD keeps a limit because its resistive panel jumps.
   TOUCH_MOVE_LIMIT_PX: "0"
@@ -905,6 +905,7 @@ font:
   - file: 'fonts/materialdesignicons-webfont.ttf'
     id: materialdesign_icons
     size: 42
+    bpp: 4
     glyphs: &tile_icons  # GENERATED by tools/generate_icons.py from screen_manager/app/tile_icons.py
       - "\U000F0335" # lightbulb
       - "\U000F1253" # lightbulb-group
@@ -1219,6 +1220,7 @@ font:
   - file: 'fonts/materialdesignicons-webfont.ttf'
     id: materialdesign_icons_mini
     size: 26
+    bpp: 4
     glyphs: *tile_icons
 
   # The large icon of a card that takes the whole page (firmware 0.2.62+): the domain icons only,
@@ -1226,6 +1228,7 @@ font:
   - file: 'fonts/materialdesignicons-webfont.ttf'
     id: materialdesign_icons_big
     size: 64
+    bpp: 4
     glyphs: &tile_icons_big  # GENERATED by tools/generate_icons.py from screen_manager/app/tile_icons.py
       - "\U000F0335" # lightbulb
       - "\U000F001B" # air-conditioner
@@ -1262,6 +1265,7 @@ font:
   - file: 'fonts/materialdesignicons-webfont.ttf'
     id: watch_icon
     size: 18
+    bpp: 4
     glyphs: *tile_icons
 
 # Make memory visible: this board has no PSRAM, so the free heap determines

home-like-2432s028.yaml

@@ -17,7 +17,7 @@
 ############################################################
 
 substitutions:
-  SCREEN_FIRMWARE_VERSION: "0.2.62"
+  SCREEN_FIRMWARE_VERSION: "0.2.63"
   # A tap survives a finger that drifts up to this far (320 px over 58 mm: 1 cm); further is a swipe.
   TOUCH_MOVE_LIMIT_PX: "56"
   # Shortest contact that counts as a tap; a resistive panel bounces, a capacitive one does not.
@@ -934,6 +934,7 @@ font:
   - file: 'fonts/materialdesignicons-webfont.ttf'
     id: materialdesign_icons
     size: 28
+    bpp: 4
     glyphs: &tile_icons  # GENERATED by tools/generate_icons.py from screen_manager/app/tile_icons.py
       - "\U000F0335" # lightbulb
       - "\U000F1253" # lightbulb-group
@@ -1248,6 +1249,7 @@ font:
   - file: 'fonts/materialdesignicons-webfont.ttf'
     id: materialdesign_icons_mini
     size: 18
+    bpp: 4
     glyphs: *tile_icons
 
   # The large icon of a card that takes the whole page (firmware 0.2.62+): the domain icons only,
@@ -1255,6 +1257,7 @@ font:
   - file: 'fonts/materialdesignicons-webfont.ttf'
     id: materialdesign_icons_big
     size: 40
+    bpp: 4
     glyphs: &tile_icons_big  # GENERATED by tools/generate_icons.py from screen_manager/app/tile_icons.py
       - "\U000F0335" # lightbulb
       - "\U000F001B" # air-conditioner
@@ -1291,6 +1294,7 @@ font:
   - file: 'fonts/materialdesignicons-webfont.ttf'
     id: watch_icon
     size: 12
+    bpp: 4
     glyphs: *tile_icons
 
 # Make memory visible: this board has no PSRAM, so the free heap determines

packages/cyd.yaml

@@ -18,7 +18,7 @@
 ############################################################
 
 substitutions:
-  SCREEN_FIRMWARE_VERSION: "0.2.62"
+  SCREEN_FIRMWARE_VERSION: "0.2.63"
   # A tap survives a finger that drifts up to this far (320 px over 58 mm: 1 cm); further is a swipe.
   TOUCH_MOVE_LIMIT_PX: "56"
   # Shortest contact that counts as a tap; a resistive panel bounces, a capacitive one does not.
@@ -923,6 +923,7 @@ font:
   - file: "https://raw.githubusercontent.com/MaxGramser/homeassistant_espscreen/main/fonts/materialdesignicons-webfont.ttf"
     id: materialdesign_icons
     size: 28
+    bpp: 4
     glyphs: &tile_icons  # GENERATED by tools/generate_icons.py from screen_manager/app/tile_icons.py
       - "\U000F0335" # lightbulb
       - "\U000F1253" # lightbulb-group
@@ -1237,6 +1238,7 @@ font:
   - file: "https://raw.githubusercontent.com/MaxGramser/homeassistant_espscreen/main/fonts/materialdesignicons-webfont.ttf"
     id: materialdesign_icons_mini
     size: 18
+    bpp: 4
     glyphs: *tile_icons
 
   # The large icon of a card that takes the whole page (firmware 0.2.62+): the domain icons only,
@@ -1244,6 +1246,7 @@ font:
   - file: "https://raw.githubusercontent.com/MaxGramser/homeassistant_espscreen/main/fonts/materialdesignicons-webfont.ttf"
     id: materialdesign_icons_big
     size: 40
+    bpp: 4
     glyphs: &tile_icons_big  # GENERATED by tools/generate_icons.py from screen_manager/app/tile_icons.py
       - "\U000F0335" # lightbulb
       - "\U000F001B" # air-conditioner
@@ -1280,6 +1283,7 @@ font:
   - file: "https://raw.githubusercontent.com/MaxGramser/homeassistant_espscreen/main/fonts/materialdesignicons-webfont.ttf"
     id: watch_icon
     size: 12
+    bpp: 4
     glyphs: *tile_icons
 
 # Make memory visible: this board has no PSRAM, so the free heap determines

packages/guition.yaml

@@ -3,7 +3,7 @@
 # Source profile for packages/guition.yaml (tools/generate_packages.py); see docs/GUITION.md.
 # A screen gets its tiles from the ESP Screen Manager add-on while it runs. The CYD is its own profile.
 substitutions:
-  SCREEN_FIRMWARE_VERSION: "0.2.62"
+  SCREEN_FIRMWARE_VERSION: "0.2.63"
   # 0: no drift limit; LVGL decides, releasing inside the tile is a tap, leaving it is not
   # (like iOS). The CYD keeps a limit because its resistive panel jumps.
   TOUCH_MOVE_LIMIT_PX: "0"
@@ -894,6 +894,7 @@ font:
   - file: "https://raw.githubusercontent.com/MaxGramser/homeassistant_espscreen/main/fonts/materialdesignicons-webfont.ttf"
     id: materialdesign_icons
     size: 42
+    bpp: 4
     glyphs: &tile_icons  # GENERATED by tools/generate_icons.py from screen_manager/app/tile_icons.py
       - "\U000F0335" # lightbulb
       - "\U000F1253" # lightbulb-group
@@ -1208,6 +1209,7 @@ font:
   - file: "https://raw.githubusercontent.com/MaxGramser/homeassistant_espscreen/main/fonts/materialdesignicons-webfont.ttf"
     id: materialdesign_icons_mini
     size: 26
+    bpp: 4
     glyphs: *tile_icons
 
   # The large icon of a card that takes the whole page (firmware 0.2.62+): the domain icons only,
@@ -1215,6 +1217,7 @@ font:
   - file: "https://raw.githubusercontent.com/MaxGramser/homeassistant_espscreen/main/fonts/materialdesignicons-webfont.ttf"
     id: materialdesign_icons_big
     size: 64
+    bpp: 4
     glyphs: &tile_icons_big  # GENERATED by tools/generate_icons.py from screen_manager/app/tile_icons.py
       - "\U000F0335" # lightbulb
       - "\U000F001B" # air-conditioner
@@ -1251,6 +1254,7 @@ font:
   - file: "https://raw.githubusercontent.com/MaxGramser/homeassistant_espscreen/main/fonts/materialdesignicons-webfont.ttf"
     id: watch_icon
     size: 18
+    bpp: 4
     glyphs: *tile_icons
 
 # Make memory visible: this board has no PSRAM, so the free heap determines

screen_manager/CHANGELOG.md

@@ -1,3 +1,11 @@
+## 0.2.75 (firmware 0.2.63)
+
+Smooth icons on the CYD: the power ring is a ring again.
+
+- **Every icon is drawn with sixteen shades instead of two.** The icon fonts of both boards were rendered at one bit per pixel, the default ESPHome falls back to when a font does not say otherwise, while the text fonts already had four. On the CYD, at 18 and 28 pixels, that made a thin stroke such as the ring of the power icon lumpy and uneven; the edges of every other icon were ragged too. The icons now get the same four bits per pixel as the text, on the Guition as well, so both brands look alike.
+- **Costs the CYD 95 KB of flash** (89 % of its update slot is in use now, was 84 %) and no memory: fonts live in flash.
+- Needs firmware 0.2.63: press **Update** on the screen. Includes everything from 0.2.74.
+
 ## 0.2.74 (firmware 0.2.62)
 
 Forty-eight tiles, a tile over the whole page, and tiles that go to a page.

screen_manager/app/core.py

@@ -30,7 +30,7 @@ WEEKDAYS = ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su']
 REPO = 'https://github.com/MaxGramser/homeassistant_espscreen'
 REFS = {'cyd': 'main', 'guition': 'main'}
 # Firmware shipped with this app release; screens below it get an update offer.
-FIRMWARE_VERSION = '0.2.62'
+FIRMWARE_VERSION = '0.2.63'
 # The Auto standby switch a screen offers Home Assistant automations.
 AUTO_STANDBY_MIN_FIRMWARE = '0.2.41'
 # The settings page the screen opens itself, and the screen.settings tile that opens it.

screen_manager/config.yaml

@@ -1,5 +1,5 @@
 name: ESP Screen Manager
-version: "0.2.74"
+version: "0.2.75"
 slug: esp_screen_manager
 description: Choose tiles for your CYD and Guition touchscreen, without reflashing.
 url: https://github.com/MaxGramser/homeassistant_espscreen

tests/test_tile_icons.py

@@ -22,7 +22,7 @@ class IconSetTests(unittest.TestCase):
         wanted = [f'\\U000{code}' for code in tile_icons.GLYPHS.values()]
         for name in ('home-like-2432s028.yaml', 'guition-4848s040.yaml', 'packages/cyd.yaml', 'packages/guition.yaml'):
             text = (ROOT / name).read_text()
-            fonts = re.findall(r'materialdesignicons-webfont\.ttf["\']\n    id: (\w+)\n    size: \d+\n    glyphs: (.*)\n', text)
+            fonts = re.findall(r'materialdesignicons-webfont\.ttf["\']\n    id: (\w+)\n    size: \d+\n    bpp: 4\n    glyphs: (.*)\n', text)
             self.assertEqual([font for font, _ in fonts], ['materialdesign_icons', 'materialdesign_icons_mini', 'materialdesign_icons_big', 'watch_icon'], name)
             self.assertTrue(fonts[0][1].startswith('&tile_icons ') and all(g == '*tile_icons' for font, g in fonts[1:] if font != 'materialdesign_icons_big'), name)
             block = text.split('glyphs: &tile_icons ', 1)[1].split('\n\n', 1)[0]

tools/generate_icons.py

@@ -28,7 +28,8 @@ PROFILES = [ROOT / 'home-like-2432s028.yaml', ROOT / 'guition-4848s040.yaml']
 WEB_FONT = ROOT / 'web/src/assets/tile-icons.woff'
 BAR_FONTS = {weight: ROOT / f'web/src/assets/bar-roboto-{weight}.woff' for weight in (400, 500)}
 NAME_TABLE = ROOT / 'components/smart_display/tile_icon_names.h'
-FONT_BLOCK = re.compile(r"(  - file: 'fonts/materialdesignicons-webfont\.ttf'\n    id: \w+\n    size: \d+\n)    glyphs:.*\n(?:      .*\n)*")
+# Four bits per pixel: the default of one draws a thin ring like mdi:power as a lumpy circle on the CYD.
+FONT_BLOCK = re.compile(r"(  - file: 'fonts/materialdesignicons-webfont\.ttf'\n    id: \w+\n    size: \d+\n    bpp: 4\n)    glyphs:.*\n(?:      .*\n)*")
 
 def verify():
     """Names and codepoints must match the TTF the firmware is built from."""