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

Bubble Card

Last commit Reddit Profile Buy me a beer

Salut tout le monde ! Bubble Card est une collection de cartes minimalistes pour Home Assistant qui a la particularité de proposer un tout nouveau genre de pop-up qui s’ouvre par le bas. Il y a pas mal de réglages disponibles et j’en ajoute très fréquemment, vous pouvez même changer le style de chaque cartes.

Pour l’instant, vous pouvez l’installer sur HACS en l’ajoutant en tant que dépôt personnalisé, vous recevrez des mises à jour et toutes les fonctionnalités de HACS.

Screenshots et fonctionnalités






:clapper: Vidéo (GIF) de Bubble Card

Les images ne sont plus 100% à jour mais ça n’a pas tant changé visuellement depuis.

Installation

Sans HACS

  1. Téléchargez ce fichier : bubble-card.js
  2. Ajoutez ce fichier dans votre dossier <config>/www
  3. Sur votre tableau de bord, cliquez sur l’icône en haut à droite, puis sur Modifier le tableau de bord
  4. Cliquez à nouveau sur cette icône, puis sur Gérer les ressources
  5. Cliquez sur Ajouter une ressource
  6. Copiez et collez ceci : /local/bubble-card.js?v=1
  7. Cliquez sur Module JavaScript, puis sur Créer
  8. Revenez en arrière et actualisez la page
  9. Vous pouvez maintenant cliquer sur Ajouter une carte dans le coin inférieur droit et rechercher Bubble Card
  10. Après chaque mise à jour du fichier, vous devrez modifier /local/bubble-card.js?v=1 et changer la version pour un nombre plus élevé

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

Bientôt disponible dans le dépôt par défaut de HACS (en attente de validation).

Configuration

La plupart des options peuvent être configurées dans l’éditeur visuel mais certaines cartes n’ont pas d’aperçu en temps réel (pour l’instant).

La configuration complète en YAML et toutes les infos sont dispo ici :

Si vous trouvez un bug ou si vous avez une demande de fonctionnalité, n’hésitez pas à ouvrir un « issue » (en anglais idéalement) sur :

Bon amusement ! :slightly_smiling_face:

11 « J'aime »

Salut,
Super présentation et ta carte est vraiment sympa. Bon boulot :+1:

2 « J'aime »

Super boulot bravo !!
J’ai vu également qu’un thème Bubble était disponible c’est top.
:slight_smile:

En parcourant ton git j’ai aussi vu ton travail sur mobile first.
Est ce que tu va harmoniser les 2 ou c’est vraiment 2 modèles différent ?

En tous cas encore bravo et merci :blush:

1 « J'aime »

Oui oui Mobile First va changer une fois que j’aurai fini d’y ajouter toutes les cartes qu’il me faut à Bubble Card, concrètement mon futur dashboard sera pratiquement basé intégralement sur Bubble Card à quelques exceptions prêt. Mais j’ai encore du boulot :stuck_out_tongue:

Ca ressemblera à ça plus ou moins mais pour l’instant mon dashboard est encore basé sur button-card.

3 « J'aime »

Ça donne envie en tout cas super projet!!!
Bravo

1 « J'aime »

Bj

Jolie travail, de la couleur …
Par contre un gros défaut , malgré un dev qui fait du beau boulot , rien en Français sur le git !!!

Pensé a ceux qui ne savent pas lire / comprendre l’anglais …
Et qui souhaite faire l’installe…
:grin: :grin:

googletrad est ton ami :yum:

Je suis curieux tu fais comment pour test tes modifications ?
Je voulais modifier un truc mais j’arrive pas à tester :sweat_smile:

C’est à dire ? Tu parles de la modification du style ?

Enfaite je voulais modifier un élément pour test.
Dans les buttons en ligne je voulais voir si je pouvais enlever le name dans le JS et tester ensuite.
Avant de faire une bêtise je voulais test sur mon serveur mais j’ai jamais de code sur HA :joy:

Je m’auto-cite mais je pense que c’est de ça que tu parles, HA garde le JS en cache même si tu le modifies, pour voir la modification tu dois juste changer le nombre après v=.

Ah oui ok je comprends. Merci je débute :slight_smile:

Haha, là c’est relativement peu connu j’ai l’impression, il m’a fallu un moment avant de trouver ça :stuck_out_tongue:

Oui c’est pas simple au début surtout avec mon anglais boiteux!!!
Je connais un peu le JS mais HA pas du tout ^^

salut @Clooos , quand je veut installée t’on intégration ,j’ai cette erreur la No manifest.json file found 'manifest.json'

A mon avis tu as mis comme catégorie Intégration et pas Lovelace quand tu as rajouté mon dépôt.

1 « J'aime »

Bonjour @Clooos,
compte tu implémenter un label ou custom field ( comme button-card ) dans bubble-card. Avoir la possibilité d’ajouter des entitées supplémentaire sur un button exemple.

exemple dans les encadrements rouge, avoir la possibilité de rajouter des infos. Genre, le linkquality du zigbee d’une ampoule, ou la consomation d’une ampoule …

exemple avec button-card
buttoncard exemple

Je comprend que c’est un projet de carte minimaliste mais je demande :slight_smile:

Oui c’est clairement dans mes plans de rajouter ça, j’ai déjà commencé à rajouter un bouton custom en YAML dans la beta 7 et je compte bien lui rajouter pas mal d’options ainsi qu’aux autres cartes :slight_smile: Là je ne vais pas savoir travailler dessus pendant quelques jours mais ça va venir ! :smiley:

Excellent :slight_smile:
Prends ton temps, je suis pas presser :wink:

est-il possible d’avoir pour un même bouton deux entity ?

exemple pour allumer l’ampoule entity interupteur physique, mais pour regler la luminositer entite de l’ampoule elle même (genre une ampoule hue) ?