picture-elements - state-icon animieren.

N

nuiler

New member
Ich bin Anfänger in HomeAssistant und möchte auf einer PictureElement-Karte Icons animieren.
Sie sollten die Farbe ändern oder rotieren bei Status "on" oder "off".

Leider komme ich mit den gefunden Codes im Netz nicht zurecht. Es wäre sehr hilfreich wenn mir jemand ein Beispiel zukommen lassen könnte.



YAML: 
type: picture-elements
elements:
  - type: state-icon
    entity: binary_sensor.nibecompressor
    icon: mdi:fan
    style:
      top: 53%
      left: 36%
  - type: state-icon
    entity: binary_sensor.nibeswitch_valve_1
    style:
      top: 36%
      left: 77%
  - type: state-icon
    entity: binary_sensor.nibepump_heat_circuit
    style:
      top: 60%
      left: 68%
    icon: mdi:fan
  - entity: sensor.niberadiator_return
    style:
      left: 68%
      top: 86%
    type: state-label
  - entity: sensor.nibeheat_carrier_forwrd
    style:
      left: 68%
      top: 30%
    type: state-label
  - entity: sensor.nibebrine_in_evaporator
    style:
      left: 15%
      top: 59%
    type: state-label
  - entity: sensor.nibebrine_out_condenser
    style:
      left: 15%
      top: 87%
    type: state-label
  - entity: sensor.nibehot_gas_compr
    style:
      left: 47%
      top: 57%
    type: state-label
  - entity: sensor.nibeliquid_flow
    style:
      left: 47%
      top: 87%
    type: state-label
  - entity: sensor.nibeindoor
    style:
      left: 19%
      top: 31%
    type: state-label
  - entity: sensor.nibeoutdoor
    style:
      left: 8%
      top: 15%
    type: state-label
  - entity: sensor.nibewarm_water_1_top
    style:
      left: 85.25%
      top: 49%
      font-size: 12px
      line-height: 20px
      color: white
    type: state-label
  - entity: sensor.nibewarm_water_2_mid
    style:
      left: 85.25%
      top: 67%
      font-size: 12px
      line-height: 20px
      color: white
    type: state-label
image: /local/nibe.jpg
 
Wo genau kommst du nicht zurecht?

exemplarisch für den ersten Sensor = entity
diesen und alle weiteren wirst du an deine Sensoren anpassen müssen, ist aber nur Spekulation da deine Beschreibung, dein eigentliches Problem nicht erwähnt.

YAML: 
entity: binary_sensor.nibecompressor

vermutlich auch der letzte Eintrag mus auf den IMAGE angepasst werden
/local/ = \\<Deine IP>\config\www\nibe.jpg
hier muss das zugehöriges Bild liegen.

YAML: 
image: /local/nibe.jpg
 
Ich möchte zum Beispiel dieses Icon wenn aktiv rotieren lassen

YAML: 
  - type: state-icon
    entity: binary_sensor.nibecompressor
    icon: mdi:fan
    state_color: true
    style:
      top: 53%
      left: 36%
      '--paper-item-icon-active-color': green
      '--paper-item-icon-color': blue
 
Du benötigst als erstes
HACS -> button cards
button cards

Dann kannst du wie hier im Beispiel die Animationen verwenden.

b5eb7665b60d4ac88cdf1ad00387824a1cb1eed3.gif

