102 lines
3.0 KiB
Vue
102 lines
3.0 KiB
Vue
<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> |