Caution

This is the documentation for the current development branch of the CometVisu. It is possible that some of the described features are not yet available in the current release.

Also there might be lots of errors in this documentation as some parts of the content have been translated by an online translation service.

Menu

Author: Tobias Bräutigam

Available since: 2022

This component creates a navigation menu from a model. Currently the following models are available:

pages	Navigation menu from page structure
menuItems	Menu from single menu items

Navigation menu from page structure

Navigation menu from page structure

Menu on small screens, closed

Menu on small screens, opened

<header>
    <nav>
        <cv-menu model="pages"/>
    </nav>
</header>
<main>
    <cv-page id="fg" name="Ground floor">
        <cv-page id="dr" name="Dining room"/>
        <cv-page id="lr" name="Living room"/>
        <cv-page id="ki" name="Kitchen"/>
        <cv-page id="bath" name="Bathroom"/>
    </cv-page>
     <cv-page id="ff" name="First floor">
        <cv-page id="br" name="Bedroom"/>
        <cv-page id="c1" name="Child 1"/>
        <cv-page id="c2" name="Child 2"/>
        <cv-page id="bathFf" name="Bathroom"/>
    </cv-page>
</main>

There are different ways to display the menu, controlled by the appearance attribute. The possible values are

Type of representation	Explanation
text	Default, focus is on the page name, the icon is displayed next to the name in the same size.
icons	Focus is on the icon, large icon and smaller page name below. Requires an icon for each page on the top navigation level.
dock	Only possible in the <footer>, appearance like “icons” but the menu is displayed in the center above the page content.

Icons

<header>
      <nav>
          <cv-menu model="pages" appearance="icons"/>
      </nav>
  </header>
  <main>
      <cv-page id="gf" name="Ground floor" icon="knxuf-control_building_modern02_okg_eg">
          <cv-page id="dr" name="Dining room"/>
          <cv-page id="lr" name="Living room"/>
          <cv-page id="ki" name="Kitchen"/>
          <cv-page id="bath" name="Bathroom"/>
      </cv-page>
       <cv-page id="ff" name="First floor" icon="knxuf-control_building_modern02_okg_og">
          <cv-page id="br" name="Bedroom"/>
          <cv-page id="c1" name="Child 1"/>
          <cv-page id="c2" name="Child 2"/>
          <cv-page id="bathFf" name="Bathroom"/>
      </cv-page>
  </main>

Dock in footer

<main>
      <cv-page id="gf" name="Ground floor" icon="knxuf-control_building_modern02_okg_eg">
          <cv-page id="dr" name="Dining room"/>
          <cv-page id="lr" name="Living room"/>
          <cv-page id="ki" name="Kitchen"/>
          <cv-page id="bath" name="Bathroom"/>
      </cv-page>
       <cv-page id="ff" name="First floor" icon="knxuf-control_building_modern02_okg_og">
          <cv-page id="br" name="Bedroom"/>
          <cv-page id="c1" name="Child 1"/>
          <cv-page id="c2" name="Child 2"/>
          <cv-page id="bathFf" name="Bathroom"/>
      </cv-page>
  </main>
  <footer>
      <nav>
          <cv-menu model="pages" appearance="dock"/>
      </nav>
  </footer>

Menu from single menu items

The following example adds a menu with two items to a tile. This provides the possibility to add additional settings to a tile. The first menu entry opens a popup (which is not further defined in this example), the second acts as a switch.

Tile with menu button

Menu opened

<cv-widget>
    <cv-tile>
        <cv-menu model="menuItems">
            <cv-menu-item name="Favorites" action="popup" icon="ri-star-line">
                <cv-popup title="Favorites" modal="true"/>
            </cv-menu-item>
            <cv-menu-item name="Mute" 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>

Allowed attributes

Element	Attribute
	Name	Content	Description
cv-menu	model	pages or menuItems	Data-model this menu is generated from.
	appearance	text, icons or dock	Appearance of the menu.
	depth	integer	Depth of the menu. Value ‘-1’ (default) includes all pages, ‘0’ only for pages on the first level, and so on.
	show-labels	true or false	Controls the label visibility.

Allowed child elements and their attributes

Element	Attribute
Structure	Name	Content	Description
cv-menu cv-menu-item	name	string	Name of the menu entry.
	icon	string	Icon of the menu entry.
	action	popup or toggleState	The action that is executed when this menu item has been clicked.
cv-menu cv-menu-item cv-address	transform	string	Transformation of the bus system value to be shown.
	mode	disable, read, write or readwrite	“disable” deactivates the communication, “read” will only fetch data from the backend, “write” will only write to it and an address with “readwrite” will be both, read from and written to.
	variant	string
	format-pos	decimal	Position for format string when multiple addresses are used.
	selector	string	Only MQTT: JSON selector
	qos	decimal	Only MQTT: QoS
	retain	true or false	Only MQTT: retain flag
	ignore-error	true or false	Only MQTT: ignore decode errors.
cv-menu cv-menu-item cv-address #text		string	The GA (like: 12/0/7) for KNX-backends, the item name for openHAB-backend or the MQTT topic