Anzeigen

Objekte, die etwas zeigen und nichts schalten.

Text

Text, den du selbst schreibst, etwa eine Überschrift oder eine Beschriftung. Er kann Werte aus dem Van enthalten, siehe Platzhalter.

• Text: der Text.
• Text style und Bold, oder auf älteren Geräten Font: wie gross und in welcher Schrift, siehe Stile.
• Align: die Ausrichtung.
• Colour: Textfarbe, Hintergrund und Rahmen. Hintergrund und Rahmen können durchsichtig sein.

Die Höhe richtet sich nach der Schrift. Für einen grösseren Text wählst du einen grösseren Stil.

Stile

Du wählst für einen Text keine Schrift, sondern einen Stil:

Stil	wofür
Caption	der kleinste Text, nebenher: eine Einheit, ein Hinweis, eine Uhrzeit
Label	der gewöhnliche Text, der etwas benennt, etwa «Frischwasser»
Title	eine Überschrift, für einen Screen oder einen Abschnitt
Display	ein grosser Wert, etwa «21.5»

Jeder Stil hat eine feste Grösse in Millimetern. Ein Label ist auf dem kleinen Knob gleich gross wie auf dem 4.3B, der 4.3B hat einfach mehr Platz. Welche Schrift ein Stil bekommt, legt das Gerät fest, der Designer wählt nur die passende Grösse dazu. Mit Bold wird der Text fett, sofern das Gerät die Schrift in fett hat.

Ein Gerät kann mehrere Typografien mitbringen, jede mit eigenen Schriften für die vier Stile. Knob, 4.3B und PaperS3 haben drei:

Typografie	Schriften
«Standard»	Helvetica, Display in FreeUniversal
«Humanist»	Lucida Sans, Display in FreeUniversal
«Technic»	Lucida Sans, Title in Logisoso, Display in Sieben-Segment-Ziffern

«Technic» auf dem 4.3B

Das Display von «Technic» sieht aus wie eine alte Digitalanzeige. Ziffern stehen darin sauber, Buchstaben nur so weit, wie sieben Striche sie hergeben: ein «M» oder «W» ist kaum zu lesen. Nimm Display in «Technic» deshalb für Zahlen. Die Typografie wählst du wie das Theme für einen Master oder einen Screen, unter Look › Typography, siehe Die Eigenschaften eines Screens.

Neue Objekte beginnen im Stil Label. Nur der Wert in der Mitte von Gauge und Dial beginnt in Display, weil er dort allein steht.

Ein Text aus der Zeit vor den Stilen zeigt unter Text style «Custom» und die Schrift, in der er steht. Er bleibt so, bis du einen Stil wählst. Der Knopf «Snap to …» setzt ihn auf den Stil, der seiner Grösse am nächsten kommt.

Geräte, die ihre Grösse in Millimetern noch nicht angeben, zeigen stattdessen wie bisher Font mit den Schriften des Geräts.

Platzhalter

Ein Platzhalter steht in geschweiften Klammern, und das Gerät setzt dort einen Wert ein. Aus Frischwasser {topic:schaltli/state/tank/1/level:F0} % wird auf dem Display «Frischwasser 72 %», und die Zahl folgt dem Tank. Platzhalter gehen nur im Text.

Platzhalter	zeigt
{topic:…}	den letzten Wert des Topics. Bei einem JSON-Topic wählst du mit # ein Feld, etwa {topic:van/klima#temp}.
{device:model}	das Modell des Geräts, etwa «Waveshare Knob-Touch LCD 1.8», auf dem Handy dessen Verkaufsname wie «HUAWEI P20 Pro»
{device:id}	die Kennung des Geräts, mit der es sich am Broker meldet, etwa «waveshare-knob-1v8-c00f1e13cfd0»
{project:name}	den Namen des Projekts. Er wird beim Übertragen fest eingesetzt.

Auswählen statt tippen: Sobald du { tippst, klappt eine Liste auf. Sie zeigt die Topics des Projekts, jeweils mit Typ und erstem Beispielwert, und darunter die Felder von Gerät und Projekt. Was du weitertippst, filtert die Liste. Gesucht wird im Pfad und im Beispielwert, frisch findet also auch das Topic mit dem Beispiel «Frischwasser». Mit den Pfeiltasten wählst du aus, Enter oder Tab setzt den Platzhalter samt schliessender Klammer ein. Der Cursor steht danach vor dem }. Tippst du dort :, bietet die Liste die gängigen Formate an, mit einer Vorschau am Beispielwert: F1 wird etwa zu 72.0. Esc schliesst die Liste. Hast du einen Platzhalter von Hand geändert, holt Ctrl+Space sie zurück, solange der Cursor zwischen den Klammern steht.

