Custom Dark Sky Animated Weather Card

[jusdwy]

based on that error, it looks like you aren’t using the latest version of my code, or are trying to mix and match in code from the thread.

Also are you including

- url: /local/custom_lovelace/dark-sky-weather-card.js?v=4.2
  type: js

twice in your ui-lovelace.yaml resources section?

Here’s the link to my post that has all the working code. No need to add stuff from the thread. Just copy/paste into the relevant parts in your HA config. Replace the .js and .css files with my versions (you can save your old versions with different names if you want).

Custom Dark Sky Animated Weather Card

I also added the “Feels like” apparent temperature to this card. But that snowballed into learning some JS and CSS, and a lot of practice editing the card and moving stuff around. This resource was really helpful: https://www.w3schools.com/default.asp Ended up with this as the result. [screenshot] moved icon to right, and temperature to left (alignments were less affected by different sized columns and viewing devices) added apparent “Feels like” temperature moved summary up from the bottom,…

[mtannerauo (Michael Tanner)]

Sorry for the late reply, I used the js above an modified it as per the other thread.

[jusdwy]

Updated my original post with my latest code which makes it easy to swap out the hardcoded language elements like the day names, feels like, today and forecast. Now they are set in ui-lovelace.yaml so it should eliminate any .js editing.

If you’re already using my code, make sure you look through the whole post. There’s changes to both the .css and .js files.

Here’s the post

Custom Dark Sky Animated Weather Card

I also added the “Feels like” apparent temperature to this card. But that snowballed into learning some JS and CSS, and a lot of practice editing the card and moving stuff around. This resource was really helpful: https://www.w3schools.com/default.asp Ended up with this as the result. [screenshot] moved icon to right, and temperature to left (alignments were less affected by different sized columns and viewing devices) added apparent “Feels like” temperature moved summary up from the bottom,…

[MediaCowboy]

entity_feelstemp: sensor.dark_sky_apparent_temperature

Would not work for me in when setting this up. Changed it to the following and it started working.

entity_feelstemp: sensor.dark_sky_apparent_temperature

[jusdwy]

@MediaCowboy

entity_feelstemp: sensor.dark_sky_apparent_temperature

Would not work for me in when setting this up. Changed it to the following and it started working.

entity_feelstemp: sensor.dark_sky_apparent_temperature

huh? looks the exact same.

[MediaCowboy]

Sorry it is. I didn’t paste the right change.

entity_apparent_temperature: sensor.dark_sky_apparent_temperature

This is in my ui-lovelace.yaml file. I am using the code from this post.

Custom Dark Sky Animated Weather Card

I also added the “Feels like” apparent temperature to this card. But that snowballed into learning some JS and CSS, and a lot of practice editing the card and moving stuff around. This resource was really helpful: https://www.w3schools.com/default.asp Ended up with this as the result. [screenshot] moved icon to right, and temperature to left (alignments were less affected by different sized columns and viewing devices) added apparent “Feels like” temperature moved summary up from the bottom,…

[jusdwy]

@MediaCowboy

Sorry it is. I didn’t paste the right change.

entity_apparent_temperature: sensor.dark_sky_apparent_temperature

This is in my ui-lovelace.yaml file. I am using the code from this post.

i can’t imagine why that would work unless you’ve edited or are using a different .js file than the one I posted. The .js file is looking for this.config.entity_feelstemp on line 103. Changing it to entity_apparent_temperature should throw an error.

[MediaCowboy]

Im using the js file you linked to in post 182. I do not know what is going on. When I tried with entity_feelstemp it keep giving me an error and would not load the lovaelace panel. Changed to to entity_apparent_temperature in the love lace ui and it worked.

[Mariusthvdb (Marius)]

as long as you have both the const and calling line in the innerHTML declaration use the same, its of no consequence why you call them…

I use this too:

const apparent_temperature = hass.states[this.config.entity_apparent_temperature].state;

and

    <li><span class="tempa">Feels like ${apparent_temperature}</span><span class="unitc"> ${getUnit('temperature')}</span></li>

in setup of the component:

  - type: 'custom:weather-card'
    entity_weather: weather.woensdrecht
    entity_sun: sun.sun
    entity_apparent_temperature: sensor.jagti_windchill

[jusdwy]

well, i’m happy it’s working, but you definitely aren’t using my .js file. maybe it’s a cache issue? or you have several different dark-sky-weather.js files and are pointing to the wrong one? regardless, if it’s working and you’re happy then no issue.

