Virtual press down of Card by pressing the widget card

Hello Everybody,

some widget develover are able so give their widget cards a kind of sensitivity. If the card is press , the card seems to react like a real button on a keyboard. The example I can show works with expandable card.

your code goes here
uid: Shelly 1
tags: []
props:
  parameters:
    - label: Header
      name: text_header
      required: false
      type: TEXT
    - context: item
      description: select item for state switch1
      label: Item
      name: switch
      required: false
      type: TEXT
    - context: item
      description: select item for state power etc.
      label: Item
      name: value
      required: false
      type: TEXT
    - context: item
      description: select item for state wifi
      label: Item
      name: status_wifi
      required: false
      type: TEXT
    - context: item
      description: select item for state battery
      label: Item
      name: status_batt
      required: false
      type: TEXT
    - context: item
      description: select item for state time
      label: Item
      name: status_time
      required: false
      type: TEXT
    - context: item
      description: select groupitem for expant
      label: Item
      name: itemGroup
      required: false
      type: TEXT
timestamp: Oct 20, 2023, 5:45:47 PM
component: f7-card
config:
  expandable: true
  swipeToClose: true
  backdrop: true
  class:
    - card-expandable-animate-width
  style:
    noShadow: false
    border-radius: var(--f7-card-expandable-border-radius)
    box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1)
    height: 120px
    width: auto
    min-width: 12em
    margin: 5px
    margin-top: 10px
slots:
  default:
    - component: oh-button
      config:
        iconF7: doc_plaintext
        iconSize: 20px
        color: gray
        style:
          position: absolute
          top: 0
          right: 5px
          padding-top: 4px
          padding-right: 5px
          padding-bottom: 40px
          z-index: 999
        class:
          - card-opened-fade-out
          - cell-open-button
  content:
    - component: f7-block
      config:
        style:
          position: absolute
          top: -5px
          left: 20px
          width: 100%
      slots:
        default:
          - component: Label
            config:
              text: "=props.text_header ? props.text_header : 'Set Props'"
              style:
                font-size: 15px
                font-weight: 600
                margin-left: 5px
                margin-top: -3px
          - component: oh-button
            config:
              iconF7: power
              iconSize: 15
              action: command
              actionCommand: "=(items[props.switch].state === 'OFF') ? 'ON' : 'OFF' "
              actionItem: =props.switch
              class:
                - card-prevent-open
              style:
                position: absolute
                left: 20px
                top: 32px
                z-index: 0
                border-radius: 12px
                color: "=(items[props.switch].state === 'OFF') ? 'red' : 'green' "
                box-shadow: 0px 2px 5px
                height: 34px
                background: "=themeOptions.dark === 'dark' ? 'linear-gradient(360deg, #222222 10%, #eeeeee 360%)' : 'linear-gradient(360deg, #5e5e5e 10%, #c6e2ff 200%)'"
          - component: Label
            config:
              style:
                position: absolute
                left: 100px
                top: 30px
                color: "=themeOptions.dark === 'dark' ? 'red' : 'green'"
                font-size: 30px
                font-weight: 600
                overflow: hidden
                white-space: nowrap
              visible: "=props.value ? true : false"
              text: =(items[props.value].state)
          - component: oh-link
            config:
              style:
                position: absolute
                left: 20px
                top: 85px
              visible: "=props.status_wifi ? true : false"
              iconF7: "=(items[props.status_wifi].state >= '1' ) ? 'wifi' : 'wifi_slash' "
              iconColor: "=(items[props.status_wifi].state >= '3' ) ? 'green' : (items[props.status_wifi].state >= '1' ) ? 'yellow' : 'red' "
              iconSize: 20
              iconBadge: "=(items[props.status_wifi].state > '0') ? items[props.status_wifi].state : ''"
              badgeColor: "=(items[props.status_wifi].state >= '3' ) ? 'green' : (items[props.status_wifi].state >= '1' ) ? 'yellow' : 'red' "
          - component: oh-link
            config:
              style:
                position: absolute
                left: 65px
                top: 85px
              visible: "=props.status_batt ? true : false"
              iconColor: "=(items[props.status_batt].state >= '20') ? 'green' : 'red' "
              iconF7: "=(items[props.status_batt].state >= '80') ? 'battery_100' : 'battery_25'"
              iconSize: 20
          - component: Label
            config:
              style:
                position: absolute
                left: 90px
                top: 85px
                color: "=themeOptions.dark === 'dark' ? 'white' : 'black'"
                font-size: 12px
                overflow: hidden
                white-space: nowrap
              visible: "=props.status_batt ? true : false"
              text: =(items[props.status_batt].state+"%")
          - component: oh-link
            config:
              style:
                position: absolute
                left: 120px
                top: 85px
              visible: "=props.status_time ? true : false"
              iconColor: yellow
              iconF7: "=(items[props.status_time].state === 'ON') ? 'timer' : ''"
              iconSize: 20
          - component: oh-button
            config:
              iconF7: arrow_uturn_left_square
              iconSize: 20px
              color: gray
              style:
                position: absolute
                top: -5px
                right: 20px
                padding-top: 10px
                padding-bottom: 35px
                z-index: 0
              class:
                - card-opened-fade-in
                - cell-close-button
                - card-close
    - component: f7-block
      config:
        style:
          position: absolute
          top: 150px
          left: 20px
          width: 100%
      slots:
        default:
          - component: oh-list
            slots:
              default:
                - component: oh-repeater
                  config:
                    for: item
                    groupItem: =props.itemGroup
                    sourceType: itemsInGroup
                  slots:
                    default:
                      - component: oh-label-item
                        config:
                          icon: = loop.item.category
                          iconUseState: true
                          item: =loop.item.name
                          title: =loop.item.label

