This comprehensive irrigation widget provides complete control and monitoring for multi-zone irrigation systems with smart water usage tracking. Perfect for garden automation with soil moisture monitoring, zone-based watering, and detailed water consumption statistics.
Features
Multi-zone irrigation control (up to 5 zones)
Flexible configuration - zones 2-5 and water outlets are optional
Individual zone timers with adjustable duration
Soil moisture monitoring per zone
Water consumption statistics with color-coded alerts
Automatic/manual modes with winter mode support
Expandable/collapsible interface for clean UI
Water outlet control with separate timer
Smart water usage tracking (daily, weekly, monthly, yearly)
Widget Configuration
The widget uses a flexible parameter system where you can configure only the zones and features you need:
Required Parameters
- Zone 1: Always required as the primary irrigation zone
- Automation Control: Switch for automatic irrigation
- Seeding Mode: Switch for special seeding irrigation mode
- Winter Mode: Switch to disable irrigation during winter
Optional Parameters (Zones 2-5)
- Zone X Control: Switch item for zone activation
- Zone X Moisture: Soil moisture sensor reading
- Zone X Duration: Timer duration for the zone
Optional Water Outlets
- Water Outlets Control: Switch for manual water outlets
- Water Outlets Timer: Duration control for outlets
Optional Water Statistics
- Water Meter: Total water meter reading
- Daily/Weekly/Monthly/Yearly: Consumption tracking
- Daily Average: Average daily consumption with color alerts
uid: widget_irrigation_control_v1
tags: []
props:
parameters:
# Required Parameters
- context: item
description: Switch for automatic irrigation
label: Irrigation Automation
name: irrigation_auto_item
required: true
type: TEXT
- context: item
description: Switch for seeding automation
label: Seeding Automation
name: seeding_auto_item
required: true
type: TEXT
- context: item
description: Switch for winter mode
label: Winter Mode
name: winter_mode_item
required: true
type: TEXT
# Zone 1 (Required)
- context: item
description: Switch for Zone 1
label: Zone 1 Control
name: zone1_control_item
required: true
type: TEXT
- context: item
description: Soil moisture sensor for Zone 1
label: Zone 1 Soil Moisture
name: zone1_moisture_item
required: false
type: TEXT
- context: item
description: Zone 1 irrigation duration in minutes
label: Zone 1 Duration
name: zone1_duration_item
required: false
type: TEXT
# Zone 2 (Optional)
- context: item
description: Switch for Zone 2
label: Zone 2 Control
name: zone2_control_item
required: false
type: TEXT
- context: item
description: Soil moisture sensor for Zone 2
label: Zone 2 Soil Moisture
name: zone2_moisture_item
required: false
type: TEXT
- context: item
description: Zone 2 irrigation duration in minutes
label: Zone 2 Duration
name: zone2_duration_item
required: false
type: TEXT
# Zone 3 (Optional)
- context: item
description: Switch for Zone 3
label: Zone 3 Control
name: zone3_control_item
required: false
type: TEXT
- context: item
description: Soil moisture sensor for Zone 3
label: Zone 3 Soil Moisture
name: zone3_moisture_item
required: false
type: TEXT
- context: item
description: Zone 3 irrigation duration in minutes
label: Zone 3 Duration
name: zone3_duration_item
required: false
type: TEXT
# Zone 4 (Optional)
- context: item
description: Switch for Zone 4
label: Zone 4 Control
name: zone4_control_item
required: false
type: TEXT
- context: item
description: Soil moisture sensor for Zone 4
label: Zone 4 Soil Moisture
name: zone4_moisture_item
required: false
type: TEXT
- context: item
description: Zone 4 irrigation duration in minutes
label: Zone 4 Duration
name: zone4_duration_item
required: false
type: TEXT
# Zone 5 (Optional)
- context: item
description: Switch for Zone 5
label: Zone 5 Control
name: zone5_control_item
required: false
type: TEXT
- context: item
description: Soil moisture sensor for Zone 5
label: Zone 5 Soil Moisture
name: zone5_moisture_item
required: false
type: TEXT
- context: item
description: Zone 5 irrigation duration in minutes
label: Zone 5 Duration
name: zone5_duration_item
required: false
type: TEXT
# Water Outlets (Optional)
- context: item
description: Switch for water outlets
label: Water Outlets Control
name: water_outlets_control_item
required: false
type: TEXT
- context: item
description: Water outlets timer in minutes
label: Water Outlets Timer
name: water_outlets_timer_item
required: false
type: TEXT
# Water Statistics (Optional)
- context: item
description: Garden water meter total reading
label: Water Meter
name: garden_water_meter_item
required: false
type: TEXT
- context: item
description: Garden water consumption today
label: Water Today
name: garden_water_today_item
required: false
type: TEXT
- context: item
description: Garden water consumption yesterday
label: Water Yesterday
name: garden_water_yesterday_item
required: false
type: TEXT
- context: item
description: Garden water consumption this week
label: Water This Week
name: garden_water_week_item
required: false
type: TEXT
- context: item
description: Garden water consumption this month
label: Water This Month
name: garden_water_month_item
required: false
type: TEXT
- context: item
description: Garden water consumption this year
label: Water This Year
name: garden_water_year_item
required: false
type: TEXT
- context: item
description: Garden water daily average consumption
label: Water Daily Average
name: garden_water_daily_avg_item
required: false
type: TEXT
timestamp: Aug 2, 2025, 9:00:00 PM
component: f7-card
config:
noBorder: true
noShadow: true
style:
--f7-list-item-border-color: transparent
border-radius: var(--f7-card-expandable-border-radius)
margin-left: 5px
margin-right: 5px
slots:
default:
- component: f7-card-content
slots:
default:
- component: f7-row
config:
class:
- display-flex
- justify-content-space-between
- align-items-center
style:
margin-bottom: "=vars.expandedIrrigation === 'true' ? '10px' : '0px'"
margin-top: -5px
padding: "=vars.expandedIrrigation === 'true' ? '0px 16px 8px 16px' : '0px 16px 25px 16px'"
slots:
default:
- component: f7-col
config:
width: 60
slots:
default:
- component: Label
config:
style:
font-size: 18px
font-weight: bold
text: 🌱 Irrigation
- component: f7-col
config:
style:
text-align: center
width: 25
slots:
default:
- component: f7-icon
config:
f7: drop_fill
size: 20
style:
color: "#2196F3"
visible: =((props.zone1_control_item && items[props.zone1_control_item].state === 'ON') ||
(props.zone2_control_item && items[props.zone2_control_item].state === 'ON') ||
(props.zone3_control_item && items[props.zone3_control_item].state === 'ON') ||
(props.zone4_control_item && items[props.zone4_control_item].state === 'ON') ||
(props.zone5_control_item && items[props.zone5_control_item].state === 'ON') ||
(props.water_outlets_control_item && items[props.water_outlets_control_item].state === 'ON'))
- component: f7-col
config:
style:
text-align: right
width: 15
slots:
default:
- component: oh-button
config:
action: variable
actionVariable: expandedIrrigation
actionVariableValue: "=vars.expandedIrrigation === 'true' ? 'false' : 'true'"
style:
--f7-button-bg-color: transparent
--f7-button-border-radius: 50%
--f7-button-height: 30px
--f7-button-width: 30px
align-items: center
display: flex
height: 30px
justify-content: center
min-height: 30px
width: 30px
slots:
default:
- component: f7-icon
config:
f7: "=vars.expandedIrrigation === 'true' ? 'chevron_up' : 'chevron_down'"
size: 16
style:
color: "#666"
- component: f7-block
config:
style:
height: "=vars.expandedIrrigation === 'true' ? 'auto' : '0px'"
opacity: "=vars.expandedIrrigation === 'true' ? '1' : '0'"
overflow: hidden
padding: "=vars.expandedIrrigation === 'true' ? '10px' : '0px'"
transition: all 0.3s ease
slots:
default:
# Zone 1 (Always visible)
- component: Label
config:
style:
color: "#333"
font-size: 14px
font-weight: bold
margin-bottom: 5px
margin-top: 15px
text: "=(props.zone1_moisture_item) ? ('Zone 1: Main Lawn Area ' + items[props.zone1_moisture_item].state + '%') : 'Zone 1: Main Lawn Area'"
- component: f7-row
config:
style:
margin-bottom: 15px
slots:
default:
- component: f7-col
config:
style:
text-align: center
width: 30
slots:
default:
- component: oh-button
config:
action: command
actionCommand: "=(props.zone1_control_item && items[props.zone1_control_item].state === 'ON') ? 'OFF' : 'ON'"
actionItem: =props.zone1_control_item
style:
--f7-button-bg-color: "=(props.zone1_control_item && items[props.zone1_control_item].state === 'ON') ? '#2196F3' : 'rgba(224,224,224,0.8)'"
--f7-button-border-radius: 8px
--f7-button-height: 50px
align-items: center
border-radius: 8px
display: flex
height: 50px
justify-content: center
min-height: 50px
width: 100%
slots:
default:
- component: oh-icon
config:
color: "=(props.zone1_control_item && items[props.zone1_control_item].state === 'ON') ? 'white' : '#666'"
height: 24
icon: classic:mp-rotator
width: 24
- component: f7-col
config:
width: 45
- component: f7-col
config:
style:
text-align: center
width: 25
slots:
default:
- component: f7-chip
config:
style:
background: "=(props.zone1_control_item && items[props.zone1_control_item].state === 'ON') ? '#2196F3' : '#90A4AE'"
color: white
font-size: 14px
font-weight: bold
margin-top: 12px
text: "=(props.zone1_duration_item) ? (items[props.zone1_duration_item].state + ' min') : '20 min'"
# Zone 2 (Conditional)
- component: Label
config:
style:
color: "#333"
font-size: 14px
font-weight: bold
margin-bottom: 5px
margin-top: 15px
text: "=(props.zone2_moisture_item) ? ('Zone 2: Upper Slope ' + items[props.zone2_moisture_item].state + '%') : 'Zone 2: Upper Slope'"
visible: =props.zone2_control_item ? true : false
- component: f7-row
config:
style:
margin-bottom: 15px
visible: =props.zone2_control_item ? true : false
slots:
default:
- component: f7-col
config:
style:
text-align: center
width: 30
slots:
default:
- component: oh-button
config:
action: command
actionCommand: "=(props.zone2_control_item && items[props.zone2_control_item].state === 'ON') ? 'OFF' : 'ON'"
actionItem: =props.zone2_control_item
style:
--f7-button-bg-color: "=(props.zone2_control_item && items[props.zone2_control_item].state === 'ON') ? '#2196F3' : 'rgba(224,224,224,0.8)'"
--f7-button-border-radius: 8px
--f7-button-height: 50px
align-items: center
border-radius: 8px
display: flex
height: 50px
justify-content: center
min-height: 50px
width: 100%
slots:
default:
- component: oh-icon
config:
color: "=(props.zone2_control_item && items[props.zone2_control_item].state === 'ON') ? 'white' : '#666'"
height: 24
icon: classic:mp-rotator
width: 24
- component: f7-col
config:
width: 45
- component: f7-col
config:
style:
text-align: center
width: 25
slots:
default:
- component: f7-chip
config:
style:
background: "=(props.zone2_control_item && items[props.zone2_control_item].state === 'ON') ? '#2196F3' : '#90A4AE'"
color: white
font-size: 14px
font-weight: bold
margin-top: 12px
text: "=(props.zone2_duration_item) ? (items[props.zone2_duration_item].state + ' min') : '20 min'"
# Zone 3 (Conditional)
- component: Label
config:
style:
color: "#333"
font-size: 14px
font-weight: bold
margin-bottom: 5px
margin-top: 15px
text: "=(props.zone3_moisture_item) ? ('Zone 3: Middle Lawn Area ' + items[props.zone3_moisture_item].state + '%') : 'Zone 3: Middle Lawn Area'"
visible: =props.zone3_control_item ? true : false
- component: f7-row
config:
style:
margin-bottom: 15px
visible: =props.zone3_control_item ? true : false
slots:
default:
- component: f7-col
config:
style:
text-align: center
width: 30
slots:
default:
- component: oh-button
config:
action: command
actionCommand: "=(props.zone3_control_item && items[props.zone3_control_item].state === 'ON') ? 'OFF' : 'ON'"
actionItem: =props.zone3_control_item
style:
--f7-button-bg-color: "=(props.zone3_control_item && items[props.zone3_control_item].state === 'ON') ? '#2196F3' : 'rgba(224,224,224,0.8)'"
--f7-button-border-radius: 8px
--f7-button-height: 50px
align-items: center
border-radius: 8px
display: flex
height: 50px
justify-content: center
min-height: 50px
width: 100%
slots:
default:
- component: oh-icon
config:
color: "=(props.zone3_control_item && items[props.zone3_control_item].state === 'ON') ? 'white' : '#666'"
height: 24
icon: classic:mp-rotator
width: 24
- component: f7-col
config:
width: 45
- component: f7-col
config:
style:
text-align: center
width: 25
slots:
default:
- component: f7-chip
config:
style:
background: "=(props.zone3_control_item && items[props.zone3_control_item].state === 'ON') ? '#2196F3' : '#90A4AE'"
color: white
font-size: 14px
font-weight: bold
margin-top: 12px
text: "=(props.zone3_duration_item) ? (items[props.zone3_duration_item].state + ' min') : '20 min'"
# Zone 4 (Conditional)
- component: Label
config:
style:
color: "#333"
font-size: 14px
font-weight: bold
margin-bottom: 5px
margin-top: 15px
text: "=(props.zone4_moisture_item) ? ('Zone 4: Lower Slope ' + items[props.zone4_moisture_item].state + '%') : 'Zone 4: Lower Slope'"
visible: =props.zone4_control_item ? true : false
- component: f7-row
config:
style:
margin-bottom: 15px
visible: =props.zone4_control_item ? true : false
slots:
default:
- component: f7-col
config:
style:
text-align: center
width: 30
slots:
default:
- component: oh-button
config:
action: command
actionCommand: "=(props.zone4_control_item && items[props.zone4_control_item].state === 'ON') ? 'OFF' : 'ON'"
actionItem: =props.zone4_control_item
style:
--f7-button-bg-color: "=(props.zone4_control_item && items[props.zone4_control_item].state === 'ON') ? '#2196F3' : 'rgba(224,224,224,0.8)'"
--f7-button-border-radius: 8px
--f7-button-height: 50px
align-items: center
border-radius: 8px
display: flex
height: 50px
justify-content: center
min-height: 50px
width: 100%
slots:
default:
- component: oh-icon
config:
color: "=(props.zone4_control_item && items[props.zone4_control_item].state === 'ON') ? 'white' : '#666'"
height: 24
icon: classic:mp-rotator
width: 24
- component: f7-col
config:
width: 45
- component: f7-col
config:
style:
text-align: center
width: 25
slots:
default:
- component: f7-chip
config:
style:
background: "=(props.zone4_control_item && items[props.zone4_control_item].state === 'ON') ? '#2196F3' : '#90A4AE'"
color: white
font-size: 14px
font-weight: bold
margin-top: 12px
text: "=(props.zone4_duration_item) ? (items[props.zone4_duration_item].state + ' min') : '20 min'"
# Zone 5 (Conditional)
- component: Label
config:
style:
color: "#333"
font-size: 14px
font-weight: bold
margin-bottom: 5px
margin-top: 15px
text: "=(props.zone5_moisture_item) ? ('Zone 5: Lower Lawn Area ' + items[props.zone5_moisture_item].state + '%') : 'Zone 5: Lower Lawn Area'"
visible: =props.zone5_control_item ? true : false
- component: f7-row
config:
style:
margin-bottom: 15px
visible: =props.zone5_control_item ? true : false
slots:
default:
- component: f7-col
config:
style:
text-align: center
width: 30
slots:
default:
- component: oh-button
config:
action: command
actionCommand: "=(props.zone5_control_item && items[props.zone5_control_item].state === 'ON') ? 'OFF' : 'ON'"
actionItem: =props.zone5_control_item
style:
--f7-button-bg-color: "=(props.zone5_control_item && items[props.zone5_control_item].state === 'ON') ? '#2196F3' : 'rgba(224,224,224,0.8)'"
--f7-button-border-radius: 8px
--f7-button-height: 50px
align-items: center
border-radius: 8px
display: flex
height: 50px
justify-content: center
min-height: 50px
width: 100%
slots:
default:
- component: oh-icon
config:
color: "=(props.zone5_control_item && items[props.zone5_control_item].state === 'ON') ? 'white' : '#666'"
height: 24
icon: classic:mp-rotator
width: 24
- component: f7-col
config:
width: 45
- component: f7-col
config:
style:
text-align: center
width: 25
slots:
default:
- component: f7-chip
config:
style:
background: "=(props.zone5_control_item && items[props.zone5_control_item].state === 'ON') ? '#2196F3' : '#90A4AE'"
color: white
font-size: 14px
font-weight: bold
margin-top: 12px
text: "=(props.zone5_duration_item) ? (items[props.zone5_duration_item].state + ' min') : '20 min'"
# Water Outlets (Conditional)
- component: Label
config:
style:
color: "#333"
font-size: 14px
font-weight: bold
margin-bottom: 5px
margin-top: 15px
text: 🚰 Water Outlets
visible: =props.water_outlets_control_item ? true : false
- component: f7-row
config:
style:
margin-bottom: 15px
visible: =props.water_outlets_control_item ? true : false
slots:
default:
- component: f7-col
config:
style:
text-align: center
width: 30
slots:
default:
- component: oh-button
config:
action: command
actionCommand: "=(props.water_outlets_control_item && items[props.water_outlets_control_item].state === 'ON') ? 'OFF' : 'ON'"
actionItem: =props.water_outlets_control_item
style:
--f7-button-bg-color: "=(props.water_outlets_control_item && items[props.water_outlets_control_item].state === 'ON') ? '#2196F3' : 'rgba(224,224,224,0.8)'"
--f7-button-border-radius: 8px
--f7-button-height: 50px
align-items: center
border-radius: 8px
display: flex
height: 50px
justify-content: center
min-height: 50px
width: 100%
slots:
default:
- component: oh-icon
config:
color: "=(props.water_outlets_control_item && items[props.water_outlets_control_item].state === 'ON') ? 'white' : '#666'"
height: 24
icon: faucet
width: 24
- component: f7-col
config:
width: 45
- component: f7-col
config:
style:
text-align: center
width: 25
slots:
default:
- component: f7-chip
config:
style:
background: "=(props.water_outlets_control_item && items[props.water_outlets_control_item].state === 'ON') ? '#2196F3' : '#90A4AE'"
color: white
font-size: 14px
font-weight: bold
margin-top: 12px
text: "=(props.water_outlets_timer_item) ? (items[props.water_outlets_timer_item].state + ' min') : '30 min'"
# Control Buttons Row
- component: f7-row
config:
style:
align-items: center
display: flex
flex-direction: row
justify-content: space-around
margin-top: 20px
slots:
default:
- component: f7-col
config:
width: 30
slots:
default:
- component: oh-link
config:
action: popover
popoverOpen: "#irrigationSettings"
style:
align-items: center
background: rgba(33, 150, 243, 0.1)
border-radius: 8px
display: flex
height: 40px
justify-content: center
text-decoration: none
width: 100%
slots:
default:
- component: f7-icon
config:
f7: gear
style:
color: "#2196F3"
font-size: 20px
- component: f7-col
config:
width: 30
slots:
default:
- component: oh-link
config:
action: popover
popoverOpen: "#timerSettings"
style:
align-items: center
background: rgba(33, 150, 243, 0.1)
border-radius: 8px
display: flex
height: 40px
justify-content: center
text-decoration: none
width: 100%
slots:
default:
- component: f7-icon
config:
f7: timer
style:
color: "#2196F3"
font-size: 20px
- component: f7-col
config:
width: 30
visible: =props.garden_water_meter_item ? true : false
slots:
default:
- component: oh-link
config:
action: popover
popoverOpen: "#waterStatistics"
style:
align-items: center
background: rgba(33, 150, 243, 0.1)
border-radius: 8px
display: flex
height: 40px
justify-content: center
text-decoration: none
width: 100%
slots:
default:
- component: f7-icon
config:
f7: drop
style:
color: "#2196F3"
font-size: 20px
# Settings Popover
- component: f7-popover
config:
closeByBackdropClick: true
closeByOutsideClick: true
closeOnEscape: true
id: irrigationSettings
style:
border-radius: var(--f7-card-expandable-border-radius)
height: 400px
width: 300px
slots:
default:
- component: f7-block
config:
style:
align-items: center
display: flex
flex-direction: column
height: 100%
justify-content: flex-start
margin: 0
padding: 20px 16px
slots:
default:
- component: Label
config:
style:
font-size: 18px
font-weight: bold
margin-bottom: 20px
text-align: center
text: ⚙️ Settings
- component: f7-block
config:
style:
width: 100%
slots:
default:
- component: f7-list
config:
style:
margin: 0
slots:
default:
- component: f7-list-item
config:
title: Irrigation Automation
slots:
after:
- component: oh-toggle
config:
item: =props.irrigation_auto_item
- component: f7-list-item
config:
title: Seeding Automation
slots:
after:
- component: oh-toggle
config:
item: =props.seeding_auto_item
- component: f7-list-item
config:
title: Winter Mode
slots:
after:
- component: oh-toggle
config:
item: =props.winter_mode_item
# Timer Settings Popover
- component: f7-popover
config:
closeByBackdropClick: true
closeByOutsideClick: true
closeOnEscape: true
id: timerSettings
style:
border-radius: var(--f7-card-expandable-border-radius)
height: 500px
width: 350px
slots:
default:
- component: f7-block
config:
style:
align-items: center
display: flex
flex-direction: column
height: 100%
justify-content: flex-start
margin: 0
padding: 15px 16px
slots:
default:
# Zone 1 Timer
- component: f7-block
config:
style:
margin-bottom: 8px
margin-top: 0px
width: 100%
slots:
default:
- component: Label
config:
style:
font-size: 14px
margin-bottom: 3px
text: "Zone 1: Main Lawn Area"
- component: f7-row
config:
style:
align-items: center
slots:
default:
- component: f7-col
config:
width: 70
slots:
default:
- component: oh-slider
config:
item: =props.zone1_duration_item
max: 30
min: 1
step: 1
style:
--f7-range-bar-active-bg-color: "#FF9800"
--f7-range-bar-bg-color: rgba(0,0,0,0.15)
--f7-range-bar-border-radius: 8px
--f7-range-bar-size: 25px
--f7-range-knob-color: "#333333"
--f7-range-knob-size: 18px
height: 25px
width: 100%
- component: f7-col
config:
style:
text-align: center
width: 30
slots:
default:
- component: f7-chip
config:
style:
background: "#FF9800"
color: white
font-size: 11px
font-weight: bold
text: "=(props.zone1_duration_item) ? (items[props.zone1_duration_item].state + ' min') : '20 min'"
# Zone 2 Timer (Conditional)
- component: f7-block
config:
style:
margin-bottom: 8px
margin-top: 0px
width: 100%
visible: =props.zone2_duration_item ? true : false
slots:
default:
- component: Label
config:
style:
font-size: 14px
margin-bottom: 3px
text: "Zone 2: Upper Slope"
- component: f7-row
config:
style:
align-items: center
slots:
default:
- component: f7-col
config:
width: 70
slots:
default:
- component: oh-slider
config:
item: =props.zone2_duration_item
max: 30
min: 1
step: 1
style:
--f7-range-bar-active-bg-color: "#FF9800"
--f7-range-bar-bg-color: rgba(0,0,0,0.15)
--f7-range-bar-border-radius: 8px
--f7-range-bar-size: 25px
--f7-range-knob-color: "#333333"
--f7-range-knob-size: 18px
height: 25px
width: 100%
- component: f7-col
config:
style:
text-align: center
width: 30
slots:
default:
- component: f7-chip
config:
style:
background: "#FF9800"
color: white
font-size: 11px
font-weight: bold
text: "=(props.zone2_duration_item) ? (items[props.zone2_duration_item].state + ' min') : '20 min'"
# Zone 3 Timer (Conditional)
- component: f7-block
config:
style:
margin-bottom: 8px
margin-top: 0px
width: 100%
visible: =props.zone3_duration_item ? true : false
slots:
default:
- component: Label
config:
style:
font-size: 14px
margin-bottom: 3px
text: "Zone 3: Middle Lawn Area"
- component: f7-row
config:
style:
align-items: center
slots:
default:
- component: f7-col
config:
width: 70
slots:
default:
- component: oh-slider
config:
item: =props.zone3_duration_item
max: 30
min: 1
step: 1
style:
--f7-range-bar-active-bg-color: "#FF9800"
--f7-range-bar-bg-color: rgba(0,0,0,0.15)
--f7-range-bar-border-radius: 8px
--f7-range-bar-size: 25px
--f7-range-knob-color: "#333333"
--f7-range-knob-size: 18px
height: 25px
width: 100%
- component: f7-col
config:
style:
text-align: center
width: 30
slots:
default:
- component: f7-chip
config:
style:
background: "#FF9800"
color: white
font-size: 11px
font-weight: bold
text: "=(props.zone3_duration_item) ? (items[props.zone3_duration_item].state + ' min') : '20 min'"
# Zone 4 Timer (Conditional)
- component: f7-block
config:
style:
margin-bottom: 8px
margin-top: 0px
width: 100%
visible: =props.zone4_duration_item ? true : false
slots:
default:
- component: Label
config:
style:
font-size: 14px
margin-bottom: 3px
text: "Zone 4: Lower Slope"
- component: f7-row
config:
style:
align-items: center
slots:
default:
- component: f7-col
config:
width: 70
slots:
default:
- component: oh-slider
config:
item: =props.zone4_duration_item
max: 30
min: 1
step: 1
style:
--f7-range-bar-active-bg-color: "#FF9800"
--f7-range-bar-bg-color: rgba(0,0,0,0.15)
--f7-range-bar-border-radius: 8px
--f7-range-bar-size: 25px
--f7-range-knob-color: "#333333"
--f7-range-knob-size: 18px
height: 25px
width: 100%
- component: f7-col
config:
style:
text-align: center
width: 30
slots:
default:
- component: f7-chip
config:
style:
background: "#FF9800"
color: white
font-size: 11px
font-weight: bold
text: "=(props.zone4_duration_item) ? (items[props.zone4_duration_item].state + ' min') : '20 min'"
# Zone 5 Timer (Conditional)
- component: f7-block
config:
style:
margin-bottom: 8px
margin-top: 0px
width: 100%
visible: =props.zone5_duration_item ? true : false
slots:
default:
- component: Label
config:
style:
font-size: 14px
margin-bottom: 3px
text: "Zone 5: Lower Lawn Area"
- component: f7-row
config:
style:
align-items: center
slots:
default:
- component: f7-col
config:
width: 70
slots:
default:
- component: oh-slider
config:
item: =props.zone5_duration_item
max: 30
min: 1
step: 1
style:
--f7-range-bar-active-bg-color: "#FF9800"
--f7-range-bar-bg-color: rgba(0,0,0,0.15)
--f7-range-bar-border-radius: 8px
--f7-range-bar-size: 25px
--f7-range-knob-color: "#333333"
--f7-range-knob-size: 18px
height: 25px
width: 100%
- component: f7-col
config:
style:
text-align: center
width: 30
slots:
default:
- component: f7-chip
config:
style:
background: "#FF9800"
color: white
font-size: 11px
font-weight: bold
text: "=(props.zone5_duration_item) ? (items[props.zone5_duration_item].state + ' min') : '20 min'"
# Water Outlets Timer (Conditional)
- component: f7-block
config:
style:
margin-bottom: 8px
margin-top: 0px
width: 100%
visible: =props.water_outlets_timer_item ? true : false
slots:
default:
- component: Label
config:
style:
font-size: 14px
margin-bottom: 3px
text: 🚰 Water Outlets
- component: f7-row
config:
style:
align-items: center
slots:
default:
- component: f7-col
config:
width: 70
slots:
default:
- component: oh-slider
config:
item: =props.water_outlets_timer_item
max: 120
min: 5
step: 5
style:
--f7-range-bar-active-bg-color: "#FF9800"
--f7-range-bar-bg-color: rgba(0,0,0,0.15)
--f7-range-bar-border-radius: 8px
--f7-range-bar-size: 25px
--f7-range-knob-color: "#333333"
--f7-range-knob-size: 18px
height: 25px
width: 100%
- component: f7-col
config:
style:
text-align: center
width: 30
slots:
default:
- component: f7-chip
config:
style:
background: "#FF9800"
color: white
font-size: 11px
font-weight: bold
text: "=(props.water_outlets_timer_item) ? (items[props.water_outlets_timer_item].state + ' min') : '30 min'"
# Water Statistics Popover (Conditional)
- component: f7-popover
config:
closeByBackdropClick: true
closeByOutsideClick: true
closeOnEscape: true
id: waterStatistics
style:
border-radius: var(--f7-card-expandable-border-radius)
height: 450px
width: 350px
visible: =props.garden_water_meter_item ? true : false
slots:
default:
- component: f7-block
config:
style:
align-items: center
display: flex
flex-direction: column
height: 100%
justify-content: flex-start
margin: 0
padding: 15px 16px
slots:
default:
- component: Label
config:
style:
font-size: 18px
font-weight: bold
margin-bottom: 15px
text-align: center
text: 🚰 Garden Water Statistics
- component: f7-card
config:
content: false
noBorder: true
noShadow: true
outline: false
style:
width: 100%
slots:
default:
- component: f7-list
config:
noHairlines: true
noHairlinesBetween: true
style:
margin: 0
slots:
default:
- component: oh-list-item
config:
after: "=(props.garden_water_meter_item) ? (items[props.garden_water_meter_item].displayState || items[props.garden_water_meter_item].state) : 'N/A'"
style:
font-size: 14px
title: Meter Reading
- component: oh-list-item
config:
after: "=(props.garden_water_today_item) ? (items[props.garden_water_today_item].displayState || items[props.garden_water_today_item].state) : 'N/A'"
color: "=(props.garden_water_today_item && items[props.garden_water_today_item].state > 200) ? 'red' : (props.garden_water_today_item && items[props.garden_water_today_item].state > 150) ? 'orange' : 'green'"
style:
font-size: 14px
title: Today
visible: =props.garden_water_today_item ? true : false
- component: oh-list-item
config:
after: "=(props.garden_water_yesterday_item) ? (items[props.garden_water_yesterday_item].displayState || items[props.garden_water_yesterday_item].state) : 'N/A'"
style:
font-size: 14px
title: Yesterday
visible: =props.garden_water_yesterday_item ? true : false
- component: oh-list-item
config:
after: "=(props.garden_water_week_item) ? (items[props.garden_water_week_item].displayState || items[props.garden_water_week_item].state) : 'N/A'"
style:
font-size: 14px
title: This Week
visible: =props.garden_water_week_item ? true : false
- component: oh-list-item
config:
after: "=(props.garden_water_month_item) ? (items[props.garden_water_month_item].displayState || items[props.garden_water_month_item].state) : 'N/A'"
style:
font-size: 14px
title: This Month
visible: =props.garden_water_month_item ? true : false
- component: oh-list-item
config:
after: "=(props.garden_water_year_item) ? (items[props.garden_water_year_item].displayState || items[props.garden_water_year_item].state) : 'N/A'"
style:
font-size: 14px
title: This Year
visible: =props.garden_water_year_item ? true : false
- component: oh-list-item
config:
after: "=(props.garden_water_daily_avg_item) ? (items[props.garden_water_daily_avg_item].displayState || items[props.garden_water_daily_avg_item].state) : 'N/A'"
color: "=(props.garden_water_daily_avg_item && items[props.garden_water_daily_avg_item].state > 150) ? 'red' : (props.garden_water_daily_avg_item && items[props.garden_water_daily_avg_item].state > 120) ? 'orange' : 'green'"
style:
font-size: 14px
title: Ø Daily Consumption
visible: =props.garden_water_daily_avg_item ? true : false