Refactor three.js to add Orbitcontrols to preview3D

General: - Implement javascript modules (type="module", import and export) - implement default way of using three.js - add orbitcontrols (part of three.js) to preview3D app.js - import from index.js and three - export userFun - make canvas not draggable and dblclick for modal - preview3D: add orbitcontrols index.css: - rename box and column to screenBox and screenColumn - cursor: move only for screenBox, default cursor for canvas index.htm - replace r128/three.min.js by importmap 0.156.1/build/three.module.js index.js - import userFun from app.js - export jsonValues, gId and cE - add window eventlistener on Load - rename box and column to screenBox and screenColumn - dblclick for modal and textarea (instead of click) - simple nodes: disable drag of parent screenBox AppLedsV - NUM_LEDS_Preview 8192 (temp?) AppModLedFixGen - add geodesicDome3D (wip) SysModUI / SysModWeb - refactor addURL and add index.js and app.js (as they are now type="module" javascripts cdata.js - add writeChunks of index.js and app.js into html)js.h
ewowi · Sep 14, 2023 · 796fa1b · 796fa1b
1 parent 0c98d44
commit 796fa1b
Show file tree

Hide file tree

Showing 12 changed files with 1,315 additions and 435 deletions.
diff --git a/data/app.js b/data/app.js
@@ -6,12 +6,19 @@
 // @Copyright (c) 2023 Github StarMod Commit Authors
 // @license   GNU GENERAL PUBLIC LICENSE Version 3, 29 June 2007
 
+import { gId, cE, jsonValues, toggleModal } from './index.js';
+
+import * as THREE from 'three';
+
+import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
+
 var renderer = null;
 var scene = null;
 var camera = null;
-var previousFunction;
+var controls = null;
+// var previousFunction;
 
