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