CSC UI - Schedule & Config


Referring page: Custom Sprinkler Controller (CSC)


This is the yaml code for the schedule & settings UI component of my sprinkler controller.


YAML:

  #####################################
  # BEGIN SCHEDULE & CONFIG
  #####################################
    type: custom:vertical-stack-in-card
    cards:
      - type: custom:mushroom-title-card
        title: "Schedule & Config"

      - 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:stack-in-card
              cards:
                ## BEGIN LABELS
                - type: custom:layout-card
                  layout_type: grid
                  layout:
                    grid-template-columns: 40% 20% 40%
                    grid-template-rows: 2
                    grid-template-areas: |
                      "z01 z02 z03"
                      "z04 z05 z06"

                  cards:
                    - type: custom:mushroom-template-card
                      #entity: sensor.outdoor_temperature
                      #primary: '{{ states( "[[primary_val]]" ) }}'
                      primary: "Time"
                      view_layout:
                        grid-area: z02
                      
                      
                      card_mod:
                        style: |
                          :host ha-card {
                            text-align: center;
                            border: none !important;
                            box-shadow: none !important;
                          }                    


                    - type: custom:mushroom-template-card
  
                      primary: "Schedule"
                      view_layout:
                        grid-area: z03
                      card_mod:
                        style: |
                          :host ha-card {
                            justify-content: center;
                            text-align: center;
                            border: none !important;
                            box-shadow: none !important;
                          }

                    - type: custom:mushroom-template-card
                      #entity: sensor.outdoor_temperature
                      primary: "Zone"
                      card_mod:
                        style: |
                          :host ha-card {
                            margin-top: -1.6em !important; 
                            border: none !important;
                            box-shadow: none !important;
                          }
                      view_layout:
                        grid-area: z04


                    - type: custom:mushroom-template-card
                      #entity: sensor.outdoor_temperature
                      #primary: '{{ states( "[[primary_val]]" ) }}'
                      primary: "Today"
                      view_layout:
                        grid-area: z05
                      card_mod:
                        style: |
                          :host ha-card {
                            text-align: center;
                            
                            border: none !important;
                            box-shadow: none !important;
                            margin-top: -1.6em !important;
                          }

                    - 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: "S"
                              tap_action:
                                action: none
                              card_mod:
                                style: |
                                  :host ha-card {
                                    justify-content: center;
                                    margin-top: -0.8em !important;
                                          
                                    --chip-height: 20px;
                                    --chip-font-size: 14px;
                                    --chip-background: {{ 'orange' if now().weekday() == 6 else none }};
                                    --text-color: {{ "white" if now().weekday() == 6 else "black"}};
                                    border: none !important;
                                    box-shadow: none !important;
                                  }
                          view_layout:
                            grid-area: z01


                        - type: custom:mushroom-chips-card
                          chips:
                            - type: template
                              content: "M"
                              tap_action:
                                action: none
                              card_mod:
                                style: |
                                  :host ha-card {
                                    justify-content: center;
                                    margin-top: -0.8em !important;
                                            
                                    --chip-height: 20px;
                                    --chip-font-size: 14px;
                                    --chip-background: {{ 'orange' if now().weekday() == 0 else none }};
                                    --text-color: {{ "white" if now().weekday() == 0 else "black"}};
                                    
                                    border: none !important;
                                    box-shadow: none !important;
                                  }

                          view_layout:
                            grid-area: z02

                        - type: custom:mushroom-chips-card
                          chips:
                            - type: template
                              content: "T"
                              tap_action:
                                action: none
                              card_mod:
                                style: |
                                  :host ha-card {
                                    justify-content: center;
                                    margin-top: -0.8em !important;
                                            
                                    --chip-height: 20px;
                                    --chip-font-size: 14px;
                                    --chip-background: {{ 'orange' if now().weekday() == 1 else none }};
                                    --text-color: {{ "white" if now().weekday() == 1 else "black"}};
                                    border: none !important;
                                    box-shadow: none !important;
                                  }
                                # margin-left: 0.8em !important;  
                          view_layout:
                            grid-area: z03

                        - type: custom:mushroom-chips-card
                          chips:
                            - type: template
                              content: "W"
                              tap_action:
                                action: none
                              card_mod:
                                style: |
                                  :host ha-card {
                                    justify-content: center;
                                    margin-top: -0.8em !important;
                                            
                                    --chip-height: 20px;
                                    --chip-font-size: 14px;
                                    --chip-background: {{ 'orange' if now().weekday() == 2 else none }};
                                    --text-color: {{ "white" if now().weekday() == 2 else "black"}};
                                    border: none !important;
                                    box-shadow: none !important;
                                  }
                                # margin-left: 0.6em !important;
                          view_layout:
                            grid-area: z04

                        - type: custom:mushroom-chips-card
                          chips:
                            - type: template
                              content: "T"
                              tap_action:
                                action: none
                              card_mod:
                                style: |
                                  :host ha-card {
                                    justify-content: center;
                                    margin-top: -0.8em !important;
                                            
                                    --chip-height: 20px;
                                    --chip-font-size: 14px;
                                    --chip-background: {{ 'orange' if now().weekday() == 3 else none }};
                                    --text-color: {{ "white" if now().weekday() == 3 else "black"}};
                                    border: none !important;
                                    box-shadow: none !important;
                                  }
                                # margin-left: 0.4em !important;
                          view_layout:
                            grid-area: z05

                        - type: custom:mushroom-chips-card
                          chips:
                            - type: template
                              content: "F"
                              tap_action:
                                action: none
                              card_mod:
                                style: |
                                  :host ha-card {
                                    justify-content: center;
                                    margin-top: -0.8em !important;
                                            
                                    --chip-height: 20px;
                                    --chip-font-size: 14px;
                                    --chip-background: {{ 'orange' if now().weekday() == 4 else none }};
                                    --text-color: {{ "white" if now().weekday() == 4 else "black"}};
                                    border: none !important;
                                    box-shadow: none !important;
                                  }
                                # margin-left: 0.2em !important;
                          view_layout:
                            grid-area: z06

                        - type: custom:mushroom-chips-card
                          chips:
                            - type: template
                              content: "S"
                              tap_action:
                                action: none
                              card_mod:
                                style: |
                                  :host ha-card {
                                    justify-content: center;
                                    margin-top: -0.8em !important;  
                                    --chip-height: 20px;
                                    --chip-font-size: 14px;
                                    --chip-background: {{ 'orange' if now().weekday() == 5 else none }};
                                    --text-color: {{ "white" if now().weekday() == 5 else "black"}};
                                    border: none !important;
                                    box-shadow: none !important;
                                  }
                          view_layout:
                            grid-area: z07
                      view_layout:
                        grid-area: z06

                - type: entities
                  entities:
                    - type: divider
                  card_mod:
                    style: |
                      :host ha-card {
                        margin-top: -2.8em !important; 
                        border: none !important;
                        box-shadow: none !important;
                      }


                #BEGIN CONTENT
                - type: custom:decluttering-card
                  template: valve_main_stack_row
                  variables:
                    - entity: 'sensor.valve_z07_time_today'
                    - entity2: 'sensor.valve_z07_last_start_time'
                    - dow1: 'switch.nachio_z7_1_run_mon'
                    - dow2: 'switch.nachio_z7_2_run_tue'
                    - dow3: 'switch.nachio_z7_3_run_wed'
                    - dow4: 'switch.nachio_z7_4_run_thu'
                    - dow5: 'switch.nachio_z7_5_run_fri'
                    - dow6: 'switch.nachio_z7_6_run_sat'
                    - dow7: 'switch.nachio_z7_0_run_sun'
                    - zone_label: 'Left Driveway'
                    - zone_id: '- Zone 7'
                    - zone_pic: '/local/images/sprinklers/zone_7.jpg'
                    - zone_disable: switch.nachio_z7_disable
                    - zone_runtime: number.nachio_zone_7_run_duration
                    - zone_runtime_adjust: switch.nachio_z7_adjust_duration
                    - margin: '-2.4em' #decreasing value increases spacing
                    - margin2: '-1.4em'        

                - type: custom:decluttering-card
                  template: valve_main_stack_row
                  variables:
                    - entity: 'sensor.valve_z01_time_today'
                    - entity2: 'sensor.valve_z01_last_start_time'
                    - dow1: 'switch.nachio_z1_1_run_mon'
                    - dow2: 'switch.nachio_z1_2_run_tue'
                    - dow3: 'switch.nachio_z1_3_run_wed'
                    - dow4: 'switch.nachio_z1_4_run_thu'
                    - dow5: 'switch.nachio_z1_5_run_fri'
                    - dow6: 'switch.nachio_z1_6_run_sat'
                    - dow7: 'switch.nachio_z1_0_run_sun'
                    - zone_label: 'Front Lawn'
                    - zone_id: '- Zone 1'
                    - zone_pic: '/local/images/sprinklers/zone_1.jpg'
                    - zone_disable: switch.nachio_z1_disable
                    - zone_runtime: number.nachio_zone_1_run_duration
                    - zone_runtime_adjust: switch.nachio_z1_adjust_duration
                    - margin: '-2.4em'
                    - margin2: '-1.4em'

                - type: custom:decluttering-card
                  template: valve_main_stack_row
                  variables:
                    - entity: 'sensor.valve_z02_time_today'
                    - entity2: 'sensor.valve_z02_last_start_time'
                    - dow1: 'switch.nachio_z2_1_run_mon'
                    - dow2: 'switch.nachio_z2_2_run_tue'
                    - dow3: 'switch.nachio_z2_3_run_wed'
                    - dow4: 'switch.nachio_z2_4_run_thu'
                    - dow5: 'switch.nachio_z2_5_run_fri'
                    - dow6: 'switch.nachio_z2_6_run_sat'
                    - dow7: 'switch.nachio_z2_0_run_sun'
                    - zone_label: 'Front Patio'
                    - zone_id: '- Zone 2'
                    - zone_pic: '/local/images/sprinklers/zone_2.jpg'
                    - zone_disable: switch.nachio_z2_disable
                    - zone_runtime: number.nachio_zone_2_run_duration
                    - zone_runtime_adjust: switch.nachio_z2_adjust_duration
                    - margin: '-2.4em'
                    - margin2: '-1.4em'

                - type: custom:decluttering-card
                  template: valve_main_stack_row
                  variables:
                    - entity: 'sensor.valve_z03_time_today'
                    - entity2: 'sensor.valve_z03_last_start_time'
                    - dow1: 'switch.nachio_z3_1_run_mon'
                    - dow2: 'switch.nachio_z3_2_run_tue'
                    - dow3: 'switch.nachio_z3_3_run_wed'
                    - dow4: 'switch.nachio_z3_4_run_thu'
                    - dow5: 'switch.nachio_z3_5_run_fri'
                    - dow6: 'switch.nachio_z3_6_run_sat'
                    - dow7: 'switch.nachio_z3_0_run_sun'
                    - zone_label: 'Back Lawn1'
                    - zone_id: '- Zone 3'
                    - zone_pic: '/local/images/sprinklers/zone_3.jpg'
                    - zone_disable: switch.nachio_z3_disable
                    - zone_runtime: number.nachio_zone_3_run_duration
                    - zone_runtime_adjust: switch.nachio_z3_adjust_duration
                    - margin: '-2.4em'
                    - margin2: '-1.4em'

                - type: custom:decluttering-card
                  template: valve_main_stack_row
                  variables:
                    - entity: 'sensor.valve_z04_time_today'
                    - entity2: 'sensor.valve_z04_last_start_time'
                    - dow1: 'switch.nachio_z4_1_run_mon'
                    - dow2: 'switch.nachio_z4_2_run_tue'
                    - dow3: 'switch.nachio_z4_3_run_wed'
                    - dow4: 'switch.nachio_z4_4_run_thu'
                    - dow5: 'switch.nachio_z4_5_run_fri'
                    - dow6: 'switch.nachio_z4_6_run_sat'
                    - dow7: 'switch.nachio_z4_0_run_sun'
                    - zone_label: 'Back Lawn2'
                    - zone_id: '- Zone 4'
                    - zone_pic: '/local/images/sprinklers/zone_4.jpg'
                    - zone_disable: switch.nachio_z4_disable
                    - zone_runtime: number.nachio_zone_4_run_duration
                    - zone_runtime_adjust: switch.nachio_z4_adjust_duration
                    - margin: '-2.4em'
                    - margin2: '-1.4em'

                - type: custom:decluttering-card
                  template: valve_main_stack_row
                  variables:
                    - entity: 'sensor.valve_z05_time_today'
                    - entity2: 'sensor.valve_z05_last_start_time'
                    - dow1: 'switch.nachio_z5_1_run_mon'
                    - dow2: 'switch.nachio_z5_2_run_tue'
                    - dow3: 'switch.nachio_z5_3_run_wed'
                    - dow4: 'switch.nachio_z5_4_run_thu'
                    - dow5: 'switch.nachio_z5_5_run_fri'
                    - dow6: 'switch.nachio_z5_6_run_sat'
                    - dow7: 'switch.nachio_z5_0_run_sun'
                    - zone_label: 'Roses & Sideyard'
                    - zone_id: '- Zone 5'
                    - zone_pic: '/local/images/sprinklers/zone_5.jpg'
                    - zone_disable: switch.nachio_z5_disable
                    - zone_runtime: number.nachio_zone_5_run_duration
                    - zone_runtime_adjust: switch.nachio_z5_adjust_duration
                    - margin: '-2.4em'
                    - margin2: '-1.4em'

                - type: custom:decluttering-card
                  template: valve_main_stack_row
                  variables:
                    - entity: 'sensor.valve_z06_time_today'
                    - entity2: 'sensor.valve_z06_last_start_time'
                    - dow1: 'switch.nachio_z6_01_run_mon'
                    - dow2: 'switch.nachio_z6_2_run_tue'
                    - dow3: 'switch.nachio_z6_3_run_wed'
                    - dow4: 'switch.nachio_z6_4_run_thu'
                    - dow5: 'switch.nachio_z6_5_run_fri'
                    - dow6: 'switch.nachio_z6_6_run_sat'
                    - dow7: 'switch.nachio_z6_0_run_sun'
                    - zone_label: 'Garden & Dahlias'
                    - zone_id: '- Zone 6'
                    - zone_pic: '/local/images/sprinklers/zone_6.jpg'
                    - zone_disable: switch.nachio_z6_disable
                    - zone_runtime: number.nachio_zone_6_run_duration
                    - zone_runtime_adjust: switch.nachio_z6_adjust_duration
                    - margin: '-2.4em'
                    - margin2: '-1.4em'

                - type: entities
                  entities:
                    - type: divider
                  card_mod:
                    style: |
                      :host ha-card {
                        
                        margin-top: -2.0em !important;
                        border: none !important;
                        box-shadow: none !important;
                      }


                ## BEGIN TOTALS
                - type: custom:layout-card
                  layout_type: grid
                  layout:
                    grid-template-columns: 40% 24% 36%
                    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: "Total"
                      view_layout:
                        grid-area: z01
                      card_mod:
                        style: |
                          :host ha-card {
                            justify-content: center;
                            margin-top: -2.0em !important;
                            border: none !important;
                            box-shadow: none !important;
                          }

                    - type: custom:mushroom-template-card
                      entity: sensor.valve_time_total_today
                      primary: "{{ states('sensor.valve_time_total_today') }}"
                      view_layout:
                        grid-area: z02
                      card_mod:
                        style: |
                          :host ha-card {
                            justify-content: right;
                          
                            margin-top: -2.0em !important;
                            border: none !important;
                            box-shadow: none !important;
                          }
                      #  text-align: right;

                    - type: custom:mushroom-template-card
                      entity: sensor.valve_time_total_today
                      primary: "{{ state_attr('sensor.valve_time_total_today','time_total_this_week') }}"
                      view_layout:
                        grid-area: z03
                      card_mod:
                        style: |
                          :host ha-card {
                            justify-content: center;
                            text-align: center;
                            margin-top: -2.0em !important;
                            border: none !important;
                            box-shadow: none !important;
                          }


            attributes:
              label: Zones

          - card:
              type: custom:vertical-stack-in-card
              cards:
                - type: custom:mushroom-title-card
                  subtitle: "Controls"

                - type: entities
                  entities:
                    - entity: switch.nachio_system_standby
                    - entity: switch.nachio_restart
                    - entity: switch.nachio_nachio_shutdown
                    - entity: switch.nachio_enable_queue
                - type: custom:mushroom-title-card
                  subtitle: "Daily start times"

                - type: entities
                  entities:
                    - entity: time.nachio_00_sun_start_time
                      name: Sunday
                    - entity: time.nachio_01_mon_start_time
                      name: Monday
                    - entity: time.nachio_02_tue_start_time
                      name: Tuesday
                    - entity: time.nachio_03_wed_start_time
                      name: Wednesday
                    - entity: time.nachio_04_thu_start_time
                      name: Thursday
                    - entity: time.nachio_05_fri_start_time
                      name: Friday
                    - entity: time.nachio_06_sat_start_time
                      name: Saturday
            attributes:
              label: Controller
            card_mod:
              style: |
                .card-header {
                  font-size: 24px;
                }