ESP8266 + FLProg - Erstellen einer webbasierten Konfigurationsoberfläche

Quelle

Der vorherige Beitrag zur Kombination von FLProg und ESP8266 war eine Überprüfung, und jetzt werden wir die Arbeit in einem Programm mit diesem Controller genauer betrachten.

Wie bei Arduino beginnt die Arbeit an einem Projekt mit der Auswahl eines Controllers. Im Gegensatz zu früheren Versionen wurden die Controller zur Vereinfachung der Benutzer in die Baumstruktur der Ordner verschoben.



Bei der Auswahl eines bestimmten Controllers oder einer bestimmten Karte sehen Sie deren Image, Pinbelegung sowie technische Spezifikationen.

Die Hauptarbeit beim Erstellen der Webkonfigurationsoberfläche erfolgt im Projektbaum.
Konfigurieren Sie zunächst den Zugangspunkt.

Wir öffnen den Projektbaum einschließlich des Punktes „ Access Point “ und durch Doppelklicken auf den Zweig „ Disabled “ schalten wir den Access Point ein, um zu arbeiten.



Konfigurieren Sie in den geöffneten Zweigen die Access Point-Einstellungen. Doppelklicken Sie auf den entsprechenden Zweig, um den gewünschten Parameter zu ändern.



Netzwerkname (SSID) - Der Name des Netzwerks, das der Access Point organisiert.
Passwort für die Verbindung - Passwort für die Verbindung zum Access Point. Wenn Sie dieses Feld leer lassen, ist der Zugangspunkt ohne Kennwort mit einer freien Verbindung.

IP-Adresse - IP-Adresse, die der Controller in dem vom Zugriffspunkt erstellten Netzwerk hat. Unter dieser Adresse können Sie dann eine Verbindung zum Controller herstellen.

Die verbleibenden Parameter ( Subnetzmaske und Netzwerk-Gateway ) werden nach dem Festlegen der IP-Adresse automatisch ausgefüllt. Bei Bedarf können sie jedoch geändert werden, wenn nicht standardmäßige Werte erforderlich sind.

Das Ergebnis sollte so etwas sein.



Wenn der Zugriffspunkt fertig ist, können wir diesen Knoten reduzieren und zum Client gehen. Wir erweitern auch seinen Knoten und aktivieren ihn durch Doppelklick auf den Zweig " Getrennt "



Passen Sie den Client an. Es gibt zwei Möglichkeiten, den Client zu konfigurieren. Direkte Einstellung der Netzwerkeinstellungen und Empfangen von Einstellungen über DHCP. Zunächst verwenden wir die zweite Option.



Bitte beachten Sie, dass das Verbindungskennwort aus Sicherheitsgründen nicht in der Projektstruktur angezeigt wird.

Mit der Einrichtung der Wi-Fi-Schnittstellen sind fertig. Wir schalten (falls erforderlich) den Clientknoten aus und fahren mit dem Einstellen des Wi-Fi-Firmware-Aktualisierungsmodus fort (falls erforderlich). Dieser Knoten wird nur angezeigt, wenn der Client eingeschaltet ist.

Wir aktivieren diesen Modus durch Doppelklick auf den Zweig " Deaktiviert "



Wir stellen die notwendigen Parameter ein (das Ändern des Wertes der Parameter erfolgt durch Doppelklicken auf den entsprechenden Zweig).



Passwort - Wenn Sie ein Passwort festlegen, bevor Sie eine neue Firmware eingeben, müssen Sie es eingeben.
Gerätename - Dieser Name wird im Namen des Verbindungsports in der Arduino IDE angezeigt.

Lesen Sie hier mehr über den Arduino OTA-Modus.

Nun fahren wir direkt mit der Erstellung der Webkonfigurationsoberfläche fort. Öffnen Sie den Knoten " Webkonfigurationsschnittstelle " und aktivieren Sie ihn, indem Sie auf den Zweig " Deaktiviert " doppelklicken



