Anregungen willkommen!
2 „Gefällt mir“
Sehr cool, vielen Dank für deinen Beitrag! Muss ich ja mal schauen, ob ich das auch via MQTT transportieren kann 
.
Was sind denn die Teile, die noch nicht gehen?
1 „Gefällt mir“
Da Auslesen des Albumcover-Bildes klappt Dank der Unterstützung von @Wolle wunderbar, die Anzeige in der Websteuerung auch!
Ist kein Cover hinterlegt gibt der Webserver ein leeres SVG-Bild zurück. Hier könnte man ein Dummy-Icon anzeigen, z.b. fa-music oder fa-soundcloud für Abspielen von Webstreams. Das ist im PR derzeit noch auskommentiert.
Der Rahmen für das Coverbild in der Weboberfläche müsste noch in fester Größe über CSS gesetzt werden. Bei großen Bildern verändert sich noch die Höhe und Steuerung hüpft/verspringt.
Die Schalter Play/Pause, vor/zurück haben jetzt eine ID und können über websocket in Echtzeit aktualisert werden. Z.B. wird der letzte Track einer Playlist abgespielt wird der Schalter Nächster/Letzter deaktiviert.
Was hier nicht klappt ist die Umschaltung Play/Pause. Wenn Musik läuft sollte das Pause-Icon, bei Pause das Play-Icon angezeigt werden.
Es gibt jetzt eine Websocket-Nachricht „volume“ wenn man die Lautstärke am ESPuino ändert. Die Werte kommen auch im Browser an, ich habe es aber nicht geschafft den neuen Lautstärkewert auch auf dem Slider zu aktualisieren.
Also noch ein wenig Arbeit. Evt. gibt es hier noch HTML/Webexperten?
Welche Abmessungen hat das Cover im Original - Würde das gerne mal mit meinen CSS-Settings testen.
Der Code in der AudioPlayer.cpp sieht super aus - da habe ich viel zu kompliziert gedacht. Nimmst Du auch die anderen Tags aus dem MP3-File (Artist / Trackname)?
Nein, bisher wird nur das Coverimage ausgelesen. Im Moment wird in der Weboberfläche der Dateiname/URL unter Track angezeig, das hat @biologist ja schon vor einiger Zeit eingebaut.
Hier könnte man den Tracknamen hinzufügen, der den aktuellen Titel aus dem ID3 Tag anzeigt. Wenn der nicht verfügbar ist Rückfall auf Dateiname/URL. Gute Idee!
Das Coverbild kann beliebige Abmessungen haben, ist abhängig von der MP3 Datei. Daher muss es proportional eingepasst werden. Mein spärliches CSS dazu:
.coverimage-container {
width: 80%;
height:auto;
margin-left: 1em;
margin-right: 1em;
}
Also Breite passt schon, Bild müsste aber noch zentriert zu den Schaltern ausgerichtet werden. Evt. einen Rahmen spendieren?
Habs ausprobiert und das Coverbild wird im Browser angezeigt. Das funktioniert gut, mit einer Einschränkung:
Die Audio-Lib liest den ID3-Metadata-Block und an dessen Ende wird der Dateizeiger aud den Anfang des AudioDatenblock gesetzt. Sofern ein Image eingebettet ist wird das Ereignis audio_id3image() ausgelöst. Wenn jetzt file.seek() oder file.read() aufgerufen wird steht der Dateizeiger an einer anderen Position und der mp3 Dekoder findet nicht das erste Synchronwort und gibt einen Fehler aus. Danach sucht er den ersten brauchbaren mp3-Rahmen innerhalb der Audiodatei.
Schöner wäre es, wenn nach den Auslesen des Images der Dateizeiger wieder auf den Anfang des Audodatenblocks zurückgesetzt wird.
zB. mit: audio.setFilePos(audio.getAudioDataStartPos());
vG Wolle
Hallo @Wolle,
Vielen Dank für den Hinweis! Das würde ja auch verschiedene Abstürze in der Audio-Bibliothek erklären die ich Dir gemeldet hatte…
Ich werde jetzt die voherige Dateiposition nach Speichern des Bildes wiederherstellen. Wäre es zur Sicherheit nicht auch Aufgabe Deiner Bibliothek nach Aufruf des callbacks die Dateiposition neu zu setzen? Dann würde man nicht drüber stolpern. Nur ein Vorschlag…
Hallo @tueddy,
genau, das wäre der bessere Weg. Darüber hatte ich bisher noch gar nicht nachgedacht. Der Zeiger kann nach dem Event wieder auf den ürsprünglichen Wert gesetzt werden. Das dürfte kein Problem sein. Ich melde mich, nachdem ich die Änderung eingebaut habe.
vG Wolle
prima, habs jetzt auch angepasst 
3 „Gefällt mir“
Nachdem @biologist noch viele Änderungen eingepflegt hat habe ich einen neuen PR erstellt:
Dieser PR enthält diese Erweiterungen:
- Anzeige des MP3 Cover in der Weboberfläche
- Aktualisierung derSchalter next/previous/play/pause in Echtzeit
- Aktualisierung der Lautstärke in Echtzeit
- Anzeige des MP3 Titels anstelle des Dateinamens sofern verfügbar
- Play/Pause Schalter etwas größer
- Klick auf auf Lautstärke Symbole erhöht/erniedriegt die Lautstärke
5 „Gefällt mir“
Hallo @biologist und @tueddy
Schon wieder so viele neue Features und ich habe noch ein paar Ideen. Das hat sich aus meiner Lage ergeben weil meine Boxen 6500 km entfernt sind. Ich weiß nicht ob das möglich ist oder auch für andere interessant wäre. Ich denke schon, weil es ein Konfigurieren weitestgehend ohne VSCode möglich macht. Auch Enkel werden älter und dann steht die tolle Box herum und könnte an Freunde weitergegeben werden.
Ich denke da an Einstellungen per WebGui die nicht hardwarerelevant sind z.Bsp.
#define PLAY_LAST_RFID_AFTER_REBOOT
#define USE_LAST_VOLUME_AFTER_REBOOT
#define LANGUAGE DE/EN
Bluetooth-device Name
evtl.
#define STATIC_IP_ENABLE mit Eingabe der Netzwerkdaten
Nach einer Testphase das Bereitstellen neuer firmware.bin auf Github oder als Highlight ein Firmware-Update per Button aus der WebGui heraus.
Da gibt es sicher noch mehr was Sinn macht und es für die Endnutzer einfacher macht.
VG Willmar
Da muss man ein bisschen unterscheiden.
Das könnte man problemlos in der GUI konfigurierbar machen - hätte keinen Einfluss.
Das auch, aber hier vergrößert sich die Firmware auf jeden Fall, weil die lokalisierten Meldungen dann doppelt im Speicher liegen. Das ist jetzt kein Showstopper, ich erwähne es nur.
Also grundsätzlich ist so ein bisschen auch mein Langfristziel, dass man zu sowas wie einem uniformen Build kommt, mit dem man dann alles konfigurieren kann. Das wird dann bissl größer sein, weil ja alles mit rein muss. Aber auf dem 4 MB Flash kann man eh OTA nicht machen und selbst da ist noch ordentlich Platz. Aber insgesamt bedarf das doch sehr sehr umfangreichen Änderungen im Code und auch in der GUI. Für das Letztgenannte brauche ich auf jeden Fall Support, weil sonst hampel ich da ewig rum.
Ich war eben, wie so oft, in der Mittagspause mit dem Rennrad unterwegs und habe über das Ganze nochmal ein bisschen nachgedacht. Vielleicht geht man das einfach mal so an, dass man die Sachen nach und nach umzieht.
Vielleicht fängt man da einfach mal mit sowas wie Buttons an. Aber vielleicht warte ich da erstmal, bis @Christian mit seinen Anpassungen durch ist. Wenn ich das richtig verstehe, dann ändert er ja gerade die Schnittstelle. Künftig würde man darüber doch viele Daten schicken. Also nicht an der Menge, aber halt zahlreiche Konfigurationsparameter. @Christian Hast du da Vorschläge? JSON eignet sich für sowas ja schon sehr gut.
Aber da haben wir keine Eile. Für mich ist das eher ne mittel- bist langfristige Sache.
Wie wäre es denn, für jedes Modul eine eigene HTML Datei anzulegen und diese dann (per JS) dynamisch in die management.html einzubinden? Dann könnte man für jedes Modul das HTML Snippet abfragen und unabhängig vom Inhalt einbinden.
Dann kann z.B das PN5180 Modul Optionen zu LPCD anzeigen und man kann flexibler Änderungen vornehmen ohne auf etliche #ifdefs Rücksicht zu nehmen.
Hi @tueddy
Sehr schön , vor allem auch auf dem Mobilphone .
Mir ist jedoch etwas aufgefallen . Beim Abspielen von Webradio wird das letzte Cover nicht gelöscht und es wird weiterhin angezeigt , ebenso fehlt die Angabe des Webstreams .
VG
Hi @compactflash,
Danke für den Hinweis, ich checke das. Entweder fehlt bei Webstream noch das Löschen der .cover Datei oder die Websocket Benachrichtung…
Mir war noch aufgefallen das der Lautstärkeregler bei schmaler Auflösung (Mobilphone) vor dem letzten Icon umbricht. Jetzt weiß ich nicht genau wie man die Elemente leiser/slider/lauter zusammenhält (so wie nbsp; oder über css)?
Hi @tueddy
das mit dem Umbruch stimmt , hatte ich auch bemerkt. Ich habe davon aber absolut keine Ahnung und kann dir leider keinen Tipp geben . Dafür kann ich gut meckern 
VG
@compactflash kannst Du das mit dem letzten Commit nochmal testen? Vor allem Wechsel abspielen von SD-Karte (mit Cover) auf Webstream?
@tueddy noch nicht so ganz , das Cover verschwindet nicht live sondern erst nach Neuaufruf der Webseite und auch dann steht dort noch der vorherige Titel