index.html is now served from SPIFFS. You can add rfid tag -> folder mappings via the webinterface. And I've added the missing controller json data messages.

This commit is contained in:
Fabian Schlenz 2019-11-17 00:35:23 +01:00
parent b9a4770ff2
commit 5c15a7d4cb
6 changed files with 95 additions and 16 deletions

View File

@ -1,4 +1,4 @@
const char* html = R"V0G0N(<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
@ -61,6 +61,10 @@ const char* html = R"V0G0N(<!DOCTYPE html>
<div class="col">
<button type="button" class="btn btn-primary btn-lg btn-block" id="button_open"><i class="fa fa-eject"></i></button>
</div>
<div class="col">
<button type="button" class="btn btn-primary btn-lg btn-block" id="button_settings"><i class="fa fa-cog"></i></button>
</div>
</div>
</div>
<div class="container">
@ -112,6 +116,35 @@ const char* html = R"V0G0N(<!DOCTYPE html>
</div>
</div>
</div>
<div class="modal fade" id="settingsModal" tabindex="-1" role="dialog">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Settings</h5>
<button type="button" class="close" data-dismiss="modal">
<span>&times;</span>
</button>
</div>
<div class="modal-body">
<h6>Last RFID id:</h6>
<span id="last_rfid_id"></span> <button class="btn btn-warning" id="button_add_mapping"><i class="fa fa-arrows-alt-h"></i></button>
<h6>Last RFID data:</h6>
<span id="last_rfid_data"></span>
<h6>Actions</h6>
<button type="button" class="btn btn-danger btn-lg btn-block" id="button_reset_vs1053">Reset VS1053 chip</button>
<button type="button" class="btn btn-danger btn-lg btn-block" id="button_reboot">Reboot ESMP3</button>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</body>
<script>
@ -176,6 +209,10 @@ update_controller = function(data) {
$('#button_lock').removeClass('btn-danger', 'btn-warning').addClass('btn-primary');
$('#button_lock i').removeClass('fa-lock').addClass('fa-lock-open');
}
$('#button_add_mapping').toggle(data.last_rfid.uid.length>0);
$('#last_rfid_id').html(data.last_rfid.uid);
$('#last_rfid_data').html(data.last_rfid.data);
}
update_playlist_manager = function(data) {
@ -184,7 +221,9 @@ update_playlist_manager = function(data) {
$('#albums_without_id tr').remove();
data.unmapped = data.unmapped.sort();
for (var i=0; i<data.unmapped.length; i++) {
var tr = $('<tr>').attr('data-folder', data.unmapped[i]).append($('<td>').html(data.unmapped[i].substr(1)));
var tr = $('<tr>').attr('data-folder', data.unmapped[i]);
tr.append($('<td>').html(data.unmapped[i].substr(1)));
tr.append($('<td>').append($('<button>').addClass('button btn-warning add_mapping_button').hide().append($('<i>').addClass('fa fa-arrows-alt-h'))));
$('#albums_without_id').append(tr);
}
} else {
@ -196,6 +235,7 @@ update_playlist_manager = function(data) {
var folder = folders[i];
var tr = $('<tr>').attr('data-folder', folder);
tr.append($('<td>').html(folder.substr(1)));
tr.append($('<td>').append($('<button>').addClass('button btn-danger add_mapping_button').hide().append($('<i>').addClass('fa fa-arrows-alt-h'))));
$('#albums_with_id').append(tr);
}
}
@ -213,6 +253,7 @@ process_ws_message = function(event) {
case "position": update_position(json); break;
case "player": update_player(json); break;
case "playlist_manager": update_playlist_manager(json); break;
case "controller": update_controller(json); break;
}
}
}
@ -228,9 +269,16 @@ $(function() {
$('#button_track_prev').click(function(e) { ws.send("track_prev"); });
$('#button_open').click(function(e) { $('#openModal').modal('show'); });
$('#track_list').on('click', 'tr', function(e) { ws.send("track=" + $(e.target).parent().data('track')); });
$('#albums_without_id, #albums_with_id').on('click', 'tr', function(e) { ws.send("play " + $(e.target).parent().data('folder')); $('#openModal').modal('hide'); });
$('#albums_without_id, #albums_with_id').on('click', 'tr', function(e) { ws.send("play " + $(e.target).parents('tr').data('folder')); $('#openModal').modal('hide'); });
$('#button_settings').click(function(e) { $('#settingsModal').modal('show'); });
$('#button_reset_vs1053').click(function(e) { ws.send("reset_vs1053"); $('#settingsModal').modal('hide'); });
$('#button_reboot').click(function(e) { ws.send("reboot"); $('#settingsModal').modal('hide'); });
$('#button_add_mapping').click(function(e) {
$('#settingsModal').modal('hide');
$('#openModal').modal('show');
$('.add_mapping_button').show();
});
$('#openModal').on('click', '.add_mapping_button', function(e) {console.log("add_mapping=" + $('#last_rfid_id').html() + "=" + $(e.target).parents('tr').data('folder')); $('#openModal').modal('hide'); $('.add_mapping_button').hide(); e.stopPropagation();});
});
</script>
</html>
)V0G0N";

