Add a curated theme system for "modern" style widgets, inspired by Tesserae
Frame.theme (7 presets in app/theme_tokens.py) drives font family, corner radius, drop shadow, and an accent hue for every modern-style widget's header/accent region. Rich accent colors (not just the 6 flat panel inks) are approximated via denser Bayer stippling confined to just that region (html_render.ordered_dither_regions), so icon/text content elsewhere stays exactly as crisp as it is today -- verified directly against real Chromium renders, both in unit tests and via run-server. "classic" is a byte-identical no-visual-change default: weather's header keeps its original fixed blue gradient, tasks/calendar keep their flat THEME_* ink. Themes are purely stylistic -- battery's charge-level color, calendar/ tasks' per-owner event chips, and text's own per-widget font choice are never touched.
This commit is contained in:
+91
-46
@@ -8,7 +8,7 @@ dithering) plus one `build_*` function per widget type that has a
|
||||
modern-style builder -- battery/text/tasks/static image/whiteboard live
|
||||
here directly (mirroring how those widget types are themselves "inlined"
|
||||
in their own widget.py rather than getting a dedicated render module);
|
||||
calendar's (agenda mode only, see calendar_html_render.py) is the one
|
||||
calendar's (all four view modes, see calendar_html_render.py) is the one
|
||||
exception, kept separate the same reason calendar_render.py itself is
|
||||
its own 800+ line file rather than joining battery/text/tasks inline.
|
||||
Not offered for the photos widget -- a real photograph isn't a
|
||||
@@ -66,7 +66,7 @@ import numpy as np
|
||||
from jinja2 import Environment, FileSystemLoader, select_autoescape
|
||||
from PIL import Image
|
||||
|
||||
from . import panel_style
|
||||
from . import panel_style, theme_tokens
|
||||
from .image_pipeline import DEFAULT_PALETTE_RGB, hex_to_rgb
|
||||
|
||||
_TEMPLATE_DIR = Path(__file__).resolve().parent / "templates" / "widget_html"
|
||||
@@ -87,16 +87,6 @@ CATEGORY_EMOJI = {
|
||||
"thunderstorm": "⛈️",
|
||||
}
|
||||
|
||||
# ACCENT_START/END: a fixed blue gradient pair for the "modern" style's
|
||||
# card header -- deliberately not routed through panel_style.theme_color
|
||||
# (unlike every classic-rendered widget's chrome), since the whole point
|
||||
# of this style is the gradient look ordered_dither below then commits
|
||||
# to exact palette colors anyway; which literal hex this starts from
|
||||
# doesn't matter to the end result the way it would for a flat PIL fill.
|
||||
ACCENT_START = "#1c4fd6"
|
||||
ACCENT_END = "#6fa8ff"
|
||||
|
||||
|
||||
def _rgb_to_hex(rgb: tuple[int, int, int]) -> str:
|
||||
return "#%02x%02x%02x" % tuple(rgb)
|
||||
|
||||
@@ -104,7 +94,7 @@ def _rgb_to_hex(rgb: tuple[int, int, int]) -> str:
|
||||
def _darken_hex(rgb: tuple[int, int, int], factor: float = 0.75) -> str:
|
||||
"""A darker shade of `rgb` for a CSS gradient's second stop -- purely
|
||||
decorative (ordered_dither commits everything to exact palette colors
|
||||
regardless), same reasoning ACCENT_START/END's own comment gives."""
|
||||
regardless of which literal hex a gradient starts from)."""
|
||||
return _rgb_to_hex(tuple(max(0, round(c * factor)) for c in rgb))
|
||||
|
||||
|
||||
@@ -247,6 +237,26 @@ def ordered_dither(img: Image.Image, palette_rgb: list | None, amplitude: float
|
||||
return Image.fromarray(palette[idx].astype(np.uint8), "RGB")
|
||||
|
||||
|
||||
def ordered_dither_regions(rendered: Image.Image, palette_rgb: list | None, base_amplitude: float = 48.0,
|
||||
accent_regions: list[tuple[tuple[int, int, int, int], float]] = ()) -> Image.Image:
|
||||
"""Like `ordered_dither`, but lets specific rectangles (e.g. a themed
|
||||
header bar) dither at a higher amplitude than the rest of the widget.
|
||||
A single higher amplitude applied to a whole widget washes out pale
|
||||
content (a weather icon's white cloud body nearly disappeared in
|
||||
testing); dithering the base image at the safe default and only
|
||||
re-dithering an accent rect on top -- pasted back over the base --
|
||||
lets a header carry a rich, arbitrary accent hue (via denser
|
||||
stippling) without touching icon/text legibility elsewhere. Safe to
|
||||
do per-region for the same reason `ordered_dither` is safe per-widget
|
||||
(see its docstring): no cross-pixel error-diffusion term, so each
|
||||
region's result depends only on its own pixels."""
|
||||
base = ordered_dither(rendered, palette_rgb, amplitude=base_amplitude)
|
||||
for (x0, y0, x1, y1), amplitude in accent_regions:
|
||||
crop = rendered.crop((x0, y0, x1, y1))
|
||||
base.paste(ordered_dither(crop, palette_rgb, amplitude=amplitude), (x0, y0))
|
||||
return base
|
||||
|
||||
|
||||
# --- Weather "modern" style ----------------------------------------------
|
||||
|
||||
def _day_label(day_date: date) -> str:
|
||||
@@ -259,21 +269,25 @@ def _day_label(day_date: date) -> str:
|
||||
|
||||
|
||||
def build_current(entry: dict | None, target_w: int, target_h: int, palette_rgb: list | None = None,
|
||||
units: str = "fahrenheit", city_label: str = "") -> Image.Image:
|
||||
units: str = "fahrenheit", city_label: str = "", theme_name: str | None = None) -> Image.Image:
|
||||
"""HTML/CSS-rendered analogue of weather_render.build_current --
|
||||
same call signature, so app/widgets/weather.py can dispatch to
|
||||
either interchangeably. Returns an already-palette-exact RGB image
|
||||
(see ordered_dither)."""
|
||||
(see ordered_dither). No header/accent region here (just a centered
|
||||
icon+temp) -- theme-aware for font/radius only, plain ordered_dither
|
||||
(no ordered_dither_regions call)."""
|
||||
img = Image.new("RGB", (target_w, target_h), (255, 255, 255))
|
||||
if not entry:
|
||||
return img
|
||||
|
||||
theme = theme_tokens.resolve_theme(theme_name, "weather", palette_rgb)
|
||||
unit_suffix = "F" if units == "fahrenheit" else "C"
|
||||
icon_size = max(28, min(target_w, target_h) // 3)
|
||||
template = _jinja_env.get_template("weather_current.html.jinja")
|
||||
html = template.render(
|
||||
w=target_w, h=target_h, gutter=panel_style.GUTTER, radius=panel_style.CARD_RADIUS,
|
||||
font_dir=str(_FONT_DIR), emoji=CATEGORY_EMOJI.get(entry["category"], ""),
|
||||
w=target_w, h=target_h, gutter=panel_style.GUTTER, radius=theme["radius"],
|
||||
font_regular=theme["font_regular"], font_bold=theme["font_bold"],
|
||||
emoji=CATEGORY_EMOJI.get(entry["category"], ""),
|
||||
temp=round(entry["temp"]), unit_suffix=unit_suffix, city_label=city_label,
|
||||
icon_size=icon_size, temp_size=max(24, min(target_w, target_h) // 3),
|
||||
label_size=max(12, icon_size // 3),
|
||||
@@ -283,15 +297,18 @@ def build_current(entry: dict | None, target_w: int, target_h: int, palette_rgb:
|
||||
|
||||
|
||||
def build_daily(daily: dict[str, dict], target_w: int, target_h: int, palette_rgb: list | None = None,
|
||||
units: str = "fahrenheit", city_label: str = "") -> Image.Image:
|
||||
units: str = "fahrenheit", city_label: str = "", theme_name: str | None = None) -> Image.Image:
|
||||
"""HTML/CSS-rendered analogue of weather_render.build_daily -- same
|
||||
call signature. Returns an already-palette-exact RGB image (see
|
||||
ordered_dither)."""
|
||||
ordered_dither). Has a header bar -- dithered at the theme's
|
||||
accent_amplitude via ordered_dither_regions, richer than the rest of
|
||||
the widget (see that function's docstring for why)."""
|
||||
img = Image.new("RGB", (target_w, target_h), (255, 255, 255))
|
||||
days = list(daily.items())
|
||||
if not days:
|
||||
return img
|
||||
|
||||
theme = theme_tokens.resolve_theme(theme_name, "weather", palette_rgb)
|
||||
unit_suffix = "F" if units == "fahrenheit" else "C"
|
||||
header_h = max(28, min(target_w, target_h) // 8) if city_label else 0
|
||||
col_w = max(1, target_w // len(days))
|
||||
@@ -307,21 +324,26 @@ def build_daily(daily: dict[str, dict], target_w: int, target_h: int, palette_rg
|
||||
]
|
||||
template = _jinja_env.get_template("weather_daily.html.jinja")
|
||||
html = template.render(
|
||||
w=target_w, h=target_h, gutter=panel_style.GUTTER, radius=panel_style.CARD_RADIUS,
|
||||
font_dir=str(_FONT_DIR), city_label=city_label, header_h=header_h,
|
||||
title_size=max(14, header_h - 12), accent_start=ACCENT_START, accent_end=ACCENT_END,
|
||||
w=target_w, h=target_h, gutter=panel_style.GUTTER, radius=theme["radius"], shadow=theme["shadow"],
|
||||
font_regular=theme["font_regular"], font_bold=theme["font_bold"],
|
||||
city_label=city_label, header_h=header_h,
|
||||
title_size=max(14, header_h - 12), accent_start=theme["accent_hex"], accent_end=theme["accent_hex_dark"],
|
||||
days=day_entries, icon_size=icon_size, label_size=max(12, icon_size // 2),
|
||||
unit_suffix=unit_suffix,
|
||||
)
|
||||
rendered = render_html_to_image(html, target_w, target_h)
|
||||
return ordered_dither(rendered, palette_rgb)
|
||||
if header_h <= 0:
|
||||
return ordered_dither(rendered, palette_rgb)
|
||||
gutter = panel_style.GUTTER
|
||||
accent_rect = (gutter, gutter, target_w - gutter, gutter + header_h)
|
||||
return ordered_dither_regions(rendered, palette_rgb, accent_regions=[(accent_rect, theme["accent_amplitude"])])
|
||||
|
||||
|
||||
SUPPORTED_MODES = ("current", "daily")
|
||||
|
||||
|
||||
def build(mode: str, data, target_w: int, target_h: int, palette_rgb: list | None = None,
|
||||
units: str = "fahrenheit", city_label: str = "") -> Image.Image:
|
||||
units: str = "fahrenheit", city_label: str = "", theme_name: str | None = None) -> Image.Image:
|
||||
"""Dispatches to build_current/build_daily -- mirrors weather_render.
|
||||
build()'s signature (minus interval_hours, which no modern-style mode
|
||||
uses) so app/widgets/weather.py and the weather preview endpoint can
|
||||
@@ -329,12 +351,13 @@ def build(mode: str, data, target_w: int, target_h: int, palette_rgb: list | Non
|
||||
SUPPORTED_MODES -- callers are expected to have already fallen back to
|
||||
weather_render.build() for hourly/multi_city (see weather.py)."""
|
||||
if mode == "current":
|
||||
return build_current(data, target_w, target_h, palette_rgb, units, city_label)
|
||||
return build_daily(data, target_w, target_h, palette_rgb, units, city_label)
|
||||
return build_current(data, target_w, target_h, palette_rgb, units, city_label, theme_name)
|
||||
return build_daily(data, target_w, target_h, palette_rgb, units, city_label, theme_name)
|
||||
|
||||
|
||||
def render_weather_preview_png(mode: str, data, orientation: str, palette_rgb: list | None,
|
||||
units: str = "fahrenheit", city_label: str = "") -> bytes:
|
||||
units: str = "fahrenheit", city_label: str = "",
|
||||
theme_name: str | None = None) -> bytes:
|
||||
"""Modern-style analogue of weather_render.render_weather_preview_png
|
||||
-- same browser-viewable-PNG convention every other widget's preview
|
||||
endpoint uses. build()'s output is already palette-exact (see
|
||||
@@ -343,7 +366,7 @@ def render_weather_preview_png(mode: str, data, orientation: str, palette_rgb: l
|
||||
from .image_pipeline import _quantize, _png_bytes, logical_render_size
|
||||
|
||||
target_w, target_h = logical_render_size(orientation)
|
||||
img = build(mode, data, target_w, target_h, palette_rgb, units, city_label)
|
||||
img = build(mode, data, target_w, target_h, palette_rgb, units, city_label, theme_name)
|
||||
quantized = _quantize(img, palette_rgb, dither_strength=1.0)
|
||||
return _png_bytes(quantized)
|
||||
|
||||
@@ -361,13 +384,16 @@ def _battery_sizes(target_w: int, target_h: int, num_lines: int, scale: float) -
|
||||
|
||||
|
||||
def build_battery(percent: int, lines: list[str], target_w: int, target_h: int,
|
||||
palette_rgb: list | None = None) -> Image.Image:
|
||||
palette_rgb: list | None = None, theme_name: str | None = None) -> Image.Image:
|
||||
"""HTML/CSS-rendered analogue of widgets/battery.py's classic PIL
|
||||
drawing -- same icon+percent+caption-lines shape, `lines` already
|
||||
resolved by the caller (widgets/battery.py's _lines_for(), shared
|
||||
with the classic path so the estimate/age formatting only lives in
|
||||
one place). Returns an already-palette-exact RGB image (see
|
||||
ordered_dither).
|
||||
ordered_dither). Theme-aware for font/radius only -- the charge-level
|
||||
fill_color below is a functional status signal (not a style choice)
|
||||
and is never touched by a theme, and there's no header/accent region
|
||||
to dither richer via ordered_dither_regions.
|
||||
|
||||
Shrinks icon/text sizes together (in 0.05 steps down to 0.3x) until
|
||||
the whole stack actually fits the available height -- the classic
|
||||
@@ -392,6 +418,7 @@ def build_battery(percent: int, lines: list[str], target_w: int, target_h: int,
|
||||
num_lines = len(lines)
|
||||
sizes = _battery_sizes(target_w, target_h, num_lines, scale)
|
||||
|
||||
theme = theme_tokens.resolve_theme(theme_name, "battery", palette_rgb)
|
||||
fill_color = panel_style.battery_fill_color(percent, palette_rgb)
|
||||
icon_h = sizes["icon_h"]
|
||||
icon_w = int(icon_h * 1.8)
|
||||
@@ -399,8 +426,8 @@ def build_battery(percent: int, lines: list[str], target_w: int, target_h: int,
|
||||
nub_w = max(3, icon_w // 10)
|
||||
template = _jinja_env.get_template("battery.html.jinja")
|
||||
html = template.render(
|
||||
w=target_w, h=target_h, gutter=panel_style.GUTTER, radius=panel_style.CARD_RADIUS,
|
||||
font_dir=str(_FONT_DIR), percent=percent, lines=lines,
|
||||
w=target_w, h=target_h, gutter=panel_style.GUTTER, radius=theme["radius"],
|
||||
font_regular=theme["font_regular"], font_bold=theme["font_bold"], percent=percent, lines=lines,
|
||||
icon_w=icon_w, icon_h=icon_h, icon_radius=icon_h // 6, stroke=stroke,
|
||||
fill_pct=max(0, min(100, percent)), fill_radius=max(0, icon_h // 6 - stroke),
|
||||
fill_color=_rgb_to_hex(fill_color), fill_color_dark=_darken_hex(fill_color),
|
||||
@@ -413,7 +440,8 @@ def build_battery(percent: int, lines: list[str], target_w: int, target_h: int,
|
||||
|
||||
# --- Text "modern" style ---------------------------------------------------
|
||||
|
||||
def build_text(cfg, target_w: int, target_h: int, palette_rgb: list | None = None) -> Image.Image:
|
||||
def build_text(cfg, target_w: int, target_h: int, palette_rgb: list | None = None,
|
||||
theme_name: str | None = None) -> Image.Image:
|
||||
"""HTML/CSS-rendered analogue of widgets/text.py's classic PIL
|
||||
drawing. Reuses widgets/text.py's own `_fit()` for the one piece of
|
||||
logic CSS has no native equivalent for (shrink-to-fit sizing) --
|
||||
@@ -425,7 +453,15 @@ def build_text(cfg, target_w: int, target_h: int, palette_rgb: list | None = Non
|
||||
algorithms can disagree on exact break points, an acceptable
|
||||
approximation since this style only needs to look good and fit
|
||||
reasonably, not be pixel-identical to classic. Returns an already-
|
||||
palette-exact RGB image (see ordered_dither)."""
|
||||
palette-exact RGB image (see ordered_dither).
|
||||
|
||||
theme_name is accepted (every modern-style build_* function takes
|
||||
one, threaded uniformly from frame.theme) but deliberately unused --
|
||||
the text widget's own font_family is a per-widget, user-authored
|
||||
choice (see widgets/text.py's module docstring), same carve-out
|
||||
reasoning as run-level colors; a frame theme overriding it would
|
||||
silently undo an explicit user choice. text.html.jinja also has no
|
||||
card chrome (no radius/shadow) for a theme to touch."""
|
||||
from PIL import ImageDraw
|
||||
|
||||
from . import widgets # local import: heavy-ish, and only "modern" text needs it
|
||||
@@ -459,15 +495,19 @@ def build_text(cfg, target_w: int, target_h: int, palette_rgb: list | None = Non
|
||||
# --- Tasks "modern" style ---------------------------------------------------
|
||||
|
||||
def build_tasks(tasks: list[dict], target_w: int, target_h: int, palette_rgb: list | None = None,
|
||||
title: str = "Tasks") -> Image.Image:
|
||||
title: str = "Tasks", theme_name: str | None = None) -> Image.Image:
|
||||
"""HTML/CSS-rendered analogue of calendar_render._build_tasks --
|
||||
same header+checklist shape. Reuses calendar_render's own
|
||||
_event_colors/_fmt_task_due (the exact color-dedup/due-date-format
|
||||
logic the classic renderer uses) so a task's color chip/due string
|
||||
matches classic style exactly; only the drawing differs. Returns an
|
||||
already-palette-exact RGB image (see ordered_dither)."""
|
||||
matches classic style exactly; only the drawing differs -- and a
|
||||
theme's accent never touches those per-owner chip colors (identity-
|
||||
coding, not style). Has a header bar -- dithered at the theme's
|
||||
accent_amplitude via ordered_dither_regions. Returns an already-
|
||||
palette-exact RGB image (see ordered_dither)."""
|
||||
from .calendar_render import _event_colors, _fmt_task_due
|
||||
|
||||
theme = theme_tokens.resolve_theme(theme_name, "tasks", palette_rgb)
|
||||
header_h = max(28, min(target_w, target_h) // 8)
|
||||
body_size = max(11, min(target_w, target_h) // 20)
|
||||
row_h = body_size + 14
|
||||
@@ -491,35 +531,40 @@ def build_tasks(tasks: list[dict], target_w: int, target_h: int, palette_rgb: li
|
||||
|
||||
template = _jinja_env.get_template("tasks.html.jinja")
|
||||
html = template.render(
|
||||
w=target_w, h=target_h, gutter=panel_style.GUTTER, radius=panel_style.CARD_RADIUS,
|
||||
font_dir=str(_FONT_DIR), title=title, header_h=header_h, title_size=max(14, header_h - 12),
|
||||
accent_start=_rgb_to_hex(panel_style.ink(palette_rgb, panel_style.THEME_TASKS)),
|
||||
accent_end=_rgb_to_hex(panel_style.ink(palette_rgb, panel_style.THEME_TASKS)),
|
||||
w=target_w, h=target_h, gutter=panel_style.GUTTER, radius=theme["radius"], shadow=theme["shadow"],
|
||||
font_regular=theme["font_regular"], font_bold=theme["font_bold"],
|
||||
title=title, header_h=header_h, title_size=max(14, header_h - 12),
|
||||
accent_start=theme["accent_hex"], accent_end=theme["accent_hex_dark"],
|
||||
rows=rows, more_count=more_count, row_h=row_h, box_size=box_size, body_size=body_size,
|
||||
)
|
||||
rendered = render_html_to_image(html, target_w, target_h)
|
||||
return ordered_dither(rendered, palette_rgb)
|
||||
gutter = panel_style.GUTTER
|
||||
accent_rect = (gutter, gutter, target_w - gutter, gutter + header_h)
|
||||
return ordered_dither_regions(rendered, palette_rgb, accent_regions=[(accent_rect, theme["accent_amplitude"])])
|
||||
|
||||
|
||||
# --- Static image / whiteboard "modern" style (shared) ---------------------
|
||||
|
||||
def build_framed_image(composed: Image.Image, target_w: int, target_h: int,
|
||||
palette_rgb: list | None = None) -> Image.Image:
|
||||
palette_rgb: list | None = None, theme_name: str | None = None,
|
||||
widget_kind: str = "static") -> Image.Image:
|
||||
"""Wraps an already-composed image (static_image.py/whiteboard.py's
|
||||
own compose_into() output, exactly target_w x target_h, already
|
||||
cropped/fit per that widget's own display_mode) in a rounded-corner,
|
||||
shadowed card -- the first visual chrome either widget type has ever
|
||||
had (both currently draw with zero chrome of their own). Returns an
|
||||
already-palette-exact RGB image (see ordered_dither)."""
|
||||
had (both currently draw with zero chrome of their own). Theme-aware
|
||||
for radius/shadow only -- no text/header content to accent or font.
|
||||
Returns an already-palette-exact RGB image (see ordered_dither)."""
|
||||
import base64
|
||||
|
||||
theme = theme_tokens.resolve_theme(theme_name, widget_kind, palette_rgb)
|
||||
buf = io.BytesIO()
|
||||
composed.convert("RGB").save(buf, format="PNG")
|
||||
image_b64 = base64.b64encode(buf.getvalue()).decode("ascii")
|
||||
|
||||
template = _jinja_env.get_template("framed_image.html.jinja")
|
||||
html = template.render(
|
||||
w=target_w, h=target_h, gutter=panel_style.GUTTER, radius=panel_style.CARD_RADIUS,
|
||||
w=target_w, h=target_h, gutter=panel_style.GUTTER, radius=theme["radius"], shadow=theme["shadow"],
|
||||
image_b64=image_b64,
|
||||
)
|
||||
rendered = render_html_to_image(html, target_w, target_h)
|
||||
|
||||
Reference in New Issue
Block a user