Bonjour à tous,
J’utilise le plugin navbar qui a un super rendu sur le mobile.
J’ai plusieurs google home (nest et mini) dans la maison.
Je veux choisir le médiaplayer à “surveiller” et j’y arrive grâce à une entrée liste.
Mais j’aimerai pouvoir faire apparaître cette liste lors d’un appui long sur la partie média pour choisir le playeur.
Une idée du comment faire ?
Merci d’avance.
Envoi le code de la carte pour voir comment, tu as structuré
j’utilise aussi navbar et lors d’un appui sur une icône, j’ai d’autres icone qui s’affiche qui sont les pièces dans mon exemple :
ou si je clique sur l’icone TV j’ai une carte qui me laisse le choix sur la tv que, je souhaite contrôler :
@barto_95 : C’est super joli ce que tu as fait.
Voici mon code:
type: custom:navbar-card
template: main_nav_bar
desktop:
hidden: true
media_player:
entity: |
[[[
const state = states['input_select.select_media'].state;
let entity;
switch (state) {
case 'Bureau':
entity = 'media_player.bureau';
break;
case 'Nest Hub':
entity = 'media_player.nest_hub';
break;
case 'Freebox Player':
entity = 'media_player.freebox_player_pop';
break;
default:
// fallback if not in a room with a defined player
entity = 'media_player.nest_hub';
}
return entity;
]]]
album_cover_background: true
tap_action: null
hold_action:
action: open-popup
mobile:
mode: floating
Comme on le voit dans mon code, j’utilise un template pour mes différentes pages mais qui n’a pas d’influence sur la demande.
Je pense que ma demande correspond pas mal à ton 2ième ex avec les télés.
Pour autant, je pense m’inspirer pour d’autres pages de ton premier ex. Tu peux nous donner ton code stp ?
Merci 
Lequel souhaites-tu ?
Celui du buble-card ou celui ou quand je clique sur la nav bar, j’ai les icônes qui s’affichent par pièce ?
Tu fais tes popups avec bubble card ?
Je suis intéressé par tes 2 solutions
oui bubble-card pour les popups, je trouve que cela fait “jolie".
ici la navbar au complet
type: custom:navbar-card
desktop:
position: left
min_width: 768
show_labels: true
mobile:
show_labels: true
routes:
- icon: mdi:home-outline
icon_selected: mdi:home-assistant
url: /test-ludo/home
label: Home
selected: |
[[[
return !(
location.hash == '#salon' ||
location.hash == '#parent' ||
location.hash == '#bureau' ||
location.hash == '#lenzo' ||
location.hash == '#toilette' ||
location.hash == '#remote' ||
location.hash == '#tiago'
);
]]]
hidden: |
[[[ return false ]]]
- icon: mdi:floor-plan
icon_selected: mdi:floor-plan
label: Pièce
selected: |
[[[
return (
location.hash == '#salon' ||
location.hash == '#parent' ||
location.hash == '#bureau' ||
location.hash == '#lenzo' ||
location.hash == '#toilette' ||
location.hash == '#remote' ||
location.hash == '#tiago'
);
]]]
hidden: |
[[[ return false ]]]
badge:
show: |
[[[ return states['light.light_all'].state === 'on' ]]]
color: var(--yellow-color)
count: |
[[[ return states['sensor.nombre_lumiere_allumer'].state ]]]
tap_action:
action: open-popup
popup:
- icon: mdi:sofa-outline
url: /test-ludo/home#salon
label: Salon
- icon: mdi:bed
url: /test-ludo/home#parent
label: Parent
- icon: mdi:desktop-classic
url: /test-ludo/home#bureau
label: Bureau
- icon: mdi:human-child
url: /test-ludo/home#lenzo
label: Lenzo
- icon: mdi:paper-roll-outline
url: /test-ludo/home#toilette
label: toilette
- icon: mdi:desk
url: /test-ludo/home#tiagochbr
label: Tiago
- icon: mdi:radiator
label: Chauffage
tap_action:
action: navigate
navigation_path: "#climate"
- icon: mdi:television
url: /test-ludo/home#remote
label: TV
badge:
show: |-
[[[[[[
// Compte combien de télés sont allumées
let count = 0;
if (states['media_player.tele_parent']?.state === 'on') count++;
if (states['media_player.tele_tiago']?.state === 'on') count++;
// (ajoute ici d'autres téléviseurs si besoin)
return count > 0; // Affiche le badge seulement si au moins une TV est allumée]]]
color: var(--green-color)
count: |2
[[[
// Affiche le nombre de télés allumées
let count = 0;
if (states['media_player.tele_parent']?.state === 'on') count++;
if (states['media_player.tele_tiago']?.state === 'on') count++;
// (ajoute ici d'autres téléviseurs si besoin)
return count;
]]]
hidden: "[[[return states['media_player.tele_parent'].state == \"off\"]]]"
selected: "[[[return location.hash == '#remote']]]"
hold_action:
action: open-popup
popup:
- icon: mdi:music
url: /test-ludo/music
label: Music
- icon: mdi:television
url: /test-ludo/home#remote
label: TV
- icon: mdi:shield-outline
icon_selected: mdi:security
url: /test-ludo/security
label: Security
badge:
show: >
[[[return states['binary_sensor.magnet_ouvert'].state === 'on' ||
states['cover.groupe_volet'].state === 'open'] ]]
color: var(--red-color)
count: >-
[[[ var mag = Number(states['sensor.nombre_magnet_ouvert']?.state) ||
0;
var volet = Number(states['sensor.nombre_volet_ouvert']?.state) || 0;
return mag + volet;]]]
hidden: "[[[return false]]]"
selected: "[[[return location.hash == '#security']]]"
- icon: mdi:face-agent
url: /test-ludo/home#barto
label: Barto
selected: "[[[return location.hash == '#barto']]]"
hidden: "[[[return !(user.name == \"Barto\")]]]"
badge:
show: |
[[[ return states['input_boolean.debug_rounded'].state === 'on' ]]]
color: var(--red-color)
popup: []
- icon: mdi:face-woman
url: /test-ludo/home#anna
label: Sand
selected: "[[[return location.hash == '#sandra']]]"
hidden: "[[[return user.name != \"Sand\"]]]"
- icon: mdi:dots-horizontal
label: More
badge:
show: |
[[[
for (var key in states) {
if (key.startsWith('update.') && key.endsWith('_update')) {
if (states[key].state === "on") return true;
}
}
return false;
]]]
color: var(--red-color)
tap_action:
action: open-popup
popup:
- icon: mdi:server-outline
url: /test-ludo/server
label: Server
hidden: |
[[[ return user.name != "Barto" ]]]
badge:
show: |
[[[
for (var key in states) {
if (key.startsWith('update.') && key.endsWith('_update')) {
if (states[key].state === "on") return true;
}
}
return false;
]]]
color: var(--red-color)
- icon: mdi:cart
url: /dashboard-bring/home
label: Shopping List
badge:
show: |
[[[ return states['todo.shopping_list'].state > 0 ]]]
color: var(--red-color)
count: |
[[[ return states['todo.shopping_list'].state ]]]
- icon: mdi:cog
url: /config/dashboard
label: Settings
badge:
show: |
[[[
for (var key in states) {
if (key.startsWith('update.') && key.endsWith('_update')) {
if (states[key].state === "on") return true;
}
}
return false;
]]]
color: var(--red-color)
hidden: |
[[[ return user.name != "Barto" ]]]
- icon: mdi:hammer
url: /developer-tools/yaml
label: Developer Tools
hidden: |
[[[ return user.name != "Barto" ]]]
hidden: "[[[return false]]]"
selected: "[[[return false]]]"
styles: |
.navbar {
--navbar-primary-color: var(--purple-color);
background: var(--contrast2);
}
et ici la bubble-card avec tv:
type: vertical-stack
cards:
- type: custom:bubble-card
card_type: pop-up
name: Remote
icon: mdi:television
hash: "#remote"
button_type: name
sub_button: []
show_header: true
button_action: {}
- type: horizontal-stack
cards:
- type: custom:button-card
name: Parent
show_name: false
show_state: false
show_icon: true
icon: mdi:television-classic-off
show_entity_picture: true
entity: media_player.tele_parent
tap_action:
action: call-service
service: input_select.select_option
service_data:
entity_id: input_select.tv_remote
option: tele_parent
styles:
card:
- background-color: var(--contrast2)
- padding: 10px 10px 10px 0px
grid:
- grid-template-areas: "\"icon name btn\" \"icon state btn\""
- grid-template-columns: 60px 1fr min-content
- grid-template-rows: min-content
img_cell:
- justify-content: start
- position: absolute
- width: 40px
- height: 40px
- left: 0
- bottom: 0
- margin: 0 0 8px 10px
- border-radius: 500px
entity_picture:
- justify-content: start
- position: absolute
- width: 40px
- height: 40px
- left: 0
- bottom: 0
- margin: 0 0 0 0
- border-radius: 500px
icon:
- width: 50px
- color: var(--contrast1)
custom_fields:
name:
- align-self: start
- justify-self: start
- background: none
- padding: 0
state:
- align-self: start
- justify-self: start
- background: none
- padding: 0
- margin-top: "-5px"
btn:
- align-self: end
- justify-self: end
icon:
- align-self: start
- justify-self: start
badge:
- position: absolute
- left: 38px
- top: 5px
custom_fields:
name:
card:
type: custom:button-card
name: Parent
styles:
card:
- color: var(--contrast20)
- font-size: 14px
- font-weight: 600
- background: none
- box-shadow: none
state:
card:
type: custom:button-card
entity: |
[[[
return `${entity.entity_id}`;
]]]
show_icon: false
name: |
[[[
return entity.state;
]]]
state:
- value: "on"
name: Allumé
- value: "off"
name: Éteint
styles:
card:
- color: var(--contrast20)
- font-size: 12px
- background: none
- box-shadow: none
- opacity: "0.7"
btn:
card:
type: custom:button-card
entity: |
[[[
return `${entity.entity_id}`;
]]]
icon: |
[[[
return entity.state !== "unavailable"
? "mdi:power"
: "mdi:alert-circle";
]]]
show_name: false
tap_action:
action: call-service
service: script.wake_on_lan_tele_parent
styles:
card:
- border-radius: 50%
- width: 36px
- height: 36px
- box-shadow: none
state:
- value: "on"
styles:
card:
- background: var(--red)
icon:
- color: white
- value: playing
styles:
card:
- background: var(--red)
icon:
- color: white
- value: "off"
styles:
card:
- background: var(--green)
icon:
- color: white
- value: unavailable
styles:
card:
- background: var(--neutral-color, grey)
icon:
- color: white
- type: custom:button-card
name: Tiago
show_name: false
show_state: false
show_icon: true
icon: mdi:television-classic-off
show_entity_picture: true
entity: media_player.tele_tiago
tap_action:
action: call-service
service: input_select.select_option
service_data:
entity_id: input_select.tv_remote
option: tele_tiago
styles:
card:
- background-color: var(--contrast2)
- padding: 10px 10px 10px 0px
grid:
- grid-template-areas: "\"icon name btn\" \"icon state btn\""
- grid-template-columns: 60px 1fr min-content
- grid-template-rows: min-content
img_cell:
- justify-content: start
- position: absolute
- width: 40px
- height: 40px
- left: 0
- bottom: 0
- margin: 0 0 8px 10px
- border-radius: 500px
entity_picture:
- justify-content: start
- position: absolute
- width: 40px
- height: 40px
- left: 0
- bottom: 0
- margin: 0 0 0 0
- border-radius: 500px
icon:
- width: 50px
- color: var(--contrast1)
custom_fields:
name:
- align-self: start
- justify-self: start
- background: none
- padding: 0
state:
- align-self: start
- justify-self: start
- background: none
- padding: 0
- margin-top: "-5px"
btn:
- align-self: end
- justify-self: end
icon:
- align-self: start
- justify-self: start
badge:
- position: absolute
- left: 38px
- top: 5px
custom_fields:
name:
card:
type: custom:button-card
name: Tiago
styles:
card:
- color: var(--contrast20)
- font-size: 14px
- font-weight: 600
- background: none
- box-shadow: none
state:
card:
type: custom:button-card
entity: |
[[[
return `${entity.entity_id}`;
]]]
show_icon: false
name: |
[[[
return entity.state;
]]]
state:
- value: "on"
name: Allumé
- value: "off"
name: Éteint
styles:
card:
- color: var(--contrast20)
- font-size: 12px
- background: none
- box-shadow: none
- opacity: "0.7"
btn:
card:
type: custom:button-card
entity: |
[[[
return `${entity.entity_id}`;
]]]
icon: |
[[[
return entity.state !== "unavailable"
? "mdi:power"
: "mdi:alert-circle";
]]]
show_name: false
tap_action:
action: call-service
service: script.wake_on_lan_tele_parent
styles:
card:
- border-radius: 50%
- width: 36px
- height: 36px
- box-shadow: none
state:
- value: "on"
styles:
card:
- background: var(--red)
icon:
- color: white
- value: playing
styles:
card:
- background: var(--red)
icon:
- color: white
- value: "off"
styles:
card:
- background: var(--green)
icon:
- color: white
- value: unavailable
styles:
card:
- background: var(--neutral-color, grey)
icon:
- color: white
- type: conditional
conditions:
- condition: state
entity: input_select.tv_remote
state: tele_parent
card:
type: vertical-stack
cards:
- type: conditional
conditions:
- condition: state
entity: media_player.tele_parent
state: "on"
card:
type: vertical-stack
cards:
- type: conditional
conditions:
- condition: or
conditions:
- condition: state
entity: media_player.tele_parent
state: "on"
- condition: state
entity: media_player.barto_95_ps5_console
state_not: "off"
card:
type: heading
icon: mdi:multimedia
heading: Media
heading_style: title
- type: conditional
conditions:
- condition: and
conditions:
- condition: state
entity: media_player.tele_parent
state: "on"
- condition: or
conditions:
- condition: state
entity: media_player.barto_95_ps5_console
state: "off"
- condition: state
entity: media_player.barto_95_ps5_console
state: idle
- condition: state
entity: media_player.barto_95_ps5_console
state: unavailable
card:
type: custom:button-card
entity: media_player.tele_parent
template: custom_card_mediaplayer_tv
- type: conditional
conditions:
- condition: and
conditions:
- condition: state
entity: media_player.tele_parent
state: "on"
- condition: or
conditions:
- condition: state
entity: media_player.barto_95_ps5_console
state: playing
- condition: state
entity: media_player.barto_95_ps5_console
state: idle
- condition: state
entity: media_player.barto_95_ps5_console
state: none
card:
type: custom:button-card
entity: media_player.barto_95_ps5_console
tap_action:
action: none
label: PlayStation 5
name: |
[[[
if (entity.state == "playing") {
return entity.attributes.media_title || "En jeu";
} else {
return "Aucun jeu lancé";
}
]]]
show_icon: false
show_label: true
show_state: false
styles:
card:
- padding: 16px
- border-radius: 20px
- overflow: hidden
- background-color: var(--black)
- box-shadow: 0 4px 15px rgba(0,0,0,0.4)
- color: white
- position: relative
grid:
- grid-template-areas: |
"l app_icon i"
"n n n"
- grid-template-columns: 1fr min-content min-content
- grid-template-rows: min-content min-content
- column-gap: 10px
- row-gap: 4px
label:
- justify-self: start
- font-weight: 600
- font-size: 1rem
- color: rgba(255,255,255,0.85)
- z-index: 1
name:
- justify-self: start
- font-size: 0.9rem
- font-weight: 400
- color: rgba(255,255,255,0.85)
- z-index: 1
img_cell:
- background: rgba(106, 13, 173, 0.2)
- border-radius: 8px
- padding: 6px
custom_fields:
background_cover:
- position: absolute
- left: 0
- top: 0
- right: 0
- bottom: 0
- opacity: 0.5
- z-index: 0
- filter: blur(0px)
custom_fields:
background_cover: |
[[[
if (entity.state == "playing" && entity.attributes.entity_picture) {
return '<div style="background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url(' + entity.attributes.entity_picture + ') center / cover no-repeat; width:100%; height:100%; position:absolute; z-index:0;"></div>';
} else {
return '<div style="background: var(--black); width:100%; height:100%; position:absolute; z-index:0;"></div>';
}
]]]
- type: conditional
conditions:
- condition: and
conditions:
- condition: state
entity: media_player.tele_parent
state: "on"
- condition: state
entity: media_player.barto_95_ps5_console
state: "off"
card:
type: heading
icon: mdi:star
heading: Activities
heading_style: title
- type: conditional
conditions:
- condition: and
conditions:
- condition: state
entity: media_player.tele_parent
state: "on"
- condition: state
entity: media_player.barto_95_ps5_console
state: "off"
card:
type: grid
columns: 4
cards:
- type: custom:button-card
entity: media_player.tele_parent
icon: mdi:netflix
show_name: false
aspect_ratio: 1/1
tap_action:
action: call-service
service: media_player.select_source
target:
entity_id: media_player.tele_parent
data:
source: Netflix
haptic: medium
hold_action:
action: more-info
styles:
card:
- border-radius: 24px
- background-color: var(--black)
icon:
- color: |
[[[
if (entity.attributes.source == "Netflix") {
return "#E50914";
} else {
return "var(--icon-active-color)";
}
]]]
- type: custom:button-card
entity: media_player.tele_parent
icon: mdi:plex
show_name: false
aspect_ratio: 1/1
tap_action:
action: call-service
service: media_player.select_source
target:
entity_id: media_player.tele_parent
data:
source: Plex
haptic: medium
hold_action:
action: more-info
styles:
card:
- border-radius: 24px
- background-color: var(--black)
icon:
- color: |
[[[
if (entity.attributes.source == "Plex") {
return "#E5A00D";
} else {
return "var(--icon-active-color)";
}
]]]
- type: custom:button-card
entity: media_player.tele_parent
icon: phu:iptvx
show_name: false
aspect_ratio: 1/1
tap_action:
action: call-service
service: media_player.select_source
target:
entity_id: media_player.tele_parent
data:
source: IPTVSmartersPro
haptic: medium
hold_action:
action: more-info
styles:
card:
- border-radius: 24px
- background-color: var(--black)
icon:
- color: |
[[[
if (entity.attributes.source == "IPTVSmartersPro") {
return "#9C27B0";
} else {
return "var(--icon-active-color)";
}
]]]
- type: custom:button-card
entity: media_player.tele_parent
icon: phu:youtube-kids
show_name: false
aspect_ratio: 1/1
tap_action:
action: call-service
service: media_player.select_source
target:
entity_id: media_player.tele_parent
data:
source: YouTube
haptic: medium
hold_action:
action: more-info
styles:
card:
- border-radius: 24px
- background-color: var(--black)
icon:
- color: |
[[[
if (entity.attributes.source == "YouTube") {
return "#FF0000";
} else {
return "var(--icon-active-color)";
}
]]]
- type: heading
icon: mdi:remote-tv
heading: Remote
heading_style: title
- type: grid
columns: 4
cards:
- type: custom:button-card
icontype: custom:button-card
icon: mdi:power
entity: media_player.tele_parent
show_name: false
aspect_ratio: 1/1
tap_action:
action: call-service
service: script.wake_on_lan_tele_parent
styles:
card:
- border-radius: 24px
- background: var(--green)
icon:
- width: 32px
- color: var(--black)
state:
- value: "on"
styles:
card:
- background: var(--red)
- box-shadow: 0 6px 18px rgba(0,0,0,0.4)
- type: custom:button-card
icon: mdi:chevron-up
aspect_ratio: 1/1
entity: media_player.tele_parent
show_name: false
tap_action:
action: call-service
service: webostv.button
data:
entity_id: media_player.tele_parent
button: UP
styles:
card:
- border-radius: 24px
- background-color: var(--contrast2)
icon:
- width: 32px
- color: var(--contrast8)
- type: custom:button-card
icon: mdi:home-variant
aspect_ratio: 1/1
entity: media_player.tele_parent
show_name: false
tap_action:
action: call-service
service: webostv.button
data:
entity_id: media_player.tele_parent
button: HOME
styles:
card:
- border-radius: 24px
- background-color: var(--contrast2)
icon:
- width: 32px
- color: var(--contrast8)
- type: custom:button-card
icon: mdi:volume-plus
aspect_ratio: 1/1
entity: media_player.tele_parent
show_name: false
tap_action:
action: call-service
service: webostv.button
data:
entity_id: media_player.tele_parent
button: VOLUMEUP
styles:
card:
- border-radius: 24px
- background-color: var(--contrast2)
icon:
- width: 32px
- color: var(--contrast8)
state:
- value: "on"
styles:
icon:
- color: var(--contrast20)
- type: custom:button-card
icon: mdi:chevron-left
aspect_ratio: 1/1
entity: media_player.tele_parent
show_name: false
tap_action:
action: call-service
service: webostv.button
data:
entity_id: media_player.tele_parent
button: LEFT
styles:
card:
- border-radius: 24px
- background-color: var(--contrast2)
icon:
- width: 32px
- color: var(--contrast8)
- type: custom:button-card
icon: mdi:circle-outline
aspect_ratio: 1/1
entity: media_player.tele_parent
show_name: false
tap_action:
action: call-service
service: webostv.button
data:
entity_id: media_player.tele_parent
button: ENTER
styles:
card:
- border-radius: 24px
- background-color: var(--contrast2)
icon:
- width: 32px
- color: var(--contrast8)
- type: custom:button-card
icon: mdi:chevron-right
aspect_ratio: 1/1
entity: media_player.tele_parent
show_name: false
tap_action:
action: call-service
service: webostv.button
data:
entity_id: media_player.tele_parent
button: RIGHT
styles:
card:
- border-radius: 24px
- background-color: var(--contrast2)
icon:
- width: 32px
- color: var(--contrast8)
- type: custom:button-card
icon: mdi:volume-minus
aspect_ratio: 1/1
entity: media_player.tele_parent
show_name: false
tap_action:
action: call-service
service: webostv.button
data:
entity_id: media_player.tele_parent
button: VOLUMEDOWN
styles:
card:
- border-radius: 24px
- background-color: var(--contrast2)
icon:
- width: 32px
- color: var(--contrast8)
state:
- value: "on"
styles:
icon:
- color: var(--contrast20)
- type: custom:button-card
icon: mdi:arrow-left
aspect_ratio: 1/1
entity: media_player.tele_parent
show_name: false
tap_action:
action: call-service
service: webostv.button
data:
entity_id: media_player.tele_parent
button: BACK
styles:
card:
- border-radius: 24px
- background-color: var(--contrast2)
icon:
- width: 32px
- color: var(--contrast8)
- type: custom:button-card
icon: mdi:chevron-down
aspect_ratio: 1/1
entity: media_player.tele_parent
show_name: false
tap_action:
action: call-service
service: webostv.button
data:
entity_id: media_player.tele_parent
button: DOWN
styles:
card:
- border-radius: 24px
- background-color: var(--contrast2)
icon:
- width: 32px
- color: var(--contrast8)
- type: custom:button-card
aspect_ratio: 1/1
show_name: false
tap_action:
haptic: medium
action: call-service
service: webostv.button
data:
entity_id: media_player.apple_tv_4k_2
button: PAUSE
styles:
icon:
- width: 32px
- color: var(--contrast8)
card:
- border-radius: 24px
- background-color: var(--contrast2)
icon: mdi:pause
entity: media_player.apple_tv_4k_2
state:
- value: paused
icon: mdi:play
styles:
card:
- background-color: var(--green)
icon:
- color: var(--black)
- value: playing
styles:
card:
- background-color: var(--yellow)
icon:
- color: var(--black)
- type: custom:button-card
icon: mdi:volume-mute
aspect_ratio: 1/1
entity: media_player.tele_parent
show_name: false
tap_action:
action: call-service
service: webostv.button
data:
entity_id: media_player.tele_parent
button: MUTE
styles:
card:
- border-radius: 24px
- background-color: var(--contrast2)
icon:
- width: 32px
- color: var(--contrast8)
state:
- value: "on"
styles:
icon:
- color: var(--contrast20)
- type: conditional
conditions:
- condition: state
entity: input_select.tv_remote
state: tele_tiago
card:
type: vertical-stack
cards:
- type: conditional
conditions:
- condition: state
entity: media_player.tele_tiago
state: "on"
card:
type: vertical-stack
cards:
- type: conditional
conditions:
- condition: or
conditions:
- condition: state
entity: media_player.tele_tiago
state: "on"
- condition: state
entity: media_player.playstation_4
state_not: "off"
card:
type: heading
icon: mdi:multimedia
heading: Media
heading_style: title
- type: conditional
conditions:
- condition: and
conditions:
- condition: state
entity: media_player.tele_tiago
state: "on"
- condition: or
conditions:
- condition: state
entity: media_player.playstation_4
state: "off"
- condition: state
entity: media_player.playstation_4
state: idle
- condition: state
entity: media_player.playstation_4
state: unavailable
card:
type: custom:button-card
entity: media_player.tele_tiago
template: custom_card_mediaplayer_tv
- type: conditional
conditions:
- condition: and
conditions:
- condition: state
entity: media_player.tele_tiago
state: "on"
- condition: or
conditions:
- condition: state
entity: media_player.playstation_4
state: playing
- condition: state
entity: media_player.playstation_4
state: idle
- condition: state
entity: media_player.playstation_4
state: none
card:
type: custom:button-card
entity: media_player.playstation_4
tap_action:
action: none
label: PlayStation 5
name: |
[[[
if (entity.state == "playing") {
return entity.attributes.media_title || "En jeu";
} else {
return "Aucun jeu lancé";
}
]]]
show_icon: false
show_label: true
show_state: false
styles:
card:
- padding: 16px
- border-radius: 20px
- overflow: hidden
- background-color: var(--black)
- box-shadow: 0 4px 15px rgba(0,0,0,0.4)
- color: white
- position: relative
grid:
- grid-template-areas: |
"l app_icon i"
"n n n"
- grid-template-columns: 1fr min-content min-content
- grid-template-rows: min-content min-content
- column-gap: 10px
- row-gap: 4px
label:
- justify-self: start
- font-weight: 600
- font-size: 1rem
- color: rgba(255,255,255,0.85)
- z-index: 1
name:
- justify-self: start
- font-size: 0.9rem
- font-weight: 400
- color: rgba(255,255,255,0.85)
- z-index: 1
img_cell:
- background: rgba(106, 13, 173, 0.2)
- border-radius: 8px
- padding: 6px
custom_fields:
background_cover:
- position: absolute
- left: 0
- top: 0
- right: 0
- bottom: 0
- opacity: 0.5
- z-index: 0
- filter: blur(0px)
custom_fields:
background_cover: |
[[[
if (entity.state == "playing" && entity.attributes.entity_picture) {
return '<div style="background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url(' + entity.attributes.entity_picture + ') center / cover no-repeat; width:100%; height:100%; position:absolute; z-index:0;"></div>';
} else {
return '<div style="background: var(--black); width:100%; height:100%; position:absolute; z-index:0;"></div>';
}
]]]
- type: conditional
conditions:
- condition: and
conditions:
- condition: state
entity: media_player.tele_tiago
state: "on"
- condition: state
entity: media_player.playstation_4
state: "off"
card:
type: heading
icon: mdi:star
heading: Activities
heading_style: title
- type: conditional
conditions:
- condition: and
conditions:
- condition: state
entity: media_player.tele_tiago
state: "on"
- condition: state
entity: media_player.playstation_4
state: "off"
card:
type: grid
columns: 4
cards:
- type: custom:button-card
entity: media_player.tele_tiago
icon: mdi:netflix
show_name: false
aspect_ratio: 1/1
tap_action:
action: call-service
service: media_player.select_source
target:
entity_id: media_player.tele_tiago
data:
source: Netflix
haptic: medium
hold_action:
action: more-info
styles:
card:
- border-radius: 24px
- background-color: var(--black)
icon:
- color: |
[[[
if (entity.attributes.source == "Netflix") {
return "#E50914";
} else {
return "var(--icon-active-color)";
}
]]]
- type: custom:button-card
entity: media_player.tele_tiago
icon: mdi:plex
show_name: false
aspect_ratio: 1/1
tap_action:
action: call-service
service: media_player.select_source
target:
entity_id: media_player.tele_tiago
data:
source: Plex
haptic: medium
hold_action:
action: more-info
styles:
card:
- border-radius: 24px
- background-color: var(--black)
icon:
- color: |
[[[
if (entity.attributes.source == "Plex") {
return "#E5A00D";
} else {
return "var(--icon-active-color)";
}
]]]
- type: custom:button-card
entity: media_player.tele_tiago
icon: phu:iptvx
show_name: false
aspect_ratio: 1/1
tap_action:
action: call-service
service: media_player.select_source
target:
entity_id: media_player.tele_tiago
data:
source: IPTVSmartersPro
haptic: medium
hold_action:
action: more-info
styles:
card:
- border-radius: 24px
- background-color: var(--black)
icon:
- color: |
[[[
if (entity.attributes.source == "IPTVSmartersPro") {
return "#9C27B0";
} else {
return "var(--icon-active-color)";
}
]]]
- type: custom:button-card
entity: media_player.tele_tiago
icon: phu:youtube-kids
show_name: false
aspect_ratio: 1/1
tap_action:
action: call-service
service: media_player.select_source
target:
entity_id: media_player.tele_tiago
data:
source: YouTube
haptic: medium
hold_action:
action: more-info
styles:
card:
- border-radius: 24px
- background-color: var(--black)
icon:
- color: |
[[[
if (entity.attributes.source == "YouTube") {
return "#FF0000";
} else {
return "var(--icon-active-color)";
}
]]]
- type: heading
icon: mdi:remote-tv
heading: Remote
heading_style: title
- type: grid
columns: 4
cards:
- type: custom:button-card
icontype: custom:button-card
icon: mdi:power
entity: media_player.tele_tiago
show_name: false
aspect_ratio: 1/1
tap_action:
action: call-service
service: script.wake_on_lan_tele_tiago
styles:
card:
- border-radius: 24px
- background: var(--green)
icon:
- width: 32px
- color: var(--black)
state:
- value: "on"
styles:
card:
- background: var(--red)
- box-shadow: 0 6px 18px rgba(0,0,0,0.4)
- type: custom:button-card
icon: mdi:chevron-up
aspect_ratio: 1/1
entity: media_player.tele_tiago
show_name: false
tap_action:
action: call-service
service: webostv.button
data:
entity_id: media_player.tele_tiago
button: UP
styles:
card:
- border-radius: 24px
- background-color: var(--contrast2)
icon:
- width: 32px
- color: var(--contrast8)
- type: custom:button-card
icon: mdi:home-variant
aspect_ratio: 1/1
entity: media_player.tele_tiago
show_name: false
tap_action:
action: call-service
service: webostv.button
data:
entity_id: media_player.tele_tiago
button: HOME
styles:
card:
- border-radius: 24px
- background-color: var(--contrast2)
icon:
- width: 32px
- color: var(--contrast8)
- type: custom:button-card
icon: mdi:volume-plus
aspect_ratio: 1/1
entity: media_player.tele_tiago
show_name: false
tap_action:
action: call-service
service: webostv.button
data:
entity_id: media_player.tele_tiago
button: VOLUMEUP
styles:
card:
- border-radius: 24px
- background-color: var(--contrast2)
icon:
- width: 32px
- color: var(--contrast8)
state:
- value: "on"
styles:
icon:
- color: var(--contrast20)
- type: custom:button-card
icon: mdi:chevron-left
aspect_ratio: 1/1
entity: media_player.tele_tiago
show_name: false
tap_action:
action: call-service
service: webostv.button
data:
entity_id: media_player.tele_tiago
button: LEFT
styles:
card:
- border-radius: 24px
- background-color: var(--contrast2)
icon:
- width: 32px
- color: var(--contrast8)
- type: custom:button-card
icon: mdi:circle-outline
aspect_ratio: 1/1
entity: media_player.tele_tiago
show_name: false
tap_action:
action: call-service
service: webostv.button
data:
entity_id: media_player.tele_tiago
button: ENTER
styles:
card:
- border-radius: 24px
- background-color: var(--contrast2)
icon:
- width: 32px
- color: var(--contrast8)
- type: custom:button-card
icon: mdi:chevron-right
aspect_ratio: 1/1
entity: media_player.tele_tiago
show_name: false
tap_action:
action: call-service
service: webostv.button
data:
entity_id: media_player.tele_tiago
button: RIGHT
styles:
card:
- border-radius: 24px
- background-color: var(--contrast2)
icon:
- width: 32px
- color: var(--contrast8)
- type: custom:button-card
icon: mdi:volume-minus
aspect_ratio: 1/1
entity: media_player.tele_tiago
show_name: false
tap_action:
action: call-service
service: webostv.button
data:
entity_id: media_player.tele_tiago
button: VOLUMEDOWN
styles:
card:
- border-radius: 24px
- background-color: var(--contrast2)
icon:
- width: 32px
- color: var(--contrast8)
state:
- value: "on"
styles:
icon:
- color: var(--contrast20)
- type: custom:button-card
icon: mdi:arrow-left
aspect_ratio: 1/1
entity: media_player.tele_tiago
show_name: false
tap_action:
action: call-service
service: webostv.button
data:
entity_id: media_player.tele_tiago
button: BACK
styles:
card:
- border-radius: 24px
- background-color: var(--contrast2)
icon:
- width: 32px
- color: var(--contrast8)
- type: custom:button-card
icon: mdi:chevron-down
aspect_ratio: 1/1
entity: media_player.tele_tiago
show_name: false
tap_action:
action: call-service
service: webostv.button
data:
entity_id: media_player.tele_tiago
button: DOWN
styles:
card:
- border-radius: 24px
- background-color: var(--contrast2)
icon:
- width: 32px
- color: var(--contrast8)
- type: custom:button-card
aspect_ratio: 1/1
show_name: false
tap_action:
haptic: medium
action: call-service
service: webostv.button
data:
entity_id: media_player.apple_tv_4k_2
button: PAUSE
styles:
icon:
- width: 32px
- color: var(--contrast8)
card:
- border-radius: 24px
- background-color: var(--contrast2)
icon: mdi:pause
entity: media_player.apple_tv_4k_2
state:
- value: paused
icon: mdi:play
styles:
card:
- background-color: var(--green)
icon:
- color: var(--black)
- value: playing
styles:
card:
- background-color: var(--yellow)
icon:
- color: var(--black)
- type: custom:button-card
icon: mdi:volume-mute
aspect_ratio: 1/1
entity: media_player.tele_tiago
show_name: false
tap_action:
action: call-service
service: webostv.button
data:
entity_id: media_player.tele_tiago
button: MUTE
styles:
card:
- border-radius: 24px
- background-color: var(--contrast2)
icon:
- width: 32px
- color: var(--contrast8)
state:
- value: "on"
styles:
icon:
- color: var(--contrast20)
Super ! Merci bcp. Y’a plus qu’à s’inspirer ! 
J’y suis presque mais j’ai l’impression qu’il y a un bug ou je me suis raté sur un truc.
Je n’arrive pas à avoir l’action sur un hold ou un double tap.
J’arrive bien à avoir ma popup bubble card depuis un bouton de la barre mais il ne se passe rien depuis la barre média.
Mon code en template :
main_nav_bar:
media_player:
entity: |
[[[
const state = states['input_select.select_media'].state;
let entity;
switch (state) {
case 'Bureau':
entity = 'media_player.bureau';
break;
case 'Nest Hub':
entity = 'media_player.nest_hub';
break;
case 'Freebox Player':
entity = 'media_player.freebox_player_pop';
break;
case 'Salon':
entity = 'media_player.salon_2';
break;
case 'Chambre':
entity = 'media_player.chambre';
break;
default:
// fallback if not in a room with a defined player
entity = 'media_player.nest_hub';
}
return entity;
]]]
album_cover_background: true
tap_action: null
hold_action:
action: open-popup
double_tap_action:
action: open-popup
popup:
- icon: mdi:music
url: /dashboard-mobile/13
label: Music
- icon: mdi:television
url: /dashboard-mobile/0#choix-player
label: TV
Avant d’ouvrir une “issue”, je voudrais savoir si d’autres rencontrent ce souci ?
En complément, dans les issues du github, j’ai vu cette solution pour ouvrir une popup bubble directement depuis le menu :
- url: "#choix-player"
icon: mdi:play-box-multiple
label: Test
selected: |
[[[
return location.hash == '#choix-player';
]]]
Testé et approuvé ! 