unvortunately by enabling the expandable: true function the card not only gets this functionality but also sometimes it enlarged the card to a full screen.

I only would like to get this sensitivity of the button without the opening to a full screen.

Is it possible to block or is there any other code to reach this function without using the expandable function ?

looking forward for your comments

This is a css effect. When the card is clicked a new css class with a small transform is applied to the card. For the expandable f7-card, this is done by the underlying f7 functions. You can get the same effect yourself by using the stylesheet to add a css transform when a card is active (i.e., clicked):

component: f7-block
config:
  stylesheet: >
    .card:active {
      transform: scale(.97) translateZ(0);
    }
slots:
  default:
    - component: f7-card      
      config:
        title: Click Me
        content: I act like a button

Hi JustinG,

thank you for your suggestion. This is what i was looking for. Unfortunately I’m a beginner in programming widgets and so far I failed in implementing your stylesheet function into my existing widget.Here attachted is one of my widgets where I’d like to implement this function. Could you please so kind and insert your stylesheet function into this widget code

uid: tiedruech_button
tags: []
props:
  parameters:
    - description: Just display the Item state with no user interaction
      label: Display Only
      name: displayOnly
      required: false
      type: BOOLEAN
    - default: Title
      description: Title to display
      label: Title
      name: Title
      required: false
      type: TEXT
    - default: switch
      description: oh:iconName or iconName (<a class="external text-color-blue" target="_blank" href="https://www.openhab.org/link/icons">openHAB icon</a>), f7:iconName (<a class="external text-color-blue" target="_blank" href="https://framework7.io/icons/">Framework7 icon</a>), material:iconName (<a class="external text-color-blue" target="_blank" href="https://jossef.github.io/material-design-icons-iconfont/">Material icon</a>) or iconify:iconSet:iconName (<a class="external text-color-blue" target="_blank" href="https://icon-sets.iconify.design">Iconify icon</a>, requires being online if not in cache)
      label: Main Icon
      name: mainIcon
      required: false
    - context: item
      description: Enter Main Item to Display.
      label: Main Item
      name: itemMain
      required: true
      type: TEXT
    - context: item
      description: Equipment/group for Menu Action
      label: Equipment
      name: itemEq
      required: false
      type: TEXT
    - default: ON/OFF
      description: Enter ON/OFF State Alias. Useful when using different DisplayStates
      label: State Aliases
      name: stateAlias
      required: false
      type: TEXT
      groupName: advanced
      advanced: true
    - default: "Aquamarine/linear-gradient(40deg, #DAE2F8 0%, #D6A4A4 100%)"
      description: Enter ON/OFF Backgroup colour
      label: Background Colours
      name: bgColour
      required: false
      type: TEXT
      groupName: advanced
      advanced: true
    - default: red/green
      description: Enter ON/OFF Font colour
      label: Font Colours
      name: fntColour
      required: false
      type: TEXT
      groupName: advanced
      advanced: true
    - context: item
      description: Enter Footer Item to display.
      label: footer Item
      name: footerItem
      required: false
      type: TEXT
      groupName: footer
    - description: Enter Footer Icon to Display
      label: Footer Icon
      name: footerIcon
      required: false
      type: TEXT
      groupName: footer
  parameterGroups:
    - name: advanced
      description: State and Color settings
    - name: footer
      description: Icon and Item for Footer
