[CARTE] Button-Card

[Herbs]

Salut @WarC0zes

Un truc vite fait :

type: vertical-stack
cards:
  - type: entities
    entities:
      - light.eclairage_exterieure
      - switch.volet_bureau
      - switch.volet_salon
  - type: custom:mod-card
    style:
      .: |
        ha-card {
          margin: 0px 10px 0 10px;
        }
    card:
      type: horizontal-stack
      cards:
        - type: custom:button-card
          entity: light.sw_spots_cuisine
          name: Cuisine
        - type: custom:button-card
          entity: switch.sw_lampe_salon
          name: Salon

Bon comme j’ai dit « c’est vite fait », il y’a surement moyen de faire autrement.

Peut-être avec les « extra_styles » de button card ?

[WarC0zes]

Salut @Herbs,
Je savais que tu me trouverais une solution. Même a la vite fait, ca fait le taf

J’y pense pas a utiliser la carte mod-card, alors que j’en est utiliser déja avec stack in card pour des soucis de couleur qui fonctionnais pas. Je vais m’en souvenir maintenant
Merci pour le truc vite fait

[Herbs]

@WarC0zes

Merci pour le truc vite fait

No problemo

@WarC0zes

J’y pense pas a utiliser la carte mod-card,

Il faut, on fait plein choses sympathiques avec card-mod

Tiens voilà un lien avec une sorte d’abaque de ce qu’on peut faire avec, et surtout un max d’exemple :

🔹 Card-mod - Add css styles to any lovelace card

[David]

Hello à tous
Alors je ne sais pas si mon intervention est justifiée ici mais bon j’essaye.

Alors j’ai installé la « button card »

J’ai ajouté ceci dans mon fichier config

lovelace:
  mode: storage
  dashboards:
    lovelace-yaml:
      mode: yaml
      title: Maison
      icon: mdi:script
      show_in_sidebar: true
      filename: ui-lovelace.yaml




  resources:
    - url: /local/multiple-entity-row.js?v=4.2.0
      type: module
    - url: /local/button-card.js
      type: module  

De coté j’ai ceci

et j’ai toujours ceci quand je vais dans Aperçu, ma page pour ajouter la carte

Donc je suppose qu’il me manque quelque chose ?

Et lorsque je souhaite modifier ma page maison ou j’ai tout j’ai ceci

Alors si quelqu’un peut m’aider, car forcément j’ai dû louper un truc …

Merci pour vos retours.

David

[ProBreizh]

Bonjour, très simpa ta carte,
tu pourrai me partager ton code stp ?

Tu à passez combien de temps pour sortir ta carte ?

[WarC0zes]

Bonjour,
J’y est passer quelques heures pour faire la carte complète a la main.
Tu as besoin d’installer les cartes: stack-in-card, multiple-entity-row, card_mod, bar-card, button-card et de custom-brand-icons pour les icones ( cpu, ram ).

Voici le code complet de ma carte (colonne complète):

type: custom:stack-in-card
mode: vertical
keep:
  box_shadow: true
  margin: true
  border_radius: true
  background: true
  outer_padding: false