Die Webeinstellungsoberfläche besteht aus einer Reihe von Seiten mit Parametern. Wenn mehr als eine Seite vorhanden ist, wird automatisch ein Menü generiert, um darauf zuzugreifen. Für jede Seite können Sie Ihre eigenen CSS-Stile festlegen, wenn Sie gemeinsame Stile für die gesamte Webeinstellungsoberfläche verwenden.
Doppelklicken Sie auf den Zweig " Allgemeiner Stil ", um allgemeine CSS-Stile für die gesamte Weboberfläche zu konfigurieren



Das Fenster mit den allgemeinen Stileinstellungen wird geöffnet.



Auf der Registerkarte „ Beschreibung der Stile “ befindet sich ein Eingabefeld direkt für die Beschreibung der Stile, die für alle Einstellungsseiten angewendet werden. Standardmäßig ist dieses Feld bereits mit Stilen gefüllt, um eine Standardschnittstelle zu erstellen. Wenn Sie jedoch das Design der Seiten ändern möchten, können Sie sie ändern.

Auf der Registerkarte " Stile " können Sie die Namen der Stile angeben, die für bestimmte Seitenelemente verwendet werden.



Diese Registerkarte ist standardmäßig ebenfalls ausgefüllt.

Auf der Registerkarte „ Texte “ können Sie die Texte der auf der Seite verwendeten Hauptelemente eingeben.



Um alle Werte dieses Dialogfelds mit Standardwerten wiederherzustellen, können Sie die Schaltfläche " Standard " verwenden.

Die in den allgemeinen Stilen angegebenen Stil- und Texteinstellungen werden auf alle Einstellungsseiten angewendet, wenn sie nicht durch die Stileinstellungen einer bestimmten Seite blockiert werden (wir werden dies unten betrachten).
Seiten werden im Knoten " Einstellungsseiten " angezeigt. Wir enthüllen es.



Standardmäßig gibt es immer eine Seite. Nachdem wir den Knoten geöffnet haben, erhalten wir Zugriff auf seine Einstellungen.



Homepage- Adresse - Adresse der Haupteinstellungsseite. Standardmäßig ist Host die Adresse des Controllers im Netzwerk. Bei Bedarf können Sie ändern. Ändern Sie es in die Host- / Einstellungsadresse (doppelklicken Sie auf diesen Zweig).



Seitenname - Der Name der Seite im Menü. Lassen Sie es mit dem Namen - " Home "
Seitenstil - Durch Doppelklicken auf diesen Zweig wird das Dialogfeld mit den Stileinstellungen für diese bestimmte Seite geöffnet.







In diesem Dialogfeld können Sie zusätzliche CSS-Stile für diese Seite hinzufügen und Stile und Texte für Designelemente zuweisen. Sie können die im Dialogfeld "Allgemeine Stile" beschriebenen Stile auch neu definieren.

Im Knoten „ Parameter “ werden die auf der Seite angezeigten Parameter festgelegt. Auf der Hauptseite stellen wir die Anzeige der vom Router über DHCP empfangenen IP-Adresse im Klartext ein. Der Parameter wird durch Doppelklick auf den Zweig „Parameter hinzufügen“ hinzugefügt



Der Dialog zum Erstellen eines neuen Parameters wird geöffnet. Drücken Sie zunächst die Taste, um den Systemparameter auszuwählen.



Eine Liste der verfügbaren Systemparameter wird geöffnet. Wählen Sie den Parameter „ Wi-Fi-Client - IP-Adresse “.



Geben Sie im Feld Beschriftung die Textbeschriftungen für diesen Parameter ein und wählen Sie im Feld Parametertyp die Option „ Text “ aus.



Nach dem Erstellen des Parameters wird ein neuer Knoten des Projektbaums angezeigt, in dem Sie den Stil für diesen Parameter konfigurieren, die Parametereinstellungen ändern oder löschen können.



