← Commit history

0.5.48: narrow tall layout, no empty mark span, clock pictures

John Lauer ·d6e9955e06 ·1mo ago ·parent 26208f4
6 files changed +13−10
bin/hydrogen-widget-lib.py+9−6
@@ -33,14 +33,17 @@ html,body{margin:0;height:100%%;background:transparent;color:#e6ebef;font-family   /* Tall: rows stacked. Columns take their natural width (label, value) and the bar takes the      rest, so nothing is ever clipped whatever the slot width; a long label is trimmed with an      ellipsis instead of pushing the value out of view. */-  .w{font-size:9px;line-height:1;padding:2px 6px}+  /* Narrow on purpose (John 2026-09-14: "make this 1/3rd the width"): the bar is a short gauge,+     not a ruler; the label and value carry the number. About 90 px for three rows with a mark. */+  .w{font-size:8px;line-height:1;padding:1px 4px;gap:4px}+  .mark{width:13px;height:13px}   .rows{flex-direction:column;align-items:stretch;justify-content:center;gap:2px;min-width:0}-  .row{display:grid;grid-template-columns:auto minmax(56px,1fr) auto;align-items:center;gap:4px;min-width:0}-  .lbl{font-size:7.5px}.row .lbl{max-width:5.5em;overflow:hidden;text-overflow:ellipsis}.bar{width:auto;height:5px}.v{font-size:9px;min-width:0}-  .big{font-size:15px}.err{font-size:9px;white-space:normal;line-height:1.1;max-width:130px}+  .row{display:grid;grid-template-columns:auto minmax(18px,1fr) auto;align-items:center;gap:3px;min-width:0}+  .lbl{font-size:6.5px}.row .lbl{max-width:4.2em;overflow:hidden;text-overflow:ellipsis}.bar{width:auto;height:4px}.v{font-size:8px;min-width:0}+  .big{font-size:14px}.err{font-size:8px;white-space:normal;line-height:1.1;max-width:96px} } @media (max-height:33px){ .err{overflow:hidden;text-overflow:ellipsis;max-width:100%%} }-</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>+</style><body><div class="w">%(mark_html)s<div class="rows" id="w">%(title)s…</div></div> <script> const R=%(refresh_ms)d; 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>`;}@@ -104,7 +107,7 @@ def serve(title, data_fn, render_js, refresh_ms=60000, mark=None):                         'const f=document.getElementById("w");f.dataset.w=m.width;if(!fixed)f.style.width=Math.max(48,Math.min(640,m.width))+"px";});</script></body>') % (title, w, h, 'true' if fixed else 'false')                 self._send(200, 'text/html; charset=utf-8', page.encode())             elif self.path.startswith('/health'): self._send(200, 'application/json', b'{"ok":true}')-            else: self._send(200, 'text/html; charset=utf-8', (PAGE % {'title': title, 'refresh_ms': refresh_ms, 'render_js': render_js, 'mark_svg': ('<svg viewBox="0 0 16 16">' + mark['svg'] + '</svg>') if mark['svg'] else '', 'mark_color': mark['color']}).encode())+            else: self._send(200, 'text/html; charset=utf-8', (PAGE % {'title': title, 'refresh_ms': refresh_ms, 'render_js': render_js, 'mark_html': ('<span class="mark" style="color:%s"><svg viewBox="0 0 16 16">%s</svg></span>' % (mark['color'], mark['svg'])) if (mark and mark.get('svg')) else ''}).encode())     # Bind with retries: a previous instance Hydrogen just stopped may still be releasing the     # port for a moment. Ten tries over five seconds, then give up loudly (the log says why).     ThreadingHTTPServer.allow_reuse_address = True
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.47",+  "version": "0.5.48",   "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.47",+  "version": "0.5.48",   "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+}
widgets/README.md+1−1
@@ -21,7 +21,7 @@ widgets/README.md                  this page (linked from the pulldown row)  ## How it sizes itself -The helper's page has two layouts chosen by the slot's height (stacked above 33 px, one row below), and after every render it measures itself on a hidden copy laid out at max-content and posts `{hdWidget:{width}}` to Hydrogen, which resizes the slot. The pictures above are that measurement: the clock asks for about 84 px tall and 106 px compact. The helper also serves `/preview?h=38` and `/preview?h=20`, its own page in a frame that follows the requested width; the pictures were made from those with headless Chrome at three times scale.+The helper's page has two layouts chosen by the slot's height (stacked above 33 px, one row below), and after every render it measures itself on a hidden copy laid out at max-content and posts `{hdWidget:{width}}` to Hydrogen, which resizes the slot. The pictures above are that measurement: the clock asks for about 55 px tall and 90 px compact. The helper also serves `/preview?h=38` and `/preview?h=20`, its own page in a frame that follows the requested width; the pictures were made from those with headless Chrome at three times scale.  ## Copy it 
widgets/docs/clock-compact.png
⋯ 1 unchanged line ⋯
widgets/docs/clock.png
⋯ 1 unchanged line ⋯