Set scale from query string

ccnmtl · Nov 7, 2023 · a7dbb0b · a7dbb0b
1 parent 9d0aa00
commit a7dbb0b
Show file tree

Hide file tree

Showing 5 changed files with 114 additions and 59 deletions.
diff --git a/media/src/App.svelte b/media/src/App.svelte
@@ -18,6 +18,7 @@
         drawGrid,
         labelAxes,
         modFloor,
+        scaleExp,
     } from './utils';
     import {
         // removeObject,
@@ -28,7 +29,7 @@
     import { handlePollEvent } from './polls/utils';
 
     //import stores
-    import { tickTock } from './stores.js';
+    import { tickTock, viewScale } from './stores.js';
 
     let debug = false;
     let stats;
@@ -40,11 +41,56 @@
     let selectedObjects = [];
     let hoveredObject = null;
     let selectedPoint = null;
-    let lockPoll = false;
+
+    // The objects array is the declarative data that the scene is based on.
+    let objects = [];
+
+    let gridMax = 1;
+    let gridStep = 1 / 5;
+
+    let currentChapter = 'How To';
+    let currentMode = 'how-to';
+
+    const urlParams = new URLSearchParams(location.search);
+    if (urlParams.keys()) {
+        const objectHolder = {};
+        urlParams.forEach((val, key) => {
+            // This is bad and stupid, and hopefully it will be done better.
+            // make a viewStatus object, maybe?
+
+            if (key === 'grid') {
+                gridMeshes.visible = val === 'true';
+            } else if (key === 'scale') {
+                $viewScale = parseFloat(val);
+                gridMax = scaleExp($viewScale);
+                gridStep = gridMax / 10;
+            } else if (key === 'debug') {
+                debug = val === 'true';
+                console.log('debuggery: ', debug);
+            } else if (key.slice(0, 3) === 'obj') {
+                console.log('got a obj');
+                const keyParts = key.split('_');
+                const obj = objectHolder[keyParts[0]] || { params: {} };
+                if (keyParts[1] === 'params') {
+                    obj.params[keyParts[2]] = val;
+                } else {
+                    obj[keyParts[1]] = val;
+                }
+                objectHolder[keyParts[0]] = obj;
+            }
+        });
+        for (const val of Object.values(objectHolder)) {
+            // objects = makeObject(val.uuid, val.kind, val.params, objects);
+            objects = [...objects, { uuid: crypto.randomUUID(), ...val }];
+            if (debug) console.log(objects);
+        }
+        console.log('Initializing...', objects);
+    }
 
     let canvas;
     let isPollsOpen = false;
 
+    let lockPoll = false;
     let showPollResults = false;
 
     const selectObject = (uuid) => {
@@ -112,8 +158,6 @@
         }
     }
 
-    let gridMax = 1,
-        gridStep = 1 / 5;
     const pi = Math.PI;
 
     // Make z the default up
@@ -171,7 +215,7 @@
     });
 
     // Make xy grid lines (off by default).
-    let gridMeshes = drawGrid({ lineMaterial });
+    let gridMeshes = drawGrid({ gridMax, gridStep, lineMaterial });
     gridMeshes.renderDepth = -1;
     gridMeshes.visible = false;
     scene.add(gridMeshes);
@@ -193,6 +237,8 @@
     let [axesText] = labelAxes(
         {
             scene,
+            gridMax,
+            gridStep,
             render: requestFrameIfNotRequested,
         },
         fontLoader,
@@ -201,7 +247,7 @@
 
     // from https://threejs.org/manual/#en/responsive
     const resizeRendererToDisplaySize = function (renderer) {
-        const canvas = renderer.domElement;
+        // const canvas = renderer.domElement;
         const width = canvas.clientWidth;
         const height = canvas.clientHeight;
         const needResize = canvas.width !== width || canvas.height !== height;
@@ -268,7 +314,7 @@
         }
 
         if (resizeRendererToDisplaySize(renderer)) {
-            const canvas = renderer.domElement;
+            // const canvas = renderer.domElement;
             if (orthoCamera) {
                 currentCamera.top = canvas.clientHeight / 2;
                 currentCamera.bottom = canvas.clientHeight / -2;
@@ -320,9 +366,6 @@
         return renderer;
     };
 
-    // The objects array is the declarative data that the scene is based on.
-    export let objects = [];
-
     // sceneObjects is the array of three.js objects present in the
     // scene. It's derived from the objects array, as a result of how
     // the data gets rendered by our svelte components
@@ -506,15 +549,12 @@
             canvas.toBlob((blob) => {
                 saveBlob(
                     blob,
-                    `screencapture-${canvas.width}x${canvas.height}.png`
+                    `3Demos-screencapture-${canvas.width}x${canvas.height}.png`
                 );
             });
         });
     });
 
-    let currentChapter = 'How To';
-    let currentMode = 'how-to';
-
     let pollResponses = {};
 
     // The chat buffer: an array of objects.
