Decorated Container Widget

Decorated Container Widget

Das Decorated Container Widget bietet die Möglichkeit einen Schatteneffekt einzublenden und es ermöglicht erweiterte Funktionen beliebiger anderer Widgets. In einem Decorated Container Widget können weitere Widgets zu einer Gruppe zusammengefasst werden. Der Container kann Farben annehmen und als vergößerter Hintergrund dienen, formatierbare Abstände und Rahmen erhalten, und wie alle anderen Widgets in der Breite und Höhe eingestellt werden. Auch beim Decorated Container Widget sind alle Eigenschaften mit einer SPS Variablen verknüpfbar und damit automatisierbar.

 

Properties

Für alle Widget Properties gilt, dass diese direkt durch einen manuellen Wert beschrieben werden, oder wahlweise durch eine SPS Variable belegt werden können. Zur Verknüpfung einer Variable klickt man in den blau hinterlegten und mit “V” gekennzeichneten Bereich der Property.  Zur direkten Eingabe reicht ein Klick auf den nicht blau hinterlegten Bereich der Property.

Hierüber lässt sich das Grid nachdem das Widget ausgerichtet wird in Pixeln einstellen. Die Einstellung eines gröberen Rasters vereinfacht oft die Platzierung bzw. die Ausrichtung der Widgets zueinander. Das Widget lässt sich nur in diesem Raster auf dem Bildschirm verschieben.

Der Offset bestimmt den Abstand des Widgets in X und Y Richtung zum Nullpunkt des Parent Widgets (oben, links). Bei 0, 0 liegt die obere linke Kante des Widgets exakt auf der oberen linken Kante des Parent. Über diesen Parameter lassen sich Widgets positionieren.

Show schaltet das Widgets sichtbar oder unsichtbar. Der Parameter kann wie alle anderen Widget Parameter einer SPS Variablen zugeordnet werden. Der Wert 0 schaltet das Widget unsichtbar, alle anderen Werte ungleich 0 schalten es sichtbar.

Flex vergibt dem Decorated Container Widget eine Wertigkeit, wenn es in einem relativen Layout Widget verwendet wird. Die Wertigkeit bestimmt wie viel Platz dem Widget relativ zu den anderen Widgets im Layout zugesprochen wird. Mehr zu relativen Layouts.

Witdth gibt die Breite des Decorated Container Widgets an. Diese kann fest angegeben werden. Der Inhalt des Containers bleibt innerhalb dieser Breite und wird nicht verzerrt.

Hight gibt die Höhe des Decorated Container Widgets an. Diese kann fest angegeben werden. Der Inhalt bleibt innerhalb dieser Höhe und wird nicht verzerrt.

Paddding gibt den Abstand zwischen einem Element innerhalb des Decorated Containers und dem Container-Rand an. Die Einheit ist in Pixel.

Die Hintergrundfarbe in welcher das Decorated Container Widget dargestellt wird. Zusätzlich kann zur Farbe auch eine Opacity (Transparenzwert) angegeben werden. Der Wert kann Hexadezimal eingegeben, oder über die Farbpalette ausgewählt werden. Der Farbwert ist ein 32-Bit Wert im Aufbau 0xAARRGGBB. A steht für die Opacity, und RGB für die Rot, Grün, Blau Wert, jeweils von 0 .. 255.

borderColor – die Farbe in welcher der Rahmen des Decorated Container Widget dargestellt wird. Zusätzlich kann zur Farbe auch eine Opacity (Transparenzwert) angegeben werden. Der Wert kann Hexadezimal eingegeben, oder über die Farbpalette ausgewählt werden. Der Farbwert ist ein 32-Bit Wert im Aufbau 0xAARRGGBB. A steht für die Opacity, und RGB für die Rot, Grün, Blau Wert, jeweils von 0 .. 255.

Mit borderWidth wird die Randbreite des Decorated Container Widgets eingestellt in der Einheit Pixel.

Mit borderRadius wird der Eckradius des Decorated Container Widgets eingestellt in der Einheit Pixel.

shadowColor – die Farbe in welcher der Schatten des Decorated Container Widget dargestellt wird. Zusätzlich kann zur Farbe auch eine Opacity (Transparenzwert) angegeben werden. Der Wert kann Hexadezimal eingegeben, oder über die Farbpalette ausgewählt werden. Der Farbwert ist ein 32-Bit Wert im Aufbau 0xAARRGGBB. A steht für die Opacity, und RGB für die Rot, Grün, Blau Wert, jeweils von 0 .. 255.

