Skip to main content

Grundlegende Vorgehensweise

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

Sie können ein HTML5-Steuerelement, das Sie selbst entwickelt oder aus einer externen Quelle übernommen haben, in Ihr CODESYS-Programmiersystem integrieren. Gehen Sie dazu wie folgt vor.

Prozedur. Vorbereitung

  1. Erstellen Sie für Ihr HTML5-Steuerelement eine JavaScript-Datei mit dem Namen ElementWrapper.js. Oder kopieren Sie eine Element-Wrapper-Datei aus dem Beispiel HTML5-API, beispielsweise die JS-Datei des Elements HTML5DemoButton.

  2. Benennen Sie in der JS-Datei das Wrapper-Objekt um. Der Name ist vorgegeben und setzt sich zusammen aus dem Elementnamen und dem Zusatz ElementWrapper.

    Wichtig

    Der Dateiname muss immer ElementWrapper.js lauten. Und das darin aufgerufene Wrapper-Objekt, das vom Framework zur Laufzeit erzeugt wird, benötigt einen Namen, der dem Element nach folgender Logik zugeordnet ist:

    <element name>ElementWrapper

    In der JS-Datei für Ihr Element ist der Name des Wrapper-Objekts passend zum neuen Steuerelement.

    Das folgende Codefragment zeigt dies für das Steuerelement HTML5DemoButton:

    var HTML5DemoButtonElementWrapper;
HTML5DemoButtonElementWrapper = function(idGenerator)
…

  3. Geben Sie alle Dateien an, die für die Ausführung des Elements erforderlich sind. Dabei kann es sich um Stylesheet-Dateien (CSS), JavaScript-Dateien (JS) oder Bilddateien (SVG) handeln.

  4. Erstellen Sie ein Elementbild (ElementImage.svg). Nach der Installation wird das Element in der Ansicht Visualisierungswerkzeuge angezeigt.

Prozedur. Einbinden ins Programmiersystem

  1. Erstellen Sie eine XML-Datei (.html5control.xml) mit allgemeinen Informationen. Dabei unterstützt Sie der HTML5-Steuerelemente-Editor.

    Tipp

    Die Möglichkeiten des HTML5-Steuerelemente-Editors sind im Kapitel "HTML5-Steuerelemente-Editor" beschrieben.

  2. Erstellen Sie das Mapping der Eigenschaften des HTML5-Steuerelements auf die CODESYS Visualisierungselementeigenschaften.

  3. Lokalisieren Sie die Oberflächentexte.

  4. Installieren Sie das Element.

  5. Signieren Sie das Element.

Tipp

Folgen Sie der Schritt-für-Schritt-Anleitung Empfohlener Entwicklungsablauf mit detaillierten Empfehlungen zur Fehlerbehebung (Debugging).

In diesem Abschnitt: