Me again
I’m trying to integrate my TV but I have this error
Can someone help me ? I don’t understand this part of code. How can I debug it ?
Me again
I’m trying to integrate my TV but I have this error
Can someone help me ? I don’t understand this part of code. How can I debug it ?
Do you have a span wrapping the sensor ?
<span>{{ states('sensor.time') }}</span>
Another year, another question… How do you achieve the “what’s playing” part in the appe TV card like this. And how do you manage that the Apple TV comes in the first, big card? Or is it no longer possible due to the ATV integration?
Thanks for your work! looks amazing.
I have a problem with my TV and the loading animation. It won’t stop. Is there a way to set a countdown? I was trying this but I’m no expert
loader:
custom_fields:
loader: >
[[[ if (states[entity.entity_id.replace(entity.entity_id.split('.')[0], 'input_boolean')].state === 'on') || (seconds == 10) {clearInterval(countdownTimer)} {
return '<img src="/local/loader.svg" width="100%">'; } ]]]
Hi, any chance you can explain how create views as you have done ?
Thanks
@celeritas0725 @Martin_Pejstrup
Keywords: css animation and svg. Once you’ve got it working just paste it into your button card
With templates, with a conditional card and automations, it is
@Mattias_Persson I was able to add multiple additional custom icons to your custon_icon.js which works perfectly, but I was not able to make a more elaborate one with colors and such work.
How would you put a very long svg with multiple paths and fills inside your custom_icon.js string??
this is a simple 1 color svg icon, but let`s say i want to use a colored one.
'imac-alternative':
'M8 22l2-2h4l2 2H8zM24 4v13c0 1.1-.9 2-2 2H2c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h20c1.1 0 2 .9 2 2zm-2 0H2v11h20V4z',
https://materialdesignicons.com/
You can’t. There’s no color information, only a path. If you want multiple paths you have to compound them into one.
In this picture for datorlampan you have a multicolour background for the action that opens the color picture. How did you manage to get that? I seem to be failing with light-popup card.
It took a while, but figured out how you did it. Used this from your themes.yaml
.action-holder>div:last-child>div:last-child>.color {
background: radial-gradient(circle, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 80%),
conic-gradient(rgb(120, 39, 230), rgb(230, 34, 231), rgb(228, 5, 136), rgb(228, 25, 25),
rgb(229, 105, 30), rgb(232, 226, 46), rgb(125, 230, 41), rgb(52, 232, 40), rgb(51, 231, 92),
rgb(52, 232, 224), rgb(32, 125, 229), rgb(18, 39, 229), rgb(120, 39, 230));
border-width: 2px;
border-color: #e6e6e6;
--size: 4.4em !important;
}
Yes, it’s a mess because we have multiple spotify accounts. I hope you can find what you need.
- prefix: Media
<<: *title
style:
top: 53.4%
left: 25.4%
<<: *title-style
- type: custom:swipe-card
template: base
parameters:
spaceBetween: 25
slideShadows : false
style:
top: 56.55%
left: 35.8%
width: 20.97%
height: 1px
--ha-card-border-radius: .88vw
cards:
- type: conditional
conditions:
- entity: media_player.spotify_mart
state_not: "idle"
card:
type: picture-elements
image: local/ui/background/overlay2.svg
style: |
ha-card {
--ha-card-background: none !important;
box-shadow: none !important;
}
elements:
- aspect_ratio: 1/1
entity: media_player.spotify_mart
icon: 'mdi:speaker-multiple'
label: Google Cast
name: Badkamer
show_icon: false
show_label: false
show_last_changed: false
show_entity_picture: true
show_name: false
show_state: false
tap_action: !include popup/media_spotify_mart.yaml
hold_action: !include popup/media_spotify_mart.yaml
style:
height: 100%
width: 100%
top: 50%
left: 50%
state:
- styles:
entity_picture:
- filter: grayscale(100%) blur(4px)
- transition: all 0.5s ease
value: paused
styles:
card:
- padding: 0px
- background-color: var(--card-background-off) #the color when there is no artwork, change or remove to use own color
entity_picture:
- border-radius: 0.8vw
- height: 100%
- width: 100%
- position: absolute
- transition: all 0.5s ease
type: 'custom:button-card'
- type: 'custom:mod-card'
style:
'--mini-media-player-icon-color': var(--text-color) #change or remove to use own color
'--mini-media-player-base-color': var(--text-color) #change or remove to use own color
'--mini-media-player-accent-color': var(--music-accent-color) #change or remove to use own color
border-top-left-radius: 0px !important
border-top-right-radius: 0px !important
width: 100%
transform: 'translate(0%, -100%'
card:
artwork: none
entity: media_player.spotify_mart
group: false
hide:
controls: true
icon: false
name: false
power: true
runtime: false
source: true
volume: true
tap_action: !include popup/media_spotify_mart.yaml
hold_action: !include popup/media_spotify_mart.yaml
icon: 'mdi:speaker-multiple'
info: scroll
source: true
# change the styling variable below to the color and width of scrolling info you want. Change height or remove line for default.
style: |
.mmp-player {
background: rgba(0, 0, 0, 0.75) !important;
border-top-left-radius: 0px !important;
border-top-right-radius: 0px !important;
border-bottom-left-radius: 0.8vw !important;
border-bottom-right-radius: 0.8vw !important;
height: 95px;
}
.entity__info {
max-width: 50% !important;
margin-left: 1px !important;
}
.entity__icon {
margin-right: 1px !important;
margin-left: -10px !important;
}
type: 'custom:mini-media-player'
- aspect_ratio: 1/1
show_name: false
show_icon: true
icon: 'mdi:skip-next-circle'
type: 'custom:button-card'
size: 100%
entity: media_player.spotify_mart
style:
right: '-5%'
top: 50%
height: 25%
width: 25%
state:
- styles:
icon:
- filter: opacity(100%)
- transition: all 0.5s ease
- color: '#FFFFFF' #color of button while paused
value: paused
styles:
card:
- padding: 0px
- border-radius: 50%
icon:
- filter: opacity(70%)
- transition: all 0.5s ease
- color: var(--music-accent-color) #color of button while playing
tap_action:
action: call-service
service: media_player.media_next_track
service_data:
entity_id: media_player.spotify_mart
haptic: medium
hold_action:
action: none
- aspect_ratio: 1/1
show_name: false
show_icon: true
icon: 'mdi:skip-previous-circle'
type: 'custom:button-card'
size: 100%
entity: media_player.spotify_mart
style:
right: 55%
top: 50%
height: 25%
width: 25%
state:
- styles:
icon:
- filter: opacity(100%)
- transition: all 0.5s ease
- color: '#FFFFFF' #color of button while paused
value: paused
styles:
card:
- padding: 0px
- border-radius: 50%
icon:
- filter: opacity(70%)
- transition: all 0.5s ease
- color: var(--music-accent-color) #color of button while playing
tap_action:
action: call-service
service: media_player.media_previous_track
service_data:
entity_id: media_player.spotify_mart
haptic: medium
hold_action:
action: none
- aspect_ratio: 1/1
show_name: false
show_icon: true
icon: 'mdi:pause-circle'
type: 'custom:button-card'
size: 100%
entity: media_player.spotify_mart
style:
right: 10%
top: 50%
height: 40%
width: 40%
state:
- styles:
icon:
- filter: opacity(100%)
- transition: all 0.5s ease
- color: '#FFFFFF' #color of button while paused
value: paused
icon: 'mdi:play-circle'
styles:
card:
- padding: 0px
- border-radius: 50%
icon:
- filter: opacity(70%)
- transition: all 0.5s ease
- color: var(--music-accent-color) #color of button while playing
tap_action:
action: call-service
service: media_player.media_play_pause
service_data:
entity_id: media_player.spotify_mart
haptic: medium
hold_action:
action: none
- aspect_ratio: 1/1
show_name: false
show_icon: true
icon: 'mdi:heart-plus'
type: 'custom:button-card'
size: 100%
style:
right: 15%
top: 79.3%
height: 27.5px
width: 27.5px
styles:
card:
- padding: 0px
icon:
- color: var(--paper-item-icon-color,#44739e )
tap_action:
action: call-service
service: script.add_to_playlist
haptic: medium
hold_action:
action: none
- aspect_ratio: 1/1
show_name: false
show_icon: true
icon: 'mdi:dots-horizontal-circle'
type: 'custom:button-card'
size: 100%
style:
right: 1%
top: 79.3%
height: 27.5px
width: 27.5px
styles:
card:
- padding: 0px
icon:
- color: var(--paper-item-icon-color,#44739e )
tap_action:
action: call-service
service: browser_mod.more_info
service_data:
entity_id: media_player.spotify_mart
deviceID: this
haptic: medium
hold_action:
action: none
- type: conditional
conditions:
- entity: media_player.spotify_lussie33
state_not: "idle"
card:
type: picture-elements
image: local/ui/background/overlay2.svg
style: |
ha-card {
--ha-card-background: none !important;
box-shadow: none !important;
}
elements:
- aspect_ratio: 1/1
entity: media_player.spotify_lussie33
icon: 'mdi:speaker-multiple'
label: Google Cast
name: Badkamer
show_icon: false
show_label: false
show_last_changed: false
show_entity_picture: true
show_name: false
show_state: false
tap_action: !include popup/media_spotify_lucienne.yaml
hold_action: !include popup/media_spotify_lucienne.yaml
style:
height: 100%
width: 100%
top: 50%
left: 50%
state:
- styles:
entity_picture:
- filter: grayscale(100%) blur(4px)
- transition: all 0.5s ease
value: paused
styles:
card:
- padding: 0px
- background-color: var(--card-background-off) #the color when there is no artwork, change or remove to use own color
entity_picture:
- border-radius: 0.8vw
- height: 100%
- width: 100%
- position: absolute
- transition: all 0.5s ease
type: 'custom:button-card'
- type: 'custom:mod-card'
style:
'--mini-media-player-icon-color': var(--text-color) #change or remove to use own color
'--mini-media-player-base-color': var(--text-color) #change or remove to use own color
'--mini-media-player-accent-color': var(--music-accent-color) #change or remove to use own color
border-top-left-radius: 0px !important
border-top-right-radius: 0px !important
width: 100%
transform: 'translate(0%, -100%'
card:
artwork: none
entity: media_player.spotify_lussie33
group: false
hide:
controls: true
icon: false
name: false
power: true
runtime: false
source: true
volume: true
tap_action: !include popup/media_spotify_lucienne.yaml
hold_action: !include popup/media_spotify_lucienne.yaml
icon: 'mdi:speaker-multiple'
info: scroll
source: true
# change the styling variable below to the color and width of scrolling info you want. Change height or remove line for default.
style: |
.mmp-player {
background: rgba(0, 0, 0, 0.75) !important;
border-top-left-radius: 0px !important;
border-top-right-radius: 0px !important;
border-bottom-left-radius: 0.8vw !important;
border-bottom-right-radius: 0.8vw !important;
height: 95px;
}
.entity__info {
max-width: 50% !important;
margin-left: 1px !important;
}
.entity__icon {
margin-right: 1px !important;
margin-left: -10px !important;
}
type: 'custom:mini-media-player'
- aspect_ratio: 1/1
show_name: false
show_icon: true
icon: 'mdi:skip-next-circle'
type: 'custom:button-card'
size: 100%
entity: media_player.spotify_lussie33
style:
right: '-5%'
top: 50%
height: 25%
width: 25%
state:
- styles:
icon:
- filter: opacity(100%)
- transition: all 0.5s ease
- color: '#FFFFFF' #color of button while paused
value: paused
styles:
card:
- padding: 0px
- border-radius: 50%
icon:
- filter: opacity(70%)
- transition: all 0.5s ease
- color: var(--music-accent-color) #color of button while playing
tap_action:
action: call-service
service: media_player.media_next_track
service_data:
entity_id: media_player.spotify_lussie33
haptic: medium
hold_action:
action: none
- aspect_ratio: 1/1
show_name: false
show_icon: true
icon: 'mdi:skip-previous-circle'
type: 'custom:button-card'
size: 100%
entity: media_player.spotify_lussie33
style:
right: 55%
top: 50%
height: 25%
width: 25%
state:
- styles:
icon:
- filter: opacity(100%)
- transition: all 0.5s ease
- color: '#FFFFFF' #color of button while paused
value: paused
styles:
card:
- padding: 0px
- border-radius: 50%
icon:
- filter: opacity(70%)
- transition: all 0.5s ease
- color: var(--music-accent-color) #color of button while playing
tap_action:
action: call-service
service: media_player.media_previous_track
service_data:
entity_id: media_player.spotify_lussie33
haptic: medium
hold_action:
action: none
- aspect_ratio: 1/1
show_name: false
show_icon: true
icon: 'mdi:pause-circle'
type: 'custom:button-card'
size: 100%
entity: media_player.spotify_lussie33
style:
right: 10%
top: 50%
height: 40%
width: 40%
state:
- styles:
icon:
- filter: opacity(100%)
- transition: all 0.5s ease
- color: '#FFFFFF' #color of button while paused
value: paused
icon: 'mdi:play-circle'
styles:
card:
- padding: 0px
- border-radius: 50%
icon:
- filter: opacity(70%)
- transition: all 0.5s ease
- color: var(--music-accent-color) #color of button while playing
tap_action:
action: call-service
service: media_player.media_play_pause
service_data:
entity_id: media_player.spotify_lussie33
haptic: medium
hold_action:
action: none
- aspect_ratio: 1/1
show_name: false
show_icon: true
icon: 'mdi:heart-plus'
type: 'custom:button-card'
size: 100%
style:
right: 15%
top: 79.3%
height: 27.5px
width: 27.5px
styles:
card:
- padding: 0px
icon:
- color: var(--paper-item-icon-color,#44739e )
tap_action:
action: call-service
service: script.add_to_playlist_lu
haptic: medium
hold_action:
action: none
- aspect_ratio: 1/1
show_name: false
show_icon: true
icon: 'mdi:dots-horizontal-circle'
type: 'custom:button-card'
size: 100%
style:
right: 1%
top: 79.3%
height: 27.5px
width: 27.5px
styles:
card:
- padding: 0px
icon:
- color: var(--paper-item-icon-color,#44739e )
tap_action:
action: call-service
service: browser_mod.more_info
service_data:
entity_id: media_player.spotify_lussie33
deviceID: this
haptic: medium
hold_action:
action: none
- type: picture-elements
image: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50' /%3E"
elements:
# KITCHEN SPEAKER
- type: custom:button-card
entity: media_player.kitchen
custom_fields:
icon: &icon_cast >
<svg viewBox="0 0 25 25"><path d="M1,18 L1,21 L4,21 C4,19.34 2.66,18 1,18 L1,18 Z M1,14 L1,16 C3.76,16 6,18.24 6,21 L8,21 C8,17.13 4.87,14 1,14 L1,14 Z M1,10 L1,12 C5.97,12 10,16.03 10,21 L12,21 C12,14.92 7.07,10 1,10 L1,10 Z M21,3 L3,3 C1.9,3 1,3.9 1,5 L1,8 L3,8 L3,5 L21,5 L21,19 L14,19 L14,21 L21,21 C22.1,21 23,20.1 23,19 L23,5 C23,3.9 22.1,3 21,3 L21,3 Z" /></SVG>
style:
top: 23.9%
left: 23.8%
width: 47.7%
template: media
# BEDROOM SPEAKER
- type: custom:button-card
entity: media_player.bedroom_speaker
name: Bedroom
custom_fields:
icon: &icon_nest_mini >
<svg viewBox="0 0 50 50"><path d="M49.7 25c0 13.6-11.1 24.7-24.8 24.7C11.3 49.7.3 38.6.3 25S11.4.3 25 .3 49.7 11.4 49.7 25zm-33.9 0a2.22 2.22 0 0 0-2.2-2.2c-1.2 0-2.3 1-2.3 2.2a2.22 2.22 0 0 0 2.2 2.2c1.3.1 2.3-.9 2.3-2.2h0zm10.8 0c0 1.2.9 2.2 2.2 2.3 1.3 0 2.3-1 2.3-2.2 0-1.3-1-2.3-2.2-2.3-1.3 0-2.3.9-2.3 2.2zm-3.2 0a2.22 2.22 0 0 0-2.2-2.2c-1.2 0-2.3 1-2.3 2.2a2.22 2.22 0 0 0 2.2 2.2c1.3 0 2.3-.9 2.3-2.2h0zm13 2.2a2.22 2.22 0 0 0 2.2-2.2c0-1.2-1-2.3-2.2-2.3a2.22 2.22 0 0 0-2.2 2.2c0 1.3 1 2.3 2.2 2.3z" /></svg>
style:
top: 23.9%
left: 76.2%
width: 47.7%
template: media
# LIVING ROOM SPEAKER
- type: custom:button-card
entity: media_player.living_room
name: Living
custom_fields:
icon: *icon_cast
style:
top: 76.2%
left: 76.2%
width: 47.7%
template: media
# FM RADIO
- type: custom:button-card
entity: media_player.office
name: Office
custom_fields:
icon: *icon_cast
style:
top: 76.2%
left: 23.8%
width: 47.7%
template: media
Great thanks a lot for your help !
i have a family account so it should be the same
Thanks again
Hey there,
That’s awesome! Could you share the code for the swiping?
Thanks & well done!
@Mattias_Persson Det här var den vackraste skapelsen jag skådat inom hemautomatisering!
Förvånad över att Apple inte har hört av sig till dig redan
Jag började med HA igår och jag kan ärligt säga att jag inte har en aning om vad jag sysslar med.
Jag hade lätt betalat dig för att göra någon sån lösning åt mig!
Sorry! I’ll translate it just in case. Thanks for the heads up!
This was the most beautiful creation I’ve seen when it comes to HA. I’m actually surprised that Apple hadn’t reached out to you already
I started with HA yesterday and I can honestly say that I don’t have a clue what I am doing.
I would have easily paid you to make a simular solution for me.
noted on this. will check this one, thank you!