Repository files navigation

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

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

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

• Graphical representation of your home with different themes
• Displays things such as weather, state of lights and garage door as well as arbitrary sensors
• Lovelace UI editor for some options (still early work)
• Flexible tap and hold actions (same as for entity-button)
• Create your own custom themes!
• Transparent or regular paper card background

Some things I want to add in upcoming releases:

• More house types and better graphics
• Extend with additional overlays for things like alarm, people and doors
• More ways to customize how the card looks and feel
• Extend or override existing themes usingcustom_themes
• More improved Lovelace UI editor
• Support for custom_updater
• Better development environment with linting, etc.

1. Downloadhome-card.js,themes.js andthemes and copy them intoconfig/www/home-card (create thehome-card directory)

2. Add a reference tohome-card/home-card.js inside yourui-lovelace.yaml

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

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

2. Add a reference tohome-card/home-card.js inside yourui-lovelace.yaml

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

Not using this yet...

If you...

• manually copied the files, just download the latest files and overwrite what you already have
• cloned the repository from Github, just dogit pull to update

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

The card is split into three different areas:

Explanation of each area:

• Weather area (Red): Displays current weather with an icon (e.g. sun or cloud) and temperature. Name of location is displayed as well. Controlled by theweather option.
• House area (Green): Main visualization of the house. Consists ofoverlay images that can be shown or hidden depending on an entity state. A car overlay (image) can for instance be shown ifdevice_tracker.car has the statehome. Controlled by theentities option.
• Resources (Blue): Simplistic view of sensors. Controlled by theresources option.

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

The following themes and overlays are currently supported:

These states are supported by the overlays:

You may add additional state mappings using astate_map to support other component types, seeEntity object.

Anentity object maps an entity in Home Assistant to an overlay in the card, e.g. whichdevice_tracker entity that shows/hides the car or whichlight that corresponds to "upstairs".

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

-type:carentity:binary_sensor_.carstate_map:on:homeoff:not_home

This object supports customtap and hold actions.

Aresource 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 anicon and/orunit_of_measurement.

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

-entity:sensor.water_usageicon:mdi:waterunit_of_measurement:liter

This object supports customtap and hold actions.

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:

• Keep images small (in size) to keep everything snappy
• Re-use overlays and names as much as possible to keep themes consistent
• If you make a cool looking theme, feel free to send a PR (make sure to clarify where images come from to cope with licenses) and remember to include a screenshot
• It is currently not possible to alter/extend existing themes, only define additional themes

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

This card supports customtap andhold actions for most things available in the card. Each theme defines the default behavior for howtap andhold works, but you may freely override this behavior. The exact same format as used by theentity button in lovelace is used here.

The following options are valid fortap_action andhold_action:

To see an example, clickhere.

Simple example using basic features:

-type:'custom:home-card'theme:two_story_with_garageweather:weather.homeentities:    -type:garageentity:cover.garage_door    -type:upstairs_lightentity:light.demo_upstairs_light    -type:downstairs_lightentity:light_downstairs_light    -type:carentity:device_tracker.carresources:    -entity:utility meter.water    -entity:utility meter.electricity    -entity:binary_sensor.movement_backyardicon:'mdi:alarm-light'    -entity:sensor.outside_temperatureicon:'mdi:thermometer'

Simple example using varioustap andhold actions:

-type:'custom:home-card'theme:two_story_with_garageentities:    -type:carentity:device_tracker.cartap_action:action:navigatenavigation_path:/lovelace/2hold_action:action:more-inforesources:    -entity:sensor.outside_temperaturetap_action:action:call-serviceservice:switch.turn_onservice_data:entity_id:switch.fanhold_action:action:none

Here, thecar type is used as an example. It requires the specified entity to be adevice_tracker as it maps states likehome andnot_home to different overlays. But you can add additional mappings to support for instance abinary_sensor as well usingstate_map, like below:

-type:'custom:home-card'theme:two_story_with_garageentities:    -type:carentity:binary_sensor.carstate_map:on:homeoff:not_home

You can define you own themes quite simply usingcustom_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_homeentities:    -type:carentity:device_tracker.carcustom_themes:my_home:house:house.pngoverlay_actions:'*':tap_action:action:togglecar:tap_action:action:more-infooverlays:car:home:            -image:car_home.pngstyle:left:10%top:10%not_home:            -image:car_away.pngstyle:left:40%top:40%

Some notes here:

• You can defined multiple images for each state if you like (as a list is used)
• style translates to CSS style attributes, so you may use any CSS attributes here
• The theme is calledmy_home, so a directory with the same name must be created in thethemes directory and all images placed there
• Thehouse option is the main backdrop image and must be defined
• Overlay name (e.g.car) corresponds totype you specify underentities and may be anything you like (but try to be consistent with other themes to simply for other users in case you share your theme)
• If an entity in Home Assistant has a state that is not defined by its corresponding overlay, no overlay will be shown
• Differenttap_action andhold_action configurations can be defined for specific overlay taps (like for 'car' in the example) or for all overlays using*.

• Very limited lovelace editor support
• Only one theme built-in

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.

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

• Weather Icons
• House
• Car

The excellentclear 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.