-function userFun(userFunId, data) {
+export function userFun(userFunId, data) {
   if (userFunId == "pview" && jsonValues.pview) {
     let leds = new Uint8Array(data);
     let pviewNode = gId("pview");
@@ -23,11 +30,13 @@ function userFun(userFunId, data) {
       let canvasNode = cE("canvas");
       canvasNode.width = pviewNode.width;
       canvasNode.height = pviewNode.height;
-
+      canvasNode.draggable = true;
+      canvasNode.addEventListener('dragstart', (event) => {event.preventDefault(); event.stopPropagation();});
+
       pviewNode.parentNode.replaceChild(canvasNode, pviewNode);
       pviewNode = canvasNode;
       pviewNode.id = "pview";
-      pviewNode.addEventListener('click', (event) => {toggleModal(event.target);});
+      pviewNode.addEventListener('dblclick', (event) => {toggleModal(event.target);});
     }
 
     // console.log("userFun", leds);
@@ -84,6 +93,7 @@ function preview2D(node, leds) {
   }
 }
 
+//https://stackoverflow.com/questions/8426822/rotate-camera-in-three-js-with-mouse
 function preview3D(node, leds) {
   //3D vars
   // let mW = leds[0];
@@ -115,6 +125,12 @@ function preview3D(node, leds) {
     scene = new THREE.Scene();
     scene.background = null; //new THREE.Color( 0xff0000 );
 
+    controls = new OrbitControls( camera, renderer.domElement );
+    controls.target.set( 0, 0.5, 0 );
+    controls.update();
+    controls.enablePan = false;
+    controls.enableDamping = true;
+
   } //new
 
   if (jsonValues.pview && jsonValues.pview.new) { //set the new coordinates
@@ -181,11 +197,9 @@ function preview3D(node, leds) {
     }
   }
 
-  //rotate the 3D view
-  scene.rotation.x += 0.01;
-  scene.rotation.y += 0.01;
-  renderer.render( scene, camera );
+  controls.update(); // apply orbit controls
 
+  renderer.render( scene, camera);
 }
 
 function previewBoard(node, leds) {
@@ -197,7 +211,7 @@ function previewBoard(node, leds) {
   let lOf = Math.floor((node.width - pPL*mW)/2); //left offeset (to center matrix)
   let i = 4;
   ctx.clearRect(0, 0, node.width, node.height);
-  for (y=0.5;y<mH;y++) for (x=0.5; x<mW; x++) {
+  for (let y=0.5;y<mH;y++) for (let x=0.5; x<mW; x++) {
     if (leds[i] + leds[i+1] + leds[i+2] > 20) { //do not show nearly blacks
       ctx.fillStyle = `rgb(${leds[i]},${leds[i+1]},${leds[i+2]})`;
       ctx.beginPath();

diff --git a/data/index.css b/data/index.css
@@ -36,6 +36,7 @@ canvas {
 	height: 100%;
 	border-radius: 12px;
 	background: transparent;
+	cursor: default;
 }
 
 body {
@@ -110,7 +111,7 @@ h1,h2 {
     grid-template-columns: repeat(4, 1fr);
 }
 
-.box {
+.screenBox {
   border: 3px solid #666;
   /* background-color: #ddd; */
   /* background: linear-gradient(to bottom, #33ccff 0%, #ff99cc 100%); */
@@ -121,19 +122,19 @@ h1,h2 {
   cursor: move;
 }
 
-.box:hover {
+.screenBox:hover {
   background-color: #00BFFF;
 }
 
-.column {
+.screenColumn {
   border: 3px solid #666;
   /* border-radius: .5em; */
   border-radius: 21px;
   padding: 10px;
-  cursor: move;
+  /* cursor: move; */
 }
 
-.box.over, .column.over {
+.screenBox.over, .screenColumn.over {
   border: 3px dotted #666;
 }
 

diff --git a/data/index.htm b/data/index.htm
@@ -12,12 +12,22 @@
   <title>StarMod by MoonModules</title>
   <meta charset="utf-8">
   <link rel="stylesheet" href="index.css">
-  <script src="app.js"></script>
-  <script src="index.js"></script>
-  <!-- https://www.foxy.io/blog/faster-pageloads-effectively-using-http-caching-cache-busting-and-a-cdn/ -->
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js" max-age=86400></script>
+
+  <!-- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules -->
+  <script async src="https://unpkg.com/[email protected]/dist/es-module-shims.js"></script>
+  <script type="importmap">
+    {
+      "imports": {
+        "three": "https://unpkg.com/[email protected]/build/three.module.js",
+        "three/addons/": "https://unpkg.com/[email protected]/examples/jsm/"
+      }
+    }
+  </script>
+  <!-- tbd: add max-age=86400 to imports -->
+  <script type="module" src="app.js"></script>
+  <script type="module" src="index.js"></script>
 </head>
-<body onload="onLoad()">
+<body>
   <h1>StarMod by MoonModules</h1>
   <div class="container">
     <div id="screenColumn0" class = "screenColumn">

diff --git a/data/index.js b/data/index.js
@@ -6,19 +6,22 @@
 // @Copyright (c) 2023 Github StarMod Commit Authors
 // @license   GNU GENERAL PUBLIC LICENSE Version 3, 29 June 2007
 
+// import { on } from 'nodemon';
+import { userFun } from './app.js';
+
 let d = document;
 let ws = null;
 
 let screenColumnNr = 0;
 let nrOfScreenColumns = 4;
 let userFunId = "";
 let htmlGenerated = false;
-let jsonValues = {};
+export let jsonValues = {};
 let uiFunCommands = [];
 let model = null; //model.json (as send by the server)
 
-function gId(c) {return d.getElementById(c);}
-function cE(e) { return d.createElement(e); }
+export function gId(c) {return d.getElementById(c);}
+export function cE(e) { return d.createElement(e); }
 
 function handleVisibilityChange() {
   console.log("handleVisibilityChange");
@@ -27,11 +30,13 @@ function handleVisibilityChange() {
 function onLoad() {
   makeWS();
 
-  initColumns();
+  initScreenColumns();
 
   d.addEventListener("visibilitychange", handleVisibilityChange, false);
 }
 
+window.addEventListener('load', onLoad);
+
 function makeWS() {
   if (ws) return;
   let url = (window.location.protocol == "https:"?"wss":"ws")+'://'+window.location.hostname+'/ws';
@@ -121,13 +126,13 @@ function generateHTML(parentNode, json, rowNr = -1) {
       newNode = cE("div");
       newNode.id = json.id
       newNode.draggable = true;
-      newNode.className = "box";
+      newNode.className = "screenBox";
 
       let h2Node = cE("h2");
       h2Node.innerText = initCap(json.id);
       newNode.appendChild(h2Node);
 
-      setupBox(newNode);
+      setupScreenBox(newNode);
     }
     else if (json.type == "table") {
       ndivNeeded = false;
@@ -185,15 +190,15 @@ function generateHTML(parentNode, json, rowNr = -1) {
           var pNode = cE("p");
           pNode.appendChild(labelNode);
 
-          spanNode = cE("span");
+          let spanNode = cE("span");
           spanNode.innerText= "🔍";
           pNode.appendChild(spanNode);
 
           parentNode.appendChild(pNode);
 
           newNode = cE("canvas");
           newNode.id = json.id;
-          newNode.addEventListener('click', (event) => {toggleModal(event.target);});
+          newNode.addEventListener('dblclick', (event) => {toggleModal(event.target);});
         }
         else if (json.type == "textarea") {
           pNode = cE("p");
@@ -203,7 +208,7 @@ function generateHTML(parentNode, json, rowNr = -1) {
           newNode = cE("textarea");
           newNode.id = json.id;
           newNode.readOnly = json.ro;
-          newNode.addEventListener('click', (event) => {toggleModal(event.target);});
+          newNode.addEventListener('dblclick', (event) => {toggleModal(event.target);});
 
           if (json.value) newNode.innerText = json.value;
           // newNode.appendChild(textareaNode);
@@ -310,6 +315,10 @@ function generateHTML(parentNode, json, rowNr = -1) {
           if (buttonSaveNode) newNode.appendChild(buttonSaveNode);
           if (buttonCancelNode) newNode.appendChild(buttonCancelNode);
         } //input type
+
+        //disable drag of parent screenBox
+        newNode.draggable = true;
+        newNode.addEventListener('dragstart', (event) => {event.preventDefault(); event.stopPropagation();});
       } //table header
     } //primitive types
 
@@ -328,7 +337,7 @@ function generateHTML(parentNode, json, rowNr = -1) {
       if (json.n) {
         //add a div with _n extension and details have this as parent
         if (ndivNeeded) {
-          divNode = cE("div");
+          let divNode = cE("div");
           divNode.id = json.id + "_n";
           divNode.classList.add("ndiv");
           newNode.appendChild(divNode);
@@ -359,7 +368,7 @@ function processUpdate(json) {
     if (gId(json.id + "_n")) 
       gId(json.id + "_n").remove();
     if (json.n) {
-      divNode = cE("div");
+      let divNode = cE("div");
       divNode.id = json.id + "_n";
       divNode.classList.add("ndiv");
       gId(json.id).parentNode.appendChild(divNode);
@@ -628,7 +637,7 @@ function setSelect(element) {
 let isModal = false;
 let modalPlaceHolder;
 
-function toggleModal(element) {
+export function toggleModal(element) {
   // console.log("toggleModal", element);
   isModal = !isModal;
 
@@ -672,30 +681,30 @@ function initCap(s) {
 var dragSrcEl;
 
 // https://stackoverflow.com/questions/75698658/how-can-i-drag-and-drop-like-browser-tabs-in-javascript
-function initColumns() {
+function initScreenColumns() {
 
-  let columns = document.querySelectorAll('.container .column');
+  let columns = document.querySelectorAll('.container .screenColumn');
   columns.forEach(function(column) {
     column.addEventListener('dragover', handleDragOver);
     column.addEventListener('dragenter', handleDragEnter);
     column.addEventListener('dragleave', handleDragLeave);
     column.addEventListener('drop', handleDrop);
   });
 
-  setupBoxes();
+  setupScreenBoxes();
 
 }
 
-function setupBoxes() {
-  let boxes = document.querySelectorAll('.container .box');
+function setupScreenBoxes() {
+  let boxes = document.querySelectorAll('.container .screenBox');
   boxes.forEach(function(box) {
-    setupBox(box);
+    setupScreenBox(box);
   });
 
 }
 
 // var lastPage;
-function setupBox(item) {
+function setupScreenBox(item) {
   item.addEventListener('dragstart', handleDragStart);
   item.addEventListener('dragover', handleDragOver);
   item.addEventListener('dragenter', handleDragEnter);
@@ -724,12 +733,12 @@ function handleDragStart(e) {
 function removeDragStyle(item) {
   item.style.opacity = '1';
 
-  let boxes = document.querySelectorAll('.container .box');
+  let boxes = document.querySelectorAll('.container .screenBox');
   boxes.forEach(function (item) {
     item.classList.remove('over');
   });
 
-  let columns = document.querySelectorAll('.container .column');
+  let columns = document.querySelectorAll('.container .screenColumn');
   columns.forEach(function (item) {
     item.classList.remove('over');
   });
@@ -761,7 +770,7 @@ function handleDrop(e) {
     console.log("handleDrop", dragSrcEl, this, e, e.dataTransfer);
 
     const clone = dragSrcEl.cloneNode(true);
-    setupBox(clone);
+    setupScreenBox(clone);
     removeDragStyle(clone);
 
     if (this.id.includes("screenColumn")) {

diff --git a/src/App/AppLedsV.h b/src/App/AppLedsV.h
@@ -12,7 +12,7 @@
 #include <vector>
 #include "ArduinoJson.h"
 
-#define NUM_LEDS_Preview 4096
+#define NUM_LEDS_Preview 8192
 
 //keep them global for the time being as FastLed effects refer to them and want to keep that code as unchanged as possible
 //(so maybe move there?)