From a7dbb0b34276007e326c2933e06ce6d21be87252 Mon Sep 17 00:00:00 2001 From: Drew C Youngren Date: Tue, 7 Nov 2023 08:48:00 -0500 Subject: [PATCH] Set scale from query string --- media/src/App.svelte | 70 +++++++++++++++++++++++------- media/src/Panel.svelte | 28 ++---------- media/src/settings/Settings.svelte | 53 +++++++++++++++------- media/src/stores.js | 5 ++- media/src/utils.js | 17 +++++++- 5 files changed, 114 insertions(+), 59 deletions(-) diff --git a/media/src/App.svelte b/media/src/App.svelte index 0780c700..957c4571 100644 --- 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 index 5608fe65..2ed28af5 100644 --- 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 index 546da241..3a39f509 100644 --- a/media/src/settings/Settings.svelte +++ b/media/src/settings/Settings.svelte @@ -1,9 +1,21 @@ {#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; + }} /> - {scala} + {scalaTemp} diff --git a/media/src/stores.js b/media/src/stores.js index 57627095..f49029d7 100644 --- 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') \ No newline at end of file +export const colorMap = writable('plasma'); +export const densityColormap = writable('PuBuGn'); +export const viewScale = writable(0); \ No newline at end of file diff --git a/media/src/utils.js b/media/src/utils.js index 1017e325..578e06c0 100644 --- 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, };