Add local visual preset save/load and tidy data UI

README.md

@@ -24,9 +24,13 @@ demo, except the Capture section:
 - bloom enabled/intensity/threshold
 - sunrays enabled/weight
 
-The preset system currently ships with **Default**, which is the current
-reference configuration. Any manual change is shown as **Custom**; additional
-named presets can be added later without changing the control flow.
+The preset system ships with **Default**, which is the current reference
+configuration. Any manual change is shown as **Custom**.
+
+Named presets can be saved from the Visuals panel and loaded again from the
+preset selector. Saved presets use the app's existing local persistence object,
+so they stay in the current browser alongside the other Web Demo preferences.
+Saved presets can also be deleted locally.
 
 ### Augmenta splat input
 
@@ -45,7 +49,8 @@ as a fallback when point correspondence is not stable.
 ## Augmenta data
 
 The former Display section and Live debug data section are combined as
-**Augmenta data**.
+**Augmenta data**, placed before Visuals so tracking/debug controls remain the
+first data-oriented section after Connection.
 
 Scene selection and the Clusters, Point clouds, Scenes, Zones, and Velocity
 vectors toggles use the original Three.js example renderer. Enabled overlays are
@@ -71,3 +76,8 @@ an Augmenta server.
 
 GitHub Pages is deployed from `main` by
 `.github/workflows/pages.yml`.
+
+## Branding
+
+The app uses the same `augmenta-favicon.png` asset as the Augmenta Three.js
+example for browser icons and the sidebar footer.

index.html

@@ -5,9 +5,9 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta name="theme-color" content="#0c0f14">
   <meta name="color-scheme" content="dark">
-  <link rel="icon" type="image/png" href="./augmenta-favicon.png?v=4">
-  <link rel="shortcut icon" type="image/png" href="./augmenta-favicon.png?v=4">
-  <link rel="apple-touch-icon" href="./augmenta-favicon.png?v=4">
+  <link rel="icon" type="image/png" href="./augmenta-favicon.png?v=5">
+  <link rel="shortcut icon" type="image/png" href="./augmenta-favicon.png?v=5">
+  <link rel="apple-touch-icon" href="./augmenta-favicon.png?v=5">
   <title>Augmenta Web Demo</title>
   <meta name="description" content="Interactive real-time spatial data demo powered by Augmenta.">
   <link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin>
@@ -127,6 +127,48 @@ <h1>Augmenta Web Demo</h1>
         </div>
       </details>
 
+      <details id="data-section" class="panel-section debug-panel" open>
+        <summary class="section-summary">
+          <span class="section-chevron" aria-hidden="true"></span>
+          <span class="panel-heading-copy">
+            <span class="panel-title">Augmenta data</span>
+          </span>
+          <span id="summary" class="panel-summary-value">No data yet</span>
+        </summary>
+
+        <div class="panel-content">
+          <div class="display-scenes">
+            <div class="field-heading">
+              <label for="scenes">Scenes</label>
+              <button id="reset-camera" class="text-action" type="button">Reset camera</button>
+            </div>
+            <select id="scenes" disabled>
+              <option value="all">All scenes</option>
+            </select>
+          </div>
+
+          <div class="toggles data-overlay-controls">
+            <div class="toggle-column">
+              <label><input id="show-clusters" type="checkbox" checked> Clusters</label>
+              <label><input id="show-points" type="checkbox" checked> Point clouds</label>
+              <label><input id="show-vectors" type="checkbox" checked> Velocity vectors</label>
+            </div>
+            <div class="toggle-column">
+              <label><input id="show-scene" type="checkbox" checked> Scenes</label>
+              <label><input id="show-zones" type="checkbox" checked> Zones</label>
+            </div>
+          </div>
+
+          <div class="panel-actions data-panel-actions">
+            <button id="clear" class="text-action" type="button">Clear data</button>
+          </div>
+
+          <div id="debug-content" class="debug-content">
+            <div class="empty-state">Connect to Augmenta or run the demo to inspect the stream.</div>
+          </div>
+        </div>
+      </details>
+
       <details id="visuals-section" class="panel-section" open>
         <summary class="section-summary">
           <span class="section-chevron" aria-hidden="true"></span>
@@ -138,11 +180,18 @@ <h1>Augmenta Web Demo</h1>
 
         <div class="panel-content">
           <div class="visual-preset-field">
-            <label for="visual-preset">Preset</label>
+            <div class="field-heading">
+              <label for="visual-preset">Preset</label>
+              <div class="preset-actions">
+                <button id="visual-preset-save" class="text-action" type="button">Save as</button>
+                <button id="visual-preset-delete" class="text-action" type="button" hidden disabled>Delete</button>
+              </div>
+            </div>
             <select id="visual-preset">
               <option value="default" selected>Default</option>
               <option value="custom" hidden disabled>Custom</option>
             </select>
+            <p class="field-subtitle">Saved presets stay local to this browser.</p>
           </div>
 
           <label class="advanced-toggle visual-master-toggle">
@@ -285,48 +334,6 @@ <h1>Augmenta Web Demo</h1>
         </div>
       </details>
 
-      <details id="debug-section" class="panel-section debug-panel" open>
-        <summary class="section-summary">
-          <span class="section-chevron" aria-hidden="true"></span>
-          <span class="panel-heading-copy">
-            <span class="panel-title">Augmenta data</span>
-          </span>
-          <span id="summary" class="panel-summary-value">No data yet</span>
-        </summary>
-
-        <div class="panel-content">
-          <div class="display-scenes">
-            <div class="field-heading">
-              <label for="scenes">Scenes</label>
-              <button id="reset-camera" class="text-action" type="button">Reset camera</button>
-            </div>
-            <select id="scenes" disabled>
-              <option value="all">All scenes</option>
-            </select>
-          </div>
-
-          <div class="toggles data-overlay-controls">
-            <div class="toggle-column">
-              <label><input id="show-clusters" type="checkbox" checked> Clusters</label>
-              <label><input id="show-points" type="checkbox" checked> Point clouds</label>
-              <label><input id="show-vectors" type="checkbox" checked> Velocity vectors</label>
-            </div>
-            <div class="toggle-column">
-              <label><input id="show-scene" type="checkbox" checked> Scenes</label>
-              <label><input id="show-zones" type="checkbox" checked> Zones</label>
-            </div>
-          </div>
-
-          <div class="panel-actions data-panel-actions">
-            <button id="clear" class="text-action" type="button">Clear data</button>
-          </div>
-
-          <div id="debug-content" class="debug-content">
-            <div class="empty-state">Connect to Augmenta or run the demo to inspect the stream.</div>
-          </div>
-        </div>
-      </details>
-
       <footer class="sidebar-footer">
         <div class="sidebar-footer-app">
           <div class="sidebar-footer-title">Augmenta Web Demo</div>
@@ -340,7 +347,7 @@ <h1>Augmenta Web Demo</h1>
             rel="noopener noreferrer"
             aria-label="Visit the Augmenta website"
           >
-            <img src="./augmenta-favicon.png?v=4" alt="" width="16" height="16">
+            <img src="./augmenta-favicon.png?v=5" alt="" width="16" height="16">
             <span>augmenta.tech</span>
           </a>
           <span id="app-version">Version —</span>

src/app-info.js

@@ -1 +1 @@
-export const APP_VERSION = '0.4.0';
+export const APP_VERSION = '0.5.0';