OH3 UI Widgets Popup/Popover or Similar Issue

[Richie1972 (Richard Rogers)]

Hi,
I’ve finally started playing with the new OH UI and have created my first widget.
It’s not perfect, but will do as a start.
However, I’m having issues getting it to size correctly and/or popup/popover.
My widget:

It looks fine when placed on a page:

However, trying to put it on the overview page only works if the new widget is added directly.
What I want is to have it as a component of the cell or popup or popover, but I get the following issues:

Cell component:

It’s blurred (why?) and there seems to be no way of resizing the model it appears in, so it doesn’t fit.

component: oh-label-cell
config:
  label: Lounge
slots:
  default:
    - component: widget:LoungeCard

Popup:

Scrollbar and too wide - no way to resize?

component: oh-label-cell
config:
  label: Lounge
  action: popup
  actionModal: widget:LoungeCard
slots: null

Popover:

This has the right height, but is too narrow and always opens top left - I want it to open centre screen or, at least, over the “Lounge” control.

component: oh-label-cell
config:
  label: Lounge
  action: popover
  actionModal: widget:LoungeCard
slots: null

I’m presuming there are some (un)documented settings somewhere to fix this (probably “style:”), but everything i’ve tried has literally made no difference.

Can anyone help?

Thanks,
Richie

[Oliver2 (Oliver)]

no solution from my side but I think that many of us “semi-eperienced” user want to create new pages and have the need for more styling parameters. As an example I want to create a bunch of buttons without gaps.
Thus I need to control the spacing between rows and between columns.
I read the f7-docs but I struggle how to start from here. This is also not about creating a personal widget, but controling the structure of a page.

So I would also very thankful if someone can give us a startup tip

[Richie1972 (Richard Rogers)]

Hi,
I’ve got it working a bit better with some css style settings, but it looks totally crap on a phone.
However, as I can still use BasicUI I can use the Android app.
Initially this new UI is going to replace my OpenHab UI, which looks even worse on my phone.

I’d prefer to get it looking right on both, but I suspect the limitations of the OH UI and Framework7 will mean I can’t have both.

Thanks,
Richie

[RGroll (Rainer)]

@Oliver2

have the need for more styling parameters

I my experience, nearly everything can be achieved with the current posibilites - theres no limit with css styling parameters (besides pseudo-classes)

But as you say it is rough to digg into the f7-docs and abstract the shown examples into usable ‘YAML code’ which OH understands.

It might be helpfull to create multiple ‘Create your own widget’ tutorials with different difficulty levels to help others understanding the underlying logic.

@Oliver2

As an example I want to create a bunch of buttons without gaps.

Putting them in columns (inside a row) and remove the gap would work.

YAML example

component: f7-block
slots:
  default:
    - component: f7-row
      config:
        class:
          - no-gap
      slots:
        default:
          - component: f7-col
            slots:
              default:
                - component: oh-button
                  config:
                    text: Button 1
                    fill: true
                    color: green
          - component: f7-col
            slots:
              default:
                - component: oh-button
                  config:
                    text: Button 2
                    fill: true
                    color: red
          - component: f7-col
            slots:
              default:
                - component: oh-button
                  config:
                    text: Button 3
                    fill: true
                    color: blue

@Richie1972

I’ve got it working a bit better with some css style settings, but it looks totally crap on a phone.

I think for your goal, it would be a better way, creating 2 widgets with different base-components. I think you’ve used either a f7-block or a f7-card here?!, which will get messed up in a popup very quick.

For the use in a popup I would recommend you, using the f7-page as a base component, which uses the full width and height, without applying extra styling.

[Andrew_Pawelski]

@Richie1972 - Can you share your LoungeCard widget YAML - it looks amazing

[Richie1972 (Richard Rogers)]

Hi,
The card is made up of a summary and details cards.
YAML below (as stated earlier, the only caveat is that it looks crap on a phone and is only tested on Chrome atm)

uid: Lounge Summary Card
tags: []
timestamp: Jan 15, 2021, 5:08:49 PM
component: f7-card
config:
  style:
    padding: 0px
    margin: 0px auto
    margin-top: 20px
    width: 320px
    height: 220px
