Carte automatique pour suivi des batteries

Voilà rien de spécial mais après un peu de customisation je partage ma dernière carte pour le suivi de mes batteries.
image

ça se basse sur la carte auto-entities

  - type: custom:auto-entities
    card:
      type: custom:bar-card
      title_position: inside
      height: 38
      card_mod: null
      positions:
        icon: inside
        indicator: inside
        name: inside
        value: inside
      show_icon: true
      align: split
      columns: '2'
      max: 100
      unit_of_measurement: '%'
      severity:
        - color: '#d11e1e'
          from: 0
          to: 5
        - color: '#cf2d11'
          from: 6
          to: 10
        - color: '#cc3900'
          from: 11
          to: 15
        - color: '#c84400'
          from: 16
          to: 20
        - color: '#c44d00'
          from: 21
          to: 25
        - color: '#bf5600'
          from: 26
          to: 30
        - color: '#b95f00'
          from: 31
          to: 35
        - color: '#b36600'
          from: 36
          to: 40
        - color: '#ac6e00'
          from: 41
          to: 45
        - color: '#a57500'
          from: 46
          to: 50
        - color: '#9d7b00'
          from: 51
          to: 55
        - color: '#948100'
          from: 56
          to: 60
        - color: '#8b8700'
          from: 61
          to: 65
        - color: '#818d00'
          from: 66
          to: 70
        - color: '#769200'
          from: 71
          to: 75
        - color: '#6a9700'
          from: 76
          to: 80
        - color: '#5d9c00'
          from: 81
          to: 85
        - color: '#4da100'
          from: 86
          to: 90
        - color: '#39a500'
          from: 91
          to: 95
        - color: '#15a911'
          from: 96
          to: 100
      style: |
        bar-card-currentbar, bar-card-current, bar-card-backgroundbar {

            height: 5px !important;
            margin-top: 30px;
        }
        ha-card {
            background: none;
            box-shadow: none;
        }
        ha-icon{
          color: white !important;
        }
        bar-card-iconbar {
            margin-bottom: 10px;
        }
      animation:
        state: 'on'
        speed: '2'
    filter:
      exclude:
        - entity_id: ^sensor.robonect*$
      include:
        - entity_id: ^sensor.radiateur_*_battery_level$
        - entity_id: ^sensor.*_battery$
        - entity_id: ^sensor.tpms*_batt$
        - entity_id: ^sensor.*_battery_charge$
    sort:
      method: friendly_name
    show_empty: false

Sur regret impossible de faire ça avec les decluttering_templates à cause des filtres :zipper_mouth_face:

Filtres qui sont justement assez simples à manipuler :

  • ^ = début du nom
  • $ = fin du nom
  • (*) n’importe quelle série de caractères

Donc

^sensor.radiateur_*_battery_level$

Corresponds à tous ce qui commence par sensor.radiateur_ et qui termine par _battery_level

11 « J'aime »

Super @Pulpy-Luke

peux t-on classer l’affichage dans l’ordre de % de la batterie Comme ceci:
image

PS: pour ma part j’ai utiliser le declutering:

####################################################################################################################################################
###     BATTERY LIST *CARD*
####################################################################################################################################################        
      - type: horizontal-stack
        cards:
          - type: conditional
            conditions:
              - entity: input_boolean.battery
                state: 'on' 
            card:
              type: custom:decluttering-card
              template: battery_level 

Decluttering:

####################################################################################################################################################################################################################################################################################################################################################
####    BATTERY LEVEL
####################################################################################################################################################################################################################################################################################################################################################
battery_level:
  card:  
    type: 'custom:stack-in-card'        
    mode: vertical
    style: |
      ha-card {
        border-radius: 20px; 
        } 
    cards:                
      - type: entities       
        show_header_toggle: false
        entities:
          - type: 'custom:auto-entities'
            card:
              type: custom:fold-entity-row
              head:
                type: section
                label: Niveau de Batteries
              open: true
            filter:
              include:
                - entity_id: sensor.*_battery_level*
                  state: < 101
                  options:
                    style: |
                      :host {
                        --paper-item-icon-color:
                         {% if states(config.entity) | int(default=0) > 50 and states(config.entity) | int < 75 %}
                            yellow
                          {% elif states(config.entity) | int(default=0) < 51 %}
                            orange
                          {% elif states(config.entity) | int(default=0) < 26 %}
                            red
                          {% else %}
                            green
                          {% endif %}
                          ;
                        }
                    type: custom:template-entity-row
                    state: |
                      {{states(config.entity)}}{{' %'}}
                    name: |
                      {{config.entity.split('.')[1] |replace('_battery_level', ' ')|replace('_', ' ')|trim }}
                    secondary: >
                      {{ as_timestamp(states[config.entity].last_changed)|
                      timestamp_custom('%d/%m/%y - %H:%M') }}
                  sort:
                    method: state
                    reverse: false
                    numeric: true
                    count: 6     
1 « J'aime »

Oui la carte auto-entites le permet => sort, jette un oeil dans la doc, ton tri doit marcher directement
Personnellement je préfère que les noms soient regroupés (puisque justement les entités s’ajoutent seules)

