-
Notifications
You must be signed in to change notification settings - Fork 1
YamlOverview
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.
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. |
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.
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 |
The type attribute is the link to the page types in nspanel-lovelace-ui but there are also specific types defined for this bridge. Here is a list of the supported types:
| 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 | ![]() |
| 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 | ![]() |
| cardGrid3 | 4 | 4 | Card with 4 slots as a 2x2 icon grid. Details in section Card type cardGrid3. | ![]() |
| 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 | ![]() |
Introduction
NSPanel Preparation
- Preparation
- Prepare NSPanel (extern)
- Flashing Tasmota to NSPanel (extern german)
- Configuring NSPanel and flash HMI jobr99 (extern)
- Flash latest HMI versions of ticaki (extern german)
- NSPanel Emulator (external german)
Installation of the Bridge
Yaml configuration
Further Concepts
Compatible HMI projects
Usefull Links











