From fc05cfe4c78bbfa62d7e7f1d15ca727f45d9b68c Mon Sep 17 00:00:00 2001 From: Me Here Date: Tue, 26 May 2026 11:46:26 -0500 Subject: [PATCH] Site phase 2: embeddable widget standard (?embed=1 + embed.js + embed.html) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Every form factor supports ?embed=1: a head flag (set on , no flash) strips the site chrome (base.css [data-embed]) + page-specific panels, leaving just the widget, and posts its height so the host can auto-size it. - Config/settings string preloads via the existing #p=/#sl= hash. Added that hash handling to micro.html (it previously only loaded built-in tracks). - New embed.js loader:
+ one + + + + +
+
+ + + + + PolyMeter · Embed +
+ +
+ +
+

Embed a PolyMeter widget

+

Every PolyMeter form factor doubles as an embeddable widget. Drop one into any page with + a placeholder + one script tag — no build step, no dependencies. It loads in an iframe and is preloaded + with whatever program / settings string you give it.

+ +

Drop-in (recommended)

+ 
<div data-varasys-metronome="micro"
+     data-patch="v1;t120;kick:4;snare:4=.X.X;hatClosed:4/2"></div>
+<script src="https://metronome.varasys.io/embed.js"></script>
+

The script replaces the <div> with an auto-sizing iframe. Here it is, live on this page:

+
+
+
+ +

Or a plain iframe

+ 
<iframe src="https://metronome.varasys.io/micro.html?embed=1#p=v1;t120;kick:4"
+        width="360" height="300" style="border:0"></iframe>
+ +

Form factors — data-varasys-metronome

+ + + + + + + + +
valuewidget
editorPE‑1 PolyMeter Editor (full app)
initialPM‑1 Initial (idealized device)
stagePM‑1 Stage (pedalboard device)
microPM‑µ Micro (practice unit)
+ +

Configuration / settings string

+ + + + + + + +
attributewhat
data-patchA PolyMeter program string, e.g. v1;t120;kick:4;snare:4=.X.X;hatClosed:4/2. Copy it from the editor's program field.
data-setlistA base64url set‑list code (a whole set list) — share it from the editor.
data-width / data-heightiframe size (default 100% × 300; height auto‑grows to the widget).
+

Under the hood the loader builds <page>?embed=1#p=<patch>; the page's ?embed=1 mode strips the + site chrome so only the widget shows. That's the same way our own Concept & Info pages embed it.

+
+ +
VARASYS · Simplifying Complexity — v0.0.1-dev
+ + + + + diff --git a/embed.js b/embed.js new file mode 100644 index 0000000..64d9931 --- /dev/null +++ b/embed.js @@ -0,0 +1,54 @@ +/* VARASYS PolyMeter — embed loader (zero-dependency, ~1 KB). + * + * Drop a placeholder + this script into any page: + *
+ * + * + * Attributes: + * data-varasys-metronome editor | initial | stage | micro (which form factor) + * data-patch a PolyMeter program/settings string (preloads it) + * data-setlist a base64url set-list code (alternative to data-patch) + * data-width / data-height iframe size (default 100% × 300; height auto-grows) + * + * Each placeholder becomes an