I have a really dumb question, but how do I make a card where it shows some data then opens up to show more and also have controls? Kinda like the thermostat card my Ecobee uses:
Basically, I have these cards that I want to combine into a single element with just a few points of data then it opens up to give more plus the “Anova Cooker Control” options:
So this seems close: https://github.com/thomasloven/lovelace-popup-card
But best I can tell gives a popup for one element. I want a few pieces of data shown on the main card with the 3 dots to bring up a full menu.
Have you taken a look at fold-entity-row? Different approach, but definitely worth a look.
Another way to possibly do this would be to just create a group with the entities you want and then just use the group on the frontend:
- group.anova_cooker_group
On another note, what did you use to pull in Anova?
I did not but I will take a look, thanks! And yeah I know I can make a group but my hope was a small card with minimal details that expanded into a full card with control and all.
As for the Anova cooker, you’ll see a project on here from me once the PR is accepted but basically this: https://github.com/bmedicke/anova.py
an entities card with the 3 elements, but include a 4th element label and have it create the lovelace-popup-card which can contain any style card. I.E. entities card that has 100 entities for example.
It seem’s like the configuration would be almost identical to the posted in the link you linked.
- title: ...
cards:
- type: custom:popup-card
entity: light.bed_light #<-------------replace
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
- type: entities
entities:
- light.bed_light #<-----------replace
- light.ceiling_lights
- light.kitchen_lights
So in this example, you’d just replace bed_light in the popup-card, and bed_light in the entities section of the entities card below it. Replacing that entity with a dummy entity or possibly a different element type would probably work.
Thanks, I probably need to further understand lovelace as it’s still not clicking. Either way though, the fold-entity-row card is (mostly) what I am after:
My hope was more of a flyout style but that gets me close enough.
I hope this isn’t considered hijacking the thread, but I was hoping to do something similar with my media room. I want to have an entity on my picture elements card, that when you click on it, it opens up a “dialog box” with a firetv remote that I made using the custom: buttons card. My question is: Can you use a card with a vertical stack card and multiple horizontal stack cards as the popup card? Or is that considered multiple cards and then it would not work? I tried and it isn’t working and I was hoping someone could tell me if this is the reason before I spend more hours on it. I looked through the FAQ and didn’t see it, but for some reason, I think I remember reading something about this somewhere before. Thanks in advance
pop up card only holds 1 card. But that one card can be a vertical stack, which can hold infinite cards (in theory).
So, yes, you should be able to do what you want as long as the top card is a vertical stack.
Nevermind. I figured it out, and yes it is possible
@johnnypink1 - can you post what you ended up doing and how you did it? I’m not totally happy with my fold-entity-row card and really would like to use the popup cards.
I’ll give it a shot. I’ve never posted code, so be patient with me and it might take me a few attempts. Should post shortly
resources:
- type: module
url: /local/custom-lovelace/weather-card/weather-card.js
- type: module
url: /customcards/github/custom-cards/tracker-card.js?track=true
- type: module
url: /customcards/github/maykar/compact-custom-header.js?track=true
- type: module
url: /local/mini-media-player-bundle.js?v=1.0.2
- type: js
url: /local/lovelace-fullykiosk.js
- type: js
url: /local/kiosk-config.js
- type: module
url: /local/surveillance-card.js?v=0
- type: js
url: /customcards/github/thomasloven/card-tools.js?track=true
- type: js
url: /local/plugins/card-modder.js?v=1
- type: js
url: /customcards/github/thomasloven/layout-card.js?track=true
- type: module
url: /customcards/github/custom-cards/button-card.js?track=true
- type: js
url: /customcards/github/thomasloven/popup-card.js?track=true
title: House
views:
####other views here, then what you really want:#######
- badges: []
cards:
- elements:
- entity: script.psvue_in_lr
filter: saturate(1)
image: /local/playstation_vue.jpg
style:
left: 30.26%
saturation: 100%
top: 22.75%
width: 12%
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.psvue_in_lr
type: image
- entity: script.netflix_in_lr
filter: saturate(1)
image: /local/netflix_icon.jpg
style:
left: 50.25%
top: 22.5%
width: 12%
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.netflix_in_lr
type: image
- entity: script.prime_video_in_lr
filter: saturate(1)
image: /local/prime_video.jpg
style:
left: 68.4%
top: 19.65%
width: 12%
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.prime_video_in_lr
type: image
- entity: script.tablo_in_lr
filter: saturate(1)
image: /local/tablo_logo1.jpg
style:
left: 30.5%
top: 54.75%
width: 12%
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.tablo_in_lr
type: image
- entity: script.espn_in_lr
filter: saturate(1)
image: /local/espn_icon.jpg
style:
left: 50.5%
top: 51.5%
width: 12%
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.espn_in_lr
type: image
- entity: script.spotify_in_lr
filter: saturate(1)
image: /local/spotify_icon.jpg
style:
left: 68.9%
top: 51.1%
width: 12%
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.spotify_in_lr
type: image
- entity: script.living_room_tv_and_firecube_off
filter: saturate(1)
image: /local/turn_off_lr.jpg
style:
left: 50%
top: 79%
width: 22%
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.living_room_tv_and_firecube_off
type: image
- entity: device_tracker.2c_aa_8e_01_0f_7a
filter: saturate(1)
image: /local/firetv_remote.jpg
style:
left: 90%
top: 40%
width: 12%
type: image
image: /local/living_room_pic.jpg
type: picture-elements
icon: null
id: Living Room
panel: true
popup_cards:
device_tracker.2c_aa_8e_01_0f_7a:
card:
cards:
- cards:
- color_type: blank-card
type: 'custom:button-card'
- action: service
color: 'rgb(0, 0, 0)'
color_type: card
icon: 'mdi:chevron-up-box'
service:
action: send_command
data:
command: DirectionUp
device: Living Room Fire TV Cube
entity_id: remote.harmony_hub
domain: remote
type: 'custom:button-card'
- color_type: blank-card
type: 'custom:button-card'
type: horizontal-stack
- cards:
- color_type: blank-card
type: 'custom:button-card'
- color_type: blank-card
type: 'custom:button-card'
- color_type: blank-card
type: 'custom:button-card'
type: horizontal-stack
- cards:
- color_type: blank-card
type: 'custom:button-card'
- color_type: blank-card
type: 'custom:button-card'
- color_type: blank-card
type: 'custom:button-card'
type: horizontal-stack
- cards:
- action: service
color: 'rgb(0, 0, 0)'
color_type: card
icon: 'mdi:chevron-left-box'
service:
action: send_command
data:
command: DirectionLeft
device: Living Room Fire TV Cube
entity_id: remote.harmony_hub
domain: remote
type: 'custom:button-card'
- action: service
color: 'rgb(0, 0, 0)'
color_type: card
icon: 'mdi:xaml'
service:
action: send_command
data:
command: OK
device: Living Room Fire TV Cube
entity_id: remote.harmony_hub
domain: remote
type: 'custom:button-card'
- action: service
color: 'rgb(0, 0, 0)'
color_type: card
icon: 'mdi:chevron-right-box'
service:
action: send_command
data:
command: DirectionRight
device: Living Room Fire TV Cube
entity_id: remote.harmony_hub
domain: remote
type: 'custom:button-card'
type: horizontal-stack
- cards:
- color_type: blank-card
type: 'custom:button-card'
- color_type: blank-card
type: 'custom:button-card'
- color_type: blank-card
type: 'custom:button-card'
type: horizontal-stack
- cards:
- color_type: blank-card
type: 'custom:button-card'
- color_type: blank-card
type: 'custom:button-card'
- color_type: blank-card
type: 'custom:button-card'
type: horizontal-stack
- cards:
- color_type: blank-card
type: 'custom:button-card'
- action: service
color: 'rgb(0, 0, 0)'
color_type: card
icon: 'mdi:chevron-down-box'
service:
action: send_command
data:
command: DirectionDown
device: Living Room Fire TV Cube
entity_id: remote.harmony_hub
domain: remote
type: 'custom:button-card'
- color_type: blank-card
type: 'custom:button-card'
type: horizontal-stack
- cards:
- color_type: blank-card
type: 'custom:button-card'
- color_type: blank-card
type: 'custom:button-card'
- color_type: blank-card
type: 'custom:button-card'
type: horizontal-stack
- cards:
- color_type: blank-card
type: 'custom:button-card'
- color_type: blank-card
type: 'custom:button-card'
- color_type: blank-card
type: 'custom:button-card'
type: horizontal-stack
- cards:
- color_type: blank-card
type: 'custom:button-card'
- color_type: blank-card
type: 'custom:button-card'
- color_type: blank-card
type: 'custom:button-card'
type: horizontal-stack
- cards:
- action: service
color: 'rgb(0, 0, 0)'
color_type: card
icon: 'mdi:arrow-left-box'
service:
action: send_command
data:
command: Back
device: Living Room Fire TV Cube
entity_id: remote.harmony_hub
domain: remote
type: 'custom:button-card'
- action: service
color: 'rgb(0, 0, 0)'
color_type: card
icon: 'mdi:home'
service:
action: send_command
data:
command: Home
device: Living Room Fire TV Cube
entity_id: remote.harmony_hub
domain: remote
type: 'custom:button-card'
- action: service
color: 'rgb(0, 0, 0)'
color_type: card
icon: 'mdi:menu'
service:
action: send_command
data:
command: Menu
device: Living Room Fire TV Cube
entity_id: remote.harmony_hub
domain: remote
type: 'custom:button-card'
type: horizontal-stack
- cards:
- color_type: blank-card
type: 'custom:button-card'
- color_type: blank-card
type: 'custom:button-card'
- color_type: blank-card
type: 'custom:button-card'
type: horizontal-stack
- cards:
- color_type: blank-card
type: 'custom:button-card'
- color_type: blank-card
type: 'custom:button-card'
- color_type: blank-card
type: 'custom:button-card'
type: horizontal-stack
- cards:
- color_type: blank-card
type: 'custom:button-card'
- color_type: blank-card
type: 'custom:button-card'
- color_type: blank-card
type: 'custom:button-card'
type: horizontal-stack
- cards:
- action: service
color: 'rgb(0, 0, 0)'
color_type: card
icon: 'mdi:rewind'
service:
action: send_command
data:
command: Rewind
device: Living Room Fire TV Cube
entity_id: remote.harmony_hub
domain: remote
type: 'custom:button-card'
- action: service
color: 'rgb(0, 0, 0)'
color_type: card
icon: 'mdi:play'
service:
action: send_command
data:
command: Play
device: Living Room Fire TV Cube
entity_id: remote.harmony_hub
domain: remote
type: 'custom:button-card'
- action: service
color: 'rgb(0, 0, 0)'
color_type: card
icon: 'mdi:fast-forward'
service:
action: send_command
data:
command: FastForward
device: Living Room Fire TV Cube
entity_id: remote.harmony_hub
domain: remote
type: 'custom:button-card'
type: horizontal-stack
- cards:
- color_type: blank-card
type: 'custom:button-card'
- color_type: blank-card
type: 'custom:button-card'
- color_type: blank-card
type: 'custom:button-card'
type: horizontal-stack
- cards:
- color_type: blank-card
type: 'custom:button-card'
- color_type: blank-card
type: 'custom:button-card'
- color_type: blank-card
type: 'custom:button-card'
type: horizontal-stack
- cards:
- color_type: blank-card
type: 'custom:button-card'
- color_type: blank-card
type: 'custom:button-card'
- color_type: blank-card
type: 'custom:button-card'
type: horizontal-stack
- cards:
- action: service
color: 'rgb(0, 0, 0)'
color_type: card
icon: 'mdi:skip-backward'
service:
action: send_command
data:
command: SkipBack
device: Living Room Fire TV Cube
entity_id: remote.harmony_hub
domain: remote
type: 'custom:button-card'
- action: service
color: 'rgb(0, 0, 0)'
color_type: card
icon: 'mdi:pause'
service:
action: send_command
data:
command: Pause
device: Living Room Fire TV Cube
entity_id: remote.harmony_hub
domain: remote
type: 'custom:button-card'
- action: service
color: 'rgb(0, 0, 0)'
color_type: card
icon: 'mdi:skip-forward'
service:
action: send_command
data:
command: SkipForward
device: Living Room Fire TV Cube
entity_id: remote.harmony_hub
domain: remote
type: 'custom:button-card'
type: horizontal-stack
- cards:
- color_type: blank-card
type: 'custom:button-card'
- color_type: blank-card
type: 'custom:button-card'
- color_type: blank-card
type: 'custom:button-card'
type: horizontal-stack
- cards:
- color_type: blank-card
type: 'custom:button-card'
- color_type: blank-card
type: 'custom:button-card'
- color_type: blank-card
type: 'custom:button-card'
type: horizontal-stack
- cards:
- color_type: blank-card
type: 'custom:button-card'
- color_type: blank-card
type: 'custom:button-card'
- color_type: blank-card
type: 'custom:button-card'
type: horizontal-stack
- cards:
- action: service
color: 'rgb(0, 0, 0)'
color_type: card
icon: 'mdi:volume-low'
service:
action: volume_down
data:
entity_id: media_player.sony_bravia_tv
domain: media_player
type: 'custom:button-card'
- color_type: blank-card
type: 'custom:button-card'
- action: service
color: 'rgb(0, 0, 0)'
color_type: card
icon: 'mdi:volume-high'
service:
action: volume_up
data:
entity_id: media_player.sony_bravia_tv
domain: media_player
type: 'custom:button-card'
type: horizontal-stack
type: vertical-stack
title: Fire Remote
title: Living RoomNo problem, if anyone wants the yaml for the scripts on the harmony remote, let me know. It could save you a lot of time. I’m still a newbie though. It works, but there’s probably a more efficient way to do it. I’ve just copy/pasted the code for each room in my house that has a firestick and changed the “id”
is it possible to move the name to the top of the card vs it being at the bottom of the card?
Has anyone gotten this to work with card mod? I think I could do some pretty cool things with this card and card mod, but I can’t get it to pick up my CSS
