Hermes
fe1c06b306
* Indoor: 5 Sensoren (1x Main + 4x NAModule4) prominent mit Tag, Temp, CO2-Bar * Outdoor: Big-Temp + 12h-Verlaufsgraph + Min/Max/Luftfeuchte * Wind/Regen: je mit Mini-Verlauf + 1h/24h-Bars * Forecast: 3 Tage mit Min/Max + Regen-Bar * Batterie-Indikatoren mit %-Anzeige an Aussen, Wind, Regen und allen 5 Indoor-Sensoren * CO2-Bars mit ppm-Wert + Grün/Gelb/Rot-Schwellen * Sans-Schrift only, WarmNews-Farbpalette (warm-weiss, Tinte-schwarz, Akzent-Farben) * Subtile Box-Rahmen + Accent-Strips für visuelle Trennung designbase.py neu hinzugefügt als Template-Modul. tools/netatmo_auth.py: Auth-Flow leicht angepasst (Redirect-URI auf Pi-IP statt localhost).
557 lines
20 KiB
Python
557 lines
20 KiB
Python
"""DesignBase — Plugin Design Template / Schablone.
|
|
|
|
Dieses Modul ist KEIN eigenständiges Widget, sondern eine SAMMLUNG
|
|
von Design-Konzepten, Layout-Helfern und Theme-Definitionen,
|
|
die als Vorlage für alle anderen Plugin-Renderer dienen.
|
|
|
|
ANATOMIE EINES DESIGN-TEMPLATES
|
|
=================================
|
|
|
|
Jedes Plugin-render() folgt diesem Schema:
|
|
|
|
def render(self, draw, fonts, x, y, w, h):
|
|
theme = self._theme() # Theme-Objekt mit Farben + Schriften
|
|
data = self.fetch() # Daten holen
|
|
if "_error" in data:
|
|
render_error_banner(...)
|
|
return
|
|
layout = self._pick_layout(w, h) # Layout-Strategie wählen
|
|
self._render_header(draw, theme, x, y, w, header_h)
|
|
self._render_body(draw, theme, data, x, body_y, w, body_h, layout)
|
|
if self._show_footer(w, h):
|
|
self._render_footer(draw, theme, data, x, y+h-footer_h, w, footer_h)
|
|
|
|
Die 4 LAYOUT-STRATEGIEN
|
|
========================
|
|
|
|
is_small (1x1): Eine einzige große Zahl / ein Icon
|
|
is_wide (4x1/2x1): Horizontale Teilung in 2-3 Spalten
|
|
is_tall (1x4/1x2): Vertikale Teilung in Zeilen
|
|
standard (2x2+): Header + Content + Footer (oder Karten)
|
|
|
|
Die 4 THEMES
|
|
=============
|
|
|
|
THEME_LIGHT — Weiß, schwarz, eine Akzentfarbe (z.B. Netatmo: blau)
|
|
THEME_DARK — Fast schwarz, helle Farben auf dunklem Grund
|
|
THEME_RETRO — Gelb/Orange-Schwarz (80er-Terminal-Feeling)
|
|
THEME_MAG — Minimal, typografisch, viel Weißraum
|
|
|
|
Farben werden IMMER über theme.xxx bezogen, NIEMALS direkt als RGB-Tuple.
|
|
Das erlaubt komplettes Umstyling ohne den Renderer-Code anzufassen.
|
|
|
|
Farben-Schema pro Theme (Palette: FG, BG, ACCENT, OK, WARN, ALERT, INFO):
|
|
|
|
THEME_LIGHT: BG=WHITE, FG=BLACK, ACCENT=BLUE, OK=GREEN, WARN=YELLOW, ALERT=RED
|
|
THEME_DARK: BG=BLACK, FG=WHITE, ACCENT=CYAN, OK=GREEN, WARN=ORANGE,ALERT=RED
|
|
THEME_RETRO: BG=BLACK, FG=YELLOW,ACCENT=ORANGE, OK=GREEN, WARN=YELLOW, ALERT=RED
|
|
THEME_MAG: BG=WHITE, FG=BLACK, ACCENT=ORANGE, OK=GREEN, WARN=ORANGE, ALERT=BLUE
|
|
|
|
Beispiel-Implementierung: widgets/netatmo.py (theme='light', accent='blue')
|
|
Beispiel-Implementierung: widgets/weather.py (theme='light', accent='orange')
|
|
Beispiel-Implementierung: widgets/system.py (theme='light', accent='green')
|
|
"""
|
|
from __future__ import annotations
|
|
from dataclasses import dataclass, field
|
|
from typing import Literal
|
|
|
|
# Palette-Aliase (für direkten Zugriff in Templates)
|
|
# noqa: E402 — diese Imports funktionieren weil plugins/ im Python-Path liegt
|
|
from palette import (
|
|
FG, BG, WHITE, BLACK, GREEN, BLUE, RED, YELLOW, ORANGE,
|
|
INFO, OK, WARN, ALERT, ACCENT,
|
|
measure, fit_font, centered_text, hbar, parse_thresholds,
|
|
is_small, is_wide, is_tall,
|
|
)
|
|
|
|
# noqa: E402
|
|
from plugins.base import Widget, render_error_banner
|
|
|
|
|
|
# ============================================================================
|
|
# THEME DEFINITIONS
|
|
# ============================================================================
|
|
|
|
ThemeName = Literal["light", "dark", "retro", "mag"]
|
|
LayoutName = Literal["small", "wide", "tall", "standard"]
|
|
|
|
|
|
@dataclass
|
|
class Theme:
|
|
"""Alle visuellen Eigenschaften eines Designs.
|
|
|
|
Ein Theme-Objekt wird in render() erzeugt und an alle
|
|
_render_*-Methoden weitergegeben. Nie direkt Farbwerte hardcoden.
|
|
"""
|
|
name: ThemeName
|
|
bg: tuple[int, int, int] # Hintergrund
|
|
fg: tuple[int, int, int] # Primärtext
|
|
accent: tuple[int, int, int] # Akzentfarbe (Platzierung je nach Theme)
|
|
ok: tuple[int, int, int]
|
|
warn: tuple[int, int, int]
|
|
alert: tuple[int, int, int]
|
|
info: tuple[int, int, int]
|
|
header_font_key: str = "24" # Font-Schlüssel für Headlines
|
|
label_font_key: str = "20" # Font-Schlüssel für Modul-Labels
|
|
body_font_key: str = "32" # Font-Schlüssel für Hauptwerte
|
|
mono_font_key: str = "20" # Font-Schlüssel für Metadaten
|
|
pad: int = 8 # Innenabstand
|
|
border_w: int = 2 # Rahmendicke
|
|
corner_r: int = 0 # Eckenradius (0 = scharf)
|
|
|
|
# ---- Farb-Helfer ----
|
|
def temp_color(self, t: float | None) -> tuple[int, int, int]:
|
|
"""Temperaturanzeige: kalt→info, warm→accent, heiß→alert."""
|
|
if t is None:
|
|
return self.fg
|
|
if t >= 30:
|
|
return self.alert
|
|
if t >= 22:
|
|
return self.accent
|
|
if t <= 5:
|
|
return self.info
|
|
if t <= 12:
|
|
return self.info
|
|
return self.fg
|
|
|
|
def value_color(self, value: float, warn_at: float, alert_at: float) -> tuple[int, int, int]:
|
|
"""Ampel-Helfer: value + Schwellen → passende Farbe."""
|
|
if value >= alert_at:
|
|
return self.alert
|
|
if value >= warn_at:
|
|
return self.warn
|
|
return self.ok
|
|
|
|
def text(self, draw, text: str, x: int, y: int,
|
|
font_key: str | None = None, color=None, max_w: int | None = None):
|
|
"""Short-hand: Text zeichnen mit Theme-Farbe."""
|
|
font = draw.font if hasattr(draw, 'font') else None
|
|
# Actual implementation uses fonts dict from render scope
|
|
pass # see render helpers below
|
|
|
|
|
|
# Vordefinierte Themes
|
|
THEMES: dict[ThemeName, Theme] = {
|
|
"light": Theme(
|
|
name="light",
|
|
bg=WHITE, fg=BLACK,
|
|
accent=BLUE, ok=GREEN, warn=YELLOW, alert=RED, info=BLUE,
|
|
header_font_key="24", label_font_key="20",
|
|
body_font_key="32", mono_font_key="20",
|
|
pad=8, border_w=2, corner_r=0,
|
|
),
|
|
"dark": Theme(
|
|
name="dark",
|
|
bg=BLACK, fg=WHITE,
|
|
accent=(0, 200, 220), ok=GREEN, warn=ORANGE, alert=RED, info=(0, 180, 255),
|
|
header_font_key="24", label_font_key="20",
|
|
body_font_key="32", mono_font_key="20",
|
|
pad=8, border_w=2, corner_r=0,
|
|
),
|
|
"retro": Theme(
|
|
name="retro",
|
|
bg=BLACK, fg=YELLOW,
|
|
accent=ORANGE, ok=GREEN, warn=YELLOW, alert=RED, info=ORANGE,
|
|
header_font_key="24", label_font_key="20",
|
|
body_font_key="32", mono_font_key="20",
|
|
pad=8, border_w=2, corner_r=0,
|
|
),
|
|
"mag": Theme(
|
|
name="mag",
|
|
bg=WHITE, fg=BLACK,
|
|
accent=ORANGE, ok=GREEN, warn=ORANGE, alert=RED, info=BLUE,
|
|
header_font_key="24", label_font_key="20",
|
|
body_font_key="32", mono_font_key="20",
|
|
pad=16, border_w=1, corner_r=0,
|
|
),
|
|
}
|
|
|
|
|
|
# ============================================================================
|
|
# LAYOUT HELPERS
|
|
# ============================================================================
|
|
|
|
def pick_layout(w: int, h: int) -> LayoutName:
|
|
"""Wähle Layout-Strategie basierend auf Slot-Größe.
|
|
|
|
Reihenfolge ist wichtig: is_wide/is_tall VOR is_small prüfen,
|
|
weil is_small zu eager matcht (w<280 or h<180).
|
|
"""
|
|
if is_wide(w, h):
|
|
return "wide"
|
|
if is_tall(w, h):
|
|
return "tall"
|
|
if is_small(w, h):
|
|
return "small"
|
|
return "standard"
|
|
|
|
|
|
def header_height(layout: LayoutName) -> int:
|
|
"""Höhe des Header-Bereichs (Label + Titel)."""
|
|
return 32 if layout == "standard" else 28
|
|
|
|
|
|
def footer_height(layout: LayoutName) -> int:
|
|
"""Höhe des Footer-Bereichs (Metadaten, Timestamp)."""
|
|
if layout == "small":
|
|
return 0
|
|
if layout in ("wide", "tall"):
|
|
return 20
|
|
return 18
|
|
|
|
|
|
# ============================================================================
|
|
# RENDER HELPERS (Theme-bewusst)
|
|
# ============================================================================
|
|
|
|
def th_text(draw, fonts, theme: Theme, text: str, x: int, y: int,
|
|
font_key: str | None = None, color=None, max_w: int | None = None):
|
|
"""Text mit Theme-Default zeichnen."""
|
|
key = font_key or theme.header_font_key
|
|
font = fonts.get(key) or fonts.get("default")
|
|
c = color if color is not None else theme.fg
|
|
draw.text((x, y), text, font=font, fill=c)
|
|
|
|
|
|
def th_centered(draw, fonts, theme: Theme, text: str,
|
|
x: int, y: int, w: int, h: int,
|
|
font_key: str | None = None, color=None):
|
|
"""Text in Box zentrieren mit Theme-Defaults."""
|
|
key = font_key or theme.body_font_key
|
|
font = fonts.get(key) or fonts.get("default")
|
|
c = color if color is not None else theme.fg
|
|
centered_text(draw, text, x, y, w, h, font, c)
|
|
|
|
|
|
def th_rect(draw, theme: Theme, x: int, y: int, w: int, h: int,
|
|
fill=None, outline=None, width: int = 1):
|
|
"""Rechteck mit Theme-Defaults."""
|
|
f = fill if fill is not None else None
|
|
o = outline if outline is not None else theme.fg
|
|
draw.rectangle((x, y, x + w - 1, y + h - 1),
|
|
fill=f, outline=o, width=width)
|
|
|
|
|
|
def th_header_bar(draw, fonts, theme: Theme,
|
|
x: int, y: int, w: int, h: int,
|
|
label: str, value: str = "", value_color=None):
|
|
"""Header-Leiste: links Label, rechts optionaler Wert.
|
|
|
|
Layout: [LABEL] [VALUE]
|
|
Farbe: accent-Bg fg
|
|
"""
|
|
pad = theme.pad
|
|
# Hintergrund links: Label-Bereich
|
|
label_w = min(measure(draw, label, fonts.get(theme.label_font_key) or fonts.get("default"))[0] + pad * 2, w // 2)
|
|
draw.rectangle((x, y, x + label_w, y + h - 1), fill=theme.accent)
|
|
draw.text((x + pad, y + (h - 20) // 2), label,
|
|
font=fonts.get(theme.label_font_key) or fonts.get("default"),
|
|
fill=theme.bg)
|
|
# Wert rechts
|
|
if value:
|
|
vc = value_color if value_color is not None else theme.fg
|
|
font_v = fonts.get(theme.label_font_key) or fonts.get("default")
|
|
vw, _ = measure(draw, value, font_v)
|
|
draw.text((x + w - vw - pad, y + (h - 20) // 2), value, font=font_v, fill=vc)
|
|
|
|
|
|
def th_big_value(draw, fonts, theme: Theme,
|
|
x: int, y: int, w: int, h: int,
|
|
value: str, unit: str = "",
|
|
color=None, align: str = "left"):
|
|
"""Die große zentrale Kennzahl (z.B. "22°", "45%", "12.4 km").
|
|
|
|
Der Wert wird so groß wie möglich dargestellt, das Unit darunter oder
|
|
daneben in kleinerer Schrift.
|
|
"""
|
|
c = color if color is not None else theme.fg
|
|
candidates = [theme.body_font_key, "80", "60", "48", "36", "28", "24"]
|
|
font_v = fit_font(draw, value, fonts, w - 2 * theme.pad,
|
|
h - 2 * theme.pad, candidates=candidates)
|
|
|
|
if align == "center":
|
|
th_centered(draw, fonts, theme, value, x, y, w, h,
|
|
font_key=None, color=c)
|
|
else:
|
|
# Linksbündig, groß
|
|
tw, th_f = measure(draw, value, font_v)
|
|
draw.text((x + theme.pad, y + max(0, (h - th_f) // 2)),
|
|
value, font=font_v, fill=c)
|
|
|
|
# Unit darunter oder daneben
|
|
if unit:
|
|
unit_font = fonts.get(theme.mono_font_key) or fonts.get("default")
|
|
if align == "center":
|
|
# Unter dem Wert
|
|
uw, uh = measure(draw, unit, unit_font)
|
|
draw.text((x + max(0, (w - uw) // 2), y + h // 2 + 4), unit,
|
|
font=unit_font, fill=theme.fg)
|
|
else:
|
|
uw, uh = measure(draw, unit, unit_font)
|
|
draw.text((x + theme.pad + tw + 6,
|
|
y + max(0, (h - uh) // 2)),
|
|
unit, font=unit_font, fill=theme.fg)
|
|
|
|
|
|
def th_mini_bar(draw, fonts, theme: Theme,
|
|
x: int, y: int, w: int, h: int,
|
|
pct: float,
|
|
thresholds: list | None = None,
|
|
gradient: bool = True):
|
|
"""Kompakter Fortschrittsbalken mit Theme-Styling.
|
|
|
|
thresholds: [(pct, color), ...] — z.B. [(50, ok), (80, warn), (100, alert)]
|
|
gradient: True = zeigt alle Farbstufen gleichzeitig (e-Paper-nativ)
|
|
"""
|
|
if thresholds is None:
|
|
thresholds = [(50, theme.ok), (80, theme.warn), (100, theme.alert)]
|
|
hbar(draw, x, y, w, h, pct,
|
|
thresholds=thresholds, gradient=gradient)
|
|
|
|
|
|
def th_divider(draw, theme: Theme, x: int, y: int, w: int,
|
|
style: str = "solid"):
|
|
"""Horizontale Trennlinie."""
|
|
if style == "solid":
|
|
draw.line((x, y, x + w, y), fill=theme.fg, width=1)
|
|
elif style == "dashed":
|
|
# Dashed: 4px dash, 4px gap
|
|
for dx in range(0, w, 8):
|
|
draw.line((x + dx, y, min(x + dx + 4, x + w), y),
|
|
fill=theme.fg, width=1)
|
|
elif style == "accent":
|
|
draw.line((x, y, x + w, y), fill=theme.accent, width=2)
|
|
|
|
|
|
def th_corner_marker(draw, theme: Theme, x: int, y: int, size: int = 8):
|
|
"""Kleiner Eck-Marker (L-Form) oben-links — markiert den Slot-Ursprung.
|
|
|
|
Optionaler visueller Anker der zeigt: "hier beginnt dieses Widget".
|
|
"""
|
|
draw.line((x, y, x + size, y), fill=theme.accent, width=2)
|
|
draw.line((x, y, x, y + size), fill=theme.accent, width=2)
|
|
|
|
|
|
# ============================================================================
|
|
# LAYOUT PATTERN TEMPLATES
|
|
# ============================================================================
|
|
|
|
def layout_1x1(draw, fonts, theme: Theme,
|
|
value: str, unit: str = "",
|
|
label: str = "", color=None):
|
|
"""ONE BIG NUMBER — für 1x1 Slots.
|
|
|
|
Große zentrierte Zahl, darunter kleines Label.
|
|
Beispiel: Gmail ungelesen, Strava Jahr-km, System CPU%
|
|
"""
|
|
pad = theme.pad
|
|
# Rahmen
|
|
th_rect(draw, theme, x=0, y=0, w=200, h=120,
|
|
outline=theme.fg, width=theme.border_w)
|
|
|
|
c = color if color is not None else theme.fg
|
|
font_val = fit_font(draw, value, fonts, 200 - 2 * pad, 80,
|
|
candidates=[theme.body_font_key, "80", "60", "48"])
|
|
th_centered(draw, fonts, theme, value,
|
|
x=0, y=10, w=200, h=90, color=c)
|
|
|
|
if label:
|
|
font_l = fonts.get(theme.mono_font_key) or fonts.get("default")
|
|
lw = measure(draw, label, font_l)[0]
|
|
draw.text(((200 - lw) // 2, 96), label, font=font_l, fill=theme.fg)
|
|
|
|
|
|
def layout_wide_strip(draw, fonts, theme: Theme,
|
|
cols: list[dict],
|
|
header_h: int = 30):
|
|
"""WIDE STRIP — für 4x1 / 2x1 Slots.
|
|
|
|
Horizontale Teilung in gleichbreite Spalten.
|
|
Jede Spalte: [LABEL] über [VALUE] über [UNIT]
|
|
|
|
cols = [
|
|
{"label": "TEMP", "value": "22°", "unit": "", "color": theme.temp_color(22)},
|
|
{"label": "HUM", "value": "65%", "unit": "Feuchte", "color": theme.ok},
|
|
{"label": "CO₂", "value": "820", "unit": "ppm", "color": theme.warn},
|
|
]
|
|
"""
|
|
n = len(cols)
|
|
col_w = 200 // n if n > 0 else 200
|
|
pad = theme.pad
|
|
|
|
for i, col in enumerate(cols):
|
|
cx = i * col_w
|
|
c = col.get("color", theme.fg)
|
|
|
|
# Label
|
|
lbl = col.get("label", "")
|
|
if lbl:
|
|
draw.text((cx + pad, 4), lbl,
|
|
font=fonts.get(theme.label_font_key) or fonts.get("default"),
|
|
fill=theme.accent)
|
|
|
|
# Value (groß)
|
|
val = col.get("value", "—")
|
|
font_v = fit_font(draw, val, fonts, col_w - 2 * pad, header_h + 30,
|
|
candidates=[theme.body_font_key, "48", "36", "28"])
|
|
draw.text((cx + pad, header_h), val, font=font_v, fill=c)
|
|
|
|
# Unit (klein darunter)
|
|
unit = col.get("unit", "")
|
|
if unit:
|
|
font_u = fonts.get(theme.mono_font_key) or fonts.get("default")
|
|
draw.text((cx + pad, header_h + font_v.size + 2),
|
|
unit, font=font_u, fill=theme.fg)
|
|
|
|
|
|
def layout_card_grid(draw, fonts, theme: Theme,
|
|
cards: list[dict],
|
|
x: int, y: int, w: int, h: int,
|
|
cols: int = 2):
|
|
"""CARD GRID — für 2x2+ Slots.
|
|
|
|
Teil den verfügbaren Raum in gleichmäßige Karten auf.
|
|
Jede Karte hat: Border + Header-Akzent + Label + Wert + optional Bar.
|
|
|
|
cards = [
|
|
{
|
|
"label": "🏠 Indoor",
|
|
"value": "22.5°",
|
|
"unit": "",
|
|
"color": theme.temp_color(22.5),
|
|
"bar": {"pct": 45, "thresholds": [...], "gradient": True},
|
|
"meta": "min 18° / max 26°",
|
|
},
|
|
...
|
|
]
|
|
"""
|
|
pad = theme.pad
|
|
rows = (len(cards) + cols - 1) // cols
|
|
card_w = (w - (cols + 1) * pad) // cols
|
|
card_h = (h - (rows + 1) * pad) // rows
|
|
|
|
for i, card in enumerate(cards):
|
|
row = i // cols
|
|
col = i % cols
|
|
cx = x + pad + col * (card_w + pad)
|
|
cy = y + pad + row * (card_h + pad)
|
|
|
|
# Border
|
|
th_rect(draw, theme, cx, cy, card_w, card_h,
|
|
outline=theme.fg, width=theme.border_w)
|
|
|
|
# Label-Balken oben
|
|
lbl = card.get("label", "")
|
|
if lbl:
|
|
lbl_h = 24
|
|
draw.rectangle((cx, cy, cx + card_w - 1, cy + lbl_h),
|
|
fill=theme.accent)
|
|
font_l = fonts.get(theme.label_font_key) or fonts.get("default")
|
|
draw.text((cx + pad, cy + 4), lbl, font=font_l, fill=theme.bg)
|
|
|
|
# Value
|
|
inner_y = cy + 28
|
|
inner_h = card_h - 30
|
|
val = card.get("value", "—")
|
|
c = card.get("color", theme.fg)
|
|
font_v = fit_font(draw, val, fonts, card_w - 2 * pad,
|
|
inner_h // 2,
|
|
candidates=[theme.body_font_key, "48", "36", "28"])
|
|
draw.text((cx + pad, inner_y), val, font=font_v, fill=c)
|
|
|
|
# Bar (optional)
|
|
bar = card.get("bar")
|
|
if bar and inner_h > 60:
|
|
bar_pct = bar.get("pct", 0)
|
|
bar_thresholds = bar.get("thresholds") or [
|
|
(50, theme.ok), (80, theme.warn), (100, theme.alert)]
|
|
bar_y = cy + card_h - 28
|
|
th_mini_bar(draw, fonts, theme,
|
|
cx + pad, bar_y, card_w - 2 * pad, 12,
|
|
bar_pct, bar_thresholds, bar.get("gradient", True))
|
|
|
|
# Meta (optional)
|
|
meta = card.get("meta", "")
|
|
if meta:
|
|
font_m = fonts.get(theme.mono_font_key) or fonts.get("default")
|
|
draw.text((cx + pad, cy + card_h - 18), meta,
|
|
font=font_m, fill=theme.fg)
|
|
|
|
|
|
def layout_poster(draw, fonts, theme: Theme,
|
|
label: str, value: str, unit: str = "",
|
|
sub: str = "", color=None):
|
|
"""POSTER — eine einzelne Aussage, maximal typografisch.
|
|
|
|
Für 2x2+ Slots die WIRKLICH nur eine Zahl zeigen wollen.
|
|
Beispiel: Eine gigantische Uhrzeit, eine große Temperatur.
|
|
"""
|
|
pad = theme.pad
|
|
c = color if color is not None else theme.fg
|
|
|
|
# Dünne Rahmenlinie
|
|
th_rect(draw, theme, x=0, y=0, w=400, h=240,
|
|
outline=theme.accent, width=1)
|
|
|
|
# Label oben links
|
|
if label:
|
|
font_l = fonts.get(theme.label_font_key) or fonts.get("default")
|
|
draw.text((pad, pad), label, font=font_l, fill=theme.accent)
|
|
|
|
# Value zentriert, RIESIG
|
|
font_v = fit_font(draw, value, fonts, 400 - 2 * pad, 180,
|
|
candidates=["80", "60", "48", theme.body_font_key])
|
|
tw, th_f = measure(draw, value, font_v)
|
|
draw.text(((400 - tw) // 2, 40 + max(0, (180 - th_f) // 2)),
|
|
value, font=font_v, fill=c)
|
|
|
|
# Unit darunter
|
|
if unit:
|
|
font_u = fonts.get(theme.mono_font_key) or fonts.get("default")
|
|
uw, _ = measure(draw, unit, font_u)
|
|
draw.text(((400 - uw) // 2, 40 + 180 - th_f // 2 + 4),
|
|
unit, font=font_u, fill=theme.fg)
|
|
|
|
# Sub / Metatext unten
|
|
if sub:
|
|
font_s = fonts.get(theme.mono_font_key) or fonts.get("default")
|
|
sw, _ = measure(draw, sub, font_s)
|
|
draw.text(((400 - sw) // 2, 220), sub, font=font_s, fill=theme.fg)
|
|
|
|
|
|
# ============================================================================
|
|
# EXAMPLE: So wird ein Plugin-Design daraus gebaut
|
|
# ============================================================================
|
|
#
|
|
# class Widget(Widget):
|
|
# name = "myplugin"
|
|
# default_config = {
|
|
# "theme": "light", # light | dark | retro | mag
|
|
# "accent_color": "blue", # blue | green | orange | red
|
|
# }
|
|
#
|
|
# def render(self, draw, fonts, x, y, w, h):
|
|
# theme = THEMES[self.cfg("theme", "light")]
|
|
# data = self.fetch()
|
|
# if "_error" in data:
|
|
# render_error_banner(draw, fonts, x, y, w, h, self.label, data["_error"])
|
|
# return
|
|
#
|
|
# layout = pick_layout(w, h)
|
|
# hdr_h = header_height(layout)
|
|
#
|
|
# if layout == "small":
|
|
# th_corner_marker(draw, theme, x, y)
|
|
# layout_1x1(draw, fonts, theme, data["value"], data.get("unit", ""))
|
|
# elif layout == "wide":
|
|
# layout_wide_strip(draw, fonts, theme, data["cols"])
|
|
# else:
|
|
# # standard: Card-Grid
|
|
# cards = [
|
|
# {"label": k, "value": v, "color": theme.fg}
|
|
# for k, v in data["cards"].items()
|
|
# ]
|
|
# layout_card_grid(draw, fonts, theme, cards, x, y, w, h)
|
|
#
|
|
# ============================================================================
|