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

Home Assistant - Tutoriels & Partages Interface / Lovelace / Thème / Custom Card
, , ,
266

Je reviens de nouveau vers vous.
J’ai essayé d’améliorer ma carte qui fonctionnait mais je me retrouve encore avec des comportements etranges.
Voici les problèmes : le changement du background-color du sub-button-2 ne fonctionne pas, celui du 1 oui

le code:

    styles: >

      .bubble-icon {
        color: ${hass.states['climate.vtherm_salle_de_bain'].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; }
      }

      .bubble-sub-button-1 {
        background-color: black};
      } 

      .bubble-sub-button-2 {
        background-color: red};
      } 

      .bubble-sub-button-3 {
        content: '${hass.states["climate.vtherm_salle_de_bain"].attributes.preset_mode}';
      }

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

le rendu :

image

Si je retire le « 1 » de « .bubble-sub-button-1 » comme suggéré plus haut, alors les 3 sub-button ont un fond noir.
Merci pour votre aide

267

Tu as un peu trop d’accolade fermante, après black et red.
Ca devrait être ainsi :

      .bubble-sub-button-1 {
        background-color: black;
      }

Et

      .bubble-sub-button-2 {
        background-color: red;
      }
268

Oui, ainsi :

  • Si tu veux pour 1 seul sub-button
.bubble-sub-button-1 {
  background-color: pink !important;
}
  • Si tu veux pour tous les sub-button
.bubble-sub-button {
  background-color: pink !important;
}
269

Rho punaise, ça fonctionne en plaçant le template en dernier !!
Merci :wink:
Faut vraiment le rajouter dans la doc, oui :laughing:

CleanShot 2024-10-08 at 09.29.44@2x
CleanShot 2024-10-08 at 09.29.44@2x1920×698 45.6 KB

Faut que je toruve une autre couleur pour les fenêtre fermées, et peut-être les ouvertes aussi XD)
Vous avez des suggestions ?

@Tank Oui merci :wink: J’ai fini par trouver :wink:

1 « J'aime »
270

:+1:
quand on a le nez collé sur l’ecran pendant 2h…
Merci!

271

Bonjour,
Est-ce qu’il est possible de changer le fond derrière un icone de sous-bouton ?
Je n’arrive pas à trouver comment faire…

272

Voir ma réponse :

1 « J'aime »
273

Ha punaise je suis repassé à coté :sweat_smile:
Merci bien :innocent:

2 « J'aime »
274

Je vais encore poser une question qui a probablement déjà une réponse… Mais je ne la trouve pas :sweat_smile:

Comment je peux modifier la couleur du texte dans un sous-bouton ? (et aussi dans le bouton principal, ça peut servir)

edit : et quit à modifier la couleur du texte, on ne pourrait pas mettre en gras aussi ?

275

Basé sur ma réponse précédente, il suffit de remplacer ‹ background-color › par ‹ color ›
Pour gras ‹ font-weight: bold; ›

2 « J'aime »
276

Nickekl :slight_smile:
Merci bien :slight_smile:

Aller, voilà où j’en suis ce soir ^^

CleanShot 2024-10-08 at 23.47.15@2x
CleanShot 2024-10-08 at 23.47.15@2x1920×939 74.8 KB

Me reste la carte des mises à jour à coloriser, et aussi les popups :slight_smile:

CleanShot 2024-10-08 at 23.49.34@2x
CleanShot 2024-10-08 at 23.49.34@2x1462×746 84.8 KB

CleanShot 2024-10-08 at 23.49.58@2x
CleanShot 2024-10-08 at 23.49.58@2x1414×1050 136 KB

2 « J'aime »
277

Salut @Clooos
Une vision de la mise à jour des améliorations sur la partie ralentissement en tout genre :smile: ?
Tu penses pousser la mise à jour ou la bêta quand ?

Sinon les card sont pas encore compatible decluterring ? C’est en roadmap ?

1 « J'aime »
278

Bonsoir,
J’ai une question niveau programmation.
Comment faire des if then else dans les Custom Style / Template ?
J’ai vaguement compris le if then, mais le else ?

Et enfin, j’ai aussi compris que le === faisait une compariason d’égalité, mais comment faire le différent ? le > et le < ?

280
1 « J'aime »
281

Bonjour
Je me retrouve avec le meme problème cité par @mrgrlscz
Je veux rendre la carte moin ronde mais « le fond » ne suis pas
j’ai essayé les solutions proposées mais rien ne fonctionne
code

    styles: >
      ha-card > div > div {
        border-radius: 12px !important;
      } .bubble-button-card-container 
       .bubble-range-slider {
         border-radius: 12px !important;
       }

resultat

image

merci pour votre aide

282

Bonsoir,
En bricolant ma carte des updates, j’ai constaté un truc, pas pratique, mais probablement normal.
Je vous colle le code YAML du Style/Template de ma carte :

CleanShot 2024-10-10 at 16.34.38@2x
CleanShot 2024-10-10 at 16.34.38@2x994×206 11.9 KB

.bubble-button-background {
  background-color: 
    ${ state !== '0'
      ? 'rgba(200, 0, 80, 0.8)'
      : 'rgba(255, 255, 255, 0.5)'
    } !important;
}

.bubble-icon {
  opacity: 1 !important;
  color: 
    ${ state !== '0'
      ? 'rgba(200, 0, 80, 0.8)'
      : 'rgba(255, 255, 255, 0.5)'
    } !important;
}

.bubble-icon-container{
  opacity: 0.7 !important;
  background-color: rgba(0, 0, 0) !important;
}

/* HAOS Updates
   sensor.tplt_available_updates_system */
.bubble-sub-button-1 {
  font-weight:
    ${ hass.states['sensor.tplt_available_updates_system'].state !== '0'
      ? 'bold'
      : 'normal'
  } !important;
}
.bubble-sub-button-1 > ha-icon {
  color:
    ${ hass.states['sensor.tplt_available_updates_system'].state === '0'
      ? 'rgba(255, 255, 255, 0.5)'
      : 'rgba(255, 127, 0, 1)'
    } !important;
}

/* Add-On Updates
   sensor.tplt_available_updates_hacs */
.bubble-sub-button-2 {
  font-weight:
    ${ hass.states['sensor.tplt_available_updates_hacs'].state !== '0'
      ? 'bold'
      : 'normal'
  } !important;
}
.bubble-sub-button-2 > ha-icon {
  color:
    ${ hass.states['sensor.tplt_available_updates_hacs'].state === '0'
      ? 'rgba(255, 255, 255, 0.5)'
      : 'rgba(0, 255, 200, 1)'
    } !important;
}

/* HACS Updates
   sensor.tplt_available_updates_addon */
.bubble-sub-button-3 {
  font-weight:
    ${ hass.states['sensor.tplt_available_updates_addon'].state !== '0'
      ? 'bold'
      : 'normal'
  } !important;
}
.bubble-sub-button-3 > ha-icon {
  color:
    ${ hass.states['sensor.tplt_available_updates_addon'].state === '0'
      ? 'rgba(255, 255, 255, 0.5)'
      : 'rgba(0, 255, 0, 1)'
    } !important;
}

J’ai constaté que l’utilisation de stateseul dansstate !== '0' ne fonctionne que pour la carte de base, pas pour les sous-bouton…
Pour ces derniers, j’ai du passer par la version complète : hass.states['sensor.tplt_available_updates_addon'].state === '0' car l’entité du sous-bouton différe de celle du bouton de base, et le state seul fait référence à l’entité du bouton principal.

Est-ce normal ?

283

Bonjour,
Je cherche à coloriser les élements d’une popup, mais je n’y arrive pas…
Voilà ce que j’ai :

CleanShot 2024-10-11 at 13.10.12@2x
CleanShot 2024-10-11 at 13.10.12@2x2056×2160 225 KB

J’aimerais colorer l’en-tête comme je le fais pour la carte du dashboard :

CleanShot 2024-10-11 at 13.11.01@2x
CleanShot 2024-10-11 at 13.11.01@2x892×144 7.22 KB

et le code :

type: vertical-stack
cards:
  - type: custom:bubble-card
    card_type: pop-up
    hash: "#update"
    name: Mises à jour
    icon: mdi:update
    close_on_click: false
    sub_button:
      - entity: switch.hacs_pre_release
        name: Beta
        show_name: false
        icon: null
        show_state: true
        show_last_changed: false
        show_attribute: false
        tap_action:
          action: toggle
        show_icon: false
        show_background: true
    styles: |+

      .bubble-button-card-container {
          background: blue !important;
      }
        
        .bubble-button-background {
        background-color: 
          ${ hass.states['sensor.nombre_de_mise_a_jour_total'].state !== '0'
            ? 'rgba(200, 0, 80, 0.8)'
            : 'rgba(255, 255, 255, 0.5)'
          } !important;
      }

      .bubble-icon {
        opacity: 1 !important;
        color: 
          ${ hass.states['sensor.nombre_de_mise_a_jour_total'].state !== '0'
            ? 'rgba(200, 0, 80, 0.8)'
            : 'rgba(255, 255, 255, 0.5)'
          } !important;
      }

      .bubble-icon-container{
        opacity: 0.7 !important;
        background-color: rgba(0, 0, 0) !important;
      }

      /* Beta Updates or not
         switch.hacs_pre_release */
      .bubble-sub-button-1 {
        font-weight:
          ${ hass.states['switch.hacs_pre_release'].state !== '0'
            ? 'bold'
            : 'normal'
        } !important;
      }
      .bubble-sub-button-1 > ha-icon {
        color:
          ${ hass.states['sensor.hacs_pre_release'].state === '0'
            ? 'rgba(255, 255, 255, 1)'
            : 'rgba(255, 127, 0, 1)'
          } !important;
      }




    show_header: true
    button_type: state
    entity: sensor.nombre_de_mise_a_jour_total
    show_state: false
    show_name: true
    force_icon: false
    show_icon: true
  - type: conditional
    conditions:
      - condition: state
        entity: binary_sensor.tplt_available_updates
        state: "on"
    card:
      type: custom:vertical-stack-in-card
      cards:
        - type: custom:bubble-card
          card_type: separator
          name: "Mise(s) à jour disponible(s):"
          styles: |-
            ha-card { color: var(--primary-text-color); }
            .bubble-line {
              background: var(--primary-text-color);
              opacity: 0.2;
            }
        - type: custom:stack-in-card
          card_mod:
            class: stock
          cards:
            - type: conditional
              conditions:
                - condition: state
                  entity: sensor.tplt_available_updates_system
                  state_not: "0"
              card:
                type: custom:auto-entities
                filter:
                  include:
                    - entity_id: update.*
                      state: "on"
                  exclude:
                    - entity_id: update.*
                      attributes:
                        device_class: firmware
                    - entity_id: update.*
                      attributes:
                        supported_features: 23
                    - entity_id: update.*
                      attributes:
                        supported_features: 25
                card:
                  type: custom:flex-table-card
                  card_mod:
                    class: stock
                    style: |
                      table {
                        padding: 4px;
                      }
                  sort_by: friendly_name+
                  clickable: true
                  columns:
                    - data: entity_picture
                      align: center
                      name: ""
                      modify: "'<img src=\"' + x + '\"style=\"height:30px;width:30px\">'"
                    - name: Système
                      data: friendly_name
                      align: left
                      modify: |-
                        x = x.replace('Update', '');
                        x;
                    - data: installed_version
                      name: Actuelle
                      align: right
                    - data: latest_version
                      name: Disponible
                      align: right
                  css:
                    thead th: "color: var(--text);"
                    tbody tr: "background-color: transparent !important;"
                    tbody tr td:nth-child(1): "width: 32px;"
                    tbody tr td:nth-child(3): "width: 64px; font-weight: bold;"
                    tbody tr td:nth-child(4): >-
                      width: 64px; color: var(--success-color); font-weight:
                      bold;
            - type: conditional
              conditions:
                - condition: state
                  entity: sensor.tplt_available_updates_addon
                  state_not: "0"
              card:
                type: custom:auto-entities
                filter:
                  include:
                    - entity_id: update.*
                      state: "on"
                  exclude:
                    - entity_id: update.*
                      attributes:
                        device_class: firmware
                    - entity_id: update.*
                      attributes:
                        supported_features: 23
                    - entity_id: update.home_assistant_core_update
                    - entity_id: update.home_assistant_operating_system_update
                    - entity_id: update.home_assistant_supervisor_update
                card:
                  type: custom:flex-table-card
                  card_mod:
                    class: stock
                    style: |
                      table {
                        padding: 4px;
                      }
                  sort_by: friendly_name+
                  clickable: true
                  columns:
                    - data: entity_picture
                      align: center
                      name: ""
                      modify: "'<img src=\"' + x + '\"style=\"height:30px;width:30px\">'"
                    - name: Module comp.
                      data: friendly_name
                      align: left
                      modify: |-
                        x = x.replace('Update', '');
                        x;
                    - data: installed_version
                      name: Actuelle
                      align: right
                    - data: latest_version
                      name: Disponible
                      align: right
                  css:
                    thead th: "color: var(--text);"
                    tbody tr: "background-color: transparent !important;"
                    tbody tr td:nth-child(1): "width: 32px;"
                    tbody tr td:nth-child(3): "width: 64px; font-weight: bold;"
                    tbody tr td:nth-child(4): >-
                      width: 64px; color: var(--success-color); font-weight:
                      bold;
            - type: conditional
              conditions:
                - condition: state
                  entity: sensor.tplt_available_updates_hacs
                  state_not: "0"
              card:
                type: custom:auto-entities
                filter:
                  include:
                    - entity_id: update.*
                      state: "on"
                  exclude:
                    - entity_id: update.*
                      attributes:
                        device_class: firmware
                    - entity_id: update.*
                      attributes:
                        supported_features: 25
                    - entity_id: update.home_assistant_core_update
                    - entity_id: update.home_assistant_operating_system_update
                    - entity_id: update.home_assistant_supervisor_update
                card:
                  type: custom:flex-table-card
                  card_mod:
                    class: stock
                    style: |
                      table {
                        padding: 4px;
                      }
                  sort_by: friendly_name+
                  clickable: true
                  columns:
                    - data: entity_picture
                      align: center
                      name: ""
                      modify: "'<img src=\"' + x + '\"style=\"height:30px;width:30px\">'"
                    - name: HACS
                      data: friendly_name
                      align: left
                      modify: |-
                        x = x.replace('update', '');
                        x;
                    - data: installed_version
                      name: Actuelle
                      align: right
                    - data: latest_version
                      name: Disponible
                      align: right
                  css:
                    thead th: "color: var(--text);"
                    tbody tr: "background-color: transparent !important;"
                    tbody tr td:nth-child(1): "width: 32px;"
                    tbody tr td:nth-child(3): "width: 64px; font-weight: bold;"
                    tbody tr td:nth-child(4): >-
                      width: 64px; color: var(--success-color); font-weight:
                      bold;
  - type: conditional
    conditions:
      - condition: state
        entity: binary_sensor.tplt_skipped_updates
        state: "on"
    card:
      type: custom:vertical-stack-in-card
      cards:
        - type: custom:bubble-card
          card_type: separator
          name: "Mise(s) à jour ignorée(s):"
          styles: |-
            ha-card { color: var(--primary-text-color); }
            .bubble-line {
              background: var(--primary-text-color);
              opacity: 0.2;
            }
        - type: custom:stack-in-card
          card_mod:
            class: stock
          cards:
            - type: conditional
              conditions:
                - condition: state
                  entity: sensor.tplt_skipped_updates_system
                  state_not: "0"
              card:
                type: custom:auto-entities
                filter:
                  include:
                    - entity_id: update.*
                      state: "off"
                  exclude:
                    - entity_id: update.*
                      attributes:
                        skipped_version: null
                    - entity_id: update.*
                      attributes:
                        device_class: firmware
                    - entity_id: update.*
                      attributes:
                        supported_features: 23
                    - entity_id: update.*
                      attributes:
                        supported_features: 25
                card:
                  type: custom:flex-table-card
                  card_mod:
                    class: stock
                    style: |
                      table {
                        padding: 4px;
                      }
                  sort_by: friendly_name+
                  clickable: true
                  columns:
                    - data: entity_picture
                      align: center
                      name: ""
                      modify: "'<img src=\"' + x + '\"style=\"height:30px;width:30px\">'"
                    - name: Système
                      data: friendly_name
                      align: left
                      modify: |-
                        x = x.replace('Update', '');
                        x;
                    - data: installed_version
                      name: Actuelle
                      align: right
                    - data: skipped_version
                      name: Ignorée
                      align: right
                  css:
                    thead th: "color: var(--text);"
                    tbody tr: "background-color: transparent !important;"
                    tbody tr td:nth-child(1): "width: 32px;"
                    tbody tr td:nth-child(3): "width: 64px; font-weight: bold;"
                    tbody tr td:nth-child(4): "width: 64px; color: var(--nova-color); font-weight: bold;"
            - type: conditional
              conditions:
                - condition: state
                  entity: sensor.tplt_skipped_updates_addon
                  state_not: "0"
              card:
                type: custom:auto-entities
                filter:
                  include:
                    - entity_id: update.*
                      state: "off"
                  exclude:
                    - entity_id: update.*
                      attributes:
                        skipped_version: null
                    - entity_id: update.*
                      attributes:
                        device_class: firmware
                    - entity_id: update.*
                      attributes:
                        supported_features: 23
                    - entity_id: update.home_assistant_core_update
                    - entity_id: update.home_assistant_operating_system_update
                    - entity_id: update.home_assistant_supervisor_update
                card:
                  type: custom:flex-table-card
                  card_mod:
                    class: stock
                    style: |
                      table {
                        padding: 4px;
                      }
                  sort_by: friendly_name+
                  clickable: true
                  columns:
                    - data: entity_picture
                      align: center
                      name: ""
                      modify: "'<img src=\"' + x + '\"style=\"height:30px;width:30px\">'"
                    - name: Module comp.
                      data: friendly_name
                      align: left
                      modify: |-
                        x = x.replace('Update', '');
                        x;
                    - data: installed_version
                      name: Actuelle
                      align: right
                    - data: skipped_version
                      name: Ignorée
                      align: right
                  css:
                    thead th: "color: var(--text);"
                    tbody tr: "background-color: transparent !important;"
                    tbody tr td:nth-child(1): "width: 32px;"
                    tbody tr td:nth-child(3): "width: 64px; font-weight: bold;"
                    tbody tr td:nth-child(4): "width: 64px; color: var(--nova-color); font-weight: bold;"
            - type: conditional
              conditions:
                - condition: state
                  entity: sensor.tplt_skipped_updates_hacs
                  state_not: "0"
              card:
                type: custom:auto-entities
                filter:
                  include:
                    - entity_id: update.*
                      state: "off"
                  exclude:
                    - entity_id: update.*
                      attributes:
                        skipped_version: null
                    - entity_id: update.*
                      attributes:
                        device_class: firmware
                    - entity_id: update.*
                      attributes:
                        supported_features: 25
                    - entity_id: update.home_assistant_core_update
                    - entity_id: update.home_assistant_operating_system_update
                    - entity_id: update.home_assistant_supervisor_update
                card:
                  type: custom:flex-table-card
                  card_mod:
                    class: stock
                    style: |
                      table {
                        padding: 4px;
                      }
                  sort_by: friendly_name+
                  clickable: true
                  columns:
                    - data: entity_picture
                      align: center
                      name: ""
                      modify: "'<img src=\"' + x + '\"style=\"height:30px;width:30px\">'"
                    - name: HACS
                      data: friendly_name
                      align: left
                      modify: |-
                        x = x.replace('update', '');
                        x;
                    - data: installed_version
                      name: Actuelle
                      align: right
                    - data: skipped_version
                      name: Ignorée
                      align: right
                  css:
                    thead th: "color: var(--text);"
                    tbody tr: "background-color: transparent !important;"
                    tbody tr td:nth-child(1): "width: 32px;"
                    tbody tr td:nth-child(3): "width: 64px; font-weight: bold;"
                    tbody tr td:nth-child(4): "width: 64px; color: var(--nova-color); font-weight: bold;"

Merci à @mrgrlscz pour le code des bubble cards :slight_smile:

Comment puis-je colorer cet entête ?

edit : pour info, ça rend comme ça :

CleanShot 2024-10-11 at 13.13.47@2x
CleanShot 2024-10-11 at 13.13.47@2x1134×640 60.4 KB

284

Salut,
J’ai une nouvelle question, mais cette fois-ci sur les séparateurs :
J’aimerais réduire l’empatement au-dessus de la séparation, tout en rapprochant de la carte suivante au plus possible.
J’ai ceci :

CleanShot 2024-10-14 at 14.24.16@2x
CleanShot 2024-10-14 at 14.24.16@2x1980×1714 198 KB

Qui donne cela (à gauche), et ce que j’aimerais avoir à droite :

CleanShot 2024-10-14 at 14.25.27@2x
CleanShot 2024-10-14 at 14.25.27@2x2006×968 93.5 KB

Quelqu’un sait-il faire celà ?

285

Salut,
si tu enlèves le padding-top: 30px !important ou le diminue dans ha-card ?

286

Hello @WarC0zes
Si j’enlève le padding-top: 30px !important j’obtiens celà :

CleanShot 2024-10-14 at 15.16.04@2x
CleanShot 2024-10-14 at 15.16.04@2x982×892 60.1 KB

Comment je le diminue dans HA-Card ?