Configuration des buzzer sur ap fablab

buzzer/buzzer.ino

@@ -2,11 +2,13 @@
 #include <PubSubClient.h>
 
 // Configurations WiFi et MQTT
-const char* ssid = "Redmi Note 13 Pro 5G";
+const char* ssid = "fablab";
-const char* password = "1234567890";
+const char* password = "geek make code do";
-const char* mqtt_server = "192.168.127.208";
+const char* mqtt_server = "192.168.73.20";
 const char* mqtt_topic = "brainblast/buzzer/pressed/1";
 const char* mqtt_message = "{\"buzzer_id\": 1, \"color\": \"#FF7518\"}";
+//hostname wifi et client id mqtt
+const char* esp_name = "BUZZER-1";
 
 // Déclaration des broches
 #define BUTTON_PIN D8
@@ -18,6 +20,7 @@ void setup_wifi() {
   delay(10);
   Serial.println();
   Serial.print("Connexion au WiFi...");
+  WiFi.hostname(esp_name);
   WiFi.begin(ssid, password);
 
   while (WiFi.status() != WL_CONNECTED) {
@@ -34,7 +37,7 @@ void setup_wifi() {
 void reconnect() {
   while (!client.connected()) {
     Serial.print("Connexion au broker MQTT...");
-    if (client.connect("ESP8266Client")) {
+    if (client.connect(esp_name)) {
       Serial.println("connecté");
     } else {
       Serial.print("échec, rc=");

ui/src/components/MQTTColorPublisher.vue

@@ -1,95 +0,0 @@
-<template>
-  <v-container class="v-container-style">   
-    <v-card tile outlined width="500">     
-      <v-card-title class="card__title primary centered-title">       
-        <v-icon left class="pr-5 pl-2" size="30">mdi-send</v-icon>       
-        Publier une couleur    
-      </v-card-title>     
-      <div class="input-style">       
-        <v-select label="Topic" v-model="selectedTopic" :items="topics" prepend-icon="mdi-target"></v-select>   
-      </div> 
-      <v-row>
-        <v-col cols="6" class="color-picker-style">
-          <div>
-            <v-color-picker mode="hex" v-model="selectedColor" border="md" width="250"></v-color-picker>
-            <v-btn class="v-btn-style-validate" height="35" @click="publisCustomColor">Publier</v-btn>  
-        </div>
-        </v-col>
-        <v-col cols="5.5" class="button-container">
-          <v-btn color="#D42828" class="team-button" @click="publisButtonColor('#D42828')">Team Rouge</v-btn>
-          <v-btn color="#FF7518" class="team-button" @click="publisButtonColor('#FF7518')">Team Orange</v-btn>
-          <v-btn color="#00FF1F" class="team-button" @click="publisButtonColor('#00FF1F')">Team Verte</v-btn>
-          <v-btn color="#007AFF" class="team-button" @click="publisButtonColor('#007AFF')">Team Bleue</v-btn>
-          <v-btn color="#FFFC00" class="team-button" @click="publisButtonColor('#FFFC00')">Team Jaune</v-btn>
-        </v-col>
-      </v-row>
-    </v-card> 
-  </v-container>
-
-</template>
-
-<script>
-import { publishMessage } from '@/services/mqttService'
-
-export default {
-  data() { 
-    return {   
-      message: '', // Initialiser la variable message   
-      selectedTopic: 'Selectionnez un topic',   
-      selectedColor: "#FF0000",   
-      topics: [     
-        '/wled/all',
-        '/wled/1',
-        '/wled/2',
-        '/wled/3',
-        '/wled/4',
-        '/wled/5'
-      ]
-    }
-},
-  methods: { 
-    publisCustomColor() {   
-      publishMessage(this.selectedTopic, this.selectedColor)
-    },
-    publisButtonColor(param) {   
-      publishMessage(this.selectedTopic, param)
-    },
-    
-  }
-}
-</script>
-
-<style>
-  .v-container-style { 
-    align-items: center; 
-    justify-content: center;
-  }
-  .input-style{ 
-    margin: 20px;
-  }
-  .v-btn-style-validate{ 
-    border-top-right-radius: 0%; 
-    border-top-left-radius: 0%;
-  }
-  .centered-title { 
-    text-align: center;
-  }
-  .color-picker-style {
-    margin-left: 5%;
-    margin-bottom: 5%;
-    display: flex;
-  }
-  .button-container {
-  text-align: center;
-  margin-top: 12px;
-  margin-bottom: 27px;
-  margin-left: 15px;
-  margin-right: 13px;
-}
-  .team-button {
-    width: 140px;
-    display: block;
-    margin: 12% auto 0; /* 5% de marge en bas pour espacer les boutons */
-    background-color: #d42828;
-  }
-</style>

ui/src/components/MQTTDebugConsole.vue

@@ -1,5 +1,5 @@
 <template>
-   <v-container class="v-container-style-console"> 
+   <v-container class="v-container-style"> 
       <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>     
@@ -7,9 +7,8 @@
          </v-card-title>   
          <v-container class="text-center">     
             <div v-for="(log, index) in messageLogs" :key="index">       
-               <v-label class="v-label-timestamp">{{ log.timestamp }} -&nbsp;</v-label>    
+               <v-label class="v-label-timestamp">{{ log.timestamp }} </v-label>        -        
-               <v-label class="v-label-topic-message-title">Topic :&nbsp;</v-label><v-label class="v-label-topic-message">{{ log.topic }}&nbsp;</v-label>     
+               <v-label>{{ log.message }}</v-label>     
-               <v-label class="v-label-topic-message-title">Msg :&nbsp;</v-label><v-label class="v-label-topic-message">{{ log.message }}</v-label>     
             </div>   
          </v-container> 
       </v-card>
@@ -33,11 +32,10 @@
       });
       
       // Ajouter le message avec l'horodatage à la liste des messages   
-      this.messageLogs.push({ timestamp, topic: `${topic}`, message: `${message}`  });
+      this.messageLogs.push({ timestamp, message: `Topic: ${topic}, Message: ${message}` });
-      //this.messageLogs.push({ timestamp, message: `${message}` });
       
       // Limiter la liste à 10 messages   
-      if (this.messageLogs.length > 26) {     
+      if (this.messageLogs.length > 10) {     
       this.messageLogs.shift(); // Supprimer le premier élément (le plus ancien)   
       } }) // S'abonner à tous les topics MQTT
    }
@@ -45,28 +43,16 @@
 </script>
 
 <style>
-  .v-container-style-console { 
+  .v-container-style { 
-      display: flex; 
+   display: flex; 
-      justify-content: center;
+   justify-content: center;
-      position: sticky;
-      top: 50px; /* Distance depuis le haut de la fenêtre avant de "coller" */
   }
   .centered-title { 
-      text-align: center;
+   text-align: center;
   }
   .v-label-timestamp{ 
-      opacity: 100%; 
+   opacity: 100%; 
-      font-style: oblique;
+   font-weight: 700; 
-      font-weight: 400; 
+    color: #d42828;
-      color: #838383;
   }
-  .v-label-topic-message-title{ 
-      opacity: 100%; 
-      font-weight: 700; 
-      color: #d42828;
-  }
-  .v-label-topic-message{ 
-      font-weight: 300; 
-  }
-
 </style>

ui/src/components/MQTTDebugPublish.vue

@@ -8,9 +8,7 @@
       <div class="input-style">       
         <v-select label="Topic" v-model="selectedTopic" :items="topics" prepend-icon="mdi-target"></v-select>       
         <v-text-field label="Message" v-model="message" prepend-icon="mdi-text-box"></v-text-field>     
-      </div>       
+      </div>       <v-btn class="v-btn-style" height="50" @click="publishMessage">Publier</v-btn>   
-      <v-btn class="v-btn-style-standalone" height="40" @click="publishBuzzerUnblock">Déblocage<br>Buzzer</v-btn>
-      <v-btn class="v-btn-style-validate" height="50" @click="publisCustomMessage">Publier</v-btn>   
     </v-card> 
   </v-container>
 
@@ -21,22 +19,13 @@ import { publishMessage } from '@/services/mqttService'
 
 export default {
   data() { return {   message: '', // Initialiser la variable message   
-    selectedTopic: 'Selectionnez un topic',   
+    selectedTopic: 'topic1',   
-    topics: [     
+    topics: [     '/display/control',     '/sound/playsound',     'topic3',     'topic4',     'topic5',     'topic6',     'topic7',     'topic8',     'topic9',     'topic10'   ] // Liste des topics 
-      '/wled/all',     
-      '/display/control',     
-      '/sound/playsound'
-    ] // Liste des topics 
   }
 },
   methods: { 
-    publisCustomMessage() {   
+    publishMessage() {   
-      publishMessage(this.selectedTopic, this.message)
+      publishMessage(this.selectedTopic, this.message) }
-    },
-    publishBuzzerUnblock() {   
-      publishMessage('brainblast/buzzer/unlock', "0")  
-    }
-    
   }
 }
 </script>
@@ -49,12 +38,7 @@ export default {
   .input-style{ 
     margin: 20px;
   }
-  .v-btn-style-standalone{ 
+  .v-btn-style{ 
-    background-color: #d42828; /* Changez la couleur en fonction de votre thème */ 
-    margin-bottom: 5%;
-    margin-left: 5%;
-  }
-  .v-btn-style-validate{ 
     align-items: center; 
     justify-content: center; 
     width: 100%; 

ui/src/views/MQTTDebugView.vue

@@ -1,42 +1,15 @@
 <template>
-  <v-row>
+  <div> <!-- Zone pour publier sur MQTT --> <PublishMQTTComponent />
-    
+ <!-- Zone pour afficher la console MQTT --> <MQTTConsoleComponent />
-  </v-row>
-  <div> <!-- Zone pour publier sur MQTT --> 
- <!-- Zone pour afficher la console MQTT --> 
   </div>
-  <v-container>
-    <v-row>
-      <!-- Colonne gauche avec les deux composants empilés -->
-      <v-col cols="6">
-        <!-- Composant 1 -->
-        <v-row>
-          <v-col>
-            <PublishMQTTComponent />
-            <MQTTColorPublisher />
-
-          </v-col>
-        </v-row>
-      </v-col>
-
-      <!-- Colonne droite avec le composant unique -->
-      <v-col cols="6">
-        <MQTTConsoleComponent />
-      </v-col>
-    </v-row>
-  </v-container>
 </template>
 
 <script>
 import PublishMQTTComponent from '@/components/MQTTDebugPublish.vue' // Importer le composant pour publier sur MQTT
-import MQTTConsoleComponent from '@/components/MQTTDebugConsole.vue' // Importer le composant pour publier sur MQTT
+import MQTTConsoleComponent from '@/components/MQTTDebugConsole.vue' // Importer le composant pour la console MQTT
-import MQTTColorPublisher from '@/components/MQTTColorPublisher.vue' // Importer le composant pour publier sur MQTT
 
 export default {
-  components: { 
+  components: { PublishMQTTComponent, // Composant pour publier sur MQTT MQTTConsoleComponent // Composant pour la console MQTT
-    PublishMQTTComponent, // Composant pour publier sur MQTT MQTTConsoleComponent // Composant pour la console MQTT
-    MQTTConsoleComponent, // Composant pour la console MQTT
-    MQTTColorPublisher, // Composant pour publier une couleur custom dans un topic
   }
 }
 </script>