Création du composant WebSocket pour dialoguer avec le service DMX Manager

2024-12-23 22:00:11 +01:00 · 2024-12-23 22:00:11 +01:00 · 723b6ce9f5
commit 723b6ce9f5
parent a666320436
1 changed files with 102 additions and 0 deletions
--- a/ui/src/components/WSDebugControl.vue
+++ b/ui/src/components/WSDebugControl.vue
@ -0,0 +1,102 @@
+<template>
+   <v-container class="v-container-style-console-dmx"> 
+      <v-card tile outlined width="500">   
+         <v-card-title class="card__title primary centered-title">     
+            <v-icon left class="pr-5 pl-2" size="40">mdi-console-line</v-icon>     
+            Console DMX
+         </v-card-title>   
+         <v-container class="text-center">     
+            <v-label v-if="!isConnected">Connecting...</v-label>
+            <div class="button-container">
+                <v-btn class="v-btn-dmx white" @click="handleButtonPress(2, 1)" :disabled="!isConnected">Rouge</v-btn>
+                <v-btn class="v-btn-dmx red" @click="handleButtonPress(7, 1)" :disabled="!isConnected">Rouge</v-btn>
+                <v-btn class="v-btn-dmx green" @click="handleButtonPress(8, 1)" :disabled="!isConnected">Vert</v-btn>
+                <v-btn class="v-btn-dmx blue" @click="handleButtonPress(9, 1)" :disabled="!isConnected">Blue</v-btn>
+            </div>
+         </v-container> 
+      </v-card>
+   </v-container>
+</template>
+
+  <script>
+  import { ref, onMounted } from 'vue';
+  import { connectWebSocket, sendButtonPress } from '../../../services/light-manager-DMX.js';
+  
+  export default {
+    setup() {
+      const websocketUrl = 'ws://192.168.1.78:9999/qlcplusWS';
+      const isConnected = ref(false);
+  
+      // Fonction pour connecter le WebSocket et mettre à jour l'état de la connexion
+      const connect = () => {
+        connectWebSocket(websocketUrl);
+        isConnected.value = true;  // Mettre à jour l'état de la connexion
+      };
+  
+      onMounted(() => {
+        connect();
+      });
+  
+      const handleButtonPress = (id, state) => {
+        sendButtonPress(id, state);
+              // Pause de 2 secondes
+        setTimeout(() => {
+            sendButtonPress(id, !state);
+        }, 500); // 2000 millisecondes = 2 secondes
+  
+      };
+  
+      return {
+        handleButtonPress,
+        isConnected,
+      };
+    },
+  };
+  </script>
+  
+<style scoped>
+  .v-container-style-console-dmx { 
+      justify-content: center;
+      position: sticky;
+      top: 50px; /* Distance depuis le haut de la fenêtre avant de "coller" */
+  }
+  .centered-title { 
+      text-align: center;
+  }
+  .v-label-timestamp{ 
+      opacity: 100%; 
+      font-style: oblique;
+      font-weight: 400; 
+      color: #838383;
+  }
+  .button-container{
+    display: flex; /* Active le mode Flexbox */
+    justify-content: space-around; /* Répartit les boutons équitablement */
+    align-items: center; /* Aligne les boutons verticalement */
+    text-align: center;
+    margin-top: 12px;
+    margin-bottom: 27px;
+    margin-left: 15px;
+    margin-right: 13px;
+    }
+  .v-btn-dmx{
+    width: 100px;
+    margin: 2% auto 0; /* 5% de marge en bas pour espacer les boutons */
+    
+  }
+  .v-btn-dmx.white{ 
+    background-color:#ffffff;
+    color: #000000;
+  }
+  .v-btn-dmx.red{ 
+    background-color: rgba(var(--v-theme-primary));
+  }
+
+  .v-btn-dmx.green{ 
+    background-color: rgba(var(--v-theme-GreenBuzzer));
+  }
+
+  .v-btn-dmx.blue{ 
+    background-color: rgba(var(--v-theme-BlueBuzzer));
+  }
+  </style>