ui-lovelace.yaml

title: Home

views:

  - !include /config/lovelace/Tab1_Home.yaml
  - !include /config/lovelace/Tab1a_Home_Kiosk.yaml
  - !include /config/lovelace/Tab1b_Home_EntranceKiosk.yaml
  - !include /config/lovelace/Tab2_Music.yaml
  - !include /config/lovelace/Tab3_Heat.yaml
  - !include /config/lovelace/Tab3a_Heat_Sophie.yaml
  - !include /config/lovelace/Tab4_ShoppingList.yaml 
  - !include /config/lovelace/Tab5_Media.yaml
  - !include /config/lovelace/Tab6_Health.yaml
  - !include /config/lovelace/Tab7_Cameras.yaml
  - !include /config/lovelace/Tab8_Alarm.yaml
  - !include /config/lovelace/Tab9_Appliances.yaml
  - !include /config/lovelace/Tab10_Weather.yaml
  - !include /config/lovelace/Tab11_Tech.yaml
#  - !include /config/lovelace/Tab12_Test.yaml
#  - !include /config/lovelace/Hidden13_Front_Camera.yaml
#  - !include /config/lovelace/Hidden14_Back_Camera.yaml
#  - !include /config/lovelace/Hidden15_Left_Camera.yaml
#  - !include /config/lovelace/Hidden16_Right_Camera.yaml
  - !include /config/lovelace/Hidden17_Browser_Addon.yaml

  # - !include /config/lovelace/Tab12_Test.yaml

#custom_header:
#  compact_mode: true
#  background: var(--primary-background-color)
#  exceptions:
#    - conditions:
#        template: "{{ 'iPhone' in userAgent or 'iOS' in userAgent }}"
#        user: Alena
#      config:
#        hide_tabs: '1'
#        disable_sidebar: true
#        default_tab: 0
#        hide_help: true
#        hide_config: true
#        menu_hide: true
#        options_hide: true
#        voice_hide: true
#        chevrons: false
#    - conditions:
#        template: "{{ 'iPhone' in userAgent or 'iOS' in userAgent }}"
#        user: Sean Straus
#      config:
#        hide_tabs: '1'
#        default_tab: 0
#        hide_help: true
#        hide_config: true
#        voice_hide: true
#        menu_hide: true
#        options_hide: true
#        chevrons: false
#    - conditions:
#        template: "{{ 'iPhone' in userAgent or 'iOS' in userAgent }}"
#        user: Sophie
#      config:
#        hide_tabs: '1'
#        disable_sidebar: true
#        default_tab: 0
#        hide_help: true
#        hide_config: true
#        hide_unused: true
#        voice_hide: true
#        menu_hide: true
#        options_hide: true
#        chevrons: false
#    - conditions:
#        user: kiosk
#      config:
#        hide_tabs: '0'
#        disable_sidebar: true
#        default_tab: '1'
#        hide_help: true
#        hide_config: true
#        hide_unused: true
#        voice_hide: true
##        menu_hide: true
#        button_text:
#          menu: 'menu'
#          options: '{{ dayNameShort }}, {{ dayNum }} {{ monthNameShort }}       {{ hours24LZ }}:{{ minutesLZ }}'
# %a, %b %e %R
##          options: '{{ dayNameShort }}. {{ monthNameShort }}. {{ dayNum }} {{ year4d }}'
#    - conditions:
#        user: Alena
#      config:
#        hide_tabs: '1'
#        disable_sidebar: true
#        default_tab: 0
#        hide_help: true
#        hide_config: true
#        hide_unused: true
#        voice_hide: true
#        menu_hide: true
#    - conditions:
#        user: Sophie
#      config:
#        hide_tabs: '1'
#        disable_sidebar: true
#        default_tab: 0
#        hide_help: true
#        hide_config: true
#        hide_unused: true
#        voice_hide: true
#        menu_hide: true
#    - conditions:
#        user: Sean Straus
#      config:
#        hide_tabs: '1'
#        default_tab: 0
#        hide_help: true
#        hide_config: true
#        voice_hide: true

decluttering_templates:

  emergency:
    card: 
      type: conditional
      conditions:
        - entity: '[[entity]]'
          state: '[[state]]'
      card:
        type: custom:button-card
        name: '[[name]]'
        deep_press: true
        icon: 'mdi:alert' 
        size: 26px
        aspect_ratio: 13/2
        show_name: true
        show_icon: true
        show_state: false
        show_label: false
        show_last_changed: false
        styles:
          card:
