asco.fablab/BrainBlast
11
0
Fork 0
Code Issues 3 Pull Requests Packages Projects Releases Wiki Activity

Ajout d'un draft d'un quizz + un draft de l'exploitation des images via un webrequest sur pictureEngine.js

Browse Source
This commit is contained in:
Jérémy CHOMAZ 2024-09-11 15:38:13 +02:00
parent f2aa7e64a0
commit d0cc633264
54 changed files with 1786 additions and 997 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
ui/index.html
View File

@ -1,13 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="fr"> <html lang="fr">
<head> <head> <meta charset="UTF-8"> <link rel="icon" href="/favicon.ico"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Brain Blast</title>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Brain Blast</title>
</head> </head>
<body> <body> <div id="app"></div> <script type="module" src="/src/main.js"></script>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body> </body>
</html> </html>

5
ui/jsconfig.json
View File

@ -1,8 +1,5 @@
{ {
"compilerOptions": { "compilerOptions": { "paths": { "@/*": ["./src/*"] }
"paths": {
"@/*": ["./src/*"]
}
}, },
"exclude": ["node_modules", "dist"] "exclude": ["node_modules", "dist"]
} }

1257
ui/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

1
ui/package.json
View File

@ -13,6 +13,7 @@
}, },
"dependencies": { "dependencies": {
"@mdi/font": "^7.4.47", "@mdi/font": "^7.4.47",
"express": "^5.0.0",
"mqtt": "^5.3.5", "mqtt": "^5.3.5",
"ping": "^0.4.4", "ping": "^0.4.4",
"roboto-fontface": "^0.10.0", "roboto-fontface": "^0.10.0",

6
ui/src/App.vue
View File

@ -1,11 +1,11 @@
<template> <template>
<v-app> <v-app>
<BrainBlastBar /> <BrainBlastBar />
<GameStatus v-if="$route.name === 'Game Control (Présentateur)'"></GameStatus> <GameStatus v-if="$route.name === 'Game Control (Présentateur)'">
</GameStatus>
<v-main> <v-main>
<RouterView /> <RouterView />
</v-main> </v-main> <!-- <v-footer class="footer" :elevation=12 border><v-row justify="center">© 2024 - ASCO section Fablab</v-row></v-footer> -->
<!-- <v-footer class="footer" :elevation=12 border><v-row justify="center">© 2024 - ASCO section Fablab</v-row></v-footer> -->
</v-app> </v-app>
</template> </template>

26
ui/src/components/CardControl.vue
View File

@ -12,22 +12,7 @@
</mqtt-button> </mqtt-button>
</v-col> </v-col>
<v-col cols="12" sm="6" md="5" class="mt-4"> <v-col cols="12" sm="6" md="5" class="mt-4">
<mqtt-button width="150" height="90" class="btn red card" topic="/display/control" message="next"> <mqtt-button width="150" height="90" class="btn red card" topic="/display/control" message="next"> <v-icon left size="60">mdi-skip-next</v-icon> </mqtt-button> </v-col> <v-col cols="12" sm="6" md="5" class="mb-4"> <mqtt-button width="150" height="90" class="btn red card" topic="/display/control" message="pause"> <v-icon left size="60">mdi-pause</v-icon> </mqtt-button> </v-col> <v-col cols="12" sm="6" md="5" class="mb-4"> <mqtt-button width="150" height="90" class="btn red card" topic="/display/control" message="play"> <v-icon left size="60">mdi-play</v-icon> </mqtt-button> </v-col> </v-row> </v-container>
<v-icon left size="60">mdi-skip-next</v-icon>
</mqtt-button>
</v-col>
<v-col cols="12" sm="6" md="5" class="mb-4">
<mqtt-button width="150" height="90" class="btn red card" topic="/display/control" message="pause">
<v-icon left size="60">mdi-pause</v-icon>
</mqtt-button>
</v-col>
<v-col cols="12" sm="6" md="5" class="mb-4">
<mqtt-button width="150" height="90" class="btn red card" topic="/display/control" message="play">
<v-icon left size="60">mdi-play</v-icon>
</mqtt-button>
</v-col>
</v-row>
</v-container>
</v-card> </v-card>
</template> </template>
@ -39,16 +24,11 @@
const isCardReduced = ref(false); const isCardReduced = ref(false);
// Méthode pour basculer l'état de la carte // Méthode pour basculer l'état de la carte
function toggleCardSize() { function toggleCardSize() { isCardReduced.value = !isCardReduced.value;
isCardReduced.value = !isCardReduced.value;
} }
</script> </script>
<style> <style>
.card--reduced { .card--reduced { height: 56px; /* Réglez la hauteur réduite selon vos besoins */ width: 170px; overflow: hidden; transition: height 0.3s ease-in-out;
height: 56px; /* Réglez la hauteur réduite selon vos besoins */
width: 170px;
overflow: hidden;
transition: height 0.3s ease-in-out;
} }
</style> </style>

146
ui/src/components/CardScore.vue
View File

@ -1,97 +1,8 @@
<template> <template> <div class="label-pos"> <v-label class="labelTitle-style pb-4">Scores</v-label> </div>
<div class="label-pos"> <!-- Équipes Rouges et Bleues côte à côte --> <v-row no-gutters class="scorebox-pos"> <!-- Équipe Rouge --> <v-col cols="6"> <!-- Colonnes de taille 6 pour chaque équipe --> <v-row no-gutters> <v-col class="scorediv-style-red"> <div> <v-label class="labelRoundScore-style pt-3">Manche</v-label> <div> <v-label class="labelRoundScore-style">{{ RedRoundScore }}</v-label> </div> </div> <v-divider color="background"/> <div> <v-label class="labelTotalScore-style pt-3">Total</v-label> <div> <v-label class="labelTotalScore-style pb-3">{{ RedTotalScore }}</v-label> </div> </div> </v-col> </v-row> </v-col>
<v-label class="labelTitle-style pb-4">Scores</v-label> <!-- Équipe Bleue --> <v-col cols="6"> <v-row no-gutters> <v-col class="scorediv-style-blue"> <div> <v-label class="labelRoundScore-style pt-3">Manche</v-label> <div> <v-label class="labelRoundScore-style">{{ BlueRoundScore }}</v-label> </div> </div> <v-divider color="background"/> <div> <v-label class="labelTotalScore-style pt-3">Total</v-label> <div> <v-label class="labelTotalScore-style pb-3">{{ BlueTotalScore }}</v-label> </div> </div> </v-col> </v-row> </v-col> </v-row>
</div> <!-- Équipes Oranges et Vertes côte à côte --> <v-row no-gutters class="scorebox-pos"> <!-- Équipe Orange --> <v-col cols="6"> <v-row no-gutters> <v-col class="scorediv-style-orange"> <div> <v-label class="labelRoundScore-style pt-3">Manche</v-label> <div> <v-label class="labelRoundScore-style">{{ OrangeRoundScore }}</v-label> </div> </div> <v-divider color="background"/> <div> <v-label class="labelTotalScore-style pt-3">Total</v-label> <div> <v-label class="labelTotalScore-style pb-3">{{ OrangeTotalScore }}</v-label> </div> </div> </v-col> </v-row> </v-col>
<!-- Équipe Verte --> <v-col cols="6"> <v-row no-gutters> <v-col class="scorediv-style-green"> <div> <v-label class="labelRoundScore-style pt-3">Manche</v-label> <div> <v-label class="labelRoundScore-style">{{ GreenRoundScore }}</v-label> </div> </div> <v-divider color="background"/> <div> <v-label class="labelTotalScore-style pt-3">Total</v-label> <div> <v-label class="labelTotalScore-style pb-3">{{ GreenTotalScore }}</v-label> </div> </div> </v-col> </v-row> </v-col> </v-row>
<!-- Équipes Rouges et Bleues côte à côte -->
<v-row no-gutters class="scorebox-pos">
<!-- Équipe Rouge -->
<v-col cols="6"> <!-- Colonnes de taille 6 pour chaque équipe -->
<v-row no-gutters>
<v-col class="scorediv-style-red">
<div>
<v-label class="labelRoundScore-style pt-3">Manche</v-label>
<div>
<v-label class="labelRoundScore-style">{{ RedRoundScore }}</v-label>
</div>
</div>
<v-divider color="background"/>
<div>
<v-label class="labelTotalScore-style pt-3">Total</v-label>
<div>
<v-label class="labelTotalScore-style pb-3">{{ RedTotalScore }}</v-label>
</div>
</div>
</v-col>
</v-row>
</v-col>
<!-- Équipe Bleue -->
<v-col cols="6">
<v-row no-gutters>
<v-col class="scorediv-style-blue">
<div>
<v-label class="labelRoundScore-style pt-3">Manche</v-label>
<div>
<v-label class="labelRoundScore-style">{{ BlueRoundScore }}</v-label>
</div>
</div>
<v-divider color="background"/>
<div>
<v-label class="labelTotalScore-style pt-3">Total</v-label>
<div>
<v-label class="labelTotalScore-style pb-3">{{ BlueTotalScore }}</v-label>
</div>
</div>
</v-col>
</v-row>
</v-col>
</v-row>
<!-- Équipes Oranges et Vertes côte à côte -->
<v-row no-gutters class="scorebox-pos">
<!-- Équipe Orange -->
<v-col cols="6">
<v-row no-gutters>
<v-col class="scorediv-style-orange">
<div>
<v-label class="labelRoundScore-style pt-3">Manche</v-label>
<div>
<v-label class="labelRoundScore-style">{{ OrangeRoundScore }}</v-label>
</div>
</div>
<v-divider color="background"/>
<div>
<v-label class="labelTotalScore-style pt-3">Total</v-label>
<div>
<v-label class="labelTotalScore-style pb-3">{{ OrangeTotalScore }}</v-label>
</div>
</div>
</v-col>
</v-row>
</v-col>
<!-- Équipe Verte -->
<v-col cols="6">
<v-row no-gutters>
<v-col class="scorediv-style-green">
<div>
<v-label class="labelRoundScore-style pt-3">Manche</v-label>
<div>
<v-label class="labelRoundScore-style">{{ GreenRoundScore }}</v-label>
</div>
</div>
<v-divider color="background"/>
<div>
<v-label class="labelTotalScore-style pt-3">Total</v-label>
<div>
<v-label class="labelTotalScore-style pb-3">{{ GreenTotalScore }}</v-label>
</div>
</div>
</v-col>
</v-row>
</v-col>
</v-row>
</template> </template>
<script setup> <script setup>
@ -111,51 +22,24 @@ const GreenRoundScore = ref(variables.GreenRoundScore);
</script> </script>
<style> <style>
.label-pos { .label-pos { padding-top: 15px; text-align: center;
padding-top: 15px;
text-align: center;
} }
.labelTitle-style { .labelTitle-style { font-size: 20px !important; font-weight: 500; color: #d42828 !important; opacity: 90% !important;
font-size: 20px !important;
font-weight: 500;
color: #d42828 !important;
opacity: 90% !important;
} }
.labelRoundScore-style { .labelRoundScore-style { opacity: 100% !important; font-size: 25px !important; font-weight: 500;
opacity: 100% !important;
font-size: 25px !important;
font-weight: 500;
} }
.labelTotalScore-style { .labelTotalScore-style { opacity: 100% !important; font-size: 15px !important; font-weight: 500;
opacity: 100% !important;
font-size: 15px !important;
font-weight: 500;
} }
.button-pos { .button-pos { padding-top: 10px; padding-bottom: 15px;
padding-top: 10px;
padding-bottom: 15px;
} }
.scorebox-pos { .scorebox-pos { text-align: center;
text-align: center;
} }
.scorediv-style-red { .scorediv-style-red { background-color: #d42828 !important; padding: 15px; border-top-left-radius: 10%;
background-color: #d42828 !important;
padding: 15px;
border-top-left-radius: 10%;
} }
.scorediv-style-orange { .scorediv-style-orange { background-color: #d48f28 !important; padding: 15px; border-bottom-left-radius: 10%;
background-color: #d48f28 !important;
padding: 15px;
border-bottom-left-radius: 10%;
} }
.scorediv-style-blue { .scorediv-style-blue { background-color: #2867d4 !important; padding: 15px; border-top-right-radius: 10%;
background-color: #2867d4 !important;
padding: 15px;
border-top-right-radius: 10%;
} }
.scorediv-style-green { .scorediv-style-green { background-color: #28d42e !important; padding: 15px; border-bottom-right-radius: 10%;
background-color: #28d42e !important;
padding: 15px;
border-bottom-right-radius: 10%;
} }
</style> </style>

16
ui/src/components/CardSolution.vue
View File

@ -2,13 +2,12 @@
<v-card tile outlined :class="{ 'card--reduced': isCardReduced }"> <v-card tile outlined :class="{ 'card--reduced': isCardReduced }">
<v-card-title class="card__title primary" @click="toggleCardSize"> <v-card-title class="card__title primary" @click="toggleCardSize">
<v-icon left class="white--text pr-5 pl-2" size="40">mdi-play-network-outline</v-icon> <v-icon left class="white--text pr-5 pl-2" size="40">mdi-play-network-outline</v-icon>
Solution Solution </v-card-title>
</v-card-title>
<v-container class="text-center"> <v-container class="text-center">
<v-row justify="center"> <v-row justify="center">
<v-container class="text-center"> <v-container class="text-center"> <!-- Utilisation de styles CSS personnalisés pour centrer l'image -->
<!-- Utilisation de styles CSS personnalisés pour centrer l'image --> <v-img width="450" src="@/assets/copilot-solution-FULL-HD.jpg" style="margin: 0 auto;">
<v-img width="450" src="@/assets/copilot-solution-FULL-HD.jpg" style="margin: 0 auto;"></v-img> </v-img>
</v-container> </v-container>
</v-row> </v-row>
</v-container> </v-container>
@ -17,8 +16,7 @@
<style> <style>
@media (min-width: 1024px) { @media (min-width: 1024px) {
.image-container { .image-container {
width: 300px; width: 300px; overflow: hidden; /* Pour masquer le dépassement de l'image */
overflow: hidden; /* Pour masquer le dépassement de l'image */
border: 1px solid #ccc; /* Bordure de l'image */ border: 1px solid #ccc; /* Bordure de l'image */
} }
.image-container img { .image-container img {
@ -26,8 +24,8 @@
height: auto; /* Pour maintenir le ratio d'aspect de l'image */ height: auto; /* Pour maintenir le ratio d'aspect de l'image */
display: block; /* Pour éviter l'espace réservé pour les images */ display: block; /* Pour éviter l'espace réservé pour les images */
} }
} }
.card--reduced { .card--reduced {
height: 56px; /* Réglez la hauteur réduite selon vos besoins */ height: 56px; /* Réglez la hauteur réduite selon vos besoins */
width: 160px; width: 160px;
overflow: hidden; overflow: hidden;

34
ui/src/components/CardTimer.vue
View File

@ -3,7 +3,6 @@
<div class="timer"> <div class="timer">
<v-label color="primary" class="labelTime-style" >{{ formatTime }}</v-label> <v-label color="primary" class="labelTime-style" >{{ formatTime }}</v-label>
</div> </div>
<v-row no-gutters justify="space-around" > <v-row no-gutters justify="space-around" >
<v-btn class="buttons" color="primary" icon="mdi-play" @click="startTimer"></v-btn> <v-btn class="buttons" color="primary" icon="mdi-play" @click="startTimer"></v-btn>
<v-btn color="primary" icon="mdi-pause" @click="pauseTimer"></v-btn> <v-btn color="primary" icon="mdi-pause" @click="pauseTimer"></v-btn>
@ -24,10 +23,7 @@
let seconds = Math.floor(elapsedTime.value / 1000); let seconds = Math.floor(elapsedTime.value / 1000);
let minutes = Math.floor(seconds / 60); let minutes = Math.floor(seconds / 60);
let hours = Math.floor(minutes / 60); let hours = Math.floor(minutes / 60);
seconds = seconds % 60; minutes = minutes % 60;
seconds = seconds % 60;
minutes = minutes % 60;
return `${pad(hours)}:${pad(minutes)}:${pad(seconds)}`; return `${pad(hours)}:${pad(minutes)}:${pad(seconds)}`;
}); });
@ -39,15 +35,13 @@
if (!timerActive.value) { if (!timerActive.value) {
timerActive.value = true; timerActive.value = true;
startTime.value = Date.now() - elapsedTime.value; startTime.value = Date.now() - elapsedTime.value;
updateTimer(); updateTimer(); }
}
}; };
const pauseTimer = () => { const pauseTimer = () => {
if (timerActive.value) { if (timerActive.value) {
timerActive.value = false; timerActive.value = false;
clearInterval(currentTime.value); clearInterval(currentTime.value); }
}
}; };
const resetTimer = () => { const resetTimer = () => {
@ -57,38 +51,26 @@
}; };
const updateTimer = () => { const updateTimer = () => {
currentTime.value = setInterval(() => { currentTime.value = setInterval(() => {elapsedTime.value = Date.now() - startTime.value; }, 1000);
elapsedTime.value = Date.now() - startTime.value;
}, 1000);
}; };
onBeforeUnmount(() => { onBeforeUnmount(() => { clearInterval(currentTime.value);
clearInterval(currentTime.value);
}); });
</script> </script>
<script> <script>
const startTimer = () => { const startTimer = () => {
if (!timerActive.value) { if (!timerActive.value) {
timerActive.value = true; timerActive.value = true;
startTime.value = Date.now() - elapsedTime.value; startTime.value = Date.now() - elapsedTime.value;
updateTimer(); updateTimer(); } };
}
};
const pauseTimer = () => { const pauseTimer = () => {
if (timerActive.value) { if (timerActive.value) {
timerActive.value = false; timerActive.value = false;
clearInterval(currentTime.value); clearInterval(currentTime.value); } };
}
};
const resetTimer = () => { const resetTimer = () => {
elapsedTime.value = 0; elapsedTime.value = 0;
timerActive.value = false; timerActive.value = false;
clearInterval(currentTime.value); clearInterval(currentTime.value); };
};
export { startTimer, pauseTimer, resetTimer }; export { startTimer, pauseTimer, resetTimer };
</script> </script>

