Custom UI: Weather state card


I just installed 0.70 and can confirm that the card works as before


@Yevgeniy I like the new card, especially clicking on it for more info! (I have to go in and edit the units to change to miles and wind directions to use N/S/E/W, but that’s easy.) I updated to HA 0.70. I’m so frustrated because I’m still having the same issues with the custom weather card and my iOS devices. Still getting the
service system_log/write called problem - now the related error in the log looks like this:

ERROR (MainThread) [frontend.js.es5.201805264] http://hassio.local:8123/frontend_es5/app-1277c62fbd5787659346fe106c01cc31.js:2:105156 TypeError: Attempted to assign to readonly property.

If I comment out custom-weather-card.html in frontend.yaml, the issue goes away. All my other Custom UI stuff works great. It’s definitely something to do with the weather card, I just wish I knew what! :persevere:


Working fine here on IOS app. Try opening your HA interface on Safari and hard reload it then open IOS app again.


@SouzaaThales Thank you - but that didn’t work either. By hard reload, do you mean just hit the reload icon in the Safari browser bar? I don’t know what I’m doing wrong. I go into Settings and and clear History and Website Data, open Safari, get the error, reload, and get the error again. Safari, Chrome, iOS app all giving me the same error on my iDevices. But it works on my PC with no issues.

What version of iOS are you using? I’m still on 10.3.3. If everyone else is on iOS 11, maybe it has something to do with that?


I’m on 11.3.1. Have you tried on MacOS Safari?


Thanks for that information. I wonder if it could have to do with the version of Safari. I don’t have a Mac, just iPhone and iPad. Seems like mobile Chrome should work; I’m using Chrome on my Windows PC.


Not that it helps, but I’m seeing similar with other Custom UI projects, even after upgrading them. I’ve gone back to 0.69 for now - will investigate tomorrow (wife didn’t want HASS offline this evening)


Thanks, Greg - it helps to know I’m not the only one! Although rolling back won’t help me - I had the same issue on 0.67.1. I was hoping moving to 0.70 might help. Good luck!



after changing the card to your adaptation, 3 strange things happen…

My regular Open weather map isnt displayed any longer ,
secondly, I see this in the logs:


3d: the large animated Icon isnt displayed any longer in Safari/Mac, while it does show on Chrome/Mac

28 00
the smaller details are displayed differently also, which is kind of peculiar? Could this be a cache issue, i did hit the reload button a few times
the weather card isnt configured with OWM though , so how could this be happening? Im using the Yweahter info for the card.



It looks like you have not cleared your browser’s cache. Have you replaced only custom-weather-card.html or made some other changes?
If you do not use Openweathermap then use the code from this post


does this mean your card uses the OWM? that would explain why my regular card got lost :wink:

will check the other card, but for my info: what does it change compared to the original one that started this thread? btw I tried to click for more-info, but that only shows the same info the regular card does?

changed the card, and indeed I can see more-info and the OWM still there.
No large icon yet though:


must admit I changed the location of the icons in the html, to point to my folder. Seems not to trouble the smaller icons…
your thought about the refresh in Chrome was correct: now i dont see the large icon there either :wink:


Custom weather card uses the weather component that you set here

      custom_ui_state_card: custom-weather-card
        weather: weather.yweather
        sun: sun.sun

Other weather components are not used.
All the changes I have made I have tried to describe in my post here.
Check whether you forgot to add sun to config?


i did forget…

btw, on iPhone, the larger animated icon is displayed, but maybe that also still the older cached view, since i cant get a more info to popup.

Here’s what i see now in the desktop browsers. notice the difference between safari and chrome on the smaller grey icons. Is that expected behavior?

Chrome left, Safari to the right


I see that you need to clear the cache in all browsers :wink:. Or use ctrl + F5 for this


on a Mac here…

the sun icons are here, nice!
as is the larger icon.
Still blurry with the card in full view… Strange this having to slide it halfway down to the smaller icons, to have the large icon show focussed:


any one ever found the solution for this?


Chrome browser? Try to disable hardware acceleration:


no, as a matter of fact it’s the Safari browser showing blurry, when the smaller icons get in view.



If anyone is interested, I modified this awesome weather card so it uses mdi icons across the board, as well as moved around the temp and the current weather icon.

Happy to share the html if someone can show me how to embed the code :slight_smile:


Could be quite unwieldy. Perhaps you could post it on and then link it here?


Same here on IOS when I scroll up

Works fine on my PC and Mac