Hab’s direkt aufgenommen, coole Sache!
Für locale EN gibt’s das auch direkt. Nur um vorzubeugen, dass ein gewisser @SZenglein wieder schreibt, dass das vergessen wurde 
.
Was ich auch noch hinzugefügt habe ist ein Mouse-Over, damit (hoffentlich) die Funktionsweise der Buttons klarer ist.
Hab’s gerade getestet mit Safari, Firefox, Chrome & MS-Edge, Alles OK.
Schönen Dank für die Mühe an @SZenglein & @biologist !
So sieht die Web-Oberfläche jetzt aus mit Datei/Ordner Upload:
Was meint ihr, wie schwer wäre es mehrere Wifi-Netzwerke abzuspeichern? Ist das nur durch NVS limitiert? Wenn nicht genügend Speicher, würde es Sinn ergeben die Wifi-Infos auf die SD-Karte zu legen?
Oder besteht generell kein Bedarf?
Auf der SD möchte ich das ehrlich gesagt nicht abspeichern, da sich NVS dafür einfach perfekt eignet. Platz ist da auf jeden Fall genügend. Musst dir halt ein Konzept überlegen (und umsetzen), was du mit mehreren WLANs anfängst. Also ob du die dann alle durchiterieren willst, weil das verzögert den Start ja auch ggf. erheblich.
Habe eben mal kurz drüber nachgedacht. Vorstellen könnte ich mir, dass man eine Datenbank mit mehreren WLAN-Credentials hat und die mit einer Reihenfolge versieht. Da man aber auch nicht immer alles durchprobieren möchte wäre es vielleicht eine Idee die Zugangsdaten für das WLAN, mit dem man sich zuletzt verbunden hat, dort gespeichert zu lassen, wo sie aktuell schon gespeichert sind. Weil das löst nebenbei auch das Problem, dass man sonst eine Migration bräuchte. Weil es wollen ja nicht alle User ihre Zugangsdaten bei nem Update neu eingeben.
Also nehmen wir mal an, wie nennen den Ort im NVS, in dem wir aktuell die Zugangsdaten abspeichern „A“ und wir haben eine kleine Datenbank mit 1, 2 und 3. ESPuino startet und versucht sich mit A zu verbinden. Klappt das, dann passt alles. Klappt das nicht, dann fängst du mit 1 an und iterierst notfalls bis 3 durch. Das erste WLAN, mit dem du dich verbinden kannst, kopierst du dann in A rüber. D.h. beim nächsten Start läge die Präferenz von ESPuino auf diesem.
So, schönes Wetter draußen. Ich gehe jetzt 
.
War erstmal nur ein Gedankenanstoß. Ich glaube @Christian hat in seinem UI-Fork einige ganz praktische Sachen gemacht. Z.B. die Wifi initialisierung als Task um den Start nicht zu verzögern. Aber eben auch einen Scan vorhandener Netze die man dann auswählen kann.
Ich denke das ließe sich schon umsetzen indem man schaut welche Netze es gibt und dann ein bekanntes auswählt.
Ich werde aber in der nächsten Zeit wahrscheinlich nichts dergleichen anfangen…
Sollte ich das mal versuchen würde ich ohnehin das Konzept überdenken automatisch das ESPuino Wifi aufzuspannen, finde das Sicherheitstechnisch nicht so prickelnd (auch wenn es vermutlich unwahrscheinlich ist, dass jemand den ESPuino unterwegs hackt).
Und ich glaube diese Änderung könnte dann bei vielen unerwünscht sein.
PS: Richtig, heute das Wetter genießen! Es wird Sommer. Aber diesen Post schreibe ich schon von der Hängematte 
Mit dem Scannen habe ich auch bei ein paar Projekten gemacht.
Sicherheitstechnisch finde ich das nichtbedenklich, da es wohl schwierig sein dürfte von außen einen ESP so zuhacken, dass man an den Quellcode kommt.
Da ist der Quellcode unsicherer auf dem eigenen Rechner.
Andererseits ist das schon einfacher wenn man den ESP bewegt also zuhause Programmiert und dann woanders laufen läßt.
Ich hatte das mal mit einem Array gemacht in das ich die für mich wichtigen Wlans gelegt habe.
Dann scanne ich beim Start die verfügbaren Wlans und vergleiche ob davon eins in der Liste ist und verbinde dann. Wenn keins da ist wird der AP gestartet.
Folgender Text ist relativ kritisch. Ich will vorher darauf hinweisen, dass ich nichts anprangern und niemanden beschuldigen möchte.
Es ist trivial einfach den ESPuino zu übernehmen wenn er sein eigenes Wifi aufspannt. In das kommt man direkt und ohne Einschränkung rein. Dann ist es recht einfach die IP zu finden und mittels Weboberfläche den ESPuino auf z.B. einen eigenen Hotspot zu leiten.
Dann kann man frei verfügen - Audiodateien aufspielen und modifizierte Firmware laden.
Für jedes kommerzielle Produkt für Kinder wäre das ein Skandal und absolutes Ausschlusskriterium. Wir haben hier zwar nur ein DIY-Projekt und ich will wirklich nichts verteufeln, aber runterspielen sollte man es auch nicht.
Solange man sich dessen bewusst ist und es beeinflussen kann (e.g. nur daheim, sonst wlan ausschalten) ist es ja auch kein Problem.
Ich sage das nicht nur so, es gab in der Vergangenheit bereits Fälle in denen das groß angeprangert wurde: Sprechende Puppen die den Angreifer beliebige Nachrichten an das Kind schicken lassen - den Rest kann man sich selbst ausmalen.
Aber das war auch eigentlich eher eine Anmerkung am Rande von mir - wird schon wieder Off-Topic.
Ist ja im Prinzip einfach zu fixen: Setzen wir halt ein Passwort. Die verwendete Lib unterstützt das ja.
…und man könnte zusätzlich den AP nach 5 Minuten ohne Verbindung beenden.
Das mit mehreren WLANs hatte ich auch schon überlegt. Es gibt ja WiFiMulti arduino-esp32/WiFiMulti.cpp at 8fe0efe8c0bb462cf0c5472d34dcae11ce4819c2 · espressif/arduino-esp32 · GitHub
das wollte ich mir mal ansehen, aber man müsste halt auch im UI einiges umbauen.
Natürlich stellt der offene Access-Point Modus ein Sicherheitsrisiko dar, ich verwende ihn aber genau einmal um die WLAN-Zugangsdaten einzutragen. Danach nie wieder. Das könnte man über ein vorgegebenes Kennwort „etwas“ sicherer machen.
WLAN-Wechsel mit Speicherung bereits verbundener Netzwerke interessant, wenn man z.B. ins Ferienhaus oder zum Nachbarn wechselt.
Ein sehr schöner Ansatz von @Christian ist das asynchrone herstellen der WLAN-Verbindung, also über Task/Ereignis-basiert. Damit würde der ESPuino deutlich schneller starten.
Frage ist wer sich dem Thema annehmen möchte? Kennwort für AP sicher schnell gemacht, WLAN im Task sicher etwas aufwändiger. Ich bin da leider raus, zu wenig Zeit…
Andere Libs zum Eintragen der Daten unterstüten das auch (MultiWifi und Async noch dazu ):
Vlt. kann man da was abgucken
Ich verwende
(Leider kein Multi Wifi Support aber sehr einfach einzubinden)
Frage an die Web-Profis
Wäre es möglich einen Button im WebGui z. Bsp. in der oberen Leiste zu integrieren mit dem Namen Bedienungsanleitung? Der Verweis soll auf ein Textfile auf der SD-Karte gehen und dann lesbar sein. So kann sich jeder „Enduser“ einfach eine (Kurz)Bedienungsanleitung selbst erstellen, die auf die individuelle Konfiguration abgestimmt ist. Das wäre auch ohne Platformio jederzeit änderbar. Klar hat @biologist im Forum und auf Github alles toll beschrieben. Aber das meiste ist für Laien zu technisch und wer liest schon gerne lange Bedienungsanleitungen.
Im Prinzip ist dieser Anwendungsfall doch schon gelöst. Im Dateibrowser kann man Dateien runterladen. Da legst dann einfach ins Rootverzeichnis so eine Datei und dann kann man das jederzeit abrufen.
Ich kann die dann aber nicht direkt lesen , z. Bsp . die Backup. txt . Das wäre mein Wunsch .
Dann ist vermutlich ein Filter aktiv. Ich kann die Tage mal schauen.
Abend zusammen,
ich habe auch mal angefangen, die Web UI etwas aufzuhübschen, allerdings vorerst ohne in den bisherigen Code reinzuschauen. Orientiere mich daher nur an der aktuellen UI und mach das erstmal nur aus Spaß, wenn die Zeit es hergibt.
Hier ein kleiner Ausschnitt:
Auf kleineren Bildschirmen verschlankt es sich etwas:
Ein paar Eckdaten zu den Features:
) sind inline, d.h. am Ende kommt eine „große“ HTML-Datei raus. Da ich die Abhängigkeiten minimal halte, sind es augenblicklich nach Brotli-Komprimierung < 35KB. Nebeneffekt: Es läuft auch komplett offline, da nichts aus dem Internet nachgeladen werden muss.Mal schauen, wie es so damit weitergeht, macht jedenfalls Laune…
Sieht super aus! I
18N steht lange schon lange auf der Todo-Liste, gern weiter so. Wird das HTML mit einem Skript komprimiert, ist also im Quelltext noch lesbar? Erzähl mal wie Du das umgesetzt hast.
Sieht gut aus!
Bei 35 KB hast Dui aber reichlich Balast abgeworfen
Würde mich auch interressiren, welche Frameworks du verwendet hast.
Wenn es an die Integration geht … das war der Zeitpunkt, wo sich mein Fork zu weit vom Original entfernt hat. Partizipiere da gerne oder steuere bei. Der aktuelle Code sieht es nicht vor, dynamisch Inhalte mit dem UI auszutauschen.
Meinen Stand sieht man auch hier: http://espuino.ceear.net
Dankeschön! Okay, in aller Kürze: Als Framework hab ich Svelte genutzt mit Vite als Tooling. (Svelte deshalb, weil es auch von „Nicht-Eingeweihten“ sofort beim Lesen der Sources verstanden werden kann und zu regulärem JS kompiliert und somit am Ende keinen Framework-Overhead hat.)
Design ist mit Tailwind CSS gemacht, die Regler kommen aus DaisyUI. Mit Hilfe von vite-plugin-singlefile und vite-plugin-compression wird das ganze schließlich zusammengesetzt und komprimiert.
Danke! Tatsächlich habe ich gar nicht aktiv irgendetwas abgeworfen, sondern einfach nicht viel Externes mit reingenommen. War bislang einfach nicht nötig.
Cool, du hast ein paar sehr schöne Details drin! WLAN RSSI und Akkuanzeige in der oberen Leiste finde ich top und dein Heartbeat hat echt was. 
Insgesamt hast du die UI-Elemente und ihre Struktur vom Original übernommen und deine eigenen Features ergänzt. Mein Ziel hingegen ist eher die User Experience insgesamt zu verbessern, was im Zweifel zu etwas anderen Dingen führt. Mal sehen, wohin die kleine Reise geht.
Habe die Sources mal in ein GitHub Repo geschoben: GitHub - sonovice/espuino-ui: New frontend for the ESPuino music player project
Achtung! Es ist erst ein Anfang. Nichts ist funktional und lediglich die Settings-Seite hat soweit etwas Zuwendung erfahren. Es doppeln sich auch recht viele Dinge noch, aber geputzt wird am Ende. Vertreibe mir damit im Moment die Zeit, bis die Teile aus China eintreffen…
EDIT: Ich bin kein Web-Entwickler, also bitte keine Schelte, falls irgendetwas nicht idiomatisch sein sollte. Bin für Anregungen immer dankbar!