cards:
  - type: vertical-stack
    cards:
      - type: entities
        header:
          image: /local/images/ds214+logo2.png
          type: picture
        entities:
          - entity: sensor.diskstation_last_boot
            type: custom:multiple-entity-row
            name: IP
            icon: mdi:ip
            show_state: false
            entities:
              - entity: device_tracker.diskstation
                name: Interne
                attribute: ip
              - entity: binary_sensor.wan_status_2
                name: Externe
                attribute: wan_ipaddress
          - entity: sensor.diskstation_drive_1_status
            type: custom:multiple-entity-row
            name: Statut
            icon: mdi:web-clock
            show_state: false
            entities:
              - entity: sensor.diskstation_last_boot
                name: Uptime
                format: total
              - entity: sensor.diskstation_volume_1_status
                name: HDD
              - entity: binary_sensor.diskstation_security_status
                name: Sécurity Statut
        card_mod:
          style: |
            .card-content div {
              margin-top: -3px !important;
              margin-left: -10px !important;
              margin-bottom: 0px  !important;
            }
            :host {
              font-size: 15px;
            }
            ha-card {
              box-shadow: none;
            }
      - type: custom:bar-card
        entities:
          - entity: sensor.diskstation_cpu_utilization_total
            name: CPU
            icon: phu:intel-cpu
            height: 27px
            color: rgb(68, 115, 158)
            min: 1
            max: 100
            positions:
              indicator: 'off'
          - entity: sensor.diskstation_memory_usage_real
            name: RAM
            icon: phu:ram-memory
            height: 27px
            color: red
            min: 1
            max: 100
            target: 90
            positions:
              indicator: 'off'
          - entity: sensor.diskstation_volume_1_volume_used
            name: HDD SHR 4To
            icon: mdi:harddisk
            height: 27px
            color: green
            min: 1
            max: 100
            target: 70
            positions:
              indicator: 'off'
        style: |
          ha-card {
            margin-top: -25px;
            margin-left: -10px;
            margin-right: -9px;
            box-shadow: none;
            }
          bar-card-currentbar, bar-card-backgroundbar {
            border-radius: 4px;
          }
      - type: horizontal-stack
        cards:
          - type: custom:bar-card
            entities:
              - entity: sensor.diskstation_temperature
                name: Nas
                icon: mdi:blank
                height: 27px
                color: orange
                min: 1
                max: 60
                target: 50
                positions:
                  name: inside
                  indicator: 'off'
            style: |
              ha-card {
                margin-top: -30px;
                margin-left: -10px;
                margin-right: -9px;
                box-shadow: none;
              }
              ha-icon {
                --mdc-icon-size: 55px;
                background: url("/local/images/nas ds214+3.png");
                background-size: 100% 100%;
              }
              bar-card-currentbar, bar-card-backgroundbar {
                border-radius: 4px;
              }
              bar-card-name {
                margin: 1px;
              }
          - type: custom:bar-card
            entities:
              - entity: sensor.diskstation_drive_1_temperature
                name: HDD1
                icon: mdi:blank
                height: 27px
                color: orange
                min: 1
                max: 60
                target: 50
                positions:
                  name: inside
                  indicator: 'off'
            style: |
              ha-card {
                margin-top: -30px;
                margin-left: -15px;
                margin-right: -10px;
                box-shadow: none;
              }
              ha-icon {
                --mdc-icon-size: 40px;
                background: url("/local/images/wd red pro3.png");
                background-size: 100% 100%;
              }
              bar-card-currentbar, bar-card-backgroundbar {
                border-radius: 4px;
              }
              bar-card-name {
                margin: 1px;
              }
          - type: custom:bar-card
            entities:
              - entity: sensor.diskstation_drive_2_temperature
                name: HDD2
                icon: mdi:blank
                height: 27px
                color: orange
                min: 1
                max: 60
                target: 50
                positions:
                  name: inside
                  indicator: 'off'
            style: |
              ha-card {
                margin-top: -30px;
                margin-left: -14px;
                margin-right: -9px;
                box-shadow: none;
              }
              ha-icon {
                --mdc-icon-size: 40px;
                background: url("/local/images/wd red pro3.png");
                background-size: 100% 100%;
              }
              bar-card-currentbar, bar-card-backgroundbar {
                border-radius: 4px;
              }
              bar-card-name {
                margin: 1px;
              }
      - type: custom:mod-card
        style:
          .: |
            ha-card {
              margin: 0px 10px 0 10px;
            }
        card:
          type: horizontal-stack
          cards:
            - type: custom:button-card
              entity: button.diskstation_reboot
              color_type: icon
              aspect_ratio: 4.55/1
              show_entity_picture: true
              entity_picture: /local/images/nas ds214+3.png
              name: DS214+<br/>Reboot
              color: rgb(68, 115, 158)
              layout: icon_name
              size: 55%
              styles:
                card:
                  - padding: 0.2em
                  - margin: '-10px 0'
                  - '--mdc-ripple-color': rgb(68, 115, 158)
                  - '--mdc-ripple-press-opacity': 0.5
                icon:
                  - opacity: 1
                name:
                  - font-size: 0.80em
                  - white-space: normal
                state:
                  - font-size: 0.75em
                  - white-space: normal
                label:
                  - font-size: 0.65em
                  - white-space: normal
              hold_action:
                action: more-info
              style: |
                ha-card {
                  border-radius: 5px;
                  box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.7);
                }
            - type: custom:button-card
              entity: switch.ds214
              color_type: icon
              aspect_ratio: 4.55/1
              show_entity_picture: true
              show_state: true
              entity_picture: /local/images/nas ds214+3.png
              name: DS214+ On/Off
              color: rgb(68, 115, 158)
              layout: icon_name_state2nd
              size: 55%
              state:
                - value: 'on'
                  styles:
                    state:
                      - color: green
                - value: 'off'
                  styles:
                    state:
                      - color: '#E30022'
              styles:
                card:
                  - padding: 0.2em
                  - margin: '-10px 0'
                  - '--mdc-ripple-color': rgb(68, 115, 158)
                  - '--mdc-ripple-press-opacity': 0.5
                icon:
                  - opacity: 1
                name:
                  - font-size: 0.80em
                  - white-space: normal
                state:
                  - font-weight: bold
                  - font-size: 0.80em
                  - white-space: normal
                label:
                  - font-size: 0.65em
                  - white-space: normal
              hold_action:
                action: more-info
              style: |
                ha-card {
                  border-radius: 5px;
                  box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.7);
                }
  - type: horizontal-stack
    cards:
      - type: custom:bar-card
        entities:
          - entity: sensor.diskstation_download_throughput
            name: Download
            icon: fas:download
            height: 27px
            direction: right
            positions:
              icon: inside
              name: inside
              minmax: 'off'
              indicator: 'off'
            color: green
            entity_row: true
        style: |
          ha-card {
            font-size: 14px;
            --bar-card-border-radius: 5px;
            box-shadow: none;
            margin: -10px -12px 0px -5px;
            --mdc-icon-size: 20px;
          }
      - type: custom:bar-card
        entities:
          - entity: sensor.diskstation_upload_throughput
            direction: right
            name: Upload
            icon: fas:upload
            height: 27px
            color: rgb(250, 0, 1)
            entity_row: true
            positions:
              icon: inside
              indicator: 'off'
              name: inside
              minmax: 'off'
        style: |
          ha-card {
            font-size: 14px;
            --bar-card-border-radius: 5px;
            box-shadow: none;
            margin: -10px -5px 0px -12px;
            --mdc-icon-size: 20px;
          }
  - type: horizontal-stack
    cards:
      - type: custom:button-card
        entity: sensor.ups_status
        name: Green cell<br/>600VA
        aspect_ratio: 1.8/1
        layout: icon_name_state2nd
        show_icon: true
        show_name: true
        show_label: true
        show_entity_picture: true
        entity_picture: /local/images/Onduleur.png
        styles:
          icon:
            - width: 95%
          name:
            - font-size: 15px
            - margin-left: '-30px'
          custom_fields:
            statut:
              - top: 60%
              - left: 38%
              - position: absolute
              - font-size: 13.5px
            input:
              - top: 80%
              - left: 38%
              - position: absolute
              - font-size: 13.5px
        custom_fields:
          statut: |
            [[[
              if (states['sensor.ups_status'].state == "Online") return `<ha-icon icon='mdi:information-outline' style='width: 20px; height: 20px; color: rgb(68, 115, 158);'></ha-icon>
              <span>Statut: <span style='color: green;'>${states['sensor.ups_status'].state}</span></span>`; else return `<ha-icon icon='mdi:information-outline' style='width: 20px; height: 20px; color: rgb(68, 115, 158);'></ha-icon> <span>Statut: <span style='color: red;'>${states['sensor.ups_status'].state}</span></span>`
            ]]] 
          input: |
            [[[
              if (states['sensor.ups_status_data'].state == "OL") return `<ha-icon icon='mdi:information-outline' style='width: 20px; height: 20px; color: rgb(68, 115, 158);'></ha-icon>
              <span>Statut data: <span style='color: green;'>${states['sensor.ups_status_data'].state}</span></span>`; else return `<ha-icon icon='mdi:information-outline' style='width: 20px; height: 20px; color: rgb(68, 115, 158);'></ha-icon> <span>Statut data: <span style='color: red;'>${states['sensor.ups_status_data'].state}</span></span>`
            ]]]
        hold_action:
          action: more-info
          entity: sensor.ups_status_data
        style: |
          ha-card {
            box-shadow: none;
          }
      - type: custom:mod-card
        card:
          type: vertical-stack
          cards:
            - type: custom:bar-card
              entities:
                - entity: sensor.ups_input_voltage
                  name: Input
                  icon: mdi:sine-wave
                  height: 17px
                  color: rgb(68, 115, 158)
                  min: 1
                  max: 236
                  target: 200
                  positions:
                    icon: inside
                    indicator: 'off'
              style: |
                ha-card {
                  margin-top: -8px;
                  margin-left: -11px;
                  margin-right: -4px;
                  box-shadow: none;
                }
                ha-icon {
                  --mdc-icon-size: 18px;
                  color: white;
                }
                bar-card-currentbar, bar-card-backgroundbar {
                  border-radius: 4px;
                }
                bar-card-name {
                  margin: -5px;
                }
            - type: custom:bar-card
              entities:
                - entity: sensor.ups_output_voltage
                  name: Output
                  icon: mdi:sine-wave
                  height: 17px
                  color: green
                  min: 1
                  max: 236
                  target: 200
                  positions:
                    icon: inside
                    indicator: 'off'
              style: |
                ha-card {
                  margin-top: -23px;
                  margin-left: -11px;
                  margin-right: -4px;
                  box-shadow: none;
                }
                ha-icon {
                  --mdc-icon-size: 18px;
                  color: white;
                }
                bar-card-currentbar, bar-card-backgroundbar {
                  border-radius: 4px;
                }
                bar-card-name {
                  margin: -5px;
                }
            - type: custom:bar-card
              entities:
                - entity: sensor.ups_load
                  name: Load
                  height: 17px
                  color: orange
                  min: 1
                  max: 100
                  target: 90
                  positions:
                    icon: inside
                    indicator: 'off'
              style: |
                ha-card {
                  margin-top: -23px;
                  margin-left: -11px;
                  margin-right: -4px;
                  box-shadow: none;
                }
                ha-icon {
                  --mdc-icon-size: 18px;
                  color: white;
                }
                bar-card-currentbar, bar-card-backgroundbar {
                  border-radius: 4px;
                }
                bar-card-name {
                  margin: -5px;
                }
            - type: custom:bar-card
              entities:
                - entity: sensor.ups_battery_charge
                  name: Charging
                  icon: mdi:battery-high
                  height: 17px
                  color: red
                  min: 1
                  max: 100
                  target: 10
                  positions:
                    icon: inside
                    indicator: 'off'
              style: |
                ha-card {
                  margin-top: -23px;
                  margin-left: -11px;
                  margin-right: -4px;
                  box-shadow: none;
                  height: 45px;
                }
                ha-icon {
                  --mdc-icon-size: 18px;
                  color: white;
                }
                bar-card-currentbar, bar-card-backgroundbar {
                  border-radius: 4px;
                }
                bar-card-name {
                  margin: -5px;
                }

