5dcef691c1
- src/notation.js — web notation engine inlined into pm_e-2.html (@BUILD:include) - rust/pm-ui/src/notation/ — the notation module pm-ui/lib.rs imports - rust/glyphgen/ + rust/assets/bravura/ (Bravura.otf + OFL.txt) — host atlas generator + font src - rust/Cargo.toml (workspace) + rust/.gitignore - assets/bravura.woff2.b64 (web font subset, @BUILD:bravura@) + info-pm_e-2.html Without these a clean checkout couldn't build pm_e-2.html or compile pm-ui. (Left hardware/eda make_svg* + kicad/_svgtest.json untracked — unrelated scratch.)
74 lines
4.4 KiB
HTML
74 lines
4.4 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>VARASYS PM_E‑2 PolyMeter Editor (Notation) — what it is</title>
|
||
<meta name="description" content="PM_E‑2 PolyMeter Editor — the second-generation web workbench built around proper engraved drum notation: a 5-line percussion staff in the Bravura (SMuFL) music font, with Staff / TUBS / Konnakol views, edit-on-staff, and the full vocabulary — accents, ghosts, flams, drags, rolls, odd meters, polyrhythm and clave. Same share-language program string as every form factor." />
|
||
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml;base64,@BUILD:favicon@">
|
||
<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; --field-bd:#2a313c; --silk:#aab2bc; }
|
||
:root[data-theme="light"]{ --bg1:#f5f8fc; --bg2:#dde4ec; --txt:#1e2630; --muted:#5c6776; --link:#1769c4;
|
||
--panel-bg:#ffffff; --panel-bd:#d2dae4; --field-bg:#f1f4f8; --field-bd:#d2dae4; }
|
||
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:980px; margin:0 auto; }
|
||
.info-hero{ text-align:center; padding:16px 8px 2px; }
|
||
.info-hero h1{ font-size:clamp(24px,5vw,36px); margin:0; letter-spacing:-.01em; }
|
||
.info-hero .sub{ margin:9px auto 0; max-width:64ch; font-size:14.5px; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
/*@BUILD:include:src/header.html@*/
|
||
|
||
<main>
|
||
<section class="info-hero">
|
||
<h1>PM_E‑2 PolyMeter Editor — Notation</h1>
|
||
<p class="sub">The second-generation editor, built around <b>proper engraved drum notation</b>. Design a groove and read it as a real percussion staff — the same program string still plays identically on every form factor.</p>
|
||
</section>
|
||
|
||
/*@BUILD:include:src/infoembed.html@*/
|
||
|
||
<section class="about">
|
||
<h2>What it is</h2>
|
||
<div class="ff-tags"><span>Web app</span><span>Engraved notation</span><span>Runs in any browser</span></div>
|
||
<p>Where the first-generation <a href="/info-editor.html">PM_E‑1 editor</a> is built around a step-pad grid,
|
||
<b>PM_E‑2 is built around notation</b>. Grooves render on a 5-line percussion staff engraved with the
|
||
<b>Bravura</b> music font (the open <a href="https://www.smufl.org/" target="_blank" rel="noopener">SMuFL</a>
|
||
standard used by professional scoring apps): real noteheads (X for cymbals, filled for drums), stems up for
|
||
hands and down for feet, group-aware beaming, <b>accents</b>, <b>ghost notes</b> in parentheses, and the full
|
||
ornament vocabulary — <b>flams, drags and rolls</b>. You can <b>edit directly on the staff</b>: click a step to
|
||
cycle its dynamic, Shift-click to cycle its ornament.</p>
|
||
<p>Three views share one engine: the <b>Staff</b>, a <b>TUBS</b> grid (Time Unit Box System — the clearest way to
|
||
read odd meters, polyrhythms and West-African bell patterns at a glance), and a <b>Konnakol</b> syllable view
|
||
(South-Indian solkattu — “ta ka di mi”) for spoken rhythm. Clave patterns are detected and labelled
|
||
(2-3 / 3-2). It's zero-install, runs in any modern browser, and works fully offline.</p>
|
||
<p>Everything you design saves to the same compact <b>program string</b> in the shared share-language, so a groove
|
||
built here loads into the original editor, the hardware concepts, or an embedded widget and plays back identically
|
||
everywhere.</p>
|
||
</section>
|
||
|
||
<p class="sub" style="max-width:760px;margin:14px auto 0">Embed the editor (or any device) elsewhere with one <code><div></code> + a script —
|
||
see <a href="/embed.html">the embed docs</a>.</p>
|
||
</main>
|
||
|
||
/*@BUILD:include:src/footer.html@*/
|
||
|
||
<script>
|
||
const APP_VERSION = "v0.0.1-dev";
|
||
window.INFO_DEVICE = { file:"/pm_e-2.html", name:"PM_E‑2 PolyMeter Editor" };
|
||
/*@BUILD:include:src/infoembed.js@*/
|
||
/*@BUILD:include:src/chrome.js@*/
|
||
</script>
|
||
</body>
|
||
</html>
|