Photos + indication

Bonjour,

J’aimerais pouvoir ajouter une photo de mes plantes dans l’icone actuelle qui ressemble à une feuille. Pourriez-vous m’indiquer comment faire, s’il vous plaît ? Je suis également preneur de toute suggestion pour améliorer l’aspect visuel :blush:

J’aimerais aussi afficher la date du dernier arrosage. Pourriez-vous m’aider à mettre cela en place ?

Je vous remercie par avance

Voici mon code actuel :

type: grid
columns: 1
square: false
cards:
  - type: custom:bubble-card
    card_type: button
    button_type: state
    entity: sensor.ficus_benjamina_soil_moisture
    name: Ficus Benjamina
    show_last_changed: true
    icon: mdi:leaf
    force_icon: true
    button_action: {}
    styles:
      icon:
        - width: 100px
        - height: 100px
        - border-radius: 50%
        - object-fit: cover
      card:
        - padding: 10px
        - background-color: rgba(255,255,255,0.8)
    sub_button:
      - show_state: true
        entity: sensor.ficus_benjamina_temperature
  - type: custom:bubble-card
    card_type: button
    button_type: state
    entity: sensor.monstera_deliciosa_soil_moisture
    name: Monstera Deliciosa
    show_last_changed: true
    icon: mdi:leaf
    force_icon: true
    button_action: {}
    styles:
      icon:
        - width: 100px
        - height: 100px
        - border-radius: 50%
        - object-fit: cover
      card:
        - padding: 10px
        - background-color: rgba(255,255,255,0.8)
    sub_button:
      - show_state: true
        entity: sensor.monstera_deliciosa_temperature
  - type: custom:bubble-card
    card_type: button
    button_type: state
    entity: sensor.dracaena_marginata_soil_moisture
    name: Dracaena Marginata
    show_last_changed: true
    icon: mdi:leaf
    force_icon: true
    button_action: {}
    styles:
      icon:
        - width: 100px
        - height: 100px
        - border-radius: 50%
        - object-fit: cover
      card:
        - padding: 10px
        - background-color: rgba(255,255,255,0.8)
    sub_button:
      - show_state: true
        entity: sensor.dracaena_marginata_temperature

Ma configuration


System Information

version core-2025.10.4
installation_type Home Assistant OS
dev false
hassio true
docker true
container_arch aarch64
user root
virtualenv false
python_version 3.13.7
os_name Linux
os_version 6.12.34-haos-raspi
arch aarch64
timezone Europe/Paris
config_dir /config
Home Assistant Community Store
GitHub API ok
GitHub Content ok
GitHub Web ok
HACS Data ok
GitHub API Calls Remaining 4993
Installed Version 2.0.5
Stage running
Available Repositories 2347
Downloaded Repositories 76
Solcast Solar
can_reach_server ok
Home Assistant Cloud
logged_in false
can_reach_cert_server ok
can_reach_cloud_auth ok
can_reach_cloud ok
Home Assistant Supervisor
host_os Home Assistant OS 16.2
update_channel stable
supervisor_version supervisor-2025.10.0
agent_version 1.7.2
docker_version 28.3.3
disk_total 57.9 GB
disk_used 12.2 GB
nameservers 192.168.1.254, 2001:861:2c30:920:46d4:54ff:fe8b:60b5
healthy true
supported true
host_connectivity true
supervisor_connectivity true
ntp_synchronized true
virtualization
board rpi5-64
supervisor_api ok
version_api ok
installed_addons Tailscale (0.26.1), Advanced SSH & Web Terminal (21.0.4), Samba share (12.5.4), Mosquitto broker (6.5.2), Zigbee2MQTT (2.6.2-1), Studio Code Server (5.19.3), Linky (1.6.1), Piper (1.6.4), Speech-to-Phrase (1.4.1), Matter Server (8.1.1)
Dashboards
dashboards 5
resources 64
views 6
mode storage
Network Configuration
adapters lo (disabled), end0 (enabled, default, auto), docker0 (disabled), hassio (disabled), veth1c8f90d (disabled), veth7d81f40 (disabled), vethb5e1092 (disabled), veth90fdaa2 (disabled), veth6f24d62 (disabled), vethdf96d21 (disabled), vethc602eb4 (disabled), vetha7d0fc6 (disabled), vetha489e0d (disabled), vethfb8e6a3 (disabled), veth061b8e9 (disabled), vethc42c9a7 (disabled)
ipv4_addresses lo (127.0.0.1/8), end0 (192.168.1.83/24), docker0 (172.30.232.1/23), hassio (172.30.32.1/23), veth1c8f90d (), veth7d81f40 (), vethb5e1092 (), veth90fdaa2 (), veth6f24d62 (), vethdf96d21 (), vethc602eb4 (), vetha7d0fc6 (), vetha489e0d (), vethfb8e6a3 (), veth061b8e9 (), vethc42c9a7 ()
ipv6_addresses lo (::1/128), end0 (2001:861:2c30:920:8743:81eb:6ac2:aec9/64, fe80::a089:eef5:6ae6:aa4c/64), docker0 (fe80::acec:5ff:fefe:39cd/64), hassio (fe80::40fc:b2ff:fe04:550e/64), veth1c8f90d (fe80::944a:6eff:fe22:67e/64), veth7d81f40 (fe80::f47a:50ff:fe3e:d457/64), vethb5e1092 (fe80::a496:f3ff:fe5c:81fc/64), veth90fdaa2 (fe80::c4ac:74ff:fe8d:ab49/64), veth6f24d62 (fe80::984d:68ff:fe32:4d0d/64), vethdf96d21 (fe80::6c8b:f6ff:feb2:5fa6/64), vethc602eb4 (fe80::f0c8:a6ff:fefa:91f5/64), vetha7d0fc6 (fe80::1846:25ff:fe26:1d89/64), vetha489e0d (fe80::8882:dcff:fea8:330f/64), vethfb8e6a3 (fe80::4024:76ff:fe6e:d1c7/64), veth061b8e9 (fe80::f0b3:aff:fedd:341d/64), vethc42c9a7 (fe80::b859:1ff:fe85:19e2/64)
announce_addresses 192.168.1.83, 2001:861:2c30:920:8743:81eb:6ac2:aec9, fe80::a089:eef5:6ae6:aa4c
Recorder
oldest_recorder_run 19 octobre 2025 à 20:56
current_recorder_run 31 octobre 2025 à 17:16
estimated_db_size 648.46 MiB
database_engine sqlite
database_version 3.49.2
___

