CSC Decluttering Card
Referring page: Custom Sprinkler Controller
The blocks below are the various yaml templates in my Decluttering card file that support the UI for my custom sprinkler controller.
YAML:
########## IRRIGATION #####################
valve_main_stack_row:
card:
type: custom:layout-card
layout_type: grid
layout:
grid-template-columns: 40% 20% 40%
#grid-template-columns: 40% 24% 36% #orig values
grid-template-rows: 1
grid-template-areas: |
"z01 z02 z03"
cards:
- type: custom:mushroom-template-card
#entity: sensor.outdoor_temperature
#primary: '{{ states( "[[primary_val]]" ) }}'
primary: '[[zone_label]]'
view_layout:
grid-area: z01
card_mod:
style: |
:host ha-card {
justify-content: center;
margin-top: [[margin]] !important;
border: none !important;
box-shadow: none !important;
--card-primary-color: {{ 'grey' if states( '[[entity]]' ) == '00:00' }};
}
# background: {{ 'lightgrey' if states( '[[entity]]' ) != '00:00' }};
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: '[[zone_label]] [[zone_id]]'
content:
type: vertical-stack
cards:
#- type: picture
# image: '[[zone_pic]]'
# aspect_ratio: 45%
- type: picture-glance
entities: []
#show_name: false
#show_state: false
image: '[[zone_pic]]'
aspect_ratio: 35%
# !include weather/popup_stack_san_jose.yaml
- type: custom:decluttering-card
template: valve_popup_schedule
variables:
- entity: '[[entity]]'
- entity2: '[[entity2]]'
- dow1: '[[dow1]]'
- dow2: '[[dow2]]'
- dow3: '[[dow3]]'
- dow4: '[[dow4]]'
- dow5: '[[dow5]]'
- dow6: '[[dow6]]'
- dow7: '[[dow7]]'
- zone_disable: '[[zone_disable]]'
- zone_runtime: '[[zone_runtime]]'
- zone_runtime_adjust: '[[zone_runtime_adjust]]'
- type: custom:mushroom-template-card
entity: '{{ states( "[[entity]]" ) }}'
primary: '{{ states( "[[entity]]" ) }}'
#primary: '{{ states( "[[entity]]" ) }} M'
view_layout:
grid-area: z02
card_mod:
style: |
:host ha-card {
justify-content: center;
text-align: center;
margin-top: [[margin]] !important;
border: none !important;
box-shadow: none !important;
--card-primary-color: {{ 'grey' if states( '[[entity]]' ) == '00:00' }};
}
- type: custom:layout-card
layout_type: grid
layout:
grid-template-columns: 14% 14% 14% 14% 14% 14% 14% 2%
grid-template-rows: 1
grid-template-areas: |
"z01 z02 z03 z04 z05 z06 z07 z08"
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
content: "{{ '-' if states('[[dow7]]') != 'on' }}"
icon: "{{ 'mdi:water' if states('[[dow7]]') == 'on' }}"
tap_action:
action: none
card_mod:
style: |
:host ha-card {
justify-content: center;
margin-top: [[margin2]] !important;
--chip-height: 20px;
--chip-font-size: 14px;
--chip-background: {{ 'orange' if now().weekday() == 6 and states('[[dow7]]') == 'on' else none }};
--chip-icon-size: 0.70em;
--color: {{ 'white' if now().weekday() == 6 and states('[[dow7]]') == 'on' else 'blue'}};
border: none !important;
box-shadow: none !important;
}
view_layout:
grid-area: z01
- type: custom:mushroom-chips-card
chips:
- type: template
content: "{{ '-' if states('[[dow1]]') != 'on' }}"
icon: "{{ 'mdi:water' if states('[[dow1]]') == 'on' }}"
tap_action:
action: none
card_mod:
style: |
:host ha-card {
justify-content: center;
margin-top: [[margin2]] !important;
--chip-height: 20px;
--chip-font-size: 14px;
--chip-background: {{ 'orange' if now().weekday() == 0 and states('[[dow1]]') == 'on' else none }};
--chip-icon-size: 0.70em;
--color: {{ 'white' if now().weekday() == 0 and states('[[dow1]]') == 'on' else 'blue'}};
border: none !important;
box-shadow: none !important;
}
view_layout:
grid-area: z02
- type: custom:mushroom-chips-card
chips:
- type: template
content: "{{ '-' if states('[[dow2]]') != 'on' }}"
icon: "{{ 'mdi:water' if states('[[dow2]]') == 'on' }}"
tap_action:
action: none
card_mod:
style: |
:host ha-card {
justify-content: center;
margin-top: [[margin2]] !important;
--chip-height: 20px;
--chip-font-size: 14px;
--chip-background: {{ 'orange' if now().weekday() == 1 and states('[[dow2]]') == 'on' else none }};
--chip-icon-size: 0.70em;
--color: {{ 'white' if now().weekday() == 1 and states('[[dow2]]') == 'on' else 'blue'}};
border: none !important;
box-shadow: none !important;
}
view_layout:
grid-area: z03
- type: custom:mushroom-chips-card
chips:
- type: template
content: "{{ '-' if states('[[dow3]]') != 'on' }}"
icon: "{{ 'mdi:water' if states('[[dow3]]') == 'on' }}"
tap_action:
action: none
card_mod:
style: |
:host ha-card {
justify-content: center;
margin-top: [[margin2]] !important;
--chip-height: 20px;
--chip-font-size: 14px;
--chip-background: {{ 'orange' if now().weekday() == 2 and states('[[dow3]]') == 'on' else none }};
--chip-icon-size: 0.70em;
--color: {{ 'white' if now().weekday() == 2 and states('[[dow3]]') == 'on' else 'blue'}};
border: none !important;
box-shadow: none !important;
}
view_layout:
grid-area: z04
- type: custom:mushroom-chips-card
chips:
- type: template
content: "{{ '-' if states('[[dow4]]') != 'on' }}"
icon: "{{ 'mdi:water' if states('[[dow4]]') == 'on' }}"
tap_action:
action: none
card_mod:
style: |
:host ha-card {
justify-content: center;
margin-top: [[margin2]] !important;
--chip-height: 20px;
--chip-font-size: 14px;
--chip-background: {{ 'orange' if now().weekday() == 3 and states('[[dow4]]') == 'on' else none }};
--chip-icon-size: 0.70em;
--color: {{ 'white' if now().weekday() == 3 and states('[[dow4]]') == 'on' else 'blue'}};
border: none !important;
box-shadow: none !important;
}
view_layout:
grid-area: z05
- type: custom:mushroom-chips-card
chips:
- type: template
content: "{{ '-' if states('[[dow5]]') != 'on' }}"
icon: "{{ 'mdi:water' if states('[[dow5]]') == 'on' }}"
tap_action:
action: none
card_mod:
style: |
:host ha-card {
justify-content: center;
margin-top: [[margin2]] !important;
--chip-height: 20px;
--chip-font-size: 14px;
--chip-background: {{ 'orange' if now().weekday() == 4 and states('[[dow5]]') == 'on' else none }};
--chip-icon-size: 0.70em;
--color: {{ 'white' if now().weekday() == 4 and states('[[dow5]]') == 'on' else 'blue'}};
border: none !important;
box-shadow: none !important;
}
view_layout:
grid-area: z06
- type: custom:mushroom-chips-card
chips:
- type: template
content: "{{ '-' if states('[[dow6]]') != 'on' }}"
icon: "{{ 'mdi:water' if states('[[dow6]]') == 'on' }}"
tap_action:
action: none
card_mod:
style: |
:host ha-card {
justify-content: center;
margin-top: [[margin2]] !important;
--chip-height: 20px;
--chip-font-size: 14px;
--chip-background: {{ 'orange' if now().weekday() == 5 and states('[[dow6]]') == 'on' else none }};
--chip-icon-size: 0.70em;
--color: {{ 'white' if now().weekday() == 5 and states('[[dow6]]') == 'on' else 'blue'}};
border: none !important;
box-shadow: none !important;
}
view_layout:
grid-area: z07
view_layout:
grid-area: z03
valve_popup_schedule:
card:
type: custom:tabbed-card
styles:
'--mdc-theme-primary': orange
'--mdc-tab-text-label-color-default': grey
'--mdc-typography-button-font-size': 14px
'--mdc-tab-stacked-height': 55px
'--mdc-tab-height': 40px
tabs:
- card:
type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-title-card
subtitle: "Status"
- type: custom:mushroom-template-card
entity: '[[entity2]]'
primary: Last Run
secondary: |
{% set last_run = as_local(as_datetime(state_attr('[[entity2]]', 'last_end_time') | float(0))) %}
{% 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 >= 15 %}
{{ mins_diff }} minutes ago at {{ as_timestamp(last_run) | timestamp_custom('@%-I:%M %p') }}
{% else%}
Running Now
{% endif%}
icon: mdi:pipe-valve
icon_color: blue
- type: custom:mushroom-title-card
subtitle: "Run Times"
- type: entities
entities:
- entity: '[[entity]]'
name: Today
icon: mdi:timelapse
- type: attribute
entity: '[[entity]]'
attribute: time_this_week
icon: mdi:timelapse
name: This Week
- type: attribute
entity: '[[entity]]'
attribute: time_last_week
name: Last Week
icon: mdi:timelapse
- type: custom:expander-card
child-margin-top: 1.2em
padding: 0
clear: true
#title-card-button-overlay: true
#title-card-clickable: true
#expanded: false
#title: "Manual"
title-card:
type: custom:mushroom-title-card
subtitle: "By Month"
#subtitle: "Run Zone"
cards:
- type: entities
entities:
- type: attribute
entity: '[[entity]]'
attribute: time_jan
name: January
- type: attribute
entity: '[[entity]]'
attribute: time_feb
name: February
- type: attribute
entity: '[[entity]]'
attribute: time_mar
name: March
- type: attribute
entity: '[[entity]]'
attribute: time_apr
name: April
- type: attribute
entity: '[[entity]]'
attribute: time_may
name: May
- type: attribute
entity: '[[entity]]'
attribute: time_jun
name: June
- type: attribute
entity: '[[entity]]'
attribute: time_jul
name: July
- type: attribute
entity: '[[entity]]'
attribute: time_aug
name: August
- type: attribute
entity: '[[entity]]'
attribute: time_sep
name: September
- type: attribute
entity: '[[entity]]'
attribute: time_oct
name: October
- type: attribute
entity: '[[entity]]'
attribute: time_nov
name: November
- type: attribute
entity: '[[entity]]'
attribute: time_dec
name: December
card_mod:
style: |
:host ha-card {
border: none !important;
box-shadow: none !important;
}
card_mod:
style: |
:host ha-card {
border: none !important;
box-shadow: none !important;
}
attributes:
label: History
- card:
type: entities
entities:
- entity: '[[zone_disable]]'
name: Disable zone
- type: section
label: "Days to run:"
- entity: '[[dow7]]'
name: Sunday
- entity: '[[dow1]]'
name: Monday
- entity: '[[dow2]]'
name: Tuesday
- entity: '[[dow3]]'
name: Wednesday
- entity: '[[dow4]]'
name: Thursday
- entity: '[[dow5]]'
name: Friday
- entity: '[[dow6]]'
name: Saturday
- type: section
label: "Duration to run:"
- entity: '[[zone_runtime]]'
name: Duration
- entity: '[[zone_runtime_adjust]]'
name: "Adjust duration for temperature:"
attributes:
label: Config
####### NEW TEMPLATE ##########
pop_up_temperature_panel_sprinklers:
card:
type: custom:layout-card
layout_type: grid
layout:
grid-template-columns: 50% 50%
grid-template-rows: 2
grid-template-areas: |
"z01 z02"
cards:
- type: custom:mushroom-template-card
primary: "3 Day Forecast:"
#secondary:
icon: mdi:chart-timeline-variant
icon_color: |-
{% from 'weather.jinja' import icon_color_temp %}
{{ icon_color_temp('[[entity_current_temp]]') }}
card_mod:
style: |
ha-card {
border: none !important;
box-shadow: none !important;
margin-top: -0.5em !important;
margin-bottom: -0.35em !important;
}
view_layout:
grid-area: z01
- type: custom:layout-card
layout_type: grid
layout:
grid-template-columns: 34% 33% 33%
grid-template-rows: 2
grid-template-areas: |
"z02 z03 z04"
"z06 z07 z08"
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
content: "Today"
tap_action:
action: none
card_mod:
style: |
ha-card {
margin-top: -0.5em !important;
margin-bottom: -0.35em !important;
border: none !important;
}
view_layout:
grid-area: z02
- type: custom:mushroom-chips-card
chips:
- type: template
content: "T+1"
card_mod:
style: |
ha-card {
margin-top: -0.5em !important;
margin-bottom: -0.35em !important;
margin-left: 0.1em !important;
border: none !important;
}
view_layout:
grid-area: z03
- type: custom:mushroom-chips-card
chips:
- type: template
content: "T+2"
card_mod:
style:
mushroom-state-info$: |
.: |
ha-card {
margin-top: -0.5em !important;
margin-bottom: -0.35em !important;
margin-left: 0.15em !important;
border: none !important;
}
view_layout:
grid-area: z04
- type: custom:mushroom-chips-card
chips:
- type: template
entity: '[[entity_forecast_today]]'
content: "{{ states('[[entity_forecast_today]]') }}°F"
tap_action:
action: more-info
card_mod:
style:
mushroom-state-info$: |
.: |
ha-card {
justify-content: center;
border: none !important;
box-shadow: none !important;
margin-top: -0.3em !important;
margin-left: 0.0em !important;
{% from 'weather.jinja' import icon_color_temp %}
--chip-background: {{ icon_color_temp('[[entity_forecast_today]]') }};
--chip-height: 25px;
--chip-font-size: 12px;
{% if states('[[entity_forecast_today]]') | float () < 60 %}
--text-color: white;
{% endif %}
}
view_layout:
grid-area: z06
- type: custom:mushroom-chips-card
chips:
- type: template
entity: sensor.outdoor_temperature_merged
content: "{{ states('[[entity_forecast_t1]]') }}°F"
#icon: mdi:thermometer
#icon_color: |-
# {% from 'weather.jinja' import icon_color_temp %}
# {{ icon_color_temp('sensor.outdoor_temperature_merged') }}
tap_action:
action: more-info
card_mod:
style:
mushroom-state-info$: |
.: |
ha-card {
justify-content: center;
border: none !important;
box-shadow: none !important;
margin-top: -0.3em !important;
margin-left: 0.0em !important;
{% from 'weather.jinja' import icon_color_temp %}
--chip-background: {{ icon_color_temp('[[entity_forecast_t1]]') }};
--chip-height: 25px;
--chip-font-size: 12px;
{% if states('[[entity_forecast_t1]]') | float () < 60 %}
--text-color: white;
{% endif %}
}
view_layout:
grid-area: z07
- type: custom:mushroom-chips-card
chips:
- type: template
entity: '[[entity_forecast_t2]]'
content: "{{ states('[[entity_forecast_t2]]') | float() | round (1) }}°F"
#icon: mdi:thermometer
#icon_color: |-
# {% from 'weather.jinja' import icon_color_temp %}
# {{ icon_color_temp('sensor.feels_like_temperature_san_jose') }}
tap_action:
action: more-info
card_mod:
style:
mushroom-state-info$: |
.: |
ha-card {
justify-content: center;
border: none !important;
box-shadow: none !important;
margin-top: -0.3em !important;
margin-left: 0.1em !important;
{% from 'weather.jinja' import icon_color_temp %}
--chip-background: {{ icon_color_temp('[[entity_forecast_t2]]') }};
--chip-height: 25px;
--chip-font-size: 12px;
{% if states('[[entity_forecast_t2]]') | float () < 60 %}
--text-color: white;
{% endif %}
}
view_layout:
grid-area: z08
view_layout:
grid-area: z02