Zahlen formatieren: Ein Zusatz hinter dem Topic bestimmt, wie eine Zahl erscheint. :F2 gibt zwei Nachkommastellen, :N0 eine ganze Zahl mit Tausendertrennzeichen. Möglich sind F0 bis F9 und N0 bis N9. Gerundet wird kaufmännisch, 72.5 wird bei :F0 also zu 73. Welches Zeichen vor den Nachkommastellen steht und welches die Tausender trennt, stellst du unter Settings › Project Properties › Number format ein, siehe Projekteinstellungen. Ohne Zusatz zeigt das Gerät den Wert genau so, wie er ankommt.

Bevor ein Wert da ist: Nach dem Einschalten dauert es einen Moment, bis die Werte ankommen. Mit ?? gibst du an, was solange dasteht: {topic:…/name ?? "Frischwasser"} oder {topic:… ?? 0:F1}. Ohne ?? bleibt die Stelle leer.

Klammern als Zeichen schreibst du doppelt, {{ und }}.

Einen Platzhalter, den der Designer nicht versteht, etwa wegen eines Tippfehlers, zeigt das Gerät genau so, wie du ihn geschrieben hast. Das siehst du schon im Designer: Unter dem Feld steht dann eine rote Zeile, die den Grund nennt. Eine gelbe Zeile bedeutet, dass ein Topic im Projekt noch fehlt. Der Designer trägt es ein, sobald du das Feld verlässt, und die Zeile verschwindet. Ist alles in Ordnung, steht dort ein kurzer Hinweis zu { und ??.

Ältere Firmware

Knob, 4.3B, PaperS3 und die Android-App setzen Platzhalter ab Systemgeneration 1.2 ein. Mit älterer Firmware oder einer älteren App steht der Text so auf dem Display, wie du ihn geschrieben hast, Klammern inklusive. Überträgst du auf ein solches Gerät, warnt der Designer. Abhilfe schafft ein Firmware-Update oder eine neue App. Das auslaufende E-Paper-Display lernt Platzhalter nicht mehr.

Live Text

Zeigt den Wert eines Topics als Text, etwa eine Temperatur oder einen Strom.

• Topic unter Data: woher der Wert kommt. Bei einem JSON-Topic wählst du das Feld dazu.
• Show as:
  • As it arrives zeigt den Wert, wie er ankommt, Text oder Zahl.
  • Formatted number formatiert eine Zahl. Dazu gehören Prefix / suffix vor und nach der Zahl, etwa «°C» oder «%», Decimals für die Nachkommastellen und Thousands für das Tausender-Trennzeichen, etwa «'».
• Text style und Bold (oder Font), Align und Colour wie beim Text.

Kommt bei Formatted number etwas an, das keine Zahl ist, zeigt Live Text es unverändert, ohne Präfix und Suffix. Solange noch kein Wert da ist, zeigt Live Text gar nichts, auch kein Präfix.

Icon

Ein Bild aus der Icon-Sammlung des Projekts, immer quadratisch.

• Icon: welches. Die Icons selbst verwaltest du unter Settings › Assets, siehe Icons und Schriften.
• Colour: die Farbe des Icons und der Hintergrund, der anfangs durchsichtig ist.
• Size: wie gross das Icon ist, in vier Stufen, XS, S, M und L (3, 4, 6 und 9 mm), wie beim Bar. Auf älteren Geräten fehlt das Feld.

In Pixeln stellst du die Grösse unter Frame als Width ein, die Höhe folgt.

Live Icon

Zeigt eines von mehreren Icons, je nach Wert eines Topics: eine leere oder volle Batterie, eine Lampe an oder aus.

• Topic: woher der Wert kommt.
• Rules: eine Liste von Regeln der Form If value … Then …, zum Beispiel «wenn Wert > 80, dann Icon Batterie voll». Die Regeln werden von oben gelesen, die erste passende bestimmt das Icon. Passt keine, zeigt Live Icon nichts. Add rule fügt eine Regel hinzu. Wie Vergleiche funktionieren, steht unter Bedingungen.
• Colour: eine Farbe für alle Icons, und der Hintergrund.
• Size: wie beim Icon.

Bar

Ein Balken, der einen Füllstand zeigt: Tank, Batterie, Auslastung. Ablesen, nicht einstellen; dafür gibt es den Slider. Ein Baustein aus einem Messwert in Prozent setzt einen Bar und darüber einen Text mit seinem Namen.

Einen eigenen Namen oder ein Icon hat der Bar nicht. Soll dabeistehen, was er anzeigt, setzt du einen Text oder ein Icon neben den Balken. Fasst du beides zu einer Gruppe zusammen, bleibt es beim Verschieben beisammen. Der Text kann Platzhalter enthalten, etwa den Namen, den dein Van dem Tank gibt.

• Show value: am Ende des Balkens nichts (None), den Wert (Value) oder den Füllstand in Prozent (Percentage). Bei einem waagrechten Balken steht die Zahl rechts, bei einem senkrechten darunter.
• Text style und Bold (oder Font): wie gross die Zahl steht, siehe Stile.
• Topic: der gemessene Wert.
• Direction: in welche Richtung sich der Balken füllt.
• Size: wie dick der Balken ist, in vier Stufen, XS, S, M und L (1.15, 1.7, 2.9 und 4.6 mm, auf dem 4.3B 10, 15, 25 und 40 Pixel). Bar, Slider, Gauge und Dial haben dieselben Stufen, ihre Balken und Ringe sind also gleich dick. Beim Slider steht der Anfasser über den Balken hinaus. Ein neuer Bar beginnt in M. Passt die Dicke zu keiner Stufe, etwa bei einem Balken aus der Zeit vor den Stufen, steht «Custom» mit der Dicke in Pixeln da, und «Snap to …» setzt ihn auf die nächste Stufe. Auf älteren Geräten fehlt das Feld.
• Thickness: wie dick der Balken ist, in Pixeln. Das Objekt kann grösser sein, der Balken steht dann in seiner Mitte. Tippst du hier eine Zahl ein, gilt keine Stufe mehr.

Hat ein Bar eine Stufe, ziehst du ihn auf dem Screen nur noch in der Länge. Dicker oder dünner wird er über Size.

• Setpoint topic: ein Sollwert, den die Anlage meldet. Ein kleines Dreieck unter dem Balken zeigt auf ihn, bei einem senkrechten Balken steht es rechts daneben. Einen Anfasser wie der Slider hat der Bar nicht: Verschieben lässt er sich nicht.
• Calibration: welcher Wert welchem Füllstand entspricht, siehe Kalibrierung. Ohne eigene Punkte ist 0 leer und 100 voll.
• Colour: Fill ist die Farbe des gefüllten Teils, Track die des leeren, Track edge ein Rand darum. Track und Rand kommen aus dem Theme, bis du sie änderst. Mit der Rolle Accent läuft die Füllung in einem Verlauf, siehe Verlauf.

Ohne Wert zeigt der Bar nur den leeren Balken.

Gauge

Wie Bar, aber als Ring: ein Füllstand auf einem Kreisbogen, der Wert in der Mitte. Immer quadratisch.

• Show value, Text style, Topic, Setpoint topic, Calibration und Fill wie beim Bar. Das Dreieck für den Sollwert steht aussen am Ring und zeigt zur Mitte.
• Angles: wo der Bogen beginnt und endet, in Grad, 0 ist oben. Voreingestellt ist ein Dreiviertelkreis. Die Enden lassen sich auch auf dem Screen an ihren Anfassern ziehen.
• Direction: im oder gegen den Uhrzeigersinn.
• Size: wie dick der Ring ist, dieselben Stufen wie beim Bar. Den Durchmesser ziehst du auf dem Screen, in Pixeln steht er unter Frame als Diameter. Hat der Ring eine Stufe, springt der Durchmesser beim Ziehen um zwei Ringdicken. Zwei Ringe mit derselben Stufe lassen sich so genau ineinander setzen. In einer Tabelle gibt die Tabelle den Platz vor, den Durchmesser bestimmst du trotzdem selbst unter Diameter, höchstens so breit wie die Zelle.
• Thickness: wie breit der Ring ist, höchstens die Hälfte des Objekts.

Ohne Wert zeigt der Gauge nur den leeren Ring.