Verbesserungen der bestehenden Weboberfläche

Kleine Verbesserungen in der bestehenden Weboberfläche (DEV-Branch):

  • Für die Statistik „Audio-Gesamtspielzeit“ wird jetzt das allererste Startdatum angezeigt, sozusagen das Geburtsdatum des ESPuino. Das Datum wird beim ersten NTP-Empfang gesetzt
  • Info-und Log Dialoge haben jetzt einen „Aktualisieren“ Schalter

6 „Gefällt mir“

Kleine Verbesserungen in der bestehenden Weboberfläche (DEV-Branch):

  • Die gespeicherten NVS RFID-Zuweisungen werden jetzt angezeigt und können auch einzeln gelöscht werden
  • Sicherheitsabfrage beim Löschen aller Zuweisungen
  • Nach Löschen bzw. Import der Zuweisungen bleibt man auf der Seite (Single-Page Application)

Anzeige der gespeicherten NVS RFID-Zuweisungen:

Anzeige der gerade aufgelegten Karte:

Löschen einer einzelnen Zuweisung:

Die Liste kommt über den neuen Endpunkt /rfid und wird erst angefordert wenn der Tab geöffnet ist um Audioruckeln zu vermeiden.

Feedback gern hier!

10 „Gefällt mir“

Ich finde es Klasse, wie du hier am laufenden Band neue Features raus haust!

6 „Gefällt mir“

Es sind einige kleine Bugs behoben:

  • Das Infofenster zeigte u.U. das Log an.
  • Syntaxfehler behoben

Die Syntaxfehler konnte ich mit der „HtmlHint“ Erweiterung finden, feine Sache:

5 „Gefällt mir“

Kleine Verbesserungen der bestehenden Weboberfläche (DEV-Branch):

Der Track-Fortschritt wird jetzt im Webplayer angezeigt:

Zusätzlich kann man durch Klick auf den blauen Fortschrittsbalken an die entsprechende Stelle im Lied springen.

Da sind jetzt einige Zeilen zusammengekommen, daher habe ich einen PR zur Review eingestellt:

Aus meiner Sicht klappt das ganz hervorragend aber evt. hat noch wer Anmerkungen dazu.

2 „Gefällt mir“

Coole Sache!
Jedoch: Ich habe das gerade mal mit Firefox und Safari getestet und kann den blauen Balken nicht sehen. Springen klappt aber.

1 „Gefällt mir“

Arghh! Auf den letzten Metern hat sich noch ein Fehler eingeschlichen. Aber dafür ist die Review ja da.

Ich hatte vor, bei Tracks ohne bekannten Fortschritt (z.B. Webstreams) den Balken auszublenden & die Fortschrittsleiste komplett unsichtbar zu machen. Ist korrigiert, danke an @biologist fürs Testen. Nochmals getestet mit Safari, Chrome, Edge & Firefox…

1 „Gefällt mir“

Das funktioniert auch - das habe ich natürlich sofort getestet :grimacing:.
Jut, also funktioniert jetzt auf jeden Fall mit FF und Safari.

1 „Gefällt mir“

Hier noch Details zur Umsetzung, falls jemand den Trackfortschritt/Positionssprung z.B. auch für MQTT implementieren möchte:

Der Trackfortschritt wird über das bereits geöffnete Websocket gesendet, ein neuer Verbindungsaufbau ist damit nicht notwendig.

Naheliegend war zunächst die Push-Methode: Ändert sich der Trackfortschritt, „pusht“ der Player diesen an die WebUI.
Durch die vielen Nachrichten kann die relativ kleine Message-Queue aber schnell volllaufen, es kommt dann zu einer Fehlermeldung „Too many messages“.
Diese Fehlermeldung habe ich auch recht schnell bekommen. Push ist wohl nur für zeitlich wenige Nachrichten wie Trackwechsel, Pause/Play etc. geeignet.

Daher habe ich es mit Polling implementiert:
Nur wenn der Player-Tab geöffnet ist, fragt die WebUI periodisch den Trackfortschritt ab.
Die aktuelle Position/Länge des Tracks wird mit AudioPlayer_GetCurrentTime() und AudioPlayer_GetFileDuration() vom Audioplayer geholt.
Die aktuelle relative Position (0-100%) war bereits vorhanden mit gPlayProperties.currentRelPos .

Positionssprung innerhalb des Tracks:
Ich setze den neuen Modus SEEK_POS_PERCENT und dann die Position mit gPlayProperties.currentRelPos .
Der Audioplayer macht das dann ähnlich wie SEEK_FORWARDS/SEEK_BACKWARDS und setzt den Modus nach dem Positionssprung wieder zurück auf SEEK_NORMAL.

Was mir noch aufgefallen ist:
Bei vielen/hektischen Positionssprüngen springt es manchmal auf EOF, dann wird der nächste Titel gewählt. Ich vermute, das ist noch ein Bug in der Audiobibliothek.

1 „Gefällt mir“

Bei mir sind mittlerweile sehr viele Ordner auf der SD-Karte, daher habe ich mal eine Suchfunktion für die Weboberfläche umgesetzt:

ezgif.com-video-to-gif(4)

Suchergebnisse werden kursiv & farblich hervorgehoben. Suche beschränkt sich auf die aktuelle Ebene (bzw. alle bereits geladenenen Ordner), wäre später evt. über AJAX-Abfrage auf eine Vollsuche erweiterbar.
Die Umsetzung ist nur im Frontend (management.html) & war mit <20 Codezeilen erledigt.

Das ist erstmal nur ein Vorschlag & noch nicht eingecheckt.
Was haltet Ihr davon?

5 „Gefällt mir“

Finde ich schick. Aber ich glaube in Blau statt Rot würde es mir besser gefallen :smiley:.

Ja Fett + kursiv würde reichen :+1:
Die Farbe kommt aus jsTree , CSS-Anpassungen habe ich da noch nicht gemacht.
Wenn’s soweit passt würde ich einen PR dazu erstellen…

3 „Gefällt mir“

Jetzt Suchergebnis in Bootstrap-Blau:

2 „Gefällt mir“

Kleine Verbesserungen der bestehenden Weboberfläche (DEV-Branch):

Bei Webstreams wird das Stationslogo angezeigt sofern verfügbar.

Der blaue Balken zeigt bei Webradio jetzt den Puffer-Füllstand an. Läuft der leer gibt es Aussetzer, diese kommen jetzt mit einer zusätzlichen Toast-Meldung:

Leider senden nur wenige Sender das Logo, Radio-Teddy z.B. nicht. Ich habe die mal angeschrieben aber leider nur eine 0815-Antwort erhalten.

2 „Gefällt mir“

Ein kleiner Fehler in der Anzeige der Weboberfläche: Am Ende einer Playlist wird im Tab „Control“ unter „Current track“ angezeigt: „Keine Playlist aktiv“ (das ist richtig), aber dann auch die Länge des letzten Musikfiles (das ist falsch).

Wobei genau genommen direkt nach Ende der Playlist dort für knapp 1 Sekunde „-- / --“ angezeigt wird, und danach wieder die Länge des letzten Musikfiles angezeigt wird. Habt ihr das auch?

image