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.

Menu

Autor: Tobias Bräutigam

Verfügbar seit: 2022

Diese Komponente erzeugt ein Navigationsmenü aus einem Modell. Momentan sind folgenden Modelle verfügbar:

pages	Navigationsmenü aus Seitenstruktur
menuItems	Menü aus einzelnen Menü-Items

Navigationsmenü aus Seitenstruktur

Navigationsmenü aus Seitenstruktur

Menü auf kleinen Bildschirmen, geschlossen

Menü auf kleinen Bildschirmen, geöffnet

<header>
    <nav>
        <cv-menu model="pages"/>
    </nav>
</header>
<main>
    <cv-page id="eg" name="Erdgeschoss">
        <cv-page id="ez" name="Esszimmer"/>
        <cv-page id="wz" name="Wohnzimmer"/>
        <cv-page id="ku" name="Küche"/>
        <cv-page id="bad" name="Badezimmer"/>
    </cv-page>
     <cv-page id="og" name="Obergeschoss">
        <cv-page id="sz" name="Schlafzimmer"/>
        <cv-page id="kz1" name="Kinderzimmer 1"/>
        <cv-page id="kz2" name="Kinderzimmer 2"/>
        <cv-page id="badOg" name="Badezimmer"/>
    </cv-page>
</main>

Es gibt unterschiedliche Darstellungsarten des Menüs, die über das appearance-Attribut gesteuert werden. Die möglichen Werte sind

Darstellungsart	Erklärung
text	Standardeinstellung, Focus liegt auf dem Seitennamen, das Icon wird in der selben Größe neben den Namen angezeigt.
icons	Focus liegt auf dem Icon, großes Icon und kleinere Seitennamen darunter. Benötigt ein Icon für jede Seite auf der obersten Navigationsebene.
dock	Nur im <footer> möglich, Aussehen wie bei „icons“ jedoch wird das Menü in der Mitte über dem Seiteninhalt angezeigt.

Icons Darstellungsart

<header>
      <nav>
          <cv-menu model="pages" appearance="icons"/>
      </nav>
  </header>
  <main>
      <cv-page id="eg" name="Erdgeschoss" icon="knxuf-control_building_modern02_okg_eg">
          <cv-page id="ez" name="Esszimmer"/>
          <cv-page id="wz" name="Wohnzimmer"/>
          <cv-page id="ku" name="Küche"/>
          <cv-page id="bad" name="Badezimmer"/>
      </cv-page>
       <cv-page id="og" name="Obergeschoss" icon="knxuf-control_building_modern02_okg_og">
          <cv-page id="sz" name="Schlafzimmer"/>
          <cv-page id="kz1" name="Kinderzimmer 1"/>
          <cv-page id="kz2" name="Kinderzimmer 2"/>
          <cv-page id="badOg" name="Badezimmer"/>
      </cv-page>
  </main>

Dock Darstellungsart im Footer

<main>
      <cv-page id="eg" name="Erdgeschoss" icon="knxuf-control_building_modern02_okg_eg">
          <cv-page id="ez" name="Esszimmer"/>
          <cv-page id="wz" name="Wohnzimmer"/>
          <cv-page id="ku" name="Küche"/>
          <cv-page id="bad" name="Badezimmer"/>
      </cv-page>
       <cv-page id="og" name="Obergeschoss" icon="knxuf-control_building_modern02_okg_og">
          <cv-page id="sz" name="Schlafzimmer"/>
          <cv-page id="kz1" name="Kinderzimmer 1"/>
          <cv-page id="kz2" name="Kinderzimmer 2"/>
          <cv-page id="badOg" name="Badezimmer"/>
      </cv-page>
  </main>
  <footer>
      <nav>
          <cv-menu model="pages" appearance="dock"/>
      </nav>
  </footer>

Menü aus einzelnen Menü-Items

Das folgende Beispiel fügt einer Kachel ein Menü mit zwei Einträgen hinzu. Dies bietet die Möglichkeit zusätzliche Einstellungen in einer Kachel unterzubringen. Der erste Menü-Eintrag öffnet ein Popup (welches in diesem Beispiel nicht weiter definiert ist), der zweite fungiert als Schalter.

Kachel mit Menü-Button

Menü geöffnet

<cv-widget>
    <cv-tile>
        <cv-menu model="menuItems">
            <cv-menu-item name="Favoriten" action="popup" icon="ri-star-line">
                <cv-popup title="Favoriten" modal="true"/>
            </cv-menu-item>
            <cv-menu-item name="Stumm" action="toggleState" icon="ri-volume-mute-line">
                <cv-address transform="DPT:1.001" mode="readwrite">1/4/0</cv-address>
            </cv-menu-item>
        </cv-menu>
    </cv-tile>
</cv-widget>

Erlaubte Attribute

Element	Attribut
	Name	Inhalt	Beschreibung
cv-menu	model	pages oder menuItems	Datenmodell aus dem dieses Menü generiert wird.
	appearance	text, icons oder dock	Erscheinungsbild des Menüs.
	depth	integer	Tiefe des Menüs. Ein Wert von ‚-1‘ (default) bindet alle Seiten inkl. Unterseiten ein, ein Wert von ‚0‘ bindet nur die obersten Ebene ein usw.
	show-labels	true oder false	Steuert die Sichtbarkeit des Texts.

Erlaubte Kind-Elemente und deren Attribute

Element	Attribut
Struktur	Name	Inhalt	Beschreibung
cv-menu cv-menu-item	name	Text	Name des Menü-Eintrags.
	icon	Text	Icon des Menü-Eintrags.
	action	popup oder toggleState	Die Aktion die ausgeführt wird, wenn dieser Menu-Eintrag angeklickt wird.
cv-menu cv-menu-item cv-address	transform	Text	Umwandlung des Bus-System Wertes um angezeigt werden zu können.
	mode	disable, read, write oder readwrite	„disable“ deaktiviert die Kommunikation, bei „read“ wird nur vom Backend gelesen, bei „write“ wird nur geschrieben und „readwrite“ wird die Adresse zum Lesen und zum Schreiben verwendet.
	variant	Text
	format-pos	Zahl	Position für Format-String wenn mehrere Adressen gleichzeitig genutzt werden.
	selector	Text	Nur MQTT: JSON Selektor
	qos	Zahl	Nur MQTT: QoS
	retain	true oder false	Nur MQTT: retain Flag
	ignore-error	true oder false	Nur MQTT: ignoriere Dekodierfehler.
cv-menu cv-menu-item cv-address #text		Text	Die Gruppenadresse (z.B: 12/0/7) bei KNX-Backends, der Item-Name beim openHAB-Backend oder das Topic bei MQTT.