Fix weather icons and emoji not rendering on e-ink device (#23)#24
Open
mochlast wants to merge 2 commits into
Open
Fix weather icons and emoji not rendering on e-ink device (#23)#24mochlast wants to merge 2 commits into
mochlast wants to merge 2 commits into
Conversation
The device render path (renderDesignAsHtml -> Puppeteer -> generateWeatherContent) embedded the raw SVG primitives returned by getWeatherIconSvg() directly into an HTML <div>, without an enclosing <svg> element. Browsers only render SVG primitives inside an <svg>, so the weather icon was invisible on the device while still showing in the frontend designer preview (which uses a proper <svg> wrapper). Wrap the icon markup in a sized <svg> element (matching the existing battery/wifi widget pattern) and add font-family to the snow glyphs for robust text rendering. Co-Authored-By: Claude Opus 4.8 (1M context) <[email protected]>
Color emoji (e.g. ⚡ rendered via fonts-noto-color-emoji) turn bright in the grayscale + Floyd-Steinberg pass and end up above the white threshold, so they vanish on the device while showing in the browser preview. Swap the color emoji font for the monochrome Symbola font and list it as a per-glyph fallback in mapFontFamily, so emoji render as black glyphs that survive dithering. No widget content changes needed. Co-Authored-By: Claude Opus 4.8 (1M context) <[email protected]>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Fixes the weather icons (and, while at it, emoji) being invisible on the physical e-ink device although they show correctly in the designer preview. Reported in #23 (firmware 1.7.8, v0.4.0). Both issues are verified fixed on a real device.
1. Weather icons missing on device
generateWeatherContent()embedded the raw SVG primitives returned bygetWeatherIconSvg()(<circle>,<ellipse>,<line>, …) directly into an HTML<div>, without an enclosing<svg>element. Browsers only render SVG primitives inside an<svg>, so on the Puppeteer device-render path the icon produced no pixels — while the frontend designer preview (WidgetRenderer.tsx'sWeatherIcon, which uses a proper<svg>wrapper) showed it fine. The sibling battery/wifi widgets already wrap their icons correctly; weather was the outlier.<svg ... viewBox>element (matching the battery/wifi pattern).font-familyto the snow glyph<text>elements for robust rendering.2. Emoji vanish on device
Color emoji (e.g.
⚡viafonts-noto-color-emoji) render bright/yellow, which the grayscale + Floyd-Steinberg pass pushes above the white threshold (140) → they turn white and disappear on the device, while showing in the browser preview.fonts-symbola, the monochrome emoji/symbol font available in Debian trixie) and list it as a per-glyph fallback inmapFontFamily(), so emoji render as black glyphs that survive dithering. No widget-content changes needed.Testing
Built and deployed to a real TRMNL device (firmware 1.7.8): the weather forecast icons now render, and the
⚡in a text/custom widget now shows as a black glyph.Closes #23
🤖 Generated with Claude Code