de6cf45cymroom: load a .cymsim file and show every part of it in a 3D scene; the room acoustics solver is not written yetJeremy 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>cymroom</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>cymroom</h1>
14 <span class="subtitle">a .cymsim run in a 3D acoustic scene</span>
15 </header>
16 <section>
17 <div class="row buttons">
18 <button id="load">Load .cymsim</button>
19 <input id="file" type="file" accept=".cymsim" hidden />
20 </div>
21 <div id="file-summary" class="muted">No file loaded. Load a .cymsim file written by cymsim or cymsimweb, or drop one anywhere on the page.</div>
22 </section>
23 <section id="view-controls" hidden>
24 <h2>View</h2>
25 <div class="row"><label>Surface color <select id="color-mode">
26 <option value="bronze">bronze</option>
27 <option value="thickness">thickness</option>
28 <option value="z0">rest height</option>
29 </select></label></div>
30 <div class="row"><label>Exaggeration <select id="exag">
31 <option value="1" selected>x1</option><option value="10">x10</option><option value="50">x50</option>
32 <option value="200">x200</option><option value="1000">x1000</option>
33 </select></label></div>
34 <div class="checks">
35 <label><input type="checkbox" id="ov-wireframe" /> wireframe</label>
36 <label><input type="checkbox" id="ov-boundary" checked /> boundary</label>
37 <label><input type="checkbox" id="ov-normals" /> normals</label>
38 <label><input type="checkbox" id="ov-hits" checked /> hit markers</label>
39 <label><input type="checkbox" id="ov-listener" checked /> listener</label>
40 <label><input type="checkbox" id="ov-grid" checked /> grid</label>
41 <label><input type="checkbox" id="ov-axes" /> axes</label>
42 </div>
43 <div class="muted">Drag to orbit, wheel to zoom, right-drag to pan. Click a node to probe it.</div>
44 </section>
45 <section id="listener-section" hidden>
46 <h2>Listener</h2>
47 <div class="row listener-xyz">
48 <label>x <input id="lis-x" type="number" step="0.05" /></label>
49 <label>y <input id="lis-y" type="number" step="0.05" /></label>
50 <label>z <input id="lis-z" type="number" step="0.05" /></label>
51 <span class="muted">m</span>
52 </div>
53 <div id="lis-status" class="muted"></div>
54 </section>
55 <section>
56 <div id="log" class="muted"></div>
57 </section>
58 </aside>
59 <main id="main">
60 <div id="scene-wrap">
61 <canvas id="scene"></canvas>
62 <div id="scene-empty">load a .cymsim file</div>
63 </div>
64 <div id="playback" hidden>
65 <label>Animate <select id="pb-source"></select></label>
66 <button id="pb-play" disabled>Play</button>
67 <label>Slowdown <select id="pb-slowdown"></select></label>
68 <input id="pb-pos" type="range" min="0" max="1000" value="0" step="1" />
69 <span id="pb-time" class="mono">0.000 s</span>
70 </div>
71 </main>
72 <aside id="inspector">
73 <nav id="tabs">
74 <button data-tab="summary" class="active">Summary</button>
75 <button data-tab="config">Config</button>
76 <button data-tab="energy">Energy</button>
77 <button data-tab="hits">Hits</button>
78 <button data-tab="audio">Audio</button>
79 <button data-tab="probe">Probe</button>
80 </nav>
81 <div id="tab-summary" class="tab active"><div class="muted">Load a file to see its contents.</div></div>
82 <div id="tab-config" class="tab"><pre id="config-yaml" class="mono"></pre></div>
83 <div id="tab-energy" class="tab">
84 <canvas id="energy-plot" class="plot"></canvas>
85 <div class="muted">Energies on a log scale; the lower panel is the nonlinearity meter max|w|/h.</div>
86 </div>
87 <div id="tab-hits" class="tab"><div id="hits-table"></div></div>
88 <div id="tab-audio" class="tab">
89 <div class="row">
90 <select id="audio-signal"></select>
91 <button id="audio-play" disabled>Play</button>
92 </div>
93 <div id="audio-info" class="muted"></div>
94 <canvas id="audio-wave" class="plot"></canvas>
95 <canvas id="audio-spec" class="plot tall"></canvas>
96 </div>
97 <div id="tab-probe" class="tab">
98 <div id="probe-info" class="muted">Click a node on the cymbal to probe it.</div>
99 <div class="row"><button id="probe-play" hidden>Play pickup</button></div>
100 <canvas id="probe-wave" class="plot" hidden></canvas>
101 <canvas id="probe-spec" class="plot tall" hidden></canvas>
102 </div>
103 </aside>
104 </div>
105 <script type="module" src="./src/main.ts"></script>
106 </body>
107</html>