#            - --ha-card-background: '#d40404'
            - --ha-card-background: '#c0392b'
            - animation: blink 2s ease infinite
          name:
            - font-size: 15px
            - font-family: Helvetica
            - color: white
            - justify-self: start
            - padding-left: 18px
            - padding-top: 5px
          img_cell:
            - align-self: start
            - text-align: start
            - margin-left: 21px
          grid: 
            - grid-template-areas: '"i n"'
            - grid-template-columns: 8% 1fr
            - grid-template-rows: 1fr
          icon:
            - color: white
        state:
          - value: "off"

  alert:
    card: 
      type: conditional
      conditions:
        - entity: '[[entity]]'
          state: '[[state]]'
      card:
        type: custom:button-card
        name: '[[name]]'
        deep_press: true
        icon: 'mdi:alert' 
        size: 26px
        aspect_ratio: 13/2
        show_name: true
        show_icon: true
        show_state: false
        show_label: false
        show_last_changed: false
        styles:
          card:
            - --ha-card-background: '#c0392b'
          name:
            - font-size: 15px
            - font-family: Helvetica
            - color: white
            - justify-self: start
            - padding-left: 18px
            - padding-top: 5px
          img_cell:
            - align-self: start
            - text-align: start
            - margin-left: 21px
          grid: 
            - grid-template-areas: '"i n"'
            - grid-template-columns: 8% 1fr
            - grid-template-rows: 1fr
          icon:
            - color: white