slots:
  default:
    - component: oh-button
      config:
        action: popover
        actionModal: widget:Lounge Full Card
        style:
          position: absolute
          top: 0px
          width: 100%
          height: 100%
    - component: f7-row
      config:
        class:
          - align-items-center
          - display-flex
          - justify-content-space-between
          - align-content-stretch
        style:
          background-image: url("https://openhab/webres/images/loungecard.jpg")
          background-size: 100% 100%
      slots:
        default:
          - component: Label
            config:
              text: Lounge
              style:
                fontSize: 24px
                color: white
                background: rgba(0, 0, 0, 0.5)
                width: 100%
                text-align: center
          - component: f7-row
            config:
              style:
                text-align: center
                fontSize: 24px
                color: white
                background: rgba(0, 0, 0, 0.5)
                width: 100%
                margin-top: 128px
                height: 58px
            slots:
              default:
                - component: f7-col
                  slots:
                    default:
                      - component: f7-icon
                        config:
                          f7: thermometer
                          color: orange
                          size: 24
                      - component: Label
                        config:
                          text: =items.AUTOCTRLLOUNGE_Temperature.state + " °C"
                          style:
                            fontSize: 14px
                - component: f7-col
                  slots:
                    default:
                      - component: f7-icon
                        config:
                          f7: drop
                          color: blue
                          size: 24
                      - component: Label
                        config:
                          text: =items.AUTOCTRLLOUNGE_Humidity.state + " %"
                          style:
                            fontSize: 14px
                - component: f7-col
                  slots:
                    default:
                      - component: f7-icon
                        config:
                          f7: gauge
                          color: green
                          size: 24
                      - component: Label
                        config:
                          text: =items.AUTOCTRLLOUNGE_Pressure.state
                          style:
                            fontSize: 14px
                - component: f7-col
                  slots:
                    default:
                      - component: f7-icon
                        config:
                          f7: light_max
                          color: yellow
                          size: 24
                      - component: Label
                        config:
                          text: =items.AUTOCTRLLOUNGE_LuxLevel.state + " lux"
                          style:
                            fontSize: 14px



uid: Lounge Details Card
tags: []
timestamp: Jan 15, 2021, 11:33:38 AM
component: f7-card
config:
  style:
    padding: 0px
    margin: 0px auto
    width: 100%
    background: transparent
    backdrop-filter: blur(5px) brightness(50%)
