1c74100065
- Shared header/footer/chrome (src/header.html, src/footer.html, src/chrome.js) now on every page: editor (header above its app toolbar), player, teacher, stage, micro, showcase, embed. chrome.js defers to DOMContentLoaded so the footer version stamps regardless of placement. Player's fullscreen toggle relocated out of the header to a floating control. - Open = Info: each form-factor page is self-contained — a more-detailed description (.about) + an expandable "Spec & BOM" (<details class="spec">, hidden in embed). info-*.html retired; build/deploy/README updated. Next: teacher-style dimensioned front + top/side views + loading panels for Stage, Micro and Showcase. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
94 lines
4.9 KiB
HTML
94 lines
4.9 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>Embed a PolyMeter widget — VARASYS</title>
|
||
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml;base64,@BUILD:favicon@">
|
||
<!-- Docs for the embeddable PolyMeter widget. Dogfoods embed.js with a live example. -->
|
||
<script>
|
||
(function(){ try{
|
||
var p = localStorage.getItem("metronome.theme");
|
||
if (p!=="light" && p!=="dark" && p!=="system") p = "system";
|
||
document.documentElement.dataset.theme = p==="system" ? (matchMedia("(prefers-color-scheme: light)").matches ? "light" : "dark") : p;
|
||
} catch(e){ document.documentElement.dataset.theme = "dark"; } })();
|
||
</script>
|
||
<style>
|
||
/*@BUILD:include:src/base.css@*/
|
||
:root{ --bg1:#12151c; --bg2:#05070a; --txt:#c7d0db; --muted:#7f8b9a; --link:#6cb6ff;
|
||
--panel-bg:#161b22; --panel-bd:#2a313c; --field-bg:#0e1116; }
|
||
:root[data-theme="light"]{ --bg1:#f5f8fc; --bg2:#dde4ec; --txt:#1e2630; --muted:#5c6776; --link:#1769c4;
|
||
--panel-bg:#ffffff; --panel-bd:#d2dae4; --field-bg:#f1f4f8; }
|
||
body{ margin:0; min-height:100vh; padding:22px 16px 56px; color:var(--txt);
|
||
background:radial-gradient(circle at 50% -8%, var(--bg1), var(--bg2)); }
|
||
a{ color:var(--link); }
|
||
main{ width:100%; max-width:760px; margin:26px auto 0; }
|
||
h1{ font-size:24px; margin:0 0 4px; } h2{ font-size:16px; margin:26px 0 8px; }
|
||
p{ color:var(--muted); font-size:14px; line-height:1.6; } p.lead{ max-width:60ch; }
|
||
pre{ background:var(--field-bg); border:1px solid var(--panel-bd); border-radius:9px; padding:12px 14px;
|
||
overflow:auto; font-size:12.5px; line-height:1.5; color:var(--txt); }
|
||
code{ background:var(--field-bg); border:1px solid var(--panel-bd); border-radius:4px; padding:1px 5px; font-size:12px; }
|
||
table{ border-collapse:collapse; font-size:13px; width:100%; }
|
||
th,td{ text-align:left; padding:5px 8px; border-bottom:1px solid var(--panel-bd); vertical-align:top; }
|
||
th{ color:var(--muted); font-weight:600; font-size:11px; text-transform:uppercase; letter-spacing:.04em; }
|
||
td.k{ white-space:nowrap; color:var(--cyan); font-family:"Courier New",monospace; }
|
||
.demo{ background:var(--panel-bg); border:1px solid var(--panel-bd); border-radius:14px; padding:14px; margin-top:8px; }
|
||
.site-foot{ max-width:760px; margin:40px auto 0; font-size:12px; color:var(--muted); }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
/*@BUILD:include:src/header.html@*/
|
||
|
||
<main>
|
||
<h1>Embed a PolyMeter widget</h1>
|
||
<p class="lead">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 <b>program / settings string</b> you give it.</p>
|
||
|
||
<h2>Drop-in (recommended)</h2>
|
||
<pre><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></pre>
|
||
<p>The script replaces the <code><div></code> with an auto-sizing iframe. Here it is, live on this page:</p>
|
||
<div class="demo">
|
||
<div data-varasys-metronome="micro" data-patch="v1;t120;kick:4;snare:4=.X.X;hatClosed:4/2"></div>
|
||
</div>
|
||
|
||
<h2>Or a plain iframe</h2>
|
||
<pre><iframe src="https://metronome.varasys.io/micro.html?embed=1#p=v1;t120;kick:4"
|
||
width="360" height="300" style="border:0"></iframe></pre>
|
||
|
||
<h2>Form factors — <code>data-varasys-metronome</code></h2>
|
||
<table>
|
||
<thead><tr><th>value</th><th>widget</th></tr></thead>
|
||
<tbody>
|
||
<tr><td class="k">editor</td><td>PE‑1 PolyMeter Editor (full app)</td></tr>
|
||
<tr><td class="k">initial</td><td>PM‑1 Initial (idealized device)</td></tr>
|
||
<tr><td class="k">teacher</td><td>PM‑1 Teacher (studio / lesson console)</td></tr>
|
||
<tr><td class="k">micro</td><td>PM‑µ Micro (inline practice bar)</td></tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
<h2>Configuration / settings string</h2>
|
||
<table>
|
||
<thead><tr><th>attribute</th><th>what</th></tr></thead>
|
||
<tbody>
|
||
<tr><td class="k">data-patch</td><td>A PolyMeter program string, e.g. <code>v1;t120;kick:4;snare:4=.X.X;hatClosed:4/2</code>. Copy it from the editor's program field.</td></tr>
|
||
<tr><td class="k">data-setlist</td><td>A base64url set‑list code (a whole set list) — share it from the editor.</td></tr>
|
||
<tr><td class="k">data-width / data-height</td><td>iframe size (default <code>100% × 300</code>; height auto‑grows to the widget).</td></tr>
|
||
</tbody>
|
||
</table>
|
||
<p>Under the hood the loader builds <code><page>?embed=1#p=<patch></code>; the page's <code>?embed=1</code> mode strips the
|
||
site chrome so only the widget shows. That's the same way our own Concept & Info pages embed it.</p>
|
||
</main>
|
||
|
||
<script>
|
||
const APP_VERSION = "v0.0.1-dev";
|
||
const $ = (id)=>document.getElementById(id);
|
||
/*@BUILD:include:src/chrome.js@*/
|
||
</script>
|
||
<script src="/embed.js"></script>
|
||
/*@BUILD:include:src/footer.html@*/
|
||
</body>
|
||
</html>
|