Home

Awesome

Home Card

A quick glance of the state of your home in Home Assistant Lovelace UI.

Demo of card

Initial work on UI editor (only some options can be edited):

UI Editor

Note: This card is still in early development (preview/proof-of-concept), beware of bugs and lacking features!

Features

Roadmap

Some things I want to add in upcoming releases:

Install

Simple Install

  1. Download home-card.js, themes.js and themes and copy them into config/www/home-card (create the home-card directory)

  2. Add a reference to home-card/home-card.js inside your ui-lovelace.yaml

resources:
  - url: /local/home-card/home-card.js?v=0
    type: module

Git Install

  1. Clone this repository into your www-directory: git clone https://github.com/postlund/home-card.git

  2. Add a reference to home-card/home-card.js inside your ui-lovelace.yaml

resources:
  - url: /local/home-card/home-card.js?v=0
    type: module

Custom updater

Not using this yet...

Updating

If you...

... and increase ?v=X to ?vX+1.

Using the card

Card layout

The card is split into three different areas:

Structure of card

Explanation of each area:

Both the weather and resources areas are optional and will not displayed if omitted from the configuration. The house area are however mandatory.

Options

NameTypeDefaultDescription
typestringrequiredcustom:home-card
themestringrequiredName of a theme, see supported themes
backgroundstringtransparentSupported values: empty, transparent, paper-card
weatherstringoptionalweather entity used for displaying location and temperature
entitiesobjectoptionalList of entity objects
resourcesobjectoptionalList of resource objects
custom_themesobjectoptionalList of theme objects

Supported themes

The following themes and overlays are currently supported:

ThemeOverlays
two_story_with_garagedoor, garage, outside_light, upstairs_light, downstairs_light, car, sprinkler

These states are supported by the overlays:

OverlayStatesComponent examples
carhome, not_homedevice_tracker
dooron, offE.g. binary_sensor, switch
downstairs_lightson, offE.g. light, binary_sensor
garageopen, closedcover
outside_lighton, offE.g. light, binary_sensor
upstairs_lightson, offE.g. light, binary_sensor
sprinkleron, offE.g. binary_sensor, switch

You may add additional state mappings using a state_map to support other component types, see Entity object.

Entity object

An entity object maps an entity in Home Assistant to an overlay in the card, e.g. which device_tracker entity that shows/hides the car or which light that corresponds to "upstairs".

NameTypeDefaultDescription
typestringrequiredOverlay type, see overlay tabe
entitystringrequiredEntity id from Home Assistant, e.g. light.downstairs
state_mapmapoptionalKey-value map of state (in Home Assistant) to overlay state

A simple example of an entity object in yaml looks like this:

- type: car
  entity: binary_sensor_.car
  state_map:
    on: home
    off: not_home

This object supports custom tap and hold actions.

Resource object

A resource is a simple sensor that is displayed beneath the house, e.g. a temperature sensor or water usage. You can use any entity but you might have to manually specify an icon and/or unit_of_measurement.

NameTypeDefaultDescription
entitystringrequiredAn entity from Home Assistant, e.g, sensor.water_usage
iconstringoptionalOverride icon to use, e.g. mdi:car
unit_of_measurementstringoptionalOverride unit of measurement, e.g. lux

A simple example of a resource object in yaml looks like this:

- entity: sensor.water_usage
  icon: mdi:water
  unit_of_measurement: liter

This object supports custom tap and hold actions.

Theme object

THIS IS EXPERIMENTAL AND MAY BREAK LATER - BEWARE!

You can define your own themes and use your own images if you like. Some things to consider:

The format of this object will be described in more detail once the format has been set, but have a look at the example to see how you configure your theme in current state.

Tap and hold actions

This card supports custom tap and hold actions for most things available in the card. Each theme defines the default behavior for how tap and hold works, but you may freely override this behavior. The exact same format as used by the entity button in lovelace is used here.

The following options are valid for tap_action and hold_action:

NameTypeDefaultDescription
actionstringrequiredAction to perform, one of: more-info, toggle, call-service, navigate, none
navigation_pathstringoptionalWhere to navigate (e.g. /lovelace/1) when action is navigate
servicestringoptionalService to call (e.g. switch.turn_on) when action is call-service
service_datastringoptionalService data to include when calling a service (e.g. entity_id: switch.bedroom).

To see an example, click here.

Example usage

Defining a home

Simple example using basic features:

- type: 'custom:home-card'
  theme: two_story_with_garage
  weather: weather.home
  entities:
    - type: garage
      entity: cover.garage_door
    - type: upstairs_light
      entity: light.demo_upstairs_light
    - type: downstairs_light
      entity: light_downstairs_light
    - type: car
      entity: device_tracker.car
  resources:
    - entity: utility meter.water
    - entity: utility meter.electricity
    - entity: binary_sensor.movement_backyard
      icon: 'mdi:alarm-light'
    - entity: sensor.outside_temperature
      icon: 'mdi:thermometer'

Using custom tap and hold actions

Simple example using various tap and hold actions:

- type: 'custom:home-card'
  theme: two_story_with_garage
  entities:
    - type: car
      entity: device_tracker.car
      tap_action:
        action: navigate
        navigation_path: /lovelace/2
      hold_action:
        action: more-info
  resources:
    - entity: sensor.outside_temperature
      tap_action:
        action: call-service
        service: switch.turn_on
        service_data:
          entity_id: switch.fan
      hold_action:
        action: none

Re-mapping states

Here, the car type is used as an example. It requires the specified entity to be a device_tracker as it maps states like home and not_home to different overlays. But you can add additional mappings to support for instance a binary_sensor as well using state_map, like below:

- type: 'custom:home-card'
  theme: two_story_with_garage
  entities:
    - type: car
      entity: binary_sensor.car
      state_map:
        on: home
        off: not_home

Creating custom themes

You can define you own themes quite simply using custom_themes. The basic structure looks like below (car is used to illustrate, you may add as many overlays as you like):

- type: 'custom:home-card'
  theme: my_home
  entities:
    - type: car
      entity: device_tracker.car
  custom_themes:
    my_home:
      house: house.png
      overlay_actions:
        '*':
          tap_action:
            action: toggle
        car:
          tap_action:
            action: more-info
      overlays:
        car:
          home:
            - image: car_home.png
              style:
                left: 10%
                top: 10%
          not_home:
            - image: car_away.png
              style:
                left: 40%
                top: 40%

Some notes here:

Issues and imitations

Getting errors?

Clear the browser cache, restart Home Assistant and make sure the configuration is correct.

If you believe you have found an error, please write an issue.

External resources

Images

This card uses some great free resources from Freepik, namely these:

Other resources

The excellent clear theme is used in demo graphics, you can find it here:

https://community.home-assistant.io/t/clear-theme/100464

Background image is linked from the same page as well.