New UI: set values, add Range, Coord3D and table support, child vars

New UI: ====== index.htm: - remove title (set in onLoad) - add threejs import (now StarBase supported) index.js - onload: add document.title mainnav.js - set activeModuleJson and updateUI: rename moduleFun to createHTMLFun and add setDefaultValues modules.js - createHTML: remove requestJson onUI (moved to Variable.createHTML) - add setDefaultValues - addModule updateUI: add setDefaultValues parameter - Variable: add sub classes: RangeVariable, Coord3D variable and table Variable (WIP) - Variable.createHTML: requestJson onUI and recursive call of child variables - Variable.receiveData: temp hack to deal with table values - CheckboxVariable: add indeterminate (WIP) - SelectVariable: add receiveData and deal with select options - CanvasVariable: generateData: if no file, add demo file theme.js: better alignment SysModModel: - Coord3D add: += *= and *
ewowi · Aug 18, 2024 · 0886757 · 0886757
1 parent 49a6222
commit 0886757
Show file tree

Hide file tree

Showing 11 changed files with 2,143 additions and 1,151 deletions.
diff --git a/data/index.js b/data/index.js
@@ -1302,7 +1302,7 @@ function changeHTML(variable, commandJson, rowNr = UINT8_MAX) {
     variable.json = commandJson.json;
   }
 
-  if (commandJson.hasOwnProperty("file")) { //json send html nodes cannot process, store in jsonValues array
+  if (commandJson.hasOwnProperty("file")) {
     console.log("changeHTML file requested", variable.id, rowNr, commandJson);
 
     //we need to send a request which the server can handle using request variable

diff --git a/data/newui/index.htm b/data/newui/index.htm
@@ -16,7 +16,6 @@
   <meta content="yes" name="apple-mobile-web-app-capable">
   <meta content="width=device-width, initial-scale=1" name="viewport" /> <!-- needed for navbar-->
   <meta name="author" content="MoonModules and its contributors">
-  <title>StarBase💫 by MoonModules 🌔</title>
   <link rel="icon" href="https://ewowi.github.io/StarDocs/assets/images/ui/starbase/favicon-16x16.png">
   <script src="index.js"></script>
   <script src="theme.js"></script>
@@ -26,6 +25,14 @@
   <script src="modules.js"></script>
   <link rel="stylesheet" href="modules.css">
   <script src="../app.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>
 </head>
 <body id="body" onload="controller.onLoad()"></body>
 </html>
diff --git a/data/newui/index.js b/data/newui/index.js
@@ -18,6 +18,7 @@ class Controller {
   mainNav = null
 
   onLoad() {
+    document.title = appName() + "💫 by MoonModules 🌔"
     if (window.location.href.includes("127.0.0.1"))
       this.fetchModelForLiveServer();
     else 
@@ -156,19 +157,14 @@ class Controller {
 
   requestJson(command) {
     if (window.location.href.includes("127.0.0.1")) { //Live Server
-
       // after a short delay (ws roundtrip)
-      //find variable
-      //create class of variable
-      //generate data for variable
-
+      // Live server generates data every second
     } else {
-
       if (!this.ws) return;
 
       let req = JSON.stringify(command);
 
-      console.log("requestJson", command);
+      // console.log("requestJson", command);
 
       this.ws.send(req);  
     }
@@ -182,7 +178,6 @@ class Controller {
 
         let variable = this.modules.findVar(key);       
         if (variable) {
-          variable.fun = -2; // request processed
           let variableClass = varJsonToClass(variable);
           variableClass.receiveData(value)
         } // if variable

diff --git a/data/newui/mainnav.js b/data/newui/mainnav.js
@@ -104,17 +104,20 @@ class MainNav {
     })
 
     // Update the page content
-    // TODO: Real code needed: done: this.#moduleFun
-    if (this.#moduleFun) {
+    if (this.#createHTMLFun) {
         document.getElementById('page').innerHTML = 
       `<div class="d-flex flex-column h-100 overflow-hidden">
         <div class="flex-shrink-0">
           <h1 class="title">${this.#activeModuleJson.id}</h1>
         </div>
-        <div class="overflow-y-auto">` + this.#moduleFun(this.#activeModuleJson) +
+        <div class="overflow-y-auto">` + this.#createHTMLFun(this.#activeModuleJson) +
         `</div>
       </div>`
     }
+    //done after innerHTML as it needs to find the nodes. tbd: createHTMLFun adds to dom directly
+    if (this.#setDefaultValuesFun) {
+      this.#setDefaultValuesFun(this.#activeModuleJson)
+    }
   } //set activeModuleJson(moduleJson)
 
   /**
@@ -171,9 +174,11 @@ class MainNav {
    * Update the UI
    */
   //updateUI is made after all modules have been fetched, how to adapt to add one module?
-  updateUI(moduleJson, fun) {
+  updateUI(moduleJson, createHTMLFun, setDefaultValuesFun) {
 
-    this.#moduleFun = fun //sets the function which displays a module
+    //functions called when selecting a module
+    this.#createHTMLFun = createHTMLFun
+    this.#setDefaultValuesFun = setDefaultValuesFun
 
     this.#updateMainMenu();
     this.#updateSecondaryMenu();
@@ -195,5 +200,6 @@ class MainNav {
   #activeModuleJson = ''
 
   //stores the function to execute to display one module
-  #moduleFun = null;
+  #createHTMLFun = null;
+  #setDefaultValuesFun = null;
 }
diff --git a/data/newui/modules.css b/data/newui/modules.css
@@ -27,4 +27,10 @@ label {
 	  color: var(--text-color);
 	  font-size: 8px; /*var(--font-size-s) not working for some reason */
   }
+
+  .ndiv {
+    /* border: 2px solid black; */
+    margin-left: 20px;
+    /* border-radius: 12px; */
+  }