ui-lovelace.yaml

#title: My Awesome Home
#views:
    # View tab title.
#  - title: Example
#    panel: true
    # Makes the first card fill the view
#    cards:
        # The markdown card will render markdown text.
#      - type: markdown
#        title: Lovelace
#        content: >
#          Welcome to your **Lovelace UI**.
######################

title: My Awesome Home
# Include external resources
resources:
  - url: /local/gauge-card.js?v=1
    type: js
  - url: /local/my-webfont.css
    type: css
  - url: /local/custom-lovelace/thermostat-card/thermostat-card.js?v=1
    type: module
  - url: /local/mini-graph-card-bundle.js?v=0.9.3
    type: module

name: Home
views:
  - title: Main
    cards:
      - type: custom:thermostat-card
        title: Living Room
        entity: climate.honeywell


# Optional background for all views. Check https://developer.mozilla.org/en-US/docs/Web/CSS/background for more examples.
background: center / cover no-repeat url("/background.png") fixed
# Exclude entities from "Unused entities" view
excluded_entities:
  - weblink.router
views:
    # View tab title.
  - title: Home
    # Optional unique id for direct access /lovelace/${id}
    id: home
    # Optional background (overwrites the global background).
    background: radial-gradient(crimson, skyblue)
    # Each view can have a different theme applied. Theme should be defined in the frontend.
    theme: dark-mode
    # The cards to show on this view.
    cards:
        # The filter card will filter entities for their state
      - type: entity-filter
        entities:
          - device_tracker.jerry_pixel3
          - device_tracker.louise_lc
        state_filter:
          - 'home'
        card:
          type: glance
          title: People that are home

      - type: alarm-panel
        title: House Alarm
        entity: alarm_control_panel.home_alarm

        # The picture entity card will represent an entity with a picture
      - type: picture-entity
        image: https://www.home-assistant.io/images/default-social.png
        entity: switch.fr_light_switch

Power:
  - type: horizontal-stack
        cards:
          - type: "custom:mini-graph-card"
            entity: sensor.power_meter
            name: Power
            line_color: '#FF0000'
            line_width: 8
#          - type: "custom:mini-graph-card"
#            entity: sensor.
#            name: Leistung
#            line_color: '#FF0000'
#            line_width: 8
#      - type: horizontal-stack

# Family Room

    # Specify a tab icon if you want the view tab to be an icon.
  #- icon: mdi:home-assistant
    # Title of the view. Will be used as the tooltip for tab icon
  - title: Family Room
    cards:
        # Entities card will take a list of entities and show their state.
      #- type: entities
        # Title of the entities card
        # title: Example
        # The entities here will be shown in the same order as specified.
        # Each entry is an entity ID or a map with extra options.
        #entities:
        #  - entity: switch.fr_wall_switch_switch
        #    # Override the name to use
        #    name: FR Light

      - type: picture-glance
        title: Family Room
        entities:
          - switch.fr_wall_switch_switch
          - switch.patio_light_switch
        camera_image: camera.family_room

#      - type: horizontal-stack
#        cards:
#        - type: entity-button
#          name: Family Room Light
#          icon: mdi:lightbulb
#          entity: switch.fr_wall_switch_switch
#          tap_action: toggle 
#        - type: entity-button
#          name: Patio Light
#          icon: mdi:lightbulb
#          entity: switch.patio_light_switch
#          tap_action: toggle 

      - type: horizontal-stack
        cards:
        - type: gauge
          title: FR Temp
          # unit_of_measurement: 'degF' # '℉F'
          entity: sensor.fr_temperature
          min: 40
          max: 80

        - type: gauge
          title: FR Humidity
          unit_of_measurement: '%'
          entity: sensor.fr_temperature_humidity
          min: 20
          max: 50

        # The markdown card will render markdown text.
      - type: markdown
        title: Lovelace
        content: >
          Welcome to your **Lovelace UI**.

# Climate

  - title: Climate
    cards:
      - type: weather-forecast
        entity: weather.dark_sky