YamlOverview

Card configuration

The following sections describe the yaml file format of cards. Cards are instances of the page types defined in nspanel-lovelace-ui.

Remark: It can be helpfull to setup an nextion emulator to see the result directly while editing the yaml on the PC, if you can not see the real panel from your PC.

All files with extention .yaml in the config folder defined in ini file section [configpath] are loaded during startup. They must contain all cards which you want to show in your different NSPanles. Cards are instances of the different pages defined for nspanel-lovelace-ui.

When the bridge is started it scans by default the files for changes. That means you can edit them and see the result life in the panel. During that phase I recommedn to set the panel screensaver timeout to 0sec.

Example yaml files in config folder

After installation you find some example yaml files in the config folder:

yaml file	Description
home.yaml	Example configuration of some cards in group home. You can copy it to your config folder and adapt it to your needs according to next section.
screensaver.yaml	Examples for a fully configured screensaver with weather forecast. You can copy it to your config folder and adapt it to your needs
state_cards.yaml	Example file for a statusCard. You can copy it to your config folder and adapt it to your needs.
error_test.yaml	You can delete this file. Its a test file to test wrong card configuration.

Card configuration format of yaml files

Cards are organized in groups. The home group is the default group which is active after startup. You can also define other groups and navigate between them in the panel or with MQTT commands from openHAB. See section navigation

Each yaml file must contain one or more card definitions. The file must start with:

cards:

For each card you need to define the name, the type and other attributs:

card attribute	default value	optional / Mandetory	Description
name	-	M	Unique card name. If you use the name of a panel for a card. This card will be shown first on that panel after leaving the screensaver!
type	-	M	The card type. All types and additonal specific attributes are listed in the next section
title	name will be used	O	Title which will be shown in the top of the card (if card supports it)
group	home	O	Group name to organize cards in groups. Can also be a comma separted list of group names, in case the card should belong to more than one group
slots	-	M	List of slots. The slots are described in section Card slots

The slots define the content of the Fields in the pages of the nspanel-lovelace-ui. There are different classes and types of slots available. Details are defined later. The main slot class is ohItem. This slot class reference an item of openHAB.

Let us define a simple example card based on nspanel-lovelace-ui page type cardEntities with two slots:

cards:
  - name: MyTestCard    #free name of the card
    title: Titletext    #test, which is shown as title of the card
    group: home         #card group where this card belongs to
    type: cardEntities  #type of the card
    slots:              #list of slots
      - class: ohItem
        text: Kugellampe            #Text shown in first field
        type: light                 #lovelace ui field type
        item: Switch_Kugellampe     #item in openHAB
      - class: ohItem
        text: Rollladen Wohnzimmer
        type: shutter
        item: Rollershutter_Wohnzimmer

This will end up in a card like this:

I think you see, that the card definition is straight forward, if you worked with yaml definition in openHAB Main UI.

Remarks to name and group of a cards

You must define a unique name for your card and and assign it to a group. This two attributes are used to navigate between cards (see Navigation). You can define the names freely but there are special names reserved:

Reserved group names:

Group name	Description
home	group home is the default group after startup. It will be used as default home group for all panels
_status_cards_	group _status_cards_ contains all cards of type statusCard
_notify_cards_	group _notify_cards_ contains all cards of type popupNotify
{panelName}	In case you give a group the name of a one of your panels, this group will be the home group for that panel.

Reserved card names:

Card name	Description
.screensaver	card .screensaver is the default screensaver in grpup home. In case you do not define your own screensaver card, a default screensaver will be used. See also section Card type screensaver
{panelName}.screensaver	In case you give a card the name of a panel with the extention .screensaver, this card will be the screensaver for that panel
_default_status_	_default_status_ is the default statusCard

Different types of cards

The type attribute is the link to the page types in nspanel-lovelace-ui but there are also specific types defined for this bridge.

List of the supported card types without left/right navigation icons:

Card type	max. number of slots in EU NSPanel	max. number of slots in US NSPanel	Description	Example
screensaver	6	6	Screen saver card with weather content. Details in section Card type screensaver
screensaver2	14	14	Screen saver card with extended weather content and 5 additional item status. Details in section Card type screensaver2
popupNotify	3	3	Can be used to show notifications. See Notifications

List of the supported card types with left/right navigation icons:

Card type	max. number of slots in EU NSPanel	max. number of slots in US NSPanel	Description	Example
cardEntities	4	6	Card with the slots shown as a list. Details in section Card type cardEntities
cardGrid	6	6	Card with 6 slots as a 2x3 icon grid. Details in section Card type cardGrid
cardGrid2	8	8	Card with 8 slots as a 2x4 icon grid. Details in section Card type cardGrid2
cardQR	1	1	Card to show QR code for a weblink . Details in section Card type cardQR
cardQRWifi	2	2	Card to show QR code Wifi access . Details in section Card type cardQRWifi
cardAlarm	5	5	Card to show a Keypad to activate/deactivate alarm states. Details in section Card type cardAlarm
cardThermo	14	14	Card to control a thermostat. Details in section Card type cardThermo
cardPower	8	8	Card show the power flow in your house. Details in section Card type cardPower
cardMedia	7	7	Card to control a musix/video player at home. Details in section Card type cardMedia
cardChart	1	1	Card to show a chart based on the persistance data of an item. Details in section Card type cardChard

Additional card attributes for card types with left/right navigation icons:

You can change the standard left/right navigation icons, the color and the navigation links for the icons with the following optional card attributes:

card attribute	default value	optional / Mandetory	Description
navIconLeft	arrow-left-bold-circle-outline	O	Left navigation icon
navIconRight	arrow-right-bold-circle-outline	O	Right navigation icon
navIconColorLeft	white	O	Left navigation icon color
navIconColorRight	white	O	Right navigation icon color
navToLeft	next card in current group	O	Left navigation icon color
navToRight	previous card in current group	O	Right navigation icon color

Additional supported card types without navigation in HMI from ticaki/ioBroker.nspanel-lovelace-ui

Card type	max. number of slots in EU NSPanel	max. number of slots in US NSPanel	Description	Example
screensaver3	4	4	Screen saver with bigger time and icons but with only 3 weatherforcasts. Details in section Card type screensaver3

Additional supported card types with navigation in HMI from ticaki/ioBroker.nspanel-lovelace-ui

Card type	max. number of slots in EU NSPanel	max. number of slots in US NSPanel	Description	Example
cardGrid3	4	4	Card with 4 slots as a 2x2 icon grid. Details in section Card type cardGrid3.