quickhmi editor cheetah_editor javascript... · folgender dialog erscheint: an oberster stelle ist...

Dokumentation

QuickHMI Editor

Scripting und HTML

Version 5.1

Indi.Systems GmbH

Universitätsallee 23

D-28359 Bremen

[email protected]

Tel. + 49 421-989703-30

Fax + 49 421-989703-39

mailto:[email protected]

Dokumentation QuickHMI „Editor – Scripting und HTML“

_____________________________________________________________________________________

2

Inhaltsverzeichnis

1 Vorwort ........................................................................................................................................................ 3

2 Copyright ...................................................................................................................................................... 3

3 Systemvoraussetzungen ............................................................................................................................. 3

3.1 Hardware-Systemvoraussetzungen .................................................................................................... 3

3.2 Betriebssysteme................................................................................................................................... 4

4 HTML ............................................................................................................................................................ 4

4.1 HTML Manager .................................................................................................................................... 4

4.1.1 Hinzufügen von HTML Blöcken ................................................................................................... 5

4.1.2 Löschen von Blöcken .................................................................................................................... 5

5 Java Script .................................................................................................................................................... 6

5.1 Definition .............................................................................................................................................. 6

5.1.1 Scripte für Steuerelement-Events ............................................................................................... 7

5.1.2 Scripte für Variable-Chance Events............................................................................................. 8

5.2 Zuweisung ............................................................................................................................................ 8

5.3 Sichtbarkeit von Funktionen und Variablen .................................................................................... 10

5.4 QHMI JavaScript - API ........................................................................................................................ 10

6 Haben Sie Fragen? ..................................................................................................................................... 13


_____________________________________________________________________________________

3

1 Vorwort

QuickHMI bietet Ihnen die Möglichkeit, Ihre Visualisierung nun noch dynamischer zu gestalten. Der neue QHMI-Player erlaubt, dadurch dass er auf einer Webengine beruht, die Verwendung von HTML und JavaScript. Die Verwendung dieser neuen Features wird Ihnen in den nächsten Kapiteln im Detail erklärt.

2 Copyright

Der vorliegende QuickHMI Dokumentation ist urheberrechtlich geschützt.

Alle Rechte, insbesondere das Recht zur Vervielfältigung, Verbreitung und zur Übersetzung bleiben vorbehalten.

Ohne die vorhergehende schriftliche Genehmigung des Urheberrechtsinhabers, darf kein Teil dieser Dokumenta-tion in irgendeiner Form durch Fotokopie, Mikrofilm oder andere Verfahren reproduziert, abgeschrieben, in eine andere Sprache oder Computersprache übertragen werden. Sämtliche Wiedergaberechte bleiben vorbehalten. Irrtum und inhaltliche Änderungen sowie Änderungen des Pro-grammes vorbehalten. QuickHMI ist eine eingetragene Marke der Indi.Systems GmbH Copyright © 2015 Indi.Systems GmbH Alle Produktnamen oder andere Namen oder Marken auf die in dieser Dokumentation Bezug genommen wird, sind Warenzeichen oder eingetragene Warenzeichen ihrer jeweiligen Inhaber und sind das Eigentum ihrer jeweiligen Inhaber, wobei alle Rechte vorbehalten sind.

3 Systemvoraussetzungen

3.1 Hardware-Systemvoraussetzungen Generell sollte es sich um moderne, handelsübliche Computerhardware handeln. Nachfolgend eine Auflistung der von uns empfohlenen Ausstattung:

CPU: mindestens Intel Q6600 2,4 GHz (Dual/Quadcore)

RAM: mindestens 2 GB DDR2-400 PC2-3200

Festplatte: mindestens 60 GB SATA2

Netzwerk: 100 Mbit/s

Grafik: 3D-fähige Grafikkarte mit DirectX 9.0-Unterstützung und mindestens eigenem 512 MB Grafikspeicher (Shared Memory wird nicht empfohlen)


_____________________________________________________________________________________

4

3.2 Betriebssysteme Die folgenden Betriebssysteme werden unterstützt:

Windows Vista

Windows 7

Windows Server 2008 R2

Windows 8

Windows Server 2012

Windows 10

