Everything should be kinda working. Not tested.

Add change setting, change animation and working create and delete cluster

css/spotlight.css

@@ -140,11 +140,21 @@
     grid-column: 2/3;
 }
 
-.speedInput {
+.var3Input {
     grid-row: 5/6;
     grid-column: 1/2;
 }
 
+.var4Input {
+    grid-row: 5/6;
+    grid-column: 2/3;
+}
+
+.speedInput {
+    grid-row: 6/7;
+    grid-column: 1/2;
+}
+
 #spotlightAnimations {
     grid-row: 3/4;
     grid-column: 1/3;
@@ -179,9 +189,13 @@
     font-family: 'Raleway', sans-serif;
 }
 
+#spotlightSettingsContainer button:hover {
+    background-color: #2f2f3d;
+}
+
 #deleteCluster {
     grid-column: 2/3;
-    grid-row: 5/6;
+    grid-row: 6/7;
     height: min-content;
     width: min-content;
     padding: 10px;

js/spotlight.js

@@ -7,6 +7,8 @@ let chosenShelves = Array()
 
 let chosenCluster = -1
 
+let clusterName = "Inte vald"
+
 function getEByID(id) {
     return document.getElementById(id)
 }
@@ -44,20 +46,8 @@ function shelfClick(id) {
     }
 }
 