Image du bandeau

Icone du nas:

Icone des HDD:

[ProBreizh]

Merci infiniment pour le magniffique partage,

Quand on vois le resultat, tu à passé du temps mais elle magniffique avec toutes les infos.

De ce que je vois tu à une batterie de secour, tu a mis ta box internet dessus aussi ?

[WarC0zes]

Oui, j’ai un onduleur qui sert pour le nas , HA et la box internet.

[ClassicRed]

Hello

@WarC0zes

Dit moi comment tu fais pour avoir les ip ( les 2 syno et externe )
Car sur mes deux syno j’ai droit sur la carte a des undefinded

Par contre dans la partie IP externe ca marche si je passe par pour IP Externe.

DNS IP

De plus je suis obliger de viré

                attribute: ip
                attribute: wan_ipaddress

Mes deux syno sont sur la dernière version de DSM 7.1.1

Dans mes entité syno je trouve pas de IP , ni de device trackers

[WarC0zes]

Salut @ClassicRed,
alors pour l’ip interne et externe c’est a partir de l’intégration de ma livebox que je les récupèrent (sensor wan et tracker ).

Pour l’ip local (interne) tu peu utiliser Nmap Tracker - Home Assistant.
Pour l’ip externe je sais pas, mais DNS IP a l’air de faire le boulot. Sinon, ta pas un téléphone ou tablette intégrer a HA et qui permette d’avoir l’ip public dans les capteurs de l’application ( pas activer par default je crois ).

          - entity: sensor.diskstation_last_boot
            type: custom:multiple-entity-row
            name: IP
            icon: mdi:ip
            show_state: false
            entities:
              - entity: device_tracker.diskstation  
                name: Interne
                attribute: ip
              - entity: binary_sensor.wan_status_2
                name: Externe
                attribute: wan_ipaddress

