Refactoring des Web Interfaces und der REST API

Oha, welchen Browser verwendest du? Habe nur mit Chrome/Edge und Firefox testen können, da sieht es aber so aus:

EDIT: Safari auf iPhone rendert auch korrekt. Die Neugier auf deinen Browser wächst :smiley:

Habs gefunden, fixed. Danke fürs melden!

besser :smiley:

(Firefox Beta)

Ich hab mir jetzt auch mal die Demo und den Code angeschaut.

Feedback: Finde die UI im Design und der Steuerung super. Vor allem die Card-Based Einstellungsseite. Persönliche Meinung: Akku, Lautstärke, LED würde ich in einzelne Karten unterteilen.

Technische Frage: Ist es (später) möglich, einzelne Settings-Kategorien auszublenden oder auszutauschen? Frage ist aus persönlichem Interesse, weil ich gerne andere Batterieeinstellungen hinzufügen würde ohne die alten zu ändern. Aber ganz allgemein kann man ja auch eine Box ohne Batterie, ohne LEDs, ohne Kopfhörer, etc. bauen. Da wäre es natürlich ideal die Hardware in der UI widerzuspiegeln.

Technisch wäre das natürlich machbar (und auch erstrebenswert), aber vorerst wird nach Rücksprache mit unserem BDFL quasi nur die alte UI ersetzt. Features können dann später hinzukommen, sobald Parity mit dem bisherigen Code besteht.

EDIT: Vielen Dank für dein Feedback!

Habe die neue Dateiexplorer/Seite „Tags“ erst jetzt gesehen (Jeder „Reload“ tut gut sonst hängt man in 1992 fest :wink: ):

Finde ich sehr gelungen, bei dem begrenzten Platz durch die Ordner zu gehen. Viel besser als der bisherige Lösung bei dem man teils sehr viel scrollen muss. Ich wusste bei der Bedienung jederzeit wo ich gerade war. Für mich bisher eine sehr gute Benutzererfahrung, weiter so :+1:

Ui, da hat jemand mit Finger auf F5 gelauert - Hab gerade mal vor 45 Min. eine erste Idee gepushed.

Super, dann funktioniert die Idee so also ganz gut, das freut mich! Danke für dein (und auch das der anderen) stetes Feedback, das hilft sehr.

Da bin ich ja froh das ich nicht im Jahr 1992 stehengeblieben bin sondern zufällig Deinen Fortschritt im richtigen Moment aufgerufen habe :sunglasses:

Eine kleine Anmerkung: Auf dem Handy klickt man aus Verzweiflung auf einen deaktivierten Schalter und schon vergößert sich Alles für die kurzsichtigen. An einigen Stellen scheint das bereits deaktiviert. Kannst Du das über Svelte beeinflussen? Im Player nervt mich das immer. Höchstens das Cover möchte man mal größer ziehen. Double-Tap=off? Oder so… Getestet mit iOS.

Eine Frage noch: Ist es geplant später die Svelte Quelldateien ins Projekt aufzunehmen und bei eigenen Anpassungen z.B über ein Skript als einkompilierbare GZIP/brotli Datei neu zu erzeugen? So ist es ja jetzt und ganz hilfrieich. Wie ist da der Plan?

Das müsste ich gezielt auf dem iPhone unterbinden. Schaue ich mir an.

Es geht sogar bereits einen Schritt weiter. Beim „kompilieren“ der Seite wird bereits alles zu einer einzigen HTML zusammengefasst (ohne weitere Dateien, Bilder, JS, alles drin), anschließend mit brotli komprimiert und daraus eine Header-Datei mit dem binären Inhalt als char array im PROGMEM angelegt im korrekten src Unterordnen vom ESPuino Projekt.

Die Sources kommen natürlich mittelfristig ins Haupt-Repo und kompilieren + der ganze Kladderadatsch von oben geht dann mit „npm run build“, sofern node.js installiert ist. Eine entsprechende Mini Doku folgt ganz am Schluss.

2 „Gefällt mir“

OK, perfekt, so habe ich mir das auch vorgestellt!
Schönen Abend!

Ich könnte mal wieder etwas Schwarmintelligenz gebrauchen…

Für die „Tags“-Seite macht es in meinen Augen keinen Sinn, direkt die Dateien auf der SD-Karte anzuzeigen. Sinnvoller wäre vermutlich, eine Liste der verknüpften Tags anzuzeigen oder aber generell erst etwas anzuzeigen, sobald ein Tag aufgelegt ist. Erst dann kann man sich entscheiden, die hinterlegte Aktion zu löschen, eine neue Dateisystemverknüpfung durchzuführen oder ein Modifikationstag zu erstellen. Ich bin mir nicht sicher, was hier aus End User Perspektive am geschicktesten ist. Gibt es dazu Meinungen oder Ideen?

