Here is my latest attempt: It uses 2 items. one for control UP/DOWN and one for position 0-100
and you can can put those into a group and use that group to control all the blinds in that group.
Also I don’t use and have not tried the scheduling part of the widget.
uid: Remote_blind_control
tags: []
props:
parameters:
- context: Text
description: Title of the card
label: Title
name: rollerTitle
required: false
type: TEXT
- context: item
description: Rollershutter Item
label: Rollershutter Item
name: groupItem
required: true
type: TEXT
- context: item
description: Rollershutter position
label: Rollershutter Position
name: blindposition
required: true
type: TEXT
- context: item
description: Enable Schedule
label: Enable Schedule Item
name: EnableSchedule
required: false
type: TEXT
- context: item
description: Opening Time
label: Opening Time Item
name: OpeningTimeItem
required: false
type: TEXT
- context: item
description: Closure Time
label: Closure Time Item
name: ClosureTimeItem
required: false
type: TEXT
timestamp: Aug 7, 2023, 10:02:11 PM
component: f7-card
config:
style:
background: '=themeOptions.dark === "dark" ? "rgb(40, 40, 40)" : "rgb(240, 240, 240)"'
border-radius: var(--f7-card-expandable-border-radius)
box-shadow: 5px 5px 15px 1px rgba(0,0,0,0.3)
margin-left: 5px
margin-right: 5px
slots:
default:
- component: f7-card-content
config:
style:
position: relative
z-index: 3
slots:
default:
- component: f7-row
config:
style:
margin-bottom: -10px
margin-left: 0px
margin-right: 0px
slots:
default:
- component: f7-col
config:
style:
margin-left: 0px
margin-right: 0px
width: 60px
slots:
default:
- component: oh-icon
config:
height: 50px
icon: iconify:ic:twotone-roller-shades
style:
color: orange
- component: f7-col
config:
style:
margin-left: 60px
margin-right: 0px
position: absolute
width: 80%
slots:
default:
- component: f7-row
slots:
default:
- component: Label
config:
style:
color: '=themeOptions.dark === "dark" ? "white" : "black"'
font-size: 15px
font-weight: 500
text: =props.rollerTitle
- component: f7-row
config:
style:
align-items: right
display: flex
flex-direction: row
slots:
default:
- component: f7-chip
config:
style:
background: orange
color: black
font-weight: 500
text: '=Math.round(items[props.groupItem].state) == "100" ? "Closed" : Math.round(items[props.groupItem].state) == "0" ? "Open" : Math.round(items[props.blindposition].state) + "% closed"'
- component: f7-col
config:
style:
margin-left: 0px
margin-right: 0px
width: 26px
slots:
default:
- component: oh-link
config:
action: command
actionCommand: UP
actionItem: =props.groupItem
iconColor: orange
iconF7: arrow_up_circle
iconSize: 28
style:
background: '=themeOptions.dark === "dark" ? "rgb(40, 40, 40)" : "rgb(240, 240, 240)"'
z-index: 98
- component: oh-link
config:
action: command
actionCommand: STOP
actionItem: =props.groupItem
iconF7: stop_circle
iconSize: 28
style:
background: '=themeOptions.dark === "dark" ? "rgb(40, 40, 40)" : "rgb(240, 240, 240)"'
z-index: 98
- component: oh-link
config:
action: command
actionCommand: DOWN
actionItem: =props.groupItem
iconColor: orange
iconF7: arrow_down_circle
iconSize: 28
style:
background: '=themeOptions.dark === "dark" ? "rgb(40, 40, 40)" : "rgb(240, 240, 240)"'
z-index: 98
- component: f7-card-content
config:
class: align-items-center alignt-text-center justify-content-center
style:
margin-left: 15px
margin-right: 15px
position: relative
z-index: 2
visible: =(vars.PresetVisible) == true
slots:
default:
- component: f7-row
slots:
default:
- component: oh-slider
config:
color: orange
item: =props.blindposition
max: 100
min: 0
step: "1"
style:
background: trasparent
color: black
font-size: 13px
- component: f7-row
config:
style:
margin-top: 15px
slots:
default:
- component: oh-button
config:
action: command
actionCommand: 25
actionItem: =props.blindposition
round: true
style:
background: '=items[props.groupItem].state >= "20" && items[props.groupItem].state <= "30" ? "orange" : "rgb(210, 210, 210)"'
color: black
z-index: 98
text: 25
- component: oh-button
config:
action: command
actionCommand: 40
actionItem: =props.blindposition
round: true
style:
background: '=items[props.groupItem].state >= "35" && items[props.groupItem].state <= "45" ? "orange" : "rgb(210, 210, 210)"'
color: black
z-index: 98
text: 40
- component: oh-button
config:
action: command
actionCommand: 50
actionItem: =props.blindposition
round: true
style:
background: '=items[props.groupItem].state >= "45" && items[props.groupItem].state <= "55" ? "orange" : "rgb(210, 210, 210)"'
color: black
z-index: 98
text: 50
- component: oh-button
config:
action: command
actionCommand: 75
actionItem: =props.blindposition
round: true
style:
background: '=items[props.groupItem].state >= "70" && items[props.groupItem].state <= "80" ? "orange" : "rgb(210, 210, 210)"'
color: black
z-index: 98
text: 75
- component: oh-button
config:
action: command
actionCommand: 90
actionItem: =props.blindposition
round: true
style:
background: '=items[props.groupItem].state >= "85" && items[props.groupItem].state <= "95" ? "orange" : "rgb(210, 210, 210)"'
color: black
z-index: 98
text: 90
- component: f7-card-content
config:
class: display-flex align-items-center alignt-text-center justify-content-center
style:
margin-left: 0px
margin-right: 0px
margin-top: -10px
position: relative
z-index: 1
visible: =(vars.ScheduleVisible) == true
slots:
default:
- component: f7-row
config:
style:
width: 300px
slots:
default:
- component: f7-col
config:
style:
width: 100px
slots:
default:
- component: f7-row
slots:
default:
- component: f7-col
config:
style:
width: 100px
slots:
default:
- component: Label
config:
style:
font-size: 15px
text-align: center
text-decoration: underline
text-underline-offset: 4px
text: Opening Time
- component: f7-row
slots:
default:
- component: f7-col
config:
style:
width: 40px
slots:
default:
- component: f7-row
config:
style:
height: 30px
text-align: center
slots:
default:
- component: oh-button
config:
action: command
actionCommand: =(dayjs(items[props.OpeningTimeItem].state).add(1, 'hour').format('YYYY-MM-DDTHH:mm:ss.ZZ'))
actionItem: =(props.OpeningTimeItem)
style:
--f7-button-text-color: orange
font-family: u2400
font-size: 100%
width: 40px
text: ▲
- component: f7-row
config:
style:
height: 30px
slots:
default:
- component: Label
config:
style:
font-size: 15px
text-align: center
width: 40px
text: "=(((items[props.OpeningTimeItem].state === 'NULL') || !props.OpeningTimeItem) ? '?': props.timeFormat == '12h' ? dayjs(items[props.OpeningTimeItem].state).format('hh'): dayjs(items[props.OpeningTimeItem].state).format('HH'))"
- component: f7-row
config:
style:
height: 30px
text-align: center
slots:
default:
- component: oh-button
config:
action: command
actionCommand: =(dayjs(items[props.OpeningTimeItem].state).add(-1, 'hour').format('YYYY-MM-DDTHH:mm:ss.ZZ'))
actionItem: =(props.OpeningTimeItem)
style:
--f7-button-text-color: orange
font-family: u2400
font-size: 100%
width: 40px
text: ▼
- component: f7-col
config:
style:
width: 20px
slots:
default:
- component: f7-row
config:
style:
height: 30px
text-align: center
slots:
default:
- component: Label
config:
style:
font-size: 15px
text-align: center
width: 20px
text: ""
- component: f7-row
config:
style:
height: 30px
slots:
default:
- component: Label
config:
style:
font-size: 15px
text-align: center
width: 20px
text: ":"
- component: f7-row
config:
style:
height: 30px
text-align: center
slots:
default:
- component: Label
config:
style:
font-size: 15px
text-align: center
width: 20px
text: ""
- component: f7-col
config:
style:
width: 40px
slots:
default:
- component: f7-row
config:
style:
height: 30px
text-align: center
slots:
default:
- component: oh-button
config:
action: command
actionCommand: =(dayjs(items[props.OpeningTimeItem].state).add(1, 'minute').format('YYYY-MM-DDTHH:mm:ss.ZZ'))
actionItem: =(props.OpeningTimeItem)
style:
--f7-button-text-color: orange
font-family: u2400
font-size: 100%
width: 40px
text: ▲
- component: f7-row
config:
style:
height: 30px
slots:
default:
- component: Label
config:
style:
font-size: 15px
text-align: center
width: 40px
text: "=(((items[props.OpeningTimeItem].state === 'NULL') || !props.OpeningTimeItem) ? '?': dayjs(items[props.OpeningTimeItem].state).format('mm'))"
- component: f7-row
config:
style:
height: 30px
text-align: center
slots:
default:
- component: oh-button
config:
action: command
actionCommand: =(dayjs(items[props.OpeningTimeItem].state).add(-1, 'minute').format('YYYY-MM-DDTHH:mm:ss.ZZ'))
actionItem: =(props.OpeningTimeItem)
style:
--f7-button-text-color: orange
font-family: u2400
font-size: 100%
width: 40px
text: ▼
- component: f7-col
config:
style:
width: 100px
slots:
default:
- component: f7-row
slots:
default:
- component: f7-col
config:
style:
width: 100px
slots:
default:
- component: Label
config:
style:
font-size: 15px
text-align: center
text-decoration: underline
text-underline-offset: 4px
text: Closure Time
- component: f7-row
slots:
default:
- component: f7-col
config:
style:
width: 40px
slots:
default:
- component: f7-row
config:
style:
height: 30px
text-align: center
slots:
default:
- component: oh-button
config:
action: command
actionCommand: =(dayjs(items[props.ClosureTimeItem].state).add(1, 'hour').format('YYYY-MM-DDTHH:mm:ss.ZZ'))
actionItem: =(props.ClosureTimeItem)
style:
--f7-button-text-color: orange
font-family: u2400
font-size: 100%
width: 40px
text: ▲
- component: f7-row
config:
style:
height: 30px
slots:
default:
- component: Label
config:
style:
font-size: 15px
text-align: center
width: 40px
text: "=(((items[props.ClosureTimeItem].state === 'NULL') || !props.ClosureTimeItem) ? '?': props.timeFormat == '12h' ? dayjs(items[props.ClosureTimeItem].state).format('hh'): dayjs(items[props.ClosureTimeItem].state).format('HH'))"
- component: f7-row
config:
style:
height: 30px
text-align: center
slots:
default:
- component: oh-button
config:
action: command
actionCommand: =(dayjs(items[props.ClosureTimeItem].state).add(-1, 'hour').format('YYYY-MM-DDTHH:mm:ss.ZZ'))
actionItem: =(props.ClosureTimeItem)
style:
--f7-button-text-color: orange
font-family: u2400
font-size: 100%
width: 40px
text: ▼
- component: f7-col
config:
style:
width: 20px
slots:
default:
- component: f7-row
config:
style:
height: 30px
text-align: center
slots:
default:
- component: Label
config:
style:
font-size: 15px
text-align: center
width: 20px
text: ""
- component: f7-row
config:
style:
height: 30px
slots:
default:
- component: Label
config:
style:
font-size: 15px
text-align: center
width: 20px
text: ":"
- component: f7-row
config:
style:
height: 30px
text-align: center
slots:
default:
- component: Label
config:
style:
font-size: 15px
text-align: center
width: 20px
text: ""
- component: f7-col
config:
style:
width: 40px
slots:
default:
- component: f7-row
config:
style:
height: 30px
text-align: center
slots:
default:
- component: oh-button
config:
action: command
actionCommand: =(dayjs(items[props.ClosureTimeItem].state).add(1, 'minute').format('YYYY-MM-DDTHH:mm:ss.ZZ'))
actionItem: =(props.ClosureTimeItem)
style:
--f7-button-text-color: orange
font-family: u2400
font-size: 100%
width: 40px
text: ▲
- component: f7-row
config:
style:
height: 30px
slots:
default:
- component: Label
config:
style:
font-size: 15px
text-align: center
width: 40px
text: "=(((items[props.ClosureTimeItem].state === 'NULL') || !props.ClosureTimeItem) ? '?': dayjs(items[props.ClosureTimeItem].state).format('mm'))"
- component: f7-row
config:
style:
height: 30px
text-align: center
slots:
default:
- component: oh-button
config:
action: command
actionCommand: =(dayjs(items[props.ClosureTimeItem].state).add(-1, 'minute').format('YYYY-MM-DDTHH:mm:ss.ZZ'))
actionItem: =(props.ClosureTimeItem)
style:
--f7-button-text-color: orange
font-family: u2400
font-size: 100%
width: 40px
text: ▼
- component: f7-card-content
config:
class: align-items-center alignt-text-center justify-content-center
style:
margin-bottom: -50px
margin-left: 15px
margin-right: 15px
margin-top: -50px
position: relative
z-index: 0
visible: =(vars.ChartVisible) == true
slots:
default:
- component: oh-chart
config:
chartType: day
options:
backgroundColor: transparent
periodVisible: false
slots:
grid:
- component: oh-chart-grid
config:
containLabel: false
series:
- component: oh-time-series
config:
barWidth: 1
color: orange
gridIndex: 0
item: =props.groupItem
type: bar
xAxisIndex: 0
yAxisIndex: 0
xAxis:
- component: oh-time-axis
config:
axisPointer:
show: false
gridIndex: 0
yAxis:
- component: oh-value-axis
config:
gridIndex: 0
min: 0
name: " % closed"
- component: f7-card-footer
config:
style:
background: rgb(245, 218, 137)
border-radius: 0 0 10px 10px
height: auto
slots:
default:
- component: f7-block
config:
style:
bottom: 3px
display: flex
left: 0
position: absolute
slots:
default:
- component: oh-button
config:
action: variable
actionVariable: PresetVisible
actionVariableValue: =! (vars.PresetVisible)
slots:
default:
- component: oh-icon
config:
icon: iconify:mdi:window-shutter-auto
style:
color: "=(vars.PresetVisible ? 'rgb(255, 128, 0)' : 'rgb(106, 106, 106)')"
width: 25px
- component: oh-button
config:
action: variable
actionVariable: ScheduleVisible
actionVariableValue: =! (vars.ScheduleVisible)
slots:
default:
- component: oh-icon
config:
icon: iconify:akar-icons:clock
style:
color: "=(vars.ScheduleVisible ? 'rgb(255, 128, 0)' : 'rgb(106, 106, 106)')"
width: 25px
- component: oh-toggle
config:
color: green
item: =props.EnableSchedule
style:
--f7-toggle-height: 20px
--f7-toggle-inactive-color: red
--f7-toggle-width: 40px
margin-left: 7px
margin-top: -2px
z-index: 98
visible: =(vars.ScheduleVisible) == true
- component: oh-button
config:
action: variable
actionVariable: ChartVisible
actionVariableValue: =! (vars.ChartVisible)
slots:
default:
- component: oh-icon
config:
icon: iconify:ant-design:bar-chart-outlined
style:
color: "=(vars.ChartVisible ? 'rgb(255, 128, 0)' : 'rgb(106, 106, 106)')"
width: 25px