Erstellung von Benutzerwebseiten

Unsere Systeme SlimLine e Netsyst Da sie über einen integrierten Webserver verfügen, ist es möglich, vom Browser aus sichtbare Benutzerseiten an das System zu übertragen. Die Seiten müssen mit einem eigenen HTML-Editor erstellt und in das Dateisystem des Systems übertragen werden. Auf ARM 7-Systemen können sie in Ordner übertragen werden Storage ed SDCardin den Systemen CortexM7 sie können in den Ordner übernommen werden C:/Web Erstellen Sie Ihre eigenen Unterordner. Auf die geladenen Seiten kann direkt über den Browser zugegriffen werden, indem einfach die IP-Adresse des Geräts und der Seitenpfad eingegeben werden. Für komplexere Webanwendungen steht FB zur Verfügung HTTPServer Dadurch können Sie ein SPS-Programm ausführen, um den Inhalt zu kompilieren und ihn an den Browser zurückzugeben. Es ist dafür vorgesehen Laden Sie ein Programm herunter, in den Programmordnern gefunden.

• LogicLab, Seitenverwaltungsprogramm, das auf das System übertragen werden soll SlimLine.
• Web, Ordner WPages mit Webseiten zum Übertragen in den Ordner C:/Web auf dem System SlimLine.

