Modifier couleur de fond + ajouter cadre et déplacer titre

romu044 · Mai 2, 2024, 12:48

Bonjour,

Grace au forum, j’ai réussi à créer une gestion d’arrosage on, off et auto avec modification de la durée (merci de votre patience )
Maintenant j’en suis au dashboard, je suis arrivé à cela :

Mais je n’arrive pas à modifier la couleur de fond et ou faire un cadre et déplacer le nom de la carte.
J’ai lu pas mal de post à ce sujet mais sans résultat, j’ai ajouté

card_mod:	
  style: |
        ha-card {
          background-color: rgba(50,50,50,0.7)
        }

Mais cela ne change rien.
Voici le code de ma carte :

square: false
type: grid
cards:
  - type: custom:auto-entities
    show_empty: false
    card:
      type: custom:mushroom-chips-card
      view_layout:
        grid-area: chips
      alignment: center
    card_param: chips
    filter:
      template: >
        {% set ns = namespace(select=[],entity="input_select.relai_1") %} {% for
        opt in state_attr(ns.entity, 'options') %}
          {% set icon = iif(opt== 'on', 'mdi:power-on', icon) %}
          {% set icon = iif(opt== 'off', 'mdi:power-off', icon) %}
          {% set icon = iif(opt== 'auto', 'mdi:water-sync', icon) %}
          {% set ns.select = ns.select + [
            {
              "type": "template",
              "icon": icon,
              "entity": ns.entity,
              "icon_color": '{{ iif(is_state("input_select.relai_1", "' ~ opt ~ '"), "red", "disabled") }}',
              "tap_action": {
                "action": "call-service",
                "service": "input_select.select_option",
                "service_data": {
                  "entity_id": ns.entity,
                  "option": opt
                }
              },
              "card_mod": {
                "style": 'ha-card {
                    {% if is_state( "' ~ ns.entity ~ '" , "' ~ opt ~ '" ) %}
                       --chip-background: rgba(var(--mush-rgb-state-entity), 0.3);
                    {% else %}
                      --chip-background: rgba(var(--rgb-grey), 0.1);
                    {% endif %}
                  }'
              }
            }
          ] %}
        {% endfor %} {{ ns.select }}
  - square: false
    type: grid
    cards:
      - type: custom:mushroom-entity-card
        entity: input_number.arrosage_p1_v1
        layout: horizontal
      - type: custom:mushroom-entity-card
        entity: timer.minuteur
        state_color: true
    columns: 2
columns: 1
title: Tomates

Déjà est-ce possible et si oui comment.

Merci d’avance

Cleya · Mai 2, 2024, 12:55

Je saurai comment le faire avec custom:button-card mais pas avec des cartes mushroom et card_mod.

Faut voir avec @WarC0zes ou @Herbs

WarC0zes · Mai 2, 2024, 1:27

Bonjour,
tu trouvera ton bonheur sur ce post:

romu044 · Mai 3, 2024, 9:21

Bonjour @WarC0zes ,

Oui j’ai vu ce post, mais cela ne change rien, j’ai testé avec :

type: custom:mushroom-chips-card
card_mod:
  style: |
    ha-card {
      --chip-background: blue;
    }

et avec :

card_mod:	
  style: |
        ha-card {
          background-color: rgba(50,50,50,0.7)
        }
mais le fond de la carte ne change pas de couleur

WarC0zes · Mai 3, 2024, 9:26

tu utilise auto-entities, il doit avoir un problème de configuration.

Herbs · Mai 3, 2024, 12:07

Salut @romu044

J’ai repris le code de ta carte, en mettant mes entités, en modifiant les couleurs de background des « chips » pour que ce soit plus « voyant ».

code

