Empfohlener Entwicklungsablauf

Demo-Steuerelement als Vorlage

Laden Sie sich das HTML5-API-Beispiel auf Ihren Computer herunter. Dann stehen Ihnen die Demo-Steuerelemente mit Element-Wrapper-JavaScript zur Verfügung.

Wir empfehlen, die Kopie einer ElementWrapper.js aus den HTML5-Beispielen als Vorlage zu verwenden und Name und Funktionalität an Ihr HTML5-Steuerelement anzupassen.

Für weitere Informationen siehe: Beispiel: HTML5-API

Funktionalität des HTML5-Steuerelements testen

Wir empfehlen Ihnen, Ihr HTML5-Steuerelement zuerst auf einer HTML-Demoseite zu testen. Das HTML5-Steuerelement kann ohne ElementWrapper-Skript im Browser dargestellt und die Funktionalität getestet werden. Erst wenn die Funktionalität erfolgreich getestet wurde, beginnen Sie mit der Erstellung der JavaScript-Datei (ElementWrapper.js) .

Anmerkung

Ab CODESYS Visualization V4.8.0.0 wird beim Erstellen eines neuen HTML5-Steuerelements die JS-Datei ElementWrapper automatisch erstellt. Sie enthält nur das Gerüst. Die elementspezifische Funktionalität muss im nächsten Schritt hinzugefügt werden.

Erstellen Sie die HTML-Seite TestControl.html, um das Skript ohne zusätzliche Installation in CODESYS zu testen.

Aufbau der HTML-Seite

<!DOCTYPE html>
<html>
    <head>
        <title>MyTestControl Test Page</title>
        <meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
        <meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1' />
        <meta name='HandheldFriendly' content='True' />
        <meta name='MobileOptimized' content='480' />
        <meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' />
        <meta name='apple-mobile-web-app-capable' content='yes' />
        <meta name='theme-color' content='#2f434e' />
        <meta http-equiv='cleartype' content='on' />
        <scripttype='text/javascript' src='ElementWrapper.js'> </script>
    </head>
    <body>
        <script>
            var wrapper = new MyTestControlElementWrapper();
            (function loop() {
                var testValue = Math.random() * 100;  
                wrapper.setText(testValue + "");      
                wrapper.setColor("#0079FF");       
                window.setTimeout(loop, 4000);     
            })();    
        </script>    
    </body>
</html>

Binden Sie für das HTML5-Steuerelement weitere Dateien (JavaScript-Dateien, Stylesheet-Dateien) in diese Testseite ein. Das sind Dateien, die für das Layout zuständig sind oder eine weitere Funktionalität mitbringen.
Dies entspricht einem Skriptimport, um die Sourcen zur Verfügung zu stellen.
Codebeispiel
```
<link rel="stylesheet" href="gauge.css" />
<script type="text/javascript" src="gauge.js"> </script>
```
Dies kann über der folgende Zeile eingefügt werden:
```
<script type="text/javascript" src="ElementWrapper.js"> 
 </script> 
```
Zeigen Sie das Element (ohne ElementWrapper) im Browser an und testen Sie die Funktionalität.
Wenn der Test erfolgreich durchgeführt wurde, können Sie mit der Erstellung der JavaScript-Datei (ElementWrapper.js) beginnen.

`ElementWrapper` erstellen

Programmieren Sie das ElementWrapper-Skript.

Der Beispielcode erzeugt eine Schaltfläche mit einem Text und einer Farbe. Die Größe wird auf 100 % gesetzt, da das HTML5-Steuerelement den vom Framework erstellten Platz vollständig ausfüllen kann. Außerdem wird für jedes HTML5-Steuerelement ein IFrame erzeugt und darin das HTML5-Steuerelement. Daher kann das HTML5-Steuerelement direkt in document.body hinzugefügt werden.

Beispielcode

var MyTestControlElementWrapper;

(function ()
{
    MyTestControlElementWrapper = function()
    {
        this.domNode = document.createElement("div");
        this.domNode.className = "button";
        this.domNode.style.width = "100%";
        this.domNode.style.height = "100%";
        this.domNode.style.overflow = "visible";
        this.domNode.style.backgroundColor = "#0079FF";

        document.body.appendChild(this.domNode);
     };
    
    MyTestControlElementWrapper.prototype =
    {
        setText:function(value)
        {
            this.domNode.innerHTML = value;
        },

        setColor: function(value)
        {
        this.domNode.style.backgroundColor = value;
        },
    };
})();

Mit der HTML-Seite Test.html und dem ElementWrapper-Skript können Sie das HTML5-Steuerelement instanziieren und anzeigen.
Zusätzlich können Sie über eine Loop-Funktion, die über einen Timer gestartet wird, die einzelnen Methoden im ElementWrapper testen.
Das ElementWrapper-Skript stellt die Funktionalität bereit.

