Mushroom Card Icon Animations - Einbindung in Dashboard

S

SkyWalker2_D

Active member
Moin!

Man hat mir die animierten Icons für die Mushroom cards gezeigt. Die Büchse der Pandora ist geöffnet :)

https://community.home-assistant.io/t/mushroom-cards-build-a-beautiful-dashboard-easily/388590/3240

Jetzt hatte ich versucht mittels einer Muschroom Chips card bei eingeschalteter Waschmaschine ein entsprechendes Logo anzeigen zu lassen.
Der Code funktioniert auch wenn ich ihn als Card anlege, nicht aber bei einer Bedingung innerhalb der Chips card.

Ich hatte gedacht, es klappt einfach indem ich als Action Template wähle und dann den Code einfüge. Klappt aber nicht Was übersehe ich?

YAML: 
type: custom:mushroom-chips-card
chips:
  - type: conditional
    conditions:
      - entity: input_boolean.waschmaschine_lauft
        state: 'on'
    chip:
      type: custom:mushroom-template-card
      icon: mdi:washing-machine
      icon_color: amber
      primary: Waschmaschine
      card_mod:
        style:
          mushroom-shape-icon$: |
            ha-icon {
              --icon-animation: shake 400ms ease-in-out infinite, drum 2s ease infinite;
              transform-origin: 50% 110%;
            }
            @keyframes shake {
              0%, 100% { transform: translate(0, 0) rotate(0); }
              20%  { transform: translate(0.4px, -0.4px) rotate(-4deg); }
              40%  { transform: translate(-0.4px, 0.4px) rotate(4deg); }
              60%  { transform: translate(0.4px, 0.4px) rotate(-4deg); }
              80%  { transform: translate(-0.4px, -0.4px) rotate(4deg); }
            }
            @keyframes drum {
              50%  { clip-path: polygon(0 0, 0 100%, 35% 100%, 34% 68%, 60% 41%, 71% 56%, 65% 74%, 47% 79%, 32% 69%, 35% 100%, 100% 100%, 100% 0); }
            }
  - type: conditional
    conditions:
      - entity: input_boolean.waschmaschine_lauft
        state: 'off'
    chip:
      type: template
      entity: input_text.waschmaschine_lauft_nicht
      icon: mdi:washing-machine-off
      icon_color: grey
      content: Waschmaschine aus

Grüße
Sky
 
Moin!

Ich versuche mich gerade an den Mushroom Chips Cards für die Animated Icons Darstellung. Das klappt soweit auch ganz gut.
Aber ich bekomme es nicht hin, das die secondary_info: last-changed mit angezeigt wird. Ich würde z. B. gerne wissen, wann der Zustand der Waschmaschine umgesprungen ist von z. B. 'läuft' auf 'fertig'

Diese Info würde ich gerne mit auf der Card haben. Ich füge die zeile ein, es wird auch keiner Fehler angezeigt, aber halt auch die Info nicht. Was kann ich da machen? Oder liegt es an der Card an sich?


YAML: 
type: conditional
conditions:
  - entity: input_boolean.waschmaschine_lauft
    state: 'on'
card:
  type: custom:mushroom-template-card
  icon: mdi:washing-machine
  icon_color: amber
  primary: Waschmaschine
  card_mod:
    style:
      mushroom-shape-icon$: |
        ha-icon {
          --icon-animation: shake 400ms ease-in-out infinite, drum 2s ease infinite;
          transform-origin: 50% 110%;
        }
        @keyframes shake {
          0%, 100% { transform: translate(0, 0) rotate(0); }
          20%  { transform: translate(0.4px, -0.4px) rotate(-4deg); }
          40%  { transform: translate(-0.4px, 0.4px) rotate(4deg); }
          60%  { transform: translate(0.4px, 0.4px) rotate(-4deg); }
          80%  { transform: translate(-0.4px, -0.4px) rotate(4deg); }
        }
        @keyframes drum {
          50%  { clip-path: polygon(0 0, 0 100%, 35% 100%, 34% 68%, 60% 41%, 71% 56%, 65% 74%, 47% 79%, 32% 69%, 35% 100%, 100% 100%, 100% 0); }
        }

Grüße
Sky
 
Moin!
Seit einem der letzten Updates bedarf es ja einer Anpassung in der YAML bei animated icons. Ich hatte mir das bisher nicht angeschaut, jetzt aber zur Brust genommen.

Ich hatte verstanden, dass man "nur" das hier ändern muss.

Vorher: ha- icon
Neu: ha- state- icon

Vorher: -- icon-animation
Neu: animation

Was muss ich noch bedenken?

