effect startPos / endPos as coord3D and use to make subsets of physleds

general - use UINT8_MAX and UINT16_MAX instead of own defines index.css - canvas has black border - table has box-shadow (as border-radius alone does not work) index.js - coord3D: add change event to x,y,z input nodes - sendvalue: add "value" property, add support for coord3D AppLedsV: fixtureProjectAndMap: - default y and z to 0 (not 1) - only process if physical led within startPos and endPos boundaries - 2D-2D: use start and endpos to calc virtual coordinate and bucket - other dimensions: to do! (WIP) AppModLeds: - fxStart and End chFun: assign ledsV.start/endPos - move dimensions and nrOfLeds to table SysModUI: processJson: - add vector to freeze for loop - value handling: refactor and allow for coord3D, add setValue<JsonObject> for coord3D SysModWeb - wsEvent: add 💀 for multipart messages (WIP)
ewowi · Jan 22, 2024 · b7eef29 · b7eef29
1 parent 19da7cb
commit b7eef29
Show file tree

Hide file tree

Showing 23 changed files with 1,601 additions and 1,553 deletions.
diff --git a/data/index.css b/data/index.css
@@ -123,6 +123,7 @@ canvas {
 	width: 100%;
 	height: 100%;
 	border-radius: 12px;
+	border: 1px solid black;
 	background: transparent;
 	cursor: default;
 }