Mit blurRadius wird der Schattenverlauf des Decorated Container Widgets eingestellt in der Einheit Pixel.

Mit blurOffset wird Abstand des Schattens zum Decorated Container Widgets eingestellt in der Einheit Pixel.

Animated Container Widget

Animated Container Widget

Das ist ein Widgets Template, in diesem Bereich wird das Widget allgemein beschrieben.

Properties

Für alle Widget Properties gilt das diese direkt beschrieben werden, oder wahlweise durch eine SPS Variable belegt werden können. Zur Verknüpfung einer Variable klickt man in den blau hinterlegten Bereich der Property.  Zur direkten Eingabe reicht ein Klick auf den nicht blau hinterlegten Bereich der Property.

Hierüber lässt sich das Grid nachdem das Text Widget ausgerichtet wird in Pixeln einstellen. Die Einstellung eines gröberen Rasters vereinfacht oft die Platzierung bzw. die Ausrichtung der Widgets zueinander. Das Widget lässt sich nur in diesem Raster auf dem Bildschirm verschieben.

Der Offset bestimmt den Abstand des Widgets in X und Y Richtung zum Nullpunkt des Parent Widgets (oben, links). Bei 0, 0 liegt die obere linke Kante des Widgets exakt auf der oberen linken Kante des Parent. Über diesen Parameter lassen sich Widgets positionieren.

Show schaltet das Widgets sichtbar oder unsichtbar. Der Parameter kann wie alle anderen Widget Parameter einer SPS Variablen zugeordnet werden. Der Wert 0 schaltet das Widget unsichtbar, alle anderen Werte ungleich 0 schalten es sichtbar.

Flex vergibt dem Widget eine Wertigkeit, wenn es in einem relativen Layout Widget verwendet wird. Die Wertigkeit bestimmt wie viel Platz dem Widget relativ zu den anderen Widgets im Layout zugesprochen wird. Mehr zu relativen Layouts.

Image Swap Widget

Image Swap Widget

Dient zur Darstellung eine durch die SPSP kontrollierbaren Bildseqeunz. Eine Bildsequenz ist eine Menge von Bildern welche einem Image Widget zugeordnet sind. Angezeigt wird das mit einem Index ausgewählte Bild. Alternativ könnte es Bilder-Liste genannt werden. Erlaubte Formate sind PNG und JPG. Bilder müssen vorab in die notion#app geladen werden. Hierzu ruft man die Webseite der notion#app über Port 8080 auf. Lautet die IP Adresse des notion Tablet beispielsweise 192.168.178.31 gibt man in einem Browser folgende IP ein: 192.168.178.31:8080. Weitere Informationen zum Upload von Bildern findest du im Tutorial: “Wie Bilder geladen werden”

Beim Hochladen der Bilder bitte beachten, dass die Größe der Bilder Deinen Anforderungen entsprechen. Große Bilder mit großem Speicherbedarf werden zur Bedienzeit umgerechnet auf Deine gewünschte Größe.
Tipp: Bildgrößen vorab so reduzieren, damit sie Deinen Ansprüchen noch genügen. Alles darüber benötigt Speicherplatz und Rechenzeit an vielen Stellen.

Properties

Für alle Widget Properties gilt, dass diese direkt beschrieben werden, oder wahlweise durch eine SPS Variable belegt werden können. Zur Verknüpfung einer Variable klickt man in den blau hinterlegten Bereich der Property.  Zur direkten Eingabe reicht ein Klick auf den nicht blau hinterlegten Bereich der Property.

Hierüber lässt sich das Grid nachdem das Widget ausgerichtet wird in Pixeln einstellen. Die Einstellung eines gröberen Rasters vereinfacht oft die Platzierung bzw. die Ausrichtung der Widgets zueinander. Das Widget lässt sich nur in diesem Raster auf dem Bildschirm verschieben.

Der Offset bestimmt den Abstand des Widgets in X und Y Richtung zum Nullpunkt des Parent Widgets (oben, links). Bei 0, 0 liegt die obere linke Kante des Widgets exakt auf der oberen linken Kante des Parent. Über diesen Parameter lassen sich Widgets positionieren.