4 HTML

Um einen Bereich in Ihrem Projekt zu definieren, in dem HTML dargestellt werden soll, ziehen Sie eine QHMIHtmlBox auf die Editor-Arbeitsoberfläche. Diese ist zu finden in den Steuerelementen, in der Kategorie „Base Symbols“. In dieser Box kann nun HTML-Inhalt dargestellt werden. Allerdings nur zuvor im „HTML Manager“ defi-nierte HTML-Blöcke. Diese können in der Eigenschaft „HTML“, der QHMIHtmlBox ausgewählt werden.

4.1 HTML Manager Im HTML Manager, der rechts oben über den Projekt Explorer zu erreichen ist, lassen sich HTML-Blöcke anlegen, bearbeiten und löschen. HTML-Blöcke lassen sich später in der QHMIHtmlBox anzeigen. Wählen Sie im Projekt Explorer „HTML Manager“.

Auf der linken Seite des HTML Managers, finden Sie eine Liste aller HTML Blö-

cke, die Sie bereits angelegt haben. Mit einem Linksklick auf den jeweiligen

Eintrag, öffnet sich der Inhalt im Editor auf der rechten Seite.

Auch können Sie sich ein Hilfe-Video aufrufen.


_____________________________________________________________________________________

5

4.1.1 Hinzufügen von HTML Blöcken Um weitere HTML Blöcke anzulegen, klicken Sie auf den entsprechenden Button.

Daraufhin öffnet sich ein Dialogfenster, in dem Sie ei-

nen neuen, eindeutigen Namen für den HTML Block

festlegen müssen. Das Programm weist Sie darauf-

hin, falls ein Name bereits vorhanden ist.

Um zu bestätigen, klicken Sie auf „OK“.

Fett markierte Einträge in der Liste, stellen dabei HTML Blöcke dar, die noch nicht gespeichert wurden. Zum Spei-

chern von Blöcken haben Sie folgende Möglichkeiten:

„Strg + S“ oder (Speichert aktuellen Block) (Speichert alle ungespeicherten Blöcke)

4.1.2 Löschen von Blöcken

Um weitere HTML Blöcke zu löschen, markieren Sie den zu löschenden Block und klicken Sie auf den entsprechen-

den Button.

Den sich öffnenden Dialog, bestätigen Sie mit „Ja“, wenn Sie den

Block wirklich löschen wollen. Anderenfalls kann der Vorhang mit

„Nein“ abgebrochen werden.


_____________________________________________________________________________________

6

5 Java Script

Ähnlich wie die HTML Blöcke, wird das JavaScript an einer zentralen Stelle gepflegt. Für JavaScript stehen Ihnen

hierbei zwei Masken zur Verfügung. Zum einen die Definitionsmaske und zum anderen die Zuweisungsmaske.

5.1 Definition Die Maske zur „Definition“ des JavaScripts, ist über den Projekt Explorer zu erreichen. Sie besteht lediglich aus einem JavaScript-Editor. Durch einen Klick auf den – Button, haben Sie Zugriff zu API-Funktionen, die wir Ihnen bereitstellen, um mit dem Projekt zu interagieren. Die Dropdown-Box oberhalb des Editors, bietet schnellen Zugriff auf alle deklarierten Funktionen. Auch hier können Sie sich ein Hilfe-Video anzeigen lassen.


_____________________________________________________________________________________

7

5.1.1 Scripte für Steuerelement-Events

JavaScript-Funktionen, die als Aktionsfunktion ausgeführt werden sollen, die also im Zuge eines Events aufgerufen

werden, müssen einem bestimmten Muster entsprechen. Solche Funktionen müssen entweder keinen, oder nur

einen bestimmten Parameter haben. Dieser Parameter ist der args-Parameter. Dieser wird gefüllt mit Informatio-

nen zum aktuellen Event (Seite, Komponente, Event).

Valide JavaScript Aktionsfunktionen wären also zum Beispiel:

function showSlotData(args)

function anyFunctionName(args)

function anyFunctionName()

Nicht aber:

function anyFunctionName(args, secondParameter)

function anyFunctionName(par1)

Der args-Parameter kann innerhalb der Funktion wie folgt ausgelesen werden:

