Mushroom-entity-card changer le background d'une icone entity_picture

[WarC0zes]

Bonjour,
j’ai mis un background de couleur différente sous l’icone ( icone soleil ( mode nuit) ). Mais si j’utilise une icone ( .png ) avec l’option icon_type: entity-picture, je n’est pas ce background ( icone lune ).

Auriez vous une solution pour avoir le background sous une icone en entity-picture ?

  - type: custom:mushroom-entity-card
    entity: sun.sun
    primary_info: none
    secondary_info: none
    fill_container: false
    tap_action:
      action: more-info
    card_mod:
      style: |
        :host {
          --mush-badge-icon-size: 1.7em;
          --mush-icon-symbol-size: 1.4em;
          --mush-icon-size: 1.6em;
        }
        ha-card {
          background: none;
          margin-top: 15px;
          margin-left: -11px;
        }
        mushroom-shape-icon{
          --icon-color: darkgrey !important;        
          --shape-color: rgba(32,32,32,0.9) !important;
        }        
  - type: custom:mushroom-entity-card
    entity: sensor.lune
    primary_info: none
    secondary_info: none
    icon_type: entity-picture
    fill_container: false
    tap_action:
      action: more-info
    card_mod:
      style: |
        :host {
          --mush-badge-icon-size: 1.7em;
          --mush-icon-symbol-size: 1.4em;
          --mush-icon-size: 1.8em;
        }
        ha-card {
          background: none;
          margin-top: 20px;
          margin-left: -5px;
        }
        mushroom-shape-icon{
          --shape-color: rgba(32,32,32,0.9) !important;
        }

Le rendu final que je voudrais mais avec des icones entity_picture.

[anon41081891]

Bonjour WarC0zes,

Tu n’y arriverais pas avec des « button-card » ?

J’ai une carte avec des icônes en .png (mais en background-image sur custom_field) sur un fond en .png aussi.

Les icônes en .png doivent pouvoir être utilisées en tant qu’entity-picture.

type: custom:mod-card
card:
  type: custom:layout-card
  layout_type: vertical
  cards:
    - type: custom:button-card
      aspect_ratio: 2/1
      custom_fields:
        fond:
          card:
            type: custom:button-card
            name: Maison
            styles:
              name:
                - font-size: 24px
                - font-weight: bold
                - color: rgba(0,0,0,1.0)
                - justify-self: start
                - padding-left: 5%
              card:
                - background-color: rgba(255,255,255,0.0)
            tap_action:
              action: none
            hold_action:
              action: none
            style: |
              ha-card {
                box-shadow: none;
                border: none;
              }
        ngarage:
          card:
            type: custom:button-card
            name: Garage
            styles:
              name:
                - font-size: 16px
                - font-weight: bold
                - color: rgba(0,0,0,0.6)
              card:
                - background-color: rgba(255,255,255,0.0)
            tap_action:
              action: none
            hold_action:
              action: none
            style: |
              ha-card {
                box-shadow: none;
                border: none;
              }
        garage:
          card:
            type: custom:button-card
            aspect_ratio: 5/2.4
            show_icon: false
            name: |
              [[[
                if (states['binary_sensor.garage_detecteur_d_ouverture_porte_du_garage_fermee_contact'].state == 'off' && states['binary_sensor.garage_detecteur_d_ouverture_porte_du_garage_ouverte_contact'].state == 'on')
                  return "(fermé)";
                else if (states['binary_sensor.garage_detecteur_d_ouverture_porte_du_garage_fermee_contact'].state == 'on' && states['binary_sensor.garage_detecteur_d_ouverture_porte_du_garage_ouverte_contact'].state == 'off')
                  return "(ouvert)";
                else if (states['binary_sensor.garage_detecteur_d_ouverture_porte_du_garage_fermee_contact'].state == 'on' && states['binary_sensor.garage_detecteur_d_ouverture_porte_du_garage_ouverte_contact'].state == 'on' && states['binary_sensor.garage_detecteur_de_vibrations_porte_vibration'].state == 'on')
                  return "(en mouvement)";
                else if (states['binary_sensor.garage_detecteur_d_ouverture_porte_du_garage_fermee_contact'].state == 'on' && states['binary_sensor.garage_detecteur_d_ouverture_porte_du_garage_ouverte_contact'].state == 'on' && states['binary_sensor.garage_detecteur_de_vibrations_porte_vibration'].state == 'off')
                  return "(partiellement ouvert)";
              ]]]
            styles:
              name:
                - font-size: 16px
                - font-weight: bold
                - align-self: start
                - color: |
                    [[[
                      if (states['binary_sensor.garage_detecteur_d_ouverture_porte_du_garage_fermee_contact'].state == 'off' && states['binary_sensor.garage_detecteur_d_ouverture_porte_du_garage_ouverte_contact'].state == 'on')
                        return 'rgba(0,128,0,0.7)';
                      else if (states['binary_sensor.garage_detecteur_d_ouverture_porte_du_garage_fermee_contact'].state == 'on' && states['binary_sensor.garage_detecteur_d_ouverture_porte_du_garage_ouverte_contact'].state == 'off')
                        return 'rgba(255,0,0,0.7)';
                      else if (states['binary_sensor.garage_detecteur_d_ouverture_porte_du_garage_fermee_contact'].state == 'on' && states['binary_sensor.garage_detecteur_d_ouverture_porte_du_garage_ouverte_contact'].state == 'on' && states['binary_sensor.garage_detecteur_de_vibrations_porte_vibration'].state == 'on')
                        return 'rgba(255,140,0,0.7)';
                      else if (states['binary_sensor.garage_detecteur_d_ouverture_porte_du_garage_fermee_contact'].state == 'on' && states['binary_sensor.garage_detecteur_d_ouverture_porte_du_garage_ouverte_contact'].state == 'on' && states['binary_sensor.garage_detecteur_de_vibrations_porte_vibration'].state == 'off')
                        return 'rgba(255,140,0,0.7)';
                    ]]]
                - animation: |
                    [[[
                      if (states['binary_sensor.garage_detecteur_d_ouverture_porte_du_garage_fermee_contact'].state == 'on' && states['binary_sensor.garage_detecteur_d_ouverture_porte_du_garage_ouverte_contact'].state == 'off')
                        return 'blink 2s ease infinite';
                      else if (states['binary_sensor.garage_detecteur_d_ouverture_porte_du_garage_fermee_contact'].state == 'on' && states['binary_sensor.garage_detecteur_d_ouverture_porte_du_garage_ouverte_contact'].state == 'on' && states['binary_sensor.garage_detecteur_de_vibrations_porte_vibration'].state == 'on')
                        return 'blink 2s ease infinite';
                    ]]]
              card:
                - background-color: rgba(255,255,255,0.5)
            tap_action:
              action: none
            hold_action:
              action: none
        nportail:
          card:
            type: custom:button-card
            name: Portail
            styles:
              name:
                - font-size: 16px
                - font-weight: bold
                - color: rgba(0,0,0,0.6)
              card:
                - background-color: rgba(255,255,255,0.0)
            tap_action:
              action: none
            hold_action:
              action: none
            style: |
              ha-card {
                box-shadow: none;
                border: none;
              }
        portail:
          card:
            type: custom:button-card
            aspect_ratio: 5/2.4
            show_icon: false
            name: |
              [[[
                if (states['binary_sensor.maison_detecteur_de_fermeture_portail_contact'].state == 'off' && states['binary_sensor.maison_detecteur_d_ouverture_battant_gauche_portail_contact'].state == 'on')
                  return "(fermé)";
                else if (states['binary_sensor.maison_detecteur_de_fermeture_portail_contact'].state == 'on' && states['binary_sensor.maison_detecteur_d_ouverture_battant_gauche_portail_contact'].state == 'off')
                  return "(ouvert)";
                else if (states['binary_sensor.maison_detecteur_de_fermeture_portail_contact'].state == 'on' && states['binary_sensor.maison_detecteur_d_ouverture_battant_gauche_portail_contact'].state == 'on')
                  return "(en mouvement)";
              ]]]
            styles:
              name:
                - font-size: 16px
                - font-weight: bold
                - align-self: start
                - color: |
                    [[[
                      if (states['binary_sensor.maison_detecteur_de_fermeture_portail_contact'].state == 'off' && states['binary_sensor.maison_detecteur_d_ouverture_battant_gauche_portail_contact'].state == 'on')
                        return 'rgba(0,128,0,0.7)';
                      else if (states['binary_sensor.maison_detecteur_de_fermeture_portail_contact'].state == 'on' && states['binary_sensor.maison_detecteur_d_ouverture_battant_gauche_portail_contact'].state == 'off')
                        return 'rgba(255,0,0,0.7)';
                      else if (states['binary_sensor.maison_detecteur_de_fermeture_portail_contact'].state == 'on' && states['binary_sensor.maison_detecteur_d_ouverture_battant_gauche_portail_contact'].state == 'on')
                        return 'rgba(255,140,0,0.7)';
                    ]]]                
                - animation: |
                    [[[
                      if (states['binary_sensor.maison_detecteur_de_fermeture_portail_contact'].state == 'on' && states['binary_sensor.maison_detecteur_d_ouverture_battant_gauche_portail_contact'].state == 'off')
                        return 'blink 2s ease infinite';
                      else if (states['binary_sensor.maison_detecteur_de_fermeture_portail_contact'].state == 'on' && states['binary_sensor.maison_detecteur_d_ouverture_battant_gauche_portail_contact'].state == 'on')
                        return 'blink 2s ease infinite';
                    ]]]
              card:
                - background-color: rgba(255,255,255,0.5)
            tap_action:
              action: none
            hold_action:
              action: none
        nlampe:
          card:
            type: custom:button-card
            name: Lampe extérieure
            styles:
              name:
                - font-size: 12px
                - font-weight: bold
                - color: rgba(0,0,0,0.6)
              card:
                - background-color: rgba(255,255,255,0.0)
            tap_action:
              action: none
            hold_action:
              action: none
            style: |
              ha-card {
                box-shadow: none;
                border: none;
              }
        lampe:
          card:
            type: custom:button-card
            entity: light.entree_lampe_exterieure
            icon: phu:wall-fuzo
            show_name: false
            state:
              - value: 'off'
                styles:
                  icon:
                    - color: Dimgray
                  card:
                    - box-shadow: none
                    - background-color: rgba(242,242,242,0.5)
              - value: 'on'
                styles:
                  icon:
                    - color: rgb(255,255,128)
                  card:
                    - box-shadow: 0px 0px 6px 3px rgba(255,255,128,0.8)
                    - background-color: rgba(105,105,105,0.5)
        nyann:
          card:
            type: custom:button-card
            name: Yannick
            styles:
              name:
                - font-size: 12px
                - font-weight: bold
                - color: rgba(0,0,0,0.6)
              card:
                - background-color: rgba(255,255,255,0.0)
            tap_action:
              action: none
            hold_action:
              action: none
            style: |
              ha-card {
                box-shadow: none;
                border: none;
              }
        yann:
          card:
            type: custom:button-card
            aspect_ratio: 1/1
            size: 100%
            entity: person.yannick
            show_icon: false
            show_entity_picture: true
            show_name: false
            styles:
              card:
                - border-radius: 50%
                - background-color: rgba(255,255,255,0.5)
            state:
              - value: home
                entity_picture: /local/images/homme.png
                styles:
                  entity_picture:
                    - opacity: 0.8
              - value: not_home
                entity_picture: /local/images/homme_grise.png
                styles:
                  entity_picture:
                    - opacity: 0.4
        nvero:
          card:
            type: custom:button-card
            name: Véronique
            styles:
              name:
                - font-size: 12px
                - font-weight: bold
                - color: rgba(0,0,0,0.6)
              card:
                - background-color: rgba(255,255,255,0.0)
            tap_action:
              action: none
            hold_action:
              action: none
            style: |
              ha-card {
                box-shadow: none;
                border: none;
              }
        vero:
          card:
            type: custom:button-card
            aspect_ratio: 1/1
            size: 90%
            entity: person.veronique
            show_icon: false
            show_entity_picture: true
            show_name: false
            styles:
              card:
                - border-radius: 50%
                - background-color: rgba(255,255,255,0.5)
            state:
              - value: home
                entity_picture: /local/images/femme.png
                styles:
                  entity_picture:
                    - opacity: 0.8
              - value: not_home
                entity_picture: /local/images/femme_grisee.png
                styles:
                  entity_picture:
                    - opacity: 0.4
        garageup:
          card:
            type: custom:button-card
            show_name: false
            styles:
              card:
                - background-color: rgba(255,255,255,0.0)
                - background-image: url(/local/images/ouvrir_garage.png)
                - background-size: cover
                - height: 35px
                - width: 35px
                - border-radius: 20%
            tap_action:
              action: call-service
              service: script.ouvrir_garage
        garagestop:
          card:
            type: custom:button-card
            show_name: false
            styles:
              card:
                - background-color: rgba(255,255,255,0.0)
                - background-image: url(/local/images/stopper_garage.png)
                - background-size: cover
                - height: 35px
                - width: 35px
                - border-radius: 20%
            tap_action:
              action: call-service
              service: script.stopper_garage
        garagedown:
          card:
            type: custom:button-card
            show_name: false
            styles:
              card:
                - background-color: rgba(255,255,255,0.0)
                - background-image: url(/local/images/fermer_garage.png)
                - background-size: cover
                - height: 35px
                - width: 35px
                - border-radius: 20%
            tap_action:
              action: call-service
              service: script.fermer_garage
        port_open:
          card:
            type: custom:button-card
            show_name: false
            styles:
              card:
                - background-color: rgba(255,255,255,0.0)
                - background-image: url(/local/images/ouvrir_portail.png)
                - background-size: cover
                - height: 40px
                - width: 40px
                - border-radius: 20%
            tap_action:
              action: call-service
              service: script.ouvrir_portail
        port_close:
          card:
            type: custom:button-card
            show_name: false
            styles:
              card:
                - background-color: rgba(255,255,255,0.0)
                - background-image: url(/local/images/fermer_portail.png)
                - background-size: cover
                - height: 40px
                - width: 40px
                - border-radius: 20%
            tap_action:
              action: call-service
              service: script.fermer_portail
      styles:
        custom_fields:
          fond:
            - background-image: url(/local/images/maison.png)
            - position: absolute
            - left: 0
            - top: 0
            - width: 100%
            - height: 100%
            - background-size: cover
            - background-position: center
            - opacity: 0.7
          ngarage:
            - width: 15%
            - position: absolute
            - left: 38%
            - top: 10%
          garage:
            - width: 40%
            - position: absolute
            - left: 57%
            - top: 8%
          nportail:
            - width: 15%
            - position: absolute
            - left: 38%
            - top: 55%
          portail:
            - width: 40%
            - position: absolute
            - left: 57%
            - top: 53%
          nlampe:
            - width: 30%
            - position: absolute
            - left: 2.5%
            - top: 25%
          lampe:
            - width: 15%
            - position: absolute
            - left: 10%
            - top: 35%
          garageup:
            - width: 15%
            - position: absolute
            - left: 61%
            - top: 26%
          garagestop:
            - width: 15%
            - position: absolute
            - left: 73.5%
            - top: 26%
          garagedown:
            - width: 15%
            - position: absolute
            - left: 86%
            - top: 26%
          port_open:
            - width: 15%
            - position: absolute
            - left: 63%
            - top: 68%
          port_close:
            - width: 15%
            - position: absolute
            - left: 82%
            - top: 68%
          nyann:
            - width: 18%
            - position: absolute
            - left: 2%
            - top: 62%
          yann:
            - border-radius: 50%
            - width: 12%
            - position: absolute
            - left: 5%
            - top: 70%
          nvero:
            - width: 18%
            - position: absolute
            - left: 17%
            - top: 62%
          vero:
            - border-radius: 50%
            - width: 12%
            - position: absolute
            - left: 20%
            - top: 70%