Show schaltet das Widgets sichtbar oder unsichtbar. Der Parameter kann wie alle anderen Widget Parameter einer SPS Variablen zugeordnet werden. Der Wert 0 schaltet das Widget unsichtbar, alle anderen Werte ungleich 0 schalten es sichtbar.

Flex vergibt dem Widget eine Wertigkeit, wenn es in einem relativen Layout Widget verwendet wird. Die Wertigkeit bestimmt wie viel Platz dem Widget relativ zu den anderen Widgets im Layout zugesprochen wird. Mehr zu relativen Layouts.

Gibt die Höhe des Widgets an. Diese kann fest angegeben werden. Das Bild bleibt innerhalb dieser Höhe und wird nicht verzerrt. Das Aspect Ratio des Bildes bleibt erhalten.

Gibt die Breite des Widgets an. Diese kann fest angegeben werden. Das Bild bleibt innerhalb dieser Breite und wird nicht verzerrt. Das Aspect Ratio des Bildes bleibt erhalten.

Hierüber lässt sich eine Bilderliste zusammenstellen welche im Widget dargestellt wird. Die Bilder erhalten einen fortlaufenden Index in der Reihenfolge in der die Bilder ausgewählt wurden. Die Auswahl erfolgt durch das anwählen des angezeigten Bildes, dabei ändert sich die Rahmenfarbe des Bildes. Bilder müssen vorab hochgeladen werden. Dies erfolgt über den Webserver der notion#app. Dieser ist über Port 8080 erreichbar, d.h. ipadressedestablet:8080.

Der ImageIndex kann mit einer SPS-Variablen verknüpft oder manuel fest eingetragen werden. Der Index greift auf das in der ImageList angelegte und zugeordnete Bild zu welches im Widget dargestellt wird. Bilder müssen vorab hochgeladen werden. Dies erfolgt über den Webserver der notion#app. Dieser ist über Port 8080 erreichbar, d.h. ipadressedestablet:8080.

Im Darstellungsbereich des ImageIndex wird ImageList mit Index angezeigt. Soll die Reihenfolge geändert werden, klickst Du auf das Bild und aktivierst es dadurch, mit Up und Down verschiebst Du das gewählte Bild in der Liste, die Indexfolge der Liste wird neu aufgebaut.

Container Widget

Container Widget

Das Container Widget ermöglicht erweiterte Funktionen beliebiger anderer Widgets. In einem Container Widget können weitere Widgets zu einer Gruppe zusammengefasst werden. Der Container kann Farben annehmen und als vergößerter Hintergrund dienen, formatierbare Abstände und Rahmen erhalten, und wie alle anderen Widgets in der Breite und Höhe eingestellt werden. Auch beim Container Widget sind alle Eigenschaften mit einer SPS Variablen verknüpfbar und damit automatisierbar.

 

Properties

Für alle Widget Properties gilt, dass diese direkt durch einen manuellen Wert beschrieben werden, oder wahlweise durch eine SPS Variable belegt werden können. Zur Verknüpfung einer Variable klickt man in den blau hinterlegten und mit “V” gekennzeichneten Bereich der Property.  Zur direkten Eingabe reicht ein Klick auf den nicht blau hinterlegten Bereich der Property.

Hierüber lässt sich das Grid nachdem das Widget ausgerichtet wird in Pixeln einstellen. Die Einstellung eines gröberen Rasters vereinfacht oft die Platzierung bzw. die Ausrichtung der Widgets zueinander. Das Widget lässt sich nur in diesem Raster auf dem Bildschirm verschieben.

Der Offset bestimmt den Abstand des Widgets in X und Y Richtung zum Nullpunkt des Parent Widgets (oben, links). Bei 0, 0 liegt die obere linke Kante des Widgets exakt auf der oberen linken Kante des Parent. Über diesen Parameter lassen sich Widgets positionieren.

Show schaltet das Widgets sichtbar oder unsichtbar. Der Parameter kann wie alle anderen Widget Parameter einer SPS Variablen zugeordnet werden. Der Wert 0 schaltet das Widget unsichtbar, alle anderen Werte ungleich 0 schalten es sichtbar.

Flex vergibt dem Widget eine Wertigkeit, wenn es in einem relativen Layout Widget verwendet wird. Die Wertigkeit bestimmt wie viel Platz dem Widget relativ zu den anderen Widgets im Layout zugesprochen wird. Mehr zu relativen Layouts.

Witdth gibt die Breite des Widgets an. Diese kann fest angegeben werden. Der Inhalt des Containers bleibt innerhalb dieser Breite und wird nicht verzerrt.