@@ -180,7 +181,9 @@ div {
   font-family: Arial, Helvetica, sans-serif;
   border-collapse: collapse;
   width: 100%;
-  border-radius: .5em; /*does not seem to work */
+  border-radius: 10px; /*does not seem to work */
+  border-style: hidden; /* hide standard table (collapsed) border */
+  box-shadow: 0 0 0 1px #666; /* this draws the table border  */ 
 }
 
 .table td, .table th {

diff --git a/data/index.js b/data/index.js
@@ -320,12 +320,17 @@ function generateHTML(json, parentNode = null, rowNr = -1) {
         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.addEventListener('change', (event) => {console.log(variable.type + " change", event.target.parentNode);sendValue(event.target.parentNode);});
+        varNode.appendChild(xNode);
+
         let yNode = xNode.cloneNode();
         yNode.placeholder = "y";
+        yNode.addEventListener('change', (event) => {console.log(variable.type + " change", event.target.parentNode);sendValue(event.target.parentNode);});
+        varNode.appendChild(yNode);
+
         let zNode = xNode.cloneNode();
         zNode.placeholder = "z";
-        varNode.appendChild(xNode);
-        varNode.appendChild(yNode);
+        zNode.addEventListener('change', (event) => {console.log(variable.type + " change", event.target.parentNode);sendValue(event.target.parentNode);});
         varNode.appendChild(zNode);
     } else {
       //input types: text, search, tel, url, email, and password.
@@ -777,7 +782,7 @@ function changeHTML(variable, node, commandJson, rowNr = -1) {
       if (commandJson.value) node.value = commandJson.value; //else the id / label is used as button label
     }
     else if (node.className == "coord3D") {
-      console.log("chHTML value coord3D", node, commandJson.value, rowNr);
+      // 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;
@@ -925,65 +930,73 @@ function requestJson(command) {
   });
 }
 
-function sendValue(element) {
+function sendValue(varNode) {
   let varId;
-  if (element.id == "saveModel" || element.id == "bSave") {
+  if (varNode.id == "saveModel" || varNode.id == "bSave") {
     varId = "saveModel";
     gId("bSave").value = "Save";
     gId("bSave").disabled = true;
   }
   else 
   {
-    varId = element.id;
+    varId = varNode.id;
     gId("bSave").value = "Save*";
     gId("bSave").disabled = false;
   }
 
   var command = {};
-  if (element.type == "checkbox")
-    command[varId] = element.checked;
-  else if (element.nodeName.toLocaleLowerCase() == "span")
-    command[varId] = element.innerText;
-  else
-    command[varId] = Number(element.value)?Number(element.value):element.value; //type number is default but html converts numbers in <option> to string
-  // console.log("sendValue", command);
-
+  command[varId] = {};
+  if (varNode.className == "checkbox")
+    command[varId].value = varNode.checked;
+  else if (varNode.nodeName.toLocaleLowerCase() == "span")
+    command[varId].value = varNode.innerText;
+  else if (varNode.className == "coord3D") {
+    let coord = {};
+    coord.x = varNode.childNodes[0].value;
+    coord.y = varNode.childNodes[1].value;
+    coord.z = varNode.childNodes[2].value;
+    console.log("coord", coord);
+    command[varId].value = coord;
+  }
+  else //number etc
+    command[varId].value = Number(varNode.value)?Number(varNode.value):varNode.value; //type number is default but html converts numbers in <option> to string
+  console.log("sendValue", command);
 
   requestJson(command);
 }
 
 let isModal = false;
 let modalPlaceHolder;
 
-function toggleModal(element) { //canvas or textarea
-  // console.log("toggleModal", element);
+function toggleModal(varNode) { //canvas or textarea
+  // console.log("toggleModal", varNode);
   isModal = !isModal;
 
 	if (isModal) {
 
-    modalPlaceHolder = cE(element.nodeName.toLocaleLowerCase()); //create canvas or textarea
-    modalPlaceHolder.width = element.width;
-    modalPlaceHolder.height = element.height;
+    modalPlaceHolder = cE(varNode.nodeName.toLocaleLowerCase()); //create canvas or textarea
+    modalPlaceHolder.width = varNode.width;
+    modalPlaceHolder.height = varNode.height;
 
-    element.parentNode.replaceChild(modalPlaceHolder, element); //replace by modalPlaceHolder
+    varNode.parentNode.replaceChild(modalPlaceHolder, varNode); //replace by modalPlaceHolder
 
     // let btn = cE("button");
     // btn.innerText = "close";
-    // btn.addEventListener('click', (event) => {toggleModal(element);});
+    // btn.addEventListener('click', (event) => {toggleModal(varNode);});
     // gId('modalView').appendChild(btn);
 
-    gId('modalView').appendChild(element);
-    element.width = window.innerWidth;
-    element.height = window.innerHeight;
-    // console.log("toggleModal +", element, modalPlaceHolder, element.getBoundingClientRect(), modalPlaceHolder.getBoundingClientRect().width, modalPlaceHolder.getBoundingClientRect().height, modalPlaceHolder.width, modalPlaceHolder.height);
+    gId('modalView').appendChild(varNode);
+    varNode.width = window.innerWidth;
+    varNode.height = window.innerHeight;
+    // console.log("toggleModal +", varNode, modalPlaceHolder, varNode.getBoundingClientRect(), modalPlaceHolder.getBoundingClientRect().width, modalPlaceHolder.getBoundingClientRect().height, modalPlaceHolder.width, modalPlaceHolder.height);
 	}
   else {    
-    element.width = modalPlaceHolder.getBoundingClientRect().width;
-    element.height = modalPlaceHolder.getBoundingClientRect().height;
+    varNode.width = modalPlaceHolder.getBoundingClientRect().width;
+    varNode.height = modalPlaceHolder.getBoundingClientRect().height;
 
-    // console.log("toggleModal -", element, modalPlaceHolder, element.getBoundingClientRect(), modalPlaceHolder.getBoundingClientRect().width, modalPlaceHolder.getBoundingClientRect().height, modalPlaceHolder.width, modalPlaceHolder.height);
+    // console.log("toggleModal -", varNode, modalPlaceHolder, varNode.getBoundingClientRect(), modalPlaceHolder.getBoundingClientRect().width, modalPlaceHolder.getBoundingClientRect().height, modalPlaceHolder.width, modalPlaceHolder.height);
 
-    modalPlaceHolder.parentNode.replaceChild(element, modalPlaceHolder); // //replace by element. modalPlaceHolder loses rect
+    modalPlaceHolder.parentNode.replaceChild(varNode, modalPlaceHolder); // //replace by varNode. modalPlaceHolder loses rect
   }
 
 	gId('modalView').style.transform = (isModal) ? "translateY(0px)":"translateY(100%)";

diff --git a/src/App/AppEffects.h b/src/App/AppEffects.h
@@ -1000,7 +1000,7 @@ class Effects {
 
     ledsV.fx = mdl->varToValue(parentVar, rowNr);
 
-    if (rowNr != uint8Max)
+    if (rowNr != UINT8_MAX)
       parentVar["rowNr"] = rowNr; //store the rownNr of the updated value to send back to ui
 
     USER_PRINTF("setEffect %d\n", ledsV.fx);
@@ -1030,7 +1030,7 @@ class Effects {
       sharedData.clear(); //make sure all values are 0
 
       // nullify values for this row
-      if (rowNr != uint8Max) {
+      if (rowNr != UINT8_MAX) {
         for (JsonObject var: parentVar["n"].as<JsonArray>()) {
           if (var["value"].is<JsonArray>()) {
             var["value"][rowNr] = -99; //unused value for this row, so don't show
@@ -1046,7 +1046,7 @@ class Effects {
 
       // // nullify values for this row
       // for (JsonObject var: parentVar["n"].as<JsonArray>()) {
-      //   if (rowNr != uint8Max) {
+      //   if (rowNr != UINT8_MAX) {
       //     if (var["value"].is<JsonArray>()) {
       //       var["value"][rowNr] = -99; //unused value for this row, so don't show
       //     } else {