Oui j’en ai aussi un peu partout, mais certaines cartes ne passent pas (syntaxe un peu costaud je pense), auto-entities en fait partie ainsi que

Si tu y arrive avec auto-entities, je suis preneur

il faut tricher pour le decluterring :slight_smile:

Je vais regarder ton exemple du coup, merci

Fait…

  - type: custom:decluttering-card
    template: bar-card-percent-higherbetter-step20
    variables:
      - column: 2
      - entity_exc:
          - entity_id: ^sensor.robonect_battery*$
      - entity_inc:
          - entity_id: ^sensor.radiateur_*_battery_level$
          - entity_id: ^sensor.*_battery$
          - entity_id: ^sensor.tpms*_batt$
          - entity_id: ^sensor.*_battery_charge$
  bar-card-percent-higherbetter-step20:
    element:
      type: custom:auto-entities
      card:
        type: custom:bar-card
        title_position: inside
        height: 38
        card_mod: null
        positions:
          icon: inside
          indicator: inside
          name: inside
          value: inside
        show_icon: true
        align: split
        columns: '[[column]]'
        max: 100
        unit_of_measurement: '%'
        severity:
          - color: '#d11e1e'
            from: 0
            to: 5
          - color: '#cf2d11'
            from: 6
            to: 10
          - color: '#cc3900'
            from: 11
            to: 15
          - color: '#c84400'
            from: 16
            to: 20
          - color: '#c44d00'
            from: 21
            to: 25
          - color: '#bf5600'
            from: 26
            to: 30
          - color: '#b95f00'
            from: 31
            to: 35
          - color: '#b36600'
            from: 36
            to: 40
          - color: '#ac6e00'
            from: 41
            to: 45
          - color: '#a57500'
            from: 46
            to: 50
          - color: '#9d7b00'
            from: 51
            to: 55
          - color: '#948100'
            from: 56
            to: 60
          - color: '#8b8700'
            from: 61
            to: 65
          - color: '#818d00'
            from: 66
            to: 70
          - color: '#769200'
            from: 71
            to: 75
          - color: '#6a9700'
            from: 76
            to: 80
          - color: '#5d9c00'
            from: 81
            to: 85
          - color: '#4da100'
            from: 86
            to: 90
          - color: '#39a500'
            from: 91
            to: 95
          - color: '#15a911'
            from: 96
            to: 100
        style: |
          bar-card-currentbar, bar-card-current, bar-card-backgroundbar {

              height: 5px !important;
              margin-top: 30px;
          }
          ha-card {
              background: none;
              box-shadow: none;
          }
          ha-icon{
            color: white !important;
          }
          bar-card-iconbar {
              margin-bottom: 10px;
          }
        animation:
          state: 'on'
          speed: '2'
      filter:
        exclude: '[[entity_exc]]'
        include: '[[entity_inc]]'

@Pulpy-Luke , je cherchais justement une carte automatique pour surveiller les batteries de mes capteurs sans forcément mettre à jour une carte à chaque fois que j’en ajoute un.
J’ai donc suivi ton code et je n’arrive pas à avoir des icône comme toi qui sont spécifique au sensor.
Peux-tu expliquer comment tu fais pour afficher l’icône d’une lampe sur « Chevet 1 » par exemple et afficher un friendly_name sympa s’il te plait ?

Car quand j’ajoute ce code sur mon Lovelace :

Code carte Batterie
type: custom:auto-entities
card:
  type: custom:bar-card
  title_position: inside
  height: 38
  positions:
    icon: inside
    indicator: inside
    name: inside
    value: inside
  show_icon: true
  align: split
  columns: '2'
  max: 100
  unit_of_measurement: '%'
  severity:
    - color: '#d11e1e'
      from: 0
      to: 5
    - color: '#cf2d11'
      from: 6
      to: 10
    - color: '#cc3900'
      from: 11
      to: 15
    - color: '#c84400'
      from: 16
      to: 20
    - color: '#c44d00'
      from: 21
      to: 25
    - color: '#bf5600'
      from: 26
      to: 30
    - color: '#b95f00'
      from: 31
      to: 35
    - color: '#b36600'
      from: 36
      to: 40
    - color: '#ac6e00'
      from: 41
      to: 45
    - color: '#a57500'
      from: 46
      to: 50
    - color: '#9d7b00'
      from: 51
      to: 55
    - color: '#948100'
      from: 56
      to: 60
    - color: '#8b8700'
      from: 61
      to: 65
    - color: '#818d00'
      from: 66
      to: 70
    - color: '#769200'
      from: 71
      to: 75
    - color: '#6a9700'
      from: 76
      to: 80
    - color: '#5d9c00'
      from: 81
      to: 85
    - color: '#4da100'
      from: 86
      to: 90
    - color: '#39a500'
      from: 91
      to: 95
    - color: '#15a911'
      from: 96
      to: 100
  style: |
    bar-card-currentbar, bar-card-current, bar-card-backgroundbar {
        height: 5px !important;
        margin-top: 30px;
    }
    ha-card {
        background: none;
        box-shadow: none;
    }
    ha-icon {
      color: white !important;
    }
    bar-card-iconbar {
        margin-bottom: 10px;
    }
  animation:
    state: 'on'
    speed: '2'
