feat: Added sound + Light effect

toos-dashboard/src/App.vue

@@ -40,10 +40,5 @@ onMounted(async () => {
   await listen('port-state', (event) => {
     serialConfig.value.open = event.payload.open
   });
-
-  await listen('button-on', async () => {
-    const audioContainer = document.getElementById("audioContainer");
-    await audioContainer.play();
-  });
 })
 </script>

toos-dashboard/src/components/Main.vue

@@ -1,3 +1,23 @@
 <template>
   <h1 class="text-white text-2xl w-full font-bold text-center my-24">Frankenstein Dashboard</h1>
+  <div class="flex w-full justify-center gap-10">
+    <div class="bg-neutral-800 rounded-2xl p-5 h-min">
+      <h2 class="text-white font-bold text-lg text-center mb-5">Animation</h2> 
+      <div class="flex flex-col items-center">
+        <div class="space-x-3">
+          <button @click="test" class="px-5 py-2 bg-sky-400 rounded my-5">
+            Start Animation
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
+
+<script setup>
+import { invoke } from "@tauri-apps/api/tauri"
+
+const test = async () => {
+  await invoke('start');
+}
+</script>

toos-dashboard/src/components/Test.vue

@@ -36,7 +36,7 @@
         <button @click="submitPixel" class="px-5 py-2 bg-sky-400 w-full rounded my-5">
           Submit Color
         </button>
-        <button @click="useLedTest(pixel.color.r, pixel.color.g, pixel.color.b)" class="px-5 py-2 bg-sky-400 w-full rounded mb-5">
+        <button class="px-5 py-2 bg-sky-400 w-full rounded mb-5">
           Test
         </button>
         <button @click="resetStrip" class="px-5 py-2 bg-red-700 w-full rounded">
@@ -50,7 +50,6 @@
 <script setup>
 import { ref } from "vue"
 import { useSerial } from "../composables/useSerial"
-import { useLedTest } from "../composables/useAnimations"
 
 const color = ref({ r: 0, g: 128, b: 255, a: 1});
 const brightness = ref(100);

toos-dashboard/src/composables/useAnimations.js

@@ -1,12 +0,0 @@
-import { useSerial } from "./useSerial"
-
-function sleep(ms) {
-  return new Promise(resolve => setTimeout(resolve, ms));
-}
-
-export async function useLedTest(r, g, b) {
-  for (let i = 0; i < 182; i++) {
-    useSerial("SET_LED:" + `${i},${r},${g},${b}`);
-    await sleep(20);
-  }
-}