args[„page“] (args.page)

Gibt den Namen der Seite zurück, auf der die eventauslösende Komponente liegt. Wenn diese Komponente keinen Namen hat, so wird lediglich die ID der Seite zurück-gegeben.

args[„element“] (args.element)

Gibt den Namen der eventauslösenden Komponente zurück. Wenn diese Komponente keinen Namen hat, so wird lediglich deren ID zurückgegeben.

args[„event“] (args.event)

Gibt den Namen des Events zurück. Bspw. „Clicked“, „OnMouseDown“, etc.


_____________________________________________________________________________________

8

5.1.2 Scripte für Variable-Chance Events

Seit QuickHMI 4.0 (Bonobo) ist es möglich, JavaScripte auszuführen wenn sich Variablen ändern. Diese Funktionen unterliegen den gleichen Einschränkungen wie Scripte für Steuerelement-Events.

Allerdings enthält der args-Parameter in diesem Fall ein Variablen Objekt. Auf dessen Eigenschaften kann wie folgt

zugegriffen werden:

args[„variable“][„name“] (args.variable.name)

Gibt den Namen der Variable zurück.

args[„variable“][„value“] (args.variable.value)

Gibt den aktuellen Wert der Variable zurück.

args[„variable“][„quality“] (args.variable.quality)

Gibt die aktuelle Quality der Variable zurück.

args[„variable“][„timestamp“] (args.variable.timestamp)

Gibt den Zeitpunkt der letzten Änderung zurück.

5.2 Zuweisung Um nun JavaScript-Funktionen auf Events verschiedener Komponenten zu legen, haben Sie zwei Möglichkeiten.

Entweder gehen Sie vor wie mit allen anderen Aktionsfunktionen und legen von Hand eine neue Aktionsfunktion

für ein bestimmtes Event, einer bestimmten Komponente an. Als Befehl dieser Aktionsfunktion können Sie nun

SCRIPT auswählen. In der Dropdownbox sehen Sie nun alle verfügbaren Funktionen aus ihrem definierten Ja-

vaScript, die dem Muster (kein Parameter oder nur args-Parameter) entsprechen.

Wollen Sie aber eine JavaScript-Funktion auf mehrere Events verschiedener Komponenten anwenden, gibt es eine einfachere Möglichkeit. Rufen Sie dazu die Zuweisungsmaske auf, welche Sie ebenfalls über den Projektexplorer erreichen können.

Die Zuweisungsmaske gliedert sich in 3 kleinere Bereiche:


_____________________________________________________________________________________

9

1

3

2

Bereich 1: zeigt eine Übersicht aller JavaScript Funktionen, die sich als Aktionsfunktionen eignen. Wählen Sie

hier eine Funktion aus, die Sie Events zuordnen wollen.

Wichtiger Hinweis:

Namensänderung von Funktionen, wirken sich nicht automatisch auf bereits zugeordnete Funktio-

nen aus. Diese müssen anschließend neu verknüpft werden.

Bereich 2: zeigt den Inhalt, der ausgewählten Funktionen. Änderungen sind an dieser Stelle allerdings nicht

möglich.

Bereich 3: listet Seiten, die momentan geöffnet sind, sowie darauf befindliche Komponenten. Über das Kon-

textmenü (rechte Maustaste) lassen sich hier Events, sowie Funktionen hinzufügen und löschen.

Vorsicht: Wird an dieser Stelle ein Event gelöscht, so betrifft dies alle Aktionsfunktionen, die diesem Event

zugeordnet sind. Da an dieser Stelle ausschließlich Script-Aktionsfunktionen angezeigt werden, ist

es also möglich, dass sicher hinter einem Event weitere, hier nicht sichtbare, Aktionsfunktionen be-

finden. Diese würden beim Löschen des Events mit verloren gehen.


_____________________________________________________________________________________

10

Um eine JavaScript-Funktion mehreren Events auf einmal zuzuordnen, muss diese zunächst in Bereich 1 ausgewählt werden. Anschließend kann der Button „Trigger“ gedrückt werden. Folgender Dialog erscheint:

