Add radial/text widgets, netmap pages, Cyberdeck art page

- radial: arc gauge from 12 o'clock, with own track or tracing ring art
  from a background image; text: free-form value text for art pages
- type: netmap pages embed the netmap app in the carousel rotation
  (page keys override display.yaml netmap config; header gains page dots)
- shipped CYBERDECK page: live gauges (cpu/ram/temp/load/disk) traced
  over the stock Cyberdeck theme art, plus k3s/fleet values in its boxes
- time_hm local value

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: Fumunchu

DISPLAY.md

@@ -39,10 +39,12 @@ Home Assistant, kubectl, etc. is one small class in `apps/common.py`
 
 ## Page schema
 
-See the comment block at the top of `pages.yaml` — widgets (`bar`, `metric`),
-format strings over a value namespace (local psutil values + per-page query
-results + derived expressions), threshold/conditional color specs, optional
-`background:` art from any stock theme.
+See the comment block at the top of `pages.yaml` — widgets (`bar`, `metric`,
+`radial`, `text`), format strings over a value namespace (local psutil values
++ per-page query results + derived expressions), threshold/conditional color
+specs, optional `background:` art from any stock theme (the shipped CYBERDECK
+page traces live radial gauges over the stock Cyberdeck theme art), and
+`type: netmap` pages that embed the netmap app in the rotation.
 
 ## Preview without a screen
 

apps/carousel.py

@@ -39,7 +39,13 @@ def page_values(page, sources):
     return vals
 
 
-def render_page(page, idx, npages, sources):
+def render_page(page, idx, npages, sources, display_cfg=None):
+    if page.get("type") == "netmap":  # embed the netmap app as a page
+        from apps import netmap
+        nm = dict((display_cfg or {}).get("netmap") or {})
+        nm.update({k: v for k, v in page.items() if k != "type"})
+        src = sources.get(nm.get("source", "prom"))
+        return netmap.render(netmap.gather_hosts(src, nm), nm, idx, npages)
     img = Image.new("RGB", (c.W, c.H), c.BG)
     bg = page.get("background")
     if bg:
@@ -77,7 +83,7 @@ def run(lcd, display_cfg):
         pages = cfg.get("pages") or []
         for k, page in enumerate(pages):
             p = f"/tmp/carousel_{k}.png"
-            render_page(page, k, len(pages), sources).save(p)
+            render_page(page, k, len(pages), sources, display_cfg).save(p)
             print("wrote", p)
         return
 
@@ -102,7 +108,7 @@ def run(lcd, display_cfg):
         dwell = float(cfg.get("dwell", 8))
         refresh = float(cfg.get("refresh", 2))
 
-        frame = render_page(page, idx, len(pages), sources)
+        frame = render_page(page, idx, len(pages), sources, display_cfg)
         c.push_frame(lcd, frame, prev)
         prev = frame
         t0 = time.monotonic()
@@ -113,7 +119,7 @@ def run(lcd, display_cfg):
             time.sleep(min(refresh, remaining))
             if dwell - (time.monotonic() - t0) <= 0.05:
                 break
-            frame = render_page(page, idx, len(pages), sources)
+            frame = render_page(page, idx, len(pages), sources, display_cfg)
             c.push_frame(lcd, frame, prev)
             prev = frame
         idx += 1

apps/common.py

@@ -126,6 +126,7 @@ def local_values():
         "temp": host_temp(),
         "load1": os.getloadavg()[0],
         "uptime": fmt_uptime(),
+        "time_hm": time.strftime("%H:%M"),
     }
 
 
@@ -203,7 +204,35 @@ def draw_metric(d, w, vals):
            fill=resolve_color(w.get("color"), vals), anchor="la")
 
 
-WIDGETS = {"bar": draw_bar, "metric": draw_metric}
+def draw_radial(d, w, vals):
+    """Arc gauge: fills clockwise from 12 o'clock. With `track: true` draws its
+    own ring; without, it traces ring art from a background image."""
+    x, y, r = w["x"], w["y"], w.get("r", 40)
+    pct = vals.get(w.get("pct")) or 0
+    width = w.get("width", 8)
+    color = resolve_color(w["color"], vals) if w.get("color") else threshold_color(pct)
+    if w.get("track"):
+        d.arc([x - r, y - r, x + r, y + r], 0, 360, fill=TRACK, width=width)
+    if pct > 0:
+        d.arc([x - r, y - r, x + r, y + r], -90, -90 + min(pct, 100) * 3.6,
+              fill=color, width=width)
+    if w.get("text"):
+        d.text((x, y), fmt(w["text"], vals), font=font(w.get("size", 20), "Bold"),
+               fill=COLORS["fg"], anchor="mm")
+    if w.get("label"):
+        d.text((x, y + r + 4), str(w["label"]), font=font(12, "Medium"),
+               fill=COLORS["dim"], anchor="ma")
+
+
+def draw_text(d, w, vals):
+    """Free-form text at (x, y) -- for value boxes on background art pages."""
+    d.text((w["x"], w["y"]), fmt(w.get("text", ""), vals),
+           font=font(w.get("size", 16), w.get("weight", "Medium"),
+                     w.get("family", "roboto")),
+           fill=resolve_color(w.get("color"), vals), anchor=w.get("anchor", "mm"))
+
+
+WIDGETS = {"bar": draw_bar, "metric": draw_metric, "radial": draw_radial, "text": draw_text}
 
 
 def push_frame(lcd, new, old=None, band=20):

