diff --git a/build.sh b/build.sh index c13331a..4fc86e6 100755 --- a/build.sh +++ b/build.sh @@ -30,6 +30,8 @@ def build(name): out.write_text(src) return out.stat().st_size -for name in ("index.html","player.html","stage.html","micro.html","concepts.html"): +for name in ("index.html","player.html","stage.html","micro.html","concepts.html","embed.html"): print("built %s (%dKB)" % (name, build(name) // 1024)) +pathlib.Path("dist/embed.js").write_text(pathlib.Path("embed.js").read_text()) # loader, served as-is +print("copied embed.js") PY diff --git a/concepts.html b/concepts.html index fb516f8..8711512 100644 --- a/concepts.html +++ b/concepts.html @@ -54,6 +54,7 @@ diff --git a/deploy.sh b/deploy.sh index b231ac2..aacf5bf 100755 --- a/deploy.sh +++ b/deploy.sh @@ -40,10 +40,11 @@ fi # stamp the version into the built copy only (source stays clean) echo "deployed v$BUILD -> $DEST_DIR" -for f in index.html player.html stage.html micro.html concepts.html; do +for f in index.html player.html stage.html micro.html concepts.html embed.html; do sed "s|const APP_VERSION = \"[^\"]*\";|const APP_VERSION = \"$BUILD\";|" "$DIST_DIR/$f" > "$DEST_DIR/$f" echo " $f ($(stat -c '%s' "$DEST_DIR/$f") bytes)" done +cp "$DIST_DIR/embed.js" "$DEST_DIR/embed.js"; echo " embed.js ($(stat -c '%s' "$DEST_DIR/embed.js") bytes)" rm -f "$DEST_DIR/player-asbuilt.html" # renamed to stage.html # If real audio samples are added later (see the plan's GM-sample note), diff --git a/embed.html b/embed.html new file mode 100644 index 0000000..9ce79e2 --- /dev/null +++ b/embed.html @@ -0,0 +1,118 @@ + + + + + +Embed a PolyMeter widget — VARASYS + + + + + + + +
+
+ + + + + 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