metronome/embed.js
Me Here 5fc962f0c4 Phase 0: refresh README to current state; add 'kit' embed variant
README was stale (pre-dating several shipped changes). Rewrite it to match reality:
  - voices are all synthesized now (KIT_ALIAS -> 808/909); drop the VCSL samples
    narrative, the @BUILD:samples wording, and the sample credits.
  - document the lean-widget + separate info-<device>.html page model (was 'Open=Info').
  - add kit.html + all info-*.html to the Pages table; add the new src/ partials
    (header/footer/chrome/progbox/infoembed), pico/ firmware, and pico-main.py to Files/Build.
  - document the share-grammar additions: GM note numbers, Euclidean (k,n[,rot]), per-lane @<db> gain.
  - add a 'Build it (hardware)' section for the PM_K-1 Kit + MicroPython firmware.

embed.js: add the 'kit' form factor to the variant map (it previously fell back to micro),
so data-varasys-metronome="kit" embeds kit.html as the README now documents.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-28 21:01:40 -05:00

55 lines
2.6 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

/* VARASYS PolyMeter — embed loader (zero-dependency, ~1 KB).
*
* Drop a placeholder + this script into any page:
* <div data-varasys-metronome="micro" data-patch="v1;t120;kick:4;snare:4=.X.X"></div>
* <script src="https://metronome.varasys.io/embed.js"></script>
*
* Attributes:
* data-varasys-metronome editor | kit | initial | teacher | stage | micro | showcase (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 <iframe src=".../<page>?embed=1#p=<patch>"> (the page's
* own ?embed=1 mode strips the site chrome) and auto-resizes to the widget's content.
*/
(function () {
var PAGES = { editor: "editor.html", kit: "kit.html", initial: "player.html", teacher: "teacher.html",
stage: "stage.html", micro: "micro.html", showcase: "showcase.html" };
var me = document.currentScript;
var ORIGIN = me ? me.src.replace(/\/embed\.js(\?.*)?$/, "") : location.origin;
function build(el) {
var v = (el.getAttribute("data-varasys-metronome") || "micro").toLowerCase();
var page = PAGES[v] || "micro.html";
var patch = el.getAttribute("data-patch");
var sl = el.getAttribute("data-setlist");
var hash = patch ? "#p=" + encodeURIComponent(patch)
: sl ? "#sl=" + encodeURIComponent(sl) : "";
var f = document.createElement("iframe");
f.src = ORIGIN + "/" + page + "?embed=1" + hash;
f.title = "VARASYS PolyMeter — " + v;
f.loading = "lazy";
f.setAttribute("allow", "autoplay");
f.setAttribute("data-vmeter", v);
f.style.cssText = "border:0;display:block;max-width:100%;width:" +
(el.getAttribute("data-width") || "100%") + ";height:" +
(el.getAttribute("data-height") || "300") + "px";
(el.replaceWith ? el.replaceWith(f) : el.parentNode.replaceChild(f, el));
}
function init() {
var els = document.querySelectorAll("[data-varasys-metronome]");
for (var i = 0; i < els.length; i++) build(els[i]);
}
// auto-resize: the widget posts { type:'varasys-h', h } on load/resize
window.addEventListener("message", function (e) {
if (!e.data || e.data.type !== "varasys-h" || typeof e.data.h !== "number") return;
var f = document.querySelectorAll("iframe[data-vmeter]");
for (var i = 0; i < f.length; i++) if (f[i].contentWindow === e.source) f[i].style.height = e.data.h + "px";
});
if (document.readyState !== "loading") init();
else document.addEventListener("DOMContentLoaded", init);
})();