@@ -531,6 +571,7 @@
     const makeQueryStringObject = function () {
         const flattenedObjects = {
             currentChapter,
+            scale: $viewScale,
             showPanel,
         };
         if (gridMeshes.visible) {
@@ -718,7 +759,6 @@
             bind:currentMode
             bind:objects
             bind:currentChapter
-            bind:gridMeshes
             bind:gridStep
             bind:gridMax
             bind:chatBuffer

diff --git a/media/src/Panel.svelte b/media/src/Panel.svelte
@@ -39,7 +39,6 @@
     export let debug, currentMode;
     export let currentControls;
     export let currentChapter;
-    export let gridMeshes;
     export let gridStep, gridMax;
     export let objects, isHost;
     export let onRenderObject, onDestroyObject;
@@ -227,40 +226,19 @@
     onMount(() => {
         const urlParams = new URLSearchParams(location.search);
         if (urlParams.keys()) {
-            const objectHolder = {};
+            // const objectHolder = {};
             urlParams.forEach((val, key) => {
                 // This is bad and stupid, and hopefully it will be done better.
                 // make a viewStatus object, maybe?
                 if (key === 'currentChapter') {
                     currentChapter = val;
-                }
-                if (key === 'showPanel') {
+                } else if (key === 'showPanel') {
                     showPanel = !(val === 'false');
-                }
-                if (key === 'grid') {
-                    gridMeshes.visible = val === 'true';
-                }
-                if (key === 'debug') {
+                } else if (key === 'debug') {
                     debug = val === 'true';
                     console.log('debuggery: ', debug);
                 }
-                if (key.slice(0, 3) === 'obj') {
-                    const keyParts = key.split('_');
-                    const obj = objectHolder[keyParts[0]] || { params: {} };
-                    if (keyParts[1] === 'params') {
-                        obj.params[keyParts[2]] = val;
-                    } else {
-                        obj[keyParts[1]] = val;
-                    }
-                    objectHolder[keyParts[0]] = obj;
-                }
             });
-
-            for (const val of Object.values(objectHolder)) {
-                // objects = makeObject(val.uuid, val.kind, val.params, objects);
-                objects = [...objects, { uuid: crypto.randomUUID(), ...val }];
-                if (debug) console.log(objects);
-            }
         }
     });
 

diff --git a/media/src/settings/Settings.svelte b/media/src/settings/Settings.svelte
@@ -1,9 +1,21 @@
 <script>
-    import { createEventDispatcher } from 'svelte';
+    import { createEventDispatcher, onMount } from 'svelte';
     import { FontLoader } from 'three/examples/jsm/loaders/FontLoader.js';
     import { TextGeometry } from 'three/examples/jsm/geometries/TextGeometry.js';
-    import { drawAxes, drawGrid, labelAxes, freeChildren } from '../utils';
-    import { vMin, vMax, colorMap, densityColormap } from '../stores';
+    import {
+        drawAxes,
+        drawGrid,
+        labelAxes,
+        freeChildren,
+        scaleExp,
+    } from '../utils';
+    import {
+        vMin,
+        vMax,
+        colorMap,
+        densityColormap,
+        viewScale,
+    } from '../stores';
     import WindowHeader from './WindowHeader.svelte';
     import { colorMapNames } from '../js-colormaps';
     import { offclick } from './offclick';
@@ -12,7 +24,7 @@
 
     export let scene, camera, render, controls;
     export let gridMax, gridStep;
-    export let axesHolder, axesText, gridMeshes, lineMaterial, axesMaterial;
+    export let axesHolder, gridMeshes, lineMaterial, axesMaterial, axesText;
     export let animation = false;
     export let orthoCamera = false;
     export let encode;
@@ -50,16 +62,12 @@
 
     let scaleState = gridMax;
     let oldGridMax = gridMax;
-    let scale = 0;
 
-    $: scala =
-        Math.round(
-            100 *
-                Math.pow(10, Math.floor(scale)) *
-                Math.floor(
-                    Math.pow(10, scale) / Math.pow(10, Math.floor(scale))
-                )
-        ) / 100;
+    // These duplicate their non-Temp counterpart but are only for display which updates on moving input bar, though value only updates on change event.
+    let scaleTemp = 0;
+    $: scalaTemp = scaleExp(scaleTemp);
+
+    let scala;
 
     const rescale = function () {
         if (scala !== gridMax) {
@@ -143,6 +151,17 @@
         a.click();
         a.remove();
     };
+
+    onMount(() => {
+        const unsubscribe = viewScale.subscribe((value) => {
+            scala = scaleExp(value);
+            console.log('scale updated', scala);
+            rescale();
+        });
+        console.log('setting mounted');
+        scaleTemp = $viewScale;
+        return unsubscribe;
+    });
 </script>
 
 {#if showSettings}
@@ -175,10 +194,12 @@
                         min="-2"
                         max="3"
                         step=".02"
-                        bind:value={scale}
-                        on:change={rescale}
+                        bind:value={scaleTemp}
+                        on:change={(e) => {
+                            $viewScale = e.target.value;
+                        }}
                     />
-                    <span class="output text-end">{scala}</span>
+                    <span class="output text-end">{scalaTemp}</span>
                 </span>
             </div>
         </div>

diff --git a/media/src/stores.js b/media/src/stores.js
@@ -4,5 +4,6 @@ import { writable } from 'svelte/store';
 export const tickTock = writable(0.);
 export const vMin = writable(-1.);
 export const vMax = writable(1.);
-export const colorMap = writable('plasma')
-export const densityColormap = writable('PuBuGn')
+export const colorMap = writable('plasma');
+export const densityColormap = writable('PuBuGn');
+export const viewScale = writable(0);
diff --git a/media/src/utils.js b/media/src/utils.js
@@ -2647,6 +2647,20 @@ const norm2 = (...v) => {
     return Math.sqrt(tot);
 };
 
+/**
+ * exponential function for scale (log10) values
+ * @param {Number} scale 
+ * @returns {Number} approximate exponential for scaling axes
+ */
+const scaleExp = (scale) => Math.round(
+    100 *
+    Math.pow(10, Math.floor(scale)) *
+    Math.floor(
+        Math.pow(10, scale) /
+        Math.pow(10, Math.floor(scale))
+    )
+) / 100;
+
 export {
     norm2,
     joinUrl,
@@ -2678,5 +2692,6 @@ export {
     querySelectorIncludesText,
     checksum,
     modFloor,
-    tripleToHex
+    tripleToHex,
+    scaleExp,
 };