Couleur Icone carte Mushroom Cover

zensomme_frederic · Mai 2, 2024, 1:30

Couleur icone suivant etat du volet

Bonjour

Besoin D’aide

Depuis plusieurs jours je galére Je suis debutant et agé Alors Indulgence.

Sur cette carte Cover j’ai reussi a modifier la couleur suivant etat du volet roulant Mais impossible de garder les fléches up and down Elle disparaissent

Comment faire ? Avez vous une idée?

Ma configuration

System Information

version	core-2024.4.3
installation_type	Home Assistant OS
dev	false
hassio	true
docker	true
user	root
virtualenv	false
python_version	3.12.2
os_name	Linux
os_version	6.1.73-haos-raspi
arch	aarch64
timezone	Europe/Paris
config_dir	/config

Home Assistant Community Store

GitHub API	ok
GitHub Content	ok
GitHub Web	ok
GitHub API Calls Remaining	5000
Installed Version	1.34.0
Stage	running
Available Repositories	1399
Downloaded Repositories	19
HACS Data	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 12.2
update_channel	stable
supervisor_version	supervisor-2024.04.4
agent_version	1.6.0
docker_version	25.0.5
disk_total	109.3 GB
disk_used	7.7 GB
healthy	true
supported	true
board	rpi4-64
supervisor_api	ok
version_api	ok
installed_addons	Terminal & SSH (9.13.0), Studio Code Server (5.15.0), Duck DNS (1.17.0), File editor (5.8.0), Home Assistant Google Drive Backup (0.112.1), Mosquitto broker (6.4.0), Zigbee2MQTT (1.36.1-1)

Dashboards

dashboards	6
resources	12
views	13
mode	storage

Recorder

oldest_recorder_run	22 avril 2024 à 14:28
current_recorder_run	1 mai 2024 à 17:30
estimated_db_size	25.63 MiB
database_engine	sqlite
database_version	3.44.2

type: custom:mushroom-cover-card
layout: horizontal
show_tilt_position_control: false
show_buttons_control: true
entity: cover.volet_pignon
name: Essai Volet Pignon
show_position_control: false
state_color: true
card_mod:
  style: |
    ha-card {
     --card-mod-icon: {{ 'mdi:window-shutter' if is_state('cover.volet_pignon', 'closed')
        else 'mdi:window-shutter-open' }};
     --card-mod-icon-color: {{ 'red' if is_state('cover.volet_pignon',
    'closed')
        else 'yellow' }};

        
      --card-mod-icon-open: 'mdi:arrow-up'; 

      --card-mod-icon-closed: 'mdi:arrow-down';  
        }

type: custom:mushroom-cover-card
layout: horizontal
show_tilt_position_control: false
show_buttons_control: true
entity: cover.volet_pignon
name: Essai Volet Pignon
show_position_control: false
state_color: true
card_mod:
style: |
ha-card {
–card-mod-icon: {{ ‹ mdi:window-shutter › if is_state(‹ cover.volet_pignon ›, ‹ closed ›)
else ‹ mdi:window-shutter-open › }};
–card-mod-icon-color: {{ ‹ red › if is_state(‹ cover.volet_pignon ›,
‹ closed ›)
else ‹ yellow › }};

  --card-mod-icon-open: 'mdi:arrow-up'; 

  --card-mod-icon-closed: 'mdi:arrow-down';  
    }

saisissez ou collez du code ici

WarC0zes · Mai 2, 2024, 1:32

Bonjour,
partage ton code voir ou tu en est ?

Cleya · Mai 2, 2024, 1:32

Bonjour,

Le copié-collé du code de la carte n’a manifestement pas bien fonctionné

WarC0zes · Mai 2, 2024, 1:34

il la rien mis en code, c’est la configue du systeme qui était mal copier.

Cleya · Mai 2, 2024, 1:36

Si, si il y avait un détail>/détail avant qu’il ne corrige son post.

WarC0zes · Mai 2, 2024, 1:38

c’est moi qui est corriger, le <détail> </détail> c’est des balises pour la configuration

Cleya · Mai 2, 2024, 1:39

Ah ben si maintenant tu corriges les posts, on va pas s’en sortir

Bon du coup il est parti… ça va être compliqué d’avancer

zensomme_frederic · Mai 2, 2024, 3:20