square: false
type: grid
cards:
  - type: custom:auto-entities
    show_empty: false
    card:
      type: custom:mushroom-chips-card
      view_layout:
        grid-area: chips
      alignment: center
    card_param: chips
    filter:
      template: >
        {% set ns = namespace(select=[],entity="input_select.presence_mode") %}
        {% for opt in state_attr(ns.entity, 'options') %}
          {% set icon = iif(opt== 'home', 'mdi:power-on', icon) %}
          {% set icon = iif(opt== 'back', 'mdi:power-off', icon) %}
          {% set icon = iif(opt== 'absent', 'mdi:water-sync', icon) %}
          {% set ns.select = ns.select + [
            {
              "type": "template",
              "icon": icon,
              "entity": ns.entity,
              "icon_color": '{{ iif(is_state("input_select.relai_1", "' ~ opt ~ '"), "red", "disabled") }}',
              "tap_action": {
                "action": "call-service",
                "service": "input_select.select_option",
                "service_data": {
                  "entity_id": ns.entity,
                  "option": opt
                }
              },
              "card_mod": {
                "style": 'ha-card {
                    {% if is_state( "' ~ ns.entity ~ '" , "' ~ opt ~ '" ) %}
                       --chip-background: rgba(0,0,255,0.5);
                    {% else %}
                      --chip-background: rgba(0,255,0,0.5);
                    {% endif %}
                  }'
              }          
            }
          ] %}
        {% endfor %} {{ ns.select }}
  - square: false
    type: grid
    cards:
      - type: custom:mushroom-entity-card
        entity: input_number.bw_print_count
        layout: horizontal
      - type: custom:mushroom-entity-card
        entity: input_number.color_print_count
        state_color: true
    columns: 2
columns: 1
title: Tomates

Je ne crois pas avoir fait de modif du code de base

peek

romu044 · Mai 3, 2024, 12:32

Merci Messieurs, désolé je pense que je me suis mal exprimé, en fait c’est le fond noir de la carte que j’aimerais modifier :
peek

en fait le fond noir de carte qui se trouve derrière les cartes BW count , Color Count et les trois boutons ainsi que derrière Tomates

Herbs · Mai 3, 2024, 1:38

Ok,

Bon voilà un bout de code, un peu beaucoup moche, mais c’est pour l’exemple

type: custom:mod-card
card_mod:
  style:
    .: |
      ha-card {
        background: coral;
      }
card: 
  type: grid
  square: false
  cards:
    - type: custom:auto-entities
      show_empty: false
      card:
        type: custom:mushroom-chips-card
        view_layout:
          grid-area: chips
        alignment: center
      card_param: chips
      filter:
        template: >
          {% set ns = namespace(select=[],entity="input_select.presence_mode") %}
          {% for opt in state_attr(ns.entity, 'options') %}
            {% set icon = iif(opt== 'home', 'mdi:power-on', icon) %}
            {% set icon = iif(opt== 'back', 'mdi:power-off', icon) %}
            {% set icon = iif(opt== 'absent', 'mdi:water-sync', icon) %}
            {% set ns.select = ns.select + [
              {
                "type": "template",
                "icon": icon,
                "entity": ns.entity,
                "icon_color": '{{ iif(is_state("input_select.relai_1", "' ~ opt ~ '"), "red", "disabled") }}',
                "tap_action": {
                  "action": "call-service",
                  "service": "input_select.select_option",
                  "service_data": {
                    "entity_id": ns.entity,
                    "option": opt
                  }
                },
                "card_mod": {
                  "style": 'ha-card {
                      {% if is_state( "' ~ ns.entity ~ '" , "' ~ opt ~ '" ) %}
                         --chip-background: rgba(0,0,255,0.5);
                      {% else %}
                        --chip-background: rgba(0,255,0,0.5);
                      {% endif %}
                    }'
                }          
              }
            ] %}
          {% endfor %} {{ ns.select }}
    - square: false
      type: grid
      cards:
        - type: custom:mushroom-entity-card
          entity: input_number.bw_print_count
          layout: horizontal
        - type: custom:mushroom-entity-card
          entity: input_number.color_print_count
          state_color: true
      columns: 2
  columns: 1
  title: Tomates

romu044 · Mai 3, 2024, 1:49

Ah bien, mais moche je confirme

C’est ok, j’ai tenté de l’appliquer sur les 2 cartes de la grille du bas, mais sans succès :

    - square: false
      type: grid
      cards:
        - type: custom:mushroom-entity-card
          style: |
            ha-card {
              background-color: red;
            }
          entity: input_number.bw_print_count
          layout: horizontal
        - type: custom:mushroom-entity-card
          style: |
            ha-card {
              background-color: green;
            }
          entity: input_number.color_print_count
          state_color: true
      columns: 2
  columns: 1
  title: Tomates

rouge pour BW Count
vert pour Color count

Herbs · Mai 3, 2024, 1:52

il te manque un « morceau » à chaque fois

  style:

Doit toujours être précédé de card_mod

card_mod:
  style:

type: custom:mod-card
card_mod:
  style:
    .: |
      ha-card {
        background: coral;
      }
