My first widget, supports both on/off control and dimming functionality for lights. You can easily open, close, or adjust the position of shutters, and efficiently manage your AC with options for switching it on/off, setting the desired temperature, and controlling the fan speed.
Changelog
Version 1.0
- initial release
Resources
uid: Glow_and_Flow
tags: []
props:
parameters:
- description: Label for room
label: Room Label
name: roomLabel
required: false
type: TEXT
- context: item
description: The item for lightbulb ON/OFF control
label: Lightbulb On/Off Item
name: switchItem
required: true
type: TEXT
- context: item
description: The item for lightbulb dimming control
label: Lightbulb Dimming Item
name: dimmerItem
required: false
type: TEXT
- description: Label for the lightbulb
label: Lightbulb Label
name: lightBulbLabel
required: true
type: TEXT
- context: item
description: item for blinds
label: Blinds Item
name: blindsItem
required: true
type: TEXT
- description: Label for the blinds
label: Blinds Label
name: blindsLabel
required: true
type: TEXT
- context: item
description: The item for AC ON/OFF control
label: AC On/Off Item
name: acItem
required: true
type: TEXT
- description: Label for the AC
label: AC label
name: acLabel
required: true
type: TEXT
- context: item
description: The item for room temperature
label: Room Temp Item
name: roomTempItem
required: true
type: TEXT
- context: item
description: The item for AC setpoint
label: AC Setpoint Item
name: acTempItem
required: true
type: TEXT
- context: item
description: The item for AC fan speed control
label: AC Fan Speed Item
name: fanSpeedItem
required: true
type: TEXT
parameterGroups: []
timestamp: Sep 24, 2024, 9:41:48 AM
component: div
config:
stylesheet: >
@media screen and (max-width: 768px) {
.responsive-width {
width: 70vw; /* Width for tablets in portrait mode and smaller screens */
}
}
@media screen and (max-width: 500px) {
.responsive-width {
width: 95vw; /* Width for small screens like phones */
}
}
@media screen and (max-width: 375px) {
.responsive-width {
width: 93vw; /* Full width for very small screens */
}
}
slots:
default:
- component: f7-block
config:
style:
background-color: 'rgba(228,237,246)'
border-radius: 20px
margin-left: 1%
margin-right: 1%
min-width: 200px
class:
- responsive-width
slots:
default:
- component: f7-row
config:
class:
- justify-content-center
- align-items-center
- display-flex
slots:
default:
- component: Label
config:
style:
color: RGB(79, 92, 106)
font-size: 20px
text: '=props.roomLabel ? props.roomLabel : "Room Name"'
- component: f7-row
config:
class:
- justify-content-left
- align-items-center
- display-flex
slots:
default:
- component: f7-col
config:
class:
- padding-half
style:
width: 60px
slots:
default:
- component: oh-icon
config:
icon: iconify:clarity:lightbulb-line
style:
color: '=items[props.switchItem].state == "ON" ? "rgb(89,150,88)" : "rgba(29, 22,28,0.32 )"'
height: 100%
opacity: 0.7
width: 100%
- component: oh-toggle
config:
item: =props.switchItem
style:
--f7-toggle-active-color: rgb(89,150,88)
--f7-toggle-inactive-color: rgba(29, 22,28,0.32 )
- component: f7-col
config:
class:
- display-flex
- flex-direction-column
style:
flex-grow: 1
slots:
default:
- component: f7-row
config:
class:
- overflow-hidden
style:
width: 100%
slots:
default:
- component: Label
config:
style:
color: RGB(79, 92, 106)
font-size: 16px
font-weight: bold
text: '=props.lightBulbLabel ? props.lightBulbLabel : "TBD"'
- component: f7-row
config:
class:
- display-flex
- flex-direction-column
style:
color: RGB(79, 92, 106)
width: 100%
slots:
default:
- component: Label
config:
text: '=props.dimmerItem ? (items[props.dimmerItem].state + "%") : ""'
- component: f7-col
config:
class:
- display-flex
- flex-direction-column
style:
display: flex
flex-grow: 1
height: 100%
margin-right: 50px
width: 10%
slots:
default:
- component: oh-slider
config:
item: =props.dimmerItem
max: 100
min: 1
step: 1
style:
--f7-range-bar-active-bg-color: RGB(255, 180, 0)
--f7-range-bar-size: 4px
--f7-range-knob-bg-color: RGB(255, 165, 109)
--f7-range-knob-border-radius: 50%
--f7-range-knob-size: 20px
align-items: left
display: '=props.dimmerItem ? "block" : "none"'
justify-content: center
margin-left: 50px
margin-right: 60px
margin-top: 30px
max-width: 100%
width: 100%
- component: hr
config:
style:
border: solid
border-color: RGB(79, 92, 106)
border-width: 1px
margin-top: 30px
width: 100%
- component: f7-row
config:
class:
- justify-content-left
- align-items-center
- display-flex
style:
width: 100%
slots:
default:
- component: f7-col
config:
class:
- padding-half
style:
width: 60px
slots:
default:
- component: oh-icon
config:
icon: iconify:mdi:window-shutter
style:
color: rgba(29, 22,28,0.32 )
height: 100%
opacity: 0.7
width: 100%
- component: f7-col
config:
class:
- display-flex
- flex-direction-column
style:
flex-grow: 1
slots:
default:
- component: f7-row
config:
class:
- overflow-hidden
style:
width: 100%
slots:
default:
- component: Label
config:
style:
color: RGB(79, 92, 106)
font-size: 16px
font-weight: bold
text: '=props.blindsLabel ? props.blindsLabel : "TBD"'
- component: f7-row
config:
class:
- display-flex
- flex-direction-row
- justify-content-left
style:
width: 100%
slots:
default:
- component: f7-chip
config:
style:
background-color: rgba(0,0,0,0.1)
color: RGB(79, 92, 180)
justify-content: flex-end
text: '=items[props.blindsItem].state == "100" || items[props.blindsItem].displayState == "100" ? "Closed" : items[props.blindsItem].state == "0" || items[props.blindsItem].displayState == "0" ? "Open" : items[props.blindsItem].state + "% closed" || items[props.blindsItem].displayState + "% closed"'
- component: f7-col
config:
class:
- display-flex
- flex-direction-row
style:
min-width: 130px
slots:
default:
- component: f7-col
config:
class:
- no-margin
- display-flex
- flex-direction-col
- justify-content-center
- align-items-center
style:
height: 100%
width: 100%
slots:
default:
- component: oh-button
config:
action: command
actionCommand: UP
actionItem: =props.blindsItem
class:
- no-padding
iconF7: arrow_up_circle
iconSize: 32
style:
color: RGB(79, 165, 109)
height: 100%
- component: oh-button
config:
action: command
actionCommand: STOP
actionItem: =props.blindsItem
class:
- no-padding
iconF7: stop_circle
iconSize: 32
style:
color: var(--f7-toggle-inactive-color)
height: 100%
- component: oh-button
config:
action: command
actionCommand: DOWN
actionItem: =props.blindsItem
class:
- no-padding
iconF7: arrow_down_circle
iconSize: 32
style:
color: RGB(79, 165, 109)
height: 100%
- component: oh-slider
config:
item: =props.blindsItem
max: 100
min: 1
step: 1
style:
--f7-range-bar-active-bg-color: RGB(255, 180, 0)
--f7-range-bar-size: 4px
--f7-range-knob-bg-color: RGB(79, 165, 109)
--f7-range-knob-border-radius: 50%
--f7-range-knob-size: 20px
align-items: left
justify-content: center
margin-left: 50px
margin-right: 60px
margin-top: 30px
max-width: 100%
width: 100%
- component: hr
config:
style:
border: solid
border-color: RGB(79, 92, 106)
border-width: 1px
margin-top: 30px
width: 100%
- component: f7-row
config:
class:
- justify-content-left
- align-items-center
- display-flex
style:
flex-grow: 1
slots:
default:
- component: f7-col
config:
class:
- padding-half
style:
width: 60px
slots:
default:
- component: oh-icon
config:
icon: iconify:iconoir:air-conditioner
style:
color: '=items[props.acItem].state == "ON" ? "rgb(89,150,88)" : " rgba(29, 22,28,0.32 )"'
height: 100%
opacity: 0.7
width: 100%
- component: f7-col
config:
class:
- display-flex
- justify-content-center
- margin-right
slots:
default:
- component: oh-toggle
config:
item: =props.acItem
style:
--f7-toggle-active-color: rgb(89,150,88)
--f7-toggle-inactive-color: rgba(29, 22,28,0.32 )
- component: f7-col
config:
class:
- display-flex
- flex-direction-column
style:
flex-grow: 1
slots:
default:
- component: f7-row
config:
class:
- overflow-hidden
style:
color: RGB(79, 92, 106)
width: 100%
slots:
default:
- component: Label
config:
style:
font-size: 16px
font-weight: bold
text: '=props.acLabel ? props.acLabel : "TBD"'
- component: f7-row
config:
class:
- display-flex
- flex-direction-column
style:
color: RGB(109, 130, 255)
width: 100%
slots: {}
- component: f7-row
config:
class:
- display-flex
- flex-direction-row
- justify-content-left
style:
width: 100%
slots:
default:
- component: f7-chip
config:
style:
background-color: rgba(0,0,0,0.1)
color: RGB(79, 92, 180)
justify-content: flex-end
text: '=items[props.fanSpeedItem].state ? "Fan Speed: " + items[props.fanSpeedItem].state + " %" : "Fan Speed: "'
- component: f7-row
config:
class:
- display-flex
- flex-direction-row
- justify-content-left
style:
color: RGB(109, 130, 255)
width: 100%
slots:
default:
- component: f7-chip
config:
style:
background-color: rgba(0,0,0,0.1)
color: RGB(79, 92, 180)
justify-content: flex-end
text: '="Room: " + (items[props.roomTempItem].state ? Number.parseFloat(items[props.roomTempItem].state).toFixed(1) + " °C" : "-")'
- component: f7-row
config:
class:
- align-items-flex-end
style:
flex-direction: row
justify-content: flex-end
slots:
default:
- component: oh-button
config:
action: command
actionCommand: =Number(items[props.acTempItem].state.split(' ')[0]) + 1.0
actionItem: =props.acTempItem
iconF7: arrow_up_circle
iconSize: 32
style:
color: RGB(79, 165, 109)
height: auto
- component: f7-chip
config:
style:
background: none
background-color: rgba(0,0,0,0.1)
color: RGB(79, 92, 180)
justify-content: flex-end
text: '="AC: " + (items[props.acTempItem].state ? items[props.acTempItem].state + " °C" : "-")'
- component: oh-button
config:
action: command
actionCommand: =Number(items[props.acTempItem].state.split(' ')[0]) - 1.0
actionItem: =props.acTempItem
iconF7: arrow_down_circle
iconSize: 32
style:
color: RGB(79, 165, 109)
height: auto
- component: f7-row
config:
style:
display: flex
height: 100%
width: 100%
slots:
default:
- component: oh-button
config:
action: command
actionCommand: 33
actionItem: =props.fanSpeedItem
iconSize: 32
style:
align-items: center
background: RGB(79, 92, 106)
borderRadius: 50%
color: white
display: flex
height: 50px
justify-content: center
margin: 8px
width: 50px
text: Low
- component: oh-button
config:
action: command
actionCommand: 67
actionItem: =props.fanSpeedItem
iconSize: 32
style:
align-items: center
background: RGB(79, 92, 106)
borderRadius: 50%
color: white
display: flex
height: 50px
justify-content: center
margin: 8px
width: 50px
text: Med
- component: oh-button
config:
action: command
actionCommand: 100
actionItem: =props.fanSpeedItem
iconSize: 32
style:
align-items: center
background: RGB(79, 92, 106)
borderRadius: 50%
color: white
display: flex
height: 50px
justify-content: center
margin: 8px
width: 50px
text: High