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

Salut, c’est quoi ta chaîne Youtube?

10 messages au dessus: https://www.youtube.com/@cloooos

@Clooos ça vaut peut être le coup de mettre le lien vers la chaine dans ton 1er post…

Merci, pour ton info car j’ai recommencé à chercher le lien depuis le début et j’étais pas encore arrivé à ce niveau

Bonjour

Je suis certain que je n’ai pas tout exploré mais je n’ai pas vu de carte ou de solution bubblisée pour faire la saisie de numérique, date, time !
Je me trompe ou il y a pas cette possibilité ?

En gros pour un input.input_datetime, input_number, input_text etc…

Non je n’ai toujours pas ajouté cette option, mais ça viendra, j’ai encore tellement de boulot :sweat_smile:

Je me disais justement que tu devais t’ennuyer en ce moment comme c’est la reprise donc je trouve des idées :wink:

C’est clair que cela doit faire du taf tout ça, en attendant l’arrivée de tout ça je vais utiliser d’autres éléments.

Extrait de ce que j’ai produit ces jours ci

Il y a des éléments de notre ami @herveaurel qui lui aussi a fait un taf énorme et qui nous manque.

Sur les cartes cover j’ai pas encore joué sur le CSS mais en mode large cela prend 2 lignes d’où l’espacement. Mais si je mets normal cela fait un truc bizarre !

Salut Jérôme !
As-tu essayé de le mettre en large au lieu de normal ?
image

type: custom:bubble-card
card_type: cover
entity: cover.rideau_du_salon
show_state: true
icon_down: mdi:arrow-down
icon_up: mdi:arrow-up
styles: ''
card_layout: large

Salut… Si j’ai bien lu la doc, les templates sont… Pour les custom styles.
J’aurais aimé pouvoir faire ça : tu me confirmes que c’est pas possible ou il y a une erreur dans mon template ?

margin_top_mobile: "${hass.states['input_boolean.dev_mode'].state === 'on' ? '60px' : '10px' }"

Non pas possible comme ça, mais doit y avoir moyen en passant par les custom styles.

Merci, je voulais pas fouiller pour rien :wink:
Ca fonctionne comme ça:

type: custom:bubble-card
card_type: pop-up
styles: |
  #root {
    --custom-height-offset-mobile: ${hass.states['input_boolean.dev_mode'].state === 'on' ? '58px' : '0px' } !important;
  }

Désolé pour mon retour tardif mais je suis déjà en large !

ci joint mon code :

type: custom:bubble-card
card_type: cover
entity: cover.vr_ch_parents
scrolling_effect: false
force_icon: false
show_attribute: true
attribute: position
name: Parents
card_layout: large
styles: |
  .bubble-cover-card-container {
    background: rgba(79, 69, 87, 1) !important;
  }
  .bubble-icon-container {
    background: rgba(57, 54, 70, 1) !important;
  }
  .bubble-open {
    background: rgba(57, 54, 70, 1) !important;
  }
  .bubble-stop {
    background: rgba(57, 54, 70, 1) !important;
  }
  .bubble-close {
    background: rgba(57, 54, 70, 1) !important;
  }
  .bubble-button {
    height: 35px;
    width: 35px;
  }

Je suis sur un ddashboard en section cela vient peut être de ça ?
en faisant F12 je vois que le bloc concerné est .car.fit-rows mais là cela commence à être un peu chinois quand même :slight_smile:

.card.fit-rows {
    height: calc((var(--row-size,1) * (var(--row-height) + var(--row-gap))) - var(--row-gap));
}

J’ai testé ton code chez moi aussi bien en section que en normal et le résultat est impeccable. Le problème vient d’ailleurs

mais puisque tu es en section essaie de rajouter ça à la suite et dis-moi ce que ça fait

layout_options:
  grid_columns: 4
  grid_rows: 1

Salut @selecus

Désolé, mais petite sieste après entrainement de course à pied :face_with_hand_over_mouth:

Je viens de passer tes 3 lignes de code et le résultat est sans appel plus d’espacement vide !
Je regarde un truc quand même avant de poster : si j’ai des paramètres de layout sur la vue !
mais non

Après j’ai peut être des résiduels de test en tout genre que je ne retrouve pas facilement !

Ce qui est bizarre c’est que cela fait ce phénomène que sur la bubble card cover

Bonjour, merci encore une fois pour cette collection magnifique :+1:
J’ai quasiment refait tout ma carte pour smartphone avec mais je butte sur une amélioration des mes cartes « climate ».
J’aimerais changer la couleur de l’icone selon l’état de l’attibut hvac_action d’un radiateur

Mais rien à faire j’ai esayé je ne sais combien de style mais ça ne fonctionne pas, pas possible selon un attribut d’une entité ?

Mon dernier code :

.bubble-icon {
       color: ${entity.attributes.hvac_action === 'idle' ? 'green' : 'red'} !important;
       }

Ou

      styles:
        icon:
          - color: >
              [[[ 
                if (entity.attributes.hvac_action == "idle") 
                  return "green"; 
                else 
                  return "white"; 
              ]]]

Je dois en avoir fait plus de 30 différents :sweat_smile:

hass.states['climate.salle_a_manger'].attributes.hvac_action 

Essaie avec ça

Pouahhh merci ça fonctionne merci beaucoup :+1:
Je ne connaissais pas encore hass.states

Si ça peut servir à d’autre, grâce à selecus j’ai découvert hass.states ce qui m’a permit de faire une bubble card avec un combo de personnalisation :

Changement du fond de la bulle selon un statut
Changement de l’icone selon le statut
Changement de couleur de l’icone selon le statut
Animation de l’icone selon le statut
Police, opacité…

image
image

La roue crantée tourne

le code :

    styles: |-
      .bubble-button-background {
        opacity: 1 !important;
        background-color: ${hass.states['switch.filtration_piscine'].state === 'on' ? '#0097d9' : ''} !important;
      }
      .bubble-icon {
        animation: ${hass.states['switch.filtration_piscine'].state === 'on' ? 'slow-rotate 2s linear infinite' : ''};
        color: ${hass.states['switch.filtration_piscine'].state === 'on' ? '' : '#0097d9'} !important;
        opacity: 1;
      }
      @keyframes slow-rotate {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
      }
      * {
        font-size: 14px !important;
      }
       ${icon.setAttribute("icon", hass.states['switch.filtration_piscine'].state === 'off' ? 'phu:pool-filter' : 'mdi:cog')}

Salut la teams,
est ce que vous rencontrez des ralentissements sur bubble ?
J’ai un dashboard full bubble et je ne peux quasi pas editer mes page.
Pour l’utilisation aucun soucis par contre .
Merci à tous

Salut, l’éditeur a un soucis sur certaines config et je suis justement en train de bosser sur ça pour la prochaine beta.

Par contre en attendant ça fonctionne vraiment bien sur Chrome, j’imagine que tu as testé sur un autre navigateur comme Safari ou Edge.

Ca marche avec aucun navigateur. Si tu as besoins de retour hésite pas.
Romain