12
ui/src/components/GameStatus.vue
View File

@ -3,27 +3,23 @@
<div class="label-pos"> <div class="label-pos">
<v-label class="labelTitle-style">Buzzer connectés</v-label> <v-label class="labelTitle-style">Buzzer connectés</v-label>
</div> </div>
<v-row no-gutters justify="space-around" class="button-pos"> <v-row no-gutters justify="space-around" class="button-pos">
<v-icon color="BuzzerRed">mdi-radiobox-marked</v-icon> <v-icon color="BuzzerRed">mdi-radiobox-marked</v-icon>
<v-icon color="BuzzerBlue">mdi-radiobox-marked</v-icon> <v-icon color="BuzzerBlue">mdi-radiobox-marked</v-icon>
<v-icon color="BuzzerOrange">mdi-radiobox-marked</v-icon> <v-icon color="BuzzerOrange">mdi-radiobox-marked</v-icon>
<v-icon color="BuzzerGreen">mdi-radiobox-marked</v-icon> <v-icon color="BuzzerGreen">mdi-radiobox-marked</v-icon>
</v-row> </v-row>
<v-divider :thickness="2" class="border-opacity-100" color="primary"/> <v-divider :thickness="2" class="border-opacity-100" color="primary"/>
<CardScore/> <CardScore/>
<CardTimer/> <CardTimer/>
</v-navigation-drawer> </v-navigation-drawer>
</template> </template>
<script setup> <script setup>
import CardTimer from '@/components/CardTimer.vue' import CardTimer from '@/components/CardTimer.vue'
import CardScore from '@/components/CardScore.vue' import CardScore from '@/components/CardScore.vue'
import { ref } from 'vue'; // Import des fonctions de Vue 3 import { ref } from 'vue'; // Import des fonctions de Vue 3
import variables from '@/variables.js'; import variables from '@/variables.js';
</script> </script>