Pour l’ip interne faut savoir comment ton sensor a les information stocker. Quel est le nom de l’attribut pour l’ip et le modifier dans le code.

Ta box internet a pas de device tracker et l’info de l’ip interne ?

[ClassicRed]

RE,

Alors freebox V6 en mode bridge , routeur Asus AC88U

Comme je ne peux pas fonctionné l’intégration Freebox car en mode bride
j’ai mis en place l’intégration de ASUSWRT

et la j’ai pu récupéré les devices trackers des syno…

[WarC0zes]

Nikel, tu peu utiliser l’ip externe fournie pour ton HA pour les nas ( c’est la même je suppose).

Edit:
Pour le 2eme nas, l’icone de la température est trop grande. Tu peu changer ca pour que ca soit plus homogène ici:

@WarC0zes

              ha-icon {
                --mdc-icon-size: 55px;  #<---- ici
                background: url("/local/images/nas ds214+3.png");
                background-size: 100% 100%;
              }

[ClassicRed]

Re
aah , ouai j’ avais même pas remarqué

merci de me l’avoir signalé

Si au passage il te viens une imagination pour cette carte

Je suis preneur

Au cas ou

Home Assistant & ECS

[ProBreizh]

Pour tes carte c’est la ligne "attribute: wan_ipaddress" qui te met en undefinded tu la bascule en "#attribute: wan_ipaddress"(Pour la commenter et la tu aura ton ip externe après avoir mis ton capteur)