[WarC0zes]

Ca doit être fesable avec button-card, mais j’ai une ligne avec des carte mushroom, j’aurais bien garder la même carte. Si personne a une solution, je passerai a button-card.

[WarC0zes]

Bonjour,
n’ayant pas eu de proposition appart utiliser button-card, chose que j’ai faite au final.

            - type: custom:button-card
              entity: sun.sun
              aspect_ratio: 1/1
              show_entity_picture: true
              show_name: false
              size: 115%
              styles:
                card:
                  - '--mdc-ripple-color': none
                  - height: 37px
                  - width: 37px
                  - top: 27px
                  - left: 1px
                icon:
                  - margin-top: 0.5px
                  - margin-left: 1.5px
              card_mod:
                style: |
                  ha-card {
                    background: rgba(32,32,32,0.9) !important;
                    border-radius: 60px !important;
                  }                  
            - type: custom:button-card
              entity: sensor.lune
              aspect_ratio: 1/1
              show_entity_picture: true
              show_name: false
              size: 75%
              styles:
                card:
                  - '--mdc-ripple-color': none
                  - height: 37px
                  - width: 37px
                  - top: 27px
                  - left: 1px
                icon:
                  - margin-top: 0.5px
                  - margin-left: 1.5px
              card_mod:
                style: |
                  ha-card {
                    background: rgba(32,32,32,0.9) !important;
                    border-radius: 60px !important;
                  }

[Pulpy-Luke]

Salut,

Perso j’ai un volet avec une image et ça fonctionne dans une mushroom-entity

type: custom:mushroom-entity-card
entity: cover.velux_suite
icon_type: entity-picture

Je pense que l’astuce est là dans mon customize.yaml :

cover.velux_suite:
  entity_picture: /local/images/devices/velux/velux.png

[WarC0zes]

C’est pas le soucis, j’utilise customize avec du .png et .svg.
C’est avec les cartes mushroom il y a un bagde derrière l’icone et du moment que tu utilise icon_type: entity-picture, ce badge de fond disparait. Sauf que moi, je veut le garder et n’ayant pas trouver de solution avec mushroom, j’ai fais avec button-card.

avec button-card, 4 de gauche en mushroom et 2 de droite en button-card avec icone png et svg.