Hallo,
vor einigen Tagen bin ich auf die ESP-Dash-library gestoßen.
Das ist eine Library mit der man mit wenigen Zeilen C++-Code ein interaktives Web-Interface erzeugen kann
um Werte anzeigen zu lassen, oder On/Off-Buttons oder Schieberegler.
Hier der Beispielcode für einen Schieberegler
ESPDash MyDashboard(&MyServer);
Card MySlider1(&MyDashboard, SLIDER_CARD, "1st Slider", "", 0, 255);
void setup() {
MySlider1.attachCallback([&](int MySliderValue){
/* Print our new slider value received from dashboard */
Serial.println("MySlider1 Triggered: " + String(MySliderValue));
/* Make sure we update our slider's value and send update to dashboard */
MySlider1.update(MySliderValue);
MyDashboard.sendUpdates();
});
Einfach im Webinterface mit der Maus am Schiebregler gezogen und Zack! ist der neu eingestellte Wert über die Callback-Funktion ins Arduino-Programm übertragen.
Das nenne ich mal effektiv.
Es gibt aber auch etwas was noch verbesserungsbedürftig ist. Die Reihenfolge in der die GUI-Elemente auf der Webseite angezeigt werden kann nicht vom User festgelegt werden. Es werden zuerst alle Generic, dann alle Temperature, dann alle Schieberegler rausgehauen.
Ich habe dann zunächst im englisschsprachigen Forum gefragt ob jemand eine Alternative kennt.
Does anybody know of an alternative for the ESP-DASH-library - #5 by StefanL38 - Programming Questions - Arduino Forum Da kam nicht viel an Antworten.
Ich habe den Lib-Autor gefragt ob er dieses Feature noch einbauen würde, dass der User die Reihenfolge festlegen kann. Seine Antwort "No keine Zeit. Aber das ist ja Opensource kann ja jeder selbst Hand anlegen."
Das habe ich dann auch probiert und mich in den Code eingearbeitet. Ich kann auch nachvollziehen wie der Vue.js Script-Code im Prinzip funktioniert. Aber um einen vorhanden Code abzuändern gehört halt doch mehr dazu.
Deshalb meine Frage: Gibt es hier einen HTML- und Vue.js-Experten der Zeit und Lust hätte mich zu unterstützen? Ich hätte auch nichts dagegen wenn jemand sagt "mach ich komplett weil macht Spaß"
Hier der Link zur GiPo
und hier ein Link zu der Vue-Datei in der der HTML-Code für die GUI-Elemente genannt cards erzeugt wird.
https://github.com/ayushsharma82/ESP-DASH/blob/master/vue-frontend/src/views/Home.vue
Wenn sich jemand für ein kurzes Intro wie funktioniert Vue.js interessiert
Das ist schon beeindruckend effektiv.
So jetzt bin ich gespannt ob sich jemand meldet um mich zu unterstützen.
viele Grüße Stefan