[ProBreizh]

Dit moi j’ai une petite question, pourquoi tout est décalé au niveau des hdd ?

J’ai vérifier et j’ai bien tout les interface que tu ma dit.

J’ai tenter de modifier le css sans grand succès!

[WarC0zes]

C’est bon, c’est juste que ta des bordures qui ont été ajouter sur le thème par default ce mois ci.
Te faut utiliser un thème qui enlève ces bordures ou ajouter c’est ligne dans le thème que tu utilise:

    ha-card-border-width: 0

exemple de mon thème:

Mushroom No Shadow:
    ha-card-border-width: 0
    modes:
        light: {}
        dark: {}

Edit:
Tu devrait cacher ton ip externe

[ProBreizh]

Je vais regarder çà, merci.

Pour l’ip extern tinquiète c’est une ip 4G qui change très souvent donc rien à craindre ( j’ai 3 ip externe donc 2 qui change plusieurs fois par jour)

[WarC0zes]

J’oublier avec card_mod, pour enlever les bordures:

        style: |
          ha-card {
            border-width: 0px !important;
          }

ou

        style:
          .: |
            :host {
              --border-width: 0px !important;
            }

[richardpub]

En désespoir de cause et espérant ne pas être hors sujet, et bien qu’aillant beaucoup travailler sur HA, je n’arrive pas à faire un bouton en apparence simple;

J’aimerai avoir un seul bouton avec le maximum de place pour l’intitulé et une icone pour avoir juste l’état de la lampe, n’avoir qu’une légère bordure autour et qu’un clic à n’importe quel endroit du bouton, me change l’état de la lampe, sans ouvrir un autre champ, pour commuter l’état de la lampe.
J’ai essayé avec Card-mod, mais je pense que je suis mal parti, mais où???

Mon code actuel:

type: horizontal-stack
cards:
  - show_name: true
    show_icon: false
    type: button
    styles:
      card:
        - background-color: transparent
      style: |
        ha-card {
          box-shadow: none;
          border-width: 0px !important;
          icon-size: 15px;
        }
    tap_action:
      action: toggle
    entity: light.bureau_haut
  - type: custom:button-card
    entity: light.bureau_haut
    name: 1/1.3
    show_name: false
    icon: mdi:lightbulb
    aspect_ratio: 3/1

Je voudrais arriver à ceci:

Merci pour votre aide

[BBE]

De mon point de vue tu as deux façon de faire ceci assez simplement et sans card mod:

• as tu essayé les mushroom card (si tu as card mod tu as probablement déjà HACS), tu vas trouver plein de sujet sur le forum traitant de cette famille de card très pratique et facilement personalisable, tout en étant utilisable avec l’editeur visuel.
  doc mushroom cards

• tu as depuis la version 2022.11 une nouvelle card la « tile card » qui ressemble beaucoup à la mushroom card en un peu plus simple et surtout totalement intégré à HA, et qui te permettra de faire ce que tu cherches à faire.
  doc Tile card

Bonne recherche sur le sujet.