Button should look like pressed when pressed with mouse

Hello All,

Platform information:

  • Hardware: Rasperry Pi
  • openHAB version: 3.4.0

I have created the following widget for a remote contrl. It is based on Remote Control Widget

How can I animate one button so that when I press it (e.g. mouse down) it looks like a real button, i.e. it appears pressed in?

Thanks and greetings Holger

uid: Argon Audio Remote Widget
tags: []
props:
  parameters:
    - context: item
      description: The item to send the command to
      label: Item
      name: item
      required: false
      type: TEXT
      groupName: items
    - description: Command to increase volume
      label: Volume Up
      name: volumeup
      required: false
      type: TEXT
      groupName: commands
    - description: Command to decrease volume
      label: Volume Down
      name: volumedown
      required: false
      type: TEXT
      groupName: commands
    - description: Command to switch to source bluetooth
      label: Source BT
      name: source_bt
      required: false
      type: TEXT
      groupName: commands
    - description: Command to switch to source TV
      label: Source TV
      name: source_tv
      required: false
      type: TEXT
      groupName: commands
    - description: Command to switch to source PC
      label: Source PC
      name: source_pc
      required: false
      type: TEXT
      groupName: commands
  parameterGroups:
    - name: items
      label: Items to use
    - name: commands
      label: Commands to send
timestamp: Dec 2, 2022, 10:29:50 AM
component: f7-card
config:
  style:
    box-shadow: 2px 3px rgb(150,150,150)
    background-color: rgb(50,50,50)
    --f7-card-margin-horizontal: 0px
    border-radius: 30px
    left: 0px
    width: 280px
    height: 650px
slots:
  default:
    - component: oh-link
      config:
        color: yellow
        style:
          font-size: 30px
          position: absolute
          left: 0px
          top: 5px
          width: 280px
          height: 40px
          display: flex
        text: Volume
    - component: oh-button
      config:
        color: yellow
        bgColor: gray
        style:
          position: absolute
          left: 40px
          top: 40px
          width: 80px
          height: 80px
          border-radius: 50%
          display: flex
        iconF7: arrowtriangle_up_filled
        iconSize: 50
        action: command
        actionCommand: =props.volumeup
        actionItem: =props.item
    - component: oh-button
      config:
        color: yellow
        bgColor: gray
        style:
          position: absolute
          left: 160px
          top: 40px
          width: 80px
          height: 80px
          border-radius: 50%
          display: flex
        iconF7: arrowtriangle_down_filled
        iconSize: 50
        action: command
        actionCommand: =props.volumedown
        actionItem: =props.item
    - component: oh-link
      config:
        color: yellow
        style:
          font-size: 30px
          position: absolute
          left: 0px
          top: 120px
          width: 280px
          height: 40px
          display: flex
        text: Source
    - component: oh-button
      config:
        color: black
        bgColor: yellow
        style:
          font-size: 26px
          font-weight: bold
          position: absolute
          left: 90px
          top: 160px
          width: 100px
          height: 80px
          border-radius: 12px
          display: flex
          flex-wrap: wrap
          white-space: normal
          line-height: 15px
        text: BT
        action: command
        actionCommand: =props.source_bt
        actionItem: =props.item
    - component: oh-button
      config:
        color: black
        bgColor: yellow
        style:
          font-size: 26px
          font-weight: bold
          position: absolute
          left: 90px
          top: 270px
          width: 100px
          height: 80px
          border-radius: 12px
          display: flex
          flex-wrap: wrap
          white-space: normal
          line-height: 15px
        text: TV
        action: command
        actionCommand: =props.source_tv
        actionItem: =props.item
    - component: oh-button
      config:
        color: black
        style:
          font-size: 26px
          font-weight: bold
          position: absolute
          left: 90px
          top: 380px
          width: 100px
          height: 80px
          border-radius: 12px
          display: flex
          flex-wrap: wrap
          white-space: normal
          line-height: 15px
          background: '=(items[props.item].state === "ON") ? "lightgreen" : "yellow"'
        text: PC
        action: command
        actionCommand: =props.source_pc
        actionItem: =props.item
    - component: oh-link
      config:
        color: white
        style:
          font-size: 60px
          font-style: bold
          position: absolute
          left: 0px
          top: 500px
          width: 280px
          height: 0px
          display: flex
        text: Argon
    - component: oh-link
      config:
        color: yellow
        style:
          font-size: 20px
          position: absolute
          left: 0px
          top: 560px
          width: 280px
          height: 20px
        text: Argon Audio
    - component: oh-link
      config:
        color: yellow
        style:
          font-size: 20px
          position: absolute
          left: 0px
          top: 600px
          width: 280px
          height: 10px
        text: Remote Control System

The most effective way to do this will be to use css. You’ll need to use the stylesheet property to directly inject css into the widget (search the forums for “stylesheet”, you’ll find plenty of examples). You’re looking to use a selector with the active pseudo-class:

and most devs use the box-shadow style with the inset property as a shortcut to getting a pressed-in look.

@JustinG thanks for the tips.

My solution is as follows.

