ajout squelette page camera et remerciement

This commit is contained in:
2023-02-09 14:52:17 +01:00
parent 4374bd0694
commit e1bc67e4a6
6 changed files with 57 additions and 4 deletions

View File

@@ -0,0 +1,11 @@
class AudioPage {
constructor() {
this.isEnabled = false;
this.DOMElement = document.getElementById("audio");
}
set enabled(isEnabled) {
this.isEnabled = isEnabled;
this.DOMElement.style.display = isEnabled ? "block" : "none";
}
}

View File

@@ -25,6 +25,9 @@ class CameraPage {
this.DOMElement.style.display = val ? "block" : "none";
if (val) {
this._frame();
this.video.play();
}else {
this.video.pause();
}
}

View File

@@ -10,6 +10,8 @@ class StateManager {
this._state = STATE.sleeping;
this._cameraPage = new CameraPage();
this._sleepingPage = new SleepingPage();
this._audioPage = new AudioPage();
this._thankYouPage = new ThankYouPage();
this.wsClient = new WebsocketClient(
(effects) => this._cameraPage.setEffects(effects),
@@ -18,17 +20,30 @@ class StateManager {
this._sleepingPage.enabled = true;
this._cameraPage.enabled = false;
this._audioPage.enabled = false;
this._thankYouPage.enabled = false;
//TODO: Remove qd implémenté dans le backend
document.getElementById("sleeping-page-continue").onclick = () => this.setState(STATE.video);
}
setState(newState) {
console.log({current:this._state,new:newState})
if(this._state == STATE.sleeping && newState == STATE.video) {
this._cameraPage.enabled = true;
this._sleepingPage.enabled = false;
this._state = newState;
}else if(this._state == STATE.video && newState == STATE.audio) {
this._cameraPage.enabled = false;
this._audioPage.enabled = true;
this._state = newState;
}else if(this._state == STATE.audio && newState == STATE.thankYou) {
this._audioPage.enabled = false;
this._thankYouPage.enabled = true;
this._state = newState;
}else if(this._state == STATE.thankYou && newState == STATE.sleeping) {
this._thankYouPage.enabled = false;
this._sleepingPage.enabled = true;
this._state = newState;
}
}
}

View File

@@ -0,0 +1,11 @@
class ThankYouPage {
constructor() {
this.isEnabled = false;
this.DOMElement = document.getElementById("thank-you");
}
set enabled(isEnabled) {
this.isEnabled = isEnabled;
this.DOMElement.style.display = isEnabled ? "block" : "none";
}
}

View File

@@ -7,11 +7,14 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="assets/css/main.css">
<!-- <link rel="stylesheet" href="assets/css/bootstrap-grid.min.css"> -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
<title>Téléreview</title>
</head>
<body>
<div id="sleeping-page" class="">
<div id="sleeping-page" class="page">
<h1>Venez donner votre avis</h1>
<!-- Boutton pour test -->
<button id="sleeping-page-continue">Continuer</button>
@@ -20,8 +23,16 @@
<canvas id="overlay-canvas"></canvas>
<video id="camera-video"></video>
</div>
<div id="audio">
<h1>Enregistrement audio blabal</h1>
</div>
<div id="thank-you">
<h1>Merci pour votre avis !!!!!!!!!!</h1>
</div>
<script src="assets/js/camera_page.js"></script>
<script src="assets/js/network.js"></script>
<script src="assets/js/thank_you_page.js"></script>
<script src="assets/js/audio_page.js"></script>
<script src="assets/js/sleeping_page.js"></script>
<script src="assets/js/state_manager.js"></script>
<script src="assets/js/main.js"></script>

2
code/setup.sh Executable file
View File

@@ -0,0 +1,2 @@
#!/bin/sh
sudo modprobe v4l2loopback devices=2