semanticHomeMenu for openHAB 4 - Discussions

hmerk · September 6, 2024, 2:58pm

As I was asked for an example how to include custom widgts in the “Appliances” Menu.

I took for an example the List Item Widget for Moon Information from the Marketplace.

First add the widget to a new page in MainUI and configure it according to the widgets documentation.

This will result in something like this :

blocks:
  - component: oh-block
    config: {}
    slots:
      default: []
  - component: oh-block
    config: {}
    slots:
      default:
        - component: oh-grid-row
          config: {}
          slots:
            default:
              - component: oh-grid-col
                config: {}
                slots:
                  default:
                    - component: oh-list-card
                      config:
                        mediaList: true
                        accordionList: true
                      slots:
                        default:
                          - component: widget:frs_Astro_Moon_list_item
                            config:
                              MoonIlluminationItem: Lokale_Monddaten_Beleuchtungsstarke_des_Mondes
                              MoonPhaseNameItem: Lokale_Monddaten_Mondphase
                              FullMoonDateItem: Lokale_Monddaten_Vollmond
                              NewMoonDateItem: Lokale_Monddaten_Neumond
                              TotalEclipseDateItem: Lokale_Monddaten_Eclipse_TotalElevation
                              PartialEclipseDateItem: Lokale_Monddaten_Eclipse_PartialElevation
masonry: []
grid: []
canvas: []

Now create a new custom widget in the developer section witch the following code :

uid: semanticHomeMenu_Appliances
tags:
  - marketplace:152210
props: {}
timestamp: Sep 6, 2024, 4:49:50 PM
component: f7-card
config:
  style:
    --f7-card-header-border-color: transparent
    background: =themeOptions.dark=="light" ? "white"
    border-radius: 10px
    margin-left: 5px
    margin-right: 5px
slots:
  default:
    - component: f7-card-content
      config:
        style:
          height: auto
      slots:
        default:

This will create an empty Appliances Menu in the semanticHomeMenu.

Taking the infomation from our above example and adding to the new widget :

uid: semanticHomeMenu_Appliances
tags:
  - marketplace:152210
props: {}
timestamp: Sep 6, 2024, 4:49:50 PM
component: f7-card
config:
  style:
    --f7-card-header-border-color: transparent
    background: =themeOptions.dark=="light" ? "white"
    border-radius: 10px
    margin-left: 5px
    margin-right: 5px
slots:
  default:
    - component: f7-card-content
      config:
        style:
          height: auto
      slots:
        default:
          - component: f7-list
            config:
              accordionList: true
              mediaList: true
            slots:
              default:
                - component: oh-list-card
                  config:
                    mediaList: true
                    accordionList: true
                  slots:
                    default:
                      - component: widget:frs_Astro_Moon_list_item
                        config:
                          MoonIlluminationItem: Lokale_Monddaten_Beleuchtungsstarke_des_Mondes
                          MoonPhaseNameItem: Lokale_Monddaten_Mondphase
                          FullMoonDateItem: Lokale_Monddaten_Vollmond
                          NewMoonDateItem: Lokale_Monddaten_Neumond
                          TotalEclipseDateItem: Lokale_Monddaten_Eclipse_TotalElevation
                          PartialEclipseDateItem: Lokale_Monddaten_Eclipse_PartialElevation

This will give us the following appliances menu :

I hope this helps