is it possible to have any animated | Home Assistant | Page 1

sour condor Dec 10, 2023, 11:23 PM

#

This is just a mock-up and I hard-coded the weather variable to be cloudy. Just remove that line and ensure you have animated icons that match states and you should be good.
This is a custom:button-card with some styling added to it. Adjust it as needed. yaml type: custom:button-card name: | [[[ return states['climate.hvac'].attributes.temperature + "°F" ]]] custom_fields: icon: | [[[ var weather = states['weather.home'].state; var weather = 'cloudy' return '<img src = "/local/icon/amcharts_weather_icons_1.0.0/animated/' + weather + '.svg" width="50" height="50" />' ]]] styles: grid: - grid-template-areas: '"icon n"' card: - overflow: visible - background: none - border: none - width: 100px - padding: 0px name: - justify-self: right - font-size: 1em - padding-right: 15px - padding-left: 0px custom_fields: icon: - padding-right: 0px(The icon in this case is animated, I just did not take a screen recording to grab it.)

deep geode Dec 11, 2023, 8:49 AM

#

i got this 1

#

its a card you can download

#

and the rain etc is all animated

#

https://github.com/bramkragten/weather-card

empty scaffold Dec 11, 2023, 10:21 PM

#

sour condor This is just a mock-up and I hard-coded the weather variable to be cloudy. Just ...

this might be in that direction what i am looking for. But i really just like to have the animated cloud and the temperature which i can freeley position on a picture elements card. So no background at all. Is that possible with your code?

empty scaffold Dec 11, 2023, 10:23 PM

#

deep geode i got this 1

animated weather card i found a few, the problem for me is to configure them without background, boarder and everything except cloud-symbol and temperature

deep geode Dec 11, 2023, 10:41 PM

#

empty scaffold animated weather card i found a few, the problem for me is to configure them wit...

would also recommend custom:button-card then

empty scaffold Dec 11, 2023, 10:45 PM

#

deep geode would also recommend custom:button-card then

i am honestly not so good in understanding that code which @sour condor was writing. I have a sensor from openweathermap which should have that kind of animated pictures

