Hi @Christopher_Hemmings
Here you go. sorry for the delay
config:
label: Home
sidebar: true
blocks:
- component: oh-block
config:
title: Air Quality
slots:
default:
- component: oh-block
config:
title: Air Purifiers
slots:
default:
- component: oh-grid-row
config: {}
slots:
default:
- component: oh-grid-col
config:
width: 100
xsmall: 50
small: 25
large: 35
slots:
default:
- component: oh-label-cell
config:
item: Hall_AP_Power
header: Hall Air Puifier
icon: f7:power
action: toggle
actionItem: Hall_AP_Power
actionCommand: ON
actionCommandAlt: OFF
expandable: true
color: =(items.Hall_AP_Power.state==="ON"?"lightblue":"")
stateStyle:
fontSize: 37px
footer: '="Mode:
"+items.AirPurifier_Hall_Mode.state+(items.AirPurifier_Hall_Mode.state==="favorite"?("
("+items.Hall_AP_FavoriteLevel.state+")"):"")'
backdrop: true
swipeToClose: true
actionFeedback: '{ "text":"Done",
"closeButton":"true" }'
slots:
default:
- component: f7-card-content
config:
style:
padding: 50px
margin-top: 20px
slots:
default:
- component: widget:Airpurifier_widget8
config:
Title: Hall Air Purifier
BGColor: lightblue
Power_item: Hall_AP_Power
Mode_item: AirPurifier_Hall_Mode
Fav_item: Hall_AP_FavoriteLevel
AQI_item: Hall_AQI
Temp_item: Hall_Temperature
Humidity_item: Hall_Humidity
- component: oh-grid-col
config:
width: 100
xsmall: 50
small: 25
large: 15
slots:
default:
- component: oh-label-cell
config:
color: =(items.Hall_AQI.state>140)?"red":""
on: true
title: AQI
expandable: false
icon: f7:smoke
actionAnalyzerCoordSystem: time
action: analyzer
actionAnalyzerItems:
- Hall_AQI
item: Hall_AQI
footer: '=("Temp: "+items.Hall_Temperature.displayState+" Rh:
"+items.Hall_Humidity.displayState)'
stateStyle:
fontSize: 37px
- component: oh-grid-col
config:
width: 100
xsmall: 50
small: 25
large: 35
slots:
default:
- component: oh-label-cell
config:
item: Bedroom_AP_Power
header: Bedroom AP
icon: f7:power
footer: '="Mode:
"+items.Bedroom_AP_Mode.state+(items.Bedroom_AP_Mode.state==="favorite"?("
("+items.Bedroom_AP_FavoriteLevel.state+")"):"")'
action: toggle
actionItem: Bedroom_AP_Power
actionCommand: ON
actionCommandAlt: OFF
expandable: true
color: =(items.Bedroom_AP_Power.state==="ON"?"green":"")
stateStyle:
fontSize: 37px
backdrop: true
swipeToClose: true
slots:
default:
- component: f7-card-content
config:
style:
padding: 50px
margin-top: 20px
slots:
default:
- component: widget:Airpurifier_widget8
config:
Title: Bedroom Air Purifier
BGColor: lightgreen
Power_item: Bedroom_AP_Power
Mode_item: Bedroom_AP_Mode
Fav_item: Bedroom_AP_FavoriteLevel
AQI_item: Bedroom_AQI
Temp_item: Bedroom_Temperature
Humidity_item: Bedroom_Humidity
- component: oh-grid-col
config:
width: 100
xsmall: 50
small: 25
large: 15
slots:
default:
- component: oh-label-cell
config:
color: =(items.Bedroom_AQI.state>70)?"red":""
on: true
action: analyzer
actionAnalyzerItems:
- Bedroom_AQI
item: Bedroom_AQI
title: AQI
expandable: false
icon: f7:smoke
footer: '=("Temp: "+items.Bedroom_Temperature.displayState+" Rh:
"+items.Bedroom_Humidity.displayState)'
actionAnalyzerCoordSystem: time
stateStyle:
fontSize: 37px
- component: oh-block
config:
title: Others
slots:
default:
- component: oh-grid-row
config: {}
slots:
default:
- component: oh-grid-col
config:
width: 100
xsmall: 50
small: 20
slots:
default:
- component: oh-label-cell
config:
header: Computer Power
footer: '="Last seen: "+(items.Computer_LastSeen_ForDisplay.displayState)'
icon: f7:device_desktop
stateStyle:
fontSize: 40px
item: ComputerPower
color: =(items.ComputerPower.state=="ON")?"green":""
action: toggle
actionCommand: ON
actionCommandAlt: OFF
actionItem: ComputerPower
on: =(items.ComputerPower.state=="ON")
expandable: false
- component: oh-grid-col
config:
width: 100
xsmall: 50
small: 20
slots:
default:
- component: oh-label-cell
config:
header: TV Power
footer: '="Input: "+(items.RoomTVMode.state)'
icon: f7:tv
stateStyle:
fontSize: 40px
color: =(items.RoomTVPower.state=="ON")?"green":""
item: RoomTVPower
action: toggle
actionItem: RoomTVPower
actionCommand: ON
actionCommandAlt: OFF
slots:
default:
- component: oh-button
config:
text: FireTV
action: command
actionItem: =props.Mode_item
actionCommand: FireTV
outline: true
round: true
raised: true
color: =(items[props.Mode_item].state=="FireTV")?"green":"transparent"
style:
--f7-button-outline-border-color: green
--f7-button-border-width: 1px
--f7-button-text-color: black
--f7-button-border-radius: 8px
min-width: 30%
width: 400px
--f7-button-height: 70px
--f7-button-hover-bg-color: rgba(0, 255, 0, 0.4)
- component: oh-button
config:
text: Computer
action: command
actionItem: =props.Mode_item
actionCommand: Computer
outline: true
round: true
raised: true
color: =(items[props.Mode_item].state=="Computer")?"green":"transparent"
style:
--f7-button-outline-border-color: green
--f7-button-border-width: 1px
--f7-button-text-color: black
--f7-button-border-radius: 8px
min-width: 30%
margin-top: 20px
margin-bottom: 20px
--f7-button-width: 400px
--f7-button-height: 70px
--f7-button-hover-bg-color: rgba(0, 255, 0, 0.4)
- component: oh-button
config:
text: RaspberryPi
action: command
actionItem: =props.Mode_item
actionCommand: RaspberryPi
outline: true
color: =(items[props.Mode_item].state=="RaspberryPi")?"green":"transparent"
round: true
raised: true
style:
--f7-button-outline-border-color: green
--f7-button-border-width: 1px
--f7-button-text-color: black
--f7-button-border-radius: 8px
min-width: 30%
--f7-button-width: 400px
--f7-button-height: 70px
--f7-button-hover-bg-color: rgba(0, 255, 0, 0.4)
margin-bottom: 20px
- component: oh-button
config:
text: HDMI3
action: command
actionItem: =props.Mode_item
actionCommand: HDMI3
outline: true
color: =(items[props.Mode_item].state=="HDMI3")?"green":"transparent"
round: true
raised: true
style:
--f7-button-outline-border-color: green
--f7-button-border-width: 1px
--f7-button-text-color: black
--f7-button-border-radius: 8px
min-width: 30%
--f7-button-width: 400px
--f7-button-height: 70px
--f7-button-hover-bg-color: rgba(0, 255, 0, 0.4)
- component: oh-grid-col
config:
width: 100
xsmall: 50
small: 20
slots:
default:
- component: oh-label-cell
config:
header: Geyser Power
icon: f7:line_horizontal_3_decrease_circle
stateStyle:
fontSize: 40px
color: =(items.Geyser.state=="ON")?"green":""
item: Geyser
action: toggle
actionItem: Geyser
actionCommand: ON
actionCommandAlt: OFF
footer: '="Since: "+(items.Geyser_LastChange_ForDisplay.displayState)'
expandable: false
- component: oh-grid-col
config:
width: 100
xsmall: 50
small: 20
slots:
default:
- component: oh-label-cell
config:
header: V Geyser Power
icon: f7:line_horizontal_3_decrease_circle
stateStyle:
fontSize: 40px
color: =(items.VGeyser_VGetserySwitch.state=="ON")?"green":""
item: VGeyser_VGetserySwitch
action: toggle
actionItem: VGeyser_VGetserySwitch
actionCommand: ON
actionCommandAlt: OFF
footer: '="Since: "+(items.VGeyser_Switch_LastChange_ForDisplay.displayState)'
expandable: false
- component: oh-grid-col
config:
width: 100
xsmall: 50
small: 20
slots:
default:
- component: oh-label-cell
config:
header: Switch (Tuya)
icon: f7:arrow_right_arrow_left_circle
stateStyle:
fontSize: 40px
color: =(items.TuyaSwitch1.state=="ON")?"lime":""
item: TuyaSwitch1
action: toggle
actionItem: TuyaSwitch1
actionCommand: ON
actionCommandAlt: OFF
footer: ""
expandable: false
masonry: null
The widget Airpurifier_widget8
is an additional list based widget. you can anything else in place of it