← Commit history

0.5.37: widget helper with tall/compact layouts; clock stacks time over date when tall

John Lauer ·9fc8e257d3 ·1mo ago ·parent 3c7013d
5 files changed +31−14
bin/hydrogen-widget-clock+1−1
@@ -3,7 +3,7 @@ serve one page on $HYDROGEN_WIDGET_PORT.""" import os, sys from importlib.machinery import SourceFileLoader-lib = SourceFileLoader('hwlib', os.path.join(os.path.dirname(os.path.abspath(__file__)), 'hydrogen-widget-lib.py')).load_module()+lib = SourceFileLoader('hwlib', os.path.join(os.path.dirname(os.path.realpath(__file__)), 'hydrogen-widget-lib.py')).load_module() import datetime def data():     now = datetime.datetime.now()
bin/hydrogen-widget-lib.py+26−10
@@ -10,20 +10,36 @@ from http.server import BaseHTTPRequestHandler, ThreadingHTTPServer PAGE = """<!doctype html><meta charset="utf-8"><title>%(title)s</title> <style> html,body{margin:0;height:100%%;background:transparent;color:#e6ebef;font-family:"Familjen Grotesk","Satoshi",system-ui,sans-serif;overflow:hidden}-/* Sized by the slot's height, so the same page fits the full Title Bar (30 px) and the compact one (20 px). */-.w{display:flex;align-items:center;gap:calc(20vh);height:100vh;padding:0 calc(20vh);white-space:nowrap;font-size:clamp(7px,37vh,12px);line-height:1.2}-.lbl{opacity:.75;font-size:clamp(6px,30vh,9px);letter-spacing:.04em;text-transform:uppercase}-.bar{position:relative;width:clamp(24px,130vh,40px);height:clamp(4px,20vh,6px);border-radius:3px;background:rgba(255,255,255,.14);overflow:hidden}+/* Two layouts, chosen by the slot's height (the Title Bar, full or compact), like the meter:+   tall = rows stacked to use the height; short = one horizontal row. */+.w{display:flex;align-items:center;height:100vh;padding:0 5px;gap:5px;white-space:nowrap}+.mark{display:inline-flex;flex:none;width:15px;height:15px}.mark svg{width:100%%;height:100%%}+.rows{display:flex;align-items:center;gap:8px;min-width:0;flex:1}+.row{display:flex;align-items:center;gap:4px}+.lbl{opacity:.75;letter-spacing:.04em;text-transform:uppercase}+.bar{position:relative;border-radius:3px;background:rgba(255,255,255,.14);overflow:hidden} .bar i{position:absolute;left:0;top:0;bottom:0;background:#19b3a6;border-radius:3px} .bar.warn i{background:#f0a060}.bar.hot i{background:#e5484d}-.v{font-variant-numeric:tabular-nums;min-width:2.4em;text-align:right}-.big{font-size:clamp(9px,47vh,14px);font-weight:600;font-variant-numeric:tabular-nums}-.err{color:#f0a060;font-size:clamp(7px,33vh,10px)}-.mark{display:inline-flex;flex:none;width:clamp(10px,55vh,17px);height:clamp(10px,55vh,17px)}.mark svg{width:100%%;height:100%%}-</style><body><div class="w"><span class="mark" style="color:%(mark_color)s">%(mark_svg)s</span><div class="w" id="w" style="padding-left:0">%(title)s…</div></div>+.v{font-variant-numeric:tabular-nums;text-align:right}+.big{font-weight:600;font-variant-numeric:tabular-nums}+.err{color:#f0a060}+@media (max-height:33px){+  .w{font-size:clamp(7px,37vh,12px);line-height:1.2}+  .lbl{font-size:clamp(6px,30vh,9px)}.bar{width:clamp(24px,130vh,40px);height:clamp(4px,20vh,6px)}.v{min-width:2.4em}+  .big{font-size:clamp(9px,47vh,14px)}.err{font-size:clamp(7px,33vh,10px)}+  .mark{width:clamp(10px,55vh,17px);height:clamp(10px,55vh,17px)}+}+@media (min-height:34px){+  .w{font-size:9px;line-height:1;padding:2px 6px}+  .rows{flex-direction:column;align-items:stretch;justify-content:center;gap:2px}+  .row{display:grid;grid-template-columns:2.8em 1fr 2.6em;gap:5px}+  .lbl{font-size:7.5px}.bar{width:auto;height:5px}.v{font-size:9px}+  .big{font-size:15px}.err{font-size:9px}+}+</style><body><div class="w"><span class="mark" style="color:%(mark_color)s">%(mark_svg)s</span><div class="rows" id="w">%(title)s…</div></div> <script> const R=%(refresh_ms)d;-function bar(l,p){const c=p>=90?'hot':p>=70?'warn':'';return `<span class="lbl">${l}</span><span class="bar ${c}"><i style="width:${Math.max(0,Math.min(100,p))}%%"></i></span><span class="v">${Math.round(p)}%%</span>`;}+function bar(l,p,sev){const c=(sev==='critical'||p>=90)?'hot':(sev==='warning'||p>=70)?'warn':'';return `<span class="row"><span class="lbl">${l}</span><span class="bar ${c}"><i style="width:${Math.max(0,Math.min(100,p))}%%"></i></span><span class="v">${Math.round(p)}%%</span></span>`;} async function tick(){try{const r=await fetch('/data.json',{cache:'no-store'});const d=await r.json();document.getElementById('w').innerHTML=%(render_js)s;}catch(e){document.getElementById('w').innerHTML='<span class="err">no data</span>';}} let tm=null;function arm(){if(tm)return;tm=setInterval(tick,R);}function disarm(){if(tm){clearInterval(tm);tm=null;}} document.addEventListener('visibilitychange',()=>{if(document.hidden)disarm();else{tick();arm();}});
hydrogen-widget.json+1
@@ -5,6 +5,7 @@   "icon": "mdi:clock-outline",   "brief": "The time and date. The smallest possible widget, the one to copy when you make your own.",   "width": 110,+  "width_tall": 84,   "install": "adom/hydrogen-bootstrap",   "launch": { "command": "hydrogen-widget-clock", "port": 8933 },   "health": { "url": "/", "timeout_seconds": 60 }
package.json+1−1
@@ -4,7 +4,7 @@   "type": "bootstrap",   "title": "Adom Hydrogen (platform base)",   "brief": "Layer Hydrogen's workspace onto a standard Adom workstation.",-  "version": "0.5.36",+  "version": "0.5.37",   "description": "Hydrogen's PLATFORM-GENERIC workspace layer on top of adom/core. Installs adom/core for the full Adom ecosystem, then adds everything common to running inside Hydrogen on ANY platform: the runtime-neutral hydrogen-* skills and the generic editor configuration (Claude Code CLI + extension, VS Code settings, trusted domains). Platform-specific layers depend on THIS: adom/hydrogen-windows-bootstrap (WSL2), adom/hydrogen-mac-bootstrap, adom/hydrogen-ubuntu-bootstrap. The reference design other orgs copy to build their own bootstrap on adom/core.",   "org": "adom",   "tags": [
page.json+2−2
@@ -4,7 +4,7 @@   "type": "bootstrap",   "title": "Adom Hydrogen (platform base)",   "brief": "Layer Hydrogen's workspace onto a standard Adom workstation.",-  "version": "0.5.36",+  "version": "0.5.37",   "description": "Hydrogen's PLATFORM-GENERIC workspace layer on top of adom/core. Installs adom/core for the full Adom ecosystem, then adds everything common to running inside Hydrogen on ANY platform: the runtime-neutral hydrogen-* skills and the generic editor configuration (Claude Code CLI + extension, VS Code settings, trusted domains). Platform-specific layers depend on THIS: adom/hydrogen-windows-bootstrap (WSL2), adom/hydrogen-mac-bootstrap, adom/hydrogen-ubuntu-bootstrap. The reference design other orgs copy to build their own bootstrap on adom/core.",   "org": "adom",   "tags": [@@ -49,4 +49,4 @@     "hydrogen editor configuration",     "where do hydrogen skills come from"   ]-}\ No newline at end of file+}