slots:
  default:
    - component: f7-row
      config:
        class:
          - display-flex
          - margin-top
        style:
          fontSize: 12px
          color: white
          background: rgba(255, 255, 255, 0.2)
          padding: 0px
          margin: 0px auto
          width: 320px
      slots:
        default:
          - component: Label
            config:
              text: Lighting
              style:
                padding: 3px
    - component: f7-row
      config:
        class:
          - display-flex
        style:
          fontSize: 12px
          padding: 4px
          margin-top: 4px
          margin: 0px auto
          width: 320px
      slots:
        default:
          - component: f7-icon
            config:
              f7: lightbulb
              color: yellow
              size: 20
              class:
                - margin-right
          - component: Label
            config:
              text: Main Light
          - component: oh-toggle
            config:
              item: AUTOSWLOUNGE01_Power
    - component: f7-row
      config:
        class:
          - display-flex
        style:
          fontSize: 12px
          padding: 4px
          margin: 0px auto
          width: 320px
      slots:
        default:
          - component: f7-icon
            config:
              f7: lightbulb
              color: yellow
              size: 20
              class:
                - margin-right
          - component: Label
            config:
              text: Table Light 1
          - component: oh-slider
            config:
              item: AUTODIMLOUNGE1_Dimmer
              vertical: false
              scale: false
              max: 100
              min: 0
              style:
                width: 120px
                margin-left: 5px
                margin-right: 5px
          - component: oh-toggle
            config:
              item: AUTODIMLOUNGE1_Power
    - component: f7-row
      config:
        class:
          - display-flex
        style:
          fontSize: 12px
          padding: 4px
          margin: 0px auto
          width: 320px
      slots:
        default:
          - component: f7-icon
            config:
              f7: lightbulb
              color: yellow
              size: 20
              class:
                - margin-right
          - component: Label
            config:
              text: Table Light 2
          - component: oh-slider
            config:
              item: AUTODIMLOUNGE2_Dimmer
              vertical: false
              scale: false
              max: 100
              min: 0
              style:
                width: 120px
                margin-left: 5px
                margin-right: 5px
          - component: oh-toggle
            config:
              item: AUTODIMLOUNGE2_Power
    - component: f7-row
      config:
        class:
          - display-flex
        style:
          fontSize: 12px
          padding: 4px
          margin: 0px auto
          width: 320px
      slots:
        default:
          - component: f7-icon
            config:
              f7: lightbulb
              color: yellow
              size: 20
              class:
                - margin-right
          - component: Label
            config:
              text: Table Light 3
          - component: oh-slider
            config:
              item: AUTODIMLOUNGE3_Dimmer
              vertical: false
              scale: false
              max: 100
              min: 0
              style:
                width: 120px
                margin-left: 5px
                margin-right: 5px
          - component: oh-toggle
            config:
              item: AUTODIMLOUNGE3_Power
    - component: f7-row
      config:
        class:
          - display-flex
          - margin-top
        style:
          fontSize: 12px
          color: white
          background: rgba(255, 255, 255, 0.2)
          margin: 0px auto
          width: 320px
      slots:
        default:
          - component: Label
            config:
              text: Blinds
              style:
                padding: 3px
    - component: f7-row
      config:
        class:
          - display-flex
        style:
          fontSize: 12px
          padding: 4px
          margin-top: 4px
          margin: 0px auto
          width: 320px
      slots:
        default:
          - component: f7-icon
            config:
              f7: uiwindow_split_2x1
              color: '=(items.LoungeBlinds_Shutter.state == 100) ? "red" : "green"'
              size: 40
          - component: Label
            config:
              text: '=(items.LoungeBlinds_Shutter.state == 100) ? "Blinds [Closed]" : "Blinds [Open]"'
              style:
                padding-top: 10px
                fontSize: 12px
          - component: oh-rollershutter
            config:
              item: LoungeBlinds_Shutter
    - component: f7-row
      config:
        class:
          - display-flex
          - margin-top
        style:
          fontSize: 12px
          color: white
          background: rgba(255, 255, 255, 0.2)
          margin: 0px auto
          width: 320px
      slots:
        default:
          - component: Label
            config:
              text: Devices
              style:
                padding: 3px
    - component: f7-row
      config:
        class:
          - display-flex
        style:
          fontSize: 12px
          padding: 4px
          margin: 0px auto
          width: 320px
      slots:
        default:
          - component: f7-icon
            config:
              f7: tv
              color: blue
              size: 20
              class:
                - margin-right
          - component: Label
            config:
              text: Television
          - component: oh-toggle
            config:
              item: AUTOPLUGTV01_Power
    - component: f7-row
      config:
        class:
          - display-flex
        style:
          fontSize: 12px
          padding: 4px
          margin: 0px auto
          width: 320px
      slots:
        default:
          - component: f7-icon
            config:
              f7: flame
              color: orange
              size: 20
              class:
                - margin-right
          - component: Label
            config:
              text: Electric Fire
          - component: oh-toggle
            config:
              item: AUTOPLUGFIRE01_Power
    - component: f7-row
      config:
        class:
          - display-flex
          - margin-top
        style:
          fontSize: 12px
          color: white
          background: rgba(255, 255, 255, 0.2)
          margin: 0px auto
          width: 320px
      slots:
        default:
          - component: Label
            config:
              text: Alarms
              style:
                padding: 3px
    - component: f7-row
      config:
        class:
          - display-flex
        style:
          fontSize: 12px
          padding: 4px
          margin: 0px auto
          width: 320px
      slots:
        default:
          - component: f7-icon
            config:
              f7: smoke
              color: '=(items.AUTOCTRLLOUNGE_Smoke.state === "ON") ? "red" : "green"'
              size: 20
              class:
                - margin-right
          - component: Label
            config:
              text: Smoke Detector

I’m pretty sure this can be vastly improved, but I’m having trouble getting to grips with the whole Framework7 formatting

Thanks,
Richie

[Andrew_Pawelski]

I can’t work out f7 either that’s why I’m hoping to get some great work by others and try and unpack and learn but I’m only at the beginning of that journey

I’ve made two widgets from your yaml - is the idea the summary card is on a page then clicking it the whole thing appears? At the moment the summary shows but the pop up just greys out the page like something modal is supposed to show