NewUI: sort vars, module type names, button and check, var class reorg

modules.js - modules.createHTML: sort module variables - modules.addModule: rename type to human readable - varJsonToClass: add ButtonVariable and CheckboxVariable - Variable class: only common denominator. Add defaults which can be changed in subclasses SysModSystem - timeBase and Now both numbers
ewowi · Aug 11, 2024 · 29dfda3 · 29dfda3
1 parent ffeb1a9
commit 29dfda3
Show file tree

Hide file tree

Showing 8 changed files with 1,957 additions and 1,027 deletions.
diff --git a/data/modules.js b/data/modules.js
@@ -17,6 +17,12 @@ class Modules {
     let code = ""
     controller.modules.test("ew")
     // this.test("ew") //this.otherMethodInThisClass: [Error] Unhandled Promise Rejection: TypeError: this.test is not a function. (In 'this.test("ew")', 'this.test' is undefined)
+
+    // sort module variables
+    moduleJson.n.sort(function(a,b) {
+      return Math.abs(a.o) - Math.abs(b.o); //o is order nr (ignore negatives for the time being)
+    });
+
     for (let variable of moduleJson.n) {
 
       let variableClass = varJsonToClass(variable);
@@ -43,6 +49,7 @@ class Modules {
 
   //used by fetchModel and by makeWS
   addModule(moduleJson) {
+    moduleJson.type = moduleJson.type=="appmod"?appName():moduleJson.type=="usermod"?"User":"System"; 
     this.model.push(moduleJson);
 
     //updateUI is made after all modules have been fetched, how to adapt to add one module?
@@ -89,12 +96,16 @@ class Modules {
 //creates the right class based on variable.type
 function varJsonToClass(variable) {
   switch (variable.type) {
+    case "button":
+      return new ButtonVariable(variable);
     case "progress":
       return new ProgressVariable(variable);
     case "text":
       return new TextVariable(variable);
     case "select":
       return new SelectVariable(variable);
+    case "checkbox":
+      return new CheckboxVariable(variable);
     default:
       return new Variable(variable);
   }
@@ -107,59 +118,101 @@ class Variable {
     this.node = document.getElementById(variable.id);
   }
 
-  createHTML() { //base
+  createHTML(node = `<input id=${this.variable.id} type=${this.variable.type} class="${this.variable.type}" value="${this.variable.value}"></input>`) { //base
     return `<p>
-            <label>${this.variable.id}</label>
-            <input id=${this.variable.id} type=${this.variable.type} class="${this.variable.type}" value="${this.variable.value}"></input>
+            <label>${initCap(this.variable.id)}</label>
+            ${node}
             <p>`
-
   }
 
   //sets the value of the node to value of properties
   receiveData(properties) { //base
-    if (this.node && properties.value)
-      this.node.value = properties.value;
+    if (this.node) {
+      if (properties.label) {
+        let labelNode = this.node.parentNode.querySelector("label")
+        if (labelNode)
+          labelNode.innerText = properties.label;
+        else
+          this.node.parentNode.innerHTML = `<label>${properties.label}</label>` + this.node.parentNode.innerHTML
+      }
+      if (properties.value != null && this.node.value != null) {
+        this.node.value = properties.value;
+      }
+      if (properties.comment) {
+        let commentNode = this.node.parentNode.querySelector("comment")
+        if (commentNode)
+          commentNode.innerText = properties.comment
+        else
+          this.node.parentNode.innerHTML += `<comment>${properties.comment}</comment>`
+      }
+    } 
   }
 
-  generateData() {
-    controller.receiveData(JSON.parse(`{"${this.variable.id}":{"value":${Math.random() * 1000}}}`));
+  generateData(custom = `"value":${Math.random() * 1000}`) {
+    if (custom != "") custom += ", "
+    controller.receiveData(JSON.parse(`{"${this.variable.id}":{${custom}"comment":"${Math.random().toString(36).slice(2)}"}}`));
   }
 
 } //class Variable
 
-class ProgressVariable extends Variable {
+class TextVariable extends Variable {
+
+  createHTML() { //base
+    return super.createHTML(`<input id=${this.variable.id} type=${this.variable.type} class="${this.variable.type}" value="${this.variable.value}"></input>`);
+  }
+
+  generateData() {
+    super.generateData(`"value":"${Math.random().toString(36).slice(2)}"`)
+  }
+
+} //class TextVariable
+
+class CheckboxVariable extends Variable {
+
+  receiveData(properties) { //base
+    super.receiveData(properties)
+    if (this.node && properties.value != null)
+      this.node.checked = properties.value
+  }
+
+  generateData() {
+    super.generateData(`"value":${(Math.random()<0.5)?1:0}`)
+  }
+
+} //class CheckboxVariable
+
+class ButtonVariable extends Variable {
 
   createHTML() { //override
-    return `<p>
-          <label>${this.variable.id}</label>
-          <progress max="${this.variable.max}" id="${this.variable.id}" class="progress"></progress>
-          <p>`
+    return super.createHTML(`<input id=${this.variable.id} type=${this.variable.type} class="${this.variable.type}" value="${initCap(this.variable.id)}"></input>`)
+  }
+
+  generateData() {
+    super.generateData("") //no value update
   }
-} //class ProgressVariable
+
+} //class ButtonVariable
 
 class SelectVariable extends Variable {
 
   createHTML() { //override
-    return `<p>
-            <label>${this.variable.id}</label>
-            <select max="${this.variable.max}" id="${this.variable.id}" class="select"></select>
-            <p>`
+    return super.createHTML(`<select id="${this.variable.id}" class="select"></select>`)
   }
 
   generateData() {
     //add sample options
     if (this.node && this.node.childNodes.length == 0)
       this.node.innerHTML+='<option value=0>One</option><option value=1>Two</option><option value=2>Three</option>'
 
-    controller.receiveData(JSON.parse(`{"${this.variable.id}":{"value":${Math.random() <.33?0:Math.random() <.66?1:2}}}`));
+    super.generateData(`"value":${Math.random() <.33?0:Math.random() <.66?1:2}`)
   }
 
 } //class SelectVariable
 
-class TextVariable extends Variable {
+class ProgressVariable extends Variable {
 
-  generateData() {
-    controller.receiveData(JSON.parse(`{"${this.variable.id}":{"value":"${Math.random().toString(36).slice(2)}"}}`));
+  createHTML() { //override
+    return super.createHTML(`<progress max="${this.variable.max}" id="${this.variable.id}" class="progress"></progress>`)
   }
 
-} //class TextVariable
+} //class ProgressVariable
diff --git a/data/newui.htm b/data/newui.htm
@@ -18,14 +18,14 @@
   <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="app.js"></script>
   <script src="newui.js"></script>
   <script src="theme.js"></script>
   <link rel="stylesheet" href="theme.css">
   <script src="mainnav.js"></script>
   <link rel="stylesheet" href="mainnav.css">
   <script src="modules.js"></script>
   <link rel="stylesheet" href="modules.css">
+  <script src="app.js"></script>
 </head>
 <body id="body" onload="controller.onLoad()"></body>
 </html>
diff --git a/data/newui.js b/data/newui.js
@@ -90,7 +90,7 @@ class Controller {
                 found = true;
             }
             if (!found) {
-              this.addModule(json);
+              this.modules.addModule(json);
             }
             else
               console.log("html of module already generated", json);
@@ -130,7 +130,7 @@ class Controller {
   }
 
   receiveData(json) {
-    // console.log("re", json)
+    // console.log("receiveData", json)
     if (isObject(json)) {
       for (let key of Object.keys(json)) {
         let value = json[key]
@@ -158,7 +158,14 @@ window.controller = new Controller()
 
 
 
-// Utility function
+// Utility functions
+
+function initCap(s) {
+  if (typeof s !== 'string') return '';
+  // https://www.freecodecamp.org/news/how-to-capitalize-words-in-javascript/
+  return s.replace(/[\W_]/g,' ').replace(/(^\w{1})|(\s+\w{1})/g, l=>l.toUpperCase()); // replace - and _ with space, capitalize every 1st letter
+}
+
 //https://stackoverflow.com/questions/8511281/check-if-a-value-is-an-object-in-javascript
 function isObject(val) {
   if (Array.isArray(val)) return false;

diff --git a/data/theme.js b/data/theme.js
@@ -13,7 +13,7 @@ class Theme {
   createHTML() {
     let body = document.getElementById("body");//gId("body");
 
-    body.innerHTML+= `
+    body.innerHTML += `
     <label>Theme</label> 
     <select name="theme-select" id="theme-select" onchange="controller.theme.setTheme(this.value)">
       <option value="starbase">StarBase</option>

diff --git a/misc/model.json b/misc/model.json
@@ -407,7 +407,7 @@
         "id": "pw",
         "type": "password",
         "ro": false,
-        "value": "zonledmod",
+        "value": "ewtrpw",
         "oldValue": "",
         "max": 63,
         "o": 55,

diff --git a/src/Sys/SysModSystem.cpp b/src/Sys/SysModSystem.cpp
@@ -58,21 +58,23 @@ void SysModSystem::setup() {
 
   ui->initText(parentVar, "upTime", nullptr, 16, true, [](JsonObject var, unsigned8 rowNr, unsigned8 funType) { switch (funType) { //varFun
     case onUI:
-      ui->setComment(var, "Uptime of board");
+      ui->setComment(var, "s. Uptime of board");
       return true;
     default: return false;
   }});
 
   ui->initNumber(parentVar, "now", UINT16_MAX, 0, (unsigned long)-1, true, [this](JsonObject var, unsigned8 rowNr, unsigned8 funType) { switch (funType) { //varFun
     case onUI:
       ui->setLabel(var, "now");
+      ui->setComment(var, "s");
       return true;
     default: return false;
   }});
 
   ui->initNumber(parentVar, "timeBase", UINT16_MAX, 0, (unsigned long)-1, true, [this](JsonObject var, unsigned8 rowNr, unsigned8 funType) { switch (funType) { //varFun
     case onUI:
       ui->setLabel(var, "TimeBase");
+      ui->setComment(var, "s");
       return true;
     default: return false;
   }});
@@ -218,8 +220,10 @@ void SysModSystem::loop() {
 
 void SysModSystem::loop1s() {
   mdl->setUIValueV("upTime", "%lu s", millis()/1000);
-  mdl->setUIValueV("now", "%lu s", now/1000);
-  mdl->setUIValueV("timeBase", "%lu s", (now<millis())? - (UINT32_MAX - timebase)/1000:timebase/1000);
+  // mdl->setUIValueV("now", "%lu s", now/1000);
+  mdl->setValue(mdl->findVar("now"), now/1000);
+  // mdl->setUIValueV("timeBase", "%lu s", (now<millis())? - (UINT32_MAX - timebase)/1000:timebase/1000);
+  mdl->setValue(mdl->findVar("timeBase"), (now<millis())? - (UINT32_MAX - timebase)/1000:timebase/1000);
   mdl->setUIValueV("loops", "%lu /s", loopCounter);
 
   loopCounter = 0;