filter:
  include:
    - entity_id: ^sensor.*_battery$
  exclude: []
sort:
  method: friendly_name
show_empty: false

Je vois toujours l’icône « oeil » et des nom pas très « friendly » :thinking:

image

1 « J'aime »

Salut
Si tu cliques sur l’entité puis roue crantée en haut à droite, tu dois pouvoir éditer l’icône et le nom.

Salut,
C’est nickel chrome, j’essaierais de le faire :pray:

On peut même faire des cartes decluterring qui utilisent des cartes decluterring :smiling_face_with_three_hearts:

  bar-card_percent_generic:
    element:
      type: custom:auto-entities
      card:
        type: custom:bar-card
        title_position: inside
        height: 38
        card_mod: null
        positions:
          icon: inside
          indicator: inside
          name: inside
          value: inside
        show_icon: true
        align: split
        columns: '[[column]]'
        max: 100
        unit_of_measurement: '%'
        severity: '[[severity]]'
        style: |
          bar-card-currentbar, bar-card-current, bar-card-backgroundbar {

              height: 5px !important;
              margin-top: 30px;
          }
          ha-card {
              background: none;
              box-shadow: none;
          }
          ha-icon{
            color: white !important;
          }
          bar-card-iconbar {
              margin-bottom: 10px;
          }
        animation:
          state: 'on'
          speed: '2'
      filter:
        exclude: '[[entity_exc]]'
        include: '[[entity_inc]]'
  bar-card_percent_higherbetter_step20:
    element:
      type: custom:decluttering-card
      template: bar-card_percent_generic
      variables:
        - column: '[[column]]'
        - entity_exc: '[[entity_exc]]'
        - entity_inc: '[[entity_inc]]'
        - severity:
            - color: '#d11e1e'
              from: 0
              to: 5
            - color: '#cf2d11'
              from: 6
              to: 10
            - color: '#cc3900'
              from: 11
              to: 15
            - color: '#c84400'
              from: 16
              to: 20
            - color: '#c44d00'
              from: 21
              to: 25
            - color: '#bf5600'
              from: 26
              to: 30
            - color: '#b95f00'
              from: 31
              to: 35
            - color: '#b36600'
              from: 36
              to: 40
            - color: '#ac6e00'
              from: 41
              to: 45
            - color: '#a57500'
              from: 46
              to: 50
            - color: '#9d7b00'
              from: 51
              to: 55
            - color: '#948100'
              from: 56
              to: 60
            - color: '#8b8700'
              from: 61
              to: 65
            - color: '#818d00'
              from: 66
              to: 70
            - color: '#769200'
              from: 71
              to: 75
            - color: '#6a9700'
              from: 76
              to: 80
            - color: '#5d9c00'
              from: 81
              to: 85
            - color: '#4da100'
              from: 86
              to: 90
            - color: '#39a500'
              from: 91
              to: 95
            - color: '#15a911'
              from: 96
              to: 100
  bar-card_percent_lowerbetter_step5:
    element:
      type: custom:decluttering-card
      template: bar-card_percent_generic
      variables:
        - column: '[[column]]'
        - entity_exc: '[[entity_exc]]'
        - entity_inc: '[[entity_inc]]'
        - severity:
          - color: '#d93131'
            from: 81
            to: 100
          - color: '#c45800'
            from: 61
            to: 80
          - color: '#a07500'
            from: 41
            to: 60
          - color: '#6f8b00'
            from: 21
            to: 40
          - color: '#0f9b0f'
            from: 0
            to: 20

J’avais encore jamais testé :stuck_out_tongue: top du top decluterring :slight_smile:

Super,
Je cherchais justement une vue sympa pour mes batteries et je trouve celle ci au top. :heart_eyes:

Merci pour le partage.
Apres recopie je n’ai pas le même résultat, une idée du PB?
Merci

image

Salut.
Les friendly name sont trop longs et passent sur 2/3 lignes.
Tu peux au choix les raccourcir ou bien passer la carte sur 1 seule colonne

Merci pour ce retour.
J’ai changé les friendly name mais j’ai toujours le même PB (le graphique est sur l’ensemble et pas juste en petit dessous comme dans votre cas.
image

image

Merci de votre aide

As-tu installé card-mod également ?
Qui permet de changer les CSS à la volée
https://forum.hacf.fr/t/personnaliser-ses-cartes-avec-card-mod/4447

Super c’est bien cela. J’ai encore quelques petits reglage avant d’arriver à votre resultat. :slight_smile:

image

Encore merci pour votre aide.

Oui encore quelques noms et la couleur des icones à changer (white)

        ha-icon{
          color: white !important;
        }

vous avez un moyen de supprimer « batterie ou battery » dans les noms?
Merci

En changeant le nom dans l’entité directement, ce n’est pas suffisant ?