d sellers1 Hey Derek have you ever | Home Assistant | Page 1

native trout Sep 9, 2023, 2:34 AM

#

Funny that you ask about animations tonight. I was trying to get one working earlier but in a custom:button-card. But it had a combination of state styling and custom fields with HTML. But, frankly, I dunno what I'm doing with that just yet.

#

I got your animation working the way you want but I also took the liberty of making a couple of tweaks to it. IIRC, the Mushroom entity card does not like to be templated. (Card mod works but I ran into some issues with the icon changing via card mod.) So, instead try using a custom:mushroom-template-card. Everything can be templated. But... at the same time, everything has to be defined.

#

  - type: custom:mushroom-template-card
    entity: light.living_room_lights
    primary: '{{state_attr(entity, "friendly_name")}}'
    secondary: '{{ states(entity) }}'
    icon: '{{ is_state(entity, ''on'') | iif(''mdi:lightbulb-on'', ''mdi:lightbulb'') }}'
    icon_color: '{{ is_state(entity, "on") | iif(''yellow'', ''gray'') }}'
    card_mod:
      style: |
        ha-state-icon {
          {% if states('light.living_room_lights') == 'on' %}
            animation: illumination 2s infinite;
          {%- endif %}
        }
        @keyframes illumination {
          0%, 100% { clip-path: inset(0 0 0 0); }
          80% { clip-path: polygon(0% 99%, 20% 55%, 22% 37%, 39% 20%, 61% 21%, 77% 35%, 79% 57%, 99% 100%); }
        }
    tap_action:
      action: toggle```

#

This is one that I was messing around with earlier.

hardy yew Sep 9, 2023, 5:28 AM

#

Awesome bro 👍🏻 Got called away earlier right after I posted the message. I've done quite a bit with background and border animations, so I figured it would take a bit to nail it down devtools thanks for the code 👍🏻 days have been a bit short for me lately and it is much appreciated plusone

native trout Sep 9, 2023, 11:22 PM

#

I made a version 2.0 of the flashing lightbulb animation. I wanted to incorporate the green ring radiating from the icon (but in yellow). The affect was cool but a bit much since it kept going. I limited it to animate 5 times. This was cool but the animation would happen each time the screen refreshed or navigating. So, I incorporated checking if the state has last_updated within 60 seconds.

#

  - type: custom:mushroom-template-card
    entity: light.living_room_lights
    primary: '{{state_attr(entity, "friendly_name")}}'
    secondary: '{{ states(entity) }}'
    icon: '{{ is_state(entity, ''on'') | iif(''mdi:lightbulb-on'', ''mdi:lightbulb'') }}'
    icon_color: '{{ is_state(entity, "on") | iif(''yellow'', ''gray'') }}'
    card_mod:
      style:
        mushroom-shape-icon$: |
          .shape {
            {% set entity = 'light.living_room_lights' %}
            {% set last_updated = ((as_timestamp(now()) - as_timestamp(states[entity].last_updated)) | int) %}
            {% if states(entity) == 'on' and last_updated <= 60 %}
              --shape-animation: ping 2s 5;
            {% endif %}
          }
          @keyframes ping {
            0% { box-shadow: 0 0 0 0 rgba(var(--rgb-yellow), 0.7); }
            79% { box-shadow: 0 0 5px 15px transparent; }
          }
        .: |
          ha-state-icon {
            {% if states('light.living_room_lights') == 'on' %}
              animation: illumination 2s infinite;
              color: yellow;
            {%- else -%}
              color: gray;
            {%- endif %}
          }
          @keyframes illumination {
            0%, 100% { clip-path: inset(0 0 0 0); }
            80% { clip-path: polygon(0% 99%, 20% 55%, 22% 37%, 39% 20%, 61% 21%, 77% 35%, 79% 57%, 99% 100%); }
          }
    tap_action:
      action: toggle```

#

Take note that the card_mod structure is a bit different than the example animating just the icon. The icon and the shape around the icon are not the same thing. I don't know exactly what it all means but this is what it took to make it work. I'm guessing it has something to do with the HTML/CSS code layout in the card and how card_mod can "access it".

hardy yew Sep 10, 2023, 2:25 AM

#

Nice one! smart When button card first came out, I did one sort of similar for the different alarm states for my alarm keypad screen and experienced the same thing on reloads/refreshes with the animation repeats, but didn't irritate me enough to try to fix it...nice resolution 🏆 Probably gonna use that code for my garage door when in opened position, short animation loop is perfect for that use case in my displays ☑️ I'll ping you when I get a second to get it up and running. We have 3 more weeks on the out of town job and then I'll be around the keyboard again! 💯

hardy yew Oct 3, 2023, 2:35 AM

#

Hey Derek, the below code/styling is a bit old, but the extra_styles part is flashing borders for around cards or in this case I used a panel: mode layout-card and it flashed around the wall mount screen. As I said, old but I thought I saw a comment of yours that mentioned it...if not, just disregard 👌

  - type: custom:card-modder
    style:
      background: "center / cover no-repeat url(/local/images-lovelace/mobile_backz/[[ input_select.mobile_wallpaper.state ]].jpg)"
      overflow: hidden
      "--paper-card-background-color": "rgba(0, 0, 0,0.25)"
      border: "solid 1px rgba(0, 0, 0,0.0)"
      "--primary-color": "#e0e1e1"
      padding: 0px
      "--ha-card-border-radius": 0px
      width: calc(100% - 4px)
      height: calc(100vh - 4px)
      display: block
      animation: "[[ input_select.alert_type.state ]] 2s linear 4"
      margin: 0
    extra_styles: >
      @keyframes ready {
        from {border: solid 3px lime;}
        to {border: solid 3px black;}
      }
      @keyframes alarm {
        from {border: solid 3px red;}
        to {border: solid 3px black; background: red;}
      }
      @keyframes alert {
        from {border: solid 3px yellow;}
        to {border: solid 3px black; background: yellow;}
      }
    recurse: false

native trout Oct 3, 2023, 4:48 PM

#

Looking at this code, I can tell it is a bit before my time (card-modder), but I think I'm going to try this out and see how it works. I'm assuming it makes like a Red/Yellow Alert around the border of the screen. That's kinda cool. Might look into adopting something like this down to the card level and create a button-press-type effect.

hardy yew Oct 3, 2023, 4:54 PM

#

Yeah, funny though. Thomas said ages ago to quit using it and I still find some card-modder stuff still works LOL. The green was for an "all clear" or "disarmed alarm". Should be able to test out on HA cards to see how it works. If I get in early today I'll post the working code. Really old and really ugly 😂 ...
https://youtube.com/shorts/ukBDMWia5RA

#

https://youtube.com/shorts/_qmNPuFzmPU

native trout Oct 3, 2023, 7:00 PM

#

I gotcha. Check out this animation that I found in one forum threads. The side borders radiate outwards. (I'll grab a screen recording when I get home.)

#

type: custom:button-card
entity: binary_sensor.hallway_closet
extra_styles: |
  @keyframes red-alert {
    0% {
      -moz-box-shadow: 0 0 0 0 rgba(255,0,0, 0.7);
      box-shadow: 0 0 0 0 rgba(255,0,0, 0.7);
    }
    70% {
        -moz-box-shadow: 0 0 0 10px rgba(240,52,52, 0.9);
        box-shadow: 0 0 0 15px rgba(240,52,52, 0.7);
    }
    100% {
        -moz-box-shadow: 0 0 0 0 rgba(240,52,52, 0);
        box-shadow: 0 0 0 0 rgba(240,52,52, 0);
    }
  }
icon: mdi:star
name: Red Alert
styles:
  icon:
    - animation: red-alert 1s infinite

native trout Oct 3, 2023, 10:30 PM

#

#

I took some of your ready/alert/alarm code and dropped it into one of my custom:button-card examples. I don't think it is intended to function like this but it created a pretty cool effect.
@acoustic hill You might like this, too.

native trout Oct 3, 2023, 11:22 PM

#

@rain thunder Forgot to tag you on this post.

hardy yew Oct 3, 2023, 11:41 PM

#

👍🏻 yeah, that brings back memories 😂
I had the Mid: alert icon full screen on wall tablets when alarm was triggered and the tap action popped up the keypad. There are tons of interesting things to do with that 😍

#

If you change the icon color and text it should be visible when background goes black 👍🏻 gives it a different effect IMO

native trout Oct 3, 2023, 11:47 PM

#

hardy yew Oct 4, 2023, 12:44 AM

#

IDK if you use Swiper card, but tried the cube effect and looks much better than the normal 'swipe' IMO...

native trout Oct 4, 2023, 1:58 AM

#

I did use it a while back. I had a custom:button-card that show the date & time but I could swipe it to show "hidden" Kiosk Mode settings. I accidentally removed the button-card because I didn't want the time on that view and forgot that I had the settings in the swiper card... 🤦‍♂️ I just haven't gotten around to putting them back in somewhere.

#

  @keyframes alarm {
    from {box-shadow: 0 0 0 2px rgba(238, 0, 0, 0.3);}
    to {box-shadow: 0 0 0 8px rgba(238, 0, 0, 1) }
  }``````yaml
- animation: alarm 0.7s linear infinite alternate```

hardy yew Oct 4, 2023, 2:02 AM

#

nice touch 😎

acoustic hill Oct 4, 2023, 1:10 PM

#

love it

rain thunder Oct 23, 2023, 1:42 PM

#

I cant find our original chat, so I'll just post it here. I did get the shared buttons to work using !include statements in the YAML.

#d sellers1 Hey Derek have you ever