air leds

src/App.svelte

@@ -21,6 +21,8 @@
   let ledFaster = false;
   let ledColorActive = "#ff00ff";
   let ledColorInactive = "#ffff00";
+  let ledColorAirActive = "#0086ed";
+  let ledColorAirInactive = "#000000";
   let ledSensitivity = 20;
   let ledWebsocketUrl = "http://localhost:3001";
   let ledUmgrWebsocketPort = 7124;
@@ -77,6 +79,8 @@
       ledFaster = payload.ledFaster || false;
       ledColorActive = payload.ledColorActive || "#ff00ff";
       ledColorInactive = payload.ledColorInactive || "#ffff00";
+      ledColorAirActive = payload.ledColorAirActive || "#0086ed";
+      ledColorAirInactive = payload.ledColorAirInactive || "#000000";
       ledSensitivity = payload.ledSensitivity || 20;
       ledWebsocketUrl = payload.ledWebsocketUrl || "http://localhost:3001";
       ledUmgrWebsocketPort = payload.ledUmgrWebsocketPort || 7124;
@@ -133,6 +137,8 @@
         ledFaster,
         ledColorActive,
         ledColorInactive,
+        ledColorAirActive,
+        ledColorAirInactive,
         ledSensitivity,
         ledWebsocketUrl,
         ledUmgrWebsocketPort,
@@ -470,23 +476,53 @@
     {/if}
     {#if ledMode.slice(0, 8) === "reactive" && ["16", "8", "6", "4"].includes(ledMode.slice(9))}
       <div class="row">
-        <div class="label">Active Color</div>
+        <div class="label">Slider Color</div>
         <div class="input">
-          <input
-            type="color"
-            bind:value={ledColorActive}
-            on:change={markDirty}
-          />
+          <span>
+            <input
+              type="color"
+              id="color-active"
+              style="width: 3rem;"
+              bind:value={ledColorActive}
+              on:change={markDirty}
+            />
+            <label for="color-active">Active</label>
+          </span>
+          <span>
+            <input
+              type="color"
+              id="color-base"
+              style="width: 3rem;"
+              bind:value={ledColorInactive}
+              on:change={markDirty}
+            />
+            <label for="color-base">Inactive</label>
+          </span>
         </div>
       </div>
       <div class="row">
-        <div class="label">Base Color</div>
+        <div class="label">Air Color</div>
         <div class="input">
-          <input
-            type="color"
-            bind:value={ledColorInactive}
-            on:change={markDirty}
-          />
+          <span>
+            <input
+              type="color"
+              id="color-active"
+              style="width: 3rem;"
+              bind:value={ledColorAirActive}
+              on:change={markDirty}
+            />
+            <label for="color-active">Active</label>
+          </span>
+          <span>
+            <input
+              type="color"
+              id="color-base"
+              style="width: 3rem;"
+              bind:value={ledColorAirInactive}
+              on:change={markDirty}
+            />
+            <label for="color-base">Inactive</label>
+          </span>
         </div>
       </div>
     {/if}

src/Preview.svelte

@@ -8,9 +8,11 @@
 
   let ledDatas = Array(16).fill("#ff0");
   let ledDividerDatas = Array(15).fill("#ff0");
+  let airLedLeftDatas = Array(3).fill(0);
+  let airLedRightDatas = Array(3).fill(0);
 
   $: {
-    if (data.length === 134) {
+    if (data.length === 152) {
       // console.log(data);
       for (let i = 0; i < 16; i++) {
         topDatas[i] = data[i * 2 + 1];
@@ -33,15 +35,42 @@
           ledDividerDatas[(i - 1) / 2] = rgbstr;
         }
       }
+      for (let i = 0; i < 3; i++) {
+        let rgbstr = `rgb(${data[134 + i * 3]}, ${data[135 + i * 3]}, ${
+          data[136 + i * 3]
+        })`;
+        airLedLeftDatas[i] = rgbstr;
+      }
+      for (let i = 0; i < 3; i++) {
+        let rgbstr = `rgb(${data[143 + i * 3]}, ${data[144 + i * 3]}, ${
+          data[145 + i * 3]
+        })`;
+        airLedRightDatas[i] = rgbstr;
+      }
     }
   }
 </script>
 
 <main class="preview">
   <div class="air">
-    {#each airDatas as airData, idx (idx)}
-      <div class={`air-data air-data-${airData}`} />
-    {/each}
+    <div class="air-led">
+      <div class="air-led-left">
+        {#each airLedLeftDatas as airLedData, idx (idx)}
+          <div class="air-led-data" style={`background-color: ${airLedData}`} />
+        {/each}
+      </div>
+      <div class="air-led-space" />
+      <div class="air-led-right">
+        {#each airLedRightDatas as airLedData, idx (idx)}
+          <div class="air-led-data" style={`background-color: ${airLedData}`} />
+        {/each}
+      </div>
+    </div>
+    <div class="air-btn">
+      {#each airDatas as airData, idx (idx)}
+        <div class={`air-data air-data-${airData}`} />
+      {/each}
+    </div>
   </div>
   <div class="ground">
     <div class="ground-led">