OpenHabian 3.4.4: PaperUI alternative - simple display rollershutter control

Setup, Configuration and Use Items & Sitemaps
1

I’m trying to get an overview of where I can control all roller shutters as quickly and easily as possible. I wanted to do this based on the following items:

RaffstoresAlle (Type=RollershutterItem, State=100, Label=, Category=Blinds)
RaffstoresBuero (Type=RollershutterItem, State=100, Label=, Category=Blinds)
RaffstoresBad (Type=RollershutterItem, State=4, Label=, Category=Blinds)
RaffstoresSchlafzimmer (Type=RollershutterItem, State=100, Label=, Category=Blinds)
RaffstoresKueche (Type=RollershutterItem, State=100, Label=, Category=Blinds)
RaffstoresWohnzimmer1 (Type=RollershutterItem, State=100, Label=, Category=Blinds)
RaffstoresWohnzimmer2 (Type=RollershutterItem, State=4, Label=, Category=Blinds)
RaffstoresWohnzimmer3 (Type=RollershutterItem, State=4, Label=, Category=Blinds)
RaffstoresWohnzimmer4 (Type=RollershutterItem, State=4, Label=, Category=Blinds)

Using the following code on pages - new layout page - code area:

config:
  label: Overview
blocks:
  - component: oh-block
    config:
      title: Raffstores
    slots:
      default:
        - component: oh-rollershutter-card
          config:
            item: RaffstoresAlle
            title: Alle
        - component: oh-rollershutter-card
          config:
            item: RaffstoresBad
            title: Bad
        - component: oh-rollershutter-card
          config:
            item: RaffstoresBuero
            title: Büro
        - component: oh-rollershutter-card
          config:
            item: RaffstoresKueche
            title: Küche
        - component: oh-rollershutter-card
          config:
            item: RaffstoresSchlafzimmer
            title: Schlafzimmer
        - component: oh-rollershutter-card
          config:
            item: RaffstoresWohnzimmer1
            title: Wohnzimmer 1
        - component: oh-rollershutter-card
          config:
            item: RaffstoresWohnzimmer2
            title: Wohnzimmer 2
        - component: oh-rollershutter-card
          config:
            item: RaffstoresWohnzimmer3
            title: Wohnzimmer 3
        - component: oh-rollershutter-card
          config:
            item: RaffstoresWohnzimmer4
            title: Wohnzimmer 4
masonry: []
grid: null
canvas: null

Alternatively:

config:
  label: Overview
blocks:
  - component: oh-block
    config:
      title: Raffstores
    slots:
      default:
        - component: oh-slider-card
          config:
            item: RaffstoresAlle
            title: Alle
            min: 0
            max: 100
            step: 1
            scale: true
            unit: "%"
        - component: oh-slider-card
          config:
            item: RaffstoresBad
            title: Bad
            min: 0
            max: 100
            step: 1
            scale: true
            unit: "%"
        - component: oh-slider-card
          config:
            item: RaffstoresBuero
            title: Büro
            min: 0
            max: 100
            step: 1
            scale: true
            unit: "%"
        - component: oh-slider-card
          config:
            item: RaffstoresKueche
            title: Küche
            min: 0
            max: 100
            step: 1
            scale: true
            unit: "%"
        - component: oh-slider-card
          config:
            item: RaffstoresSchlafzimmer
            title: Schlafzimmer
            min: 0
            max: 100
            step: 1
            scale: true
            unit: "%"
        - component: oh-slider-card
          config:
            item: RaffstoresWohnzimmer1
            title: Wohnzimmer 1
            min: 0
            max: 100
            step: 1
            scale: true
            unit: "%"
        - component: oh-slider-card
          config:
            item: RaffstoresWohnzimmer2
            title: Wohnzimmer 2
            min: 0
            max: 100
            step: 1
            scale: true
            unit: "%"
        - component: oh-slider-card
          config:
            item: RaffstoresWohnzimmer3
            title: Wohnzimmer 3
            min: 0
            max: 100
            step: 1
            scale: true
            unit: "%"
        - component: oh-slider-card
          config:
            item: RaffstoresWohnzimmer4
            title: Wohnzimmer 4
            min: 0
            max: 100
            step: 1
            scale: true
            unit: "%"
masonry: []
grid: null
canvas: null

But neither shows any widgets only the label. What’s the mistake? Thank you!

2

Just figured it out myself :slight_smile:
However, not yet understood exactly why it did not work with blocks?

config:
  label: Overview
blocks: []
masonry:
  - component: oh-masonry
    slots:
      default:
        - component: oh-rollershutter-card
          config:
            title: Alle Raffstores
            item: RaffstoresAlle
        - component: oh-rollershutter-card
          config:
            title: Raffstores Bad
            item: RaffstoresBad
        - component: oh-rollershutter-card
          config:
            title: Raffstores Büro
            item: RaffstoresBuero
        - component: oh-rollershutter-card
          config:
            title: Raffstores Küche
            item: RaffstoresKueche
        - component: oh-rollershutter-card
          config:
            title: Raffstores Schlafzimmer
            item: RaffstoresSchlafzimmer
        - component: oh-rollershutter-card
          config:
            title: Raffstores Wohnzimmer 1
            item: RaffstoresWohnzimmer1
        - component: oh-rollershutter-card
          config:
            title: Raffstores Wohnzimmer 2
            item: RaffstoresWohnzimmer2
        - component: oh-rollershutter-card
          config:
            title: Raffstores Wohnzimmer 3
            item: RaffstoresWohnzimmer3
        - component: oh-rollershutter-card
          config:
            title: Raffstores Wohnzimmer 4
            item: RaffstoresWohnzimmer4
grid: null
canvas: null
3

English please!

4

I edited it :slight_smile: Sry

5

The way the pages are defined, oh-blocks are the basis for a grid definition of placement and only accept certain other components such as oh-grid-row and oh-grid-cells. If you press the “Add row” button for the block and then the Add column button for the row you can then see in the Code tab the structure that is required to make a component visible in the oh-block structure.

6

I don’t know why it didn’t work with blocks either but did you consider using an oh-repeater card? You can have it loop over a Group and render a list item for each. For example my lighting widget does this.

Screenshot_20230701-093128
Screenshot_20230701-0931281152×2496 184 KB

It even has some logic to check the state of an Item and not show certain switches (i.e don’t show the switches for the Christmas lights unless it’s Christmas time).

I’ve another widget that only shows status items that are OFF so I have a quick glance to see if something is wrong.