-
-function unselectAll() {
-    chosenCluster = -1
-    chosenShelves.forEach(id => {
-        getEByID("b" + id.toString()).innerText = ""
-        getEByID("b" + id.toString()).classList.remove("selected")
-    })
-    chosenShelves = Array()
-    makeClusterButton.classList.add("hidden")
-}
-
-
 function createCluster() {
-    const shelves = JSON.stringify(chosenShelves)
+    const shelves = chosenShelves
     const numLights = chosenShelves.length
     const sendDict = {
         ["numLights"]: numLights,
@@ -79,10 +69,39 @@ function deleteCluster() {
         const sendDict = {
             ["cluster"]: chosenCluster,
         }
+        chosenCluster = -1
         sendWebRequest("http://192.168.1.170/api/delete_cluster", JSON.stringify(sendDict), "POST")
     }
 }
 
+function changeAnimation(animId) {
+    const sendDict = {
+        ["targetCluster"]: chosenCluster,
+        ["animation"]: animId
+    }
+    console.log(JSON.stringify(sendDict))
+    sendWebRequest("http://192.168.1.170/api/change_animation", JSON.stringify(sendDict), "POST")
+}
+
+function changeVar(value, setting) {
+    let sendValue = 0
+
+    if (value.substring(0,3) === "0x") {
+        sendValue = parseInt(value, 16);
+    } else {
+        sendValue = Number(value)
+    }
+
+    if (!isNaN(sendValue)) {
+        const sendDict = {
+            ["targetCluster"]: chosenCluster,
+            ["newValue"]: sendValue,
+            ["setting"]: setting
+        }
+        console.log(JSON.stringify(sendDict))
+        sendWebRequest("http://192.168.1.170/api/change_setting", JSON.stringify(sendDict), "POST")
+    }
+}
 
 function sendWebRequest(url, data, method) {
     /*const Http = new XMLHttpRequest()
@@ -98,14 +117,54 @@ function sendWebRequest(url, data, method) {
         method: method,
         headers: new Headers({'data': data}),
         //mode: 'no-cors'
-        })
+    })
         .then(res => {
             console.log(res)
-            //updateConfig()
+            updateConfig()
         })
 }
 
+function chooseCluster(id) {
+    if (id < 0) {
+        return
+    }
+
+    unselectAll()
+    getEByID("c" + id.toString()).classList.add("selected")
+    chosenCluster = id
+    let lampId = 0
+    for (let lamp of clusters[id].lights) {
+        console.log(lamp)
+        getEByID("b" + lamp.toString()).classList.add("selected")
+        getEByID("b" + lamp.toString()).innerText = (lampId + 1).toString()
+        lampId += 1
+    }
+
+    getEByID("a" + clusters[id]["animation"].toString()).classList.add("selected")
+    chosenShelves = clusters[id].lights
+}
+
+function unselectAll() {
+    chosenCluster = -1
+    chosenShelves.forEach(id => {
+        getEByID("b" + id.toString()).innerText = ""
+        getEByID("b" + id.toString()).classList.remove("selected")
+    })
+    const clustHTML = getEByID("clusters").children
+    for (let b of clustHTML) {
+        b.classList.remove("selected")
+    }
+    const animHTML = getEByID("spotlightAnimations").children
+    for (let b of animHTML) {
+        b.classList.remove("selected")
+    }
+    chosenShelves = Array()
+    makeClusterButton.classList.add("hidden")
+}
+
+
 function updateConfig() {
+    const preSelectCluster = chosenCluster
     unselectAll()
     fetch("http://192.168.1.170/api/get_config")
         .then(response => response.json())
@@ -114,6 +173,10 @@ function updateConfig() {
             numClusters = data["numClusters"]
             clusters = data["clusters"]
 
+            while (getEByID("clusters").firstChild) {
+                getEByID("clusters").lastChild.remove()
+            }
+
             occupiedLamps = Array()
             let id = -1
             for (const cluster of data.clusters) {
@@ -122,25 +185,17 @@ function updateConfig() {
                     occupiedLamps.push(lamp)
                 }
 
-                const clusterButton = document.createElement("button")
-                clusterButton.innerText = (id+1).toString()
-                clusterButton.onclick = function () {
-                    unselectAll()
-                    clusterButton.classList.add("selected")
-                    chosenCluster = id
-                    let lampId = 0
-                    for (let lamp of cluster.lights) {
-                        console.log(lamp)
-                        getEByID("b" + lamp.toString()).classList.add("selected")
-                        getEByID("b" + lamp.toString()).innerText = (lampId+1).toString()
-                        lampId += 1
-                    }
-                    chosenShelves = cluster.lights
-                }
+                let clusterButton = document.createElement("button")
+                clusterButton.innerText = (id + 1).toString()
+                clusterButton.id = "c" + id.toString()
+                clusterButton.setAttribute("onclick", "chooseCluster(" + id.toString() + ")")
                 getEByID("clusters").appendChild(clusterButton)
             }
 
+            chosenCluster = preSelectCluster
+            chooseCluster(chosenCluster)
         })
+
 }
 
 updateConfig()

res/spotlights.json

@@ -0,0 +1,19 @@
+{
+  "ip": "192.168.1.170",
+  "animationSettings": {
+    "0": {
+      "name": "Off"
+    },
+    "1": {
+      "name": "Rainbow",
+      "var1Name": "Hue steg"
+    },
+    "2": {
+      "name": "Random Colors",
+      "var1Name": "Färg min",
+      "var2name": "Färg max",
+      "var3name": "Tick min",
+      "var4name": "Tick max"
+    }
+  }
+}

spotlights.html

@@ -49,17 +49,22 @@
 
         <div id="spotlightSettingsContainer">
             <h2>Settings</h2>
-            <p>{clusterName}</p>
+            <p>{{clusterName}}</p>
             <div id="spotlightAnimations">
-                <button class="a0" onclick="changeAnimation(0)">Off</button>
-                <button class="a1" onclick="changeAnimation(1)">Rainbow</button>
+                <button id="a0" onclick="changeAnimation(0)">Off</button>
+                <button id="a1" onclick="changeAnimation(1)">Rainbow</button>
+                <button id="a2" onclick="changeAnimation(2)">Random Colors</button>
             </div>
             <p class="var1Input">{var1Name}</p>
-            <input type="number" class="var1Input">
+            <input class="var1Input" onblur="changeVar(this.value, 'animationSetting1')">
             <p class="var2Input">{var2Name}</p>
-            <input type="number" class="var2Input">
+            <input class="var2Input" onblur="changeVar(this.value, 'animationSetting2')">
+            <p class="var3Input">{var3Name}</p>
+            <input class="var3Input" onblur="changeVar(this.value, 'animationSetting3')">
+            <p class="var4Input">{var4Name}</p>
+            <input class="var4Input" onblur="changeVar(this.value, 'animationSetting4')">
             <p class="speedInput">Hastighet (MS)</p>
-            <input type="number" class="speedInput">
+            <input class="speedInput" onblur="changeVar(this.value, 'delayTime')">
             <button id="deleteCluster" onclick="deleteCluster()"><span class="material-symbols-outlined">delete</span></button>
             <button id="sync">Synk</button>
             <div id="clusters">