uid: Argon Audio Remote Widget
tags: []
props:
  parameters:
    - context: item
      description: The item to send the command to
      label: Item
      name: item
      required: false
      type: TEXT
      groupName: items
    - description: Command to increase volume
      label: Volume Up
      name: volumeup
      required: false
      type: TEXT
      groupName: commands
    - description: Command to decrease volume
      label: Volume Down
      name: volumedown
      required: false
      type: TEXT
      groupName: commands
    - description: Command to switch to source bluetooth
      label: Source BT
      name: source_bt
      required: false
      type: TEXT
      groupName: commands
    - description: Command to switch to source TV
      label: Source TV
      name: source_tv
      required: false
      type: TEXT
      groupName: commands
    - description: Command to switch to source PC
      label: Source PC
      name: source_pc
      required: false
      type: TEXT
      groupName: commands
  parameterGroups:
    - name: items
      label: Items to use
    - name: commands
      label: Commands to send
timestamp: Dec 2, 2022, 9:16:13 PM
component: f7-card
config:
  style:
    box-shadow: 2px 3px rgb(150,150,150)
    background-color: rgb(50,50,50)
    --f7-card-margin-horizontal: 0px
    border-radius: 30px
    left: 0px
    width: 280px
    height: 650px
  stylesheet: >
    .button-style {
      box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.5);
    } .button-style:active {
      box-shadow: inset 0px 10px 20px 2px rgba(0, 0, 0, 0.25);
    }
slots:
  default:
    - component: oh-link
      config:
        color: yellow
        style:
          font-size: 30px
          position: absolute
          left: 0px
          top: 5px
          width: 280px
          height: 40px
          display: flex
        text: Volume
    - component: oh-button
      config:
        class:
          - button-style
        color: yellow
        bgColor: gray
        style:
          position: absolute
          left: 40px
          top: 40px
          width: 80px
          height: 80px
          border-radius: 50%
          display: flex
        iconF7: arrowtriangle_up_filled
        iconSize: 50
        action: command
        actionCommand: =props.volumeup
        actionItem: =props.item
    - component: oh-button
      config:
        class:
          - button-style
        color: yellow
        bgColor: gray
        style:
          position: absolute
          left: 160px
          top: 40px
          width: 80px
          height: 80px
          border-radius: 50%
          display: flex
        iconF7: arrowtriangle_down_filled
        iconSize: 50
        action: command
        actionCommand: =props.volumedown
        actionItem: =props.item
    - component: oh-link
      config:
        color: yellow
        style:
          font-size: 30px
          position: absolute
          left: 0px
          top: 120px
          width: 280px
          height: 40px
          display: flex
        text: Source
    - component: oh-button
      config:
        class:
          - button-style
        color: black
        bgColor: yellow
        style:
          font-size: 26px
          font-weight: bold
          position: absolute
          left: 90px
          top: 160px
          width: 100px
          height: 80px
          border-radius: 12px
          display: flex
          flex-wrap: wrap
          white-space: normal
          line-height: 15px
        text: BT
        action: command
        actionCommand: =props.source_bt
        actionItem: =props.item
    - component: oh-button
      config:
        class:
          - button-style
        color: black
        bgColor: yellow
        style:
          font-size: 26px
          font-weight: bold
          position: absolute
          left: 90px
          top: 270px
          width: 100px
          height: 80px
          border-radius: 12px
          display: flex
          flex-wrap: wrap
          white-space: normal
          line-height: 15px
        text: TV
        action: command
        actionCommand: =props.source_tv
        actionItem: =props.item
    - component: oh-button
      config:
        class:
          - button-style
        color: black
        bgColor: yellow
        style:
          font-size: 26px
          font-weight: bold
          position: absolute
          left: 90px
          top: 380px
          width: 100px
          height: 80px
          border-radius: 12px
          display: flex
          flex-wrap: wrap
          white-space: normal
          line-height: 15px
        text: PC
        action: command
        actionCommand: =props.source_pc
        actionItem: =props.item
    - component: oh-link
      config:
        color: white
        style:
          font-size: 60px
          font-style: bold
          position: absolute
          left: 0px
          top: 500px
          width: 280px
          height: 0px
          display: flex
        text: Argon
    - component: oh-link
      config:
        color: yellow
        style:
          font-size: 20px
          position: absolute
          left: 0px
          top: 560px
          width: 280px
          height: 20px
        text: Argon Audio
    - component: oh-link
      config:
        color: yellow
        style:
          font-size: 20px
          position: absolute
          left: 0px
          top: 600px
          width: 280px
          height: 10px
        text: Remote Control System
2 Likes

FYI - For these specific cases you can also try the built-in Elevation | Framework7 Documentation CSS classes, have a look at the last example for instance.

    - component: oh-button
      config:
        class:
          - elevation-12
          - elevation-hover-24
          - elevation-pressed-2
          - elevation-transition
2 Likes

Hello @ysc thank you, this also works very well.

But do I have to add this for each button in the widget individually or can I do this globally for all oh-buttons in the widget so that I only have to change in one place?

