Hi all
I try since begin of this year to transfer my OH2 into OH3 and want to use the new features in the habpanel.
In yaml, ofcourse also in the new system I’am a novice.
To implement a slider I have created a widget with samples from “Widget for yeelight pendant lamps” and another widget for the background image, sorry that I forgot the name
My problem is now, How can I change the colour of the text in the header and make this bold?
Here I want to change the colour to white when the prop for the picture is filled
Hope that somebody can help.
I’am pretty sure that within this code are a lot of unneccessary stuff, but remain that I try to learn how it works
and here is the code
uid: Dimmersimple_V3
tags: []
props:
parameters:
- description: Header text
label: Header
name: header
required: false
type: TEXT
- context: item
description: Brightness
label: Brightness
name: brightness
required: true
type: TEXT
- description: Background image, located in static/ folder
label: Background image
name: bg_image_url
required: false
type: TEXT
parameterGroups: []
timestamp: Jan 14, 2022, 4:55:29 PM
component: f7-card
config:
style:
background-image: "=props.bg_image_url ? 'url(/static/' + props.bg_image_url + ')' : ''"
background-repeat: no-repeat;
background-size: cover
background-brightness: 60%
slots:
default:
- component: f7-card-content
config:
class:
- display-flex
- flex-direction-column
- justify-content-flex-start
- align-items-center
style:
height: 175px
slots:
default:
- component: f7-row
config:
style:
position: absolute
slots:
default:
- component: f7-block-header
slots:
default:
- component: Label
config:
fontSize: "42"
fontWeight: bold
color: red
text: =props.header
- component: f7-block
config:
class:
- no-padding
style:
height: 100%
margin-top: 2px
width: 100%
slots:
default:
- component: f7-block
config:
class:
- display-flex
- flex-direction-column
- justify-content-flex-end
style:
animation: f7-fade-in 300ms
height: 60%
margin-top: 10px
slots:
default:
- component: f7-row
config:
class:
- display-flex
- justify-content-space-between
- align-items-center
style:
margin-left: -10px
width: calc(100% + 20px)
- component: f7-row
config:
class:
- display-flex
- justify-content-space-between
- align-items-center
style:
margin-left: -10px
width: calc(100% + 20px)
slots:
default:
- component: f7-icon
config:
f7: sun_min
size: 20
style:
color: var(--f7-block-header-text-color)
- component: Label
config:
style:
color: var(--f7-block-header-text-color)
text: =items[props.brightness].state + "%"
- component: f7-row
config:
class:
- display-flex
- justify-content-center
- align-items-center
style:
width: 100%
slots:
default:
- component: oh-slider
config:
color: white
item: =props.brightness
label: true
style:
--f7-range-bar-active-bg-color: rgba(246,246,0,0.5)
--f7-range-bar-bg-color: linear-gradient(to right, rgba(169,169,169,0.8), rgba(246,158,81,0))
--f7-range-bar-border-radius: 10px
--f7-range-bar-size: 18px
--f7-range-knob-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3)
--f7-range-knob-size: 20px
--f7-range-label-text-color: black
width: 100%
z-index: 99 !important
- component: f7-block
config:
class:
- display-flex
- justify-content-center
- align-items-center
- no-padding
- no-margin
style:
background: white
border-radius: 50%
border-top: '=items[props.brightness].state > 0 ? "none" : "2px solid #ddd"'
bottom: 10px
box-shadow: "inset 0px 1px 2px #eee"
height: 40px
left: 10px
position: absolute
width: 40px
slots:
default:
- component: f7-block
config:
class:
- no-margin
style:
animation: '=items[props.shutdowntimer].state.split(" ")[0] > 0 ? "skeleton-effect-fade 2s linear infinite" : "none"'
background: '=items[props.brightness].state > 0 ? "rgba(124, 252, 0, 0.5)" : "transparent"'
border-radius: 50%
box-shadow: '=items[props.brightness].state > 0 ? "0 0 20px #fff, 0px 0px 30px rgba(0,255,0,0.5)" : "none"'
height: 100%
position: absolute
transform: '=items[props.brightness].state > 0 ? "scale(1,1)" : "scale(0,0)"'
transition: transform 0.2s
width: 100%
- component: f7-block
config:
style:
background: rgba(255,255,255,0.8)
border-radius: 50%
height: calc(100% - 10px)
position: absolute
width: calc(100% - 10px)
- component: oh-link
config:
action: toggle
actionCommand: '=items[props.brightness].state > 0 ? "OFF" : "ON"'
actionItem: =props.brightness
iconF7: power
iconOnly: true
iconSize: 17
style:
backdrop-filter: opacity(88%)
background-color: "#f7f7f7"
background-image: "linear-gradient(135deg, #f7f7f7, #e7e7e7)"
border: solid 2pt white
border-radius: 50%
box-shadow: 0px 3px 8px
color: "#a7a7a7"
height: calc(100% - 10px)
text-align: center
width: calc(100% - 10px)
z-index: 99 !important
