Custom Dark Sky Animated Weather Card

Share your Projects! Dashboards & Frontend
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…

66

that looks correct… the version numbering is a lovelace thing as far as I know…

1 Like
67

Awesome. That fixed it. Thanks.

68

Any chance you might make this a custom-component so it can be tracked and updated via the tracker-card and custom updater? That would have made it a one-click update after 0.77.2 broke it… Just a suggestion as it will help everyone keep up-to-date easily.

Many thanks for this great card!

2 Likes
69

Hey there,

thank you for the Dark Sky adaption of the weather card!

I had some troubles getting it to work initally, though.
Maybe this helps other getting it to work until there is a weather card that supports all provider.

Here’s what I did:

  1. install the normal weather card as described in the other thread ==> worked (but not 100% for darksky)

  2. installed this dark sky weather card ==> did not work due to “could not read property length of undefined” message

  3. Changed “hass.config.unit_system.length” to “hass.config.core.unit_system.length” as described above since I’m not yet on the newest HA version ==> card worked!

  4. removed the other weather card from the config ==> dark sky card CSS broke

  5. inlined the CSS as described above ==> did not work

  6. fixed the code to actually include the style element after creating it

    card.appendChild(style);

    ==> card worked again

There were, however, still CSS issues because the google calendar card uses partly the same CSS class names. For some reason the cards do not isolate their CSS properly.
So, I changed the dark-sky-weather-card.js to set a class name to the top element

 const card = document.createElement('ha-card');
 card.className = "darkSky";

And then changed the CSS so that classname is always prepended:

                .darkSky .clear {
                    clear: both;
                }
                
                .darkSky .card {
                    margin: auto;
                    padding-top: 3em;
                    padding-bottom: 1em;
                    padding-left: 1em;
                    padding-right: 1em;
                    position: relative;
                } ...

After that, both Calendar and weather card looked fine.

2 Likes
70

I get Uncaught TypeError: Cannot read property ‘unit_system’ of undefined hassio.
It fails to find the custom weathercard and from what i can understand i have to change permissions. is there a solid guide how? I run my homeassistant on a synology nas

71

Check item 3 of my post above. Whether or not this error appears depends on the version of HA as they’ve apparently refractored Something.

72

I’m getting the same error, using the latest version of hass.io as of 8/8/18. Tried it both with core an without, but keep getting the same error. Running on a raspberry pi.

73

Odd though, when I try it from Chrome on my mac, the error in the js at 17:43. When I try it from my iPhone, the error is at 17:42

https://***.***.com/local/custom_ui/dark-sky-weather-card.js?v=1.2:17:43 Uncaught TypeError: Cannot read property 'unit_system' of undefined
74

After the change from “with core” to “without” core, make sure to bump the version number of the card in your lovelace yaml. Otherwise, yaml does not re-render the card.

  - url: /local/custom_ui/dark-sky-weather-card.js?v=6
    type: js
75

This works great after a few tweaks, thanks!

76

I’ve been pretty diligent in changing the version number after I make a change (hopefully decimals count). I do realize though that i have a caching issue with safari, chrome, and firefox. Manually clearing the browser cache doesn’t seem to make it reload the .js file.

Is there a way that I can just hard code the length unit to try to bypass this block of code (for the purpose of troubleshooting)?

77

That I do not know… Sorry.

78

Well this is frustrating! I had this working back in July when I was playing with Lovelace. Now I am moving fully over to Lovelace I get this error. Can anyone help? (hassio and v0.76.1)

Log Details (ERROR)

Tue Sep 11 2018 14:12:29 GMT+0100 (British Summer Time)

http://192.168.1.25:8123/local/custom_ui/weather-card.js:17:50 Uncaught TypeError: Cannot read property 'length' of undefined
79

I had this and had to change line 17 of weather-card.js (actually of my darksky version) from
const lengthUnit = hass.config.unit_system.length;
to
const lengthUnit = hass.config.core.unit_system.length;

BTW I’m using straight home-assistant rather than HASS.IO

Since I upgraded to 0.77.3 though it is broken again! ;-(

80

For release 0.77.3 it is necessary to add 127.0.0.1 as a trusted network to fix again.