Update ids in index.html for easier refactor
1 changed file+78−60
index.htmlmodified+78−60View file
@@ -229,16 +229,52 @@
229229 browser by <a href="https://numbl.org">numbl</a>. Edit either and watch
230230 it change. Drag to rotate.
231231 </p>
232- <div class="controls">
232+ <div class="controls ctrl-group" data-group="surface">
233233 <label>preset
234234 <select id="model"></select>
235235 </label>
236236 <label title="The surface the pattern is solved on. Swapping it does not recompile the solver or restart the run.">geometry
237237 <select id="geometry"></select>
238238 </label>
239- <label title="Blend between the sphere (0) and the surface (1). Display only.">morph
240- <input type="range" id="morph" min="0" max="1" step="0.01" value="1" />
239+ </div>
240+ <div class="ctrl-group" data-group="surface-params">
241+ <div class="controls" id="params"></div>
242+ <div class="controls" id="geomparams"></div>
243+ </div>
244+ <!-- Transitional: the mode-entry buttons move into a top-level `.modes`
245+ row in the next phase. Structure/behavior unchanged for now. -->
246+ <div class="controls">
247+ <button id="comparetoggle" title="Run several solver settings side by side on one clock">Compare</button>
248+ <button id="cmp-load"
249+ title="Check this solver against a saved reference run (.h5, the layout in docs/ellipsoid-reference-spec.md): opens a comparison seeded from its exact initial state, with its own settings, that runs to its end time and is measured against its final state.">
250+ Compare to reference…</button>
251+ <input type="file" id="cmp-file" accept=".h5" hidden>
252+ </div>
253+ <div class="controls" id="comparebar" hidden>
254+ <div class="cmp-axes">
255+ <div class="cmp-axis">
256+ <span title="Iterations of the implicit diffusion solve">solve iters</span>
257+ <span id="cmp-niter" class="chips"></span>
258+ </div>
259+ <div class="cmp-axis">
260+ <span>lmax</span>
261+ <span id="cmp-lmax" class="chips"></span>
262+ </div>
263+ <div class="cmp-axis">
264+ <span title="Timestep, as a divisor of the model's dt. Divisors keep every variant on the same clock exactly.">dt</span>
265+ <span id="cmp-dt" class="chips"></span>
266+ </div>
267+ </div>
268+ <label title="The run everything else is measured against">reference
269+ <select id="cmp-ref"></select>
241270 </label>
271+ <span id="cmp-fileinfo" class="stats" hidden></span>
272+ <button id="cmp-fileclear" hidden
273+ title="Drop the reference file and compare the variants against each other again">×</button>
274+ <button id="cmp-start" class="primary">Compare</button>
275+ <span id="cmp-count" class="stats"></span>
276+ </div>
277+ <div class="controls ctrl-group" data-group="solver">
242278 <label title="Iterations of the implicit diffusion solve. Changing it recompiles.">solve iters
243279 <select id="niter">
244280 <option value="0">0</option>
@@ -260,6 +296,8 @@
260296 <option value="255">255</option>
261297 </select>
262298 </label>
299+ </div>
300+ <div class="controls ctrl-group" data-group="display">
263301 <label title="Render on a finer grid. Display only.">display oversampling
264302 <select id="oversample">
265303 <option value="auto" selected>auto</option>
@@ -272,72 +310,52 @@
272310 <label>colormap
273311 <select id="colormap"></select>
274312 </label>
313+ <label title="Blend between the sphere (0) and the surface (1). Display only.">morph
314+ <input type="range" id="morph" min="0" max="1" step="0.01" value="1" />
315+ </label>
316+ <button id="resetview">Reset view</button>
317+ </div>
318+ <div class="controls ctrl-group" data-group="playback">
275319 <button id="runpause" class="primary">Run</button>
320+ </div>
321+ <div class="controls ctrl-group" data-group="benchmark">
276322 <button id="benchmark">Benchmark</button>
323+ </div>
324+ <div class="controls ctrl-group" data-group="seed">
277325 <label title="Wavelength of the smooth random field the initial condition is seeded from (chebfun's randnfun3, restricted to the surface). An absolute length in the surface's own units, as in chebfun — not a fraction of its size — so smaller means finer features to grow from. Nothing caps it but memory and patience — 0.02 takes about 3 s to seed, 0.01 about 25 s — but it is only *useful* down to about 2*pi/lmax (0.1 at lmax 63): below that the field carries more detail than the grid holds, init's analys discards it, and the seed gets weaker rather than finer. Raise lmax to go finer.">seed λ
278326 <input id="lam3" type="number" min="0" step="0.05" value="0.5">
279327 </label>
280328 <button id="reseed">Re-seed</button>
281- <button id="resetview">Reset view</button>
282- <button id="movietoggle" title="Export the run as an MP4 movie">Export movie</button>
283- <button id="comparetoggle" title="Run several solver settings side by side on one clock">Compare</button>
284- <button id="cmp-load"
285- title="Check this solver against a saved reference run (.h5, the layout in docs/ellipsoid-reference-spec.md): opens a comparison seeded from its exact initial state, with its own settings, that runs to its end time and is measured against its final state.">
286- Compare to reference…</button>
287- <input type="file" id="cmp-file" accept=".h5" hidden>
288329 </div>
289- <div class="controls" id="comparebar" hidden>
290- <div class="cmp-axes">
291- <div class="cmp-axis">
292- <span title="Iterations of the implicit diffusion solve">solve iters</span>
293- <span id="cmp-niter" class="chips"></span>
294- </div>
295- <div class="cmp-axis">
296- <span>lmax</span>
297- <span id="cmp-lmax" class="chips"></span>
298- </div>
299- <div class="cmp-axis">
300- <span title="Timestep, as a divisor of the model's dt. Divisors keep every variant on the same clock exactly.">dt</span>
301- <span id="cmp-dt" class="chips"></span>
302- </div>
330+ <div class="controls ctrl-group" data-group="movie">
331+ <button id="movietoggle" title="Export the run as an MP4 movie">Export movie</button>
332+ <div class="controls" id="moviebar" hidden>
333+ <label title="Simulation-time units per second of video">movie speed
334+ <select id="moviespeed">
335+ <option value="0.1">0.1×</option>
336+ <option value="0.5">0.5×</option>
337+ <option value="1">1×</option>
338+ <option value="3">3×</option>
339+ <option value="5">5×</option>
340+ <option value="10" selected>10×</option>
341+ <option value="20">20×</option>
342+ </select>
343+ </label>
344+ <label title="Size of each sphere panel in the video, in pixels">resolution
345+ <select id="movieres">
346+ <option value="480">480</option>
347+ <option value="640">640</option>
348+ <option value="768" selected>768</option>
349+ <option value="1080">1080</option>
350+ <option value="1440">1440</option>
351+ </select>
352+ </label>
353+ <label title="Slowly orbit the camera during the movie">
354+ <input type="checkbox" id="movierotate" checked /> auto-rotate
355+ </label>
356+ <button id="movie" title="Replay the run from t = 0 and download an MP4">Export</button>
303357 </div>
304- <label title="The run everything else is measured against">reference
305- <select id="cmp-ref"></select>
306- </label>
307- <span id="cmp-fileinfo" class="stats" hidden></span>
308- <button id="cmp-fileclear" hidden
309- title="Drop the reference file and compare the variants against each other again">×</button>
310- <button id="cmp-start" class="primary">Compare</button>
311- <span id="cmp-count" class="stats"></span>
312- </div>
313- <div class="controls" id="moviebar" hidden>
314- <label title="Simulation-time units per second of video">movie speed
315- <select id="moviespeed">
316- <option value="0.1">0.1×</option>
317- <option value="0.5">0.5×</option>
318- <option value="1">1×</option>
319- <option value="3">3×</option>
320- <option value="5">5×</option>
321- <option value="10" selected>10×</option>
322- <option value="20">20×</option>
323- </select>
324- </label>
325- <label title="Size of each sphere panel in the video, in pixels">resolution
326- <select id="movieres">
327- <option value="480">480</option>
328- <option value="640">640</option>
329- <option value="768" selected>768</option>
330- <option value="1080">1080</option>
331- <option value="1440">1440</option>
332- </select>
333- </label>
334- <label title="Slowly orbit the camera during the movie">
335- <input type="checkbox" id="movierotate" checked /> auto-rotate
336- </label>
337- <button id="movie" title="Replay the run from t = 0 and download an MP4">Export</button>
338358 </div>
339- <div class="controls" id="params"></div>
340- <div class="controls" id="geomparams"></div>
341359 <p id="geomnote" class="stats"></p>
342360 <div id="panels"></div>
343361 <p class="stats" id="stats"></p>