#

            entity: weather.openweathermap
            number_of_forecasts: '1'
            hourly_forecast: false
            forecast: false
            details: false
            current: true
            style:
              left: 10.0%
              top: 5.0%
              width: 20%
              font-size: 70%```

sour condor Dec 11, 2023, 10:47 PM

#

I'm not familiar with the picture elements card, but looking over the doc, in theory, you should be able to add what I provided as a custom element.

type string Required

Card name with custom: prefix (e.g., custom:my-custom-card

empty scaffold Dec 11, 2023, 10:48 PM

#

thats how its looking now

#

i dont really know how to change your code to something what is fitting to me 😦

sour condor Dec 11, 2023, 10:57 PM

#

Looking at the code for the custom:weather-card, I can see where it "translates" the weather condition into an icon and I figured out where those icons are stored (https://cdn.jsdelivr.net/gh/bramkragten/weather-card/dist/icons/).
I think I can easily adapt my card to use that information and make something a bit more customizable and then the custom:weather-card wouldn't be needed.

empty scaffold Dec 11, 2023, 11:00 PM

#

sour condor Looking at the code for the custom:weather-card, I can see where it "translates"...

that sounds very promissing, i appreciate your help

sour condor Dec 11, 2023, 11:01 PM

#

In the mean time, see if you can figure out that custom element thing that I mentioned. See if you want add a plain stock HA card to your picture-element and get a better understanding of how that works.

empty scaffold Dec 11, 2023, 11:08 PM

#

i hope i understood correctly... what i know is that a custom button card is working in the picture elemets card since i am using that for buttons. Like this: yaml - type: custom:button-card entity: light.2er icon: mdi:lightbulb show_icon: false show_name: false show_state: false show_entity_picture: true size: 60% entity_picture: /local/floorplan/button_fail.png state: - value: 'on' entity_picture: /local/floorplan/button_on.png - value: 'off' entity_picture: /local/floorplan/button_off.png style: left: 40.3% top: 37.7% width: 4% styles: card: - background-color: transparent - border: transparent tap_action: action: toggle

sour condor Dec 11, 2023, 11:10 PM

#

Okay. Cool. Can you show a screenshot of what that looks like on the picture-elements card? (You don't have to show the whole thing; just a portion around it.)

empty scaffold Dec 11, 2023, 11:11 PM

#

#

with this weather card i had also additional problem that with different screen size its not getting smaller when the custom button cards are

#

so i would be happy if the result would be a custom button card without that black background

sour condor Dec 11, 2023, 11:16 PM

#

Yup. Will be the custom:button-card that I posted at the beginning but it will be completely functional. I have most of the code in place. Just have to remember how to call the icon correctly.

#

Just got that working. Now, just need to incorporate figuring out icons between day and night.

empty scaffold Dec 11, 2023, 11:19 PM

#

maybe i can learn so much from that, that i can build something for the other problem which i also still want to figure out 😉 a clock which is messing around with my screen sizes ...

empty scaffold Dec 11, 2023, 11:20 PM

#

sour condor Just got that working. Now, just need to incorporate figuring out icons between ...

thats probably something with the sun.sun entity ?

#

below and above horizon

sour condor Dec 11, 2023, 11:21 PM

#

empty scaffold Dec 11, 2023, 11:23 PM

#

i would not be able to build that on my own, but i think i understand what is happening somehow in that picture

empty scaffold Dec 11, 2023, 11:35 PM

#

sour condor

Is there any more information which i need to provide or can provide?

sour condor Dec 11, 2023, 11:44 PM

#

I think that's about it. I just need to finish up with the code. I'm getting the hang of making it work. I just added a variable to make changing to a different weather entity easier should you need to. (I'm testing with openweathermap and all is going well.) Just need to incorporate the sun below horizon part. (Tested to ensure it "sees" the night icons which it did.)

empty scaffold Dec 11, 2023, 11:45 PM

#

Sounds great, i am starving to try it

sour condor Dec 11, 2023, 11:53 PM

#

Did you like how the screenshot looked at the very beginning of this thread? Is there anything that I need to do/test first?

#

I think I just about have everything done.

#

The only thing I haven't accounted for is some sort of icon if the weather sensor isn't working but I can figure that out later.

empty scaffold Dec 11, 2023, 11:54 PM

#

the screenshot from the beginning looks fine only it should be completly transparent background

#

the weathersensor from openweathermap was until now always working 😉 one of the most reliable sensors 😉

sour condor Dec 11, 2023, 11:56 PM

#

Yeah. Mine disappears every once in a while where I have to reload the integration. Happened during this testing.

empty scaffold Dec 11, 2023, 11:57 PM

#

happened because of the testing or also fro time to time?

#

never happened for me, maybe an internet connection problem?

sour condor Dec 11, 2023, 11:59 PM

#

Just from time to time. Probably lost communication and I just happened to be working at the exact time that it did. Maybe went to update and response did not come quick enough.

#

About to paste the code. Line 37 has a hard-coded weather condition. Use this for testing purposes; change the condition from the list above it and then when you're done remove Line 37. var condition = "snowy"

It will also automatically apply your temperature unit too since you're C and I'm F.

empty scaffold Dec 12, 2023, 12:00 AM

#

okay understood

sour condor Dec 12, 2023, 12:00 AM

#

type: custom:button-card
variables:
  weather_sensor: weather.openweathermap
name: |
  [[[ return states[variables.weather_sensor].attributes.temperature + " " + states[variables.weather_sensor].attributes.temperature_unit ]]]
custom_fields:
  icon: |
    [[[
      const weatherIconsDay = {
        clear: "day",
        "clear-night": "night",
        cloudy: "cloudy",
        fog: "cloudy",
        hail: "rainy-7",
        lightning: "thunder",
        "lightning-rainy": "thunder",
        partlycloudy: "cloudy-day-3",
        pouring: "rainy-6",
        rainy: "rainy-5",
        snowy: "snowy-6",
        "snowy-rainy": "rainy-7",
        sunny: "day",
        windy: "cloudy",
        "windy-variant": "cloudy-day-3",
        exceptional: "!!",
      };
      
      const weatherIconsNight = {
        ...weatherIconsDay,
        clear: "night",
        sunny: "night",
        partlycloudy: "cloudy-night-3",
        "windy-variant": "cloudy-night-3",
      };
      
      var condition = states[variables.weather_sensor].state;
      var condition = "snowy"
      if (states['sun.sun'] === 'above_horizon') {
        var weather_icon = weatherIconsDay[condition]; 
      } else {
        var weather_icon = weatherIconsNight[condition]; 
      }
      
      return '<img src = "https://cdn.jsdelivr.net/gh/bramkragten/weather-card/dist/icons/' + weather_icon + '.svg" width="50" height="50" />'
    ]]]
styles:
  grid:
    - grid-template-areas: '"icon n"'
  card:
    - overflow: visible
    - background: transparent
    - border: none
    - width: 100px
    - padding: 0px
  name:
    - justify-self: right
    - font-size: 1em
    - padding-right: 15px
    - padding-left: 0px
  custom_fields:
    icon:
      - padding-right: 0px```

#

And, now that I've taken a chance to look at the list of icons, I know exactly where to download them all in a .zip. They're the same icons the Dev used. It is what I used for my initial test before all the coding... https://www.amcharts.com/free-animated-svg-weather-icons/

empty scaffold Dec 12, 2023, 12:05 AM

#

mhmmm its not showing up in my floorplan

sour condor Dec 12, 2023, 12:06 AM

#

