1e29264cymsimweb: WebGPU companion of cymsim with YAML/form editor, live spectrogram and playbackJeremy Magland 1
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>
15 </header>
16 <section class="run">
17 <div class="row">
18 <label>Preset <select id="preset"></select></label>
19 </div>
20 <div class="row buttons">
21 <button id="import">Import YAML</button>
22 <input id="file" type="file" accept=".yaml,.yml,text/yaml" hidden />
23 <button id="download-yaml">Download YAML</button>
24 </div>
25 <div class="row buttons">
26 <button id="start" class="primary">Start</button>
27 <button id="pause" disabled>Pause</button>
28 <button id="stop" disabled>Stop</button>
29 </div>
30 <div class="row"><progress id="progress" value="0" max="1"></progress><span id="progress-text"></span></div>
31 <div id="backend" class="muted"></div>
32 </section>
33 <div class="tabs">
34 <button data-tab="yaml" class="active">YAML</button>
35 <button data-tab="form">Form</button>
36 <button data-tab="summary">Set-up</button>
37 </div>
38 <div id="tab-yaml" class="tab"><div id="editor"></div></div>
39 <div id="tab-form" class="tab hidden"><div id="form"></div></div>
40 <div id="tab-summary" class="tab hidden"><div id="summary"></div></div>
41 <ul id="issues"></ul>
42 </aside>
43 <main>
44 <section id="plate-section">
45 <div class="toolbar">
46 <span>Plate</span>
47 <label>exaggeration <input id="exag" type="range" min="0" max="3" step="0.1" value="1.3" /><span id="exag-text">x20</span></label>
48 <button id="reset-view">Reset view</button>
49 <span id="plate-info" class="muted"></span>
50 </div>
51 <canvas id="plate"></canvas>
52 </section>
53 <section id="spec-section">
54 <div class="toolbar">
55 <span>Spectrogram</span>
56 <label>signal <select id="signal"><option value="unbaffled">unbaffled</option><option value="rayleigh">Rayleigh (baffled)</option></select></label>
57 <span id="spec-info" class="muted"></span>
58 </div>
59 <canvas id="spectrogram"></canvas>
60 </section>
61 <section id="playback">
62 <button id="play" disabled>Play</button>
63 <button id="stop-audio" disabled>Stop</button>
64 <input id="position" type="range" min="0" max="1" step="0.001" value="0" />
65 <span id="time">0.000 s</span>
66 <label>gain <input id="gain" type="range" min="-40" max="0" step="1" value="-12" /><span id="gain-text">-12 dB</span></label>
67 <label><input id="normalize" type="checkbox" checked /> normalize</label>
68 <button id="download-wav" disabled>Download WAV</button>
69 </section>
70 <section id="readouts"></section>
71 </main>
72 </div>
73 <script type="module" src="./src/main.ts"></script>
74 </body>
75</html>