and as @Mariusthvdb says in the post below it doesn’t really matter what you call it as long as it’s the same in both places. Which is why you’re getting the error when you try to use the code from ui-lovelace call (entity_feelstemp) with a .js file that is looking for entity_apparent_temperature.

[MediaCowboy]

Okay well I don’t know what is going on. If i use my desktop I have to have entity_apparent_temperature but my phone want entity_feelslike. I have never had this component until today.

[jusdwy]

update the version number of the javascript file in your ui-lovelace.yaml file.

i.e if you have

  - url: /local/custom_lovelace/dark-sky-weather-card.js?v=4.2
    type: js

change it to

  - url: /local/custom_lovelace/dark-sky-weather-card.js?v=4.3
    type: js

or clear your cache and reload the page.
either your phone or your computer is correct, and the other one is working off a cached version. changing the version numbering should force them both to reload the page.

[revin]

Hi @jusdwy,

first of all, thanks for your contribution.

I’ve installed your custom card (4.4) and works perfect in Chrome but It seems that there is some problem with Firefox.

Thanks.

[jusdwy]

Yikes!
I don’t use Firefox. Not sure what would make it display so different.

[jusdwy]

What version of Firefox are you using? The Lovelace page has a note about older versions not working right.

Lovelace UI

Otherwise, I don’t know enough about js / css to know what might cause the issue. As far as I can tell I’m not using any css tags or formatting that aren’t supported by Firefox.

Try and install the basic version of this card (the top post in the thread), and see if that works with Firefox. If that one works, then it’s definitely an issue with my code, and can be more easily tracked down.

[revin]

I was using an ESR version (60.0) and upgraded to last Quantum version (63.0.3) before posting as I saw that comment. Both versions make the same effect.

This weekend I’ll try to make some changes and I’ll come back with the results.

From my side, don’t worry. I’ll use chrome from now on.

[Narfel (Narf Elchen)]

Just a heads up for non-developers (like me) using chrome. If you have trouble getting the card or more importantly new edits to show, sometimes a cache reset isn’t enough. Even changing the version number in the string seems to stick sometimes for some reason. Other than using incognito mode in Chrome i have found out that deleting “Hosted app data” and “Content settings” along with “Cached images and files” is what you are looking for to delete in “Clear browsing data”. That won’t touch cookies and saved passwords (that was a pain for me)
Thanks @jusdwy, you edited in exactly what i wanted

[jusdwy]

i find that turning on chrome developer tools (F12 or ctrl-shift-i) and then right clicking the page refresh button (empty cache and hard reload) works everytime.

[Mariusthvdb (Marius)]

would you know how to set a color on the card header?

class WeatherCard extends HTMLElement {
  set hass(hass) {
    if (!this.content) {
      const card = document.createElement('ha-card');
      const link = document.createElement('link');
      card.header = hass.states[this.config.entity_weather].attributes.friendly_name;
      link.type = 'text/css';
      link.rel = 'stylesheet';
      link.href = '/local/lovelace/resources/weather-card.css';
      card.appendChild(link);
      this.content = document.createElement('div');
      this.content.className = 'card';
      card.appendChild(this.content);
      this.appendChild(card);
    }

I did try something like:

  .header {
  width: 100%;
  color: black;
  background:rgba(0, 0, 0, var(--dark-secondary-opacity));
  }

but I can’t set the class to the header…

nor can I set it in the card-modder:

  - type: custom:card-modder
    card:
      type: custom:weather-card
      entity_weather: weather.woensdrecht
      entity_sun: sun.sun
      entity_apparent_temperature: sensor.jagti_windchill
    style:
      background-image: url("/local/lovelace/images/weather-background-day.png")
      background-size: 100% 400px
      --primary-text-color: blue
      --secondary-text-color: red
      --paper-item-icon-color: blue

since I don’t know, nor can’t find the name of the style item in:
https://github.com/home-assistant/home-assistant-polymer/blob/master/src/resources/ha-style.js

[Kaostral]

Hey there, i was at version 0.79.3 and my weather card was working fine, i then upgraded to 0.83.3 and since then i have an issue with it :

local/custom_ui/dark-sky-weather-card.js:145:85 Uncaught TypeError: Cannot read property ‘state’ of undefined
which refers to :
<br><span class="lowTemp">${Math.round(hass.states[daily.templow].state)}${getUnit('temperature')}</span>

Does anyone have any idea ?