apps/netmap.py

@@ -31,12 +31,13 @@ def gather_hosts(src, nm_cfg):
     return sorted(hosts.items())
 
 
-def render(hosts, nm_cfg):
+def render(hosts, nm_cfg, idx=None, npages=None):
     img = Image.new("RGB", (c.W, c.H), c.BG)
     d = ImageDraw.Draw(img)
     n_up = sum(1 for _, v in hosts if v >= 1)
-    c.header(d, "NETWORK MAP")
-    d.text((c.W - 16, 22), f"{n_up}/{len(hosts)} up",
+    c.header(d, nm_cfg.get("title", "NETWORK MAP"), idx, npages)
+    count_x = c.W - 16 - (18 * npages + 16 if npages else 0)  # clear the page dots
+    d.text((count_x, 22), f"{n_up}/{len(hosts)} up",
            font=c.font(16, "B", "mono"),
            fill=c.COLORS["ok"] if n_up == len(hosts) else c.COLORS["bad"], anchor="rm")
 

pages.yaml

@@ -7,7 +7,15 @@
 #
 # Widget types:
 #   bar:    {type: bar, x, y, w, label, pct: <value-name>, text: "<format>"}
-#   metric: {type: metric, x, y, label, text: "<format>", color: <spec>, bw: <region width>}
+#   metric: {type: metric, x, y, label, text: "<format>", color: <spec>}
+#   radial: {type: radial, x, y, r, width, pct: <value-name>, text, size, label, track: true}
+#           arc gauge from 12 o'clock; omit `track` to trace background ring art
+#   text:   {type: text, x, y, size, weight, family, anchor, text: "<format>", color: <spec>}
+#
+# Page types:
+#   (default)       widget page as below
+#   type: netmap    embeds the netmap app as a page; keys here override
+#                   display.yaml's `netmap:` section (title, up_query, ...)
 #
 # Page options:
 #   background: res/themes/<name>/background.png   draw widgets over theme art
@@ -71,10 +79,30 @@ pages:
       - {type: metric, x: 16,  y: 170, label: CPU,      text: "{cpu:.0f}%", color: "auto:cpu"}
       - {type: metric, x: 176, y: 170, label: MEM,      text: "{mem:.0f}%", color: "auto:mem"}
 
-  # Example: widgets over existing theme art (try it, then tune positions):
-  # - title: CYBERDECK
-  #   background: res/themes/Cyberdeck/background.png
-  #   header: false
-  #   footer: false
-  #   widgets:
-  #     - {type: metric, x: 40, y: 80, label: CPU, text: "{cpu_pct:.0f}%", color: accent}
+  # The netmap app embedded as a page (settings inherit from display.yaml `netmap:`)
+  - type: netmap
+
+  # Live values over the stock Cyberdeck theme art: radials trace the ring art,
+  # text widgets sit in its value boxes. GPU ring shows disk until the GPU lands.
+  - title: CYBERDECK
+    background: res/themes/Cyberdeck/background.png
+    header: false
+    footer: false
+    queries:
+      hosts_up:    sum(up{job=~".*node.*"})
+      hosts_total: count(node_uname_info)
+      pods_run:    sum(kube_pod_status_phase{phase="Running"})
+    derived:
+      temp_pct: "(temp or 0)/90*100"
+      load_pct: "(load1 or 0)/8*100"
+    widgets:
+      - {type: radial, x: 96,  y: 79,  r: 37, width: 9,  pct: cpu_pct,  text: "{cpu_pct:.0f}%"}
+      - {type: radial, x: 107, y: 206, r: 35, width: 9,  pct: ram_pct,  text: "{ram_pct:.0f}%"}
+      - {type: radial, x: 164, y: 136, r: 27, width: 7,  pct: temp_pct, text: "{temp:.0f}°", size: 16}
+      - {type: radial, x: 232, y: 69,  r: 31, width: 8,  pct: load_pct, text: "{load1:.1f}", size: 16}
+      - {type: radial, x: 388, y: 165, r: 50, width: 10, pct: disk_pct, text: "{disk_pct:.0f}%"}
+      - {type: text,   x: 375, y: 47,  size: 12, text: "{ram_used_g:.1f} / {ram_total_g:.0f} G"}
+      - {type: text,   x: 72,  y: 137, size: 14, text: "{uptime}"}
+      - {type: text,   x: 266, y: 160, size: 14, text: "{time_hm}"}
+      - {type: text,   x: 252, y: 250, size: 22, weight: Bold, text: "{pods_run:.0f} pods"}
+      - {type: text,   x: 398, y: 292, size: 12, text: "{hosts_up:.0f}/{hosts_total:.0f} up", color: "ok_if:hosts_up>=hosts_total"}