Vielleicht wählt man im ersten Schritt was mit der Karte verknüpft werden soll:

  • mp3/m3u von der SD Karte abspielen
  • Webstream URL eingeben
  • Modifizierung

Abhängig von der Auswahl dann Anzeige des Dateiexplorers, Eingabefeld für URL oder Auswahlfeld für Modifizierung.
Wenn die Karte bereits gespeichert wurde könnte durch Auflegen die bestehende Zuordnung wieder angezeigt/vorausgewählt werden. Das ist ja im Moment nicht möglich.

1 „Gefällt mir“

@tueddy Finde ich gut.

Da muss man nur auch an den Fall denken, dass eine Datei/ein Ordner gelöscht sein könnte und die Zuweisung zwar existiert, jedoch aber „hinfällig“ ist.

1 „Gefällt mir“

Kurz zum Stand der Dinge, weil es so still geworden ist: Ganze Familie hat Corona, daher bleibt in diesen Tagen wenig Zeit :confused: . Ich hoffe, dass es bald wieder vorangeht.

Momentane Überlegung ist, nach dem Aufrufen der Seite einmal per GET die aktuellen Werte anzufordern als JSON. Keys, die nicht enthalten sind, bedeuten, dass das entsprechende Feature nicht implementiert ist und somit in der UI nichts Entsprechendes angezeigt werden sollte. Bin noch unschlüssig, ob ich Value Updates über WebSockets oder Server-Sent Events machen soll.

So, endlich wieder ein paar Minuten gefunden. Falls jemand Zeit und Muße hat, testet doch gerne, ob der File Explorer immer noch funktioniert (vor allem auf Mobile): ESPuino

EDIT: Mir persönlich gefallen die 3 bis 4 Buttons zum Verknüpfen bzw. Löschen der Tags leider überhaupt nicht, zumindest auf Desktop. Muss mal wieder in mich gehen…

1 „Gefällt mir“

Liebe Mütter und Väter, die UI sollte nun grafisch vollständig sein. Zu sehen wie immer hier. Um „reinzukommen“ muss irgendeine SSID (1 Zeichen reicht) eingegeben werden. Hier und da kann manches noch etwas Feinschliff gebrauchen, aber von den Elementen her sollte es vollständig sein, falls ich nichts übersehen habe.

Wer Zeit und Muße hat, kann ja gerne einen Blick drauf werfen und hier Feedback da lassen, das hilft mir immer sehr.

Allseits ein schönes Wochenende!

3 „Gefällt mir“

Sehr cool, ist echt ziemlich geil geworden.
An den neuen Dateibrowser werde ich mich gewöhnen müssen, aber passt.
Wie läuft das eigentlich mit der Sprache? Stellt man das in der GUI um?

Danke!

Stört oder fehlt etwas aus deiner Sicht?
@tueddy hatte schon angemerkt, dass das Kontextmenü unter den Tisch gefallen ist, mit dem man Dateien/Ordner direkt abspielen konnte. Das ist leider insofern problematisch, als dass es dann nicht so geschickt ist, den File Viewer lediglich in der Tagzuweisung aufploppen zu lassen. Da ich das Menü selbst nicht mal gekannt habe, muss ich erst noch drüber nachdenken, wie ich die Funktionalität in’s neue Design transportiere.

Erwischt :sweat_smile: Eigentlich wird automatisch die Systemeinstellung genutzt und die Sprache so automatisch gewählt. Da ich allerdings nicht dazu gekommen bin, alle Strings auf Deutsch zu übersetzen, euch aber auch nicht so einen Denglisch-Kauderwelsch präsentieren wollte, hatte ich die deutsche Fassung kurzerhand deaktiviert. Ist an sich aber kein Thema.

Nene, passt schon.
Ich mag ja diese Baumstruktur, die wir bisher immer hatten, sehr. Aber so eine planare Struktur ist auch ok.
Was ich noch überlegt habe: Man hat ja diese Liste, in der man die Art des Playmodes zuweisen kann. Vielleicht kann man da sowas wie ein Mouse-Over machen und dann wird der Modus nochmal detaillierter beschrieben. Aber wäre nur so ein Goodie, muss nicht und hat wenn auch keine Priorität.

Eija, das passt ja. Also etwaiges long-term-project ist ja mal angedacht, dass man irgendwann alles über die GUI konfiguriert. Insofern wär’s natürlich auch nicht komplett falsch, wenn man die Sprache direkt in der GUI einstellen könnte. Aber soll jetzt nur zur Orientierung dienen - für mich ist das total ok, wenn man das weiterhin per Compile-Direktive einstellt.

Ist es möglich den UI zu testen, ohne ein ESPuino dabei zu haben?

Ich bin sehr neu hier, bin aber frontend entwickler, und könnte da vielleicht auch helfen.
Vielleicht könnte ich zB mit e2e tests helfen?
Oder zB mit einer PT Übersetzung…