feat: Play sound

toos-dashboard/src/App.vue

@@ -2,10 +2,14 @@
   <div class="w-full flex h-screen bg-neutral-950">
     <Sidebar @updateCurrentPage="setCurrentPage" />
     <div class="w-full">
+      <Status />
       <Main v-if="currentPage === 0" />
       <Conf v-if="currentPage === 1" />
       <Test v-if="currentPage === 2" />
     </div>
+    <audio id="audioContainer">
+      <source src="./assets/audio.mp3" type="audio/mp3">
+    </audio>
   </div>
 </template>
 
@@ -14,12 +18,32 @@ import Sidebar from "./components/Sidebar.vue";
 import Test from "./components/Test.vue";
 import Main from "./components/Main.vue";
 import Conf from "./components/Conf.vue";
+import Status from "./components/Status.vue";
 
-import { ref } from "vue";
+import { ref, onMounted } from "vue";
+import { listen } from '@tauri-apps/api/event';
+import { invoke } from "@tauri-apps/api/tauri"
+import { useLocalStorage } from '@vueuse/core'
+
+const serialConfig = useLocalStorage('serialConfig', { port: '', baud: 9600, open: false })
 
 const currentPage = ref(2);
 
 const setCurrentPage = (x) => {
   currentPage.value = x;
 }