An oberster Stelle ist der Funktionsname, der gewählten Funktion zu sehen. Darunter eine Dropdownbox mit Events. Je nachdem, welcher Event ausgewählt wurde, ändert sich im unteren Teil die Liste der Komponenten, da nicht alle Komponenten die gleichen Events haben. Wird das Event „OnVariableChanged“ ausgewählt, so erscheint eine Liste aller im Projekt zur Verfügung stehenden Variablen. Um die Liste weiter zu filtern, steht Ihnen zum einen ein Namensfilter zur Verfügung, als auch die Möglichkeit, nur Komponenten anzeigen zu lassen, die entweder bereits eine Zuordnung haben, oder nicht. Alle Komponenten die einen Haken haben, haben diese Funktion

bereits auf diesem Event verknüpft. Wird ein Haken entfernt, wird

beim Speichern die Verknüpfung aufgehoben. Andersrum können

natürlich auch neue Verknüpfungen angelegt werden.

5.3 Sichtbarkeit von Funktionen und Variablen Falls Sie globale Variablen deklarieren wollen, ist zu beachten, dass diese nicht „projektglobal“ angelegt werden,

sondern für jede Seite Ihres Projekts neu initialisiert werden. Ein globaler Counter über mehrere Seiten ist also nicht

möglich. Außerdem werden Variablen beim Wechsel von einer Seite zur anderen neu initialisiert.

5.4 QHMI JavaScript - API Folgende API-Funktionen stehen Ihnen in JavaScript zur Verfügung: mainInterface.getProperty(property) Diese Funktion gibt den Wert einer Eigenschaft einer Komponente zurück.

Parameter

Property

Der Parameter property gibt den Namen einer Eigenschaft an.

Ein Eigenschaftsname muss immer einer der folgenden Syntaxen entsprechen:

o Seitenname.Komponentenname.Eigenschaftsname

o SeitenID.KomponentenID.Eigenschaftsname


_____________________________________________________________________________________

11

Um also beispielsweise den Text einer Textbox mit dem Namen edit1 auf der Seite Hauptseite auszulesen, muss als Parameter übergeben werden: „Hauptseite.edit1.Text“

Die Syntax, welche die IDs der Seite und Komponente enthält, ist lediglich interessant in Verbin-

dung mit dem oben genannten args-Parameter, da dieser nur die IDs liefert, sollte die Kompo-

nente keinen Namen haben.

mainInterface.setProperty(property, value) Diese Funktion setzt den Wert einer Eigenschaft einer Komponente auf einen bestimmten Wert. Um einen Wert zu setzen muss die Komponente einen Namen haben.

Parameter property

Der der Eigenschaft, die gesetzt werden soll. (Siehe Funktion getProperty)

value Der Wert, den die Eigenschaft bekommen soll

mainInterface.getVariable(variable) Diese Funktion gibt den Wert einer Variablen zurück.

Parameter variable

Der Name, mit der die Variable angelegt wurde mainInterface.setVariable(variable, value) Diese Funktion setzt den Wert einer Variablen.

Parameter variable

Der Name, mit der die Variable angelegt wurde

value Der Wert, den die Variable bekommen soll


_____________________________________________________________________________________

12

mainInterface.log(logtype, tag, message) Diese Funktion schreibt einen Logeintrag. Das Log kann im Desktopplayer über den - Button geöffnet werden.

Parameter

logtype Als Logtype stehen die Konstanten „I“ für Information, „W“ für Warning und „E“ für Error zur Verfügung. Diese werden im Log unterschiedlich farblich dargestellt.

tag Gibt den Ursprung des Logeintrags an

message Die Nachricht, die geloggt werden soll


_____________________________________________________________________________________

13

6 Haben Sie Fragen?

Bei Fragen zu unserem Produkt „QuickHMI“, rufen Sie uns bitte unter der kostenlosen Hotline an oder

senden Sie uns eine E-Mail.

Kostenlose Hotline: 0800 - 72 35 102

E-Mail: [email protected]

Wir werden Ihr Anliegen in kürzester Zeit bearbeiten oder direkt beantworten!

mailto:[email protected]

quickhmi editor cheetah_editor javascript... · folgender dialog erscheint: an oberster stelle ist...

Documents