17
ui/src/components/MQTTDebugConsole.vue
View File

@ -7,8 +7,7 @@
</v-card-title> </v-card-title>
<v-container class="text-center"> <v-container class="text-center">
<div v-for="(log, index) in messageLogs" :key="index"> <div v-for="(log, index) in messageLogs" :key="index">
<v-label class="v-label-timestamp">{{ log.timestamp }} </v-label> <v-label class="v-label-timestamp">{{ log.timestamp }} </v-label> -
-
<v-label>{{ log.message }}</v-label> <v-label>{{ log.message }}</v-label>
</div> </div>
</v-container> </v-container>
@ -17,17 +16,14 @@
</template> </template>
<script> <script>
import { subscribeToTopic } from '@/services/mqttService' import { subscribeToTopic } from '@/services/mqttService'
export default { export default {
data() { data() { return {
return {
messageLogs: [] // Initialiser un tableau pour stocker les messages MQTT avec horodatage messageLogs: [] // Initialiser un tableau pour stocker les messages MQTT avec horodatage
} }
}, },
created() { created() { subscribeToTopic('#', (topic, message) => { // Obtenir l'horodatage actuel
subscribeToTopic('#', (topic, message) => {
// Obtenir l'horodatage actuel
const timestamp = new Date().toLocaleString('fr-FR', { const timestamp = new Date().toLocaleString('fr-FR', {
hour12: false, hour12: false,
hour: '2-digit', hour: '2-digit',
@ -41,10 +37,9 @@ export default {
// Limiter la liste à 10 messages // Limiter la liste à 10 messages
if (this.messageLogs.length > 10) { if (this.messageLogs.length > 10) {
this.messageLogs.shift(); // Supprimer le premier élément (le plus ancien) this.messageLogs.shift(); // Supprimer le premier élément (le plus ancien)
} }) // S'abonner à tous les topics MQTT
} }
}) // S'abonner à tous les topics MQTT
} }
}
</script> </script>
<style> <style>

25
ui/src/components/MQTTDebugPublish.vue
View File

@ -8,8 +8,7 @@
<div class="input-style"> <div class="input-style">
<v-select label="Topic" v-model="selectedTopic" :items="topics" prepend-icon="mdi-target"></v-select> <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> <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" height="50" @click="publishMessage">Publier</v-btn>
</v-card> </v-card>
</v-container> </v-container>
@ -19,28 +18,14 @@
import { publishMessage } from '@/services/mqttService' import { publishMessage } from '@/services/mqttService'
export default { export default {
data() { data() { return { message: '', // Initialiser la variable message
return {
message: '', // Initialiser la variable message
selectedTopic: 'topic1', selectedTopic: 'topic1',
topics: [ topics: [ '/display/control', '/sound/playsound', 'topic3', 'topic4', 'topic5', 'topic6', 'topic7', 'topic8', 'topic9', 'topic10' ] // Liste des topics
'/display/control',
'/sound/playsound',
'topic3',
'topic4',
'topic5',
'topic6',
'topic7',
'topic8',
'topic9',
'topic10'
] // Liste des topics
} }
}, },
methods: { methods: {
publishMessage() { publishMessage() {
publishMessage(this.selectedTopic, this.message) publishMessage(this.selectedTopic, this.message) }
}
} }
} }
</script> </script>

6
ui/src/plugins/router.js
View File

@ -3,8 +3,7 @@ import HomeView from '../views/HomeView.vue'
const router = createRouter({ const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL), history: createWebHistory(import.meta.env.BASE_URL),
routes: [ routes: [ {
{
path: '/', path: '/',
name: 'Accueil', name: 'Accueil',
component: HomeView component: HomeView
@ -27,8 +26,7 @@ const router = createRouter({
{ {
path: '/settings', path: '/settings',
name: 'Paramètres', name: 'Paramètres',
component: () => import('@/views/SettingsView.vue') component: () => import('@/views/SettingsView.vue') }
}
] ]
}) })

3
ui/src/plugins/vuetify.js
View File

@ -52,7 +52,6 @@ export default createVuetify({
defaultTheme: 'CustomThemeDark', defaultTheme: 'CustomThemeDark',
themes: { themes: {
CustomThemeDark, CustomThemeDark,
CustomThemeLight, CustomThemeLight, },
},
}, },
}) })

BIN
ui/src/quizz/geography-history/Q-1.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 MiB

BIN
ui/src/quizz/geography-history/Q-2.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 MiB

BIN
ui/src/quizz/geography-history/Q-3.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 MiB

BIN
ui/src/quizz/geography-history/Q-4.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 MiB

BIN
ui/src/quizz/geography-history/Q-5.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.9 MiB

27
ui/src/quizz/geography-history/config.yml Normal file
View File

@ -0,0 +1,27 @@
name: "Histoire & Géographie"
questions:
1:
Q: "Quelle bataille célèbre s'est déroulée en 1815, marquant la défaite de Napoléon Bonaparte ?"
T: "Elle a eu lieu en Belgique"
R: "La bataille de Waterloo."
P: "Q-1.jpeg"
2:
Q: "Quelle est la capitale de l'Australie ?"
T: "Le nom de cette ville commence par la lettre 'C'"
R: "Canberra."
P: "Q-2.jpeg"
3:
Q: "En quelle année la Seconde Guerre mondiale a-t-elle pris fin ?"
T: "C'est au milieu des années 40."
R: "En 1945."
P: "Q-3.jpeg"
4:
Q: "Quel fleuve traverse la ville du Caire en Égypte ?"
T: "C'est l'un des plus longs fleuves du monde"
R: "Le Nil."
P: "Q-4.jpeg"
5:
Q: "Quel pays a été divisé par un mur de 1961 à 1989 ?"
T: "Sa chute a marqué la fin de la guerre froide."
R: "L'Allemagne (le mur de Berlin)."
P: "Q-5.jpeg"

BIN
ui/src/quizz/geography-history/originales/Q-1.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 447 KiB

BIN
ui/src/quizz/geography-history/originales/Q-2.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 460 KiB

BIN
ui/src/quizz/geography-history/originales/Q-3.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 382 KiB

BIN
ui/src/quizz/geography-history/originales/Q-4.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 355 KiB

BIN
ui/src/quizz/geography-history/originales/Q-5.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 521 KiB

0
ui/src/quizz/movies-series/config.yml Normal file
View File

0
ui/src/quizz/music/config.yml Normal file
View File

0
ui/src/quizz/nature-animals/config.yml Normal file
View File

0
ui/src/quizz/science-technology/config.yml Normal file
View File

0
ui/src/quizz/sport/config.yml Normal file
View File

BIN
ui/src/quizz/video-games/Original/Q-1.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 139 KiB

BIN
ui/src/quizz/video-games/Original/Q-2.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 445 KiB

BIN
ui/src/quizz/video-games/Original/Q-3.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 400 KiB

BIN
ui/src/quizz/video-games/Original/Q-4.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 389 KiB

BIN
ui/src/quizz/video-games/Original/Q-5.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 346 KiB

BIN
ui/src/quizz/video-games/Q-1.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.1 MiB

BIN
ui/src/quizz/video-games/Q-2.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.1 MiB

BIN
ui/src/quizz/video-games/Q-3.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.2 MiB

BIN
ui/src/quizz/video-games/Q-4.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.3 MiB

BIN
ui/src/quizz/video-games/Q-5.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.0 MiB

27
ui/src/quizz/video-games/config.yml Normal file
View File

@ -0,0 +1,27 @@
name: "Jeux vidéos"
questions:
1:
Q: "Quel personnage de jeu vidéo est un plombier moustachu qui saute sur des ennemis pour sauver une princesse ?"
T: "C’est le personnage le plus célèbre de Nintendo, son nom commence par 'M'."
R: "Mario."
P: "Q-1.jpeg"
2:
Q: "Quel jeu vidéo multijoueur de football avec des voitures est très populaire ?"
T: "Il s'agit d'un mélange de sport et de voitures rapides."
R: "Rocket League."
P: "Q-2.jpeg"
3:
Q: "Quel jeu vidéo mobile consiste à faire exploser des bonbons en alignant trois pièces identiques ?"
T: "Son nom fait référence aux bonbons."
R: "Candy Crush Saga."
P: "Q-3.jpeg"
4:
Q: "Quel est le nom du célèbre personnage bleu de SEGA qui court à une vitesse incroyable ?"
T: "Son nom commence par la lettre 'S' et c'est un hérisson."
R: "Sonic"
P: "Q-4.jpeg"
5:
Q: "Quel jeu permet de construire et explorer un monde fait de blocs, tout en survivant face à des monstres ?"
T: "Le monde est entièrement fait de blocs carrés."
R: "Minecraft."
P: "Q-5.jpeg"

10
ui/src/services/buzzerWatcher.js
View File

@ -51,13 +51,11 @@ const store = new Vuex.Store({
const hosts = ['192.168.1.1', '192.168.1.2', '192.168.1.3', '192.168.1.4']; const hosts = ['192.168.1.1', '192.168.1.2', '192.168.1.3', '192.168.1.4'];
async function pingHosts() { async function pingHosts() {
hosts.forEach(async (host, index) => { hosts.forEach(async (host, index) => { try {
try {
const res = await ping.promise.probe(host); const res = await ping.promise.probe(host);
store.dispatch('updateBuzzerStates', { index, newState: res.alive ? 'ON' : 'OFF' }); store.dispatch('updateBuzzerStates', {index, newState: res.alive ? 'ON' : 'OFF' }); }
} catch (error) { catch (error) {
console.error(`Erreur lors du ping de ${host}:`, error.message); console.error(`Erreur lors du ping de ${host}:`, error.message); }
}
}); });
} }

3
ui/src/services/mqttService.js
View File

@ -13,7 +13,6 @@ export function publishMessage(topic, message) {
// Fonction pour s'abonner à un topic MQTT et écouter les messages entrants // Fonction pour s'abonner à un topic MQTT et écouter les messages entrants
export function subscribeToTopic(topic, callback) { export function subscribeToTopic(topic, callback) {
client.subscribe(topic) client.subscribe(topic)
client.on('message', (receivedTopic, message) => { client.on('message', (receivedTopic, message) => { callback(receivedTopic.toString(), message.toString())
callback(receivedTopic.toString(), message.toString())
}) })
} }

43
ui/src/services/pictureEngine.js Normal file
View File

@ -0,0 +1,43 @@
import express from 'express';
import { promises as fs } from 'fs';
import path from 'path';
import { fileURLToPath } from 'url';
const app = express();
const port = 3000;
// Obtenir le chemin du répertoire parent
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
// Middleware pour gérer les requêtes depuis le frontend
app.use((req, res, next) => {
res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader('Access-Control-Allow-Methods', 'GET, POST');
next();
});
// Le dossier assets est situé un niveau au-dessus du dossier services
const assetsDir = path.join(__dirname, '..', 'quizz/geography-history');
console.log(assetsDir)
// Middleware pour servir les fichiers statiques
app.use('/images', express.static(assetsDir));
// API pour lister les fichiers d'image
app.get('/images-list', async (req, res) => {
try {
const files = await fs.readdir(assetsDir);
// Filtrer pour ne renvoyer que les fichiers d'image (par ex : .jpg, .png)
const images = files.filter(file => /\.(jpg|jpeg|png|gif)$/.test(file));
res.json(images);
} catch (err) {
res.status(500).send('Erreur lors de la lecture du dossier');
}
});
app.listen(port, () => {
console.log(`Serveur démarré sur http://localhost:${port}`);
});

7
ui/src/variables.js
View File

@ -23,10 +23,5 @@ export default {
}; };
// Variables localStorage // Variables localStorage
export const localStorageVars = { export const localStorageVars = { // Exemple de variable localStorage RedScorelocal: localStorage.getItem('RedScore') || '', BlueScorelocal: localStorage.getItem('BlueScore') || '', OrangeScorelocal: localStorage.getItem('OrangeScore') || '', GreenScorelocal: localStorage.getItem('GreenScore') || '',
// Exemple de variable localStorage
RedScorelocal: localStorage.getItem('RedScore') || '',
BlueScorelocal: localStorage.getItem('BlueScore') || '',
OrangeScorelocal: localStorage.getItem('OrangeScore') || '',
GreenScorelocal: localStorage.getItem('GreenScore') || '',
}; };

5
ui/src/views/GameControl.vue
View File

@ -9,7 +9,6 @@
</v-col> </v-col>
</v-row> </v-row>
</v-container> </v-container>
<v-row no-gutters class="pr-4 pl-4"> <v-row no-gutters class="pr-4 pl-4">
<v-row no-gutters> <v-row no-gutters>
<v-col class="align-start"> <v-col class="align-start">
@ -44,19 +43,15 @@ import CardButtonScore from '@/components/CardButtonScore.vue'
} }
.btn.red { .btn.red {
background-color: #d42828; /* Changez la couleur en fonction de votre thème */ background-color: #d42828; /* Changez la couleur en fonction de votre thème */
} }
.btn.blue { .btn.blue {
background-color: #2867d4; /* Changez la couleur en fonction de votre thème */ background-color: #2867d4; /* Changez la couleur en fonction de votre thème */
} }
.btn.orange { .btn.orange {
background-color: #d48f28; /* Changez la couleur en fonction de votre thème */ background-color: #d48f28; /* Changez la couleur en fonction de votre thème */
} }
.btn.green { .btn.green {
background-color: #28d42e; /* Changez la couleur en fonction de votre thème */ background-color: #28d42e; /* Changez la couleur en fonction de votre thème */
} }
.scorediv-style-red { .scorediv-style-red {
background-color: #d42828 !important; background-color: #d42828 !important;

52
ui/src/views/GameDisplay.vue
View File

@ -1,3 +1,53 @@
<template> <template>
<v-container>
<v-row>
<v-col
v-for="image in images"
:key="image"
cols="12"
sm="6"
md="4"
>
<v-card>
<v-img
:src="`http://localhost:3000/images/${image}`"
:alt="image"
class="image-thumbnail"
/>
<v-card-title>{{ image }}</v-card-title>
</v-card>
</v-col>
</v-row>
</v-container>
</template>
<script setup>
import { ref, onMounted } from 'vue';
// Déclare une variable réactive pour stocker les images
const images = ref([]);
// Fonction pour récupérer les images depuis l'API
const fetchImages = async () => {
try {
const response = await fetch('http://localhost:3000/images-list');
const data = await response.json();
images.value = data; // Met à jour les images
} catch (error) {
console.error('Erreur lors de la récupération des images :', error);
}
};
// Appelle la fonction fetchImages lorsque le composant est monté
onMounted(() => {
fetchImages();
});
</script>
<style scoped>
.image-thumbnail {
max-width: 100%;
height: auto;
}
</style>
</template>

22
ui/src/views/MQTTDebugView.vue
View File

@ -1,10 +1,6 @@
<template> <template>
<div> <div> <!-- Zone pour publier sur MQTT --> <PublishMQTTComponent />
<!-- Zone pour publier sur MQTT --> <!-- Zone pour afficher la console MQTT --> <MQTTConsoleComponent />
<PublishMQTTComponent />
<!-- Zone pour afficher la console MQTT -->
<MQTTConsoleComponent />
</div> </div>
</template> </template>
@ -13,24 +9,18 @@ import PublishMQTTComponent from '@/components/MQTTDebugPublish.vue' // Importer
import MQTTConsoleComponent from '@/components/MQTTDebugConsole.vue' // Importer le composant pour la console MQTT import MQTTConsoleComponent from '@/components/MQTTDebugConsole.vue' // Importer le composant pour la console MQTT
export default { 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
} }
} }
</script> </script>
<style> <style>
@media (min-width: 1024px) { @media (min-width: 1024px) {
.card__title.primary { .card__title.primary { background-color: #d42828; /* Changez la couleur en fonction de votre thème */
background-color: #d42828; /* Changez la couleur en fonction de votre thème */
} }
.card__title.feedback { .card__title.feedback { background-color: #2E7D32; /* Changez la couleur en fonction de votre thème */
background-color: #2E7D32; /* Changez la couleur en fonction de votre thème */
} }
.btn{ .btn{ border-radius:30px!important; background-color: #d42828; /* Changez la couleur en fonction de votre thème */
border-radius:30px!important;
background-color: #d42828; /* Changez la couleur en fonction de votre thème */
} }
} }
</style> </style>

32
ui/src/views/SettingsView.vue
View File

@ -9,30 +9,23 @@
</div> </div>
</div> </div>
<v-switch label="Activer le son MQTT" v-model="MQTTSound" class="ml-15" color="primary"/> <v-switch label="Activer le son MQTT" v-model="MQTTSound" class="ml-15" color="primary"/>
<v-divider /> <v-divider />
<v-label class="title-style-2">Affichage</v-label> <v-label class="title-style-2">Affichage</v-label>
<div> <div>
<v-switch hide-details label="Activer l'affichage des sattelites" v-model="SattelitesDisplay" class="ml-15 pb-3" color="primary"/> <v-switch hide-details label="Activer l'affichage des sattelites" v-model="SattelitesDisplay" class="ml-15 pb-3" color="primary"/>
</div> </div>
<v-divider /> <v-divider />
<v-label class="title-style-2">MQTT</v-label> <v-label class="title-style-2">MQTT</v-label>
<div class="mutltiple-per-line"> <div class="mutltiple-per-line">
<v-icon v-model="MQTTBrokerState" class="ml-15 mb-5" color="error" icon="record">mdi-record</v-icon> <v-icon v-model="MQTTBrokerState" class="ml-15 mb-5" color="error" icon="record">mdi-record</v-icon>
<v-label class="ml-2 mb-10 mt-5">Etat du serveur MQTT</v-label> <v-label class="ml-2 mb-10 mt-5">Etat du serveur MQTT</v-label>
<v-btn class="ml-10 mb-5" color="primary" @click="goToDebugRoute">Debugger</v-btn> <v-btn class="ml-10 mb-5" color="primary" @click="goToDebugRoute">Debugger</v-btn>
</div> </div>
<v-divider /> <v-divider />
<v-label class="title-style-2">Jeu</v-label> <v-label class="title-style-2">Jeu</v-label>
<div class="mutltiple-per-line"> <div class="mutltiple-per-line">
<v-switch hide-details label='Jouer le son de succès lorsque des points sont ajoutés' v-model="SuccessPlay" class="ml-15" color="primary"/> <v-switch hide-details label='Jouer le son de succès lorsque des points sont ajoutés' v-model="SuccessPlay" class="ml-15" color="primary"/>
</div> </div>
<v-switch hide-details label='Jouer le son de erreur lorsque des points sont enlevés' v-model="ErrorPlay" class="ml-15" color="primary"/> <v-switch hide-details label='Jouer le son de erreur lorsque des points sont enlevés' v-model="ErrorPlay" class="ml-15" color="primary"/>
</template> </template>
@ -52,7 +45,9 @@
const router = useRouter(); const router = useRouter();
const goToDebugRoute = () => { const goToDebugRoute = () => {
router.push({ name: 'Debugger MQTT' }); // Redirige vers la route nommée 'debugger' router.push({
name: 'Debugger MQTT'
}); // Redirige vers la route nommée 'debugger'
}; };
onMounted(() => { onMounted(() => {
@ -81,15 +76,12 @@
localStorage.setItem('EmbeddedSound', EmbeddedSoundNewValue); // Mettre à jour l'état de la case à cocher dans le LocalStorage chaque fois qu'il change. localStorage.setItem('EmbeddedSound', EmbeddedSoundNewValue); // Mettre à jour l'état de la case à cocher dans le LocalStorage chaque fois qu'il change.
} }
}); });
watch(EmbeddedSoundVolume, (EmbeddedSoundVolumeNewValue) => { watch(EmbeddedSoundVolume, (EmbeddedSoundVolumeNewValue) => {
if (EmbeddedSoundVolumeNewValue !== null) { if (EmbeddedSoundVolumeNewValue !== null) {
localStorage.setItem('EmbeddedSoundVolume', EmbeddedSoundVolumeNewValue); // Mettre à jour l'état de la case à cocher dans le LocalStorage chaque fois qu'il change. localStorage.setItem('EmbeddedSoundVolume', EmbeddedSoundVolumeNewValue); // Mettre à jour l'état de la case à cocher dans le LocalStorage chaque fois qu'il change.
} }
}); });
watch(MQTTSound, (MQTTSoundNewValue) => { watch(MQTTSound, (MQTTSoundNewValue) => {
if (MQTTSoundNewValue !== null) { if (MQTTSoundNewValue !== null) {
localStorage.setItem('MQTTSound', MQTTSoundNewValue); // Mettre à jour l'état de la case à cocher dans le LocalStorage chaque fois qu'il change. localStorage.setItem('MQTTSound', MQTTSoundNewValue); // Mettre à jour l'état de la case à cocher dans le LocalStorage chaque fois qu'il change.
} }
@ -99,13 +91,11 @@
localStorage.setItem('SattelitesDisplay', SattelitesDisplaynewValue); // Added a default value for this switch localStorage.setItem('SattelitesDisplay', SattelitesDisplaynewValue); // Added a default value for this switch
} }
}); });
watch(SuccessPlay, (SuccessPlaynewValue) => { watch(SuccessPlay, (SuccessPlaynewValue) => {
if (SuccessPlaynewValue !== null) { if (SuccessPlaynewValue !== null) {
localStorage.setItem('SuccessPlay', SuccessPlaynewValue); // Added a default value for this switch localStorage.setItem('SuccessPlay', SuccessPlaynewValue); // Added a default value for this switch
} }
}); });
watch(ErrorPlay, (ErrorPlaynewValue) => { watch(ErrorPlay, (ErrorPlaynewValue) => {
if (ErrorPlaynewValue !== null) { if (ErrorPlaynewValue !== null) {
localStorage.setItem('ErrorPlay', ErrorPlaynewValue); // Added a default value for this switch localStorage.setItem('ErrorPlay', ErrorPlaynewValue); // Added a default value for this switch
@ -114,29 +104,29 @@
</script> </script>
<style> <style>
.title-style-1{ .title-style-1{
margin-top: 20px; margin-top: 20px;
margin-bottom: 16px; margin-bottom: 16px;
margin-left: 20px; margin-left: 20px;
font-size: 30px; font-size: 30px;
opacity: 100%; opacity: 100%;
font-weight: 500; font-weight: 500;
} }
.title-style-2{ .title-style-2{
margin-top: 20px; margin-top: 20px;
margin-bottom: 10px; margin-bottom: 10px;
margin-left: 40px; margin-left: 40px;
font-size: 25px; font-size: 25px;
opacity: 100%; opacity: 100%;
font-weight: 500; font-weight: 500;
} }
.mutltiple-per-line{ .mutltiple-per-line{
display: flex; display: flex;
align-items: center; align-items: center;
} }
.v-slider-style{ .v-slider-style{
width: 250px; width: 250px;
margin-left: 16px; margin-left: 16px;
padding-top: px; padding-top: px;
} }
</style> </style>

19
ui/vite.config.js
View File

@ -9,24 +9,9 @@ import { defineConfig } from 'vite'
// https://vitejs.dev/config/ // https://vitejs.dev/config/
export default defineConfig({ export default defineConfig({
plugins: [ plugins: [ vue({ template: { transformAssetUrls } }), Vuetify(), ViteFonts({ google: { families: [{ name: 'Roboto', styles: 'wght@100;300;400;500;700;900', }] } }),
vue({
template: { transformAssetUrls }
}),
Vuetify(),
ViteFonts({
google: {
families: [{
name: 'Roboto',
styles: 'wght@100;300;400;500;700;900',
}]
}
}),
], ],
define: { 'process.env': {} }, define: { 'process.env': {} },
resolve: { resolve: { alias: { '@': fileURLToPath(new URL('./src', import.meta.url)) }
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
} }
}) })