Oh-label-card background image

Hi!
I’m running OH3.1 M3 and i’m very happy with my model in the location/equipment tabs.
Now i would like to start creating my Overview page and the first thing i would like to do is a simple widget that is the same as oh-label-card but where i can use a custom jpg that i upload in /html/ as background.
I know it should be quite simple, but i really tried any code and i never succeed!
Anybody can help to start?
Thanks!

I’m not sure if the oh-label card itself provides this functionality.
But try the config/style/background section from the widget here within your card

image

Thanks the link was helping!
I was able to make an f7-block with custom background.
Now the problem is the props:
If i put the
background: url(/static/p0.jpg)
everything works properly. But if i try to make it as a props, like in the code below, and set the props as /static/p0.jpg then it doesnt work.
Full code here: any hints??
Thanks again!

uid: card-background
tags: []
props:
  parameters:
    - description: The path of the image
      label: PATH
      name: imagepath
      required: false
      type: TEXT
  parameterGroups: []
component: f7-card
slots:
  default:
    - component: f7-block
      config:
        style:
          min-height: 300px
          background: url(props.imagepath)
          background-size: 100% 100%
          background-repeat: no-repeat
          display: flex
          flex-direction: column
          align-items: start

background: =url(props.imagepath) should be correct. I think you’ve forgot the “=”

1 Like

And don’t forget to escape the parameters that the expression does not understand:

background: ='url(' + props.imagepath + ')'

That’s great thanks!
Indeed i achieved my original purpose and now i have the backround as a props.
I only miss the action to navigate to another page, but it seems that none of the f7 components i used can take actions!
Is there any trick to add something like this somewhere in my code?

          - component: ???
            config:
              action: navigate
              actionPage: =props.targetPage

here is the full code:

uid: card-background
tags: []
props:
  parameters:
    - description: The path of the image
      label: PATH
      name: imagepath
      required: false
      type: TEXT
    - description: The description of the card
      label: DESC
      name: desc
      required: false
      type: TEXT
    - context: item
      description: Temperatura
      label: Temp
      name: temp
      required: false
      type: TEXT
    - context: item
      description: Umidità
      label: Umid
      name: umid
      required: false
      type: TEXT
    - name: targetPage
      label: Page to navigate to
      type: TEXT
      context: page
  parameterGroups: []
timestamp: Apr 6, 2021, 5:18:48 PM
component: f7-card
config:
slots:
  default:
    - component: f7-block
      config:
        style:
          min-height: 300px
          background: ='url(' + props.imagepath + ')'
          background-size: 100% 100%
          background-repeat: no-repeat
          display: flex
          flex-direction: column
          align-items: start
      slots:
        default:
          - component: Label
            config:
              text: =props.desc
              iconF7: sun_min
              style:
                color: black
                font-size: 32px
                text-shadow: 0px 0px 3px white
                margin: 5px
                font-weight: bold
                text-transform: uppercase
                filter: brightness(50%)

          - component: oh-link
            config:
              text: =items[props.temp].state
              action: analyzer
              actionAnalyzerItems: =[props.temp]
              iconF7: thermometer
              iconSize: 24
              color: black
              style:
                font-size: 24px
                font-weight: bold
                text-shadow: 0px 0px 3px white
                filter: brightness(50%)
          - component: oh-link
            config:
              text: =items[props.umid].displayState
              action: analyzer
              actionAnalyzerItems: =[props.umid]
              iconF7: drop
              iconSize: 24
              color: black
              style:
                font-size: 24px
                font-weight: bold
                text-shadow: 0px 0px 3px white
                filter: brightness(50%)

You can only apply actions to (some) oh-components.

Why not using oh-link here as well?

you can try this, of course edit your style parameters. I am using it to link from a widget to an external site with popover.

            - component: oh-link
              config:
                action: url
                actionUrl: http://whatever.de
                open-in: .popOver
                style:
                  position: absolute
                  width: 100%
                  height: 100%
                  top: 0
                  left: 0
1 Like

Rainer was faster… :slight_smile:

That was great i’m learning a lot, thanks guys!

          - component: oh-link
            config:
                action: navigate
                actionPage: =props.targetPage
                style:
                  position: absolute
                  width: 100%
                  height: 100%
                  top: 0
                  left: 0

first thanks to rickitaly to have posted this code, that is what i was looking from months!
i’ve added some settings but i have a question, why when i set black color to label the label come less “bold”? in white versione seems to be okay…

here is the full widget code:

uid: Label-Card-Background
tags: []
props:
  parameters:
    - label: Image path
      name: imagepath
      required: false
      type: TEXT
    - description: Icon name (without f7)
      label: Icona
      name: icon
      required: false
      type: TEXT
    - description: Icon color
      label: Colore icona
      name: iconcolor
      required: false
      type: TEXT
    - description: Titolo della card
      label: Label
      name: desc
      required: false
      type: TEXT
    - description: Colore del titolo della card
      label: Label color
      name: desccolor
      required: false
      type: TEXT
    - description: Descrizione
      label: Footer text
      name: defi
      required: false
      type: TEXT
    - context: page
      label: Page to navigate to
      name: targetPage
      required: false
  parameterGroups: []
timestamp: Nov 8, 2021, 2:45:12 PM
component: f7-card
slots:
  default:
    - component: f7-block
      config:
        style:
          min-height: 110px
          background: ='url(' + props.imagepath + ')'
          background-size: 100% 240%
          background-repeat: no-repeat
          display: flex
          flex-direction: row
          background-position: center
      slots:
        default:
          - component: f7-icon
            config:
              f7: =props.icon
              color: =props.iconcolor
              size: 32
              style:
                margin-top: 15px
                margin-bottom: 40px
                margin-left: 47%
          - component: Label
            config:
              text: =props.desc
              style:
                font-weight: 400
                color: =props.desccolor
                font-size: 24px
                margin-top: 50px
                margin-bottom: 0px
                margin-left: -7%
          - component: oh-link
            config:
              action: navigate
              actionPage: ='page:' + props.targetPage
              style:
                position: absolute
                width: 100%
                height: 100%
                top: 0
                left: 0
    - component: f7-block
      config:
        style:
          display: flex
          flex-direction: row
      slots:
        default:
          - component: Label
            config:
              text: =props.defi
              style:
                font-size: 14px
                margin-top: 10px
                margin-bottom: 10px
                color: grey

my idea of this card is to be exactly like the original one except for some color and background personalization…

thanks for who can help me.

Hello,

I have followed this for adding a background image. Here is my YAML

uid: active_scene
tags: []
props:
  parameters:
    - description: The path of the image
      label: PATH
      name: imagepath
      required: false
      type: TEXT
  parameterGroups: []
style:
    border-radius: var(--f7-card-expandable-border-radius)
    box-shadow: var(--f7-card-expandable-box-shadow)
    height: 120px
    max-height: 120px
    min-height: 120px
    min-width: 110px
    max-width: 400px
    --f7-card-expandable-tablet-border-radius: 2px
    --f7-card-expandable-margin-horizontal: 5px
    --f7-card-expandable-margin-vertical: 10px
    --webkit-user-select: none
    --moz-user-select: none
    --ms-user-select: none
    text-align: center
    font-size: 50px
    font-weight: bold
    background: ='url(' + props.imagepath + ')'
    background-size: cover
    background-position: center

But if I set the props in the Menu the image is not displayed and the path is also not stored if I go again into the menu. Is there sth. wrong I have done.

There is a complete section missing.


component: f7-card
slots:
  default: