Salut, pourrais tu partager ton code avec le thème que tu as utiliser ?
Merci beaucoup !!
Salut,
Comme beaucoup je suppose, jai decouvert cette card il y a peu et j’adore 
. Super boulot !!!
Je me demandait s’il y avait un moyen de faire apparaitre les boutons conditionnellement dans « horizontal-buttons-stack » ?
En résumé je souhaite faire apparaitre certains boutons seulement si un de mes booleans est sur ‹ on ›.
Quitte a mettre une multitude de menus, j’ai tenté d’imbriquer « horizontal-buttons-stack » dans une card conditional mais ca ne fonctionne pas.
Merci encore pour le taff derriere cette card 
Salut,
Sympa la carte mais lors de différents essais, les boutons se superposent en bas de ma page…
Bubble Card 2 - Première bêta
v2.0.0-beta.1
Bonjour à tous !
Il y a environ 8 mois, j’ai publié la toute première version de Bubble Card. Depuis, je l’ai améliorée pendant mon temps libre, mais comme vous le savez, les dernières versions n’ont pas ajouté beaucoup de fonctionnalités, principalement parce que la liste des bugs s’allongeait, mais aussi parce que j’avais commencé une restructuration complète du code pour permettre une meilleure maintenance à l’avenir.
Pour cette version, j’ai eu une aide considérable de @brunosabot, un développeur expérimenté qui m’a aidé à pousser la restructuration encore plus loin. Mais il ne s’est pas contenté d’une meilleure structure, il a également corrigé et amélioré de nombreux points en cours de route !
Cette nouvelle structure m’a finalement permis de me concentrer sur les fonctionnalités que je voulais ajouter depuis la toute première version, voici un aperçu !
Sub-buttons (Sous-boutons)
C’est la plus grande nouveauté de cette version, il est maintenant possible d’ajouter des boutons personnalisés dans presque toutes les cartes déjà disponibles, même le séparateur ! Cela permet des possibilités presque infinies ! J’ai hâte de voir ce que vous allez créer avec ces derniers !
Le premier bouton vient de moi (le % et l’icône d’ampoule sont tous deux des sous-boutons), le second est de ma femme
Un bouton qui gère un aspirateur avec plusieurs sous-boutons.
Nouvelle carte lecteur multimédia
J’ai également ajouté une nouvelle carte pour gérer un lecteur multimédia, vous pouvez même y ajouter vos propres sous-boutons personnalisés !
Ces boutons ne sont pas des sous-boutons mais vous pouvez afficher/masquer ceux dont vous avez besoin.
Le header des pop-up est maintenant un bouton Bubble
Cette fonctionnalité a été demandée depuis longtemps, vous pouvez maintenant changer le header des pop-up pour qu’il agisse comme un slider si vous le souhaitez (cela signifie que vous pouvez ajouter des sous-boutons aussi !).
C’est une sorte de breaking change par rapport à la version précédente, pour ajouter à nouveau le bouton d’alimentation ou l’état, ajoutez simplement quelques sous-boutons dans l’éditeur
States avancés
Vous avez maintenant la possibilité d’ajouter un attribut ou l’heure de la dernière mise à jour à côté de du state sur presque tous les types de cartes, et traduit dans toutes les langues disponibles !
Nouvel éditeur
Cette version arrive avec une toute nouvelle interface pour l’éditeur, et aussi avec beaucoup de corrections ! Par exemple, l’éditeur du horizontal buttons stack est maintenant instantané. J’ai également ajouté la possibilité d’ajouter les tap actions directement dedans, ainsi que les styles personnalisés !
Tap actions partout
Les tap actions de Home Assistant sont vraiment utiles, c’est pourquoi je les ai ajoutées à de nouveaux endroits. Comme sur les boutons ou les sous-boutons pour permettre encore plus de personnalisation.
Performance, stabilité et beaucoup de corrections de bugs
C’était la première chose sur laquelle on a travaillé pour cette version, pour tous ceux qui ont eu des problèmes dans le passé, cette version est pour vous ! Surtout pour les utilisateurs d’iOS et Safari !
Mais ce n’est pas tout !
Voici la liste de toutes les autres nouvelles fonctionnalités et corrections de bugs :
Nouvelles fonctionnalités
- Changement majeur : Les boutons custom on été supprimés, tous les boutons sont maintenant personnalisables.
- Icônes par défaut : C’est encore un travail en cours mais il y a maintenant des icônes par défaut lorsque vous créez un nouveau bouton.
- Nouveau bouton state : @brunosabot a ajouté une nouvelle carte pour les states, la différence est qu’elle montre le panneau d’informations lorsque vous tapez/cliquez dessus.
- Nouveau bouton nom/texte : J’ai ajouté un nouveau bouton pour afficher uniquement du texte si nécessaire, c’est parfait pour le header des pop-up par exemple.
- Forçage des icônes : Vous pouvez maintenant ajouter
force_icon: truepour toujours afficher l’icône au lieu de l’image de l’entité. C’est également disponible dans l’éditeur. - Les sliders prennent en charge plus d’entités : Les boutons sliders prennent maintenant en charge la position des volets et les input_number.
- Les switch prennent en charge plus d’entités : Les boutons switch prennent maintenant en charge plus de types d’entités (si un type d’entité n’est pas pris en charge, veuillez ouvrir un issue sur GitHub, en anglais idéalement).
- Défilement automatique des textes : Les textes longs dans les petites cartes défilent maintenant par défaut si le contenu est plus long que son conteneur, parfait pour les petits écrans.
- Couleur du bouton switch : Si vous ajoutez une lumière qui gère les couleurs dans votre switch, l’arrière-plan changera automatiquement en conséquence.
- Changements de styles : Certains styles ont un peu changé.
- Optimisation de l’éditeur : L’aperçu de la carte dans l’éditeur est maintenant fixé en haut lorsque vous faites défiler la page. Mais il y a tellement encore plus de changements dans l’éditeur !
- Pop-up dans l’éditeur : Lorsque vous entrez dans l’éditeur, les pop-ups sont maintenant réduites pour prendre moins de place.
- Et j’en oublie probablement d’autres !
Corrections de bugs et optimisations
- Disposition des colonnes du dashboard : Ce vieux problème est maintenant enfin résolu ! J’ai supprimé le column_fix, placez simplement votre pop-up avant toutes les autres cartes pour assurer une disposition correcte.
- Le pop-up ne couvre pas toutes les cartes : Ce problème est maintenant résolu !
- Dégradé supérieur des pop-up : Je l’ai remplacé par un masque pour un meilleur rendu.
- Position des pop-up : Les pop-up sont maintenant centrées correctement dans tous les cas (il y a toujours la correction du margin si vous en avez besoin).
- Custom styles des pop-up : Ils fonctionnent maintenant correctement.
- Correction pour l’image des entité : Les images des entités fonctionnent maintenant lors de l’accès à Home Assistant depuis l’extérieur du réseau local.
- Corrections du horizontal buttons stack : Le HBS ne couvre plus la dernière carte de votre dashboard. Et beaucoup d’autres problèmes sont maintenant résolus, grâce à @brunosabot !
- Et tellement plus de la part de @brunosabot et moi !
Et c’est tout… C’est encore une bêta et j’espère que tout fonctionne ! J’ai hâte (comme toujours) de lire vos retours sur cette version !
Une dernière chose, si cela vous intéresse, j’ai ouvert un subreddit pour Bubble Card où je poste mes progrès sur le projet. Le voici :
6 « J'aime »
ça a l’air super prometteur, je vais prendre le temps de jouer avec la semaine prochaine.
Un énorme merci en tout cas pour le boulot !
1 « J'aime »
Bonjour,
Déjà je tiens à féliciter @Clooos pour le super boulot chapeau !
Je viens d’installer la version 2.0 et j’aimerais avoir le fond des boutons slider transparent mais peu importe le style je n’y arrive pas. Si quelqu’un pourrai me conseiller.
Merci par avance.
type: custom:bubble-card
card_type: button
button_type: slider
entity: light.variateur_salon
name: Spots Salon
Icon: mdi:light-recessed
show_state: true
show_attribute: true
tap_action:
action: toggle
double_tap_action:
action: toggle
hold_action:
action: more-info
styles: |
ha-card > div > div > div {
background: rgba(0, 0, 0, 0.16) !important;
}
Tu peux changer le fond d’un slider comme ceci 
.bubble-button-card-container {
background-color: rgba(92, 83, 103, .5);
}
Bonjour,
Parfait cela fonctionne merci @Clooos.
Et pour le fond du bouton où se situe l’icone c’est qu’elle valeur à modifier 
Salut Clooos !
Super projet !
Actuellement le popup fonctionne de manière verticale, du bas vers le haut
Est ce qu’il sera possible de changer de sens, genre de horizontalement de la droite vers la gauche ou inversement ?
Ça pourrait faire un dashboard bien classe 
C’est pas difficile, voilà un petit cours rapide sur comment récupérer les classes des éléments CSS, faudra que je rajoute ça dans la documentation
1 « J'aime »
C’est pas dans mes plans à vrai dire, mais ça doit être faisable avec les custom styles
1 « J'aime »
Merci beaucoup pour ta réponse rapide !
Merci je vais regarder cela
Tiens, si tu ne trouves pas:
/* icon_background */
ha-card > div > div > div.bubble-button-card.switch-button > div.bubble-icon-container.icon-container::after {
background-color: red !important;
}
Salutations Clooos . Gros boulot, je ne me servais que des popups de ta carte… de depuis la beta2, j’suis en train de refaire tout un dashboard inspiré de ton design! Merci.
- Concernant les retours haptiques sur l’app android… on fait comment pour les retirer?
Ils posent un soucis ? Car Home Assistant a pas mal de retours haptics par défaut, il y a une différence avec ceux de Bubble Card ?
En fait sur un bubble-switch (sans slider) qui contrôle une lumière. L’icône réagit bien (les 3 tap actions comme définis + retour haptique standard).
Par contre si je clique sur le corps du bouton :
- haptique étrange (entre le double et le triple rapide, je ne sais pas dire)
- un appui long déclenche more-info (alors que hold_action est sur none)
Du coup c’est pas tellement un pbm de haptique mais plutôt de définition de zone cliquable?
C’est pareil sur desktop (Chrome), et pareil avec le bubble/name-text. L’icône ne réagit pas (normal, pas d’entité, mais un click sur la zone centrale déclenche retour haptique ET visuel, même avec les actions définies sur ‹ no action ›.
Bonjour et merci, très sympa.
Je commence à tester.
Quand je crée un horizontal-button stack depuis mon mobile ça me change la résolution de l’interface de mon mobile en l’agrandissant. Étonnant
Merci pour l’info, j’ai changé quelque chose récemment je vais y jeter un coup d’oeil !
Bonjour,
Merci @mrgrlscz pour le code.
Voici le résultat, si cela peux servir à quelqu’un
Le code d’une carte:
type: custom:bubble-card
card_type: button
button_type: slider
entity: light.variateur_salon
name: Spots Salon
icon: mdi:light-recessed
show_state: true
show_attribute: true
tap_action:
action: toggle
double_tap_action:
action: toggle
hold_action:
action: more-info
styles: |
.bubble-icon-container {
background-color: rgba(255, 255, 255, 0.1);
}
.bubble-button-card-container {
background-color: rgba(0, 0, 0, 0.2);
}