Bonjour.

Dans la doc de cette carte on trouve cela pour un sub-button :

sub_button:
  - icon: none
styles: |-
  .bubble-sub-button-1 {
    background-image: url("/local/pictures/your_picture.jpg");
    background-size: cover;
  }

https://github.com/Clooos/bubble-card?tab=readme-ov-file#examples-8

2 « J'aime »

Slt.

Regarde du côté de la carte Mushroom Template, configuration par UI

Tu peux mettre photo et icone

image

1 « J'aime »

Merci pour ton retour, maintenant je vois la photo du ficus mais pas les deux autres une idée stp?

type: grid
columns: 1
square: false
cards:
  - type: custom:bubble-card
    card_type: button
    button_type: state
    entity: sensor.ficus_benjamina_soil_moisture
    name: Ficus Benjamina
    show_last_changed: true
    icon: mdi:blank
    force_icon: false
    button_action: {}
    card_mod:
      style: |
        ha-card .icon {
          background-image: url("/local/images/ficus.jpg");
          background-size: cover;
          background-position: center;
          width: 50px;
          height: 50px;
          border-radius: 50%;
          object-fit: cover;
        }
    styles:
      card:
        - padding: 10px
        - background-color: rgba(255,255,255,0.8)
    sub_button:
      - show_state: true
        entity: sensor.ficus_benjamina_temperature

  - type: custom:bubble-card
    card_type: button
    button_type: state
    entity: sensor.monstera_deliciosa_soil_moisture
    name: Monstera Deliciosa
    show_last_changed: true
    icon: mdi:blank
    force_icon: false
    button_action: {}
    card_mod:
      style: |
        ha-card .icon {
          background-image: url("/local/images/monstera.jpg");
          background-size: cover;
          background-position: center;
          width: 50px;
          height: 50px;
          border-radius: 50%;
          object-fit: cover;
        }
    styles:
      card:
        - padding: 10px
        - background-color: rgba(255,255,255,0.8)
    sub_button:
      - show_state: true
        entity: sensor.monstera_deliciosa_temperature

  - type: custom:bubble-card
    card_type: button
    button_type: state
    entity: sensor.dracaena_marginata_soil_moisture
    name: Dracaena Marginata
    show_last_changed: true
    icon: mdi:blank
    force_icon: false
    button_action: {}
    card_mod:
      style: |
        ha-card .icon {
          background-image: url("/local/images/dracaena.jpg");
          background-size: cover;
          background-position: center;
          width: 50px;
          height: 50px;
          border-radius: 50%;
          object-fit: cover;
        }
    styles:
      card:
        - padding: 10px
        - background-color: rgba(255,255,255,0.8)
    sub_button:
      - show_state: true
        entity: sensor.dracaena_marginata_temperature

