Lovelace banner card

A fluffy linkable banner with interactive glances to spice up your home dashboards

Installation

Try HACS first

1. Download the banner-card.js from the latest release and store it in your configuration/www folder. Previously you could download the source file from Github but starting from the 0.14 release that is no longer possible. If you try to do so it will crash
2. Configure Lovelace to load the card:

resources:
  - url: /local/banner-card.js?v=1
    type: module

Available configuration options:

heading

Previously headings only allowed strings and icons were a hack using unicode emojis. From 0.10.0 you can however render icons from the mdi/hass icon sets:

type: custom:banner-card
heading:
  - mdi:shower
  - Bathroom

Using the alternate YAML form for arrays might be more/less readable depending on your preference:

type: custom:banner-card
heading: [mdi:shower, Bathroom]

You can combine as many texts and icons as you like this way.

type: custom:banner-card
heading: [mdi:shower, Bathroom, mdi:paper-roll]

map_state

You can use map_state to force a value or icon to be rendered when the entity has a certain state. It either supports a full object where you can override any key for the entity, like value, name, unit and so on, or a shorthand string that maps to value. Both forms in an example:

entity: media_player.office
map_state:
  playing: mdi:disc-player
  not_playing:
    value: mdi:stop
    name: A custom entity heading

Using when

You can filter entities with a simple but powerful when object. This allows you to filter based on state and/or attributes. It is probably simpliest explained through a few examples

This limits to only showing a media_player entity when it is playing. It uses the shorthand form for when where a simple string is used instead of specifying an object with state key.

entity: media_player.office
when: playing

This example limits to only showing a light entity when its on and above a certain brightness

entity: light.my_light
when:
  state: "on"
  attributes:
    brightness: [">", 50]

The last example shows how passing a simple string/number will imply an equality operator check, whereas you can configure using an array to using different operators. The following operators exist:

When operators

Using entity action

You can add simple buttons by specifying the action property for an entity. This is intended for simple use cases to start scripts or set a light to specific brightness for example. You can enforce a fixed icon using a crazy hack (and there I made it a feature) that sets an entities value via config. (Its normaly read from state). You can also use map_state to use different icons for different states.

entity: light.my_light
name: Reading light
value: mdi:book-open-page-variant
action:
  service: light.turn_on
  brightness: 50

CSS vars for theming

Please see the official docs on theming or check out a tutorial like this one The card uses the following CSS variables:

Examples

Using map_state to render a switch as a colored icon

- entity: switch.switch
  name: Is it on?
  domain: sensor
  value: mdi:star
  color: black
  map_state:
    "on":
      color: yellow

Use a background image instead of a color

type: custom:banner-card
background: 'url("https://source.unsplash.com/random/500x300")'
heading: Image bacground

Basic examples

type: custom:banner-card
background: "#EDE7B0"
heading: "\U0001F6CB Living room"
link: /lovelace/living_room
entities:
  - light.fibaro_system_fgd212_dimmer_2_level
  - light.fibaro_system_fgd212_dimmer_2_level_3
  - sensor.aeotec_zw100_multisensor_6_temperature_6
  - entity: sensor.aeotec_zw100_multisensor_6_luminance_6
    name: Lux
  - entity: cover.fibaro_system_fgrm222_roller_shutter_controller_2_level
    name: Roller shutter

type: custom:banner-card
heading:
  - mdi:shower
  - Bathroom
background: "#B0C2ED"
link: /lovelace/bathroom
entities:
  - entity: light.fibaro_system_fgd212_dimmer_2_level_11
    name: Light
  - entity: sensor.aeotec_zw100_multisensor_6_temperature_5
    name: Temperature
  - entity: sensor.aeotec_zw100_multisensor_6_relative_humidity_5
    name: Humidity