Vorsicht

Dies ist die Dokumentation des aktuellen Entwicklungszweigs der CometVisu. Es besteht daher die Möglichkeit, dass einige der hier beschriebenen Features mit dem aktuellsten Release der CometVisu nicht genutzt werden können.

Das Switch Widget

Autor: Tobias Bräutigam
Verfügbar seit: 2022

Beschreibung

Das Switch Widget fügt der Visualisierung eine Schaltfläche hinzu. Mit dieser können z.B. Ein/Aus Schalter realisiert werden. Das Verhalten des Schalters kann über den Modus der hinzugefügten Adressen gesteuert werden. Das normale Verhalten beinhaltet einen Wechsel zwischen 2 Zuständen (an / aus). Ein Klick auf den Schalter löst einen Wechsel zwischen diesen Zuständen aus, es wird also immer der Wert gesendet, der gerade nicht aktiv ist.

Das Switch-Widget besteht aus einem zentrierten Button mit optionalen Titel und Untertitel darunter.

Der Schalter kann sich aber auch wie ein Trigger verhalten, d.h. er wechselt nicht zwischen Zuständen sondern beim Klick auf den Schalter wird immer der selbe Wert gesendet.

Als dritte Variante kann sich der Schalter wie ein Taster verhalten und unterschiedliche Werte beim Drücken und beim Loslassen schicken. Anwendungsbeispiel für dieses Verhalten wäre z.B. ein Türöffner: Beim Klicken des Buttons wird der Türöffner eingeschaltet und beim Loslassen des Buttons wird der Türöffner wieder ausgeschaltet.

Schalter

Für den Schalter-Modus muss das Switch-Widget den aktuellen Zustand lesen und schreiben können, daher wird eine schreibende und eine lesende Adresse benötigt (kann auch die selbe sein). Bei jeden Klick wird zwischen den beiden Zuständen (an / aus) umgeschaltet.

../../../_images/cv-switch-off.png
../../../_images/cv-switch-on.png 
<cv-switch>
    <cv-address slot="address" transform="DPT:1.001">1/4/0</cv-address>
    <span slot="primaryLabel">Schalter</span>
    <span slot="secondaryLabel">Ein/Aus</span>
</cv-switch>

Trigger

Ein Trigger sendet immer den gleichen Wert zum Backend. Er muss daher den aktuellen Zustand nicht kennen und benötigt daher nur eine schreibende Adresse mit einem fixen Wert mode="write" value="1". Dieser Wert wird auch für das Mapping / Styling benutzt, sofern angegeben.

../../../_images/cv-trigger.png 
<cv-switch>
    <cv-address slot="address" transform="DPT:1.001" mode="write" value="1">1/4/0</cv-address>
    <span slot="primaryLabel">Trigger</span>
    <span slot="secondaryLabel">Sendet immer 1</span>
</cv-switch>

Taster

Ein Taster sendet unterschiedliche Werte beim Drücken und Loslassen des Buttons. Dazu benötigt man jeweils eine Adresse für jedes dieser Events (up bzw. down). Über das on Attribut einer Adresse kann man festlegen, bei welchem Event der Wert des value-Attributs gesendet wird. Eine <cv-address> mit mode="write" value="1" on="down" schickt also den Wert 1 beim Drücken des Buttons an das Backend und eine <cv-address> mit mode="write" value="0" on="up" schickt den Wert 0 beim Loslassen des Buttons.

../../../_images/cv-pushbutton.png 
<cv-switch>
    <cv-address slot="address" transform="DPT:1.001" mode="write" value="1" on="down">1/4/0</cv-address>
    <cv-address slot="address" transform="DPT:1.001" mode="write" value="0" on="up">1/4/0</cv-address>
    <cv-address slot="address" transform="DPT:1.001" mode="read">1/4/0</cv-address>
    <span slot="primaryLabel">Taster</span>
</cv-switch>

Fortschrittsanzeige

Das Switch-Widget bietet zusätzlich die Möglichkeit einen runden Fortschrittsbalken anzuzeigen. Ein möglicher Anwendungsfall hierfür wäre ein Switch mit dem man einen Musik-Player steuert und über den Fortschrittsbalken anzeigt wie viel vom aktuellen Lied schon abgespielt wurde (oder alternativ die Lautstärke des Players). Der Fortschrittsbalken dient hier aber nur der Information und kann selbst nicht bedient werden. Für den Fortschrittsbalken muss nur eine zusätzliches <cv-address slot="address" Element mit mode="read" und target="progress" hinzugefügt werden. Der Fortschrittsbalken kann Werte zwischen 0 und 100 darstellen.

../../../_images/cv-progress.png 
...
<cv-meta>
   <cv-mapping name="PlayStop">
        <entry value="0">ri-play-fill</entry>
        <entry value="1">ri-stop-fill</entry>
    </cv-mapping>
