CSC UI - Irrigation
Referring page: Custom Sprinkler Controller (CSC)

This is the yaml code for the irrigation state UI component of my sprinkler controller.
YAML:
type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-title-card
title: Irrigation
- type: picture-entity
entity: sensor.nachio_active_zone
show_name: false
show_state: false
state_image:
"None": /local/images/sprinklers/idle.jpg
"Left Driveway": /local/images/sprinklers/zone_7.jpg
"Front Lawn": /local/images/sprinklers/zone_1.jpg
"Front Patio": /local/images/sprinklers/zone_2.jpg
"Back Lawn1": /local/images/sprinklers/zone_3.jpg
"Back Lawn2": /local/images/sprinklers/zone_4.jpg
"Roses & Sideyard": /local/images/sprinklers/zone_5.jpg
"Garden & Dahlias": /local/images/sprinklers/zone_6.jpg
aspect_ratio: 35%
- type: conditional
conditions:
- condition: or
conditions:
- condition: state
entity: sensor.nachio_nachio_status
state: "Idle"
- condition: state
entity: sensor.nachio_nachio_status
state: "Standby"
- condition: state
entity: sensor.nachio_nachio_status
state: "Rain Skip"
card:
type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-template-card
entity: 'sensor.nachio_nachio_status'
primary: "Status: {{ states('sensor.nachio_nachio_status') }}"
#secondary: "{{ states('sensor.nachio_nachio_status') }}"
icon: mdi:water-off
icon_color: grey
tap_action:
action: more-info
#view_layout:
# grid-area: z01
- type: custom:mushroom-template-card
entity: '[[entity2]]'
primary: "Last Zone: {{ state_attr('sensor.nachio_system_status','last_zone_active') }}"
secondary: |
{% set last_run = (state_attr('sensor.nachio_system_status', 'system_last_run')) %}
{% set r_today_time = state_attr('sensor.rain_today_san_jose','last_updated') %}
{% set last_run_date = as_datetime(last_run).date() %}
{% set days_ago = (now().date() - last_run_date).days %}
{% set hours_ago = (today_at() - as_datetime(r_today_time)).hours %}
{% set time_diff = now() - as_datetime(last_run) %}
{% set mins_diff = (time_diff.total_seconds() / 60) | round(0) %}
{% if days_ago >= 2 %}
{{ days_ago }} days ago, on {{ as_timestamp(last_run) | timestamp_custom('%B %-d @%-I:%M %p') }}
{% elif days_ago == 1 %}
Yesterday {{ as_timestamp(last_run) | timestamp_custom('@%-I:%M %p') }}
{% elif mins_diff >= 60 %}
{% set hours_diff = (mins_diff / 60 ) | round (0,'floor') %}
{% if mins_diff - (hours_diff * 60) <= 15 %}
{{ hours_diff }} hours ago at {{ as_timestamp(last_run) | timestamp_custom('@%-I:%M %p') }}
{% else %}
{{ hours_diff }}+ hours ago at {{ as_timestamp(last_run) | timestamp_custom('@%-I:%M %p') }}
{% endif %}
{% elif mins_diff >= 1 %}
{{ mins_diff }} minutes ago at {{ as_timestamp(last_run) | timestamp_custom('@%-I:%M %p') }}
{% else%}
A few moments ago
{% endif%}
icon: mdi:pipe-valve
icon_color: grey
tap_action:
action: more-info
- type: custom:mushroom-title-card
subtitle: "Nachio"
- type: custom:layout-card
layout_type: grid
layout:
grid-template-columns: 50% 50%
grid-template-rows: 1
grid-template-areas: |
"z01 z02"
cards:
- type: custom:mushroom-template-card
entity: sensor.nachio_uptime_formatted
primary: Uptime
secondary: "{{states('sensor.nachio_uptime_formatted')}}"
icon: mdi:connection
icon_color: |-
{% if states('binary_sensor.nachio_connection_status') == 'on' %}
blue
{% else %}
grey
{% endif %}
tap_action:
action: more-info
card_mod:
style: |
ha-card {
border: none !important;
box-shadow: none !important;
}
view_layout:
grid-area: z01
- type: custom:mushroom-template-card
entity: binary_sensor.nachio_connection_status
primary: |-
{% if states('binary_sensor.nachio_connection_status') == 'on' %}
WiFi: Connected
{% else %}
WiFi: disconnected
{% endif %}
secondary: "Signal: {{ states('sensor.nachio_wifi_signal_percent') }}%"
icon: mdi:wifi
icon_color: |-
{% if states('binary_sensor.nachio_connection_status') == 'on' %}
blue
{% else %}
grey
{% endif %}
tap_action:
action: more-info
card_mod:
style: |
ha-card {
border: none !important;
box-shadow: none !important;
}
view_layout:
grid-area: z02
- type: custom:mushroom-title-card
title: "Manual"
- type: custom:mushroom-select-card
entity: input_select.sprinkler_zone
name: Zone
fill_container: false
layout: horizontal
icon_type: entity-picture
icon: mdi:pipe-valve
icon_color: grey
secondary_info: none
card_mod:
style: |
ha-card {
border: none !important;
box-shadow: none !important;
}
- type: custom:mushroom-number-card
#entity: input_number.sprinkler_timer_duration
entity: number.nachio_var_run_duration_minutes
name: Duration
icon: mdi:timer-outline
icon_color: grey
#primary_info: none
layout: horizontal
fill_container: false
card_mod:
style: |
ha-card {
--control-height: 8px;
border: none !important;
box-shadow: none !important;
}
- type: custom:layout-card
layout_type: grid
layout:
grid-template-columns: 48% 52%
grid-template-rows: 1
grid-template-areas: |
"z01 z02"
cards:
- type: custom:button-card
label: Start
show_label: true
color_type: card
color: lightgrey
tap_action:
action: call-service
service: esphome.nachio_start_valve
view_layout:
grid-area: z02
card_mod:
style: |
ha-card {
border: none !important;
box-shadow: none !important;
}
#view_layout:
# grid-area: z02
- type: conditional
conditions:
- condition: state
entity: sensor.nachio_nachio_status
state: "Running"
card:
type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-template-card
entity: 'sensor.nachio_nachio_status'
primary: "Status: {{ states('sensor.nachio_nachio_status') }}"
#secondary: "{{ states('sensor.nachio_nachio_status') }}"
icon: mdi:sprinkler
icon_color: orange
tap_action:
action: more-info
- type: custom:mushroom-template-card
entity: '[[entity2]]'
primary: "Active Zone: {{ states('sensor.nachio_active_zone') }}"
secondary: |
{% set time_left = (states('sensor.nachio_current_zone_time_remaining')) %}
{% set time_tot = (states('sensor.nachio_active_valve_total_runtime')) %}
Time Remaining: {{time_left}} out of {{time_tot}}
icon: mdi:pipe-valve
icon_color: orange
tap_action:
action: more-info
card_mod:
style: |
ha-card {
border: none !important;
box-shadow: none !important;
}
- type: conditional
conditions:
- condition: or
conditions:
- condition: state
entity: sensor.nachio_nachio_status
state: "Running"
- condition: state
entity: sensor.nachio_nachio_status
state: "Paused"
card:
type: custom:layout-card
layout_type: grid
layout:
grid-template-columns: 34% 33% 33%
grid-template-rows: 1
grid-template-areas: |
"z01 z02 z03"
cards:
- type: button
name: Resume
icon: mdi:play
tap_action:
action: call-service
service: button.press
target:
entity_id: button.nachio_resume
view_layout:
grid-area: z01
- type: button
name: Pause
icon: mdi:pause
tap_action:
action: call-service
service: button.press
target:
entity_id: button.nachio_pause
view_layout:
grid-area: z02
- type: button
name: Stop
icon: mdi:stop
tap_action:
action: call-service
service: button.press
target:
entity_id: button.nachio_stop
view_layout:
grid-area: z03