From 80373ae5fb841f178deb5017722afdd821da7470 Mon Sep 17 00:00:00 2001 From: Gabriel Augendre Date: Mon, 2 Jan 2023 22:10:01 +0100 Subject: [PATCH] Allow changing volume from web interface --- data/www/index.html | 8 +++++-- data/www/script.js | 33 ++++++++++++++++++--------- src/main.cpp | 55 ++++++++++++++++++++++++++++++++++----------- 3 files changed, 71 insertions(+), 25 deletions(-) diff --git a/data/www/index.html b/data/www/index.html index 1e538fc..9173da1 100644 --- a/data/www/index.html +++ b/data/www/index.html @@ -14,14 +14,18 @@
-

Contrôles

-

Fichiers disponibles

+ +
+ + + +
\ No newline at end of file diff --git a/data/www/script.js b/data/www/script.js index c89a141..50a1f2d 100644 --- a/data/www/script.js +++ b/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() { - console.log("Available files..."); - fetch("/available-files", { signal: AbortSignal.timeout(7000) }) +function volume(modifier) { + const body = new FormData(); + 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(); - setInterval(loadAvailableFiles, 10000); + loadStatus(); + setInterval(loadStatus, 10000); })(); diff --git a/src/main.cpp b/src/main.cpp index 88fa871..f68a710 100644 --- a/src/main.cpp +++ b/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(); - display.setCursor(0, 0); - display.println("Selectionne : "+ selectedFile); - display.display(); + displayText("Selectionne : " + selectedFile); } 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(); - display.setCursor(0, 0); - display.println("Pret !"); - display.display(); + displayText("Pret !"); // 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);