Text Widget

Text Widget

The Text widget displays a string of text with single style. The string might break across multiple lines or might all be displayed on the same line depending on the layout constraints.

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 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.

Der Text der dargestellt wird. Klickt man auf einen Bereich der nicht blau hinterlegt ist kann man den Text direkt eingeben. Klickt man auf den blau hinterlegten Bereich kann eine SPS Variable mit dem Widget verknüpft werden, welche zyklisch aktualisiert wird.

Die Farbe in der der Text 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 der Text 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.

Der Font Typ der für die Darstellung des Textes verwendet werden soll.

Die Font Stärke in der der Text dargestellt werden soll. Normal, Bold und weitere 9 Gewichtungen sind hier auswählbar.

Der Font Style des dargestellten Textes.

Die Ausrichtung des Textes. Die Ausrichtung wird erst relevant wenn die Eigenschaften Width  und/oder Height festgelegt sind. Der Text kann jeweils links, mittig, rechts oben oder untern ausgerichtet sein. Setzt man Width und Height auf 0 hat diese Eigenschaft keine Funktion, bzw. die Auswirkung ist nicht sichtbar.

Gibt die Breite des Widgets an. Diese kann fest angegeben werden. Der Text bleibt innerhalb dieser Breite und wird umgebrochen, bzw. gekürzt, je nach Einstellung der Eigenschaft textoverflow. Setzt man width auf 0, nimmt das Widget exakt die Textbreite ein. align und textoverflow zeigen dann keine Wirkung.

Gibt die Höhe des Widgets an. Diese kann fest angegeben werden. Der Text bleibt innerhalb dieser Höhe. Setzt man height auf 0, nimmt das Widget exakt die Texthöhe ein. Ob ein Zeilenumbruch erfolgt ist abhängig von der Eigenschaft textoverflow.

Gibt das Verhalten des Textes an wenn dieser bei vorgegebener Breite width nicht passt.

clip: Bricht den Text um. Es sind mehrere Textzeilen sichtbar.

ellipsis: Bricht den Text ab und stellt drei Punkte an das Ende des Texts.

fade: Bricht den Text ab und stellt den letzen Buchstaben mit Opazität dar.

Image Widget

Image Widget

Dient zur Darstellung eines Bildes. 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.

Hierüber lässt sich das Bild auswählen das im Widget dargestellt wird. Bilder müssen vorab hochgeladen werden. Dies erfolgt über den Webserver der notion#app. Dieser ist über Port 8000 erreichbar, d.h. ipadressedestablet:8000.

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.

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.

Widget Template

Widget Template

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.

Input Widget

Input Widget

Das Input Widget dient zur Eingabe von Informationen in das Visualisierungssystem notion#app. Die Daten werden über Variablen in die SPS abgebildet.

Neben den allgemeinen Form-Angaben wie Größe, Länge, Breite etc. bietet das Input Widget Formatbeschränkungen, Formatvorschläge und das passende Tastaturlayout dazu, sowie Hilfetexte, Eingabetextvorschläge oder Feldbeschreibungen. Alle Felder sind mit Variablen verknüpfbar, sodass in Verbindung mit der SPS dynamische Felder definiert werden können.

 

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 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.

Den Wert den die Eingabe manipuliert. Verknüpft man diesen mit einer SPS Variablen, durch einen Klick auf den blau hinterlegten Bereich, kann diese geschrieben werden. Es wird der Inhalt der Variablen dargestellt und verändert. Die Übernahme der Daten erfolgt erst nach Betätigung der Enter Taste.

Wichtig! Das schreiben der Daten erfolgt nur im Run Mode, nicht im Edit Mode.

Die Farbe in der der Text 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.

Width beschreibt die Breite des Widgets in Pixeln, also der Breite des Eingabefeldes in welchem die Eingabe getätigt wird.

Height beschreibt die Höhe des Widgets in Pixeln, also der Höhe des Eingabefeldes in welchem die Eingabe getätigt wird.

maxLeegth gibt die maximale Anzahl von Eingabe-Zeichen des Widgets an, also die Menge der Zeichen welche im Eingabefeld getätigt werden können.

Mit labelText gibst Du einen beschreibenden Zusatztext für das Eingabefeld an.

Die Font Größe in der der Text 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.

Auswahl eines zum Datentyp der Eingabe passendes Layout der Bildschirmtastatur. Angeboten werden z.B. Zahl, Datum/Uhrzeit, e-mail Adresse, Text, URL usw.

Die Eingabe eines Textvorschlages oder eine Eingabehilfe eines gewünschten Eingabformates wird mit hintText gemacht. Diese erscheint untergeordnet im Eingabefeld und verschwindet mit Beginn der Eingabe.