Hight gibt die Höhe des Container Widgets an. Diese kann fest angegeben werden. Der Inhalt bleibt innerhalb dieser Höhe und wird nicht verzerrt.

Paddding gibt den Abstand zwischen einem Element innerhalb des Containers und dem Container-Rand an. Die Einheit ist in Pixel.

Die Hintergrundfarbe in der das Container Widget dargestellt wird. Zusätzlich kann zur Farbe auch eine Opacity (Transparenzwert) angegeben werden. Der Wert kann Hexadezimal eingegeben, oder über die Farbpalette ausgewählt werden. Der Farbwert ist ein 32-Bit Wert im Aufbau 0xAARRGGBB. A steht für die Opacity, und RGB für die Rot, Grün, Blau Wert, jeweils von 0 .. 255.

borderColor – die Farbe in welcher der Rahmen des Container Widget dargestellt wird. Zusätzlich kann zur Farbe auch eine Opacity (Transparenzwert) angegeben werden. Der Wert kann Hexadezimal eingegeben, oder über die Farbpalette ausgewählt werden. Der Farbwert ist ein 32-Bit Wert im Aufbau 0xAARRGGBB. A steht für die Opacity, und RGB für die Rot, Grün, Blau Wert, jeweils von 0 .. 255.

Mit borderWidth wird die Randbreite des Container Widgets eingestellt in der Einheit Pixel.

Mit borderRadius wird der Eckradius des Container Widgets eingestellt in der Einheit Pixel.

Icon Widget

Icon Widget

Fügt ein Icon in die UI ein. Ein Icon ist ein vordefiniertes Symbol das sich ähnlich einem Text verhält. Es kann in der Größe und Farbe angepasst werden. Die Größe kann dabei fest in Pixeln vorgegeben oder alternativ im Veränderungsmodus (Grün) angepasst werden.

Properties

Für alle Widget Properties gilt das diese direkt beschrieben werden, oder wahlweise durch eine SPS Variable belegt werden können. Zur Verknüpfung einer Variable klickt man in den blau hinterlegten Bereich der Property.  Zur direkten Eingabe reicht ein Klick auf den nicht blau hinterlegten Bereich der Property.

Hierüber lässt sich das Grid nachdem das Text Widget ausgerichtet wird in Pixeln einstellen. Die Einstellung eines gröberen Rasters vereinfacht oft die Platzierung bzw. die Ausrichtung der Widgets zueinander. Das Widget lässt sich nur in diesem Raster auf dem Bildschirm verschieben.

Der Offset bestimmt den Abstand des Widgets in X und Y Richtung zum Nullpunkt des Parent Widgets (oben, links). Bei 0, 0 liegt die obere linke Kante des Widgets exakt auf der oberen linken Kante des Parent. Über diesen Parameter lassen sich Widgets positionieren.

Show schaltet das Widgets sichtbar oder unsichtbar. Der Parameter kann wie alle anderen Widget Parameter einer SPS Variablen zugeordnet werden. Der Wert 0 schaltet das Widget unsichtbar, alle anderen Werte ungleich 0 schalten es sichtbar.

Flex vergibt dem Widget eine Wertigkeit, wenn es in einem relativen Layout Widget verwendet wird. Die Wertigkeit bestimmt wie viel Platz dem Widget relativ zu den anderen Widgets im Layout zugesprochen wird. Mehr zu relativen Layouts.

Hier kann aus einer Liste vordefinierter Icons gewählt werden was dargestellt wird. Icons sind im Grunde Textsymbole, deren Größe durch die Eigenschaft fontSize festgelegt wird.

Die Farbe in der das Icon dargestellt wird. Zusätzlich kann zur Farbe auch eine Opacity (Transparenzwert) angegeben werden. Der Wert kann Hexadezimal eingegeben, oder über die Farbpalette ausgewählt werden. Der Farbwert ist ein 32-Bit Wert im Aufbau 0xAARRGGBB. A steht für die Opacity, und RGB für die Rot, Grün, Blau Wert, jeweils von 0 .. 255.

Die Font Größe in der das Icon dargestellt wird in Pixeln. Die Font Größe kann hier direkt eingegeben oder mit einer Variablen verknüpft werden. Alternativ kann die Font Größe auch im Veränderungsmodus (Grün) angepasst werden.

1 2 3