#        state:
#          - value: "off"

  warning:
    card: 
      type: conditional
      conditions:
        - entity: '[[entity]]'
          state: '[[state]]'
      card:
        type: custom:button-card
        name: '[[name]]'
        deep_press: true
        icon: 'mdi:alert-circle' 
        size: 26px
        aspect_ratio: 13/2
        show_name: true
        show_icon: true
        show_state: false
        show_label: false
        show_last_changed: false
        styles:
          card:
            - --ha-card-background: '#f9c536'
          name:
            - font-size: 15px
            - font-family: Helvetica
            - color: black
            - justify-self: start
            - padding-left: 18px
            - padding-top: 5px
          img_cell:
            - align-self: start
            - text-align: start
            - margin-left: 21px
          grid: 
            - grid-template-areas: '"i n"'
            - grid-template-columns: 8% 1fr
            - grid-template-rows: 1fr
          icon:
            - color: black
        state:
          - value: "off"

  warning_marquee:
    card: 
      type: conditional
      conditions:
        - entity: '[[entity]]'
          state: '[[state]]'
      card:
        type: custom:button-card
        name: >
          [[[return `<marquee>[[name]]<\marquee>`]]]
        deep_press: true
        icon: 'mdi:alert-circle' 
        size: 26px
        aspect_ratio: 13/2
        show_name: true
        show_icon: true
        show_state: false
        show_label: false
        show_last_changed: false
        styles:
          card:
            - --ha-card-background: '#f9c536'
          name:
            - font-size: 15px
            - font-family: Helvetica
            - color: black
            - justify-self: start
            - padding-left: 18px
            - padding-top: 5px
          img_cell:
            - align-self: start
            - text-align: start
            - margin-left: 21px
          grid: 
            - grid-template-areas: '"i n"'
            - grid-template-columns: 8% 1fr
            - grid-template-rows: 1fr
          icon:
            - color: black
        state:
          - value: "off"

  warning_2line:
    card: 
      type: conditional
      conditions:
        - entity: '[[entity]]'
          state: '[[state]]'
      card:
        type: custom:button-card
        name: >
          [[[return `[[name]]`]]]
        deep_press: true
        icon: 'mdi:alert-circle' 
        size: 28px
        aspect_ratio: 28/5
        show_name: true
        show_icon: true
        show_state: false
        show_label: false
        show_last_changed: false
        styles:
          card:
            - --ha-card-background: '#f9c536'
          name:
            - word-wrap: break-word
            - text-overflow: unset
            - white-space: unset
            - word-break: break-word
            - font-size: 15px
            - font-family: Helvetica
            - color: black
            - justify-self: start
            - padding-left: 18px
            - padding-top: 4px
          img_cell:
            - align-self: start
            - text-align: start
            - margin-left: 21px
          grid: 
            - grid-template-areas: '"i n"'
            - grid-template-columns: 8% 1fr
            - grid-template-rows: 1fr
          icon:
            - color: black
        state:
          - value: "off"

  notice_marquee:
    card: 
      type: conditional
      conditions:
        - entity: '[[entity]]'
          state: '[[state]]'
      card:
        type: custom:button-card
        name: >
          [[[return `<marquee>[[name]]<\marquee>`]]]
        deep_press: true
        icon: 'mdi:information' 
        size: 26px
        aspect_ratio: 13/2
        show_name: true
        show_icon: true
        show_state: false
        show_label: false
        show_last_changed: false
        styles:
          name:
            - font-size: 15px
            - font-family: Helvetica
            - justify-self: start
            - padding-left: 18px
            - padding-top: 5px
          img_cell:
            - align-self: start
            - text-align: start
            - margin-left: 21px
          grid: 
            - grid-template-areas: '"i n"'
            - grid-template-columns: 8% 1fr
            - grid-template-rows: 1fr
        state:
          - value: "off"

  low_battery:
    card: 
      type: conditional
      conditions:
        - entity: '[[entity]]'
          state: '[[state]]'
      card:
        type: custom:button-card
        name: '[[name]]'
        deep_press: true
        icon: 'mdi:battery-30' 
        size: 26px
        aspect_ratio: 13/2
        show_name: true
        show_icon: true
        show_state: false
        show_label: false
        show_last_changed: false
        styles:
          name:
            - font-size: 15px
            - font-family: Helvetica
            - justify-self: start
            - padding-left: 18px
            - padding-top: 5px
          img_cell:
            - align-self: start
            - text-align: start
            - margin-left: 21px
          grid: 
            - grid-template-areas: '"i n"'
            - grid-template-columns: 8% 1fr
            - grid-template-rows: 1fr
        state:
          - value: "off"

  very_low_battery:
    card: 
      type: conditional
      conditions:
        - entity: '[[entity]]'
          state: '[[state]]'
      card:
        type: custom:button-card
        name: '[[name]]'
        deep_press: true
        icon: 'mdi:battery-10' 
        size: 26px
        aspect_ratio: 13/2
        show_name: true
        show_icon: true
        show_state: false
        show_label: false
        show_last_changed: false
        styles:
          card:
            - --ha-card-background: '#f9c536'
          name:
            - font-size: 15px
            - font-family: Helvetica
            - color: black
            - justify-self: start
            - padding-left: 18px
            - padding-top: 5px
          img_cell:
            - align-self: start
            - text-align: start
            - margin-left: 21px
          grid: 
            - grid-template-areas: '"i n"'
            - grid-template-columns: 8% 1fr
            - grid-template-rows: 1fr
          icon:
            - color: black
        state:
          - value: "off"

  very_low_battery_marquee:
    card: 
      type: conditional
      conditions:
        - entity: '[[entity]]'
          state: '[[state]]'
      card:
        type: custom:button-card
        name: >
          [[[return `<marquee>[[name]]<\marquee>`]]]
        deep_press: true
        icon: 'mdi:battery-10' 
        size: 26px
        aspect_ratio: 13/2
        show_name: true
        show_icon: true
        show_state: false
        show_label: false
        show_last_changed: false
        styles:
          card:
            - --ha-card-background: '#f9c536'
          name:
            - font-size: 15px
            - font-family: Helvetica
            - color: black
            - justify-self: start
            - padding-left: 18px
            - padding-top: 5px
          img_cell:
            - align-self: start
            - text-align: start
            - margin-left: 21px
          grid: 
            - grid-template-areas: '"i n"'
            - grid-template-columns: 8% 1fr
            - grid-template-rows: 1fr
          icon:
            - color: black
        state:
          - value: "off"

  open_windows_hot:
    card: 
      type: conditional
      conditions:
        - entity: 'binary_sensor.open_window_making_house_hot'
          state: 'on'
      card:
        type: custom:button-card
        name: >
          [[[return `<marquee> ${states['input_text.windows_making_house_hot'].state} <\marquee>`]]]
        deep_press: true
        icon: 'mdi:fire' 
        size: 26px
        aspect_ratio: 13/2
        show_name: true
        show_icon: true
        show_state: false
        show_label: false
        show_last_changed: false
        styles:
          name:
            - font-size: 15px
            - font-family: Helvetica
            - justify-self: start
            - padding-left: 18px
            - padding-top: 5px
          img_cell:
            - align-self: start
            - text-align: start
            - margin-left: 21px
          grid: 
            - grid-template-areas: '"i n"'
            - grid-template-columns: 8% 1fr
            - grid-template-rows: 1fr
        state:
          - value: "off"

  open_windows_cold:
    card: 
      type: conditional
      conditions:
        - entity: 'binary_sensor.open_window_making_house_cold'
          state: 'on'
      card:
        type: custom:button-card
        name: >
          [[[return `<marquee> ${states['input_text.windows_making_house_cold'].state} <\marquee>`]]]
        deep_press: true
        icon: 'mdi:snowflake' 
        size: 26px
        aspect_ratio: 13/2
        show_name: true
        show_icon: true
        show_state: false
        show_label: false
        show_last_changed: false
        styles:
          name:
            - font-size: 15px
            - font-family: Helvetica
            - justify-self: start
            - padding-left: 18px
            - padding-top: 5px
          img_cell:
            - align-self: start
            - text-align: start
            - margin-left: 21px
          grid: 
            - grid-template-areas: '"i n"'
            - grid-template-columns: 8% 1fr
            - grid-template-rows: 1fr
        state:
          - value: "off"

  open_windows_cold_nomarquee:
    card: 
      type: conditional
      conditions:
        - entity: 'binary_sensor.open_window_making_house_cold'
          state: 'on'
      card:
        type: custom:button-card
        name: >
          [[[return `${states['input_text.windows_making_house_cold'].state}`]]]
        deep_press: true
        icon: 'mdi:snowflake' 
        size: 21px
        aspect_ratio: 2/1
        show_name: true
        show_icon: true
        show_state: false
        show_label: false
        show_last_changed: false
        styles:
          name:
            - word-wrap: break-word
            - text-overflow: unset
            - white-space: unset
            - word-break: break-word
            - font-size: 15px
            - font-family: Helvetica
            - justify-self: start
            - padding-left: 18px
            - padding-top: 4px
            - padding-right: 4px
          img_cell:
            - align-self: start
            - text-align: start
            - margin-left: 22px
          grid: 
            - grid-template-areas: '"i n"'
            - grid-template-columns: 8% 1fr
            - grid-template-rows: 1fr
        state:
          - value: "off"

  open_windows_hot_nomarquee:
    card: 
      type: conditional
      conditions:
        - entity: 'binary_sensor.open_window_making_house_hot'
          state: 'on'
      card:
        type: custom:button-card
        name: >
          [[[return `${states['input_text.windows_making_house_hot'].state}`]]]
        deep_press: true
        icon: 'mdi:snowflake' 
        size: 21px
        aspect_ratio: 2/1
        show_name: true
        show_icon: true
        show_state: false
        show_label: false
        show_last_changed: false
        styles:
          name:
            - word-wrap: break-word
            - text-overflow: unset
            - white-space: unset
            - word-break: break-word
            - font-size: 15px
            - font-family: Helvetica
            - justify-self: start
            - padding-left: 18px
            - padding-top: 4px
            - padding-right: 4px
          img_cell:
            - align-self: start
            - text-align: start
            - margin-left: 22px
          grid: 
            - grid-template-areas: '"i n"'
            - grid-template-columns: 8% 1fr
            - grid-template-rows: 1fr
        state:
          - value: "off"

