Is there any way to have a popover open with a long press?

Add-ons UIs
21

After several trial and errors I figured out how to correctly implement the suggestions. Let me write it down here for future reference for those who will happen to come to this thread.
A note of warning: while randomly adding an --f7-button-height in a wrong section, it turned out that the whole ui was not operational anymore. I had to stop openhab and remove the line added from the jsondb/uicomponents_ui_page.json.

component: oh-cell
config:
  footer: footer
  header: header
  subtitle: subtitle
  title: oh-Cell 1
slots:
  background:
    - component: oh-button
      config:
        style:
          height: 120px
          color: transparent
        text: Button
        width: 100%
        action: toggle
        actionCommand: ON
        actionCommandAlt: OFF
        actionItem: gLuci_Tavolo_Soggiorno_Switch
        taphold_action: popup
        taphold_actionModal: widget:white_light_v1
        taphold_actionModalConfig:
          brightness: gLuci_Tavolo_Soggiorno_Bright
          header: Configura Luci Tavolo soggiorno
          temperature: gLuci_Tavolo_Soggiorno_WTemp
22

Hi all, this long-tap feature looks amazing. I am currently trying to build my own widget and merge this one with a simple-toggle I am using in several use-cases already with a HomeKit-like look:

Bildschirmfoto 2024-03-17 um 21.38.53
Bildschirmfoto 2024-03-17 um 21.38.53754×700 23.2 KB

Those are based on an f7-card. Unfortunately I couldn’t make the above work with an f7-card (background does not work properly). On the other hand the oh-cell seems to be limited in regards to default slots that are shown. When using the below code it looks good initially, but does not take the default slots into account at all and the Cell has no text or icons, while the background slot still works. Does anyone have a clue why this is the case?

uid: Schalter_LongTap
props:
  parameters:
    - description: A text prop
      label: Prop 1
      name: prop1
      required: false
      type: TEXT
    - context: item
      description: An item to control
      label: Item
      name: item
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Mar 17, 2024, 3:46:26 PM
component: oh-cell
slots:
  default:
    - component: f7-icon
      config:
        f7: '=(items[props.item].state === "ON") ? "lightbulb_fill" : "lightbulb"'
        size: 24
        margin: 0px
        padding: 0px
        style:
          color: '=(items[props.item].state === "ON") ? "rgba(255,234,5,1)" : "gray"'
    - component: Label
      config:
        text: =props.prop1
        style:
          font-size: 15px
          font-weight: 500
          margin-left: 0px
          margin-top: 20px
          padding: 0px
          color: '=(items[props.item].state === "ON") ? "black" : "rgba(0, 0, 0, 0.5)"'
    - component: Label
      config:
        text: '=(items[props.item].state === "ON") ? "AN" : "AUS"'
        style:
          font-size: 15px
          font-weight: 500
          margin-left: 0px
          margin-top: 0px
          padding: 0px
          color: '=(items[props.item].state === "ON") ? "red" : "rgba(0, 0, 0, 0.5)"'
  background:
    - component: oh-button
      config:
        style:
          height: 120px
          color: transparent
          box-shadow: '=(items[props.item].state === "ON") ? "10px 10px 28px 1px rgba(255,234,5,0.3)" : "var(--f7-card-expandable-box-shadow)"'
          --f7-button-hover-bg-color: rgba(255, 255, 159, 1)
          --f7-button-pressed-bg-color: rgba(237, 233, 157,1)
          --f7-button-bg-color: '=(items[props.item].state === "ON") ? "rgb(255,255,255)" : "rgba(228,228,228,0.9)"'
        text: Button
        width: 100%
        action: toggle
        actionCommand: ON
        actionCommandAlt: OFF
        actionItem: =props.item
        taphold_action: popup
        taphold_actionModal: widget: Test

Thanks!
Jonathan

23

The oh-cell is based on the f7-card but, as with al of the oh- type components, it’s been highly modified to be usable in a “low code”. This means that the configurations are completely different. To see how this might work with the f7-card you can check out the f7 docs:

With the oh-cell the default slot has been reconfigured to place components only on the area of the card that becomes visible when you expand the card.

1 Like
24

Thanks for the swift reply, that’s what I thought.
I ended up not using an f7-card, but the oh-button directly.
I guess it matches the requirements of the above as well, but without having a cell and a button in the background. Short and long tap are working quite well:

uid: Schalter_LongTab
props:
  parameters:
    - description: A text prop
      label: Prop 1
      name: prop1
      required: false
      type: TEXT
    - context: item
      description: An item to control
      label: Item
      name: item
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Mar 18, 2024, 5:30:26 PM
component: oh-button
config:
  width: 100%
  action: toggle
  actionCommand: ON
  actionCommandAlt: OFF
  actionItem: =props.item
  taphold_action: popup
  taphold_actionModal: widget:darkLiquid_card
  style:
    border-radius: var(--f7-card-expandable-border-radius)
    height: 120px
    box-shadow: '=(items[props.item].state === "ON") ? "10px 10px 28px 1px rgba(255,234,5,0.3)" : "var(--f7-card-expandable-box-shadow)"'
    --f7-button-hover-bg-color: rgba(255, 255, 159, 1)
    --f7-button-pressed-bg-color: rgba(237, 233, 157,1)
    --f7-button-bg-color: '=(items[props.item].state === "ON") ? "rgb(255,255,255)" : "rgba(228,228,228,0.9)"'
    --f7-button-text-transform: none
slots:
  default:
    - component: f7-icon
      config:
        f7: '=(items[props.item].state === "ON") ? "lightbulb_fill" : "lightbulb"'
        size: 25
        style:
          color: '=(items[props.item].state === "ON") ? "rgba(255,234,5,1)" : "gray"'
          margin: 0px
          margin-left: 0px
          margin-top: 5px
          padding: 5px 10px
          display: flex
    - component: Label
      config:
        text: =props.prop1
        style:
          font-size: 15px
          font-weight: 500
          margin-left: 15px
          margin-top: 5px
          padding: 0px
          text-align: start
          color: '=(items[props.item].state === "ON") ? "black" : "rgba(0, 0, 0, 0.5)"'
    - component: Label
      config:
        text: '=(items[props.item].state === "ON") ? "AN" : "AUS"'
        style:
          font-size: 15px
          font-weight: 500
          margin-left: 0px
          margin-top: 0px
          padding: 0px 15px
          color: '=(items[props.item].state === "ON") ? "red" : "rgba(0, 0, 0, 0.5)"'
          text-align: start

image
image746×702 32.8 KB