YAML: 
type: horizontal-stack
cards:
  - type: vertical-stack
    cards:
      - type: vertical-stack
        cards:
          - type: conditional
            conditions:
              - entity: binary_sensor.fenstersensor_iaszone
                state: 'on'
            card:
              type: custom:mushroom-template-card
              icon: mdi:door
              icon_color: amber
              primary: Haustür
              card_mod:
                style:
                  mushroom-shape-icon$: |
                    ha-state- icon {
                      animation: open 6s ease-in-out infinite;
                      transform-origin: 30%;
                    }
                    @keyframes open {
                      0%, 66% { transform: rotateY(0deg); }
                      33% { transform: rotateY(-120deg); }
                    }
                    .shape {
                      perspective: 45px;
                    }
          - type: conditional
            conditions:
              - entity: binary_sensor.lumi_lumi_sensor_magnet_aq2_opening_4
                state: 'on'
            card:
              type: custom:mushroom-template-card
              icon: mdi:window-open-variant
              icon_color: yellow
              primary: Wohnzimmer
          - type: conditional
            conditions:
              - entity: binary_sensor.lumi_lumi_sensor_magnet_aq2_opening
                state: 'on'
            card:
              type: custom:mushroom-template-card
              icon: mdi:window-open-variant
              icon_color: yellow
              primary: Esszimmer
          - type: conditional
            conditions:
              - entity: binary_sensor.lumi_lumi_sensor_magnet_aq2_opening_2
                state: 'on'
            card:
              type: custom:mushroom-template-card
              icon: mdi:window-open-variant
              icon_color: yellow
              primary: Küche
          - type: conditional
            conditions:
              - entity: binary_sensor.tursensor_schlafzimmer_iaszone
                state: 'on'
            card:
              type: custom:mushroom-template-card
              icon: mdi:door
              icon_color: amber
              primary: Schlafzimmer
              card_mod:
                style:
                  mushroom-shape-icon$: |
                    ha-state- icon {
                      animation: open 6s ease-in-out infinite;
                      transform-origin: 30%;
                    }
                    @keyframes open {
                      0%, 66% { transform: rotateY(0deg); }
                      33% { transform: rotateY(-120deg); }
                    }
                    .shape {
                      perspective: 45px;
                    }
          - type: conditional
            conditions:
              - entity: binary_sensor.lumi_lumi_sensor_magnet_aq2_opening_3
                state: 'on'
            card:
              type: custom:mushroom-template-card
              icon: mdi:window-open-variant
              icon_color: yellow
              primary: Benjamin
          - type: conditional
            conditions:
              - entity: binary_sensor.lumi_lumi_sensor_magnet_aq2_opening_5
                state: 'on'
            card:
              type: custom:mushroom-template-card
              icon: mdi:window-open-variant
              icon_color: yellow
              primary: Keller
              secondary: ''
          - type: conditional
            conditions:
              - entity: binary_sensor.turkontakt_ewelink_ds01_iaszone
                state: 'on'
            card:
              type: custom:mushroom-template-card
              icon: mdi:door
              icon_color: amber
              primary: Keller aussen
              secondary: ''
              card_mod:
                style:
                  mushroom-shape-icon$: |
                    ha-state- icon {
                      animation: open 6s ease-in-out infinite;
                      transform-origin: 30%;
                    }
                    @keyframes open {
                      0%, 66% { transform: rotateY(0deg); }
                      33% { transform: rotateY(-120deg); }
                    }
                    .shape {
                      perspective: 45px;
                    }
          - type: conditional
            conditions:
              - entity: binary_sensor.lumi_lumi_sensor_magnet_aq2_opening_6
                state: 'on'
            card:
              type: custom:mushroom-template-card
              icon: mdi:window-open-variant
              icon_color: yellow
              primary: Schlafkeller
      - type: conditional
        conditions:
          - entity: input_boolean.flur_haustur_klingel
            state: 'on'
        card:
          type: custom:mushroom-template-card
          primary: Es hat geklingelt!
          icon: mdi:bell-ring
          icon_color: indigo
          tap_action:
            action: call-service
            service: input_boolean.turn_off
            target:
              entity_id: input_boolean.flur_haustur_klingel
            data: {}
          card_mod:
            style:
              mushroom-shape-icon$: |
                ha-state- icon {
                  animation: ring 4s linear infinite;
                  transform-origin: 50% 15%;
                }
                @keyframes ring {
                  0% { transform: rotate(0); clip-path: polygon(0 50%, 0 100%, 100% 100%, 100% 50%, 85% 50%, 80% 30%, 60% 5%, 40% 5%, 20% 30%, 15% 50%); }
                  2% { transform: rotate(30deg); clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); }
                  6% { transform: rotate(-28deg); clip-path: polygon(0 50%, 0 100%, 100% 100%, 100% 50%, 85% 50%, 80% 30%, 60% 5%, 40% 5%, 20% 30%, 15% 50%); }
                  10% { transform: rotate(34deg); clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); }
                  14% { transform: rotate(-32deg); clip-path: polygon(0 50%, 0 100%, 100% 100%, 100% 50%, 85% 50%, 80% 30%, 60% 5%, 40% 5%, 20% 30%, 15% 50%); }
                  18% { transform: rotate(30deg); clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); }
                  22% { transform: rotate(-28deg); clip-path: polygon(0 50%, 0 100%, 100% 100%, 100% 50%, 85% 50%, 80% 30%, 60% 5%, 40% 5%, 20% 30%, 15% 50%); }
                  26% { transform: rotate(26deg); clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); }
                  30% { transform: rotate(-24deg); clip-path: polygon(0 50%, 0 100%, 100% 100%, 100% 50%, 85% 50%, 80% 30%, 60% 5%, 40% 5%, 20% 30%, 15% 50%); }
                  34% { transform: rotate(22deg); clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); }
                  38% { transform: rotate(-20deg); clip-path: polygon(0 50%, 0 100%, 100% 100%, 100% 50%, 85% 50%, 80% 30%, 60% 5%, 40% 5%, 20% 30%, 15% 50%); }
                  42% { transform: rotate(18deg); clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); }
                  46% { transform: rotate(-16deg); clip-path: polygon(0 50%, 0 100%, 100% 100%, 100% 50%, 85% 50%, 80% 30%, 60% 5%, 40% 5%, 20% 30%, 15% 50%); }
                  50% { transform: rotate(14deg); clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); }
                  54% { transform: rotate(-12deg); clip-path: polygon(0 50%, 0 100%, 100% 100%, 100% 50%, 85% 50%, 80% 30%, 60% 5%, 40% 5%, 20% 30%, 15% 50%); }
                  58% { transform: rotate(10deg); clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); }
                  62% { transform: rotate(-8deg); clip-path: polygon(0 50%, 0 100%, 100% 100%, 100% 50%, 85% 50%, 80% 30%, 60% 5%, 40% 5%, 20% 30%, 15% 50%); }
                  66% { transform: rotate(6deg); }
                  70% { transform: rotate(-4deg); }
                  74% { transform: rotate(2deg); }
                  78% { transform: rotate(-1deg); }
                  82% { transform: rotate(1deg); }
                  86% { transform: rotate(0); }
                  100% { transform: rotate(0); clip-path: polygon(0 50%, 0 100%, 100% 100%, 100% 50%, 85% 50%, 80% 30%, 60% 5%, 40% 5%, 20% 30%, 15% 50%); }
                }
      - type: conditional
        conditions:
          - entity: input_boolean.briefkasten
            state: 'on'
        card:
          type: custom:mushroom-template-card
          primary: Die Post war da!
          icon: mdi:email
          icon_color: orange
          tap_action:
            action: call-service
            service: input_boolean.turn_off
            target:
              entity_id: input_boolean.briefkasten
            data: {}
          card_mod:
            style:
              mushroom-shape-icon$: |
                ha-state- icon {
                  animation: email 2s infinite;
                }
                @keyframes email {
                  0%, 49%, 100% { opacity: 1; }
                  50%, 99% { opacity: 0; }
                }
 