#decluttering_templates:
#  alert:
#    card:  
#      type: custom:button-card
#      name: '[[name]]'
#      deep_press: true
#      icon: 'mdi:alert' 
#      size: 28px
#  #    lock: '[[lock]]'
#      aspect_ratio: 7/1
#  #    entity: fan.sophies_room_air_purifier
#      label: '[[name]]'
#      show_name: true
#      show_icon: true
#      show_state: false
#      show_label: false
#      show_last_changed: false
#  #    tap_action: '[[tap_action]]'
#  #    hold_action: '[[hold_action]]'
#      styles:
#        card:
#  #        - border-radius: '[[border-radius]]'
#          - --ha-card-background: '#d40404'
#  #        - box-shadow: '[[box-shadow]]' # Changed/Added in 0.13.0
#        name:
#          - font-size: 18px
#          - font-family: Helvetica
#          - color: white
#          - justify-self: start
#          - padding-left: 18px
#          - padding-top: 5px
#        img_cell:
#          - align-self: start
#          - text-align: start
#  #        - margin-right: 22px
#          - margin-left: 21px
#        grid: 
#          - grid-template-areas: '"i n"'
#          - grid-template-columns: 8% 1fr
#          - grid-template-rows: 1fr
#        icon:
#          - color: white
#      state:
#        - value: "off"
#  #        spin: '[[spin]]'

 
#### EIGHTH TAB ####
#
#
#
#  - title: Utility Costs
#    panel: true
#    icon: mdi:power-plug
#    cards:
#    
#    - type: vertical-stack
#      cards:   
#
#      - type: iframe
#        url: https://pro.smappee.net/analyse
#        aspect_ratio: 100%