Use LazyJsonRDWS for ledFix(Gen): make 3D fixture preview work + extras

app.js: add jsonValues for preview3D
index.js: processUpdate: add file type, add fetchAndExecute (from WLEDMM)

AppModLeds:
- split in NUM_LEDS_Fastled and NUM_LEDS_preview
- ledFix: use LazyJsonRDWS instead of ArduinoJson
-  ledFixGen: use filewrite (LazyJsonRDWS later)
- ledFixGen add M888h, HSC and globe (wip)

SysModFiles:
- deleteLedFixes to deleteFiles
- removeFiles: reverse filter
- add LazyJsonRDWS class
- remove overloading by postfixing setValue with C, B and I (temporary)

SysModUI
- Add check before uiFunctions vector function is called !!! (cause of crashes!!!)

SysModWeb
- add addFileServer to send full jsonfiles as text to ui

data/app.js

@@ -102,12 +102,34 @@ function preview3D(node, leds) {
     scene = new THREE.Scene();
     scene.background = null; //new THREE.Color( 0xff0000 );
 
-    var d = 5; //distanceLED;
-    var offset_x = -d*(mW-1)/2;
-    var offset_y = -d*(mH-1)/2;
-    var offset_z = -d*(mD-1)/2;
+    if (jsonValues.pview) { // && jsonValues.pview.leds
+      var d = 5; //distanceLED;
+      var offset_x = -d*(jsonValues.pview.width-1)/2;
+      var offset_y = -d*(jsonValues.pview.height-1)/2;
+      var offset_z = -d*(jsonValues.pview.depth-1)/2;
 
-    for (var x = 0; x < mW; x++) {
+      console.log("3D jsonValues", jsonValues.pview);
+
+      if (jsonValues.pview.leds) {
+        console.log(jsonValues.pview.leds);
+        for (var led of jsonValues.pview.leds) {
+          const geometry = new THREE.SphereGeometry( 1, 32, 16 );
+          const material = new THREE.MeshBasicMaterial({transparent: true, opacity: 0.5});
+          // material.color = new THREE.Color(`${x/mW}`, `${y/mH}`, `${z/mD}`);
+          const sphere = new THREE.Mesh( geometry, material );
+          sphere.position.set(offset_x + d*led[0], offset_y + d*led[1], offset_z + d*led[2]);
+          scene.add( sphere );
+        }  
+      }
+    }
+    else
+    {
+      var d = 5; //distanceLED;
+      var offset_x = -d*(mW-1)/2;
+      var offset_y = -d*(mH-1)/2;
+      var offset_z = -d*(mD-1)/2;
+
+      for (var x = 0; x < mW; x++) {
         for (var y = 0; y < mH; y++) {
             for (var z = 0; z < mD; z++) {
                 const geometry = new THREE.SphereGeometry( 1, 32, 16 );
@@ -118,6 +140,7 @@ function preview3D(node, leds) {
                 scene.add( sphere );
             }
         }
+      }
     }
   } //new
 

data/index.js

@@ -186,7 +186,7 @@ function generateHTML(parentNode, json) {
     //call ui Functionality, if defined (to set label, comment, lov etc)
     if (json.uiFun >= 0) { //>=0 as element in object
       var command = {};
-      command["uiFun"] = json.id; //ask for uiFun (to add the options)
+      command["uiFun"] = json.id; //ask to run uiFun for object (to add the options)
       requestJson(command);
     }
 
@@ -278,6 +278,18 @@ function processUpdate(json) {
           console.log("processUpdate json", key, json[key].json, gId(key));
           jsonValues[key] = json[key].json;
         }
+        if (json[key].file) { //json send html nodes cannot process, store in jsonValues array
+          console.log("processUpdate file", key, json[key].file, gId(key));
+
+          //we need to send a request which the server can handle using request variable
+          let url = `http://${window.location.hostname}/file`;
+          fetchAndExecute(url, json[key].file, jsonValues, function(jsonValues,text) {
+            var ledmapJson = JSON.parse(text);
+            jsonValues[key] = ledmapJson;
+            // console.log(jsonValues);
+          }); 
+
+        }
       }
       else
         console.log("Id not found", key);
@@ -288,14 +300,15 @@ function processUpdate(json) {
 function requestJson(command) {
   gId('connind').style.backgroundColor = "var(--c-y)";
   if (!ws) return;
-  let url = `http://${window.location.hostname}/json`;
   let req = JSON.stringify(command);
-
-  console.log("requestJson", url, command);
-
+  
+  console.log("requestJson", command);
+  
   ws.send(req?req:'{"v":true}');
-  return;
 
+  return;
+
+  let url = `http://${window.location.hostname}/json`;
   //not used at the moment as WebSockets only
   fetch(url, {
     method: 'post',
@@ -462,3 +475,31 @@ function handleDrop(e) {
 
   return false;
 }
+
+//WLEDMM: utility function to load contents of file from FS (used in draw)
+function fetchAndExecute(url, name, parms, callback, callError = null)
+{
+  fetch
+  (url+name, {
+    method: 'get'
+  })
+  .then(res => {
+    if (!res.ok) {
+		callError("File " + name + " not found");
+    	return "";
+    }
+    // console.log("res", res, res.text(), res.text().result);
+    return res.text();
+  })
+  .then(text => {
+    // console.log("text", text);
+    callback(parms, text);
+  })
+  .catch(function (error) {
+	if (callError) callError(parms, "Error getting " + name);
+	console.log(error);
+  })
+  .finally(() => {
+    // if (callback) setTimeout(callback,99);
+  });
+}