Just wondering if i can change the slider styles in OH3 main ui widgets.
i have this currently
and i would like to change the style to something like the hue app
In habpanel OH2 i could do something similar using CSS and RZ-Sliders.
Just wondering if theres a way to do this in OH3 Main ui widgets.
For anybody looking for a solution. I have figured it out with many many searches.
The openhab components such as oh-slider are based off the Framework 7 components.
So the CSS variables in the framework 7 components work
such as
- component: f7-row
slots:
default:
- component: f7-col
config:
class: justify-content-flex-start
slots:
default:
- component: oh-slider
config:
color: white
class: '=props.showSlider ? props.showSlider : "display-none"'
step: "1"
min: =props.minValue
max: =props.maxValue
item: "=(props.slideritem) ? props.slideritem : props.item "
style:
margin-left: 10px
width: calc(100% - 20px)
--f7-range-bar-size: 18px
--f7-range-bar-border-radius: 10px
--f7-range-knob-size: 25px
--f7-range-bar-bg-color: rgba(255,255,255,0.2)
--f7-range-bar-active-bg-color: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,0.8))
--f7-range-knob-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3)
It looks really nice.
Is it possible to share the whole code for the widget?
Just for inspiration;)
It started as another widget from someone else, i have made changes, added gradient background. changed styling and added colour options. Along with being able to set the main item, which will control all things. toggle, slider, colour and stepper.
But you can individually set each components item if you wish.
I have the toggle controlling the wall switch which turns on the light.
Then i have the slider and colour controlling those channels for the bulb itself.
uid: darkLiquid_card
tags:
- small
- dark
- custom
- liquid
props:
parameters:
- label: Headline text
name: headline
required: false
type: TEXT
groupName: header
- label: Subheadline text
name: subheadline
required: false
type: TEXT
groupName: header
- context: item
description: Set an item which you want to control
label: Item
name: item
required: false
type: TEXT
groupName: general
- description: Show state of the item
label: Show state
name: showState
required: false
type: BOOLEAN
groupName: general
- description: The value symbol shown after the item-value
label: Value symbol
name: valueSymbol
required: false
type: TEXT
groupName: general
- description: valueSymbol high or low
label: Value symbol position
name: valueSymbolPos
required: false
type: BOOLEAN
groupName: general
advanced: true
- description: Set the lowest value, that your item can have. (<b>default:</b> 0)
label: Items MIN value
name: minValue
required: false
type: TEXT
groupName: general
- description: Set the highest value, that your item can have. (<b>default:</b> 100)
label: Items MAX value
name: maxValue
required: false
type: TEXT
groupName: general
- description: Show trend graph instead of liquid background
label: Trend graph
name: showTrend
required: false
type: BOOLEAN
groupName: general
- label: Icon image url
name: heroIcon
required: false
type: TEXT
groupName: images
- description: Activating Stepper element to control item which you selected above
label: Show stepper buttons
name: showStepper
required: false
type: BOOLEAN
groupName: controls
- context: item
description: Set an item which you want to control
label: Stepper Item
name: stepperitem
required: false
type: TEXT
groupName: controls
- description: Activating Toggle element to control item which you selected above
label: Show toggle
name: showToggle
required: false
type: BOOLEAN
groupName: controls
- context: item
description: Set an item which you want to control
label: Toggle Item
name: toggleitem
required: false
type: TEXT
groupName: controls
- description: Activating Slider element to control item which you selected above
label: Show slider
name: showSlider
required: false
type: BOOLEAN
groupName: controls
- context: item
description: Set an item which you want to control
label: Slider Item
name: slideritem
required: false
type: TEXT
groupName: controls
- description: Activating Colour element to control item which you selected above
label: Show colour
name: showColour
required: false
type: BOOLEAN
groupName: controls
- context: item
description: Set an item which you want to control
label: Colour Item
name: colouritem
required: false
type: TEXT
groupName: controls
parameterGroups:
- name: header
label: Header area
- name: general
label: General settings
description: Most important widget settings
- name: controls
label: Control settings
description: Controls to manipulate your item-state (only use one of them)
- name: images
label: Images
timestamp: Jan 21, 2021, 7:50:03 PM
component: f7-block
config:
style:
position: relative
-ms-user-select: None
-moz-user-select: None
-webkit-user-select: None
user-select: None
class:
- no-padding
- no-margin
slots:
default:
- component: oh-image
config:
url: "=props.heroIcon ? props.heroIcon : ''"
style:
position: absolute
top: -5px
left: -10px
width: 100%
max-width: min(max(50px, 15vw), 80px)
z-index: 99
- component: f7-card
config:
outline: true
style:
max-height: 200px
border-radius: 20px
overflow: hidden
position: relative
background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQLycUzU8qMBcjTUr6NyLvwa-zlDsycKy7Ajg&usqp=CAU')
background-repeat: no-repeat
background-size: 100%
background-color: black
background-blend-mode: lighten
slots:
default:
- component: f7-card-content
config:
style:
height: 100%
display: flex
flex-direction: column
position: relative
z-index: 999
slots:
default:
- component: f7-row
config:
style:
z-index: 999
slots:
default:
- component: f7-col
slots:
default:
- component: Label
config:
propsParameterGroup: header
text: '=(props.headline) ? props.headline : ""'
style:
position: relative
left: 30px
white-space: nowrap
text-overflow: ellipsis
overflow: hidden
display: block
width: 80%
color: rgba(255,255,255,1)
letter-spacing: .75px
font-size: min(max(70px, 4vw), 25px)
font-weight: 600
- component: Label
config:
actionPropsParameterGroup: header
text: '=(props.subheadline) ? props.subheadline : ""'
style:
position: relative
left: 30px
white-space: nowrap
text-overflow: ellipsis
overflow: hidden
color: rgba(255,255,255,.7)
letter-spacing: .75px
font-size: min(max(50px, 2.5vw), 15px)
- component: oh-icon
config:
class: '=props.showColour ? props.showColour : "display-none"'
icon: colorlight
action: group
actionGroupPopupItem: "=(props.colouritem) ? props.colouritem : props.item "
style:
height: min(max(30px, 2.5vw), 40px)
position: absolute
--f7-button-bg-color: ='hsl(' + items.ZigbeeTallLoungeLamp_Colour.state.split(",") [0] + ', ' + items.ZigbeeTallLoungeLamp_Colour.state.split(",") [1] + '%, 70%)'
right: 20px
top: 20px
z-index: 999
- component: f7-row
config:
style:
z-index: 999
slots:
default:
- component: f7-col
config:
width: 100
class: '=props.valueSymbolPos ? props.valueSymbolPos : "align-items-flex-end"'
style:
display: flex
justify-content: flex-start
position: relative
slots:
default:
- component: Label
config:
text: "=(items[props.item].displayState) ? items[props.item].displayState : items[props.item].state"
class: '=props.showState ? props.showState : "display-none"'
style:
color: rgba(255,255,255,1)
text-shadow: 2px 2px rgba(0,0,0,.25)
font-size: 20px
font-weight: 600
- component: Label
config:
text: =props.valueSymbol
style:
color: rgba(255,255,255,1)
text-shadow: 2px 2px rgba(0,0,0,.25)
font-size: 20px
font-weight: 600
- component: f7-row
config:
style:
padding-top: 10px
padding-bottom: 10px
slots:
default:
- component: f7-col
config:
class: justify-content-flex-end
style:
max-height: 28px
display: flex
padding-bottom: 8px
slots:
default:
- component: oh-stepper
config:
class: '=props.showStepper ? props.showStepper : "display-none"'
raised: true
buttonsOnly: true
small: true
autorepeat: true
min: =props.minValue
max: =props.maxValue
step: 4
color: white
style:
margin-right: 20px
item: "=(props.stepperitem) ? props.stepperitem : props.item "
- component: oh-toggle
config:
color: white
class: '=props.showToggle ? props.showToggle : "display-none"'
item: "=(props.toggleitem) ? props.toggleitem : props.item "
style:
right: 10px
--f7-toggle-handle-color: rgba(255,255,255,1)
--f7-toggle-inactive-color: rgba(255,255,255,0.2)
- component: f7-row
slots:
default:
- component: f7-col
config:
class: justify-content-flex-start
slots:
default:
- component: oh-slider
config:
color: white
class: '=props.showSlider ? props.showSlider : "display-none"'
step: "1"
min: =props.minValue
max: =props.maxValue
item: "=(props.slideritem) ? props.slideritem : props.item "
style:
margin-left: 10px
width: calc(100% - 20px)
--f7-range-bar-size: 18px
--f7-range-bar-border-radius: 10px
--f7-range-knob-size: 25px
--f7-range-bar-bg-color: rgba(255,255,255,0.2)
--f7-range-bar-active-bg-color: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,0.8))
--f7-range-knob-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3)
- component: oh-trend
config:
visible: "=props.showTrend ? true : false"
trendItem: =props.item
trendGradient:
- "#FFE7DD"
- "#FFD1BD"
style:
position: absolute
bottom: 0
left: 0
width: 100%
height: 100%
opacity: 0.4
Thanks!
this is a perfect starting point without breaking the door open 