HTML5-Steuerelement erstellen

Sie können nun das HTML5-Steuerelement erstellen. Der HTML5-Steuerelemente-Editor unterstützt Sie dabei.
1. Konfigurieren Sie in der Registerkarte Allgemein das neue Element.
2. Legen Sie in der Registerkarte Eigenschaften des Steuerelements die gewünschten Eigenschaften fest.
3. Erstellen Sie eine neue Eigenschaft des Typs Variable. Tragen Sie in der Spalte Methodenaufruf den gewünschten Methodennamen ein.
  So werden Variablen an Methoden des Controls übergeben.
  Tipp
  Um sich mit den Möglichkeiten vertraut zu machen, ist es hilfreich, die Beispiele im HTML5 Steuerelemente-Editor zu öffnen.
  Für weitere Informationen siehe: Referenz: HTML5-Steuerelemente-Editor
4. Übersetzen Sie in der Registerkarte Lokalisierung für die verschiedenen Sprachen die Oberflächentexte des Steuerelements.
  Die Texte sind lokalisiert. Das Element kann in den verschiedenen Sprachen dargestellt werden.
5. Speichern Sie Ihre Konfiguration unter dem Steuerelement-Namen und installieren Sie es im CODESYS Visualisierungselemente-Repository.
  Verwenden Sie dafür das Befehls-Icon .
  Für weitere Informationen siehe: Erste Installation eines HTML5-Steuerelements
Nun können Sie das HTML5 Steuerelement in einer Visualisierung verwenden.

HTML5-Steuerelement verwenden

Erstellen Sie ein CODESYS-Projekt mit einer Visualisierung und ziehen Sie das neue Element in den Visualisieurngseditor.
Konfigurieren Sie die Elementeigenschaften und weisen Sie die Variable zu, die das neue Steuerelement anzeigen soll.
Übersetzen und starten Sie die Applikation. Und starten Sie die Visualisierung auf einer WebVisu.
Die können Ihre Visualisierung im Onlinebetrieb beobachten.

Debuggen des HTML5-Steuerelements

Im folgenden Abschnitt wird beschrieben, wie Sie Ihr HTML5-Steuerelement im Browser auf Fehler untersuchen können.

Um die Funktionalität freizuschalten, müssen Sie die URL mit dem Debug-Parameter DebugHTML5=true aufrufen:

http://localhost:8080/webvisu.htm?CFG_DebugHTML5=true

Prozedur. Debuggen im Browser

Klicken Sie im Browser mit der rechten Maustaste auf die Seite. Wählen Sie im sich öffnenden Kontextmenü die Option "Untersuchen" aus.
Die Browserseite "DevTools" öffnet sich.
Wechseln Sie zur Registerkarte "Sources".
In der Registerkarte "Sources“ finden Sie eine Baumstruktur, in der sich die Datei elementwrapper<index>.js befindet. Der Index wird automatisch an den Dateinamen angehängt, um in der Steuerung für Eindeutigkeit zu sorgen.
Die Datei ist im Laufzeitsystem im Ordner "PlcLogic/visu“ gespeichert.
Sie können Fehlerbehebungen am schnellsten implementieren und testen, wenn Sie die erforderlichen Änderungen an der im Laufzeitsystem gespeicherten Datei vornehmen.
1. Ändern sie die ElementWrapper-Datei für die Fehlerbehebung.
2. Wählen sie im Browser die Option "NeuLaden".
  Das Element wird aktualisiert und kann getestet werden.
3. Tipp
  Es empfiehlt sich, die lokale CODESYS Control als Runtime zu starten. Die Runtime läuft lokal auf ihrem eigenen Rechner. So können Sie den Laufzeitsystem-Ordner im Explorer öffnen und das JavaScript mit einem externen Texteditor öffnen und bearbeiten.
  elementwrapper<index>.js
4. Setzen Sie einen Breakpoint im Konstruktor oder in den Methoden, um die Funktionalität im Browser zu debuggen. Sie sollten dafür mit den Möglichkeiten des Debuggings vertraut sein.
Die Fehler sind ermittelt und behoben. Das Testelement verhält sich nun korrekt.
Übertragen Sie die Änderungen im Test-JavaScript elementwrapper<index>.js in die Originaldatei ElementWrapper.js.
Installieren Sie das HTML5-Steuerelement erneut.
Die Änderungen sind wirksam. Das Element verhält sich entsprechend.

Beispiel

Auf der unten verlinkten Seite werden beispielhaft die verschiedenen Funktionen und Features rund um die HTML5-Steuerelemente beschrieben.

Hinweis

Beispielprojekt HTML5 API

Die verwendeten API-Aufrufe sind in der folgenden Entwickler-Referenz beschrieben:

Referenz: HTML5-Steuerelement-Entwicklung

In diesem Abschnitt: