ui-lovelace.yaml

title: "Home"
custom_header:
  compact_mode: true
  footer_mode: false
  menu_hide: true
  reverse_button_direction: true
  reverse_tab_direction: true
views:
  # Home screen
  - icon: "mdi:theater"
    path: living-room
    cards:
      - type: vertical-stack
        cards:
          - !include features/presence/ui/person_locations.yaml
      - !include features/home_cinema/ui/summary.yaml
      - !include features/home_cinema/ui/players.yaml
      # Alerts and such
      - !include features/system/ui/problems.yaml
      - !include features/packages/ui/summary.yaml

      - !include features/crisp/ui/next_order.yaml
      - !include features/washing_machine/ui/summary.yaml
      - type: horizontal-stack
        cards:
          - !include features/weather/ui/living_room_summary.yaml
          - !include features/weather/ui/garden_summary.yaml
      - type: horizontal-stack
        cards:
          - !include features/weather/ui/bedroom_summary.yaml
          - !include features/weather/ui/attic_summary.yaml
          - !include features/weather/ui/guest_room_summary.yaml
      # Maintenance (lower priority)
      - !include features/system/ui/battery_summary.yaml

      - !include features/electricity/ui/summary.yaml
      - !include features/weather/ui/outside_summary.yaml
      - !include features/gardening/ui/summary.yaml
      - !include features/vacuum/ui/summary.yaml

      # - !include features/weather/ui/buienalarm.yaml, Constantly broken, look for fix
      # - !include ui/media/plex-status.yaml, not useful yet

    # More info popup replacements
    popup_cards:
      sensor.thijs_location: !include features/presence/ui/thijs_location_popup.yaml

  # Plants
  #- icon: mdi:sprout
  #  path: plants
  #  cards:
  #    - !include features/gardening/ui/plant.yaml

  # Tasks
  - icon: "mdi:check-bold"
    path: tasks
    cards:
    - !include features/tasks/ui/today.yaml
    - !include features/tasks/ui/periodic_buttons.yaml
    - !include features/tasks/ui/periodic_buttons_missing.yaml

  # Lighting
  - icon: mdi:lightbulb
    path: lights
    badges: []
    cards:
      - !include features/lighting/ui/floor_0.yaml
      - !include features/lighting/ui/floor_1.yaml
      - !include features/lighting/ui/floor_2.yaml

  # Updates
  - icon: mdi:download
    path: updates
    badges: []
    cards:
      - !include features/system/ui/updates.yaml

  # Batteries
  - icon: mdi:battery-80
    path: batteries
    badges: []
    cards:
      - !include features/system/ui/battery_all.yaml

# Templates for type:custom-button
button_card_templates:
  # Card header that can be tapped
  header:
    color: transparent
    color_type: card
    show_state: false
    show_icon: false
    styles:
      card:
        - background-color: 'transparent'
        - color: 'white'
        - padding: 16px 16px 8px 16px
        - margin-bottom: -8px
        - box-shadow: 'none'
        - border: '0 none'
      name:
        - font-size: 20px
  header_small:
    template: header
    styles:
      card:
        - padding: 4px 16px 8px 16px
      name:
        - font-size: 15px

  # Small button with a statistic
  statistic_button:
    show_state: true
    show_icon: false
    styles:
      card:
        - padding-bottom: 0.8rem
        - height: 58px
      name:
        - font-size: 0.8rem
        - text-transform: uppercase
        - opacity: 0.7
        - margin-bottom: 2px
      state:
        - font-size: 1.3rem

  # Statistic button with a tiny graph inside
  statistic_button_graph:
    template: statistic_button
    styles:
      card:
        - padding-top: 0.6rem
        - padding-bottom: 0.6rem
        - height: auto

  # Humidity state color
  statistic_button_humidity:
    template: statistic_button
    color_type: card # Use the color as card background
    state:
      # Bad states
      - value: 20
        operator: "<"
        color: "#790000"
      - value: 70
        operator: ">"
        color: "#790000"
      # Not-ideal states
      - value: 30
        operator: "<"
        color: "#ab6300"
      - value: 60
        operator: ">"
        color: "#ab6300"
      # Good state
      - operator: "default"
        color: "var( --ha-card-background, var(--card-background-color, white) )"

  # CO2 state color
  statistic_button_co2:
    template: statistic_button
    color_type: card # Use the color as card background
    state:
      # Bad state
      - value: 1500
        operator: ">"
        color: "#790000"
      # Worrisome state
      - value: 1000
        operator: ">"
        color: "#ab6300"
      # Good state
      - operator: "default"
        color: "var( --ha-card-background, var(--card-background-color, white) )"

  # Rain state color
  statistic_button_rain:
    template: statistic_button
    color_type: card # Use the color as card background
    state:
      # Stormy
      - value: 10
        operator: ">"
        color: "#0084d1"
      # More rain
      - value: 5
        operator: ">"
        color: "#0066a1"
      # Bit of rain
      - value: 1
        operator: ">"
        color: "#00466e"
      # No rain
      - operator: "default"
        color: "var( --ha-card-background, var(--card-background-color, white) )"

  # Wind state color
  statistic_button_wind:
    template: statistic_button
    color_type: card # Use the color as card background
    state:
      # Stormy wind
      - value: 40
        operator: ">"
        color: "#790000"
      # Hard wind
      - value: 25
        operator: ">"
        color: "#ab6300"
      # Calm
      - operator: "default"
        color: "var( --ha-card-background, var(--card-background-color, white) )"

  # PM 2.5 state color
  statistic_button_pm2_5:
    template: statistic_button
    color_type: card # Use the color as card background
    state:
      # Bad state
      - value: 35
        operator: ">"
        color: "#790000"
      # Worrisome state
      - value: 12
        operator: ">"
        color: "#ab6300"
      # Good state
      - operator: "default"
        color: "var( --ha-card-background, var(--card-background-color, white) )"

  # PM 10 state color
  statistic_button_pm10:
    template: statistic_button
    color_type: card # Use the color as card background
    state:
      # Bad state
      - value: 80
        operator: ">"
        color: "#790000"
      # Worrisome state
      - value: 40
        operator: ">"
        color: "#ab6300"
      # Good state
      - operator: "default"
        color: "var( --ha-card-background, var(--card-background-color, white) )"

  # Plant state color
  statistic_button_plant:
    template: statistic_button
    color_type: card # Use the color as card background
    state:
      # Bad state
      - value: 'problem'
        color: "#790000"
      # OK state
      - operator: "default"
        color: "var( --ha-card-background, var(--card-background-color, white) )"

  # Home Cinema mode buttons
  home_cinema_mode:
    # Use color as card background instead of state text color
    color_type: card
    # iOS only feedback when pressing
    haptic: light
    # Square buttons
    aspect_ratio: 1/1
    # Custom styling
    styles:
      name:
        # Smaller names to fit more buttons
        - font-size: 0.9rem
      lock:
        # Smaller lock (from 24px)
        - width: 16px

  # Tiny button for switching to less-used sources
  home_cinema_mode_tiny:
    template: home_cinema_mode
    show_name: false
    size: 65%
    styles:
      overlay:
        - display: 'none'
      lock:
        - display: 'none'

  # Vacuum start buttons
  icon_button:
    # iOS only feedback when pressing
    haptic: light
    # Icon size
    size: 30px
    # Custom styling
    styles:
      card:
        - height: 80px
      name:
        - font-size: 1rem

  mop_button:
    template: icon_button
    variables:
      # Error message if starting is blocked by something
      error: >-
        [[[
          if (states["binary_sensor.duster_mop_attached"].state === 'off') {
            return "Missing mop";
          } else if (states["binary_sensor.duster_water_box_attached"].state === 'off') {
            return "Missing water box";
          } else if (states["binary_sensor.duster_water_shortage"].state === 'on') {
            return "Water low";
          } else {
            return "";
          }
        ]]]
    # Show the error
    label: >-
      [[[ return variables.error ]]]
    show_label: >-
      [[[ return variables.error !== "" ]]]
    # Lock when there is an error
    lock:
      enabled: >-
        [[[ return variables.error !== "" ]]]
      exemptions: [ ]
    styles:
      card:
        - opacity: >-
            [[[ return variables.error ? 0.6 : 1 ]]]
      label:
        # Small font size for the status label
        - font-size: 0.7rem
        - color: orange