type: custom:mushroom-cover-card
layout: horizontal
show_tilt_position_control: false
show_buttons_control: true
entity: cover.volet_pignon
name: Essai Volet Pignon
show_position_control: false
state_color: true
card_mod:
  style: |
    ha-card {
     --card-mod-icon: {{ 'mdi:window-shutter' if is_state('cover.volet_pignon', 'closed')
        else 'mdi:window-shutter-open' }};
     --card-mod-icon-color: {{ 'red' if is_state('cover.volet_pignon',
    'closed')
        else 'yellow' }};

        
      --card-mod-icon-open: 'mdi:arrow-up'; 

      --card-mod-icon-closed: 'mdi:arrow-down';  
        }

saisissez ou collez du code ici

Cleya · Mai 2, 2024, 3:22

Peux-tu coller l’aspect visuel de ta carte ?

WarC0zes · Mai 2, 2024, 3:22

@Cleya non pas de button-card !

zensomme_frederic · Mai 2, 2024, 3:23

desolé Cest la premiere fois

type: custom:mushroom-cover-card
layout: horizontal
show_tilt_position_control: false
show_buttons_control: true
entity: cover.volet_pignon
name: Essai Volet Pignon
show_position_control: false
state_color: true
card_mod:
  style: |
    ha-card {
     --card-mod-icon: {{ 'mdi:window-shutter' if is_state('cover.volet_pignon', 'closed')
        else 'mdi:window-shutter-open' }};
     --card-mod-icon-color: {{ 'red' if is_state('cover.volet_pignon',
    'closed')
        else 'yellow' }};

        
      --card-mod-icon-open: 'mdi:arrow-up'; 

      --card-mod-icon-closed: 'mdi:arrow-down';  
        }

Cleya · Mai 2, 2024, 3:24

Une button-card avec 3 custom_fields et c’est réglé

WarC0zes · Mai 2, 2024, 3:25

je t’es fais un exemple pour l’icone:

type: custom:mushroom-cover-card
layout: horizontal
show_tilt_position_control: false
show_buttons_control: true
entity: cover.volet_pignon
name: Essai Volet Pignon
show_position_control: false
state_color: true
card_mod:
  style: |
    ha-card {
       {%  if is_state('cover.volet_pignon', 'closed') %}
        --card-mod-icon: mdi:window-shutter;
       {% else %}
        --card-mod-icon: mdi:window-shutter-open;
       {% endif %}
    }

pour mushroom ta ce post avec des exemple de modification pour toutes les cartes mushroom

zensomme_frederic · Mai 2, 2024, 3:29

BBE · Mai 2, 2024, 3:38

Peut être laisser les cartes mushroom pour ce qu’elles sont, des cartes faciles à utiliser au travers de l’interface, idéales pour débuter…

Et pour cardmod, bien étudier le lien envoyé par @WarC0zes :

pour la couleur des boutons de la carte cover, la syntaxe c’est:

card_mod:
  style:
    mushroom-cover-buttons-control$:
      mushroom-button:nth-child(1)$: |
        .button ::slotted(*) {
          --card-mod-icon-color: orange;
        }
    mushroom-button$: |
      .button  ::slotted(*) {
        --card-mod-icon-color: orange;
      }

Cleya · Mai 2, 2024, 3:46

Sinon, avec trois boutons (Up, Stop, Down) :

Il faut que je trouve des images en fonction du pourcentage d’ouverture pour mettre à gauche.

zensomme_frederic · Mai 2, 2024, 3:51

vous avez un exemple ?

WarC0zes · Mai 2, 2024, 3:53

WarC0zes:

je t’es fais un exemple pour l’icone:

type: custom:mushroom-cover-card
layout: horizontal
show_tilt_position_control: false
show_buttons_control: true
entity: cover.volet_pignon
name: Essai Volet Pignon
show_position_control: false
state_color: true
card_mod:
  style: |
    ha-card {
       {%  if is_state('cover.volet_pignon', 'closed') %}
        --card-mod-icon: mdi:window-shutter;
       {% else %}
        --card-mod-icon: mdi:window-shutter-open;
       {% endif %}
    }

BBE:

card_mod:
  style:
    mushroom-cover-buttons-control$:
      mushroom-button:nth-child(1)$: |
        .button ::slotted(*) {
          --card-mod-icon-color: orange;
        }
    mushroom-button$: |
      .button  ::slotted(*) {
        --card-mod-icon-color: orange;
      }

C’est pas des exemples ?

zensomme_frederic · Mai 2, 2024, 3:58

ah desolé Pas vu
jai vraiment pas lhabitude du forum
ou cest l’age !!!

WarC0zes · Mai 2, 2024, 4:00

on ta mis un lien moi et @BBE , pour avoir plein d’exemple de code pour card_mod avec la carte mushroom.