openHAB 3 Main UI - Question about Slots

hmerk · November 8, 2020, 8:44am

I would like to create an oh-label-cell with two functions.

Clicking on the cell should open the keypad widget as modal to enter my security PIN and switch security system ON/OFF. This is already working.
If clicking on the submenu (3 dots) of the cell, I would like to see the group popup, showing the members of my security group. This is not working, always get a blank page…

Here is the YAML of what I want to achieve:

component: oh-label-cell
config:
  title: Sicherheit
  stateAsHeader: true
  item: SecurityMasterSwitch
  action: popup
  actionModal: widget:keypad
  actionModalConfig:
    mask: "*"
    item: SecurityPinCode
  color: '=(items.SecurityMasterSwitch.state === "OFF") ? "green" : "red"'
  expandable: true
slots:
  default:
    - component: oh-label-cell
      config:
        action: group
        actionGroupPopupItem: gSecurity

As said, this is not working, but the following, showing a toggle (or a stepper) instead of the group, does work.

component: oh-label-cell
config:
  title: Sicherheit
  stateAsHeader: true
  item: SecurityMasterSwitch
  action: popup
  actionModal: widget:keypad
  actionModalConfig:
    mask: "*"
    item: SecurityPinCode
  color: '=(items.SecurityMasterSwitch.state === "OFF") ? "green" : "red"'
  expandable: true
slots:
  default:
    - component: oh-toggle
      config:
        item: SecurityMasterSwitch

@ysc @RGroll Any hints/solution to reach my goal ???

RGroll · November 8, 2020, 1:24pm

I think that this isn’t possible out-of-the-box atm (at least not as a dynamic created list from group items) as there is only a ‘group-popup’ vue-component available currently.

So, what IS possible and works with your first example is a cell inside the cell which triggers the popup in which the item-list gets generated (based on the group items). So you open a poup from inside a popup, which is obviously not beautful.

With a bit tinkering, you can create a list inside the cell which looks fine for the most part - BUT accordion lists won´t work (I think, this is because a dynamic calculation of the height inside the cell-component - but just a guess)

Here a small example of what i was able to archive as a widget-component:

uid: listInsideCell
component: oh-label-cell
config:
  title: Sicherheit
  stateAsHeader: true
  item: SecurityMasterSwitch
  action: popup
  actionModal: widget:keypad
  actionModalConfig:
    mask: "*"
    item: SecurityPinCode
  color: '=(items.SecurityMasterSwitch.state === "OFF") ? "green" : "red"'
  expandable: true
slots:
  default:
    - component: f7-card-content
      slots:
        default:
          - component: oh-list
            config:
              mediaList: true
              style: 
                --f7-list-item-padding-horizontal: 0
                --f7-safe-area-right: 0
                --f7-safe-area-left: 0
                top: 120px
              class:
                - padding                
            slots:
              default:
                - component: oh-label-item
                  config:
                    title: Label item
                    item: =items.YOURITEM.state
                - component: oh-slider-item
                  config:
                    title: Slider item                    
                - component: oh-list-item
                  config:
                    title: List item
                    after: =items.YOURITEM.state
                - component: oh-toggle-item
                  config:
                    title: Toggle Test
                - component: oh-list-item
                  config:
                    title: Button item
                    listButton: true
                    action: analyzer

For some reason all elements gets blurry, if you use oh-stepper-item inside the cell component… but this isn’t what you need, I assume.

hmerk · November 8, 2020, 1:34pm

Thanks, I will play around with your suggestion…

hmerk · November 8, 2020, 1:54pm

Tried it, not ideal, but will do for the moment. Thanks Rainer !!!

ysc · November 8, 2020, 6:41pm

I think cells could have a “secondary” action, i.e. when long tapping on a touch screen or using the 3-dot button on desktops, which normally expands the cell, but if you specify an action it would do that instead. I’ll consider it.

The “problem” with cells is that they’re actually Framework7 “expandable cards” so due to CSS propagation of the card class, if you try to insert a “regular” card inside the cell/expandable card, it will look funny at best, or not work at all. So that’s not supported right now…

RGroll · November 9, 2020, 2:15pm

@hmerk I tried to come around the native oh-cell and created a version with f7-components. It opens the keypad-widget with a click on the cell-element and the gSecurity-group as a popup with a click on the dots. But it might need some polishing on the font-sizes etc.

Maybe it fits your needs a bit more - and also creates the group-popup dynamically (so no more extra work creating a list-element inside the expanded-cell)

uid: dualAction_cell
component: f7-card
config:
  expandable: true
  swipeToClose: true
  backdrop: true
  bgColor: '=(items.SecurityMasterSwitch.state === "OFF") ? "green" : "red"'
  class:
    - oh-cell
    - label-cell
    - card-prevent-open
