Skip to content

Commit

Permalink
Refactor FixtureGenerator: support presets and panels. Projections refac
Browse files Browse the repository at this point in the history 
AppModFixtureGen
- refactor
- openPin - use pin parameter instead of pinList
- remove write2D (all in 3D space)
- remove writef (unused)
- refactor GenFix.fixture functions to support new ui (first, ip, pin)
- remove plane3D, replaced by Genfix.matrix
- remove sideCube3D and cube3D (now matrix preset)
- remove pinList var (now fixPin)
- add panels var
- refactor fixtureGenChFun (support panels and presets)
- matrix: use first, rowend and colend to implement orientation (3D) and serpentine
- add getPanels function
- refactor generateChFun to support panels

index.js
- coord3D in span instead of div (so no line break)
- receivedata details: replace .n of variable by received .n
- changeHTML: reorganise: move nodeType="span" to their respective classes (select, Coord3D)

AppFixture: projectAndMap
- add  mapxDtoyD functions (WIP)
- add first for one time inits while reading pixels
- replace fixtureDimension with projectionDimension
- use projSize
- refactor switch for leds->size using mapxDtoyD
- add midPoint (WIP)
- refactor switch for indexV using mapxDtoyD

SysModModel
- add Coord3D advance

SysModUI:
- processJson: add "v" check (for WLED style v calls)
- add getOptions and clearOptions (used in GenFix)

SysModWeb: jsonHandler: run processJson always (also for "v"), add sendResponseObject to update UI in case of changes
  • Loading branch information
@ewowi
ewowi committed Feb 23, 2024
1 parent 94e3975 commit 2b26f86
Show file tree
Hide file tree
Showing 12 changed files with 2,153 additions and 1,982 deletions.
137 changes: 75 additions & 62 deletions data/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -194,7 +194,7 @@ function createHTML(json, parentNode = null, rowNr = UINT8_MAX) {
if (variable.type != "button" && !["appmod","usermod", "sysmod"].includes(variable.type)) divNode.appendChild(labelNode); //add label (tbd:must be done by childs n table cell)
}

