From a7d1443555a886fbac0c200abb9d3de3d44dd6ce Mon Sep 17 00:00:00 2001 From: Ewoud Date: Thu, 26 Sep 2024 12:33:26 +0200 Subject: [PATCH] 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 | 4 +- data/newui/mainnav.js | 8 +- data/newui/modules.js | 32 +- data/newui/theme.js | 10 +- misc/model.json | 646 ++++++++++++++++-------- src/Sys/SysModModel.cpp | 3 + src/Sys/SysModModel.h | 4 +- src/Sys/SysModUI.cpp | 21 +- src/html_newui.h | 1062 +++++++++++++++++++-------------------- 9 files changed, 1015 insertions(+), 775 deletions(-) diff --git a/data/newui/index.js b/data/newui/index.js index 813774ca..d1eb9571 100644 --- a/data/newui/index.js +++ b/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); diff --git a/data/newui/mainnav.js b/data/newui/mainnav.js index d525e8d6..c9bc3716 100644 --- a/data/newui/mainnav.js +++ b/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 = `

${this.#activeModuleJson.id}

@@ -154,7 +154,7 @@ class MainNav { return `
${type}
` }) .join('') - document.getElementById('main-nav').innerHTML = html + gId('main-nav').innerHTML = html } // Update the secondary navigation menu @@ -167,7 +167,7 @@ class MainNav { return `
${moduleJson.id}
` }) .join('') - document.getElementById('second-nav').innerHTML = html + gId('second-nav').innerHTML = html } /** diff --git a/data/newui/modules.js b/data/newui/modules.js index cb00b35c..e1a5649c 100644 --- a/data/newui/modules.js +++ b/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 = ``) { + createHTML(node = ``) { let code = `

${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 += `

` + code += `
` 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(``); + return super.createHTML(``); } receiveData(properties) { @@ -336,12 +340,12 @@ class CheckboxVariable extends Variable { class RangeVariable extends Variable { createHTML() { - return super.createHTML(`${this.variable.value}`) + return super.createHTML(`${this.variable.value}`) } 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(``) + return super.createHTML(``) } generateData() { @@ -367,7 +371,7 @@ class ButtonVariable extends Variable { class SelectVariable extends Variable { createHTML() { - return super.createHTML(``) + return super.createHTML(``) } receiveData(properties) { @@ -396,7 +400,7 @@ class SelectVariable extends Variable { class ProgressVariable extends Variable { createHTML() { - return super.createHTML(``) + return super.createHTML(``) } } //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(``); + return super.createHTML(``); } 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(`
`); + return super.createHTML(`
`); } generateData() { @@ -441,7 +445,7 @@ class TableVariable extends Variable { class Coord3DVariable extends Variable { createHTML() { - return super.createHTML(``); + return super.createHTML(``); } receiveData(properties) { diff --git a/data/newui/theme.js b/data/newui/theme.js index fef48b11..e23e3c8d 100644 --- a/data/newui/theme.js +++ b/data/newui/theme.js @@ -11,7 +11,7 @@ class Theme { createHTML() { - let body = document.getElementById("body");//gId("body"); + let body = gId("body"); body.innerHTML += `