View File

@ -49,6 +49,7 @@ public:
void set_mqtt_client(MQTTClient* m);
void register_http_server(HTTPServer* h);
void loop();
void send_controller_status();
void send_player_status();
void send_playlist_manager_status();
void send_position();

View File

@ -15,4 +15,5 @@ public:
Playlist* get_playlist_for_folder(String folder);
void dump_ids();
String json();
bool add_mapping(String id, String folder);
};

View File

@ -93,6 +93,7 @@ void Controller::_check_rfid() {
if (_state != LOCKED) {
_player->stop();
}
send_controller_status();
} else {
uint32_t uid = _get_rfid_card_uid();
if (uid > 0) {
@ -157,7 +158,8 @@ void Controller::_check_rfid() {
}
_player->play(pl);
send_playlist_manager_status();
//send_playlist_manager_status();
send_controller_status();
}
}
}
@ -285,6 +287,13 @@ bool Controller::process_message(String cmd) {
_player->init();
} else if (cmd.equals("reboot")) {
ESP.restart();
} else if (cmd.startsWith("add_mapping=")) {
String rest = cmd.substring(12);
uint8_t idx = rest.indexOf('=');
String id = rest.substring(0, idx);
String folder = rest.substring(idx + 1);
_pm->add_mapping(id, folder);
send_playlist_manager_status();
} else {
ERROR("Unknown command: %s\n", cmd.c_str());
return false;
@ -352,6 +361,7 @@ String Controller::json() {
case LOCKING: json["state"] = "locking"; break;
case NORMAL: json["state"] = "normal"; break;
}
json["is_rfid_present"] = _rfid_present;
JsonObject rfid = json.createNestedObject("last_rfid");
rfid["uid"] = _last_rfid_uid;
rfid["data"] = _last_rfid_data;
@ -376,12 +386,19 @@ void Controller::send_playlist_manager_status() {
void Controller::send_position() {
TRACE("In send_position()...\n");
if (_http_server->ws->count() > 0) {
if (_http_server->ws->count() > 0 && _player->is_playing()) {
_http_server->ws->textAll(_player->position_json());
}
_last_position_info_at = millis();
}
void Controller::send_controller_status() {
TRACE("In send_controller_status()...\n");
if (_http_server->ws->count() > 0) {
_http_server->ws->textAll(json());
}
}
void Controller::inform_new_client(AsyncWebSocketClient* client) {
String s;
s += _pm->json();
@ -389,6 +406,8 @@ void Controller::inform_new_client(AsyncWebSocketClient* client) {
s += _player->json();
s += '\n';
s += _player->position_json();
s += '\n';
s += json();
client->text(s);
}

View File

@ -1,5 +1,6 @@
#include "http_server.h"
#include <ESPmDNS.h>
#include <SPIFFS.h>
HTTPServer::HTTPServer(Player* p, Controller* c) {
_player = p;
@ -8,7 +9,7 @@ HTTPServer::HTTPServer(Player* p, Controller* c) {
ws = new AsyncWebSocket("/ws");
_server->addHandler(ws);
ws->onEvent([&](AsyncWebSocket * server, AsyncWebSocketClient * client, AwsEventType type, void * arg, uint8_t *data, size_t len){this->_onEvent(server, client, type, arg, data, len);});
_server->on("/", [&](AsyncWebServerRequest* req) {_handle_index(req);});
_server->on("/", [&](AsyncWebServerRequest* req) {req->send(SPIFFS, "/index.html", "text/html");});
_server->begin();
MDNS.addService("http", "tcp", 80);
}
@ -102,10 +103,3 @@ void HTTPServer::_onEvent(AsyncWebSocket * server, AsyncWebSocketClient * client
}
}
}
void HTTPServer::_handle_index(AsyncWebServerRequest* r) {
#include "index.html"
r->send(200, "text/html", html);
}

View File

@ -110,3 +110,19 @@ String PlaylistManager::json() {
}
return json.as<String>();
}
bool PlaylistManager::add_mapping(String id, String folder) {
DEBUG("Adding Mapping: '%s'=>'%s'\n", id.c_str(), folder.c_str());
if (!SD.exists(folder)) return false;
File ids = SD.open(folder + "/ids.txt", "a");
String data = "\n";
data += id;
data += '\n';
char* buffer = new char[data.length()];
data.toCharArray(buffer, data.length());
ids.write((uint8_t *)buffer, data.length());
delete buffer;
ids.close();
_map[id] = folder;
return true;
}