Do you need to add something like this? yaml style: left: 40.3% top: 37.7% width: 4%This is from your yaml posted above for the lightbulb.

empty scaffold Dec 12, 2023, 12:07 AM

#

😉 makes sense

#

and works

#

how to make it bigger?

sour condor Dec 12, 2023, 12:10 AM

#

Take a look at the styles: then card: section. I had the width set to 100px.

empty scaffold Dec 12, 2023, 12:12 AM

#

this i tried but its making that longer but not bigger

#

and hight: 300px has no effect

sour condor Dec 12, 2023, 12:14 AM

#

Well, it does but not in the sense that we're looking for. Line 45 (beginning return '< img) has hard-coded icon size of 50x50.

#

I changed to 100x100 and font-size (near the bottom) to 2em.

empty scaffold Dec 12, 2023, 12:17 AM

#

#

looks very good now

sour condor Dec 12, 2023, 12:17 AM

#

I'm not sure how this is going to play with scalability though.

empty scaffold Dec 12, 2023, 12:18 AM

#

font size 2em, icon 150x150

#

and width 300px

sour condor Dec 12, 2023, 12:18 AM

#

Do you want the decimal showing in the temperature or would you rather a whole number instead? (I forgot C likes to use decimals spaces.)

empty scaffold Dec 12, 2023, 12:19 AM

#

decimal is fine

#

making the browser smaller

sour condor Dec 12, 2023, 12:19 AM

#

Yeah. I was afraid it was going to do that.

empty scaffold Dec 12, 2023, 12:20 AM

#

means when i open the plan on the phone it would also not scale down

#

same problem i have with an "clock" what i was showing before

#

what i dont understand is that its working at all other button cards

sour condor Dec 12, 2023, 12:23 AM

#

Try changing the icon 150x150 to 100% without quotes: width=100% height=100%. I think that will fix the icon. Kind of. The font size should scale.

#

We hard-coded some dimensions that I think need to be addresses.

empty scaffold Dec 12, 2023, 12:25 AM

#

sour condor Dec 12, 2023, 12:25 AM

#

Remove the width from the card section (where you put 300px). Let's let it fit itself automatically and see what it does.

empty scaffold Dec 12, 2023, 12:26 AM

#

#

sort of dissapering

sour condor Dec 12, 2023, 12:26 AM

#

okay. wasn't expecting that.

#

Remember when you added this part:yaml style: left: 40.3% top: 37.7% width: 4%What happens if you change the width here. I think this is part of the picture-element card. Also, your previous example also has size: 60% which I don't think is part of the custom:button-card.

empty scaffold Dec 12, 2023, 12:31 AM

#

changed width to 30

#

size: 60% is not changing anything

#

            style:
              color: '#ff3e23'
              filter: opacity(60%)
              font-family: Days One
              font-size: 1000%
              left: 92%
              top: 18%
              pointer-events: none
              z-index: 1
              width: 20%
            type: state-label```

#

same problem i have also with this entity

#

its also not scaling

#

even if everything is in %

sour condor Dec 12, 2023, 12:46 AM

#

Can a font-size be set with a percentage? I think it has to be a value in px or em.

#

From what I understand, em is basically a percentage of a given area.

empty scaffold Dec 12, 2023, 12:49 AM

#

Good question, i dont really know. But so far i am already Happy with the result and thank you soooo much! If you like we can continue tomorrow. I might be in a different time zone;)

#

1:49 😉

sour condor Dec 12, 2023, 12:50 AM

#

I'm in the US (EST). 19:49 here.

#

Feel free to message me or add to the thread here.

empty scaffold Dec 12, 2023, 12:51 AM

#

Maybe over night anybody else has an idea or had that problem before

sour condor Dec 12, 2023, 12:52 AM

#

I've seen a bunch of questions regarding picture-elements card asked but I've never been able to help since I don't have experience with it.

empty scaffold Dec 12, 2023, 12:52 AM

#

Workaround would be seperate Dashboards but that should be the last option

#

Its a quite nice thing with that floorplans

sour condor Dec 12, 2023, 12:54 AM

#

I live in a rather small apartment. My floorplan would be boring. 😆

empty scaffold Dec 12, 2023, 12:55 AM

#

But since my programming skills are like watching YouTube and following instructions or geht some code and try to implement that, its much Work to understand

#

I have also only appartment

#

And i must day its not boring at all

sour condor Dec 12, 2023, 12:56 AM

#

I pick up stuff here and there. Doing "projects" like this help me learn because it is something that I wouldn't have thought of doing but will be useful to understand.

empty scaffold Dec 12, 2023, 12:57 AM

#

I will DM you tomorrow some Screenshots 😉

sour condor Dec 12, 2023, 12:57 AM

#

Cool. I'll let you get to bed. Talk to you later.

empty scaffold Dec 12, 2023, 12:57 AM

#

Maybe i get you interested 🤪

#is it possible to have any animated