In this case you would have to apply these 4 classes to every button. The elevation classes are there for convenience, but the other approach is equally valid, if you don’t mind fiddling with CSS properties.

In fact you can have a look at Framework7’s source to check how these are defined (in LESS):

In particular:

There are CSS variables for each elevation level that you can use for your box-shadow properties if you like (e.g. “box-shadow: var(--f7-elevation-12);”) defined in framework7/elevation-vars.less at v5 · framework7io/framework7 · GitHub

Can you share your example please?

All with f7 elements.

uid: Argon Audio Remote Widget
tags: []
props:
  parameters:
    - context: item
      description: The item to send the command to
      label: Item
      name: item
      required: false
      type: TEXT
      groupName: items
    - description: Command to increase volume
      label: Volume Up
      name: volumeup
      required: false
      type: TEXT
      groupName: commands
    - description: Command to decrease volume
      label: Volume Down
      name: volumedown
      required: false
      type: TEXT
      groupName: commands
    - description: Command to switch to source bluetooth
      label: Source BT
      name: source_bt
      required: false
      type: TEXT
      groupName: commands
    - description: Command to switch to source TV
      label: Source TV
      name: source_tv
      required: false
      type: TEXT
      groupName: commands
    - description: Command to switch to source PC
      label: Source PC
      name: source_pc
      required: false
      type: TEXT
      groupName: commands
  parameterGroups:
    - name: items
      label: Items to use
    - name: commands
      label: Commands to send
timestamp: Dec 10, 2022, 1:18:55 PM
component: f7-card
config:
  style:
    --f7-card-margin-horizontal: 0px
    background-color: rgb(200,200,200)
    border-radius: 30px
    box-shadow: 5px 5px rgb(150,150,150)
    height: 650px
    left: 0px
    width: 280px
slots:
  default:
    - component: oh-link
      config:
        color: yellow
        style:
          display: flex
          font-size: 30px
          height: 40px
          left: 0px
          position: absolute
          top: 5px
          width: 280px
        text: Volume
    - component: oh-button
      config:
        action: command
        actionCommand: =props.volumeup
        actionItem: =props.item
        bgColor: gray
        class:
          - elevation-2
          - elevation-hover-10
          - elevation-pressed-2
          - elevation-transition
        color: yellow
        iconF7: arrowtriangle_up_filled
        iconSize: 50
        style:
          border-radius: 50%
          display: flex
          height: 80px
          left: 40px
          position: absolute
          top: 40px
          width: 80px
    - component: oh-button
      config:
        action: command
        actionCommand: =props.volumedown
        actionItem: =props.item
        bgColor: gray
        class:
          - elevation-2
          - elevation-hover-10
          - elevation-pressed-2
          - elevation-transition
        color: yellow
        iconF7: arrowtriangle_down_filled
        iconSize: 50
        style:
          border-radius: 50%
          display: flex
          height: 80px
          left: 160px
          position: absolute
          top: 40px
          width: 80px
    - component: oh-link
      config:
        color: yellow
        style:
          display: flex
          font-size: 30px
          height: 40px
          left: 0px
          position: absolute
          top: 130px
          width: 280px
        text: Source
    - component: oh-button
      config:
        action: command
        actionCommand: =props.source_bt
        actionItem: =props.item
        bgColor: yellow
        class:
          - elevation-2
          - elevation-hover-10
          - elevation-pressed-2
          - elevation-transition
        color: black
        style:
          border-radius: 12px
          display: flex
          flex-wrap: wrap
          font-size: 26px
          font-weight: bold
          height: 80px
          left: 90px
          line-height: 15px
          position: absolute
          top: 180px
          white-space: normal
          width: 100px
        text: BT
    - component: oh-button
      config:
        action: command
        actionCommand: =props.source_tv
        actionItem: =props.item
        bgColor: yellow
        class:
          - elevation-2
          - elevation-hover-10
          - elevation-pressed-2
          - elevation-transition
        color: black
        style:
          border-radius: 12px
          display: flex
          flex-wrap: wrap
          font-size: 26px
          font-weight: bold
          height: 80px
          left: 90px
          line-height: 15px
          position: absolute
          top: 290px
          white-space: normal
          width: 100px
        text: TV
    - component: oh-button
      config:
        action: command
        actionCommand: =props.source_pc
        actionItem: =props.item
        bgColor: yellow
        class:
          - elevation-2
          - elevation-hover-10
          - elevation-pressed-2
          - elevation-transition
        color: black
        style:
          border-radius: 12px
          display: flex
          flex-wrap: wrap
          font-size: 26px
          font-weight: bold
          height: 80px
          left: 90px
          line-height: 15px
          position: absolute
          top: 400px
          white-space: normal
          width: 100px
        text: PC
    - component: oh-link
      config:
        color: gray
        style:
          display: flex
          font-size: 60px
          font-style: bold
          height: 0px
          left: 0px
          position: absolute
          top: 550px
          width: 280px
        text: Argon
    - component: oh-link
      config:
        color: gray
        style:
          font-size: 20px
          height: 10px
          left: 0px
          position: absolute
          top: 600px
          width: 280px
        text: Remote Control System
1 Like