Die Knoten „ Speichern“ und „Zurücksetzen“ geben die Verfügbarkeit der Schaltflächen zum Speichern von Daten und zum Zurücksetzen des Controllers auf der Seite an. Da auf der Hauptseite keine veränderbaren Daten vorhanden sind, deaktivieren Sie diese Schaltflächen auf der Seite, indem Sie auf den Zweig " Verwendet " doppelklicken (standardmäßig sind die Schaltflächen auf der Seite vorhanden).



Fügen Sie eine neue Seite hinzu, indem Sie auf den Zweig " Seite hinzufügen " doppelklicken



Der Dialog zum Erstellen einer neuen Seite wird geöffnet. Geben Sie darin den Namen der Seite (wie sie im Menü der Einstellungsoberfläche genannt wird) und die Adresse ein. Die Unterseitenadressen gehen immer zur Homepage-Adresse. Auf dieser Seite konfigurieren wir die Einstellungen für den Zugangspunkt.



Neben der Hauptseite können Sie im neuen Seitenknoten die Seitenadresse, den Namen, die Stile für diese bestimmte Seite, die angezeigten Parameter und das Vorhandensein von Schaltflächen ändern. Nun, zusätzlich gibt es die Möglichkeit, die Seite zu löschen.



Fügen Sie der Seite den Parameter „ Wi-Fi Access Point - Netzwerkname (SSID) “ hinzu



Außerdem wählen wir den Typ " Eingabefeld " und die Bezeichnung " Netzwerkname " aus



Fügen Sie auf die gleiche Weise die verbleibenden Parameter des Zugriffspunkts hinzu.



Wenn die Seite mehr als einen Parameter enthält, werden in den Parameterknoten Verzweigungen angezeigt, um die Reihenfolge zu ändern, in der die Parameter auf der Seite angezeigt werden.

Da die Seite variable Parameter enthält, belassen wir die Schaltflächen zum Speichern und erneuten Laden des Controllers darauf.

Legen Sie für diese Seite im Dialogfeld "Stile" den Titel für diese Seite fest.



Erstellen Sie im selben Szenario eine Seite mit Clienteinstellungen. Für den Parameter " Wi-Fi-Client - IP über DHCP erhalten " legen wir den Typ des Parameters " Kontrollkästchen " fest



Wenn die Oberfläche in den Seitenknoten mehr als zwei Seiten enthält, werden auch Zweige angezeigt, die die Position der Seiten im Menü der Benutzeroberfläche steuern. Die Hauptseite bleibt aber immer die erste.



Derzeit ist der Zugriff auf die Benutzeroberfläche und alle Seiten kostenlos. Wir führen eine Zugangsbeschränkung ein. Doppelklicken Sie dazu auf den Zweig " Free Access " des Knotens " Access to Interface "



Jetzt müssen Sie sich anmelden, um auf die Schnittstelle zugreifen zu können. Die aktive Autorisierungszeit kann eingestellt werden. Standardmäßig sind es 15 Minuten. Nach dieser Zeit, nach der letzten Benutzeraktivität, wird der aktuelle Benutzer automatisch zurückgesetzt. Diese Zeit kann durch Doppelklick auf den entsprechenden Zweig geändert werden.



Im Knoten " Benutzer " können Sie die erforderliche Anzahl von Benutzern festlegen. Es gibt immer einen Superuser (die Standardanmeldung ist admin ). Alle Seiten und Parameter stehen ihm immer zur Verfügung. Wie für jeden Benutzer können Sie auf seiner Site einen Benutzernamen und ein Passwort angeben.



Erstellen Sie einen neuen Benutzer, der das Recht hat, den Zugangspunkt zu konfigurieren. Doppelklicken Sie dazu auf den Zweig " Benutzer hinzufügen ". Das Dialogfeld Benutzer hinzufügen wird geöffnet. Darin legen wir den Benutzernamen und das Passwort des neuen Benutzers fest



