Allow changing volume from web interface

data/www/index.html

@@ -14,14 +14,18 @@
     </div>
 
     <div class="w3-margin w3-center w3-card w3-padding-24">
-        <h3 class="w3-padding">Contrôles</h3>
         <button onclick="play()" class="w3-button w3-blue w3-xlarge w3-ripple">Jouer le son</button>
     </div>
 
     <div class="w3-margin w3-center w3-card w3-padding-24">
-        <h3 class="w3-padding">Fichiers disponibles</h3>
         <div id="available-files"></div>
     </div>
+
+    <div class="w3-margin w3-center w3-card w3-padding-24">
+        <button id="volume-decrease" onclick="volume(-1)" class="w3-button w3-blue w3-xlarge w3-ripple">Vol-</button>
+        <span id="volume-current"></span>
+        <button id="volume-increase" onclick="volume(1)" class="w3-button w3-blue w3-xlarge w3-ripple">Vol+</button>
+    </div>
 </body>
 
 </html>

data/www/script.js

@@ -1,25 +1,35 @@
+const GLOBAL_TIMEOUT = 7000;
+
 function play() {
     console.log("Play...");
-    fetch("/play", { signal: AbortSignal.timeout(7000) });
+    fetch("/play", { signal: AbortSignal.timeout(GLOBAL_TIMEOUT) });
 }
 
-function loadAvailableFiles() {
+function volume(modifier) {
-    console.log("Available files...");
+    const body = new FormData();
-    fetch("/available-files", { signal: AbortSignal.timeout(7000) })
+    body.set("modifier", modifier);
+    fetch(`/change-volume`, { method: "POST", body: body, signal: AbortSignal.timeout(GLOBAL_TIMEOUT) })
         .then(response => response.json())
-        .then(handleAvailableFiles);
+        .then(handleStatus);
+}
+
+function loadStatus() {
+    console.log("Status...");
+    fetch("/status", { signal: AbortSignal.timeout(GLOBAL_TIMEOUT) })
+        .then(response => response.json())
+        .then(handleStatus);
 }
 
 function selectFile(name) {
     console.log("Select file");
     const body = new FormData();
     body.set("fileName", name);
-    fetch("/select-file", { method: "POST", body: body, signal: AbortSignal.timeout(7000) })
+    fetch("/select-file", { method: "POST", body: body, signal: AbortSignal.timeout(GLOBAL_TIMEOUT) })
         .then(response => response.json())
-        .then(handleAvailableFiles);
+        .then(handleStatus);
 }
 
-function handleAvailableFiles(data) {
+function handleStatus(data) {
     console.log("data", data);
     let dom = "";
     data.files.forEach(element => {
@@ -31,9 +41,12 @@ function handleAvailableFiles(data) {
         }
     });
     document.getElementById("available-files").innerHTML = dom;
+    document.getElementById("volume-current").innerText = data.volume.current;
+    document.getElementById("volume-increase").disabled = !data.volume.canIncrease;
+    document.getElementById("volume-decrease").disabled = !data.volume.canDecrease;
 }
 
 (() => {
-    loadAvailableFiles();
+    loadStatus();
-    setInterval(loadAvailableFiles, 10000);
+    setInterval(loadStatus, 10000);
 })();

src/main.cpp

@@ -37,11 +37,19 @@ AsyncWebServer server(80);
 Audio audio;
 
 byte buttonLastState = HIGH;
+byte currentVolume = 15;
 
 bool fileIsValid(String fileName) {
   return !fileName.startsWith(".") && (fileName.endsWith(".mp3") || fileName.endsWith(".aac") || fileName.endsWith(".wav"));
 }
 
+void displayText(String text) {
+    display.clearDisplay();
+    display.setCursor(0, 0);
+    display.println(text);
+    display.display();
+}
+
 void play()
 {
   String path = "/" + selectedFile;
@@ -55,9 +63,9 @@ void onPlay(AsyncWebServerRequest *request)
   request->send(200);
 }
 
-void onAvailableFiles(AsyncWebServerRequest *request)
+void onStatus(AsyncWebServerRequest *request)
 {
-  Serial.println("Available files");
+  Serial.println("Status");
   AsyncResponseStream *response = request->beginResponseStream("application/json");
 
   DynamicJsonDocument root(256);
@@ -73,6 +81,12 @@ void onAvailableFiles(AsyncWebServerRequest *request)
     file.close();
     file = music.openNextFile();
   }
+
+  JsonObject volume = root.createNestedObject("volume");
+  volume["current"] = currentVolume;
+  volume["canDecrease"] = currentVolume > 0;
+  volume["canIncrease"] = currentVolume < 21;
+
   serializeJson(root, *response);
 
   request->send(response);
@@ -85,13 +99,30 @@ void onSelectFile(AsyncWebServerRequest *request)
   {
     selectedFile = request->getParam("fileName", true)->value();
     Serial.print(selectedFile);
-    display.clearDisplay();
+    displayText("Selectionne : " + selectedFile);
-    display.setCursor(0, 0);
-    display.println("Selectionne : "+ selectedFile);
-    display.display();
   }
   Serial.println();
-  onAvailableFiles(request);
+  onStatus(request);
+}
+
+void onChangeVolume(AsyncWebServerRequest *request)
+{
+  Serial.print("Volume: ");
+  if (request->hasParam("modifier", true))
+  {
+    String s_modifier = request->getParam("modifier", true)->value();
+    int modifier = s_modifier.toInt();
+    currentVolume += modifier;
+    if (currentVolume > 21)
+      currentVolume = 21;
+    else if (currentVolume < 0)
+      currentVolume = 0;
+    audio.setVolume(currentVolume);
+    Serial.print(currentVolume);
+    displayText("Volume : " + currentVolume);
+  }
+  Serial.println();
+  onStatus(request);
 }
 
 void setup()
@@ -179,22 +210,20 @@ void setup()
 
   // Server
   server.on("/play", HTTP_GET, onPlay);
-  server.on("/available-files", HTTP_GET, onAvailableFiles);
+  server.on("/status", HTTP_GET, onStatus);
   server.on("/select-file", HTTP_POST, onSelectFile);
+  server.on("/change-volume", HTTP_POST, onChangeVolume);
   server.onNotFound([](AsyncWebServerRequest *request)
                     { request->send(404); });
   server.serveStatic("/", SPIFFS, "/www/").setDefaultFile("index.html");
   server.begin();
 
   Serial.println("Server ready!");
-  display.clearDisplay();
+  displayText("Pret !");
-  display.setCursor(0, 0);
-  display.println("Pret !");
-  display.display();
 
   // Audio
   audio.setPinout(I2S_BCLK, I2S_LRC, I2S_DOUT);
-  audio.setVolume(15); // Max 21
+  audio.setVolume(currentVolume); // Max 21
 
   // Setup is done, light up the LED
   digitalWrite(LED, HIGH);