Moin!

Ich habe hier noch mal versucht die Animation wieder hinzubekommen, aber leider ohne Erfolg.
Ich bekomme keine Fehlermeldung für den YAML Aufbau aber auch keine Animation.

Das hier habe ich als Aktion bei meiner Condition Card eingegeben. Wo liegt der Fehler?

YAML: 
            card:
              type: custom:mushroom-template-card
              icon: mdi:door
              icon_color: amber
              primary: Haustür
              card_mod:
                style:
                  mushroom-shape-icon$: |
                    ha-state-icon {
                      animation: open 6s ease-in-out infinite;
                      transform-origin: 30%;
                    }
                    @keyframes open {
                      0%, 66% { transform: rotateY(0deg); }
                      33% { transform: rotateY(-120deg); }
                    }
                    .shape {
                      perspective: 45px;
                    }
 
Nimm mal das Dollarzeichen bei mushroom-shape-icon$ weg, danach sollte das funktionieren - tut es jedenfalls bei mir.
 
Hab auch nur rumprobiert, nachdem ich Dein Konstrukt nachgebaut und die CSS-Angaben kontrolliert hatte - war das einzige was für mich keinen Sinn mache 😂
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Zurzeit aktive Besucher

Gesamt: 114 (Mitglieder: 4, Gäste: 110)

Neueste Beiträge

Letzte Anleitungen

Statistik des Forums

Themen
5.021
Beiträge
50.328
Mitglieder
4.713
Neuestes Mitglied
tAntChen

Teilen

Zurück
Oben