if (["appmod","usermod", "sysmod"].includes(variable.type)) { //if module
if (["appmod", "usermod", "sysmod"].includes(variable.type)) { //if module
ndivNeeded = false;

varNode = cE("div");
Expand Down Expand Up @@ -334,19 +334,16 @@ function createHTML(json, parentNode = null, rowNr = UINT8_MAX) {
rangeValueNode = cE("span");
rangeValueNode.id = rvNode; //rangeValue
} else if (variable.type == "coord3D") {
if (variable.ro) { //e.g. for reset/restart reason: do not show a select but only show the selected option
varNode = cE("span");
}
else {
varNode = cE("div");
varNode = cE("span");
if (!variable.ro) { //e.g. for reset/restart reason: do not show a select but only show the selected option
let xNode = cE("input");
xNode.type = "number";
xNode.min = variable.min?variable.min:0; //if not specified then unsigned value (min=0)
if (variable.max) xNode.max = variable.max;
xNode.placeholder = "x";
xNode.min = variable.min?variable.min:0; //if not specified then unsigned value (min=0)
if (variable.max) xNode.max = variable.max;
xNode.addEventListener('change', (event) => {console.log(variable.type + " change", event.target.parentNode);sendValue(event.target.parentNode);});
xNode.addEventListener('change', (event) => {console.log(variable.type + " change", event.target.parentNode);sendValue(event.target.parentNode);});
varNode.appendChild(xNode);

let yNode = xNode.cloneNode();
Expand Down Expand Up @@ -405,7 +402,7 @@ function createHTML(json, parentNode = null, rowNr = UINT8_MAX) {
// if (buttonCancelNode) divNode.appendChild(buttonCancelNode);

//disable drag of parent module
if (["appmod","usermod", "sysmod"].includes(variable.type)) {
if (["appmod", "usermod", "sysmod"].includes(variable.type)) {
varNode.draggable = true;
varNode.addEventListener('dragstart', (event) => {event.preventDefault(); event.stopPropagation();});
}
Expand Down Expand Up @@ -449,7 +446,7 @@ function createHTML(json, parentNode = null, rowNr = UINT8_MAX) {
function genTableRowHTML(json, parentNode = null, rowNr = UINT8_MAX) {
let variable = json;
let tbodyNode = parentNode.querySelector("tbody");
// console.log("genTableRowHTML", parentNode.id, rowNr, tbodyNode.querySelectorAll("tr").length);
// console.log("genTableRowHTML", variable, parentNode.id, rowNr, tbodyNode.querySelectorAll("tr").length);

//create a new row on the table
let trNode = cE("tr");
Expand Down Expand Up @@ -517,13 +514,16 @@ function receiveData(json) {
console.log("receiveData details", key, variable, nodeId, rowNr);
if (gId(nodeId + "_n")) gId(nodeId + "_n").remove(); //remove old ndiv

let modelVar = findVar(variable.id);
modelVar.n = variable.n;

//create new ndiv
if (variable.n) {
if (modelVar.n) {
let ndivNode = cE("div");
ndivNode.id = nodeId + "_n";
ndivNode.className = "ndiv";
gId(nodeId).parentNode.appendChild(ndivNode);
createHTML(variable.n, ndivNode, rowNr);
createHTML(modelVar.n, ndivNode, rowNr);
}
flushUIFunCommands(); //make sure uiFuns of new elements are called
}
Expand Down Expand Up @@ -578,8 +578,7 @@ function receiveData(json) {
let variable = findVar(key);

if (variable) {
// if (variable.id == "vlLoopps" || variable.id == "flName" || variable.id == "insName")
// if (Array.isArray(variable.value))
// if (variable.id == "fixFirst" || variable.id == "fixRowEnd" || variable.id == "fixColEnd")
// console.log("receiveData ", variable, value);
variable.fun = -2; // request processed

Expand Down Expand Up @@ -796,38 +795,6 @@ function changeHTML(variable, commandJson, rowNr = UINT8_MAX) {
}
// node.checked = commandJson.value;
}
else if (nodeType == "span") { //read only vars
if (node.className == "select") {
var index = 0;
if (variable.options && commandJson.value != null) { // not always the case e.g. data / table / uiFun. Then value set if uiFun returns
for (var value of variable.options) {
if (parseInt(commandJson.value) == index) {
// console.log("changeHTML select1", value, node, node.textContent, index);
node.textContent = value; //replace the id by its value
// console.log("changeHTML select2", value, node, node.textContent, index);
}
index++;
}
} else
node.textContent = commandJson.value;
}
else if (node.className == "coord3D") {
if (commandJson.value && Object.keys(commandJson.value)) { //tbd: support arrays (now only objects)
let sep = "";
node.textContent = "";
for (let key of Object.keys(commandJson.value)) {
node.textContent += sep + commandJson.value[key];
sep = ",";
}
}
else
console.log(" value coord3D value not object[x,y,z]", commandJson.value);
}
else { //text and numbers read only
// console.log("changeHTML value span not select", variable, node, commandJson, rowNr);
node.textContent = commandJson.value;
}
}
else if (node.className == "url") { //url links
node.innerText = "🔍";
node.setAttribute('href', commandJson.value);
Expand All @@ -845,22 +812,59 @@ function changeHTML(variable, commandJson, rowNr = UINT8_MAX) {
// console.log("chHTML value coord3D", node, commandJson.value, rowNr);

if (commandJson.value && Object.keys(commandJson.value)) { //tbd: support arrays (now only objects)
let index = 0;
for (let key of Object.keys(commandJson.value)) {
let childNode = node.childNodes[index++];
childNode.value = commandJson.value[key];
childNode.dispatchEvent(new Event("input")); // triggers addEventListener('input',...). now only used for input type range (slider), needed e.g. for qlc+ input
if (variable.ro) {
let sep = "";
node.textContent = "";
for (let key of Object.keys(commandJson.value)) {
node.textContent += sep + commandJson.value[key];
sep = ",";
}
}
else {
let index = 0;
for (let key of Object.keys(commandJson.value)) {
let childNode = node.childNodes[index++];
childNode.value = commandJson.value[key];
childNode.dispatchEvent(new Event("input")); // triggers addEventListener('input',...). now only used for input type range (slider), needed e.g. for qlc+ input
}
}
}
else
console.log(" value coord3D value not object[x,y,z]", commandJson.value);
console.log(" value coord3D value not object[x,y,z]", variable.id, node.id, commandJson.value);
}
else {//inputs or select
if (Array.isArray(commandJson.value) && rowNr != UINT8_MAX)
node.value = commandJson.value[rowNr];
else
node.value = commandJson.value;
node.dispatchEvent(new Event("input")); // triggers addEventListener('input',...). now only used for input type range (slider), needed e.g. for qlc+ input
else if (node.className == "select") {
if (variable.ro) {
var index = 0;
if (variable.options && commandJson.value != null) { // not always the case e.g. data / table / uiFun. Then value set if uiFun returns
for (var value of variable.options) {
if (parseInt(commandJson.value) == index) {
// console.log("changeHTML select1", value, node, node.textContent, index);
node.textContent = value; //replace the id by its value
// console.log("changeHTML select2", value, node, node.textContent, index);
}
index++;
}
} else
node.textContent = commandJson.value;
}
else {
if (Array.isArray(commandJson.value) && rowNr != UINT8_MAX)
node.value = commandJson.value[rowNr];
else
node.value = commandJson.value;
}
}
else {//inputs and progress type
if (variable.ro && nodeType == "span") { //text and numbers read only
// console.log("changeHTML value span not select", variable, node, commandJson, rowNr);
node.textContent = commandJson.value;
} else {
if (Array.isArray(commandJson.value) && rowNr != UINT8_MAX)
node.value = commandJson.value[rowNr];
else
node.value = commandJson.value;
node.dispatchEvent(new Event("input")); // triggers addEventListener('input',...). now only used for input type range (slider), needed e.g. for qlc+ input
}

//'hack' show the serverName on top of the page
if (variable.id == "serverName") {
Expand Down Expand Up @@ -892,16 +896,25 @@ function changeHTML(variable, commandJson, rowNr = UINT8_MAX) {
else if ((variable.value == null || Array.isArray(variable.value)) && !Array.isArray(commandJson.value)) {
//after changeHTML value array
if (variable.value == null) variable.value = [];
if (variable.value[rowNr] != commandJson.value) {
variable.value[rowNr] = commandJson.value;
if (rowNr == UINT8_MAX) {
if (variable.value != commandJson.value) {
variable.value = commandJson.value;
}
} else {
if (variable.value[rowNr] != commandJson.value) {
variable.value[rowNr] = commandJson.value;
}
}
}
else if (!Array.isArray(variable.value) && !Array.isArray(commandJson.value) && rowNr != UINT8_MAX) {
if (variable.value != commandJson.value) {
console.log("chHTML column with one value for all rows", variable.id, node.id, variable.value, commandJson.value, rowNr);
variable.value = commandJson.value;
variable.value = commandJson.value; //turn variable into array
}
}
else if (!Array.isArray(variable.value) && Array.isArray(commandJson.value) && rowNr == UINT8_MAX) {
variable.value = commandJson.value; //the value turns into an array (e.g. fixtureGen parameters will become columns in panel mode)
}
else
console.log("chHTML value unknown", variable.id, node.id, variable.value, commandJson.value, rowNr);

Expand Down Expand Up @@ -1013,8 +1026,6 @@ function sendValue(varNode) {
command[varId] = {};
if (varNode.className == "checkbox")
command[varId].value = varNode.querySelector("input").checked;
else if (varNode.nodeName.toLocaleLowerCase() == "span")
command[varId].value = varNode.innerText;
else if (varNode.className == "button") {
// don't send the value as that is just the label
}
Expand All @@ -1026,6 +1037,8 @@ function sendValue(varNode) {
console.log("coord", coord);
command[varId].value = coord;
}
else if (varNode.nodeName.toLocaleLowerCase() == "span")
command[varId].value = varNode.innerText;
else //number etc
//https://stackoverflow.com/questions/175739/how-can-i-check-if-a-string-is-a-valid-number
command[varId].value = isNaN(varNode.value)?varNode.value:parseFloat(varNode.value); //type number is default but html converts numbers in <option> to string, float to remove the quotes from all type of numbers
Expand Down
Loading

0 comments on commit 2b26f86

Please sign in to comment.