Light control presets: UI red, green, blue to .editor folder

UI
==
- MultiInput: Pad: support presets - WIP
- Module: updateRecursive: support object (e.g. presets) - wip

Server
=====
- FileService: move walkThroughFiles and extractPath to utilities
- Utilities: create .cpp and add walkThroughFiles and extractPath  and copyFile
- LightsControl: presets: jsonObject as value. add setPresetsFromFolder and call at boot, when files in preset folder changes and onUpdate preset

Author: ewowi

docs/general/gettingstarted.md

@@ -51,7 +51,7 @@
    <img width="400" alt="Screenshot 2025-06-07 at 21 01 02" src="https://github.com/user-attachments/assets/5d4d581f-5586-43c0-a5ea-02930effc3d8" />
 
 * **That's it**. You can now change effect nodes, or add nodes. For audio add the AudioSync node. More how to's will be added. At the moment:
-    * Check the help pages on this documentation site
+    * Check the help pages on this documentation site, especially the [editor page](https://moonmodules.org/MoonLight/moonbase/module/editor/)
     * press the ? in MoonLight to go directly to the relevant page
    More how to's will be added. At the moment:
     * Live scripts: [how to run a live script](https://github.com/MoonModules/MoonLight/blob/main/docs/moonbase/module/liveScripts.md#how-to-run-a-live-script)

docs/moonbase/module/editor.md

@@ -25,7 +25,7 @@ Typically a node will define a layout (🚥), or an effect (🔥), or a modifier
     * MoonLight will use the layout definition to generate a **mapping** of a virtual coordinate space to a physical coordinate space. Most simple example is a panel which has a snake layout. The mapping will create a virtual layer where the snake layout is hidden.
 
 * **Effect** 🔥: An effect runs in a virtual layer (see above about mapping to a physical layer). Historically there are 1D, 2D and 3D effects. A 1D effect only fills leds in x space, leaving y and z blank. 2D also the y space, 3D all spaces. Future goal is that all effects fill all spaces (example is bouncing balls which was a 1D effect but has been made 2D). See also Modifiers which can take a 1D effect and make a 2D or 3D effect out of it: e.g. a 1D effect can be presented as a circle, or sphere.
-    * An effect has a loop which is ran for each frame produced. In each loop, the pixels in the virtual layer gets it's values using the setLight function. It can take a CRGB value as parameter (default) but can also deal with multichannel lights like Moving Heads.
+    * An effect has a loop which is ran for each frame produced. In each loop, the lights in the virtual layer gets it's values using the setRGB function. For multichannel lights also functions as setWhite or (for Moving Heads) setPan, setTilt, setZoom etc. Also getRGB etc functions exists.
     * Multiple effects can be defined, they all run during one frame. In the future each effect will have a start and end coordinate so they can also be displayed on parts of the fixture.
 
 * **Modifier** 💎: a modifier is an effect on an effect. It can change the size of the virtual layer, it can map the pixels other then 1:1 (e.g. mirror, multiply them or a 1D line can become a 2D circle) and it can change each light set in an effect during a loop (e.g. rotate the effect)

interface/src/lib/components/moonbase/Module.svelte

@@ -63,6 +63,20 @@
         }
     }
 
+    let hoverTimeout: any = null;
+    let popupCell: number | null = null;
+
+    function handleMouseEnter(rowIndex: number, colIndex: number, cell: number) {
+        hoverTimeout = setTimeout(() => {
+            popupCell = cell;
+        }, 1000); // 1 second
+    }
+
+    function handleMouseLeave() {
+        clearTimeout(hoverTimeout);
+        popupCell = null;
+    }
+
 </script>
 
 <label class="label cursor-pointer" for={property.name}>
@@ -191,17 +205,23 @@
             <div class="flex flex-row space-x-2">
                 {#each row as cell, colIndex}
                     <button
-                        class="btn btn-square btn-primary w-{property.size} h-{property.size} text-xl rounded-lg"
+                        class="btn btn-square w-{property.size} h-{property.size} text-xl rounded-lg {
+                            value.active == cell?`btn-error`:Array.isArray(value.list) && value.list.includes(cell) ? `btn-success` : 'btn-primary'}"
                         type="button"
                         draggable="true"
                         on:dragstart={(event) => handleDragStart(event, rowIndex, colIndex)}
                         on:dragover|preventDefault
                         on:drop={(event) => handleDrop(event, rowIndex, colIndex)}
-                        on:click={(event:any) => {console.log(rowIndex, colIndex, cell); value = cell; onChange(event)}}
-                        on:mouseenter={(event:any) => {if (property.hover) {console.log("mousenter", rowIndex, colIndex, cell); value = cell; onChange(event)}}}
-                        on:mouseleave={(event:any) => {if (false) {console.log("mouseleave", rowIndex, colIndex, cell); value = cell; onChange(event)}}}
+                        on:click={(event:any) => {console.log(rowIndex, colIndex, cell); value.list.push(cell); value.active = cell; onChange(event)}}
+                        on:mouseenter={(event:any) => {console.log("mousenter", rowIndex, colIndex, cell); if (property.hover) {value.active = cell; onChange(event)} else handleMouseEnter(rowIndex, colIndex, cell)}}
+                        on:mouseleave={handleMouseLeave}
                     >
                         {cell}
+                        {#if popupCell === cell}
+                            <div class="absolute z-50 bg-base-200 p-2 rounded shadow-lg mt-2">
+                                Popup for {cell}
+                            </div>
+                        {/if}
                     </button>
                 {/each}
             </div>

interface/src/lib/components/moonbase/MultiInput.svelte

@@ -176,12 +176,6 @@
 							page.data.features.download_firmware) &&
 						(!page.data.features.security || $user.admin)
 				},
-				{
-					title: 'Demo App',
-					icon: Control,
-					href: '/demo',
-					feature: true
-				},
 			]
 		}
 	] as menuItem[]);

interface/src/routes/menu.svelte

@@ -121,12 +121,12 @@
 	function updateRecursive(oldData:any, newData: any) {
 		//loop over properties
 		for (let key in newData) {
-			if (typeof newData[key] != 'object') {
-				if (newData[key] != oldData[key]) {
-					// console.log("updateRecursive", key, newData[key], oldData[key]);
-					oldData[key] = newData[key]; //trigger reactiveness
-				}
-			} else {
+			// if (typeof newData[key] != 'object') {
+			// 	if (newData[key] != oldData[key]) {
+			// 		// console.log("updateRecursive", key, newData[key], oldData[key]);
+			// 		oldData[key] = newData[key]; //trigger reactiveness
+			// 	}
+			// } else {
 				if (Array.isArray(newData[key])) {
 					//loop over array
 					if (!oldData[key]) oldData[key] = []; //create an empty array
@@ -141,8 +141,14 @@
 						} else
 							updateRecursive(oldData[key][i], newData[key][i]);
 					}
+				} else {
+					if (newData[key] != oldData[key]) {
+						// console.log("updateRecursive", key, newData[key], oldData[key]);
+						oldData[key] = newData[key]; //trigger reactiveness
+					}
+
 				}
-			}
+			// }
 		}
 	}