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
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 “=”
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
Rainer was faster…
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: