The card is updated and no longer uses an external Lit library.
yes, sorry for my post, was just about to delete it…
now that we’re talking… can we do that with the other cards also, and have it load lit locally like this?
I have serval cards that start with:
import { LitElement, html, } from 'https://unpkg-gcp.firebaseapp.com/@polymer/[email protected]/lit-element.js?module';
and would really prefer to be internet independent on this.
can we use:
const LitElement = Object.getPrototypeOf(customElements.get("ha-panel-lovelace"));
const html = LitElement.prototype.html;
like this to simply replace that?
It depends on what version is loaded. If you use the local version you are using the same version as Home Assistant is. A lot of cards are made with older versions and would have to be updated to work with the latest Lit version.
Ok thanks! Would my take above be the way to test that?
So for you example it is loading lit-element version 0.5.2 and Home Assistant is at 0.6.2 now and will go to version 2.0.0-rc.2 in the next release.
See the breaking changes here:
wow, a whole new world opening to me…
Ive quickly tested this with the dark-sky-weather-card by @m.p.frankland and it works fine! will crosspost there too since we discussed this this morning Custom Dark Sky Animated Weather Card - #546 by Mariusthvdb , and on the power-wheel-card Lovelace: Power wheel card - #86 by VDRainer by @gurbyz where this happened too. thanks!
1 Like
Thanks for updating this and for making the icons configurable. (I had been using it with the .js file modified to point to where my icons are)
@Bram_Kragten thanks for the update! 
Question - I’m using the Met.no entity, and it doesn’t populate the forecast:
I tried setting mode to daily as with DarkSky, any ideas? Clicking the card shows there is reported a forecast:
I don’t understand your question, the forecast data is shown in the weather card?
Sorry, my bad - I mixed up what I was looking for when I wrote this one - It seems the card wants to add a “bottom temp value” below the FC, and it doesn’t look like the met platform captures this, so there is no value. I’ll remove the bottom line in the card code instead (the blue *C). Sorry for the confusion
Updated the code, if templow is not available it will not show it.
1 Like
Genious!
A follow up on customizing this then - in the “old” version I had a hack for showing expected mm rain the next hour. This could replace the visibility part as this is more useful.
Declared a sensor like this for the rain itself (true/false)
- platform: rest
resource: http://api.solweb.no/yr?location=Norge%2FAkershus%2FOppeg%C3%A5rd%2FT%C3%A5rn%C3%A5sen
name: "Rain Oppegard"
headers:
User-Agent: 'Home Assistant'
Accept: 'application/json'
json_attributes:
- rain
value_template: '{{ value_json.value }}'
And one for the rain forecast in mm:
- platform: template
sensors:
rain_forecast_oppegard:
friendly_name: "Rain 1h"
unit_of_measurement: 'mm'
value_template: >-
{{ states.sensor.rain_oppegard.attributes.rain }}
icon_template: >-
{% if is_state('sensor.rain_oppegard', 'on') %}
mdi:weather-rainy
{% else %}
mdi:weather-cloudy
{% endif %}
However, I don’t understand how to get this into the updated card, can you help?
In the old version I believe it was declared like this:
const rain = hass.states[this.config.entity_rain].state;
Followed by:
<li><span class="ha-icon"><ha-icon icon="mdi:weather-rainy"></ha-icon></span>${rain}<span class="unit"> mm next hour</span></li>
Any help is appreciated as I will then have everything in one window 
Replace
const rain = hass.states[this.config.entity_rain].state;
with:
const rain = this.hass.states[this._config.entity_rain].state;
1 Like
Worked like a charm! Thanks for all the help!
Since the last update (the one from a few hours ago) this element won’t load on my desktop (I have tried edge and firefox, cleared cache etc. but no change). However it works perfect on my iphone now, whereas it would often not load on my iphone (especially after a refresh).
The error it gives me: Custom element doesn’t exist: weather-card.
Funny that it used to work flawless on my desktop and had problems on my iphone, now it’s the other way around :P. I even tried to reinstall by getting the new files from the repo, but no change 
.
Have you tried forcing a new version? Just override the version number under resources in your ui-lovelace file:
For example:
- type: js
url: /local/custom_ui/weather-card.js?v=0.0.7
This usually does the trick for me, as it forces Lovelace to reload the card in the right version. Number could be anything, but you should increase with 1 if you do changes to the card to refresh.
TJ
1 Like
I’m getting the following error:
https://domain.com/local/custom_ui/weather-card.js:7:1 Uncaught SyntaxError: Unexpected token <
I have tried this but unfortunately to no avail. I have not touched the code. (it used to work before on my browser, but it just won’t load anymore. But it works perfect on my iphone now, which it didn’t before the update)
I am running the latest update and this is the code I used. (Home Assistant 0.86.1, weather-card 1.2.0)
- type: 'custom:card-modder'
style:
border-radius: 20px
card:
entity: weather.dark_sky
type: 'custom:weather-card'
icons: '/local/custom-lovelace/weather-card/icons/animated/'
It used to work before like I said, but when I inspect the element it gives me the following error:
< hui-error-card style=“border-radius: 20px;”>…< /hui-error-card> custom…
I imagine the problem lies with the border-radius and the card modder component. However it works perfectly fine on my ios device. I’m not very good at css unfortunately.
I get this error
https://cdn.jsdelivr.net/gh/bramkragten/custom-ui@master/weather-card/weather-card.min.js:96:16 SyntaxError: expected dot, got ‘(’