V1.5 Update
- New ON/OFF button for Water Valve
- Adjusted card layout to suit Sections View
- Mobile view code is located here using
media_query: '(min-width: 0px) and (max-width: 767px)'. - Larger screen code located below, will ensure that 3 sections remain horizontal.
- Mobile view code is located here using
V1.5 HORIZONTAL VIEW CODE media_query: '(min-width: 768px)'
- type: grid
cards:
- type: heading
icon: mdi:flower
heading: Side Garden
heading_style: subtitle
- type: horizontal-stack
cards:
- type: horizontal-stack
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-number-card
entity: input_number.side_garden_set_moisture
display_mode: slider
name: Side Garden Set Moisture
icon_type: none
layout: horizontal
card_mod:
style:
mushroom-number-value-control$: |
mushroom-slider {
{% set nbr= states('input_number.back_garden_set_moisture') | float %}
{% if nbr<21 %}
--main-color: #F75050 !important;
--gradient: -webkit-linear-gradient(360deg, rgba(112,7,0,1) 20%, rgba(115,117,0,1) 21%, rgba(115,117,0,1) 40%, rgba(0,97,34,1) 41%, rgba(0,97,34,1) 60%, rgba(0,104,117,1) 61%) !important;
{% elif nbr<41 %}
--main-color: #55E84A !important;
--gradient: -webkit-linear-gradient(360deg, rgba(112,7,0,1) 20%, rgba(115,117,0,1) 21%, rgba(115,117,0,1) 40%, rgba(0,97,34,1) 41%, rgba(0,97,34,1) 60%, rgba(0,104,117,1) 61%) !important;
{% elif nbr<61 %}
--main-color: seagreen !important;
--gradient: -webkit-linear-gradient(360deg, rgba(112,7,0,1) 20%, rgba(115,117,0,1) 21%, rgba(115,117,0,1) 40%, rgba(0,97,34,1) 41%, rgba(0,97,34,1) 60%, rgba(0,104,117,1) 61%) !important;
{% elif nbr<100 %}
--main-color: #39BEEA !important;
--gradient: -webkit-linear-gradient(360deg, rgba(112,7,0,1) 20%, rgba(115,117,0,1) 21%, rgba(115,117,0,1) 40%, rgba(0,97,34,1) 41%, rgba(0,97,34,1) 60%, rgba(0,104,117,1) 61%) !important;
{% endif %}
}
layout_options:
grid_columns: 4
grid_rows: 1
- type: custom:layout-card
layout_type: custom:grid-layout
cards:
- type: custom:bignumber-card
title: Side Garden Water Valve Volume Per Cycle
entity: number.side_garden_water_valve_irrigation_target
min: 0
max: 288
from: left
bnStyle: dodgerblue
scale: 18px
hideunit: false
- type: custom:button-card
entity: switch.side_garden_water_valve_state
icon: mdi:water-pump
color_type: card
color: auto
size: 28px
show_state: true
show_name: false
layout:
margin: '-4px'
align-self: start
grid-template-columns: 1fr 20%
grid-template-areas: |
"left right"
- square: false
type: grid
cards:
- type: custom:button-card
entity: switch.side_garden_set_time_switch_1
name: Set Time
color_type: card
color: auto
size: 25px
- type: custom:button-card
entity: input_boolean.rain_delay_toggle
name: 24hr Rain Delay
color_type: card
color: cornflowerblue
size: 25px
- type: custom:button-card
entity: switch.side_garden_set_time_switch_2
name: Set Time
color_type: card
color: auto
size: 25px
columns: 3
layout_options:
grid_columns: 4
grid_rows: 1
layout_options:
grid_columns: full
- type: horizontal-stack
cards:
- type: gauge
entity: sensor.side_garden_median_moisture
needle: true
min: 0
max: 100
segments:
- from: 0
color: '#F75050'
- from: 21
color: '#55E84A'
- from: 41
color: seagreen
- from: 61
color: '#39BEEA'
name: Side Garden Median Moisture
- type: custom:apexcharts-card
chart_type: donut
header:
show: true
show_states: true
floating: true
colorize_states: true
experimental:
color_threshold: true
apex_config:
grid:
padding:
left: 0
right: 0
bottom: -100
top: 4
chart:
height: 182px
plotOptions:
pie:
startAngle: -90
endAngle: 90
donut:
size: 65%
labels:
show: true
total:
show: true
label: Target Volume
formatter: |
EVAL:function(w) {
return w.globals.seriesTotals.reduce((a, b) => {return (a + b)} , 0).toFixed(0) + " L"
}
legend:
show: false
floating: true
fontSize: 15px
position: bottom
offsetX: 0
offsetY: 0
dataLabels:
enabled: false
series:
- entity: sensor.rain_volume_7_days_side_garden
name: Rain Volume
color: turquoise
show:
legend_value: false
- entity: sensor.water_volume_required_side_garden
name: Volume Required
color: dodgerblue
show:
legend_value: false
- type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:time-picker-card
entity: input_datetime.side_garden_set_time_1
hour_mode: 12
hour_step: 1
minute_step: 1
layout:
hour_mode: double
align_controls: left
name: inside
embedded: true
thin: true
hide:
seconds: true
name: true
icon: true
link_values: false
name: Set Time 1
- type: custom:time-picker-card
entity: input_datetime.side_garden_set_time_2
hour_mode: 12
hour_step: 1
minute_step: 5
layout:
hour_mode: double
align_controls: left
name: inside
embedded: true
thin: true
hide:
seconds: true
name: true
icon: true
link_values: false
name: Set Time 1
- square: false
type: grid
cards:
- type: custom:button-card
entity: input_boolean.side_garden_1_sun
name: Sun
color_type: card
color: auto
size: 32px
- type: custom:button-card
entity: input_boolean.side_garden_2_mon
name: Mon
color_type: card
color: auto
size: 32px
- type: custom:button-card
entity: input_boolean.side_garden_3_tue
name: Tue
color_type: card
color: auto
size: 32px
- type: custom:button-card
entity: input_boolean.side_garden_4_wed
name: Wed
color_type: card
color: auto
size: 32px
- type: custom:button-card
entity: input_boolean.side_garden_5_thu
name: Thu
color_type: card
color: auto
size: 32px
- type: custom:button-card
entity: input_boolean.side_garden_6_fri
name: Fri
color_type: card
color: auto
size: 32px
- type: custom:button-card
entity: input_boolean.side_garden_7_sat
name: Sat
color_type: card
color: auto
size: 32px
columns: 7
layout_options:
grid_columns: full
grid_rows: auto
- type: horizontal-stack
cards:
- type: custom:expander-card
title: Side Garden Soil Moisture Stats
clear: true
expanded: false
cards:
- type: custom:mini-graph-card
icon: mdi:water-percent
name: Side Garden Median Moisture
entities:
- sensor.side_garden_median_moisture
color_thresholds:
- value: 0
color: '#F75050'
- value: 21
color: '#EEE049'
- value: 41
color: '#55E84A'
- value: 61
color: '#39BEEA'
hours_to_show: 168
show:
name: false
icon: false
state: false
average: true
extrema: true
points_per_hour: 0.25
- type: horizontal-stack
cards:
- type: custom:mini-graph-card
icon: mdi:water-percent
name: Sensor 4
entities:
- sensor.soil_moisture_4_soil_moisture
color_thresholds:
- value: 0
color: '#F75050'
- value: 21
color: '#EEE049'
- value: 41
color: '#55E84A'
- value: 61
color: '#39BEEA'
hours_to_show: 168
show:
name: false
icon: false
state: true
points_per_hour: 0.25
- type: custom:mini-graph-card
icon: mdi:water-percent
name: Sensor 5
entities:
- sensor.soil_moisture_5_soil_moisture
color_thresholds:
- value: 0
color: '#F75050'
- value: 21
color: '#EEE049'
- value: 41
color: '#55E84A'
- value: 61
color: '#39BEEA'
hours_to_show: 168
show:
name: false
icon: false
state: true
points_per_hour: 0.25
- type: custom:mini-graph-card
icon: mdi:water-percent
name: Sensor 6
entities:
- sensor.soil_moisture_6_soil_moisture
color_thresholds:
- value: 0
color: '#F75050'
- value: 21
color: '#EEE049'
- value: 41
color: '#55E84A'
- value: 61
color: '#39BEEA'
hours_to_show: 168
show:
name: false
icon: false
state: true
points_per_hour: 0.25
- type: horizontal-stack
cards:
- type: custom:mini-graph-card
icon: mdi:water-percent
name: Sensor 4
entities:
- sensor.soil_moisture_4_temperature
color_thresholds:
- value: 0
color: '#F75050'
- value: 21
color: '#EEE049'
- value: 41
color: '#55E84A'
- value: 61
color: '#39BEEA'
hours_to_show: 168
show:
name: false
icon: false
state: true
points_per_hour: 0.25
- type: custom:mini-graph-card
icon: mdi:water-percent
name: Sensor 5
entities:
- sensor.soil_moisture_5_temperature
color_thresholds:
- value: 0
color: '#F75050'
- value: 21
color: '#EEE049'
- value: 41
color: '#55E84A'
- value: 61
color: '#39BEEA'
hours_to_show: 168
show:
name: false
icon: false
state: true
points_per_hour: 0.25
- type: custom:mini-graph-card
icon: mdi:water-percent
name: Sensor 6
entities:
- sensor.soil_moisture_6_temperature
color_thresholds:
- value: 0
color: '#F75050'
- value: 21
color: '#EEE049'
- value: 41
color: '#55E84A'
- value: 61
color: '#39BEEA'
hours_to_show: 168
show:
name: false
icon: false
state: true
points_per_hour: 0.25
- show_name: true
show_icon: true
show_state: true
type: glance
entities:
- entity: sensor.soil_moisture_4_battery
- entity: sensor.soil_moisture_5_battery
- entity: sensor.soil_moisture_6_battery
- entity: sensor.side_garden_water_valve_battery
state_color: true
gap: 0px
expanded-gap: 0px
padding: 0px
child-padding: 0px
child-margin-top: 8px
- type: custom:expander-card
gap: 0.0em
expanded-gap: 0.0em
padding: 0.0em
clear: true
title: Side Garden Rain & Water Stats
overlay-margin: 0.0em
child-padding: 0.0em
child-margin-top: 8px
button-background: transparent
expander-card-background: var(--ha-card-background,var(--card-background-color,#fff))
header-color: var(--primary-text-color,#fff)
arrow-color: var(--arrow-color,var(--primary-text-color,#fff))
expander-card-display: block
title-card-clickable: false
min-width-expanded: 0
max-width-expanded: 0
cards:
- type: horizontal-stack
cards:
- type: custom:rain-gauge-card
entity: sensor.netatmo_devonport_tas_indoor_rain_rain_today
hourly_rate_entity: >-
sensor.netatmo_devonport_tas_indoor_rain_rain_last_hour
show_warning: false
show_error: false
fill_drop_colour: turquoise
name: Rain Today
card_mod:
style: |
ha-card {
--ha-card-header-font-size: 18px;
--ha-card-header-color: silver;
height: 200px !important;
}
- type: custom:mini-graph-card
entities:
- entity: sensor.rain_last_7_days
color: turquoise
name: Rain Last 7 Days
group_by: date
show:
graph: bar
extrema: false
hours_to_show: 168
points_per_hour: 1
cache: true
animate: true
aggregate_func: last
- type: custom:apexcharts-card
graph_span: 30d
span:
end: day
header:
show: true
show_states: true
apex_config:
fill:
type: gradient
gradient:
type: vertical
shadeIntensity: 0
opacityFrom: 1
opacityTo: 0.5
stops: 10
chart:
height: 150px
grid:
show: false
borderColor: darkslateblue
strokeDashArray: 2
dataLabels:
background:
borderWidth: 0
opacity: 0
foreColor: white
offsetY: -10
style:
fontSize: 9px
plotOptions:
bar:
borderRadius: 0
dataLabels:
position: top
series:
- entity: sensor.netatmo_devonport_tas_indoor_rain_rain_today
name: Rain Today
color: turquoise
type: column
group_by:
func: max
duration: 1d
fill: zero
statistics:
type: state
period: day
align: end
show:
name_in_header: true
datalabels: true
in_chart: true
legend_value: false
extremas: false
- entity: sensor.netatmo_devonport_tas_indoor_rain_rain_today
name: Rain Last 30 Days
color: deepskyblue
type: column
group_by:
func: sum
duration: 30d
fill: zero
statistics:
type: state
period: day
align: end
show:
name_in_header: true
datalabels: false
in_chart: false
legend_value: false
- type: custom:mini-graph-card
entities:
- entity: sensor.side_garden_valve_on_off
color: deepskyblue
show:
name: true
icon: true
state: false
name: Irrigation Last 30 Days
hours_to_show: 1
points_per_hour: 60
animate: true
line_width: 2
smoothing: false
state_map:
- value: '1'
- value: '0'
- type: custom:expander-card
gap: 0.0em
expanded-gap: 0.0em
padding: 0.0em
clear: true
title: Side Garden Settings, Cycles & Valve Stats
overlay-margin: 0.0em
child-padding: 0.0em
child-margin-top: 8px
button-background: transparent
expander-card-background: var(--ha-card-background,var(--card-background-color,#fff))
header-color: var(--primary-text-color,#fff)
arrow-color: var(--arrow-color,var(--primary-text-color,#fff))
expander-card-display: block
title-card-clickable: false
min-width-expanded: 0
max-width-expanded: 0
cards:
- type: horizontal-stack
cards:
- type: custom:numberbox-card
border: true
entity: input_number.side_garden_set_area
name: false
icon: false
min: 1
card_mod:
style: >
.body{display:block!important}
.body::after{text-align:center;font-size:10px;content:"Set
Garden Area";display:block!important}
- type: custom:numberbox-card
border: true
entity: input_number.side_garden_set_mm_m2
name: false
icon: false
min: 1
card_mod:
style: >
.body{display:block!important}
.body::after{text-align:center;font-size:10px;content:"Set
Weekly Water";display:block!important}
- type: horizontal-stack
- type: horizontal-stack
cards:
- type: custom:numberbox-card
border: true
entity: input_number.side_garden_water_valve_set_number_cycles
name: false
icon: false
min: 1
card_mod:
style: >
.body{display:block!important}
.body::after{text-align:center;font-size:10px;content:"Set
Number of Cycles";display:block!important}
- type: custom:numberbox-card
border: true
entity: >-
number.side_garden_water_valve_cycle_irrigation_interval
name: false
icon: false
min: 1
step: 60
card_mod:
style: >
.body{display:block!important}
.body::after{text-align:center;font-size:10px;content:"Set
Cycle Interval Delay";display:block!important}
- type: entities
entities:
- entity: sensor.side_garden_valve_last_on
name: Water Last Delivered
icon: mdi:water-pump
- entity: sensor.side_garden_water_valve_water_consumed
name: Water Volume Delivered
- entity: >-
sensor.side_garden_water_valve_last_irrigation_duration
name: Last Duration
- type: custom:apexcharts-card
graph_span: 12month
span:
end: month
offset: '-0d'
header:
show: true
show_states: true
apex_config:
fill:
type: gradient
gradient:
type: vertical
shadeIntensity: 0
opacityFrom: 1
opacityTo: 0.5
stops: 10
chart:
height: 150px
grid:
show: false
borderColor: darkslateblue
strokeDashArray: 2
dataLabels:
background:
borderWidth: 0
opacity: 0
foreColor: white
offsetY: -10
plotOptions:
bar:
borderRadius: 0
dataLabels:
position: top
series:
- entity: sensor.back_garden_water_consumed_30_days
name: Irrigation This Month
color: deepskyblue
type: column
group_by:
func: max
duration: 30day
fill: zero
show:
name_in_header: true
datalabels: true
in_chart: true
legend_value: false
extremas: false
- entity: sensor.side_garden_water_valve_water_consumed
name: Irrigation Last 12 Months
color: deepskyblue
type: column
group_by:
func: sum
duration: 12month
fill: zero
statistics:
type: state
period: month
align: start
show:
name_in_header: true
datalabels: false
in_chart: false
legend_value: false
title-card-button-overlay: false
layout_options:
grid_columns: full
column_span: 3
visibility:
- condition: screen
media_query: '(min-width: 768px)'