ki
49de61bb26
Admin UI: Linear.app dark theme — near-black canvas, indigo-violet accent, Inter font Display: Minimal, Minimal Color, Bold, Analog Clock, Magazine, Cards, Kiosk, Classic
475 lines
19 KiB
Python
475 lines
19 KiB
Python
"""Render-Pipeline für das Dashboard.
|
|
|
|
Unterstützt 3 Display-Designs:
|
|
magazine — großes TYPO, schmale Balken, monochrome Akzente
|
|
cards — Panel-Hintergründe, Emoji-Icons, vertikale Ränder
|
|
kiosk — Daten-first, viele kleine Info-Zellen, kompakt
|
|
|
|
Aufruf:
|
|
img = render_design(items, widgets, fonts, design="magazine")
|
|
"""
|
|
|
|
from PIL import Image, ImageDraw, ImageFont
|
|
from palette import FG, BG, WHITE, BLACK, GREEN, BLUE, RED, YELLOW, ORANGE, OK, WARN, ALERT, INFO, ACCENT
|
|
import math
|
|
|
|
DISPLAY_W = 800
|
|
DISPLAY_H = 480
|
|
COLS, ROWS = 4, 4
|
|
CELL_W = DISPLAY_W // COLS
|
|
CELL_H = DISPLAY_H // ROWS
|
|
|
|
|
|
def render_design(items, widgets, fonts, design="magazine") -> Image.Image:
|
|
fn = {
|
|
"magazine": _render_magazine,
|
|
"cards": _render_cards,
|
|
"kiosk": _render_kiosk,
|
|
"wireframe": _render_wireframe,
|
|
"bauhaus": _render_bauhaus,
|
|
"poster": _render_poster,
|
|
"retro_lcd": _render_retro_lcd,
|
|
"glossy": _render_glossy,
|
|
"data_board": _render_data_board,
|
|
"minimal": _render_minimal,
|
|
"minimal_color": _render_minimal_color,
|
|
"bold": _render_bold,
|
|
"analog": _render_analog_clock,
|
|
}.get(design, _render_minimal)
|
|
return fn(items, widgets, fonts)
|
|
|
|
|
|
# ============================================================================
|
|
# MAGAZINE — Bold Typography, Minimalist
|
|
# Idee: Wanduhr-Magazin / Bloomberg-Terminal-Ästhetik
|
|
# Schwarz/Weiß + eine Akzentfarbe pro Widget
|
|
# ============================================================================
|
|
|
|
def _render_magazine(items, widgets, fonts) -> Image.Image:
|
|
img = Image.new("RGB", (DISPLAY_W, DISPLAY_H), WHITE)
|
|
draw = ImageDraw.Draw(img)
|
|
|
|
for item, widget in zip(items, widgets):
|
|
x, y, w, h = _pixels(item)
|
|
if widget is None:
|
|
continue
|
|
|
|
# Jedes Widget bekommt einen vertikalen Akzent-Streifen links
|
|
accent = _widget_accent(widget.name)
|
|
draw.rectangle((x, y, x + 6, y + h - 1), fill=accent)
|
|
|
|
# Widget-Name oben links, klein
|
|
label = (widget.label or widget.name or "").upper()
|
|
draw.text((x + 14, y + 6), label, font=fonts.get("16", fonts.get("default")), fill=(160, 160, 160))
|
|
|
|
# Horizontale Linie unter Label
|
|
draw.line((x + 14, y + 26, x + w - 10, y + 26), fill=(220, 220, 220), width=1)
|
|
|
|
# Content-Bereich (ab y+32)
|
|
cy = y + 36
|
|
ch = h - 42
|
|
widget.render(draw, fonts, x + 14, cy, w - 20, ch)
|
|
|
|
return img
|
|
|
|
|
|
# ============================================================================
|
|
# CARDS — Background Panels + Emoji Icons + Vertical Accent Bars
|
|
# Idee: iOS Widgets / Google Smart Display
|
|
# Leicht grauer Hintergrund pro Karte, Emoji für Kategorie
|
|
# ============================================================================
|
|
|
|
def _render_cards(items, widgets, fonts) -> Image.Image:
|
|
img = Image.new("RGB", (DISPLAY_W, DISPLAY_H), (245, 244, 240)) # warm white
|
|
draw = ImageDraw.Draw(img)
|
|
|
|
for item, widget in zip(items, widgets):
|
|
x, y, w, h = _pixels(item)
|
|
if widget is None:
|
|
continue
|
|
|
|
# Card background
|
|
draw.rectangle((x + 2, y + 2, x + w - 3, y + h - 3), fill=WHITE)
|
|
|
|
# Top accent bar
|
|
accent = _widget_accent(widget.name)
|
|
draw.rectangle((x + 2, y + 2, x + w - 3, y + 10), fill=accent)
|
|
|
|
# Emoji icon (use emoji renderer via fallback)
|
|
icon = _widget_icon(widget.name)
|
|
_draw_emoji(draw, icon, x + 10, y + 18, 28)
|
|
|
|
# Label
|
|
label = widget.label or widget.name or ""
|
|
draw.text((x + 44, y + 18), label, font=fonts.get("16", fonts.get("default")), fill=(80, 80, 80))
|
|
|
|
# Separator line
|
|
draw.line((x + 8, y + 52, x + w - 8, y + 52), fill=(230, 230, 230), width=1)
|
|
|
|
# Content
|
|
widget.render(draw, fonts, x + 8, y + 58, w - 16, h - 64)
|
|
|
|
return img
|
|
|
|
|
|
# ============================================================================
|
|
# KIOSK — Data-Dense, Compact, Multi-Zone
|
|
# Idee: Control-Room / LoRa-Tracker / Science-Dashboard
|
|
# Viele kleine Info-Zellen, horizontale Teilung, monochrome Palette
|
|
# ============================================================================
|
|
|
|
def _render_kiosk(items, widgets, fonts) -> Image.Image:
|
|
img = Image.new("RGB", (DISPLAY_W, DISPLAY_H), BLACK)
|
|
draw = ImageDraw.Draw(img)
|
|
|
|
for item, widget in zip(items, widgets):
|
|
x, y, w, h = _pixels(item)
|
|
if widget is None:
|
|
continue
|
|
|
|
# Invertierte Box mit Akzent-Rand
|
|
draw.rectangle((x, y, x + w - 1, y + h - 1), fill=WHITE)
|
|
accent = _widget_accent(widget.name)
|
|
draw.rectangle((x, y, x + w - 1, y + 3), fill=accent)
|
|
|
|
# Label in Akzentfarbe oben
|
|
label = (widget.label or widget.name or "").upper()
|
|
draw.text((x + 8, y + 8), label, font=fonts.get("14", fonts.get("default")), fill=accent)
|
|
|
|
# Content
|
|
widget.render(draw, fonts, x + 6, y + 28, w - 12, h - 34)
|
|
|
|
return img
|
|
|
|
|
|
# ============================================================================
|
|
# Helper
|
|
# ============================================================================
|
|
|
|
def _pixels(item):
|
|
"""Item (x,y,w,h) in Pixel (800x480, 4x4 grid)"""
|
|
COLS, ROWS = 4, 4
|
|
CELL_W = DISPLAY_W // COLS
|
|
CELL_H = DISPLAY_H // ROWS
|
|
return item.x * CELL_W, item.y * CELL_H, item.w * CELL_W, item.h * CELL_H
|
|
|
|
|
|
# Alias für neue Designs
|
|
def _px(item):
|
|
return _pixels(item)
|
|
|
|
|
|
def _widget_accent(name):
|
|
accents = {
|
|
"clock": BLUE,
|
|
"weather": GREEN,
|
|
"system": ORANGE,
|
|
"hello": RED,
|
|
"spotify": (0, 200, 0), # spotify green
|
|
"strava": ORANGE,
|
|
"gmail": RED,
|
|
"minimax": (180, 100, 255), # purple
|
|
}
|
|
return accents.get(name, ORANGE)
|
|
|
|
|
|
def _widget_icon(name):
|
|
icons = {
|
|
"clock": "⏰",
|
|
"weather": "🌤️",
|
|
"system": "💻",
|
|
"hello": "👋",
|
|
"spotify": "🎵",
|
|
"strava": "🚴",
|
|
"gmail": "📧",
|
|
"minimax": "🤖",
|
|
}
|
|
return icons.get(name, "📟")
|
|
|
|
|
|
def _draw_emoji(draw, emoji, x, y, size):
|
|
"""Draw emoji by using a fallback ImageFont trick with the emoji char."""
|
|
# On systems without an emoji font, this just draws a rectangle placeholder
|
|
# The real implementation would need a font with emoji support
|
|
# For now draw a colored square as placeholder
|
|
colors = {
|
|
"⏰": (80, 160, 255),
|
|
"🌤️": (255, 200, 80),
|
|
"💻": (100, 100, 100),
|
|
"👋": (255, 160, 120),
|
|
"🎵": (0, 200, 100),
|
|
"🚴": (255, 140, 0),
|
|
"📧": (220, 80, 80),
|
|
"🤖": (180, 100, 255),
|
|
}
|
|
c = colors.get(emoji, (200, 200, 200))
|
|
draw.ellipse((x, y, x + size, y + size), fill=c)
|
|
|
|
|
|
# ============================================================================
|
|
# DESIGN 5: WIREFRAME
|
|
# Technisches Plan-Drawing. Blaue Linien, weiße Flächen.
|
|
# Blueprint-Ästhetik.
|
|
# ============================================================================
|
|
def _render_wireframe(items, widgets, fonts) -> Image.Image:
|
|
img = Image.new("RGB", (DISPLAY_W, DISPLAY_H), (240, 248, 255))
|
|
draw = ImageDraw.Draw(img)
|
|
for item, widget in zip(items, widgets):
|
|
x, y, w, h = _px(item)
|
|
if widget is None:
|
|
continue
|
|
draw.rectangle((x + 2, y + 2, x + w - 3, y + h - 3), fill=WHITE)
|
|
draw.rectangle((x + 2, y + 2, x + w - 3, y + h - 3), outline=BLUE, width=1)
|
|
draw.rectangle((x + 2, y + 2, x + w - 3, y + 10), fill=BLUE)
|
|
label = (widget.label or widget.name or "").upper()
|
|
draw.text((x + 10, y + 14), label, font=fonts.get("14", fonts.get("default")), fill=BLUE)
|
|
for row in range(item.y, item.y + item.h):
|
|
for col in range(item.x, item.x + item.w):
|
|
if (row + col) % 2 == 0:
|
|
cx = col * CELL_W + 4
|
|
cy = row * CELL_H + 4
|
|
cw = CELL_W - 6
|
|
ch = CELL_H - 6
|
|
draw.rectangle((cx, cy, cx + cw, cy + ch), fill=(240, 248, 255))
|
|
widget.render(draw, fonts, x + 6, y + 32, w - 12, h - 38)
|
|
return img
|
|
|
|
|
|
# ============================================================================
|
|
# DESIGN 6: BAUHAUS
|
|
# Geometrische Primärfarben. Jedes Widget bekommt eine der
|
|
# 7 ACeP-Farben als Hintergrund-Balken links.
|
|
# ============================================================================
|
|
def _render_bauhaus(items, widgets, fonts) -> Image.Image:
|
|
img = Image.new("RGB", (DISPLAY_W, DISPLAY_H), (245, 245, 240))
|
|
draw = ImageDraw.Draw(img)
|
|
PALETTE_7 = [RED, GREEN, BLUE, YELLOW, ORANGE, (0, 200, 200), (200, 100, 200)]
|
|
for i, (item, widget) in enumerate(zip(items, widgets)):
|
|
x, y, w, h = _px(item)
|
|
if widget is None:
|
|
continue
|
|
color = PALETTE_7[i % len(PALETTE_7)]
|
|
block_w = w // 3
|
|
draw.rectangle((x + 2, y + 2, x + block_w - 2, y + h - 3), fill=color)
|
|
draw.rectangle((x + block_w, y + 2, x + w - 3, y + h - 3), fill=WHITE)
|
|
draw.rectangle((x + 2, y + 2, x + w - 3, y + h - 3), outline=FG, width=2)
|
|
label = (widget.label or widget.name or "").upper()
|
|
draw.text((x + 6, y + 8), label, font=fonts.get("14", fonts.get("default")), fill=WHITE)
|
|
widget.render(draw, fonts, x + block_w + 4, y + 4, w - block_w - 8, h - 8)
|
|
return img
|
|
|
|
|
|
# ============================================================================
|
|
# DESIGN 7: POSTER
|
|
# Farbige Flächen, bold, fast nur Content.
|
|
# Jedes Widget in einer kräftigen Farbe.
|
|
# ============================================================================
|
|
def _render_poster(items, widgets, fonts) -> Image.Image:
|
|
img = Image.new("RGB", (DISPLAY_W, DISPLAY_H), BLACK)
|
|
draw = ImageDraw.Draw(img)
|
|
colors = [RED, GREEN, BLUE, YELLOW, ORANGE, (0, 200, 200), (200, 100, 200)]
|
|
for i, (item, widget) in enumerate(zip(items, widgets)):
|
|
x, y, w, h = _px(item)
|
|
if widget is None:
|
|
continue
|
|
c = colors[i % len(colors)]
|
|
draw.rectangle((x, y, x + w - 1, y + h - 1), fill=c)
|
|
draw.rectangle((x, y, x + w - 1, y + h - 1), outline=WHITE, width=3)
|
|
label = (widget.label or widget.name or "").upper()
|
|
draw.text((x + 8, y + 6), label[:18], font=fonts.get("12", fonts.get("default")), fill=WHITE)
|
|
widget.render(draw, fonts, x + 6, y + 24, w - 12, h - 30)
|
|
return img
|
|
|
|
|
|
# ============================================================================
|
|
# DESIGN 8: RETRO LCD
|
|
# Alte LCD-Uhren-Ästhetik. Dunkelgrüner Hintergrund,
|
|
# leuchtende grüne Ziffern, Fake-3D-Rahmen.
|
|
# ============================================================================
|
|
def _render_retro_lcd(items, widgets, fonts) -> Image.Image:
|
|
img = Image.new("RGB", (DISPLAY_W, DISPLAY_H), (0, 20, 0))
|
|
draw = ImageDraw.Draw(img)
|
|
LCD_GREEN = (0, 255, 120)
|
|
LCD_DARK = (0, 60, 30)
|
|
for item, widget in zip(items, widgets):
|
|
x, y, w, h = _px(item)
|
|
if widget is None:
|
|
continue
|
|
draw.rectangle((x + 3, y + 3, x + w - 4, y + h - 4), fill=LCD_DARK)
|
|
draw.rectangle((x + 1, y + 1, x + w - 2, y + h - 2), outline=LCD_GREEN, width=2)
|
|
label = (widget.label or widget.name or "").upper()
|
|
draw.text((x + 8, y + 6), label[:16], font=fonts.get("11", fonts.get("default")), fill=LCD_GREEN)
|
|
draw.line((x + 8, y + 22, x + w - 8, y + 22), fill=LCD_GREEN, width=1)
|
|
widget.render(draw, fonts, x + 6, y + 26, w - 12, h - 32)
|
|
return img
|
|
|
|
|
|
# ============================================================================
|
|
# DESIGN 9: GLOSSY
|
|
# Moderne iOS-Widget-Ästhetik. Weiße Karten, Glossy-Header
|
|
# in Accent-Farbe, dezente Schatten-Rahmen.
|
|
# ============================================================================
|
|
def _render_glossy(items, widgets, fonts) -> Image.Image:
|
|
img = Image.new("RGB", (DISPLAY_W, DISPLAY_H), (220, 228, 235))
|
|
draw = ImageDraw.Draw(img)
|
|
WIDGET_ACCENTS = {
|
|
"clock": (80, 160, 255),
|
|
"weather": (60, 200, 100),
|
|
"system": (255, 160, 40),
|
|
"hello": (200, 80, 80),
|
|
"spotify": (0, 180, 80),
|
|
"strava": (255, 120, 0),
|
|
"gmail": (200, 60, 60),
|
|
"minimax": (160, 80, 255),
|
|
}
|
|
for item, widget in zip(items, widgets):
|
|
x, y, w, h = _px(item)
|
|
if widget is None:
|
|
continue
|
|
accent = WIDGET_ACCENTS.get(widget.name, (100, 100, 100))
|
|
draw.rectangle((x + 2, y + 2, x + w - 2, y + h - 2), fill=WHITE)
|
|
draw.rectangle((x + 2, y + 2, x + w - 2, y + 14), fill=accent)
|
|
# Glossy highlight
|
|
for i in range(6):
|
|
alpha = int(80 - i * 12)
|
|
c = tuple(min(255, accent[j] + alpha) for j in range(3))
|
|
draw.line((x + 2, y + 2 + i, x + w - 2, y + 2 + i), fill=c, width=1)
|
|
draw.rectangle((x + 2, y + 2, x + w - 2, y + h - 2), outline=(200, 210, 220), width=1)
|
|
draw.rectangle((x + 3, y + 3, x + w - 3, y + h - 3), outline=(220, 228, 235), width=1)
|
|
draw.rectangle((x + 4, y + 4, x + w - 4, y + h - 4), outline=(180, 190, 200), width=1)
|
|
label = (widget.label or widget.name or "").title()
|
|
draw.text((x + 10, y + 18), label, font=fonts.get("14", fonts.get("default")), fill=accent)
|
|
draw.line((x + 8, y + 36, x + w - 8, y + 36), fill=(220, 220, 220), width=1)
|
|
widget.render(draw, fonts, x + 6, y + 40, w - 12, h - 46)
|
|
return img
|
|
|
|
|
|
# ============================================================================
|
|
# DESIGN 10: DATA BOARD
|
|
# Kontrollraum-Ästhetik. Winzige Zellen, viele Daten.
|
|
# Monochrome, Tick-Marks, Data-first.
|
|
# ============================================================================
|
|
def _render_data_board(items, widgets, fonts) -> Image.Image:
|
|
img = Image.new("RGB", (DISPLAY_W, DISPLAY_H), (10, 10, 15))
|
|
draw = ImageDraw.Draw(img)
|
|
for item, widget in zip(items, widgets):
|
|
x, y, w, h = _px(item)
|
|
if widget is None:
|
|
continue
|
|
draw.rectangle((x, y, x + w - 1, y + h - 1), fill=WHITE, width=2)
|
|
draw.rectangle((x, y, x + w - 1, y + 22), fill=WHITE)
|
|
draw.text((x + 6, y + 4), (widget.label or widget.name or "").upper(),
|
|
font=fonts.get("12", fonts.get("default")), fill=BLACK)
|
|
for tx in range(x + 10, x + w - 10, 20):
|
|
draw.line((tx, y + 24, tx, y + 28), fill=(180, 180, 180), width=1)
|
|
widget.render(draw, fonts, x + 4, y + 30, w - 8, h - 34)
|
|
return img
|
|
|
|
|
|
# ============================================================================
|
|
# MINIMAL — das Referenz-Design
|
|
# Schwarz/Weiß, bold, clean, viel Weißraum. Kein UI-Chrome.
|
|
# ============================================================================
|
|
def _render_minimal(items, widgets, fonts) -> Image.Image:
|
|
img = Image.new("RGB", (DISPLAY_W, DISPLAY_H), WHITE)
|
|
draw = ImageDraw.Draw(img)
|
|
for item, widget in zip(items, widgets):
|
|
x, y, w, h = _px(item)
|
|
if widget is None:
|
|
continue
|
|
widget.render(draw, fonts, x + 12, y + 12, w - 24, h - 24)
|
|
return img
|
|
|
|
|
|
# ============================================================================
|
|
# MINIMAL COLOR — Minimal mit dezenter Akzentfarbe pro Kategorie
|
|
# Kleiner Farbbalken oben links, sonst weiß + schwarz
|
|
# ============================================================================
|
|
def _render_minimal_color(items, widgets, fonts) -> Image.Image:
|
|
img = Image.new("RGB", (DISPLAY_W, DISPLAY_H), WHITE)
|
|
draw = ImageDraw.Draw(img)
|
|
CATEGORY_COLORS = {
|
|
"clock": (60, 80, 200),
|
|
"weather": (50, 160, 80),
|
|
"system": (200, 120, 30),
|
|
"hello": (180, 60, 60),
|
|
"spotify": (0, 160, 80),
|
|
"strava": (230, 110, 20),
|
|
"gmail": (200, 60, 60),
|
|
"minimax": (140, 80, 240),
|
|
}
|
|
for item, widget in zip(items, widgets):
|
|
x, y, w, h = _px(item)
|
|
if widget is None:
|
|
continue
|
|
color = CATEGORY_COLORS.get(widget.name, FG)
|
|
draw.rectangle((x + 12, y + 10, x + 16, y + 18), fill=color)
|
|
label = (widget.label or widget.name or "").upper()
|
|
draw.text((x + 22, y + 8), label, font=fonts.get("11", fonts.get("default")), fill=(160, 160, 160))
|
|
widget.render(draw, fonts, x + 12, y + 24, w - 24, h - 36)
|
|
return img
|
|
|
|
|
|
# ============================================================================
|
|
# BOLD — Riesen-Typography
|
|
# Zahlen und Text füllen die Zelle komplett.
|
|
# Kaum Weißraum, maximaler Informationsdichte.
|
|
# ============================================================================
|
|
def _render_bold(items, widgets, fonts) -> Image.Image:
|
|
img = Image.new("RGB", (DISPLAY_W, DISPLAY_H), WHITE)
|
|
draw = ImageDraw.Draw(img)
|
|
for item, widget in zip(items, widgets):
|
|
x, y, w, h = _px(item)
|
|
if widget is None:
|
|
continue
|
|
draw.rectangle((x + 1, y + 1, x + w - 2, y + h - 2), outline=BLACK, width=1)
|
|
widget.render(draw, fonts, x + 6, y + 6, w - 12, h - 12)
|
|
return img
|
|
|
|
|
|
# ============================================================================
|
|
# ANALOG CLOCK — Die Uhr als Mittelpunkt
|
|
# 2x2-Clock-Zellen zeigen ein analoges Ziffernblatt.
|
|
# Übrige Zellen: cleanes Panel mit Monospace.
|
|
# ============================================================================
|
|
def _render_analog_clock(items, widgets, fonts) -> Image.Image:
|
|
img = Image.new("RGB", (DISPLAY_W, DISPLAY_H), (245, 245, 240))
|
|
draw = ImageDraw.Draw(img)
|
|
import math
|
|
for item, widget in zip(items, widgets):
|
|
x, y, w, h = _px(item)
|
|
if widget is None:
|
|
continue
|
|
is_2x2 = item.w >= 2 and item.h >= 2
|
|
is_clock = widget.name == "clock" and is_2x2
|
|
if is_clock:
|
|
cx, cy = x + w // 2, y + h // 2
|
|
r = min(w, h) // 2 - 16
|
|
draw.ellipse((cx - r, cy - r, cx + r, cy + r), fill=WHITE, outline=BLACK, width=2)
|
|
for i in range(12):
|
|
angle = (i / 12) * 2 * math.pi - math.pi / 2
|
|
mx = cx + int((r - 12) * math.cos(angle))
|
|
my = cy + int((r - 12) * math.sin(angle))
|
|
draw.ellipse((mx - 3, my - 3, mx + 3, my + 3), fill=BLACK)
|
|
from datetime import datetime
|
|
now = datetime.now()
|
|
hour_angle = ((now.hour % 12) / 12) * 2 * math.pi - math.pi / 2
|
|
min_angle = (now.minute / 60) * 2 * math.pi - math.pi / 2
|
|
hx = cx + int(r * 0.5 * math.cos(hour_angle))
|
|
hy = cy + int(r * 0.5 * math.sin(hour_angle))
|
|
draw.line((cx, cy, hx, hy), fill=BLACK, width=4)
|
|
mx = cx + int(r * 0.75 * math.cos(min_angle))
|
|
my = cy + int(r * 0.75 * math.sin(min_angle))
|
|
draw.line((cx, cy, mx, my), fill=BLACK, width=2)
|
|
draw.ellipse((cx - 4, cy - 4, cx + 4, cy + 4), fill=BLACK)
|
|
draw.text((cx - 40, cy + r + 8), now.strftime("%H:%M"),
|
|
font=fonts.get("20", fonts.get("default")), fill=BLACK)
|
|
else:
|
|
draw.rectangle((x + 2, y + 2, x + w - 2, y + h - 2), fill=WHITE)
|
|
draw.ellipse((x + 8, y + 8, x + 14, y + 14), fill=(60, 100, 200))
|
|
label = (widget.label or widget.name or "").upper()[:12]
|
|
draw.text((x + 20, y + 6), label, font=fonts.get("12", fonts.get("default")), fill=(100, 100, 100))
|
|
draw.line((x + 8, y + 22, x + w - 8, y + 22), fill=(200, 200, 200), width=1)
|
|
widget.render(draw, fonts, x + 6, y + 26, w - 12, h - 34)
|
|
return img
|