ce6166a721
The full-feature desktop console (big TFT, arcade buttons, instrument pass-through) is repositioned as the "Teacher" for studio desks and lessons: - stage.html -> teacher.html, info-stage.html -> info-teacher.html (git mv) - all links/paths, the embed variant (stage -> teacher), nav, cards, embed docs, README, build.sh + deploy.sh updated; deploy cleans the stale live stage files The "Stage" name is now free for a forthcoming foot-pedal stompbox (/stage.html). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
54 lines
2.5 KiB
JavaScript
54 lines
2.5 KiB
JavaScript
/* 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 | initial | teacher | 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 <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", initial: "player.html", teacher: "teacher.html", micro: "micro.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);
|
||
})();
|