timestamp: Oct 19, 2023, 9:12:22 AM
component: f7-card
config:
  style:
    background: =(@props.itemMain == props.stateAlias.split('/')[0]) ? props.bgColour.split('/')[0]:props.bgColour.split('/')[1]
    border: 3px
    border-radius: 15px
    border-style: =(@props.itemMain == props.stateAlias.split('/')[0])  ? 'inset':'outset'
slots:
  default:
    - component: oh-link
      config:
        action: '=(!props.displayOnly) ? "toggle" : ""'
        actionCommand: ON
        actionCommandAlt: OFF
        actionItem: =props.itemMain
        no-link-class: true
        style:
          border-radius: inherit
          display: flex
          flex-direction: column
          justify-content: flex-start
          width: 100%
      slots:
        default:
          - component: f7-row
            config:
              style:
                display: flex
                flex-direction: row
                justify-content: space-between
                width: 100%
            slots:
              default:
                - component: Label
                  config:
                    style:
                      color: black
                      font-size: .8rem
                      font-weight: bold
                      padding-left: .7rem
                      padding-top: .3rem
                    text: =props.Title
                - component: oh-button
                  config:
                    action: group
                    actionGroupPopupItem: =props.itemEq
                    icon-f7: menu
                    iconSize: 1rem
                    small: true
                    style:
                      color: black
                    visible: '=(props.itemEq) ? "true" : "false"'
          - component: f7-col
            config:
              style:
                display: flex
                flex-direction: column
                height: 4rem
                justify-content: space-evenly
            slots:
              default:
                - component: f7-row
                  config:
                    style:
                      display: flex
                      flex-direction: row
                      justify-content: center
                      width: 100%
                  slots:
                    default:
                      - component: oh-icon
                        config:
                          color: =(@props.itemMain == props.stateAlias.split('/')[0]) ? props.fntColour.split('/')[0]:props.fntColour.split('/')[1]
                          height: 36
                          icon: =props.mainIcon
                          state: =@props.itemMain
                      - component: Label
                        config:
                          style:
                            color: black
                            font-size: 190%
                            font-weight: bold
                          text: =@props.itemMain
                - component: f7-row
                  config:
                    style:
                      display: flex
                      flex-direction: row
                      justify-content: center
                      width: 100%
                    visible: "= (props.footerItem)? true : false"
                  slots:
                    default:
                      - component: oh-icon
                        config:
                          height: 16
                          icon: =(props.footerIcon)
                          state: =@props.footerItem
                          style:
                            padding-right: .2rem
                            padding-top: .1rem
                      - component: Label
                        config:
                          style:
                            color: black
                            font-size: .8rem
                            font-weight: bold
                          text: =@props.footerItem

If you look at the example I posted, the card to which the effect applies is not the root element. The card is inside another element, in this case an f7-block.

So for your widget, you need to add that additional container element as the root element and shift everything else accordingly:

uid: tiedruech_button
tags: []
props:
  parameters:
    - description: Just display the Item state with no user interaction
...
timestamp: Oct 19, 2023, 9:12:22 AM
component: f7-block
config:
  stylesheet: >
    .card:active {
      transform: scale(.97) translateZ(0);
    }
slots:
  default:
    - component: f7-card
      config:
        style:
          background: =(@props.itemMain == props.stateAlias.split('/')[0]) ? props.bgColour.split('/')[0]:props.bgColour.split('/')[1]
          border: 3px
          border-radius: 15px
          border-style: =(@props.itemMain == props.stateAlias.split('/')[0])  ? 'inset':'outset'
      slots:
        default:
          - component: oh-link
...

Hi JusinG,

by shifting all my components as you requested it really worked out justthe way i wanted it. Thank you very much for your support :slight_smile:

Greeting Runa