Custom Dark Sky Animated Weather Card

Share your Projects! Dashboards & Frontend
46

thank you.
I still get the card with the content everthing in one side

edited: had a wrong path for css. now it’s centered but missing the icons

47

Finish step 1 : This is original post with how to and where files located and what file needed.

Step 2: This post custom dark sky animated weather card.

48

@Sunonline
id done another path mistake. Now all working.
thank you very much for your help.

49

Nice card. Works great. Thanks.

50

For some reason it appears to not be working since the 77.2 update - any known issues?

51

Change the reference in the js code from

hass.config.core.unit_system

to

hass.config.unit_system
2 Likes
52

Thanks - only found two references in the .js code and no change unfortunately

53

thanks- sorted… had “v” number in the lovelace file that is now removed. Cheers

54

Good day, can you tell me which “v”?, which line?
thank you

55
  • url: /local/custom_ui/dark-sky-weather-card.js?
    type: js
  • url: /local/alarm_control_panel-card.js?v=0.3.2
    type: js

In the ui.lovelace.yaml file at the top under resources. The alarm card is an example of what I removed

56

thank you. so in the jss i modified this block

}

const getUnit = function (measure) {
  const lengthUnit = hass.config.unit_system.length;
  switch (measure) {
    case 'air_pressure':
      return lengthUnit === 'km' ? 'hPa' : 'inHg';
    case 'length':
      return lengthUnit;
    case 'precipitation':
      return lengthUnit === 'km' ? 'mm' : 'in';
    default:
      return hass.config.unit_system[measure] || '';
  }
};

and removed the version in resources.
no luck.
Anything else you did?

57

That was it for me - removed to references of core from that block of code and the change in the ui.yaml file. Might be a browser version? I am using chrome…

58

never, mind. My mistake.
I was modifying the js of the wrong card :wink:
apologies.

thank you for your help.

59

Log Details (ERROR)

Sun Sep 02 2018 11:49:18 GMT+1000 (Australian Eastern Standard Time)

https://my-domain.duckdns.org:30443/local/custom_ui/dark-sky-weather-card.js:17:43 Uncaught TypeError: Cannot read property ‘unit_system’ of undefined

So I had edited the dark-sky-weather-card.js as per your post. What do you mean by you were editing the wrong card???

I also never had the version number in the lovelace yaml file:

- url: /local/custom_ui/dark-sky-weather-card.js
  type: js
60

You must use a version number in lovelace.yaml. Each time the .js file changes the version number needs to change in lovelace.yaml. That’s how it knows to load the new code. Without a version number change Lovelace is not loading your changes and using the old code…

Also remember to clear your browser cache after making the changes (close any windows with HA open in them first) and then reopen HA

61

funny it was working… so url: /local/custom_ui/dark-sky-weather-card.js?v=5 ?

62

yes … assuming 5 is higher than the prior version

63

well I had no prior version… so I could use anything? 1?

64

Yep … also it will work without a version … until you change the .js file for the first time. then it wont load the changes until a version is specified

65

so change the js file to"

    const getUnit = function (measure) {
      const lengthUnit = hass.config.unit_system.length;
      switch (measure) {
        case 'air_pressure':
          return lengthUnit === 'km' ? 'hPa' : 'inHg';
        case 'length':
          return lengthUnit;
        case 'precipitation':
          return lengthUnit === 'km' ? 'mm' : 'in';
        default:
          return hass.config.unit_system[measure] || '';

Ah ok so I can use 1…

Havent seen this with another one I use…