slots:
  default:
    - component: oh-button
      config:
        f7: ellipsis_vertical
        icon: f7:ellipsis_vertical
        action: group
        actionGroupPopupItem: gSecurity
        color: transparent
        class:
          - cell-open-button
          - card-opened-fade-out
          - float-right
        style:
          cursor: pointer
          z-index: 999
          background-image: url("data:image/svg+xml,%3Csvg height='512pt' viewBox='-192 0 512 512' width='512pt' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m128 256c0 35.347656-28.652344 64-64 64s-64-28.652344-64-64 28.652344-64 64-64 64 28.652344 64 64zm0 0'/%3E%3Cpath d='m128 64c0 35.347656-28.652344 64-64 64s-64-28.652344-64-64 28.652344-64 64-64 64 28.652344 64 64zm0 0'/%3E%3Cpath d='m128 448c0 35.347656-28.652344 64-64 64s-64-28.652344-64-64 28.652344-64 64-64 64 28.652344 64 64zm0 0'/%3E%3C/svg%3E")
          background-size: 25px
          background-repeat: no-repeat
          background-position: center
    - component: oh-link
      config:
        action: popup
        actionModal: widget:keypad
        actionModalConfig:
          mask: "*"
          item: SecurityPinCode
        class:
          - card-prevent-open
        style:
          position: absolute
          width: 100%
          height: 100%
          top: 0
          left: 0
    - component: f7-block
      config:
        class:
          - cell-contents
          - card-content
          - card-content-padding
      slots:
        default:
          - component: f7-block
            config:
              class:
                - cell-button
                - card-opened-fade-out
                - no-margin
                - no-padding
                - card-header
            slots:
              default:
                - component: oh-list
                  config:
                    mediaList: true
                  slots:
                    default:
                      - component: oh-list-item
                        config:
                          title: '=items.SecurityMasterSwitch.state'
                          subtitle: Sicherheit
                          #text: Status of item
                          #footer: Footer
                          style:
                            --f7-list-item-title-line-height: 21px
                            --f7-list-item-subtitle-line-height: 18.2px
                            --f7-list-item-text-line-height: 36px
                            --f7-list-item-text-font-size: 24px
                            --f7-list-item-after-line-height: 14.4px

I had problems using the same theme color for “red” and “green” as the native ‘oh-cell’ - but you could change them to the correct values so they match the ones from the original component, if you like:
green = #4cd964
red = #ff3b30

Also the vertical dots looks slightly different as in the original, due to the fact that I used data-attributes instead of the native f7-icon.

So maybe you want to give it a try and tell me if it works for you.

hmerk · November 9, 2020, 6:52pm

Thanks Rainer, will give it a try within the next days…

hmerk · November 10, 2020, 3:14pm

Thanks again Rainer, your second version is working as expected, but I will stick to the first one, which gave me the ability to experiment with the badges a bit more.
Here is the result of my “group popup”

RGroll · November 10, 2020, 3:23pm

Nice to hear! Your list is looking very clean, like it

hmerk · November 10, 2020, 3:33pm

It is not finished yet. Smoke and battery alarms are to be moved to a separate section. Just there to see something
What I did not find do far is the ability to show the number of open windows or doors, like we had in openHAB 2

@ysc any idea ???

ysc · November 10, 2020, 8:43pm

How did that work again? Was it a sitemap feature?

hmerk · November 10, 2020, 8:53pm

First, the group label needs the pattern „%d“ added

Group:Switch:OR(ON,OFF) 			Lights       	"Active Lights [%d]"              // e.g. ON and "2"

then you can add it to the sitemap

Group item=Lights	label="Active Lights" icon="light"

ysc · November 10, 2020, 9:14pm

I see, that’s a special exception for sitemaps to convert the group’s state to a number when the pattern is %d. Ugly, but it could be done as well for the “display state” of the /rest/events/states SSE endpoint.

Right now you can only do it with an expression like:
"=(items.Item1.state === 'ON' ? 1 : 0) + (items.Item2.state === 'ON' ? 1 : 0) + ..."

hmerk · November 11, 2020, 7:22am

Thanks @ysc, I will give it a try…

hmerk · November 11, 2020, 7:34am

@ysc
Sorry Yannick, it’s not working.
Line wrapping shifts the second param to a new line, causing the state to be undefinded …

RGroll · November 11, 2020, 7:57am

Line wrapping isn’t possible at all AFAIK - it should work if you do it as a one liner.

hmerk · November 11, 2020, 7:58am

I am not doing the line wrapping, the editor does.
I wrote the complete expression in one line.

RGroll · November 11, 2020, 8:00am

Oh sry, I misunderstood that… I´ll give it a try - strange that this happen.

//edit

    - component: oh-list-item
      config:
        title: Open windows
        badge: '=(items.testItem.state === "ON" ? 1 : 0) + (items.testItem2.state === "ON" ? 1 : 0) + (items.testItem3.state === "ON" ? 1 : 0)'

Works fine for me, no automatic line-wrapping happens here.

hmerk · November 11, 2020, 8:30am

I will give it another try…

hmerk · November 11, 2020, 9:53am

Not working here, furthermore, badge seems to not accept numbers, just strings …