openHAB 3 Main UI - Question about Slots

That’s how the yaml deserializer works by default, and it seems the editor syntax highlighting doesn’t like it, but it shouldn’t have any influence on the expression itself. I think that’s more because the result should be a string instead of a number, so try:

"=((items... ? 1 : 0) + (items... ? 1 : 0)).toString()

Thanks @ysc, that was the missing link. Now it is working, even with line wrapping :

                - component: oh-label-item
                  config:
                    title: offene Türen
                    item: gDoors
                    icon: oh:door
                    badgeColor: '=(items.gDoors.state === "CLOSED") ? "green" : "red"'
                    badge: '=((items.ContactFrontDoor.state === "CLOSED" ? 0 : 1) +
                      (items.ContactTerraceDoor.state === "CLOSED" ? 0 :
                      1)).toString()'
                    iconUseState: true

Cool, note that you can be even more creative, since you can customize the rendering of most parts of a list item or even the cell header/background:

component: oh-cell
config:
  title: Doors & Windows
slots:
  header:
    - component: f7-list
      config:
        mediaList: true
      slots:
        default:
          - component: f7-list-item
            config:
              title: Doors & Windows
            slots:
              title:
                - component: f7-chip
                  config:
                    text: "=((items.FGDW002WindowSensor_Open.state === 'OPEN' ? 1 : 0) +
                      (items.HS1DSZDoorSensor_DoorSensor.state === 'OPEN' ? 1 :
                      0)).toString()"
    - component: Label
      config:
        text: Front Door open!
        style:
          color: red
        visible: =items.HS1DSZDoorSensor_DoorSensor.state === 'OPEN'
    - component: Label
      config:
        text: Living Room Window open!
        style:
          color: red
        visible: =items.FGDW002WindowSensor_Open.state === 'OPEN'

image

Another version:

component: oh-cell
config:
  title: Doors & Windows
slots:
  background:
    - component: f7-block
      config:
        class:
          - card-opened-fade-out
        style:
          position: absolute
          right: 10px
          bottom: 10px
      slots:
        default:
          - component: f7-chip
            config:
              class:
                - margin-left
              iconF7: exclamationmark_triangle
              iconColor: red
              text: Front Door
              visible: =items.HS1DSZDoorSensor_DoorSensor.state === 'OPEN'
          - component: f7-chip
            config:
              class:
                - margin-left
              iconF7: exclamationmark_triangle
              iconColor: red
              text: Living Room Window
              visible: =items.FGDW002WindowSensor_Open.state === 'OPEN'

image

Be aware though that visible attributes are not taken into account when editing (this is by design), so you might think it doesn’t work, switch to Run mode to see the final result with the visibility conditions applied.

1 Like

Thanks Yannick, cool stuff. I will give it a try later on :+1:

Hi guys,
could you point me in the right direction, how to make a oh-cell content (meaning the header: slot) spanning the whole widht of the cell?

The intention is to align some element (e.g. a badge) next to the right border or to have the oh-trend element span the full width.

Currently the content’s width is derived from the widest flex element:

image

Notice the trendline ending at the right end of the title label…

That’s the beginning my current widget code:

component: oh-cell
config:
  expandable: false  
  color: '=(items[props.mainItem+"_Fail"].state > 0) ? "red" : items[props.mainItem+"_Warn"].state > 0 : "orange" : ""'
  on: true
  action: popup
  actionModal: widget:Popup_Timestamp
  actionModalConfig:
    title: =props.title
    icon: =props.icon
    mainItem: =props.mainItem
    secItem: =props.secItem
    delimiter: =props.delimiter
    footerOk: =props.footerOk
    footerBad: =props.footerBad
slots:
  default:
    - component: oh-label-card
      slots:
        default:
          - component: oh-list
  header:
    - component: oh-trend
      config:
        trendItem: =props.mainItem+"_Warn"
        trendGradient:
          - red
          - orange
          - green    
    - component: f7-col
      slots:
        default:

EDIT:

for the OH-trend try:
style: 
  position: absolute
  width: 100%
  height: 100%
  top: 0
  left: 0
  z-index: 1

Unfortunately, that width: 100% does not derive the width of the whole cell, it just gives the width of the flex content in the header: -slot

That’s why I’m asking :wink:

I can increase the width, e.g. to 280px by spreading some content:

  header:
    - component: oh-trend
      config:
        trendItem: =props.mainItem+"_Warn"
    - component: f7-col
      slots:
        default:
          - component: f7-row
            config:
              class:
                - align-items-center
                - justify-content-flex-start
              style:
                font-weight: 400
                width: 280px

Which gives:
image

But - of course - I can’t used fixed values here :wink:
So I’m almost done, just missing the value of the variable width of the cell…

Question remains:
Where to derive/how to calculate the width of the parent cell from?

ok, got it. Did you try the z-index?

Another workaround is to move away from the oh cell and oh label card to an f7 card. You are fully flexible to put the content of the widget where you want it to be, have more flexibility on the background like color etc… and e.g. the trend line goes like the screenshot i sent.

can you add the trend line not into the header but as additional component:

- component: oh-trend
  config:
    trendItem: =[props.itemCo2]
    trendGradient:
      - green
      - orange
      - red
    style:
      --f7-theme-color-bg-color: transparent
      background: transparent
      filter: opacity(30%)
      position: absolute
      width: 100%
      height: 100%
      top: 0
      left: 2
      z-index: 1

Yes.

I know, but I’m almost happy with the customization/style options.
AND: I’m quite sure, that there is a way to get the actual width of the parent cell.

I’m just lacking some CSS/f7/… experience here … :wink:

Not sure I understand …

I thought, that the content of a oh-cell which should be shown when not-expanded has to go into the header: slot.

The content of the expanded cell goes then into slot default:

Means: If I move the trend component from header: to default: it will appear only if the cell got expandend - right?

And: I’m not just after the trendline. As I wrote, this is just an example . I’m more after getting the actual width of the cell :wink:

you are right, i just did a test. The oh-cell does not allow this as far as i can see


you then might want to look to switch to f7 :slight_smile: as you anyway already create your own widget. have fun! :slight_smile:

Thanks a lot for your input!

Still hoping, that I’m just lacking some information.
I’m convinced, that there must be way to inherit the width …

Not giving up that quickly :wink:

@ysc , I’ve had a look into …
org.openhab.ui/web/src/components/widgets/layout/oh-grid-cells.vue:

.cell-placeholder
  margin-top calc(var(--f7-menu-item-height) + var(--f7-card-expandable-margin-vertical)) !important
  height 120px
  margin-left 3px
  margin-right 3px
  width calc(100% - 6px)
  .button
    height 120px
    padding 35px

If I understand correctly, the width of the placeholder is what I’m after :wink:

Any hint, how I can access the resulting/computed width of the placeholder in my header:-slot of the oh-cell?

EDIT:
… or some other idea how to stretch the header-elements to the width of the “parent” cell?

The background slot will have the width of the cell (so you can set width: 100% to elements in that slot) while the header slot will have the width of the expanded cell (even when it’s not expanded).
Normally the background slot is only used for non-interactive elements to put behind the elements in header but you probably still can add interactive stuff anyway.

See [Main UI] Cell Widgets by ghys · Pull Request #317 · openhab/openhab-webui · GitHub

1 Like

Excellent! That was the missing link:

image

Many thanks Yannick!

1 Like