can you post your code for the card?
how did you get the swipe effect with the grid card?
i found no documentation that this is possible?
Is there a good resource for how to style cards? I am using a calendar card in my config and want to set the background color to match the other tiles.
Sure thats all the code needed? When i use it i just get a normal switch popup with nothing in it.
- entity: sensor.harmony_activity
name: Media Vardagsrum
icon: mdi:television
offIcon: mdi:power
offStates:
- PowerOff
popup:
type: custom:layout-card
entities:
- type: custom:hui-element
card_type: custom:switch-popup-card
entities:
- sensor.harmony_activity
buttons:
- icon: mdi:power
value: script.tvoff
name: Power
- icon: mdi:apple
value: script.apple_tv
name: Apple Tv
- icon: mdi:playstation
value: script.ps5
name: PS5
- icon: mdi:television-guide
value: script.tv
name: Tv
icon: si:dolby
noActiveState: 'Off'
entity_value_path: attributes.percentage
service: script.turn_on
service_data:
entity_id: value
Just to show what i used in my config.
Ah figured it out. I needed to use the popupExtend: funktion insted of just popup: that you had.
Thx for Sharing the code.
@ Jimmy_Berglund
I have made some changes. This will actually track the state.
- entity: sensor.denon_source
name: Home Theater
icon: mdi:television
offIcon: mdi:power
offStates:
- PowerOff
popup:
type: custom:switch-popup-card
icon: mdi:television
noActiveState: 'Off'
entity_value_path: state
entities:
- sensor.denon_source
buttons:
- icon: mdi:power
value: PowerOff
name: Power Off
service: script.turn_on
service_data:
entity_id: script.turn_off_tv
- icon: si:nvidia
value: SHIELD
name: Shield TV
service: script.turn_on
service_data:
entity_id: script.start_shield_tv
- icon: si:xbox
value: Xbox One
name: XBox One
service: script.turn_on
service_data:
entity_id: script.turn_on_xbox
- icon: si:nintendoswitch
value: Switch
name: Switch
service: script.turn_on
service_data:
entity_id: script.turn_on_switch
1 Like
I’ve added a calendar card, and I would like to make two changes. First, I would like to have it be 4 tiles high on a PC and 3 tiles high on mobile. Is this possible? Second, I need to change the card background so it matches the rest of my tiles (default white color). I use the dark theme so the calendar is displaying dark.
- title: Calendar
entities:
- card: calendar
noPadding: true
wider: true
widerSize: 3
higher: true
higherSize: 4
cardOptions:
entities:
- calendar.family
- calendar.birthdays
- calendar.garbage_collection
Cool! Thx for sharing! Is the value your looking on in the code the sensor you have for your denon?
Yes. I’ve been using this sensor for various things for quite some time. It’s just easier to remember sensor.denon_source in an automation than having to remember the full template.
sensors:
denon_source:
value_template: >
{% if is_state("media_player.denon_avr_x1600h", 'on') %}
{{ states.media_player.denon_avr_x1600h.attributes.source }}
{% else %}
PowerOff
{% endif %}
Cool.
Just got everything working so that i shows whats aktive. Thx again for sharing the code.
I’ve sorted out the CSS part. Now I just need to figure out if it is possible to have a conditional satatement for the higherSize value. Would like it to be 2 for the mobile app and 4 for desktop.
entities:
- card: calendar
noPadding: true
wider: true
widerSize: 3
higher: true
higherSize: 4
cardOptions:
entities:
- calendar.family
- calendar.birthdays
card_mod:
style: |
ha-card {
--ha-card-background: #FFF;
--primary-text-color: black;
}
:host {
}
@Jimmy_Berglund
I’ve edited my post above with updated code. It functions exactly the same, I just removed some fluff that was not needed.
has someone a idea why my popup dont work?
i installed the popup card and the popup card works with my other code
useTemperature: false
useBrightness: true
statePositionTop: true
slider: false
entities:
- title: Row 1
popup:
type: custom:light-popup-card
scenesInARow: 2
brightnessWidth: 130px
brightnessHeight: 350px
switchWidth: 110px
switchHeight: 300px
entities:
- entity: switch.shelly_tischbeleuchtung
name: Küchen Tisch
icon: mdi:power-plug
- entity: light.led_stripe_kueche
icon: mdi:led-strip-variant
name: LED Streifen
- entity: switch.sp220_weihnachtsbaum
name: Baum
icon: mdi:power-plug
Cool.
For me it changed abitt cause the icons and card became mutch smaller then the original from earlier.
But fixed that with adding switch hight etc.
But a question. Are you using a ios based phone or Android?
Im having a problem that i realy need to hold down the button a long time for it to pop upp correcly. And thats that only buttom i have this problem with. Im starting to wonder if its the button cards code thats the problem. Sins allso the problem stayed after i tried your latest code.
This is what im using as of now.
- entity: sensor.harmony_activity
hideState: true
name: Media Vardagsrum
icon: mdi:television-guide
offIcon: mdi:power
offStates:
- PowerOff
popupExtend:
type: custom:switch-popup-card
icon: si:dolby
noActiveState: 'Off'
entity_value_path: state
switchHeight: 300px
switchWidth: 180px
entities:
- sensor.harmony_activity
buttons:
- icon: mdi:power
value: PowerOff
name: Power
service: script.turn_on
service_data:
entity_id: script.tvoff
- icon: mdi:apple
value: Apple tv
name: Apple TV
service: script.turn_on
service_data:
entity_id: script.apple_tv
- icon: si:playstation
value: Playstation
name: Playstation
service: script.turn_on
service_data:
entity_id: script.ps5
- icon: mdi:kodi
value: Htpc
name: Htpc
service: script.turn_on
service_data:
entity_id: script.htpc
- icon: mdi:television-guide
value: Tv
name: Tv
service: script.turn_on
service_data:
entity_id: script.tv
- entity: sensor.harmony_sovrum_activity
hideState: true
name: Media Vardagsrum
icon: mdi:television-guide
offIcon: mdi:power
offStates:
- PowerOff
popupExtend:
type: custom:switch-popup-card
icon: si:dolby
noActiveState: 'Off'
entity_value_path: state
switchHeight: 300px
switchWidth: 180px
entities:
- sensor.harmony_sovrum_activity
buttons:
- icon: mdi:power
value: PowerOff
name: Power
service: script.turn_on
service_data:
entity_id: script.tvoff
- icon: mdi:apple
value: Apple TV Sovrum
name: Apple TV Sovrum
service: script.turn_on
service_data:
entity_id: script.sovrumappletv
- icon: si:playstation
value: Playstation
name: Playstation
service: script.turn_on
service_data:
entity_id: script.pssovrum
- icon: mdi:television-guide
value: Tv Sovrum
name: Tv Sovrum
service: script.turn_on
service_data:
entity_id: script.tvsov
Definitly an Andriod house. I don’t have any Apple products. Putting tileHoldAnimation: true at the beginning of my configuration seemed to make it much easier to long press anything, along with adding a nice little animation.
Yeh i use that to. Ok must be a iOS thing then. Or companion app. Or switch popup card.
Made some conditional buttons that display when Android TV is on. Pressing one opens the corresponding app.
- card: custom:button-card
noPadding: true
hide: |-
[[[
var state = states['sensor.denon_source'].state;
return (state == 'PowerOff') | (state == 'Switch') | (state == 'Xbox One');
]]]
cardOptions:
icon: si:plex
color: '#e5a00d'
tap_action:
action: call-service
service: androidtv.adb_command
service_data:
entity_id: media_player.android_tv
command: >-
am start -a android.intent.action.VIEW -d -n
com.plexapp.android/com.plexapp.plex.activities.SplashActivity
show_state: true
name: Plex
styles:
card:
- width: 120px
- height: 120px
- font-size: 14px
name:
- justify-self: start
- padding-left: 10px
- padding-bottom: 25px
img_cell:
- justify-content: start
- padding-left: 25px
icon:
- justify-self: start
- card: custom:button-card
noPadding: true
hide: |-
[[[
var state = states['sensor.denon_source'].state;
return (state == 'PowerOff') | (state == 'Switch') | (state == 'Xbox One');
]]]
cardOptions:
show_entity_picture: true
entity_picture: >-
https://cf-homeassistant.duckdns.org:8123/local/images/media_icons/disney+.png
tap_action:
action: call-service
service: androidtv.adb_command
service_data:
entity_id: media_player.android_tv
command: >-
am start -a android.intent.action.VIEW -d -n
com.disney.disneyplus/com.bamtechmedia.dominguez.main.MainActivity
show_state: true
name: Disney+
styles:
card:
- width: 120px
- height: 120px
- font-size: 14px
name:
- justify-self: start
- padding-left: 10px
- padding-bottom: 25px
img_cell:
- justify-content: start
- padding-left: 25px
icon:
- justify-self: start
- card: custom:button-card
noPadding: true
hide: |-
[[[
var state = states['sensor.denon_source'].state;
return (state == 'PowerOff') | (state == 'Switch') | (state == 'Xbox One');
]]]
cardOptions:
icon: si:primevideo
color: '#00A8E1'
tap_action:
action: call-service
service: androidtv.adb_command
service_data:
entity_id: media_player.android_tv
command: >-
monkey -p com.amazon.amazonvideo.livingroom -c
android.intent.category.LEANBACK_LAUNCHER 1
show_state: true
name: Amazon Prime
styles:
card:
- width: 120px
- height: 120px
- font-size: 14px
name:
- justify-self: start
- padding-left: 10px
- padding-bottom: 25px
img_cell:
- justify-content: start
- padding-left: 25px
icon:
- justify-self: start
- card: custom:button-card
noPadding: true
hide: |-
[[[
var state = states['sensor.denon_source'].state;
return (state == 'PowerOff') | (state == 'Switch') | (state == 'Xbox One');
]]]
cardOptions:
icon: si:hbo
color: '#FFF'
tap_action:
action: call-service
service: androidtv.adb_command
service_data:
entity_id: media_player.android_tv
command: >-
monkey -p com.hbo.hbonow -c
android.intent.category.LEANBACK_LAUNCHER 1
show_state: true
name: HBO Max
styles:
card:
- width: 120px
- height: 120px
- font-size: 14px
name:
- justify-self: start
- padding-left: 10px
- padding-bottom: 25px
img_cell:
- justify-content: start
- padding-left: 25px
icon:
- justify-self: start
- card: custom:button-card
noPadding: true
hide: |-
[[[
var state = states['sensor.denon_source'].state;
return (state == 'PowerOff') | (state == 'Switch') | (state == 'Xbox One');
]]]
cardOptions:
icon: si:spotify
color: '#1DB954'
tap_action:
action: call-service
service: androidtv.adb_command
service_data:
entity_id: media_player.android_tv
command: >-
am start -a android.intent.action.VIEW -d -n
com.spotify.tv.android/.SpotifyTVActivity
show_state: true
name: Spotify
styles:
card:
- width: 120px
- height: 120px
- font-size: 14px
name:
- justify-self: start
- padding-left: 10px
- padding-bottom: 25px
img_cell:
- justify-content: start
- padding-left: 25px
icon:
- justify-self: start
1 Like
How did you do the text explanations next to your Scenes?
I don’t use this design anymore (it’s a more than 2 year old post). But I used a horizontal stack inside a vertical stack. So the icon (custom button card) and markdown card inside a horizontal stack (which makes them be side by side). Then multiple of these stacks inside a vertical stack.
Thanks. I figured it was a button next to a markdown card. I’m just trying to get the CSS part working for the transparent markdown card. I can set --ha-card-background: rgba(0,0,0,0.0); but the normal card tile beneath is visible. I can’t seem to set it to be transparent without effecting all the other --tile-on-background or --tile-background