Problem mit yaml Code für eine Bildelementekarte

[stemo]

Hallo und guten Abend,

ich hoffe ihr könnt mir bei einem yaml Problem helfen. Ich habe für meine PV Anlage ein Energie-Dashboard erstellt. Um die Energieflüsse zu visualisieren enthält es verschiedene horizontale und vertikale Linien. Bei den vertikalen Linien habe ich jetzt das Problem, das ich die Länge der Linie nicht ändern kann. Unten der Code einer vertikalen Linie. Eigentlich sollte mit dem height: 35% Befehl in der letzten Zeile die Länge eingestellt werden können, aber die Linie verrutscht damit nur etwas, wird aber nicht länger. Könnt ihr mit hier weiterhelfen?

  - type: custom:button-card
    entity: sensor.powerocean_hj37zdh5zg7a0143_housepower
    show_name: false
    show_icon: false
    show_state: false
    custom_fields:
      line: ' '
    styles:
      card:
        - background: rgba(0,0,0,0)
        - box-shadow: none
        - border: none
        - width: 8px
        - padding: 0px
      custom_fields:
        line:
          - width: 8px
          - height: 100%
          - background: |
              [[[
                let val = Number(entity.state);
                if (val > 0) return 'repeating-linear-gradient(0deg, #F44336 0px, #F44336 8px, transparent 8px, transparent 16px)';
                return '#FFD700';
              ]]]
          - background-size: 100% 32px
          - animation: |
              [[[
                let val = Number(entity.state);
                if (val > 0) return 'flow-down 0.8s linear infinite';
                return 'none';
              ]]]
    extra_styles: >
      @keyframes flow-down { 0% { background-position: 0 0; } 100% {
      background-position: 0 32px; } }
    style:
      top: 40%
      left: 48%
      height: 35%

 

[u5zzug]

Das ist kein yaml Problem, sndern ein css Problem.
top: 40% heißt wohl, dass die Linie erst bei 40 Prozent beginnt.

Weißt du, das es in HACS jede Menge Karten für PV u.ä. gibt?

 

[Nival]

Zum CSS, Du musst nur die Breite von card und line auf den gleichen Wert erhöhen - da dann aber border-radius ziemlich auffällt muss das ggf. noch eliminiert werden, sonst ist es eher eine Ellipse als ein Rechteck wie bisher.

styles:
  card:
    - width: 30px
    - border-radius: 0px
  custom_fields:
    line:
      - width: 30px

 

[Loxley]

Versuch mal das so zu ändern/ergänzen (ohne Gewähr):

styles:
  card:
    - height: 100px

  custom_fields:
    line:
      - height: 35%

Damit hast du eine definierte Bezugsgröße. Die Linie ist dann 35 % von 100 px = 35 px lang.

 

[stemo]

vielen Dank für die Hilfe. Hat aber leider nicht genutzt. Die Linie wird nicht länger. Ich habe jetzt einfach unter custom fields das height hochgeschraubt. Bis über 1000%. Ist nicht das was ich wollte, aber so funktioniert es jedenfalls.

 

[Nival]

Die Linie wird nicht länger.

Moment, meintest Du mit "länger" jetzt "höher" oder, wie ich es verstanden habe und wie es definitiv mit meinem Code funktioniert, "breiter"?

Ist nicht das was ich wollte

Die Lösung, oder entspricht das Ergebnis nicht exakt dem, was Du am Ende haben wolltest?

 

[stemo]

mit höher meine ich bis zu über 1000%, nicht 100%. Mit Deinem Code habe ich nur eine ganz kurze Linie. Bei der Änderung von

- height: 35%

wandert die Linie öhne Längenänderung nur etwas nach oben bzw. unten
Ich glaube ich habe irgendwo ein Problem in meinem Code der die Änderung von

- height: 35%

verhindert. Deshalb hatte ich Anfangs den gesamten Code eingefügt. Ich kann den Fehler bzw. das Problem aber nicht finden. Aber mit meinem

- height: 1200%

klappt es jetzt auch.