YAML: 
type: grid
cards:
  - type: custom:button-card
    name: fliping
    icon: mdi:fire
    styles:
      icon:
        - animation: flip 1s infinite
    extra_styles: |
      @keyframes flip {
          0% {transform: scaleX(1)}
          49.99% {transform: scaleX(1)}
          50% {transform: scaleX(-1)}
          99.99% {transform: scaleX(-1)}
          100% {transform: scaleX(-1)}
          }
  - type: custom:button-card
    name: rotating
    icon: mdi:fire
    styles:
      icon:
        - animation:
            - rotating 3s infinite alternate
  - type: custom:button-card
    name: Slide In
    icon: mdi:fire
    styles:
      card:
        - height: 100%
      icon:
        - animation: slidein 3s infinite
    extra_styles: |
      @keyframes slidein {
        from { margin-left: 150%;}
        to { margin-left:0%;}
  - type: custom:button-card
    name: Slide
    icon: mdi:fire
    styles:
      icon:
        - animation: slide 3s infinite
    extra_styles: |

      @keyframes slide {
        from { margin-left: 50%;}
        to { margin-left:0%;}
  - type: custom:button-card
    name: bounce
    icon: mdi:fire
    show_entity_picture: true
    styles:
      icon:
        - animation: bounce 3s ease infinite
    extra_styles: |
      @keyframes bounce{
           from {top: 0%;}
           50%  {top: 100%;}
           to   {top: 0%;}
      }
          
  - type: custom:button-card
    name: Background
    icon: mdi:fire
    styles:
      icon:
        - animation: background 3s infinite
    extra_styles: |
      @keyframes background {
        from {background-color: red;}
        50% {background-color: yellow;}
        to {background-color: red;}
      }
  - type: custom:button-card
    name: icon color
    icon: mdi:fire
    styles:
      icon:
        - animation: icon-color 3s infinite
    extra_styles: |
      @keyframes icon-color {
        from {color: red;}
        50% {color: yellow;}
        to {color: red;}
      }
  - type: custom:button-card
    name: Fade
    icon: mdi:fire
    styles:
      icon:
        - animation: fade-out 3s infinite
    extra_styles: |
      @keyframes fade-out {
        0% { opacity:1; }
        50% { opacity:0; }
        100% { opacity:1; }
      }
  - type: custom:button-card
    name: Fade-out
    icon: mdi:fire
    styles:
      icon:
        - animation: fade-out 3s infinite
    extra_styles: |
      @keyframes fade-out {
        from { opacity:1; }
        to { opacity:0; }
      }
  - type: custom:button-card
    name: Rotation X
    icon: mdi:fire
    show_entity_picture: true
    styles:
      icon:
        - color: var(--state-icon-active-color)
        - animation: rotation_x 5s infinite
    extra_styles: |
      @keyframes rotation_x{
        0% {transform: scalex(-1)}
        50% {transform: scalex(1)}
        100% {transform: scalex(-1)}
      }
  - type: custom:button-card
    name: Rotation Y
    icon: mdi:fire
    show_entity_picture: true
    styles:
      icon:
        - color: var(--state-icon-active-color)
        - animation: rotation_y 5s infinite
    extra_styles: |
      @keyframes rotation_y{
        from {transform: scaley(1)}
        50% {transform: scaley(-1)}
        to {transform: scaley(1)}
      }
  - type: custom:button-card
    name: Flame
    icon: mdi:fire
    styles:
      icon:
        - animation: flame 1.5s infinite
    extra_styles: |
      @keyframes flame {
        0% {filter: blur(0px);transform: translate3d(0%, 0, 0); opacity:1; }
        50% {filter: blur(1px) ;transform: rotate(2deg) translate3d(1%, 0, 0); opacity:.60; }
        100% {filter: blur(0px);transform:  rotate(-1deg) translate3d(0%, 1%, 0); opacity:1;}
      }
  - type: custom:button-card
    name: Shake
    icon: mdi:fire
    styles:
      icon:
        - animation: shake 0.82s infinite
        - transform: translate3d(0, 0, 0)
    extra_styles: |
      @keyframes shake {
        10%, 90% {
          transform: translate3d(-1%, 0, 0);
        }
        
        20%, 80% {
          transform: translate3d(2%, 0, 0);
        }

        30%, 50%, 70% {
          transform: translate3d(-4%, 0, 0);
        }

        40%, 60% {
          transform: translate3d(4%, 0, 0);
        }
      }
  - type: custom:button-card
    name: Blur
    icon: mdi:fire
    styles:
      icon:
        - animation: blur 5s infinite
    extra_styles: |
      @keyframes blur {
        0% { filter: blur(0px);}
        50% { filter: blur(6px);}
        100% { filter: blur(0px);}
      }
  - type: custom:button-card
    name: drop-shadow
    icon: mdi:fire
    styles:
      icon:
        - animation: drop-shadow 5s infinite alternate
    extra_styles: |
      @keyframes drop-shadow {
        from { filter: drop-shadow(1.95rem 0 0 pink);}
        to { filter: drop-shadow(0 0 0.95rem chartreuse);}
      }
  - type: custom:button-card
    name: skew x
    icon: mdi:fire
    styles:
      icon:
        - animation: skewX 5s infinite alternate
    extra_styles: |
      @keyframes skewX {
        from { transform: skewX(50deg);}
        to { transform: skewX(-50deg);}
      }
  - type: custom:button-card
    name: skew y
    icon: mdi:fire
    styles:
      icon:
        - animation: skewY 5s infinite alternate
    extra_styles: |
      @keyframes skewY {
        from { transform: skewY(0deg);}
        to { transform: skewY(-180deg);}
      }
  - type: custom:button-card
    name: scale
    icon: mdi:fire
    styles:
      icon:
        - animation: scale 5s infinite alternate
    extra_styles: |
      @keyframes scale {
        from { transform: scale(0);}
        to { transform: scale(1);}
      }
square: false
 
Vielen Dank für die Hilfe habe dies erfolgreich umgesetzt.
Was jetzt aber noch fehlt ist, dass auf den Status entity: binary_sensor.nibecompressor reagiert.

Es soll nur bei "on" rotieren und bei "off" stehen bleiben.
 
hierfür benötigst du ein Tampate, so in der Art

Tamplate
YAML: 
- platform: template
  sensors:
    nibecompressor:
      friendly_name: "nibecompressor"
      value_template: >-
        {% if is_state("binary_sensor.nibecompressor", "on") %}
          off
        {% else %}
          on
        {% endif %}
      icon_template: >-
        {% if is_state("binary_sensor.nibecompressor", "on") %}
        - type: custom:button-card
          mdi:fan
          styles:
          icon:
           - animation:
             - rotating 10s infinite alternate
        {% else %}
          mdi:fan
        {% endif %}

dann so in etwa in der Ansicht

YAML: 
type: entities
entities:
  - entity: binary_sensor.openclose_64
    state_color: true
 
Ich habe so etwas für einen Lüfter on und off
YAML: 
type: picture-elements
elements:
  - type: icon
    icon: mdi:fan
    style:
      top: 18%
      left: 17.8%
      transform: translate(0%, 0%)
      '--mdc-icon-size': 50px
    card_mod:
      style: |
        :host {
          {% if is_state('sensor.nibe_luftung', 'on') %}
          --card-mod-icon-color: red;
          animation: rotation 3s linear infinite;
          {% else %}
          --card-mod-icon-color: grey;
          {% endif %}
        }
        @keyframes rotation {
                              0% {
                                transform: rotate(0deg);
                              }
                              100% {
                                transform: rotate(359deg);
                              }
                            }

image: local/lüftung50.png
Das funktioniert.
Ich möchte aber die Drehzahl abhängig von der jeweiligen Lüfter Drehzahl in 3 bis 4 Stufen anzeigen
'sensor.nibe_luftung_drehzahl_gq2' hat 0 .. 100% z.B bei 0 steht der Lüfter, bei > 20, 4 sek bei > 40 3 sek Drehung usw.
Kann mir jemand weiterhelfen?
 
hartmutw schrieb:
Kann mir jemand weiterhelfen?
Zum Vergrößern anklicken....
Wo genau hängst Du denn?

Ansatz:
YAML: 
{% if states('sensor.nibe_luftung_drehzahl_gq2') | int > 40 %}
  animation: rotation 3s linear infinite;
{% elif states('sensor.nibe_luftung_drehzahl_gq2') | int > 20 %}
  animation: rotation 4s linear infinite;
{% endif %}

Bei 0 eben keine Animation, wenns drüber ist, die Sekunden festlegen.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Zurzeit aktive Besucher

Gesamt: 78 (Mitglieder: 8, Gäste: 70)

Neueste Beiträge

Letzte Anleitungen

Statistik des Forums

Themen
4.922
Beiträge
49.584
Mitglieder
4.595
Neuestes Mitglied
Lewi.

Teilen

Zurück
Oben