Replace the more-info dialog of one entity with a custom lovelace card
popup-card is no longer a card. See usage instructions below.
This card requires card-tools to be installed.
For installation instructions see this guide.
The recommended type of this plugin is: js
Note: By adding
?debug
after the url (&debug
if you already have?track=true
) popup-card will print some extra information to your browser console when you open a more-info dialog. This may or may not be helpful if you run into problems.
resources:
- url: /customcards/github/thomasloven/card-tools.js?track=true
type: js
- url: /customcards/github/thomasloven/popup-card.js?track=true
type: js
First of all, there are a few things you need to know about what this plugin is and is not.
Normally, when you click e.g. a line in an entities card, the more-info
dialog for that entity is opened. Using this plugin, a card of your choosing can be displayed instead.
Things to note:
Still with me? Ok. Let's go.
There are two ways to define a popup-card. Either per-view, or globally.
To define a popup-card in a certain view, add a popup_cards:
section to the views configuration:
views:
- title: My view
icon: mdi:home-assistant
popup_cards:
# popup-card configuration goes here
cards:
- type: entities
...etc...
Popup-cards defined in this way will replace the more-info dialogs only in the current view.
To define a popup-card in all views, add a popup_cards:
section to the root of your lovelace configuration:
title: My awesome lovelace interface
resources:
- url: /customcards/github/thomasloven/card-tools.js?track=true
type: js
- url: /customcards/github/thomasloven/popup-card.js?track=true
type: js
popup_cards:
# popup-card configuration goes here
views:
- title: My view
...etc...
Popup-cards defined in this way will replace the more-info dialogs in all views.
It's possible to mix global and per-view popup-card configurations. Per-view takes precedence.
Whether per-view of global, a popup-card is defined in the following form:
<entity id>:
title: <title>
large: <true/false>
style:
<styles>
card:
<card>
<entity id>
The entity id of the entity whose more-info dialog is to be replaced, e.g. light.bed_light
, device_tracker.my_phone
, sun.sun
, sensor.dummy_sensor_1
.
<title>
Required
The heading title of the popup. This is required
<large>
Optional. Default: false
If true
the popup will be a bit wider.
Optional. Default: none
Dictionary of CSS styles to apply to the more-info-dialog root.
<card>
Required
The specification of the card to pop up.
E.g:
type: entities
entities:
- light.bed_light
- type: custom:time-input-row
entity: input_datetime.on_time
- type: custom:time-input-row
entity: input_datetime.off_time
- input_boolean.weekdays_only
If you would like the same card to replace the more-info dialog for multiple entities, you can add a redirection to your popup card configurations on the form:
<entity id 1>: <entity id 2>
If a popup-card has been defined for <entity id 2>
, it will now replace the more-info dialog for both <entity id 1>
and <entity id 2>
.
title: My awesome lovelace interface
resources:
- url: /customcards/github/thomasloven/card-tools.js?track=true
type: js
- url: /customcards/github/thomasloven/popup-card.js?track=true
type: js
views:
- title: My view
icon: mdi:home-assistant
popup_cards:
light.bed_light:
title: Bedside lamp settings
card:
type: entities
entities:
- light.bed_light
- type: custom:time-input-row
entity: input_datetime.on_time
- type: custom:time-input-row
entity: input_datetime.off_time
- input_boolean.weekdays_only
cards:
- type: entities
entities:
- light.bed_light
- light.ceiling_lights
- light.kitchen_lights
No, but this can be done using browser-commander.
The only way to change the size is the large
option, which does the same thing as clicking on the title.
No, but you can set an empty title title: " "
Well... yes, actually you can, by using browser-commander and something with a call-service tap_action.
Limitations of Home Assistant.