phschoen
/
ESPuino
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Show current track played in webGUI

master
Torsten Stauder 4 years ago
parent
3564f8223b
commit
7de84a48dd
10 changed files with 116 additions and 30 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 21
      html/management_DE.html
  2. 37
      html/management_EN.html
  3. 4
      src/AudioPlayer.cpp
  4. 21
      src/HTMLmanagement_DE.h
  5. 37
      src/HTMLmanagement_EN.h
  6. 2
      src/LogMessages_DE.cpp
  7. 1
      src/LogMessages_EN.cpp
  8. 20
      src/Web.cpp
  9. 1
      src/logmessages.h
  10. 2
      src/revision.h

21
html/management_DE.html
View File

@ -208,6 +208,10 @@
data-slider-value="%CURRENT_VOLUME%" value="%CURRENT_VOLUME%" onchange="sendVolume(this.value)"> <i class="fas fa-volume-up fa-2x .icon-pos"></i>
</div>
<br/>
<div class="form-group col-md-12">
<legend>Aktueller Titel</legend>
<div id="track"></div>
</div>
</div>
</div>
<div class="tab-pane fade show active" id="nav-rfid" role="tabpanel" aria-labelledby="nav-rfid-tab">
@ -961,10 +965,11 @@
socket.onopen = function () {
setInterval(ping, 15000);
getTrack();
};
socket.onclose = function (e) {
console.log('Socket is closed. Reconnect will be attempted in 1 second.', e.reason);
console.log('Socket is geschlossen. Neuer Versuch in fuenf Sekunden.', e.reason);
socket = null;
setTimeout(function () {
connect();
@ -972,7 +977,7 @@
};
socket.onerror = function (err) {
console.error('Socket encountered error: ', err.message, 'Closing socket');
console.error('Socket-Fehler: ', err.message, 'Socket wird geschlossen');
};
socket.onmessage = function(event) {
@ -990,6 +995,8 @@
if (socketMsg.pong == 'pong') {
pong();
}
} if ("track" in socketMsg) {
document.getElementById('track').innerHTML = socketMsg.track;
}
};
}
@ -1011,6 +1018,16 @@
clearTimeout(tm);
}
function getTrack() {
var myObj = {
"getTrack": {
getTrack: 'getTrack'
}
};
var myJSON = JSON.stringify(myObj);
socket.send(myJSON);
}
function genSettings(clickedId) {
lastIdclicked = clickedId;
var myObj = {

37
html/management_EN.html
View File

@ -208,6 +208,10 @@
data-slider-value="%CURRENT_VOLUME%" value="%CURRENT_VOLUME%" onchange="sendVolume(this.value)"> <i class="fas fa-volume-up fa-2x .icon-pos"></i>
</div>
<br/>
<div class="form-group col-md-12">
<legend>Current track</legend>
<div id="track"></div>
</div>
</div>
</div>
<div class="tab-pane fade show active" id="nav-rfid" role="tabpanel" aria-labelledby="nav-rfid-tab">
@ -865,9 +869,9 @@
if (node.data.directory) {
items.createDir = {
label: "Neuer Ordner",
label: "New folder",
action: function(x) {
var childNode = ref.create_node(nodeId, {text: "Neuer Ordner", type: "folder"});
var childNode = ref.create_node(nodeId, {text: "New folder", type: "folder"});
if(childNode) {
ref.edit(childNode, null, function(childNode, status){
putData("/explorer?path=" + node.data.path + "/" + childNode.text);
@ -880,7 +884,7 @@
/* Play */
items.play = {
label: "Abspielen",
label: "Play",
action: function(x) {
var playMode = node.data.directory?"5":"1";
postData("/exploreraudio?path=" + node.data.path + "&playmode=" + playMode);
@ -889,7 +893,7 @@
/* Refresh */
items.refresh = {
label: "Aktualisieren",
label: "Refresh",
action: function(x) {
refreshNode(nodeId);
}
@ -897,7 +901,7 @@
/* Delete */
items.delete = {
label: "Löschen",
label: "Delete",
action: function(x) {
handleDeleteData(nodeId);
refreshNode(ref.get_parent(nodeId));
@ -906,7 +910,7 @@
/* Rename */
items.rename = {
label: "Umbenennen",
label: "Rename",
action: function(x) {
var srcPath = node.data.path;
ref.edit(nodeId, null, function(node, status){
@ -961,10 +965,11 @@
socket.onopen = function () {
setInterval(ping, 15000);
getTrack();
};
socket.onclose = function (e) {
console.log('Socket is closed. Reconnect will be attempted in 1 second.', e.reason);
console.log('Socket is closed. Reconnect will be attempted in 5 seconds.', e.reason);
socket = null;
setTimeout(function () {
connect();
@ -980,16 +985,18 @@
var socketMsg = JSON.parse(event.data);
if (socketMsg.rfidId != null) {
document.getElementById('rfidIdMusic').value = socketMsg.rfidId;
toastr.info("RFID Tag mit "+ socketMsg.rfidId + " erkannt." );
toastr.info("RFID-tag "+ socketMsg.rfidId + " detected." );
$("#rfidIdMusic").effect("highlight", {color:"#abf5af"}, 3000);
} if ("status" in socketMsg) {
if (socketMsg.status == "ok") {
toastr.success("Aktion erfolgreich ausgeführt." );
toastr.success("Action performed successfully." );
}
} if ("pong" in socketMsg) {
if (socketMsg.pong == 'pong') {
pong();
}
} if ("track" in socketMsg) {
document.getElementById('track').innerHTML = socketMsg.track;
}
};
}
@ -1003,7 +1010,7 @@
var myJSON = JSON.stringify(myObj);
socket.send(myJSON);
tm = setTimeout(function () {
toastr.warning('Die Verbindung zum ESPuino ist unterbrochen! Bitte Seite neu laden.');
toastr.warning('Connection to ESPuino broken! Please reload website.');
}, 5000);
}
@ -1011,6 +1018,16 @@
clearTimeout(tm);
}
function getTrack() {
var myObj = {
"getTrack": {
getTrack: 'getTrack'
}
};
var myJSON = JSON.stringify(myObj);
socket.send(myJSON);
}
function genSettings(clickedId) {
lastIdclicked = clickedId;
var myObj = {

4
src/AudioPlayer.cpp
View File

@ -16,6 +16,7 @@
#include "SdCard.h"
#include "System.h"
#include "Wlan.h"
#include "Web.h"
#define AUDIOPLAYER_VOLUME_MAX 21u
#define AUDIOPLAYER_VOLUME_MIN 0u
@ -533,6 +534,7 @@ void AudioPlayer_Task(void *parameter) {
#endif
gPlayProperties.playlistFinished = true;
gPlayProperties.playMode = NO_PLAYLIST;
Web_SendWebsocketData(0, 30);
#ifdef MQTT_ENABLE
publishMqtt((char *) FPSTR(topicPlaymodeState), gPlayProperties.playMode, false);
#endif
@ -568,6 +570,7 @@ void AudioPlayer_Task(void *parameter) {
if (gPlayProperties.playMode == WEBSTREAM || (gPlayProperties.playMode == LOCAL_M3U && gPlayProperties.isWebstream)) { // Webstream
audioReturnCode = audio->connecttohost(*(gPlayProperties.playlist + gPlayProperties.currentTrackNumber));
gPlayProperties.playlistFinished = false;
Web_SendWebsocketData(0, 30);
} else if (gPlayProperties.playMode != WEBSTREAM && !gPlayProperties.isWebstream) {
// Files from SD
if (!gFSystem.exists(*(gPlayProperties.playlist + gPlayProperties.currentTrackNumber))) { // Check first if file/folder exists
@ -598,6 +601,7 @@ void AudioPlayer_Task(void *parameter) {
if (!gPlayProperties.isWebstream) { // Is done via audio_showstation()
char buf[255];
snprintf(buf, sizeof(buf) / sizeof(buf[0]), "(%d/%d) %s", (gPlayProperties.currentTrackNumber + 1), gPlayProperties.numberOfTracks, (const char *)*(gPlayProperties.playlist + gPlayProperties.currentTrackNumber));
Web_SendWebsocketData(0, 30);
#ifdef MQTT_ENABLE
publishMqtt((char *) FPSTR(topicTrackState), buf, false);
#endif

21
src/HTMLmanagement_DE.h
View File

@ -208,6 +208,10 @@ static const char management_HTML[] PROGMEM = "<!DOCTYPE html>\
data-slider-value=\"%CURRENT_VOLUME%\" value=\"%CURRENT_VOLUME%\" onchange=\"sendVolume(this.value)\"> <i class=\"fas fa-volume-up fa-2x .icon-pos\"></i>\
</div>\
<br/>\
<div class=\"form-group col-md-12\">\
<legend>Aktueller Titel</legend>\
<div id=\"track\"></div>\
</div>\
</div>\
</div>\
<div class=\"tab-pane fade show active\" id=\"nav-rfid\" role=\"tabpanel\" aria-labelledby=\"nav-rfid-tab\">\
@ -961,10 +965,11 @@ static const char management_HTML[] PROGMEM = "<!DOCTYPE html>\
\
socket.onopen = function () {\
setInterval(ping, 15000);\
getTrack();\
};\
\
socket.onclose = function (e) {\
console.log('Socket is closed. Reconnect will be attempted in 1 second.', e.reason);\
console.log('Socket is geschlossen. Neuer Versuch in fuenf Sekunden.', e.reason);\
socket = null;\
setTimeout(function () {\
connect();\
@ -972,7 +977,7 @@ static const char management_HTML[] PROGMEM = "<!DOCTYPE html>\
};\
\
socket.onerror = function (err) {\
console.error('Socket encountered error: ', err.message, 'Closing socket');\
console.error('Socket-Fehler: ', err.message, 'Socket wird geschlossen');\
};\
\
socket.onmessage = function(event) {\
@ -990,6 +995,8 @@ static const char management_HTML[] PROGMEM = "<!DOCTYPE html>\
if (socketMsg.pong == 'pong') {\
pong();\
}\
} if (\"track\" in socketMsg) {\
document.getElementById('track').innerHTML = socketMsg.track;\
}\
};\
}\
@ -1010,6 +1017,16 @@ static const char management_HTML[] PROGMEM = "<!DOCTYPE html>\
function pong() {\
clearTimeout(tm);\
}\
\
function getTrack() {\
var myObj = {\
\"getTrack\": {\
getTrack: 'getTrack'\
}\
};\
var myJSON = JSON.stringify(myObj);\
socket.send(myJSON);\
}\
\
function genSettings(clickedId) {\
lastIdclicked = clickedId;\

37
src/HTMLmanagement_EN.h
View File

@ -208,6 +208,10 @@ static const char management_HTML[] PROGMEM = "<!DOCTYPE html>\
data-slider-value=\"%CURRENT_VOLUME%\" value=\"%CURRENT_VOLUME%\" onchange=\"sendVolume(this.value)\"> <i class=\"fas fa-volume-up fa-2x .icon-pos\"></i>\
</div>\
<br/>\
<div class=\"form-group col-md-12\">\
<legend>Current track</legend>\
<div id=\"track\"></div>\
</div>\
</div>\
</div>\
<div class=\"tab-pane fade show active\" id=\"nav-rfid\" role=\"tabpanel\" aria-labelledby=\"nav-rfid-tab\">\
@ -865,9 +869,9 @@ static const char management_HTML[] PROGMEM = "<!DOCTYPE html>\
\
if (node.data.directory) {\
items.createDir = {\
label: \"Neuer Ordner\",\
label: \"New folder\",\
action: function(x) {\
var childNode = ref.create_node(nodeId, {text: \"Neuer Ordner\", type: \"folder\"});\
var childNode = ref.create_node(nodeId, {text: \"New folder\", type: \"folder\"});\
if(childNode) {\
ref.edit(childNode, null, function(childNode, status){\
putData(\"/explorer?path=\" + node.data.path + \"/\" + childNode.text);\
@ -880,7 +884,7 @@ static const char management_HTML[] PROGMEM = "<!DOCTYPE html>\
\
/* Play */\
items.play = {\
label: \"Abspielen\",\
label: \"Play\",\
action: function(x) {\
var playMode = node.data.directory?\"5\":\"1\";\
postData(\"/exploreraudio?path=\" + node.data.path + \"&playmode=\" + playMode);\
@ -889,7 +893,7 @@ static const char management_HTML[] PROGMEM = "<!DOCTYPE html>\
\
/* Refresh */\
items.refresh = {\
label: \"Aktualisieren\",\
label: \"Refresh\",\
action: function(x) {\
refreshNode(nodeId);\
}\
@ -897,7 +901,7 @@ static const char management_HTML[] PROGMEM = "<!DOCTYPE html>\
\
/* Delete */\
items.delete = {\
label: \"Löschen\",\
label: \"Delete\",\
action: function(x) {\
handleDeleteData(nodeId);\
refreshNode(ref.get_parent(nodeId));\
@ -906,7 +910,7 @@ static const char management_HTML[] PROGMEM = "<!DOCTYPE html>\
\
/* Rename */\
items.rename = {\
label: \"Umbenennen\",\
label: \"Rename\",\
action: function(x) {\
var srcPath = node.data.path;\
ref.edit(nodeId, null, function(node, status){\
@ -961,10 +965,11 @@ static const char management_HTML[] PROGMEM = "<!DOCTYPE html>\
\
socket.onopen = function () {\
setInterval(ping, 15000);\
getTrack();\
};\
\
socket.onclose = function (e) {\
console.log('Socket is closed. Reconnect will be attempted in 1 second.', e.reason);\
console.log('Socket is closed. Reconnect will be attempted in 5 seconds.', e.reason);\
socket = null;\
setTimeout(function () {\
connect();\
@ -980,16 +985,18 @@ static const char management_HTML[] PROGMEM = "<!DOCTYPE html>\
var socketMsg = JSON.parse(event.data);\
if (socketMsg.rfidId != null) {\
document.getElementById('rfidIdMusic').value = socketMsg.rfidId;\
toastr.info(\"RFID Tag mit \"+ socketMsg.rfidId + \" erkannt.\" );\
toastr.info(\"RFID-tag \"+ socketMsg.rfidId + \" detected.\" );\
$(\"#rfidIdMusic\").effect(\"highlight\", {color:\"#abf5af\"}, 3000);\
} if (\"status\" in socketMsg) {\
if (socketMsg.status == \"ok\") {\
toastr.success(\"Aktion erfolgreich ausgeführt.\" );\
toastr.success(\"Action performed successfully.\" );\
}\
} if (\"pong\" in socketMsg) {\
if (socketMsg.pong == 'pong') {\
pong();\
}\
} if (\"track\" in socketMsg) {\
document.getElementById('track').innerHTML = socketMsg.track;\
}\
};\
}\
@ -1003,13 +1010,23 @@ static const char management_HTML[] PROGMEM = "<!DOCTYPE html>\
var myJSON = JSON.stringify(myObj);\
socket.send(myJSON);\
tm = setTimeout(function () {\
toastr.warning('Die Verbindung zum ESPuino ist unterbrochen! Bitte Seite neu laden.');\
toastr.warning('Connection to ESPuino broken! Please reload website.');\
}, 5000);\
}\
\
function pong() {\
clearTimeout(tm);\
}\
\
function getTrack() {\
var myObj = {\
\"getTrack\": {\
getTrack: 'getTrack'\
}\
};\
var myJSON = JSON.stringify(myObj);\
socket.send(myJSON);\
}\
\
function genSettings(clickedId) {\
lastIdclicked = clickedId;\

2
src/LogMessages_DE.cpp
View File

@ -205,5 +205,5 @@
const char fwEnd[] PROGMEM = "Firmware-update beendet";
const char otaNotSupported[] PROGMEM = "Firmware-update wird von diesem ESPuino nicht unterstuetzt!";
const char otaNotSupportedWebsite[] PROGMEM = "<p>Firmware-update wird von diesem ESPuino nicht unterstuetzt!<br />Zur letzten Seite <a href=\"javascript:history.back()\">zur&uuml;ckkehren</a>.</p>";
const char noPlaylist[] PROGMEM = "Keine Playlist aktiv.";
#endif

1
src/LogMessages_EN.cpp
View File

@ -205,5 +205,6 @@
const char fwEnd[] PROGMEM = "Firmware-update finished";
const char otaNotSupported[] PROGMEM = "Firmware-update isn't supported by this ESPuino!";
const char otaNotSupportedWebsite[] PROGMEM = "<p>FFirmware-update isn't supported by this ESPuino!<br />Back to <a href=\"javascript:history.back()\">last page</a>.</p>";
const char noPlaylist[] PROGMEM = "No active playlist.";
#endif

20
src/Web.cpp
View File

@ -489,6 +489,8 @@ bool processJsonRequest(char *_serialJson) {
uint8_t cmd = doc["controls"]["action"].as<uint8_t>();
Cmd_Action(cmd);
}
} else if (doc.containsKey("getTrack")) {
Web_SendWebsocketData(0, 30);
}
return true;
@ -496,10 +498,9 @@ bool processJsonRequest(char *_serialJson) {
// Sends JSON-answers via websocket
void Web_SendWebsocketData(uint32_t client, uint8_t code) {
char *jBuf;
jBuf = (char *)x_calloc(255, sizeof(char));
char *jBuf = (char *) x_calloc(255, sizeof(char));
const size_t CAPACITY = JSON_OBJECT_SIZE(1) + 20;
const size_t CAPACITY = JSON_OBJECT_SIZE(1) + 200;
StaticJsonDocument<CAPACITY> doc;
JsonObject object = doc.to<JsonObject>();
@ -511,6 +512,15 @@ void Web_SendWebsocketData(uint32_t client, uint8_t code) {
object["rfidId"] = gCurrentRfidTagId;
} else if (code == 20) {
object["pong"] = "pong";
} else if (code == 30) {
if (gPlayProperties.playMode == NO_PLAYLIST) {
object["track"] = (char *)FPSTR (noPlaylist);
} else {
snprintf(Log_Buffer, Log_BufferLength, "(%u / %u): %s", gPlayProperties.currentTrackNumber+1, gPlayProperties.numberOfTracks, *(gPlayProperties.playlist + gPlayProperties.currentTrackNumber));
char utf8Buffer[200];
convertAsciiToUtf8(Log_Buffer, utf8Buffer);
object["track"] = utf8Buffer;
}
}
serializeJson(doc, jBuf, 255);
@ -547,7 +557,9 @@ void onWebsocketEvent(AsyncWebSocket *server, AsyncWebSocketClient *client, AwsE
Serial.printf("ws[%s][%u] %s-message[%llu]: ", server->url(), client->id(), (info->opcode == WS_TEXT) ? "text" : "binary", info->len);
if (processJsonRequest((char *)data)) {
Web_SendWebsocketData(client->id(), 1);
if (strncmp((char *)data, "getTrack", 8)) { // Don't send back ok-feedback if track's name is requested in background
Web_SendWebsocketData(client->id(), 1);
}
}
if (info->opcode == WS_TEXT) {

1
src/logmessages.h
View File

@ -201,3 +201,4 @@ extern const char fwStart[];
extern const char fwEnd[];
extern const char otaNotSupported[];
extern const char otaNotSupportedWebsite[];
extern const char noPlaylist[];

2
src/revision.h
View File

@ -1,4 +1,4 @@
#ifndef __REVISION_H__
#define __REVISION_H__
constexpr const char softwareRevision[] PROGMEM = "Software-revision: 20210731-1";
constexpr const char softwareRevision[] PROGMEM = "Software-revision: 20210806-1";
#endif
Write Preview
Loading…
Cancel
Save