/ proof-of-concept / cymsimweb
Sign in
proof-of-concept / cymsimweb
6d7f34a
Branches
main
cymsimweb / index.html
91 lines · 4.8 KBCodeBlameHistory
2<html lang="en">
3 <head>
4 <meta charset="UTF-8" />
5 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6 <title>cymsimweb</title>
7 <link rel="stylesheet" href="./src/style.css" />
8 </head>
9 <body>
10 <div id="app">
11 <aside id="sidebar">
12 <header>
13 <h1>cymsimweb</h1>
14 <span class="subtitle">struck-cymbal simulation on WebGPU</span>
08a7051Chat panel with a local Claude Code bridge: app-state, YAML, run and playback toolsJeremy Magland 15 <button id="chat-toggle" class="chat-toggle" title="chat with Claude Code about this app">Chat</button>
17 <section class="run">
18 <div class="row">
19 <label>Preset <select id="preset"></select></label>
20 </div>
21 <div class="row buttons">
22 <button id="import">Import YAML</button>
23 <input id="file" type="file" accept=".yaml,.yml,text/yaml" hidden />
24 <button id="download-yaml">Download YAML</button>
25 </div>
26 <div class="row buttons">
27 <button id="start" class="primary">Start</button>
28 <button id="pause" disabled>Pause</button>
29 <button id="stop" disabled>Stop</button>
30 </div>
31 <div class="row"><progress id="progress" value="0" max="1"></progress><span id="progress-text"></span></div>
32 <div id="backend" class="muted"></div>
33 </section>
34 <div class="tabs">
35 <button data-tab="yaml" class="active">YAML</button>
36 <button data-tab="form">Form</button>
37 <button data-tab="summary">Set-up</button>
38 </div>
39 <div id="tab-yaml" class="tab"><div id="editor"></div></div>
40 <div id="tab-form" class="tab hidden"><div id="form"></div></div>
41 <div id="tab-summary" class="tab hidden"><div id="summary"></div></div>
42 <ul id="issues"></ul>
43 </aside>
cffea67UI: exaggeration defaults to x1, play position returns to 0 after playback, resizable panesJeremy Magland 44 <div class="splitter vertical" data-target="sidebar" data-var="--sidebar-w"></div>
46 <section id="plate-section">
47 <div class="toolbar">
48 <span>Plate</span>
cffea67UI: exaggeration defaults to x1, play position returns to 0 after playback, resizable panesJeremy Magland 49 <label>exaggeration <input id="exag" type="range" min="0" max="3" step="0.1" value="0" /><span id="exag-text">x1</span></label>
3534482Linear spectrogram axis by default; capture and replay the displacement movie at a chosen slowdownJeremy Magland 50 <label>movie <input id="movie-fps" type="number" min="60" max="44100" step="100" value="2000" title="frames per second of simulated time" /> fps</label>
1e29264cymsimweb: WebGPU companion of cymsim with YAML/form editor, live spectrogram and playbackJeremy Magland 51 <button id="reset-view">Reset view</button>
52 <span id="plate-info" class="muted"></span>
53 </div>
54 <canvas id="plate"></canvas>
56 <button id="movie-play" disabled>Replay</button>
57 <button id="movie-stop" disabled>Stop</button>
58 <label>slowdown <input id="slowdown" type="range" min="0.3" max="4" step="0.05" value="1.7" /><span id="slowdown-text">x50</span></label>
59 <input id="movie-pos" type="range" min="0" max="1" step="0.0001" value="0" disabled />
60 <span id="movie-info" class="muted">no frames</span>
61 </div>
cffea67UI: exaggeration defaults to x1, play position returns to 0 after playback, resizable panesJeremy Magland 63 <div class="splitter horizontal" data-target="plate-section" data-var="--plate-h"></div>
65 <div class="toolbar">
66 <span>Spectrogram</span>
67 <label>signal <select id="signal"><option value="unbaffled">unbaffled</option><option value="rayleigh">Rayleigh (baffled)</option></select></label>
3534482Linear spectrogram axis by default; capture and replay the displacement movie at a chosen slowdownJeremy Magland 68 <label>scale <select id="spec-scale"><option value="linear">linear</option><option value="log">log</option></select></label>
69 <label>max f <select id="spec-fmax"><option value="0">Nyquist</option><option value="20000">20 kHz</option><option value="10000">10 kHz</option><option value="5000">5 kHz</option><option value="2000">2 kHz</option></select></label>
1e29264cymsimweb: WebGPU companion of cymsim with YAML/form editor, live spectrogram and playbackJeremy Magland 70 <span id="spec-info" class="muted"></span>
71 </div>
72 <canvas id="spectrogram"></canvas>
73 </section>
cffea67UI: exaggeration defaults to x1, play position returns to 0 after playback, resizable panesJeremy Magland 74 <div class="splitter horizontal" data-target="readouts" data-var="--readouts-h" data-invert="1"></div>
76 <button id="play" disabled>Play</button>
77 <button id="stop-audio" disabled>Stop</button>
78 <input id="position" type="range" min="0" max="1" step="0.001" value="0" />
79 <span id="time">0.000 s</span>
80 <label>gain <input id="gain" type="range" min="-40" max="0" step="1" value="-12" /><span id="gain-text">-12 dB</span></label>
81 <label><input id="normalize" type="checkbox" checked /> normalize</label>
82 <button id="download-wav" disabled>Download WAV</button>
83 </section>
84 <section id="readouts"></section>
85 </main>
08a7051Chat panel with a local Claude Code bridge: app-state, YAML, run and playback toolsJeremy Magland 86 <div class="splitter vertical hidden" id="chat-splitter" data-target="chat" data-var="--chat-w" data-invert="1"></div>
87 <aside id="chat" class="hidden"></aside>
89 <script type="module" src="./src/main.ts"></script>
90 </body>
91</html>
↑↓ move↵openescclose