card:
  type: grid
  square: false
  cards:
    - type: custom:auto-entities
      show_empty: false
      card:
        type: custom:mushroom-chips-card
        view_layout:
          grid-area: chips
        alignment: center
      card_param: chips
      filter:
        template: >
          {% set ns = namespace(select=[],entity="input_select.presence_mode")
          %} {% for opt in state_attr(ns.entity, 'options') %}
            {% set icon = iif(opt== 'home', 'mdi:power-on', icon) %}
            {% set icon = iif(opt== 'back', 'mdi:power-off', icon) %}
            {% set icon = iif(opt== 'absent', 'mdi:water-sync', icon) %}
            {% set ns.select = ns.select + [
              {
                "type": "template",
                "icon": icon,
                "entity": ns.entity,
                "icon_color": '{{ iif(is_state("input_select.relai_1", "' ~ opt ~ '"), "red", "disabled") }}',
                "tap_action": {
                  "action": "call-service",
                  "service": "input_select.select_option",
                  "service_data": {
                    "entity_id": ns.entity,
                    "option": opt
                  }
                },
                "card_mod": {
                  "style": 'ha-card {
                      {% if is_state( "' ~ ns.entity ~ '" , "' ~ opt ~ '" ) %}
                         --chip-background: rgba(0,0,255,0.5);
                      {% else %}
                        --chip-background: rgba(0,255,0,0.5);
                      {% endif %}
                    }'
                }          
              }
            ] %}
          {% endfor %} {{ ns.select }}
    - square: false
      type: grid
      cards:
        - type: custom:mushroom-entity-card
          entity: input_number.bw_print_count
          layout: horizontal
          card_mod:
            style: |
              ha-card {
                background-color: red;
              }          
        - type: custom:mushroom-entity-card
          entity: input_number.color_print_count
          state_color: true
          card_mod:
            style: |
              ha-card {
                background-color: green;
              }             
      columns: 2
  columns: 1
  title: Tomates

C’est toujours moche

romu044 · Mai 3, 2024, 1:57

ahhh quelle buse, merci @Herbs, le code je n’y arriverais jamais, même le Basic j’avais du mal

Pas facile la transition en Jeedom et HA, mais je ne vais pas lâcher prise grâce à la communauté.

Herbs · Mai 3, 2024, 1:59

Non, je ne pense pas, t’es déjà sur un cas d’usage pas mal avancé et tu avais déjà 90% de la réponse.

Si on peut aider, ce sera sans problème

Cleya · Mai 3, 2024, 2:41

Mais c’est quand même vraiment très moche

Herbs · Mai 3, 2024, 4:07

J’adore mettre des couleurs bien moches pour la mise au point, ça permet de voir direct où et comment tu tapes.

Mais là, je crois que je me suis surpassé

Cleya · Mai 3, 2024, 4:19

C’est clair, ça pique les yeux là Puis en terme de mise au point… Faudrait penser à consulter un ophtalmo (ou alors moi) car là je ne vois absolument pas ce qu’il y a dans le premier cercle bleu violacé par la colère

romu044 · Mai 4, 2024, 4:03

dernières petites choses, j’ai réussi à modifier la taille de la police de BW count, 498 p, Color Count et 519 p, mais je n’ai pas trouvé pour Tomates.
J’ai aussi testé pas mal de chose pour augmenter la taille des 3 icones mais sans succès.

Cleya · Mai 4, 2024, 4:06

Si tu veux une carte basée sur du custom:button-card fais-moi un signe

romu044 · Mai 4, 2024, 4:33

Bonjour @Cleya , désolé mais je ne comprends pas ta réponse.

Cleya · Mai 4, 2024, 4:36

Je disais que si tu voulais une carte complétement paramétrable, il faudrait passer par une carte basée sur du custom:button-card et pas sur du mushroom avec du card_mod.

romu044 · Mai 4, 2024, 4:53

en fait suite à la création de mon input_select je voulais reproduire ce que j’ai actuellement sur jeedom :

Mais apparemment les boutons 3 positions ne sont pas gérés dans HA.
Grâce à un post sur lequel j’ai demandé de l’aide :
Tile card pour input select
j’ai pu créer un speudo bouton 3 positions, j’ai même toujours avec l’aide du forum ajouter le choix de la durée avec minuteur, pour le type de carte j’ai choisi grille et après j’ai collé des morceaux de yaml, après c’est au dela de mes compétences