Bedienungsanleitung: Designer (Bedienelemente)

Anleitungen | 31.05.2017 - 10:06:03

Vorherige Seite | Nächste Seite

Mit Hilfe des Designers besteht die Möglichkeit eine Grafische Bedienoberfläche für die Steuerung anzulegen mit Bedienelementen und Anzeigeelementen um die Logik auf verschiedensten Geräten über einen Browser oder die Android App bedienen zu können.


Auf der Startseite des Designers kann man auswählern ob ein neues Projekt erstellt oder ein vorhandenes Projekt bearbeitet werden soll.

Beim Erstellen eines neuen Objektes kommt zuerst die Projekt Options Seite zum Festlegen der Größe der grafischen Oberfläche und der Verbindungsdaten zur MCU.



Wenn die MCU Daten eingetragen sind kann man die vorhanden Ports aus der MCU auslesen um Sie dann später mit den Bedienelementen zu verknüpfen.


Nach dem öffnen eines Projektes erscheint die Menüleiste mit folgenden Dropdown Menüs und Icons.

Projekte Menü
  • Speichern dient zum Abspeichern des Projektes unter einem frei wählbaren Namen
  • Unter Einstellungen gelangt man wieder zum Projekte Options Fenster
  • Mit Hilfe von Download Portlist können die Ports erneut aus der MCU ausgelesen werden
  • An MCU übertragen speichert das Projekt auf der MCU von wo es dann per App oder Browser abgerufen werden kann.
  • Am lokalen Rechner testen dient zum Ausprobieren des Projektes ohne es an die MCU übertragen zu müssen
  • Schließen beendet den Designer
Seiten Menü
  • Mit Hinzufügen wird eine zusätzliche neue leere Seite angelegt
  • Durch Umbenennen kann die angelegte Seite bezeichnet werden
  • Mit Duplizieren lässt sich die aktuelle Seite kopieren und als neue Seite einfügen.
  • Wennman Löschen drückt wird die aktuelle Seite komplatt gelöscht
  • Mit Hilfe von Hintergrundbild lässt sich eine Grafik als Seitenhintergrund hinterlegen oder löschen. Jede Seite kann eine eigene Grafik als Hintergrundbild erhalten.

Das Ansicht Menü
  • Im Raster Menü hat man die Möglichkeit ein Raster ein oder auzublenden um die Bedienelemente besser anordnen zu können

Die Bedienungs-Icons


  • Elemente aus der Zwischenablage einfügen
  • Markierte Elemente in die Zwischenablage Kopieren
  • Markierte Elemente löschen
  • Markierte Elemente aus dem Projekt entfernen und in die Zwischenablage kopieren
  • Markierte Elemente nach Links ausrichten
  • Markierte Elemente om oberen Element ausrichten
  • Markierte Elemente am Raster ausrichten
  • Mit den Lupen kann der Zoomfaktor eingestellt werden

Folgende Knöpfe und Anzeigeelemente stehen für die Benutzeroberfläche zur Verfügung


Bild
  • Mit diesem Icon kann man eine Grafik in der Bedienoberfläche anzeigen und die Position und Größe einstellen.
  • Mit Hilfe des Iconfeldes wird die anzuzeigende Grafik ausgewählt


Statusbild
  • Mit dem Statusbild kann der Zustand eines Port mit verschiedenen Grafiken hinterlegt werden.
  • Mit Hilfe der Auswahlfelder können die einzelnen Grafiken ausgewählt und der Port der dargestellt wird festgelegt werden


Knopf
  • Mit diesem Icon kann man einen Knopf in der Bedienoberfläche generieren und die Position und Größe einstellen.
  • Mit Hilfe des Iconfeldes wird die anzuzeigende Grafik ausgewählt
  • Mit dem Portfeld wird dem Knopf ein Port in der Logik zugeordnet der später beim Betätigen gesetzt werden soll.


Status Knopf
  • Mit dem Statusknopf kann der Zustand eines Port mit verschiedenen Grafiken hinterlegt und gesetzt werden.
  • Mit Hilfe der Auswahlfelder können die einzelnen Grafiken ausgewählt und der Port, dessen Zustand dargestellt wird, festgelegt werden


Text
  • Mit dem Textfeld können Beschriftungen in der Logik eingefügt werden.
  • Dem Text kann eine gewünschte Schriftgröße und Schriftfarbe zugewiesen werden


Status Text
  • Der Statustext kann seinen Zustand entsprechend dem gewählten Port in der Logik ändern.
  • Dem Text kann eine gewünschte Schriftgröße und Schriftfarbe zugewiesen werden
  • Der gewünschte Port muss im Portfeld zugeordnet werden


Analog Text
  • Mit Hilfe von Analog Text kann ein analoger Wert aus der Logik in einem Feld angezeigt werden
  • Dem Wert kann eine gewünschte Schriftgröße und Schriftfarbe zugewiesen werden
  • Zusätzlich besteht die Möglichkeit die Vor-und Nachkommastellen auf eine bestimmte Anzahl einzustellen
  • Der gewünschte Port muss im Portfeld zugeordnet werden


Seitenwechsel
  • Mit diesem Feld kann ein Seitenwechsel Feld erzeugt werden das beim Betätigen zu einer bestimmten Unterseite springt.
  • Man kann dem Feld eine Symbolgrafik zuordnen
  • Im Seitenwechsel-Auswahlfenster kann man die Gewünschte Seite auswählen zu der gesprungen werden soll.


Einen Slider erstellen
  • Mit diesem Feld kann ein analoger Slider erstellt werden
  • Mit Hilfe der Auswahlfelder können die einzelnen Grafiken ausgewählt und der Port, dessen Zustand dargestellt wird, festgelegt werden
  • Die Ausrichtung des Sliders kann zusätzlich eingestellt werden.


HTTP Grafik Aufruf
  • Mit diesem Feld kann eine HTTP Grafik angezeigt werden.
  • Im unteren Feld wird die URL des anzuzeigenden Bildes eingetragen. (z.B. das Bild einer Überwachungskamera)
  • Es kann ein Update Intevall eingestellt werden um das Bild immer wieder neu aufzurufen. Je schneller der Intervall gewählt wird um so mehr wird der Prozessor des Systemes belastet und auch die benötigte Datenmenge steigt stark an.
Seite 18 / 20


Vorherige Seite | Nächste Seite