*Je cherche un type de carte ou un ensemble de cartes associées, pour avoir une photo de la pièce concernée, en fond d’écran, avec plus ou moins de transparence, et que l’on puisse faire défiler les devices et les actionner directement sur la carte.
ci-joint la vidéo de ma pièce « Piscine » avec de nombreux devices.
Sur pc cela fonctionne mais pas sur Iphone.
Ce type d’interface existe-t-il?? ou faut-il la créer de A à Z??
*
Vidéo de l’interface
Bonjour,
Je ne sais pas s’il existe une interface toute faite mais tu peux obtenir le même résultat avec button-card par exemple.
Merci pour ta réponse, mais cela ne fonctionne pas de façon responsive sur Iphone.
sur PC, l’image de fond rempli toute l’écran et reste fixe même lorsque l’on descend vers les entités non visibles et placées plus bas.
Sur Iphone, l’image fond couvre tout l’ensemble des entités non visibles et placées plus bas, l’image se pixellise, et lorsque l’on descend vers le bas, les entités ne glissent pas sur l’image, mais on descend alors sur tout l’ensemble.
C’est que tu n’as pas utilisé la button-card comme je l’entendais. Tu peux mettre une carte avec un ratio de 1/5 ou 1/10 ou plus si besoin et des custom_fields pour tes entités que tu peux placer où tu veux sur la carte (ou sur les cartes si tu utilises en plus stack-in-card)
Après, je ne sais pas ce que ça donnerai sur Iphone mais sur téléphone Androïd ça fonctionne.
Voici ce que j’ai sur mon portable avec des cartes (button-card) par pièce et des custom_fields pour agir avec l’éclairage, les volets roulants, etc…
Je pourrais avoir une carte plus grande et plus de custom_fields et donc faire « rouler » l’image en fonction de l’endroit à atteindre (avec une image faisant 1,5 ou 2 ou 3x la hauteur de l’affichage du téléphone).
Peux-tu m’envoyer le code d’une de tes cartes qui fonctionne ainsi??
ton image est bien en background??
J’ai répondu trop vite.
Pour ma part je cherche à avoir une image unique dans ma vue en background, et comme montré dans la vidéo, pour la piscine, j’ai au moins 28 entités les unes sous les autres.
C’est ce que je dis, tu peux jouer sur le ratio de ta carte de façon à avoir la hauteur nécessaire pour y mettre toutes tes entités et un custom_field par entité (il n’y a pas de limite au nombre de custom_fields à priori)
Voici le code d’une de mes cartes (carte salon) ou j’ai le plus de custom_fields (14). Tu peux jouer sur la hauteur de la carte avec le ratio et l’emplacement de tous les custom_fields
type: custom:button-card
aspect_ratio: 4/3.5
custom_fields:
fond:
card:
type: custom:button-card
styles:
card:
- background-color: rgba(255,255,255,0.0)
- border: none
tap_action:
action: none
hold_action:
action: none
ncarte:
card:
type: custom:button-card
name: Salon
styles:
name:
- font-size: 1.4em
- font-weight: bold
- justify-self: start
- color: rgba(0,0,0,0.6)
card:
- background-color: rgba(255,255,255,0.0)
- border: none
tap_action:
action: none
hold_action:
action: none
eclairage:
card:
type: custom:button-card
name: 'Éclairage :'
styles:
name:
- font-size: 1.0em
- font-weight: bold
- color: rgba(0,0,0,0.6)
- justify-self: start
card:
- background-color: rgba(255,255,255,0.0)
- border: none
nplafonnier:
card:
type: custom:button-card
name: Plafonnier
styles:
name:
- font-size: 0.7em
- font-weight: bold
- color: rgba(0,0,0,0.6)
card:
- background-color: rgba(255,255,255,0.0)
- border-radius: 0%
- border: none
tap_action:
action: none
hold_action:
action: none
plafonnier:
card:
type: custom:button-card
size: 80%
entity: light.salon_plafonnier
icon: phu:ceiling-fugato-three
show_name: false
state:
- value: 'off'
styles:
icon:
- color: dimgray
card:
- box-shadow: none
- border-radius: 50%
- background-color: rgba(242,242,242,0.7)
- width: 48px
- height: 48px
- value: 'on'
styles:
icon:
- color: rgb(255,255,128)
card:
- border-radius: 50%
- box-shadow: 0px 0px 6px 3px rgba(255,255,128,0.8)
- background-color: rgba(0,0,0,0.5)
- width: 48px
- height: 48px
nlampadaire:
card:
type: custom:button-card
name: Lampadaire
styles:
name:
- font-size: 0.7em
- font-weight: bold
- color: rgba(0,0,0,0.6)
card:
- background-color: rgba(255,255,255,0.0)
- border-radius: 0%
- border: none
tap_action:
action: none
hold_action:
action: none
lampadaire:
card:
type: custom:button-card
size: 85%
entity: light.salon_lampadaire
icon: mdi:floor-lamp-torchiere
show_name: false
state:
- value: 'off'
styles:
icon:
- color: dimgray
card:
- box-shadow: none
- border-radius: 50%
- background-color: rgba(242,242,242,0.7)
- width: 48px
- height: 48px
- value: 'on'
styles:
icon:
- color: rgb(255,255,128)
card:
- border-radius: 50%
- box-shadow: 0px 0px 6px 3px rgba(255,255,128,0.8)
- background-color: rgba(0,0,0,0.5)
- width: 48px
- height: 48px
nlampe_poele:
card:
type: custom:button-card
name: Lampe<br/>(poële)
styles:
name:
- font-size: 0.7em
- font-weight: bold
- color: rgba(0,0,0,0.6)
card:
- background-color: rgba(255,255,255,0.0)
- border-radius: 0%
- border: none
tap_action:
action: none
hold_action:
action: none
lampe_poele:
card:
type: custom:button-card
size: 85%
entity: light.salon_lampe_poele
icon: mdi:lamp
show_name: false
state:
- value: 'off'
styles:
icon:
- color: dimgray
card:
- box-shadow: none
- border-radius: 50%
- background-color: rgba(242,242,242,0.7)
- width: 48px
- height: 48px
- value: 'on'
styles:
icon:
- color: rgb(255,255,128)
card:
- border-radius: 50%
- box-shadow: 0px 0px 6px 3px rgba(255,255,128,0.8)
- background-color: rgba(0,0,0,0.5)
- width: 48px
- height: 48px
nlampe_biblio:
card:
type: custom:button-card
name: Lampe<br/>(bibliothèque)
styles:
name:
- font-size: 0.7em
- font-weight: bold
- color: rgba(0,0,0,0.6)
card:
- background-color: rgba(255,255,255,0.0)
- border-radius: 0%
- border: none
tap_action:
action: none
hold_action:
action: none
lampe_biblio:
card:
type: custom:button-card
size: 85%
entity: light.salon_lampe_bibliotheque
icon: mdi:lamp
show_name: false
state:
- value: 'off'
styles:
icon:
- color: dimgray
card:
- box-shadow: none
- border-radius: 50%
- background-color: rgba(242,242,242,0.7)
- width: 48px
- height: 48px
- value: 'on'
styles:
icon:
- color: rgb(255,255,128)
card:
- border-radius: 50%
- box-shadow: 0px 0px 6px 3px rgba(255,255,128,0.8)
- background-color: rgba(0,0,0,0.5)
- width: 48px
- height: 48px
temp_value:
card:
type: custom:button-card
entity: sensor.echo_salon_temperature
show_name: false
show_icon: false
show_state: true
tap_action: none
styles:
state:
- font-size: 0.82em
- font-weight: bold
- color: dimgray
- justify-self: end
- padding-right: 3%
card:
- background-color: rgba(255,255,255,0.5)
temp:
card:
type: custom:button-card
aspect_ratio: 1/1
show_name: false
show_icon: false
styles:
card:
- opacity: 1
- background-image: url(/local/images/icones/temperature.png)
- background-size: cover
- background-position: center
- background-color: rgba(0,0,0,0.0)
- border: none
ambiances:
card:
type: custom:button-card
name: 'Ambiances :'
styles:
name:
- font-size: 1.0em
- font-weight: bold
- color: rgba(0,0,0,0.6)
- justify-self: start
card:
- background-color: rgba(255,255,255,0.0)
- border: none
ndiner:
card:
type: custom:button-card
name: Dîner<br/>salon
styles:
name:
- font-size: 0.7em
- font-weight: bold
- color: rgba(0,0,0,0.6)
card:
- background-color: rgba(255,255,255,0.0)
- border-radius: 0%
- border: none
tap_action:
action: none
hold_action:
action: none
diner:
card:
type: custom:button-card
size: 80%
icon: mdi:silverware-clean
show_name: false
styles:
icon:
- color: dimgray
card:
- box-shadow: none
- border-radius: 50%
- background-color: rgba(242,242,242,0.7)
- width: 48px
- height: 48px
tap_action:
action: call-service
service: script.diner_salon
ntv:
card:
type: custom:button-card
name: Regarder la<br/>télévision
styles:
name:
- font-size: 0.7em
- font-weight: bold
- color: rgba(0,0,0,0.6)
card:
- background-color: rgba(255,255,255,0.0)
- border-radius: 0%
- border: none
tap_action:
action: none
hold_action:
action: none
tv:
card:
type: custom:button-card
size: 80%
icon: mdi:television-shimmer
show_name: false
styles:
icon:
- color: dimgray
card:
- box-shadow: none
- border-radius: 50%
- background-color: rgba(242,242,242,0.7)
- width: 48px
- height: 48px
tap_action:
action: call-service
service: script.ambiance_television
neteindre:
card:
type: custom:button-card
name: Tout<br/>éteindre
styles:
name:
- font-size: 0.7em
- font-weight: bold
- color: rgba(0,0,0,0.6)
card:
- background-color: rgba(255,255,255,0.0)
- border-radius: 0%
- border: none
tap_action:
action: none
hold_action:
action: none
eteindre:
card:
type: custom:button-card
size: 70%
icon: mdi:lightbulb-group-off
show_name: false
styles:
icon:
- color: dimgray
card:
- box-shadow: none
- border-radius: 50%
- background-color: rgba(242,242,242,0.7)
- width: 48px
- height: 48px
tap_action:
action: call-service
service: script.eteindre_salon
volet_canape:
card:
type: custom:button-card
name: 'Volet canapé :'
styles:
name:
- font-size: 1.0em
- font-weight: bold
- color: rgba(0,0,0,0.6)
- justify-self: start
card:
- background-color: rgba(255,255,255,0.0)
- border-radius: 0%
- border: none
tap_action:
action: none
hold_action:
action: none
vcup:
card:
type: custom:button-card
show_name: false
styles:
card:
- background-color: rgba(255,255,255,0.0)
- background-image: url(/local/images/icones/volet_ouvrir.png)
- background-size: cover
- height: 48px
- width: 48px
- border: none
tap_action:
action: call-service
service: script.ouvrir_volet_canape
vcstop:
card:
type: custom:button-card
show_name: false
styles:
card:
- background-color: rgba(255,255,255,0.0)
- background-image: url(/local/images/icones/volet_stopper.png)
- background-size: cover
- height: 48px
- width: 48px
- border: none
tap_action:
action: call-service
service: script.stopper_volet_canape
vcdown:
card:
type: custom:button-card
show_name: false
styles:
card:
- background-color: rgba(255,255,255,0.0)
- background-image: url(/local/images/icones/volet_fermer.png)
- background-size: cover
- height: 48px
- width: 48px
- border: none
tap_action:
action: call-service
service: script.fermer_volet_canape
volet_biblio:
card:
type: custom:button-card
name: 'Volet bibliothèque :'
styles:
name:
- font-size: 1.0em
- font-weight: bold
- color: rgba(0,0,0,0.6)
- justify-self: start
card:
- background-color: rgba(255,255,255,0.0)
- border-radius: 0%
- border: none
tap_action:
action: none
hold_action:
action: none
vbup:
card:
type: custom:button-card
show_name: false
styles:
card:
- background-color: rgba(255,255,255,0.0)
- background-image: url(/local/images/icones/volet_ouvrir.png)
- background-size: cover
- height: 48px
- width: 48px
- border: none
tap_action:
action: call-service
service: script.ouvrir_volet_bibliotheque
vbstop:
card:
type: custom:button-card
show_name: false
styles:
card:
- background-color: rgba(255,255,255,0.0)
- background-image: url(/local/images/icones/volet_stopper.png)
- background-size: cover
- height: 48px
- width: 48px
- border: none
tap_action:
action: call-service
service: script.stopper_volet_biblioteque
vbdown:
card:
type: custom:button-card
show_name: false
styles:
card:
- background-color: rgba(255,255,255,0.0)
- background-image: url(/local/images/icones/volet_fermer.png)
- background-size: cover
- height: 48px
- width: 48px
- border: none
tap_action:
action: call-service
service: script.fermer_volet_bibliotheque
styles:
custom_fields:
fond:
- background-image: url(/local/images/salon.png)
- position: absolute
- left: 0
- top: 0
- width: 100%
- height: 100%
- background-size: cover
- background-position: center
- opacity: 0.5
ncarte:
- position: absolute
- left: 10px
- top: '-3px'
eclairage:
- position: absolute
- left: 11%
- top: 20%
nplafonnier:
- position: absolute
- left: 32%
- top: 6%
plafonnier:
- position: absolute
- left: 33%
- top: 17%
nlampadaire:
- position: absolute
- left: 45%
- top: 11%
lampadaire:
- position: absolute
- left: 47%
- top: 17%
nlampe_poele:
- position: absolute
- left: 65%
- top: 6%
lampe_poele:
- position: absolute
- left: 64%
- top: 17%
nlampe_biblio:
- position: absolute
- left: 78%
- top: 6%
lampe_biblio:
- position: absolute
- left: 80%
- top: 17%
temp_value:
- width: 19%
- position: absolute
- left: 11%
- top: 35%
temp:
- width: 40px
- height: 40px
- position: absolute
- left: 5%
- top: 32%
ambiances:
- position: absolute
- left: 11%
- top: 48%
ndiner:
- position: absolute
- left: 43%
- top: 34%
diner:
- position: absolute
- left: 41%
- top: 45%
ntv:
- position: absolute
- left: 59%
- top: 34%
tv:
- position: absolute
- left: 61%
- top: 45%
neteindre:
- position: absolute
- left: 80%
- top: 34%
eteindre:
- position: absolute
- left: 79%
- top: 45%
volet_canape:
- position: absolute
- left: 11%
- top: 68%
vcup:
- position: absolute
- left: 42%
- top: 65%
vcstop:
- position: absolute
- left: 57%
- top: 65%
vcdown:
- position: absolute
- left: 72%
- top: 65%
volet_biblio:
- position: absolute
- left: 11%
- top: 85%
vbup:
- position: absolute
- left: 53%
- top: 82%
vbstop:
- position: absolute
- left: 68%
- top: 82%
vbdown:
- position: absolute
- left: 83%
- top: 82%
Il faudra juste mettre une image de fond qui correspondra à la hauteur de carte souhaitée.
Cette solution est pas mal aussi
Merci pour le code. J’ai commencé à tester. Il faut que j’augmente le nombre de devices pour voir le comportement avec une image de la taille de l’Iphone et un execedent de devices.
Merci en tout cas pour le résultat, dont le choix de la transparence
@ [Rammy078]
j’ai déjà ce résultat, pour un appel par pièce. Mais que ce passe-t-il quand on ouvre une pièce avec une nouvelle carte avec une image en background, et 28 devices comme dans ma vidéo au niveau de la piscine???
vidéo avec piscine et image en background et devices qui glissent dessus??
C’est une bonne question, en css il faut placer un background-image puis un background-attachement: fixed, tu devrais pouvoir faire défiler tes cartes en mettant de la transparence en pourcentage. après je ne sais pas si ça marcherais sous HA, étant nouveau j’explore tout juste. mais faudrait que j’essaie pour voir.
Peut être une réponse:
par contre ce qui est bien avec minimalistic c’est que tu mes la photo direct dans la pièce et elle est responsive au niveau des cartes et tu dois pouvoir récupérer le lien pour l’inclure dans le dashbord du même nom
Il y a aussi la possibilité de découper ton image de fond et de mettre ces images sur des button-card différentes. Il doit aussi être possible d’avoir une button-card avec une image de fond et un premier custom_field contenant une custom:stack-in-card. Donc je pense que ce que tu cherches à obtenir est faisable avec une base de button-card (cette carte permet de faire à peu près tout).
Dans un poste précédant j’étais tombé sur des vidéo sur le buttons avec background image. C’est en anglais mais bien fait.
Plusieurs vidéos
Merci pour le lien vers custom Button Card
C’est bien détaillé.
Par contre le lien vers les images en background, revient à ce que j’ai déjà fait.
Ce n’est pas responsive sur Iphone
je ne te cache pas que malgré 2 essais avec minimalist, je suis resté bloqué, et je n’ai pas réussi à aller à un résultat total, bien qu’ayant suivi les tutos les plus connus.
Mais le résultat n’est pas celui que je voudrais réaliser.
Dans cette série de vidéo, il y a bien une image de fond dans la view, mais il n’explique pas comment il fait.
Côté ergonomie, avec HA, quand on veut l’utiliser avec de grandes maisons, cela devient vite compliqué.
sur mon projet, j’ai plus 80 participants KNX, ce qui fait beaucoup de devices.
J’ai commencé à créer mes propres cards. Il va falloir que j’insiste, mais je ne suis très à l’aise avec le code et le CSS
Bonjour, tu bloques à quel niveau avec button-card ?
Bon, j’ai réussi à mettre une image dans un onglet du dashboard et elle reste fixe en défilement sur le téléphone.
dans ton dashboard, tu clique pour le modifier sur les 3pts, puis tu reclic pour ouvrir l’éditeur de la configuration.
tu fais défilé ton thème et dans le menu que tu veux tu colle
background: center / cover no-repeat url("/local/img/background.jpg") fixed
tu dois mettre ton image dans le dossier www et moi j’ai créé un dossier img. c’est un début mais l’image reste fixe sur le mobile.
Dans custon button card tu peux réduire l’opacité ici, c’est 0.5
cela fonctionne aussi pour mushroom card
