Vorschlag - Anpassungen Webinterface

[Christian]

Wie schon kurz mit @Harry besprochen habe ich im Filebrowser die „Buttons“ angepasst.

                              <div class="input-group">
                                    <span class="form-control"></span>
                                    <span class="input-group-btn">
                                        <span class="btn btn-secondary" onclick="$(this).parent().find('input[type=file]').click();">Browse</span>
                                        <span class="btn btn-primary" onclick="$(this).parent().find('input[type=file]').submit();">Upload</span>
                                        <input name="uploaded_file" onchange="$(this).parent().parent().find('.form-control').html($(this).val().split(/[\\|/]/).pop());" style="display: none;" type="file">
                                    </span>
                                </div>

Progressbar

                    <div class="progress">
                            <div id="explorerUploadProgress" class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:0%">
                              <span id="explorerUploadPercent" class="sr-only">70% Complete</span>
                            </div>
                          </div>

Zugriff auf die Progresbar in JScript

$(".progress-bar").css("width", percentComplete + "%").text(percentComplete + " %");

Außerdem habe ich die RFID-Seite noch angepasst und die Zuweisung zu einem Titel oder Mod-Karte kombiniert. Man müsste beim absenden des Forms dann allerdigs prüfen, welcher „Tab“ gerade aktiv ist.
Was meint ihr?

[biologist]

Cool, gefällt mir sehr gut!
Finde es echt grandios, was aus der GUI geworden ist.
Danke, Jungs!

[Harry]

Die Unterteilung finde ich richtig gut! Durch den Filebrowser und der Upload Funktion wirkt die RFID Seite etwas überladen. So ist es deutlich besser!

[Christian]

Prima Dann würde ich auf der Basis vom heutigen Stand aus @Harry 's Repo die Änderungen vornehmen.

[Christian]

Ich hab einen Pull-Request erstellt. Ich starte gerade mit „sourcetree“ ich hoffe, das passt so.
Schaut Euch das bitte mal an. Ich habe gerade keine passende Hardware hier und kann die Zuweisung nicht gut testen. HTML/JS sollten passen.
Ich habe auch noch einen CSS „Fix“ eingecheckt. Die Dropdown Boxen sehen unter IOS komisch aus. Mit diesem CSS „Fix“ ist es optisch besser, aber dafür verschwinden die „Pfeile“ in den Dropdown-Boxen … Geschmackssache.

[biologist]

Ah cool, danke. Teste ich morgen mal.
Habe nur eine kleine Sache: Da stimmt eine ID in der Dropdown-Liste nicht. Glaube es war RFID Mod für Dimmen. Da steht 112 statt 120. Mir ist das nur aufgefallen, weil auf den Bug wurde ich erst vor kurzem aufmerksam gemacht

[biologist]

Habe das eben mal ausprobiert, aber leider klappt das nicht. Die GUI sieht dann so aus:

Also der Filebrowser macht dann nix mehr.

[Christian]

Das ist nicht gut - sorry. Sieht so aus, als wenn es einen Fehler im HTML Code / JS Code gibt, weil der Filebrowser auch gar nicht initialisiert wird. Der Text in der Progress-Bar ist ja auch völlig verkehrt. Da fehlt Code. Oder mal wieder: Schei? Encoding
Wenn man die HTML Datei direkt im Browser aufruft funktioniert es (bei Dir auch?).
Bei mir liegen die HTML Files direkt auf der SD. Ich muss mich noch einmal damit beschäftigen bzw. verstehen, was bei Dir im Code passiert. Da wird irgendwo noch konvertiert, oder?

[Harry]

Das Problem kommt mir sehr bekannt vor :D. Hatte ich auch, dass wenn die html Seite auf der SD lag, alles funktioniert hat und sobald man alles im Programmcode hat nicht mehr.
Wenn es im Programmcode liegt ist alles in einer Zeile. Fehlende Semicolons und Kommentare mit „//“ sind da leider problematisch.
Den Filebrowser habe ich zum laufen bekommen, indem ich hier den Kommentar abgeändert habe und ein fehlendes Semicolon ergänzt habe

/* show active / selected tab */
$('#SubTab.nav-tabs a').on('shown.bs.tab', function (e) {
    ActiveSubTab = $(e.target).attr('id');

Allerdings ist bei mir alles unterhalb der Progressbar noch nicht sichtbar.
Wenn ich das html direkt öffne schaut es ok aus.

[Christian]

Ah okay. Danke. Konvertierung passiert mit dem Perl-Script, oder? Dann kann ich das damit ja testen.

[Harry]

Ja genau, das passiert mit processHtml.py.

Kleine Anmerkung, könnte man noch „multiple“ beim input tag für den Upload hinzufügen? Dann kann man gleich mehrere Dateien zum Hochladen auswählen

[Christian]

Ein DIV war nicht korrekt geschlossen und ein weiteres überflüssig. Ich teste das aber nachher trotzdem noch einmal mit dem Konvertier-Skript.
„Multiple“ ändere ich natürlich.

[biologist]

Das mit dem Einzeiler ist echt fies, das kenne ich nur zu gut
Ich werde den HTML-Kram demnächst mal auf die SD-Karte verschieben und in diesem Zuge dann auch i18n einbauen.
Habe die Tage mit Mario nochmal geschrieben und er hat mir noch Webpack vorgeschlagen. Ich habe das jetzt noch nicht ausprobiert, aber zumindest in der Theorie müsste man damit einen „dicken Brocken“ bauen können, so dass man die Includes von anderen Servern nicht mehr braucht. Ergo: Dann würde das auch offline funktionieren. Muss man halt nur mal schauen, ob das wirklich so klappt und ob der ESP32 das dann auch schnell genug ausliefert.

[biologist]

Also auch von SD klappt es nicht. D.h. der Filebrowser ist jetzt schon da, aber unten fehlt was.

Nicht über die komischen Namen wundern. Das stammt noch aus dem Umlaute-Test

[Christian]

Ich hab ein Problem gefunden. In meinem HTML Code steht zweimal „%“ das zerpflückt das Python Skript. Bei mir geht es jetzt, auch wenn es direkt kompiliert wird. Ich teste aber noch ein paar weitere Dinge und bereinige weiter.

[biologist]

Hmm, aber von SD habe ich jetzt direkt .html ausgeliefert. Das ist ja dann nicht das Char-Array.

[Christian]

Ich hoffe, das liegt an den Korrekturen, die ich weiter oben beschrieben habe Ich hab jetzt ein „original“ ESPuino und teste damit. Mein Ziel wäre jetzt es für beide Wege lauffähig zu bekommen.

[gmbo]

Kann es sein, dass die Reiter für MQTT und FTP irgendwie verschwunden sind?
Ich finde zwar
%SHOW_MQTT_TAB%
%SHOW_FTP_TAB%
aber ich finde dazu nichts im restlichen Code.

[biologist]

Oje, das ist nicht gut. Muss ich suchen, wie und wann das rausgeflogen ist.
Danke für den Hinweis.

[Christian]

Mit welcher Datei testest Du denn konkret? Der Pull request dürfte das nicht entfernt haben - oder ich verstehe ich nicht richtig.