[ CARTE ] Bubble Card - Des pop-up et une collection de cartes minimalistes

Bonjour à tous et un énorme bravo à toi @Clooos pour ce travail :clap:

Actuellement, mon Dashboard à base exclusive de MushRoom ressemble à cela :

Je voudrais pouvoir le transférer en Bubble Card car je le trouve bien plus sympa de rendu.
Pensez-vous que je puisse reproduire les mêmes choses avec Bubble Card ?

Je pense par exemple :

  • insérer un calcul Jinja dans le code (comme le nombre de lumières allumées) ?
  • afficher dans la carte des valeurs d’autres entitées ?
  • adapter la couleur de l’icone suivant un statut ou un code ?

Je te répond directement, oui tu peux faire tout ce que tu as indiqué sans aucun soucis.
Il faut lire la doc et utiliser son imagination

Ok alors je m’y lance à fond. Merci pour la confirmation.

Juste pour m’aider, comment afficher dans le corps du texte le nombre de lumières allumées. Je vois dans ton Dashboard le nombre de lumière est au bout de la carte. Je voudrais plutôt le mettre à la place de « Lumières / Aucune »

Merci de l’aide

Hello le forum,

Je suis sincèrement désolé mais en lisant plusieurs fois (et j’espère pas être passé à côté), je ne trouve pas comment faire exactement cela :

Screenshot 2024-09-26 at 11.12.33
Voici la partie de code que j’ai en seconde ligne

🌡️ {{ states("sensor.0x00158d0008ce3cbb_temperature") }} |💧{{
          states("sensor.0x00158d0008ce3cbb_humidity") }} |💡{% set
          ListOfLightsOn = ['light.hue_color_lamp_1',
              'light.hue_color_lamp_2', 'light.hue_play_tv', 'light.hue_go_1']
              %}

              {% set count = namespace(c=0) %}

              {% set LightsOn = ListOfLightsOn | list | count %}

              {% for i in range (0,LightsOn) %}
                {% set LighStatus = states(ListOfLightsOn[i]) %}
                {% if LighStatus == 'on' %}
                  {% set count.c = count.c + 1 %}
                {% endif %}
              {% endfor %}
              {{count.c}}

Notamment la deuxième ligne avec les température, humidité et nombre de lumières allumées.
J’ai réussi à faire ça pour le moment
Screenshot 2024-09-26 at 11.14.31

Vous savez si c’est possible d’afficher sur la ligne Salon (ou mieux en deuxième ligne) les données de plusieurs capteurs.
Voici la partie de code que j’ai en seconde ligne

Bonjour,
Sur la doc il y a card layout 2 rows peu être ça pourrai le faire ou sinon un horizontal row of sub-button

Même avec Chrome c’est une horreur !
C’est dommage je commençais juste à faire des tests en vue d’une migration mais on va attendre j’ai désinstaller du coup les cardes mais aussi le thème

J’ai pas mal progressé sur l’éditeur, il est beaucoup plus rapide maintenant sur certaines config. Plus qu’à attendre la prochaine beta :crossed_fingers:

Bonjour,

Encore désolé d’utiliser le forum mais je ne parviens pas à trouver comment faire. Est-ce possible dans les condition d’affichage de l’icone d’insérer un code plus compliqué ?

Bien sûr j’ai trouvé ce code dans le Git

styles: |
  ${icon.setAttribute("icon", hass.states['vacuum.downstairs'].state === 'error' ? 'mdi:alert' : 'mdi:robot-vacuum')}

Mais ce que je voudrais c’est pouvoir gérer des conditions plus complexe. Voici un exemple de code utilisé qui permet de compter les états des lumières mis dans le tableau (ListOfLightsOn) et si le status est On alors on incrémente un compteur. A la fin, on compte et on positionne l’icone souhaité.
Est-ce possible de faire cela ? Ou est-ce dans les plans de développement de rajouter cette possibilité ?

{% set ListOfLightsOn = ['light.hue_play_gauche', 'light.hue_play_droite', 'light.hue_go_n', light.hue_go_k', 'light.hue_lightstrip'] %}
{% set count = namespace(c=0) %}
{% set LightsOn = ListOfLightsOn | list | count %}
{% for i in range (0,LightsOn) %}
     {% set LighStatus = states(ListOfLightsOn[i]) %}
     {% if LighStatus == 'on' %}
          {% set count.c = count.c + 1 %}
     {% endif %}
{% endfor %} 
{% if count.c > 1%}
     mdi:lightbulb-on
{% else %}
     mdi:lightbulb
{% endif %}

Dès que tu la mets à dispo je teste ça
J’étais déjà en 2.30.x bêta
Donc fait signe et je lance

bonjour
le lien donné en première page n’est plus valide

https://hacs.xyz/docs/setup/download
merci

Merci de me l’avoir signalé ! Je vais bientôt corriger ça !

Alors, Oui tu peux. Mais tu posses ta question au mauvais endroit.
Tu es au rayon charcuterie et tu demandes des conseils pour la peinture…
Il faut que tu commences un nouveau sujet

C’est corrigé, merci

Bonjour a tous.
Est il possible de changer dynamiquement l’icone ET sa couleur d’un bubble card en fonction d’un etat? Car j’arrive a faire changer soit l’icone soit la couleur mais pas les deux…
Ce code change bien la couleur et l’animation, mais pas l’icone :

    styles: |
      .bubble-icon {
        color: ${hass.states['climate.vtherm_cuisine'].attributes.hvac_action === 'idle' ? 'rgba(74, 74, 255, 0.55)' : 'red'} !important;
        animation: ${hass.states['climate.vtherm_cuisine'].attributes.hvac_action === 'heating' ? 'blink 5s linear infinite' : ''};
      }
      .bubble-icon::before {
        content: ${hass.states['climate.vtherm_cuisine'].attributes.hvac_action === 'idle' ? 'mdi:thermometer-off' : 'mdi:heat-wave' }; 
      }
      @keyframes blink {
        0%, 100% { opacity: 1; }
        50% { opacity: 0; }
      }

Et celui la change bien l’icone, mais pas de couleur ni d’animation :

    styles: |
      ${icon.setAttribute("icon", hass.states['climate.vtherm_cuisine'].attributes.hvac_action === 'heating' ? 'mdi:heat-wave' : 'mdi:thermometer-off')}

      .bubble-icon {
        color: ${hass.states['climate.vtherm_cuisine'].attributes.hvac_action === 'idle' ? 'rgba(74, 74, 255, 0.55)' : 'red'} !important;
        animation: ${hass.states['climate.vtherm_cuisine'].attributes.hvac_action === 'heating' ? 'blink 5s linear infinite' : ''};
      }

      @keyframes blink {
        0%, 100% { opacity: 1; }
        50% { opacity: 0; }
      }

Merci pour votre aide!

Salut, tu peux regarder dans la console de ton navigateur pour voir si il n’y a pas d’erreurs qui s’affichent ?

Essaye aussi de mettre le template de changement d’icône à la fin, j’ai déjà vu des gens qui avaient des soucis en le mettant en premier.

Bingo! Fallait le savoir! Merci a toi.

le code qui fonctionne :

    styles: >
      .bubble-icon {
        color: ${hass.states['climate.vtherm_cuisine'].attributes.hvac_action === 'idle' ? 'rgba(74, 74, 255, 0.55)' : 'red'} !important;
        animation: ${hass.states['climate.vtherm_cuisine'].attributes.hvac_action === 'heating' ? 'blink 5s linear infinite' : ''};
      }
      @keyframes blink {
        0%, 100% { opacity: 1; }
        50% { opacity: 0; }
      }
      ${icon.setAttribute("icon", hass.states['climate.vtherm_cuisine'].attributes.hvac_action === 'heating' ? 'mdi:heat-wave' : 'mdi:thermometer-off')}

Je rajouterai ça dans la documentation :ok_hand: Et de rien !

Bonjour,

Je suis actuellement en train d’essayer Bubble Card,

Tout d’abord, merci pour le travail réalisé.

J’ai mes capteurs de portes et fenêtres, l’état remonté est en anglais, je souhaiterais donc remplacer le texte qui est de « locked » par « fermé »

J’ai regardé sur la documentation et je n’ai pas trouvé l’astuce.

Merci pour votre aide

type: custom:bubble-card
card_type: button
entity: binary_sensor.portedentree
show_state: true

image