Salut..

Regarde si tu vois par media, ou autre dans HA

Ou fait test sur une carte simple pas la grid …

1 « J'aime »

Vérifies bien l’extension.
jpg, jpeg :grinning_face:

1 « J'aime »

Toutes mes phtos sont dans le format JPG🙂

Format et extension de fichier sont deux choses différentes.

Je rejoins l’avis plus haut, regardes dans média que tu vois bien tes images.

1 « J'aime »

Bonjour,
vide le cache de ton navigateur ou cas ou.

Après, comme le mentionne @xTG :

Pas besoin de card_mod, bubble-card inclus sa propre modification de CSS avec styles.

1 « J'aime »

C’est tout bon, après un redémarrage complet les photos sont visibles :grinning_face:.

Merci à vous tous.

J’ai besoin encore de vous, j’aimerai quand je tape sur la carte ficus qu’il me donne cette indication :

### 🌿 **Entretien du Ficus benjamina**

1. **Lumière** :
Il aime la lumière vive mais indirecte.
Évite le soleil direct qui peut brûler ses feuilles.
Il tolère une lumière moyenne, mais sa croissance sera plus lente.
2. **Arrosage** :
 Arrose modérément : laisse sécher la couche supérieure du sol (environ 2-3 cm) entre deux arrosages.
En hiver, réduis la fréquence (environ toutes les 2-3 semaines selon l’humidité ambiante).
Attention à ne pas trop arroser : le ficus déteste avoir les racines dans l’eau stagnante.
3. **Humidité de l’air** :
Il apprécie une atmosphère légèrement humide.
Tu peux vaporiser ses feuilles ou placer un récipient d’eau à proximité pour augmenter l’humidité.
4. **Température** :
Idéalement entre **18°C et 24°C**.
Il n’aime pas les courants d’air ni les changements brusques de température.
5. **Engrais** :
Applique un engrais liquide pour plantes vertes tous les 15 jours au printemps et en été.
Pas besoin d’engrais en hiver.
6. **Rempotage** :
Tous les 2-3 ans, au printemps, dans un pot légèrement plus grand avec un bon terreau drainant.


### 💧 **Taux d’humidité idéal de la terre**

Le **taux d’humidité idéal** du sol pour un ficus benjamina se situe entre **40 % et 60 %**.

Pouvez vous me dire comment comment je pour faire ceci?

et ma deuxième demande concernant le ficus j’aimerai voir la date du dernière arrosage et je sais pas comment m’y prendre .

Je vous remercie d’avance pour votre aide .

réponse 1: un post it et un crayon a coté du Ficus… Voire un petit carnet avec ce mot en première page…

réponse 2: un pop up d’une carte markdown avec browser-mod

réponse 3: je crois que bubble card gère les pop_ups, mais je ne sais pas faire

Pour la date d’arrosage, pas de secret, il va falloir que tu « fasses un truc » avec home assistant:

  • appuyer sur un bouton du dashboard par exemple et stocker la date d’appui quelque part pour l’afficher… Pas sûr que ce soit vraiment pratique d’aller faire ça sur le dashboard.
  • dédier un bouton physique près de ta plante pour ça, puis faire pareil, stocker la date d’appui qqe part.

Enfin s’il faut dédier un bouton avec sa pile pour lancer ce type de scénario, autant partir sur un capteur dédié planté dans le sol: exemple de tuto:

2 « J'aime »

Pour ton aspect stockage de la date d’arrosage, un petit script de ce type:

alias: arrosage_ficus
description: stocke dans input_text.arrosage_ficus la date et l'heure d'execution du script
icon: mdi:check
sequence:
  - action: input_text.set_value
    metadata: {}
    data:
      value: "Dernier arrosage du ficus le {{ as_timestamp(now())|timestamp_custom('%d %B à %-H:%M') }}}"
    target:
      entity_id: input_text.arrosage_ficus

Si tu définit un input_text.arrosage_ficus

Il te suffit lors de l’appui sur un bouton (physique ou dashboard) d’appeler ce script pour changer le contenu de l’input text en « Dernier arrosage du Ficus le ‹ date du jour › à ‹ heure du moment › »

Tu peux alors afficher cet input text dans tes cartes…

2 « J'aime »

Ce sujet a été automatiquement fermé après 2 jours. Aucune réponse n’est permise dorénavant.