</cv-meta>
...
<cv-switch mapping="PlayStop">
    <cv-address slot="address" transform="DPT:1.001" value="1">1/4/0</cv-address>
    <cv-address slot="address" transform="DPT:5.001" mode="read" target="progress">1/4/1</cv-address>
    <span slot="primaryLabel">Player</span>
    <span slot="secondaryLabel"/>
</cv-switch>

Erlaubte Attribute im Switch-Element

Element

Attribut

Name

Inhalt

Beschreibung

cv-switch

styling

Text

Ändert die Farbe des angezeigten Wertes abhängig vom Wert selbst. Siehe auch Styling

mapping

Text

Ordnet den Werten vom Bus andere Werte, Texte oder Symbole zur Anzeige zu. Siehe auch Mapping

size

button, 0.5x0.5, 1x0.5, 1x1, 2x1, 2x1.5, 1x2, 2x2, 2x4 oder 4x2

Größe der Kachel in {Spalten}x{Zeilen}, 1x1 ist die Standardgröße.

button-size

small, normal oder large

Legt die Größe des Buttons fest.

progress-mapping

Text

Ordnet den Werten vom Bus einen Wert zwischen 0 und 100 zu, um einen Fortschritt anzeigen zu können. Siehe auch Mapping

whole-tile

true oder false

Erweitert den klickbaren Bereich auf die gesamte Kachel.

on-value

Text

Wert für den An-Zustand. Default ist „1“.

off-value

Text

Wert für den Aus-Zustand. Default ist „0“.

visible-on

mobile oder desktop

Steuert die Sichtbarkeit dieses Elements anhand der Bildschirmgröße.

class

Text

Füge dieses Attribut der CSS Klasse hinzu, so dass das Widget durch ein eigenes Stylesheet zusätzlich formatiert werden kann.

style

Text

Individuelle CSS style Regeln für dieses Widget.

Erlaubte Kind-Elemente und deren Attribute

Element

Attribut

Struktur

Name

Inhalt

Beschreibung
cv-switch

  • cv-address

slot

address oder tileAddress

transform

Text

Legt den Datentyp im Backend fest, z.B. DPT:1.001 für den KNX Datenpunkttyp 1.001.

mode

disable, read, write oder readwrite

Legt fest, ob auf dieser Adresse nur gelesen read, geschrieben write, beides readwrite oder nichts davon disable werden soll

value

Text

Fixer Wert welcher an diese Adresse gesendet wird.

on

click, down oder up

Event bei dem ein Wert and diese Adresse geschickt wird (nur in Verbindung mit value und mode=``read`` oder readwrite).

target

Text

Ziel innerhalb der Eltern-Widgets für das die Werte dieser Adresse benutzt werden sollen. Die möglichen Werte hängen vom Eltern-Widget ab.

format-pos

Zahl

Position für Format-String wenn mehrere Adressen gleichzeitig genutzt werden.

qos

Zahl

Nur MQTT: QoS

retain

true oder false

Nur MQTT: retain Flag

selector

Text

Nur MQTT: JSON Selektor

backend

Text

Optionaler Name des Backends zu dem diese Adresse gehört.

mapping

Text

Ordnet den Werten vom Bus andere Werte, Texte oder Symbole zur Anzeige zu. Siehe auch Mapping

format

Text

Formatierung des Wertes (printf-Syntax).

delay

positiveInteger

Optionales delay in Millisekunden, um welches das Schreiben an diese Adresse verzögert wird.

send-mode

on-change oder always

Normalerweise bekommen Elemente, die diese Adresse benutzen nur eine Update-Benachrichtigung, wenn sich der Wert tatsächlich geändert hat (on-change). Mit always wird diese Überprüfung umgangen und die Update-Benachrichtigung jedes Mal geschickt, wenn ein neuer Wert vom Backend empfangen wurde.

Element

Attribut

Struktur

Name

Inhalt

Beschreibung
cv-switch

  • cv-icon

size

small, large, x-large, xx-large oder xxx-large

Legt die Größe des Icons fest.

color

Text

Farbe des Icons.

visible-on

mobile oder desktop

Steuert die Sichtbarkeit dieses Elements anhand der Bildschirmgröße.

class

Text

Füge dieses Attribut der CSS Klasse hinzu, so dass das Widget durch ein eigenes Stylesheet zusätzlich formatiert werden kann.

style

Text

Individuelle CSS style Regeln für dieses Widget.
cv-switch

  • cv-icon

    • #text

Text

Element

Attribut

Struktur

Name

Inhalt

Beschreibung
cv-switch

  • span

slot

primaryLabel oder secondaryLabel

tr

true oder false

Legt fest, dass der Text-Inhalt dieses Elements übersetzt werden soll.
cv-switch

  • span

    • #text

Text