+
+onMounted(async () => {
+  await invoke('close_port', { portName: serialConfig.value.port, baud: serialConfig.value.baud });
+  serialConfig.value.open = false;
+
+  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/Status.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="text-white flex justify-center w-full bg-neutral-800 py-3">
+    <span class="font-bold">PORT {{serialConfig.port}} is
+      <span v-if="serialConfig.open" class="text-green-500 hover:cursor-pointer" @click="closePort">OPEN</span>
+      <span v-else class="text-red-600 hover:cursor-pointer" @click="openPort">CLOSED</span>
+    </span>
+  </div>
+</template>
+
+<script setup>
+import { useLocalStorage } from '@vueuse/core'
+import { invoke } from "@tauri-apps/api/tauri"
+
+const serialConfig = useLocalStorage('serialConfig', { port: '', baud: 9600, open: false })
+
+const openPort = () => {
+  try {
+    invoke('open_port', { portName: serialConfig.value.port, baud: serialConfig.value.baud });
+  } catch (err) {
+    console.error(err);
+  }
+}
+
+const closePort = async () => {
+  try {
+    await invoke('close_port', { portName: serialConfig.value.port, baud: serialConfig.value.baud });
+  } catch (err) {
+    console.error(err);
+  }
+}
+</script>

toos-dashboard/src/components/Test.vue

@@ -2,7 +2,7 @@
   <h1 class="text-white text-2xl w-full font-bold text-center my-24">Frankenstein Test</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 my-5">LED Strip Monster</h2> 
+      <h2 class="text-white font-bold text-lg text-center mb-5">LED Strip Monster</h2> 
       <div class="flex flex-col items-center">
         <color-input disable-alpha v-model="color" />
         <div class="space-x-3">
@@ -15,25 +15,46 @@
         </div>
       </div>
     </div>
-    <div class="bg-neutral-800 rounded-2xl p-5">
-      <h2 class="text-white font-bold text-lg text-center my-5">LED Strip Hallway</h2> 
+    <div class="bg-neutral-800 rounded-2xl p-5 h-min">
+      <h2 class="text-white font-bold text-lg text-center mb-5">LED Strip Hallway</h2> 
       <div class="flex flex-col items-center">
         <input v-model="brightness" type="range" min="0" max="100" class="w-40">
         <label class="text-white mt-2">BRIGHTNESS: {{ brightness }}% </label>
-        <button @click="submitBrightness" class="px-5 py-2 bg-sky-400 w-full rounded my-5">
+        <button @click="submitBrightness" class="px-5 py-2 bg-sky-400 w-full rounded mt-4">
           Submit
         </button>
       </div>
     </div>
+    <div class="bg-neutral-800 rounded-2xl p-5">
+      <h2 class="text-white font-bold text-lg text-center mb-5">LED Strip Electrons</h2> 
+      <div class="flex flex-col items-center">
+        <color-input disable-alpha v-model="pixel.color" />
+        <div class="flex items-center mt-4">
+          <label class="text-white mr-2">Pixel: </label>
+          <input v-model="pixel.pixel" type="number" min="0" max="182" class="w-40">
+        </div>
+        <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">
+          Test
+        </button>
+        <button @click="resetStrip" class="px-5 py-2 bg-red-700 w-full rounded">
+          Turn Off
+        </button>
+      </div>
+    </div>
   </div>
 </template>
 
 <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);
+const pixel = ref({ color: { r: 64, g: 255, b: 255, a: 1 }, pixel: 0 });
 
 const submitColor = () => {
   useSerial("SET_STRIP_COLOR:" + `${color.value.r},${color.value.g},${color.value.b}`);
@@ -42,6 +63,14 @@ const submitColor = () => {
 const submitBrightness = () => {
   useSerial("SET_LIGHT:" + brightness.value * 2.55);
 }
+
+const submitPixel = () => {
+  useSerial("SET_LED:" + `${pixel.value.pixel},${pixel.value.color.r},${pixel.value.color.g},${pixel.value.color.b}`);
+}
+
+const resetStrip = () => {
+  useSerial("SET_LED_OFF");
+}
 </script>
 
 <style>

toos-dashboard/src/components/conf/Serial.vue

@@ -8,11 +8,10 @@
         <label class="text-white mr-2">BAUD</label>
         <input type="number" v-model="serialConfig.baud">
       </div>
-      <span class="text-white mt-3">Available ports</span>
-      <span v-for="port in ports" class="text-white hover:cursor-pointer" @click="serialConfig.port = port">
+      <span class="text-white mt-3 font-bold">Available ports:</span>
+      <span v-for="port in ports" class="text-white hover:cursor-pointer bg-neutral-900 rounded w-full px-3 py-1 hover:bg-opacity-50" @click="serialConfig.port = port">
         {{ port }}
       </span>
-      <button @click="readSerial">READ</button>
     </div>
   </div>
 </template>
@@ -24,7 +23,7 @@ import { useLocalStorage } from '@vueuse/core'
 
 const ports = ref([])
 
-const serialConfig = useLocalStorage('serialConfig', { port: '', baud: 9600 })
+const serialConfig = useLocalStorage('serialConfig', { port: '', baud: 9600, open: false })
 
 const getSerialPorts = async () => {
   return await invoke('get_serial_ports');
@@ -32,11 +31,5 @@ const getSerialPorts = async () => {
 
 onMounted(async () => {
   ports.value = await getSerialPorts()
-
-  invoke('open_port');
 })
-
-const readSerial = async () => {
-  return await invoke('read_serial', { portName: "/dev/ttyUSB0" });
-}
 </script>

toos-dashboard/src/composables/useAnimations.js

@@ -0,0 +1,12 @@
+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);
+  }
+}

toos-dashboard/src/composables/useSerial.js

@@ -1,9 +1,14 @@
 import { invoke } from "@tauri-apps/api/tauri"
+import { message } from '@tauri-apps/api/dialog';
 import { useLocalStorage } from '@vueuse/core'
 
 const serialConfig = useLocalStorage('serialConfig', { port: '', baud: 9600 })
 
-export function useSerial(input) {
-  console.log(serialConfig.value)
-  invoke('write_serial', { input: input + ";", portName: serialConfig.value.port, baud: serialConfig.value.baud });
+export async function useSerial(input) {
+  try {
+    await invoke('write_serial', { input: input + ";", portName: serialConfig.value.port, baud: serialConfig.value.baud });
+  } catch (err) {
+    console.error(err);
+    await message(err, { title: 'Error while writing serial', type: 'error' });
+  }
 }