Store parent ids (pid) in model, used for var referencing (wip)

newui
- use pid.id
- index.js: gId("Pins.board")
- mainnav, theme.js: use gId
- modules.js: use variabe.pid, add "" around id=, type=

model.json
- new version, use pid

SysModModel.cpp
- doWriteModel: exclude also pid and oldValue from saved model.json

SysModUI
- initVar: add pid
- processJson: var:value rowNr bug fix

data/newui/index.js

@@ -73,7 +73,7 @@ class Controller {
       // console.log(buffer)
       // let buffer = new Uint8Array([0,1,2,3,4,5,6,7,8]);
       if (buffer[0] == 0) {
-        let canvasNode = document.getElementById("board");
+        let canvasNode = gId("Pins.board");
         if (canvasNode) {
           // console.log(buffer, pviewNode);
           for (let pinNr = 0; pinNr < controller.sysInfo.nrOfPins; pinNr++)
@@ -98,7 +98,7 @@ class Controller {
       if (e.data instanceof ArrayBuffer) { // binary packet - e.g. for preview
         let buffer = new Uint8Array(e.data);
         if (buffer[0]==0) {
-          let canvasNode = document.getElementById("board");
+          let canvasNode = gId("Pins.board");
           if (canvasNode) {
             // console.log(buffer, canvasNode);
             this.modules.previewBoard(canvasNode, buffer);

data/newui/mainnav.js

@@ -14,7 +14,7 @@
 class MainNav {
 
   createHTML() {
-    let body = document.getElementById("body");//gId("body");
+    let body = gId("body");
 
     body.classList += "d-flex flex-column";
 
@@ -105,7 +105,7 @@ class MainNav {
 
     // Update the page content
     if (this.#createHTMLFun) {
-        document.getElementById('page').innerHTML = 
+        gId('page').innerHTML = 
       `<div class="d-flex flex-column h-100 overflow-hidden">
         <div class="flex-shrink-0">
           <h1 class="title">${this.#activeModuleJson.id}</h1>
@@ -154,7 +154,7 @@ class MainNav {
         return `<div onclick="controller.mainNav.activeModuleType=this.dataset.type" class="menu-item selectable ${selected} pa-4" data-type="${type}">${type}</div>`
       })
       .join('')
-    document.getElementById('main-nav').innerHTML = html
+    gId('main-nav').innerHTML = html
   }
 
   // Update the secondary navigation menu
@@ -167,7 +167,7 @@ class MainNav {
       return `<div onclick="controller.mainNav.activeModuleId=this.dataset.id" class="menu-item selectable ${selected} text-truncate pa-3" data-id="${moduleJson.id}">${moduleJson.id}</div>`
     })
     .join('')
-    document.getElementById('second-nav').innerHTML = html
+    gId('second-nav').innerHTML = html
   }
 
   /**

data/newui/modules.js

@@ -91,6 +91,10 @@ class Modules {
 
   //finds a var with id in the model, if found returns it
   findVar(id) {
+    //temp: of pid.id, then search for id
+    let ids = id.split(".")
+    if (ids[1])
+      id = ids[1]
     // console.log("findVar", id, parent, model);
     return this.walkThroughModel(function(variable){
       if (variable.id == id) //found variable
@@ -231,10 +235,10 @@ class Variable {
 
   constructor(variable) {
     this.variable = variable
-    this.node = document.getElementById(variable.id);
+    this.node = gId(this.variable.pid+"."+variable.id);
   }
 
-  createHTML(node = `<input id=${this.variable.id} type=${this.variable.type} class="${this.variable.type}" value="${this.variable.value}"></input>`) {
+  createHTML(node = `<input id="${this.variable.pid+"."+this.variable.id}" type="${this.variable.type}" class="${this.variable.type}" value="${this.variable.value}"></input>`) {
     let code = `<p>
             <label>${initCap(this.variable.id)}</label>
             ${node}
@@ -246,7 +250,7 @@ class Variable {
     controller.requestJson(command); // this can be done here because of the async nature of requestJson, better is to do it after innerHTML+=...
 
     if (this.variable.n) {
-      code += `<div id=${this.variable.id}_n class="ndiv">`
+      code += `<div id="${this.variable.pid+"."+this.variable.id}_n" class="ndiv">`
       for (let childVar of this.variable.n) {
         let childClass = varJsonToClass(childVar)
         code += childClass.createHTML();
@@ -316,7 +320,7 @@ class TextVariable extends Variable {
 class CheckboxVariable extends Variable {
 
   createHTML() {
-    return super.createHTML(`<input id=${this.variable.id} type=${this.variable.type} class="${this.variable.type}"></input><span class="checkmark"></span>`);
+    return super.createHTML(`<input id="${this.variable.pid+"."+this.variable.id}" type="${this.variable.type}" class="${this.variable.type}"></input><span class="checkmark"></span>`);
   }
 
   receiveData(properties) {
@@ -336,12 +340,12 @@ class CheckboxVariable extends Variable {
 class RangeVariable extends Variable {
 
   createHTML() {
-    return super.createHTML(`<input id=${this.variable.id} type=${this.variable.type} min="0" max="255" class="${this.variable.type}"></input><span id=${this.variable.id}_rv>${this.variable.value}</span>`)
+    return super.createHTML(`<input id="${this.variable.pid+"."+this.variable.id}" type="${this.variable.type}" min="0" max="255" class="${this.variable.type}"></input><span id="${this.variable.pid+"."+this.variable.id}_rv">${this.variable.value}</span>`)
   }
 
   receiveData(properties) {
     super.receiveData(properties)
-    let rvNode = gId(this.variable.id + "_rv")
+    let rvNode = gId(this.variable.pid+"."+this.variable.id + "_rv")
     if (rvNode && properties.value != null)
       rvNode.innerText = properties.value
   }
@@ -355,7 +359,7 @@ class RangeVariable extends Variable {
 class ButtonVariable extends Variable {
 
   createHTML() {
-    return super.createHTML(`<input id=${this.variable.id} type=${this.variable.type} class="${this.variable.type}" value="${initCap(this.variable.id)}"></input>`)
+    return super.createHTML(`<input id="${this.variable.pid+"."+this.variable.id}" type="${this.variable.type}" class="${this.variable.type}" value="${initCap(this.variable.id)}"></input>`)
   }
 
   generateData() {
@@ -367,7 +371,7 @@ class ButtonVariable extends Variable {
 class SelectVariable extends Variable {
 
   createHTML() {
-    return super.createHTML(`<select id="${this.variable.id}" class="select"></select>`)
+    return super.createHTML(`<select id="${this.variable.pid+"."+this.variable.id}" class="select"></select>`)
   }
 
   receiveData(properties) {
@@ -396,7 +400,7 @@ class SelectVariable extends Variable {
 class ProgressVariable extends Variable {
 
   createHTML() {
-    return super.createHTML(`<progress max="${this.variable.max}" id="${this.variable.id}" class="progress"></progress>`)
+    return super.createHTML(`<progress max="${this.variable.max}" id="${this.variable.pid+"."+this.variable.id}" class="progress"></progress>`)
   }
 
 } //class ProgressVariable
@@ -409,7 +413,7 @@ class CanvasVariable extends Variable {
       this.variable.file.new = true;
       // console.log("canvas createHTML", this.variable.file, this.variable.file.new);
     }
-    return super.createHTML(`<canvas id=${this.variable.id} class="${this.variable.type}"></canvas>`);
+    return super.createHTML(`<canvas id="${this.variable.pid+"."+this.variable.id}" class="${this.variable.type}"></canvas>`);
   }
 
   receiveData(properties) {
@@ -418,8 +422,8 @@ class CanvasVariable extends Variable {
 
   generateData() {
     //tbd: this is StarLight, remove here...
-    if (this.node && this.variable.file == null)
-      super.generateData(`"file":"F_panel2x2-16x16.json"`)
+    // if (this.node && this.variable.file == null)
+    //   super.generateData(`"file":"F_panel2x2-16x16.json"`)
 
     super.generateData(`"value":"n/a"`) //no value needed for canvas, but only comment update ...
   }
@@ -429,7 +433,7 @@ class CanvasVariable extends Variable {
 class TableVariable extends Variable {
 
   createHTML() {
-    return super.createHTML(`<table id=${this.variable.id} class="${this.variable.type}"></table>`);
+    return super.createHTML(`<table id="${this.variable.pid+"."+this.variable.id}" class="${this.variable.type}"></table>`);
   }
 
   generateData() {
@@ -441,7 +445,7 @@ class TableVariable extends Variable {
 class Coord3DVariable extends Variable {
 
   createHTML() {
-    return super.createHTML(`<span id=${this.variable.id} class="${this.variable.type}"><input type="number" placeholder="x"/><input type="number" placeholder="y"/><input type="number" placeholder="z"/></span>`);
+    return super.createHTML(`<span id="${this.variable.pid+"."+this.variable.id}" class="${this.variable.type}"><input type="number" placeholder="x"/><input type="number" placeholder="y"/><input type="number" placeholder="z"/></span>`);
   }
 
   receiveData(properties) {

data/newui/theme.js

@@ -11,7 +11,7 @@
 class Theme {
 
   createHTML() {
-    let body = document.getElementById("body");//gId("body");
+    let body = gId("body");
 
     body.innerHTML += `<p><label>Theme</label> 
     <select name="theme-select" id="theme-select" onchange="controller.theme.setTheme(this.value)">
@@ -33,15 +33,15 @@ class Theme {
     console.log("setTheme", value)
     localStorage.setItem('theme', value);
     document.documentElement.className = value;
-    // if (document.getElementById("theme-select").value != value)
-    //   document.getElementById("theme-select").value = value;
+    // if (gId("theme-select").value != value)
+    //   gId("theme-select").value = value;
   }
 
   getTheme() {
     let value = localStorage.getItem('theme');
-    // console.log("getTheme", value, document.getElementById("theme-select"))
+    // console.log("getTheme", value, gId("theme-select"))
     if (value && value != "null") 
-      document.getElementById("theme-select").value = value
+      gId("theme-select").value = value
   }
 
 }