Durch Eingabe der IP-Adresse des Systems aus dem Browser gefolgt vom Pfad zur Indexseite (Beispiel http://xxx.xxx.xxx.xxx/WPages/Index.html) können Sie zwischen den verschiedenen Beispielen navigieren. Alle Beispiele können mit einem einfachen Texteditor bearbeitet werden (Beispiel Notepad++).

Einfach Seite

Im Beispiel auf der Seite die Seite SPage.html, eine einfache Seite, die eine Präsentationsnachricht anzeigt. Für diejenigen, die keine HTML-Kenntnisse haben, empfehle ich, die Datei zum Testen mit einem Texteditor oder HTML-Editor zu bearbeiten SPage.html. Durch Speichern der geänderten Datei und Aktualisieren der Seite im Browser sehen wir die vorgenommenen Änderungen. Es ist dann möglich, die verschiedenen HTML-Elemente einzufügen und zu sehen, wie sie funktionieren.

Verwaltung dynamischer Seiten, TAGs und ARGs

Im Beispiel auf der Seite die Seite DPage.htm Zeigt den Wert der SPS-Variablen an VView vom Typ UINT, der der Adresse DB100.10 zugeordnet ist und Ihnen ermöglicht, den Wert der SPS-Variablen festzulegen VSet vom Typ REAL, zugeordnet zur Adresse DB100.12. Das Beispiel verdeutlicht die wichtigste Funktion des Webservers, die Möglichkeit, Seiten zu verwalten, deren Inhalt vom Server geändert wird. Das Beispiel zeigt, wie eine Interaktivität mit dem Benutzer verwaltet werden kann, der über in die Seite eingefügte TAGs SPS-Variablen anzeigen und deren Wert mit ARGs ändern kann. TAGs ed ARGs beziehen sich auf Variablen, die in der zugeordnet sind DB100 der SPS und muss in Seiten mit Erweiterung eingefügt werden htm.

TAGs: Um den Wert von SPS-Variablen auf der Webseite anzuzeigen, können Sie eingeben TAGs die das Anzeigeformat, den Typ und die Adresse der anzuzeigenden Variablen angeben (Beispiel <!–[‘%d’, UINT, 10]->, Anzeigevariable UINT zugeteilt zu DB100.10). Die TAGs werden vom Server durch den Wert der Variablen ersetzt, wenn der Seiteninhalt an den Browser gesendet wird.

ARGs: Um das Setzen von SPS-Variablen von der Webseite aus zu ermöglichen, ist es möglich, an den Server zu senden POST von ARGs Angabe des Typs und der Adresse der Variablen, gefolgt vom einzustellenden Wert (Beispiel UINT 12=100, setze den Wert 100 in der Variablen UINT zugeteilt zu DB100.12). Über das Symbol können mehrere Definitionen angehängt werden & (Beispiel UINT 12=100&REAL 14=1.3). Um SPS-Variablen von der Webseite aus festzulegen, verwenden Sie am einfachsten Module, alle Objekte, die dazwischen enthalten sind <form> e </form>Wenn das Formular gesendet wird, werden sie automatisch in eine Warteschlange gestellt und an das System gesendet, das die Variablen aktualisiert.

<!--["%d", UINT, 10]--> Visualizza variabile UINT allocata a DB 100.10 con numero di cifre intere variabili in base al valore.
<!--["%04d", UINT, 10]--> Visualizza variabile UINT allocata a DB 100.10 con numero di 4 cifre.
<!--["%3.0f", REAL, 32]--> Visualizza variabile REAL allocata a DB 100.32 con numero di 3 cifre intere senza decimali.
<!--["%4.2f", REAL, 50]--> Visualizza variabile REAL allocata a DB 100.50 con numero di 1 cifra intera ed 2 decimali.
<!--["%s", STRING, 128]--> Visualizza variabile STRING allocata a DB 100.128.

UINT 12=10 Imposta variabile UINT allocata a DB 100.12 al valore 10.
REAL 128=185.5 Imposta variabile REAL allocata a DB 100.128 al valore 185.5.
STRING 1000 16="Hello!" Imposta variabile STRING allocata a DB 100.1000 con "Hello!". Lunghezza testo limitata a 16 caratteri.

Aktualisieren von Seiten mit AJAX

AJAX, Akronym für Asynchronous JavaScript and XML, ist eine Entwicklungstechnik zum Erstellen interaktiver Webanwendungen. Die Entwicklung von HTML-Anwendungen mit AJAX basiert auf einem Datenaustausch im Hintergrund zwischen Webbrowser und Server, der die dynamische Aktualisierung einer Webseite ohne explizites Neuladen durch den Benutzer ermöglicht. Diese Technik ermöglicht eine automatische Aktualisierung der Daten auf einer Webseite, ohne dass die Seite neu geladen werden muss, wodurch die SPS-Variablen automatisch angezeigt werden. AJAX-Anfragen werden mit le verarbeitet API fetch.

Im Beispiel auf der Seite die Seite DPAjax.html Hier wird der Wert der Variablen angezeigt IValue vom Typ UDINT DB100.20 zu dem jede Sekunde der Wert der Variablen addiert wird IFactor vom Typ USINT DB100.24. Alle Werte werden in AJAX jede Sekunde automatisch aktualisiert. Das Beispiel der Eingabe einer zugewiesenen Zeichenfolgenvariablen wird ebenfalls gezeigt DB100.52. Die Abruf-API-Verwaltungsfunktionen befinden sich in der Datei Scripts.js Auf der Seite gibt es eine Feldaktualisierungsfunktion:

• GetPage(Page, RFlag), Führt die API Fetch Abrufen in GET die in Page (Im Beispiel DPAjax.htm) und führt bei Rückgabe der Daten die Funktion aus SetupValues Dadurch werden die Felder auf der Seite aktualisiert.
• SubmitData(Page)Führt die aus API Fetch einschicken POST auf der Seite in Page (Im Beispiel DPAjax.htm) Die Daten der gesetzten Variablen und bei der Rückgabe der Daten wird die Funktion ausgeführt SetupValues Dadurch werden die Felder auf der Seite aktualisiert.
• LoadPage(Page)Wird beim Laden der Seite ausgeführt und führt die Funktion aus GetPage um sofort alle Felder der Seite zu aktualisieren und dann die zeitgesteuerte Ausführung der Funktion zu aktivieren GetPage um die Felder automatisch zu aktualisieren.
• SetupValues(RData,RFlag), Werte die Objekte auf der Seite mit den in empfangenen Werten RData. RFlag Wenn aktiv, ermöglicht es die Aktualisierung der Objekte im Attribut. Auf diese Weise ist es möglich, es zu deaktivieren, sodass der Wert vom Browser geschrieben werden kann, ohne durch die automatische Aktualisierung in AJAX neu geschrieben zu werden.

Beim Laden der Seite wird die Funktion ausgeführt <body onLoad=”LoadPage(‘DPAjax.htm’)”> auf die Seite zeigen DPAjax.htm, enthält diese Seite die TAGs, die beim Laden durch den Wert der entsprechenden Variablen ersetzt werden. Die Seite ist so geschrieben, dass sie einen JSON-String mit der Angabe der Objekt-ID und dem Wert zurückgibt, auf den sie gesetzt werden soll.

{
    "IValue":<!--['%d', UDINT, 20]-->,
    "IFactor":<!--['%d', USINT, 24]-->,
    "VStr":"<!--['%s', STRING, 52]-->"
}

Auf diese Weise in der Funktion SetupValues Es reicht aus, die Rückgabe zu analysieren, um die Objekte verbessern zu können. Beachten Sie, dass beim Laden der Seite RFlag ist auf diese Weise aktiv, wird auch das Eingabefeld ausgewertet IFactor. Während des Laufens im Intervall RFlag es ist nicht aktiv und blockiert das Update.

Verwendung von HTML-Objekten

Im Beispiel auf der Seite die Seite WObjects.html Zeigt eine Reihe von Objekten an, die von der HTML-Sprache bereitgestellt werden und mit denen Sie Seiten mit angenehmer grafischer Wirkung erstellen können. Die Objektverwaltung erfolgt in Ajax mit den zuvor besprochenen Funktionen.

Um Webseiten mit Grafiken, Messgeräten, Histogrammen und vielem mehr zu erstellen, können Sie Google Chart-Objekte einfügen (Sehen Sie sich die Galerie an). In dieser Artikel Messgeräte wurden verwendet, um die Temperatur-, Feuchtigkeits- und Druckwerte auf einem Amazon Echo Show-Gerät anzuzeigen.

• Check box: Durch Ausführen des Häkchens wird eine BOOL-Variable aktiviert, der Status der ersten 2s wird auch an die Logikausgänge des CPU-Moduls übertragen.
• Radio button (A): Diese Optionsfelder zeigen den Status der CPU-Modul-Eingänge an. Wie Sie sehen, haben sie unterschiedliche Namensattribute. Auf diese Weise sind sie eindeutige und nicht zusammenhängende Objekte. Da sie nur angezeigt werden, wurden sie deaktiviert, um von einer Webseite aus nicht bearbeitet werden zu können.
• Radio button (B): Diese Optionsfelder haben das gleiche Namensattribut. Wenn Sie also auf eines der Optionsfelder klicken, wird das andere deaktiviert. Sie wirken auf eine USINT-Variable, die entsprechend der Auswahl ausgewertet wird.
• Input field: Durch die Definition des Wertes wird eine UINT-Variable mit dem definierten Wert ausgewertet.
• Progress bar: Ein Fortschrittsbalken wird mit dem im Eingabefeld eingestellten Wert angezeigt.
• Select: Wenn Sie eine der Optionen auswählen, wird eine USINT-Variable ausgewertet.

Responsive Seiten

Heutzutage ist es wichtig, dass Webseiten von einer Vielzahl von Endgeräten aus zugänglich sind, nicht nur vom PC, sondern auch von Tablets und Smartphones. Daher ist es notwendig, reaktionsfähige Seiten zu entwickeln, damit sie sich automatisch an die verschiedenen Geräte anpassen können.

die Anwendung eDoorkeeper mit seinem Quellcode (Download) zeigt, wie durch den richtigen Einsatz von CSS-Stilen einfache responsive Seiten für die Verwaltung der Zutrittskontrolle mit Identifikation per RFiD-TAG entwickelt werden können.

Seite Startseite.htm Zeigt den Betriebsstatus, digitale I/O, den Wert des erfassten TAGs und eventuelle Fehler an, die Seite wird in AJAX aktualisiert. Seite tags.htm ermöglicht die Definition von bis zu 16 TAGs mit dem entsprechenden Code und dem damit verbundenen Benutzer.