Minimiser taille picture element, maximiser maintenance decluttering /streamline ou Obi-Wan?

[freetronic]

Hello,

je voudrais minimiser le code de ma picture element, avec des schémas de « styles » répétitifs sur mes capteurs/prises … ça fonctionne parfaitement, mais je cherche à faire maigrir mon code pour le maintenir plus facilement.

à cet instant

            styles:
              card:
                - background-color: rgba(0, 0, 0, 0)
              icon:
                - color: |
                    [[[
                      if (states['switch.prise_ventilateur_labo'].state == 'on') {
                        return 'green';
                      } else if (states['switch.prise_ventilateur_labo'].state == 'off') {
                        return 'red';
                      } else {
                        return 'orange';
                      }
                    ]]]
                - animation: |
                    [[[
                      return states['switch.prise_ventilateur_labo'].state == 'unavailable' ? 'blink 1s infinite' : 'none';
                    ]]]

j’ai cru comprendre qu’il fallait partir sur decluttering card ( plus maintenu à priori ) ou streamline card ( pas encore dans HACS )

J’imagine que le deuxième choix est le plus judicieux mais avant de me lancer dans les grands travaux, je voudrais savoir si il n’y a pas d’autres choix en sus auxquels je ne pense pas en écrivant ici ( d’où le Obi-Wan Kenobi, désolé j’ai pas trouvé de C )

Merci
cdt

[hackdiy]

@freetronic

J’imagine que le deuxième choix est le plus judicieux mais avant de me lancer dans les grands travaux, je voudrais savoir si il n’y a pas d’autres choix en sus auxquels je ne pense pas en écrivant ici ( d’où le Obi-Wan Kenobi, désolé j’ai pas trouvé de C

salut,
il y a aussi Card-mod si tu veux modifier du CSS en profondeur, mais dans ton cas, je pense que Decluttering Card est la meilleure solution

[freetronic]

Re,

Bon ben j’ai testé streamline-card ( elle est sur HACS maintenant à priori et je n’ai pas souvenir d’avoir ajouté le dépot)

J’ai tenté de passer par dossier streamline-templates + include du dossier sans succès en suivant la doc GitHub - brunosabot/streamline-card: Streamline your Lovelace configuration with with a card template system.

du coup je me suis rabattu sur édition de la config du dashboard et ça fonctionne.

Petite question à ceux qui savent, possible de l’utiliser avec un state-badge ? j’ai passé 2h dessus dans trouver comment faire parce que ce sont les cartes les plus simples, pour se faire la main, c’était bien ou pas

  - type: custom:streamline-card
    template: temperature_badge
    variables:
      - entity: sensor.esp_labo_temperature
    style:
      top: 30%
      left: 50%
      width: 15%
  - type: custom:streamline-card
    template: temperature_badge
    variables:
      - entity: sensor.esp_labo_temperature
    style:
      top: 40%
      left: 50%
      width: 15%
  - type: custom:streamline-card
    template: temperature_badge
    variables:
      - entity: sensor.esp_labo_temperature
    style:
      top: 50%
      left: 50%
      width: 15%

streamline_templates:
  temperature_badge:
    card:
      type: custom:bubble-card
      card_type: button
      entity: '[[entity]]'
      show_state: false
      show_last_changed: false
      show_attribute: false
      use_accent_color: false
      show_icon: true
      show_name: false
      scrolling_effect: false
      force_icon: true

du coup malgré le nom du template, je ne me base pas sur le badge pour le moment

cdt

[freetronic]

Re,

Personne n’a tenté le state badge du coup en streamline ?

J’ai trouvé une solution de contournement avec une bubble card taillée à la serpe et pas élégante du tout. et visuellement et en terme de taille, parce que vu la taille du code va falloir rentabiliser sur le nombre de streamline …

qd ça charge

sinon j’arrive à jouer sur la température de l’écriture de l’unité indifféremment de la couleur de la valeur, jamais trouvé comment faire dans state-badge

je met ce que j’ai trouvé parce que j’ai cherché, le code demande sans doute encore à être optimisé, mais malgré les 22 state-badge que j’ai à faire , je ne suis pas certain de l’utiliser

  - type: custom:bubble-card
    card_type: button
    entity: sensor.esp_labo_temperature
    show_state: false
    show_last_changed: false
    show_attribute: false
    use_accent_color: false
    show_icon: true
    show_name: false
    scrolling_effect: false
    tap_action:
      action: toggle
    name: Day_Length
    columns: 2
    rows: 2
    button_type: state
    width_desktop: 1%
    style:
      top: 50%
      left: 48%
      width: 14%
    styles: |-
      .bubble-icon-container {
        overflow: visible;
      }
    sub_button: []
    card_mod:
      style: |
        .card-content {
          width: 100%;
          margin: 0 !important;
        }
        .bubble-icon {
          color: transparent !important;
          background-color: transparent !important;
        }
        .bubble-icon-container::before {
          /* Pas de changement ici, fond transparent pour le bubble */
          background-color: transparent;
          color: {{
            'black' if states('sensor.esp_labo_temperature') | float(20) <= 17 else
            'white'
          }};
          font-size: 12px;
          line-height: 1.5em;
          border-radius: 90px;
          min-width: 30px;
          padding: 10px;
          position: absolute;
          text-align: center;
          content: "{{ states('sensor.esp_labo_temperature') | float(20) | round(1) }}";
        }
        .bubble-button-card-container {
          background: rgba(0, 0, 0, 0.0) !important;
          }
        .bubble-icon-container::after {
          background-color: {{
            'blue' if states('sensor.esp_labo_temperature') | float(20) <= 10 else
            'yellow' if states('sensor.esp_labo_temperature') | float(20) <= 17 else
            'green' if states('sensor.esp_labo_temperature') | float(20) <= 23 else
            'red' if states('sensor.esp_labo_temperature') | float(20) <= 30 else
            'black'
          }};
          color: {{
            'black' if states('sensor.esp_labo_temperature') | float(20) <= 23 else
            'white'
          }};
          font-size: 10px;
          line-height: 1em;
          border-radius: 90px;
          min-width: 16px;
          padding: 2px;
          position: absolute;
          top: 26px;
          left: 8px;
          text-align: center;
          content: "°C";
        }
        .bubble-icon::after {
          content: "";
          position: absolute;
          top: -8px;
          left: -9px;
          width: calc(135% + 4px);
          height: calc(135% + 4px);
          border: 2px solid transparent;
          border-radius: 50%;
          border-color: {{
            'blue' if states('sensor.esp_labo_temperature') | float(20) <= 10 else
            'yellow' if states('sensor.esp_labo_temperature') | float(20) <= 17 else
            'green' if states('sensor.esp_labo_temperature') | float(20) <= 23 else
            'red' if states('sensor.esp_labo_temperature') | float(20) <= 30 else
            'black'
          }};
        }

cdt