Skip to main content

Anbinden und Verwenden eines HTML5-Steuerelements

Sie können ein HTML5-Steuerelement direkt in Ihr Visualisierungselemente-Repository installieren.

HTML5-Steuerelemente können zu einem Projektarchiv hinzugefügt werden, so dass es möglich ist, ein Projekt mit allen notwendigen Inhalten zu verteilen.

Tipp

HTML5-Steuerelemente werden häufig als Package geliefert. Die Erstinstallation erfolgt dann über den Package-Manager.

Prozedur. Erste Installation eines HTML5-Steuerelements

  1. Wählen Sie den Befehl Tools → Visualisierungselemente-Repository.

    Der Dialog Repository für Visualisierungselemente öffnet sich.

  2. Aktivieren Sie die Option HTML5-Steuerelemente.

    Die Liste Installierte Elemente informiert über bereits installierte HTML5-Steuerelemente.

  3. Wählen Sie den Befehl Installieren.

  4. Wählen Sie im sich öffnenden Dateiauswahldialog die gewünschte Beschreibungsdatei des HTML5-Steuerelement (*.html5control.xml) aus.

    • Wenn die Beschreibungsdatei gültig ist, wird das Element automatisch ins Repository installiert. In der Visualisierung erscheint unter Installierte Elemente das Steuerelement. Es kann von Ihnen verwendet werden.

    • Wenn die Beschreibungsdatei nicht gültig ist, wird ein Fehler gemeldet. Wenden Sie sich dann bitte an den Autor des Elements.

Für weitere Informationen siehe: Befehl Visualisierungselemente-Repository

Prozedur. Erstellen eines HTML5-Steuerelements

  1. Im Windows-Startmenü im Installationsordner von CODESYS befindet sich der _visu_icon_html5controls.png HTML5-Steuerelemente-Editor.

    Öffnen Sie den Editor.

  2. Zunächst öffnet der Dateiauswahldialog. Wählen Sie dort die gewünschte Beschreibungsdatei eines HTML5-Steuerelements (*.html5control.xml) aus.

    Im Editor _visu_icon_html5controls.png HTML5-Steuerelemente-Editor werden die Daten des Elements angezeigt.

  3. Bearbeiten Sie das Element so, dass eine gültige Beschreibungsdatei entsteht:

    1. Konfigurieren Sie die Registerkarte Allgemein:

      1. Firma: Test GmbH

      2. Name: FirstControl

        Wichtig

        Der Name darf kein Leerzeichen enthalten.

      3. Werkzeugkategorie: Special Controls

      4. Geben Sie optional eine Bilddatei an.

        Anmerkung

        Wenn kein Bild angegeben ist, wird ein Standard-Icon verwendet.

      5. Geben Sie als Elementwrapper eine JavaScript-Datei (JS) an. Das ist unbedingt erforderlich. Diese Datei umhüllt die Aufrufe aus dem CODESYS -Framework mit den Aufrufen des Steuerelements selbst.

        Falls weitere Dateien für das Steuerelement benötigt werden, müssen diese ebenfalls hier angegeben werden. Dies können CSS-Dateien oder JS-Dateien sein.

        Wichtig

        Die Wrapperdatei muss von Ihnen bereitgestellt werden.

        Achten Sie darauf, dass die Datei ElementWrapper.js an oberster Stelle steht und darunter die anderen Dateien, die zur Ausführung benötigt werden.

        Beispiel

        _vis_configuration_html5_control_files.png

    2. Konfigurieren Sie optional in der Resisterkarte Steuerelement-Eigenschaften die Elementschnittstelle.

    3. Konfigurieren Sie optional in der Registerkarte Lokalisierung die Übersetzungstexte für die Oberflächentexte des Steuerelements.

  4. Wählen Sie den Befehl _visu_icon_save_install.png Speichern und Installieren.

    Ihre Einstellungen werden übernommen und auf Gültigkeit geprüft. Dann wird die Beschreibungsdatei gespeichert und das Steuerelement im Repository installiert.

Im Visualisierungselement-Repository erscheint unter Installierte Elemente das Steuerelement.

Prozedur. Steuerelement verwenden

  1. Öffnen Sie Ihr CODESYS-Projekt.

  2. Öffnen Sie ein Visualiserungs-Objekt.

    In der Ansicht Visualisierungswerkzeuge unter der Kategorie, die in der Beschreibungsdatei angegeben wurde, ist das neu installierte Steuerelement verfügbar.

  3. Ziehen Sie das Steuerelement in den Visualisierungseditor und selektieren Sie es.

    In der Ansicht Eigenschaften ist die Elementschnittstelle, so wie im _visu_icon_html5controls.png HTML5-Steuerelemente-Editor definiert, verfügbar.

Beispiel

Beispiel 56. Steuerelement HTML5DemoDonutGauge
_visu_example_html5_donutgauge.png


In diesem Abschnitt: