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

[oli_34]

Salut

Avec HACS

1. Téléchargez HACS en suivant les instructions sur https://hacs.xyz/docs/setup/download
2. Procédez à la configuration initiale en suivant les instructions sur https://hacs.xyz/docs/configuration/basic
3. Sur votre barre latérale, allez à HACS > Intégrations
4. Cliquez sur l’icône en haut à droite, puis sur Dépôts personnalisés
5. Pour le dépôt, ajoutez ceci : https://github.com/Clooos/Bubble-Card
6. Pour la catégorie, sélectionnez Lovelace, puis cliquez sur Ajouter
7. Maintenant, cliquez sur Bubble Card, puis sur le bouton Télécharger
8. Revenez à votre tableau de bord et cliquez sur l’icône en haut à droite, puis sur Modifier le tableau de bord
9. Vous pouvez maintenant cliquer sur Ajouter une carte dans le coin inférieur droit et rechercher Bubble Card

[EgainMoney]

C’est bien la partie qui bloque chez moi au 6 ça me donne le message d’erreur et que je ne comprends pas et je ne trouve bubble nul par dans les dossiers.

Edit ; je suis passé en mode hors hacs et ça fonctionne reste plus cas tester

[oli_34]

Dans hacs tu vas dans interface puis les trois petits points en haut à droite et dépôts personnalisés.

Puis dans depot tu mets le lien github puis la categorie lovelace puis ajouter.

[EgainMoney]

@Clooos

styles: |
  .switch-button {
    background-color: ${state === 'on' ? 'blue' : 'red'} !important;
  }

Tester et approuver même en Hexadécimal merci je continue a fouiller

[Auron007]

Salut.

Serait-il possible de mettre une image à la place d’une icone dans la horizontal-buttons-stack ?
Du moins pouvoir choisir icone ou image.

Merci de ton temps et de ton travail surtout car c’est top.

[spectre4094]

Hello,

Bravo pour ton taff.

Petite question, est-il possible d’avoir une carte titre avec les informations comme la carte Pop-up ?

Merci pour ton retour

[mrgrlscz]

Salut, possibilité de retirer complètement le bandeau supérieur d’un popup? Pas de nom OK pas d’icone OK mais il reste la croix pour fermer le popup, que je trouve superflue (en rouge sur l’image).

Seconde chose, comment on règle la taille du texte? Le code ci dessous ne change rien.

styles: |
  ha-card { 
    font-size: 4px;
  }

Et enfin, est-il possible de gérer le margin en vert sur le screen ci-dessous?

PS: Ce que tu as fait est monstrueux, c’est d’une fluidité… bravo.

[mrgrlscz]

Si ça intéresse quelqu’un, voici du code pour que le popup s’affiche automatiquement (en fonction de l’état d’une entité), mais uniquement sur desktop ou tablette, pas sur mobile.

type: vertical-stack
cards:
  # ------------------------------------------ mobile
  - type: conditional
    conditions:
      - condition: screen
        media_query: '(max-width: 767px)'
    card: &cctv_popup
      type: custom:bubble-pop-up
      hash: '#cctv'
      name: Caméras
      icon: mdi:cctv
      margin_top_desktop: 16px
      width_desktop: 720px
  # ------------------------------------------ desktop
  - type: conditional
    conditions:
      - condition: screen
        media_query: '(min-width: 768px)'
    card:
      <<: *cctv_popup
      trigger_entity: #### YOUR ENTITY ###
      trigger_state: 'on'
      trigger_close: true
  # ------------------------------------------ card
  - #### YOUR CARD ###

[barto_95]

J’ai un soucis avec la card et je ne comprend pas pourquoi :

il indique que la card n’existe pas pourtant elle et bien installer avec dans le fichier de config :

une indée ? reintallation de la card n’as pas résolue le problème

[Bigmat]

Salut,

J’ai le même problème, et j’ai aussi regardé côté Github mais pas de solution

Parfois ça marche en vidant le cache…

Et étonnant en WiFi, réseau local tout va bien… Mais en 4G j’ai aussi cette erreur…

[lportos54]

Hello ! Alors moi j’ai le problème mais que sur l’app … C’est à n’y rien comprendre … Sur le navigateur aucun problème, et quand je vais sur mon dashboard mobile via l’app j’ai une profusion d’encart rouge me disant « Custom élément doesn’t exist: bubble-pop-up. ».

J’ai tenté de vider le cache de l’app ça ne change rien.

[barto_95]

idem même problème

@Clooos as-t-on avis ?

[JeanJean]

J’ai aussi le bug, j’attends les options pour fix,
En attendant, est-ce qu’il serait possible d’avoir la possibilité de fermer la popup comme une modal ?

Exemple en vidéo

[mrgrlscz]

J’ai eu le même soucis, j’ai dû supprimer les données utilisateur de l’app Android. Et tout refaire (login / config des capteurs / widgets etc…).
C’est un peu pénible mais… Nickel depuis.

[JeanJean]

Hello @Clooos
Est-ce que tu avais vu ma suggestion plus haut et est-ce que tu penses que c’est faisable ?
Ça rendrait mon utilisation beaucoup plus fluide

Thx !

[Clooos]

Salut, ouep j’avais vu et c’est totalement dans mes plans depuis un bout de temps, mais j’ai tellement pris de temps sur la dernière version à corriger des bugs que j’ai jamais le temps de faire ça. Puis j’ai tellement de plans en tête

[JeanJean]

Ah top !
Oui oui je me doute que tu as une belle liste de courses, celui-ci sera vraiment top !
Courage

[Chakalis49]

Je viens d’acquérir un GOOGLE Nest Hub Max et qu’elle ne fût pas ma déception après avoir caster mon dashbord sur celui-ci que Bubble-card ne fonctionne pas. Erreur sur l’ensemble des cartes. Du coup obligé de faire une vue d’accueil pour switch rapidement selon ma plateforme et adapté mes vues pour différent appareils. Je me garde un espoir que peut être un jour cela pourrait être compatible

[Rouau]

Bonjour, je voudrais changer le look de mes détecteurs de mouvement avec bubble-card.
Aujourd’hui ils sont fait avec button-card.
Les problèmes que je rencontre :
Je n’arrive pas, comme avec button-card à voir depuis combien de temps le détecteur a changé de statut.
J’aimerais aussi mettre un peu de couleur quand ils sont en non détecté.
Est-il possible de faire ça avec bubble-card ?
Voici mon yaml:

type: custom:bubble-card
entity: binary_sensor.detecteur_de_mouvement_fibaro_1_motion_detection
name: garage 1
card_type: button
show_state: true
size: 8%
show_last_changed: true
styles:
  icon:
    - left: 25%
    - top: 5%
  name:
    - color: black
    - top: 12%
    - left: 5%
    - font-size: 100%
    - font-weight: bold
    - position: absolute
state:
  - value: 'on'
    color: red
    icon: mdi:motion-sensor
  - value: 'off'
    color: green
    icon: mdi:motion-sensor-off
icon: mdi:motion-sensor

[spectre4094]

Moi j’ai le problème sur mon Ipad mais pas sur mon Android.