Und erstellen Sie einen anderen Benutzer, der den Client konfigurieren kann.



Nachdem der Zugriff über Login und Passwort aktiviert wurde, wurde auf allen Seiten die Schaltfläche " Beenden " angezeigt, mit der der aktuelle Benutzer beendet wird. Lass es auf allen Seiten.



Konfigurieren Sie nun den Zugriff auf die Seiten. Die Hauptseite steht immer allen Benutzern zur Verfügung. Und in den Knoten der verbleibenden Seiten wurde ein neuer Zweig " Zugriff " angezeigt. Doppelklicken Sie auf diesen Zweig im Knoten der Seite " Access Point ".



Ein Dialogfeld zur Auswahl der Benutzer für den Zugriff auf die Seite wird geöffnet. Standardmäßig steht der Zugriff allen Benutzern offen. Deaktivieren Sie den Benutzer " User_Client ", um seinen Zugriff auf diese Seite einzuschränken.



Ebenso beschränken wir den Zugriff auf die Client-Einstellungsseite auf den Benutzer " User_Tochka ".



Erstellen wir eine weitere Seite zum Festlegen von Benutzernamen und Kennwörtern



Fügen Sie dieser Seite Anmelde- und Kennwortparameter für alle Benutzer hinzu. Diese Parameter wurden in der Liste der Systemparameter angezeigt, nachdem der Zugriff über Login und Passwort aktiviert wurde.



Für diese Seite konfigurieren wir keine Zugriffsbeschränkung, sondern konfigurieren die Einschränkung direkt für die Parameter. In den Parameterknoten wurden Zweige für Zugriffseinstellungen angezeigt, ähnlich wie bei den Seitenzugriffseinstellungen.



Verweigern Sie den Zugriff auf beide Benutzer durch die Parameter des Administrators, und wir überlassen den Zugriff auf die Parameter des Benutzers nur dem Benutzer, zu dem diese Parameter gehören.

Hierzu betrachten wir die Konfiguration der Weboberfläche als abgeschlossen.

Drücken Sie die Schaltfläche „Projekt kompilieren“ in der Hauptoberfläche des Programms und erhalten Sie eine fertige Skizze in der Arduino IDE.





Bei Arduino IDE wählen wir unser Board aus.



Und der Port, an den der Controller angeschlossen ist



Füllen Sie dann die Firmware in den Controller



Also, was haben wir bekommen ...

Nach dem Herunterladen wird ein neuer Zugangspunkt angezeigt.



Wir sind damit verbunden und gehen zu der Adresse, die wir im Projekt festgelegt haben. Die Anmeldeseite wird angezeigt.



Geben Sie das Passwort und die Administratoranmeldung ein und rufen Sie die Hauptseite auf



Wir sehen alle Seiten im Menü





Und auf der Login- und Passwortseite alle Parameter.



Wir verlassen und melden uns unter User_Tochka an . Wir sehen nur zugängliche Seiten im Menü und nur unseren Benutzernamen und unser Passwort



Wir sind unter User_Client angemeldet und das Bild ist angemessen - wir sehen nur, was angenommen wird



Wir öffnen die Arduino IDE und in den Porteinstellungen sehen wir, dass der Controller bereit ist, die Firmware "over the air" zu aktualisieren.



Das ist alles für heute.

In der nächsten Lektion werden wir die Systemparameter des Benutzers und die Synchronisation mit genauen Zeitservern betrachten. Laden Sie hier das in dieser Lektion erstellte Projekt herunter.

UPD
Diese Lektion wurde für Version 3.1.4 erstellt, die sich derzeit im Pre-Release-Test befindet. Sie können es hier herunterladen. Weitere Informationen zum FLProg-Projekt finden Sie im Blog des Unternehmens im Hub , auf der Projektwebsite und im Forum . Darüber hinaus können Sie auf dem ArduinoProm- Kanal eine Vielzahl von Videolektionen ansehen.