Home Assistant Cast with custom cards

Ive been playing around with HA Cast (which is pretty great on a Google home/nest hub) – but cant get custom cards working.
I get the dreaded red entity not found error.
The views work fine on another device. Im on 0.98.2, but set the cors allow configuration just to be sure.

Have i missed something?

TIA!

The custom cards need to be updated for cast. Which ones?

I have got the same problem. I get the same error at all my custom cards, some card for example like:

  • Decluttering-card
  • Button-card
  • Mini-graph-card
  • Simple-weather-card

Could be - the 2 ive tried with so far are:
clock-card
custom-fan-card

Is there some particular bit of code i need to add to them to get it working ? Ive only found high level answers, not any sort of detail.

The best thing is to reach out to the dev of the card. There are issues with the lit element and maybe even the local files they might be pulling…

var LitElement = LitElement || Object.getPrototypeOf(customElements.get("hui-view"));

if the corresponding bit at the end doesn’t say “hui-view” you can try editing it to say that… and make sure you change the version number in lovelace resources or it won’t load it.

That might make it work. I my case I also had to wrap a file URL to make it work as well.

Here too I can’t get my custom cards to work anymore with casting to Google Nest. They did work earlier, but suddenly I face the “red error” screen. Cards should be up-to-date based on HACS (v.0.23.2) information. All views work nicely when viewing using a standard web browser.

Any idea?

Yeah, the LitElement fix from @DavidFW1960 does not work anymore.

Debugging the Nest Hub is quite difficult. Maybe @balloob has an idea?

Um… scuse me?? It’s working here…
Try clearing cache

Could you provide the link to the custom card which is working for you?
I’ve surrounded my code with

((LitElement) => {
class MyCustomCard extends LitElement {
// [...]
}
customElements.define('my-custom-card', MyCustomCard);
})(window.LitElement || Object.getPrototypeOf(customElements.get("hui-view")));

The Nest Hub still says, that it cannot find the custom-component.

My BOM weather card you stole the code from lol…
Did you clear cache? If the card was working it should still be.
Use F12 and right click refresh and empty Cache and Hard Reload. Then refresh a few times.

My BOM weather card you stole the code from lol…

Got it from xiaomi vaccum card, but nice try… “lol”.

Did you clear cache? If the card was working it should still be.

Actually, all custom-cards are not cached due to the Cache-Control header. However, I cannot hard-reload the lovelace cast on my Google Nest Hub. I probably try to restart the nest hub just to make sure there is nothing cached in between…

Did you not say that 2 posts up?

In case that someone gets here. It seems like you have to do the following steps to make your custom-card work:

  • add CORS setting for cast.home-assistant.io
  • ensure LitElement stuff from suggestion of @DavidFW1960 in #5
  • add or change the custom-card Javascript to be located at /local/community/custom-card/custom-card.js instead of /hacsfiles/custom-card/custom-card.js

It seems that the /hacsfiles/ directory is not directly handled from the http component of home-assistant and thus does not have proper CORS headers.
I’ve changed the location to /local/community/* and now I can see my custom-card on my Nest Hub. :partying_face:

Probably /hacsfiles is not supported by nabu-casa in combination with CORS :man_shrugging:

3 Likes

thanks Boesing, changing the location of the hacs files gets me one step further. Now custom cards work when casting from https://cast.home-assistant.io and through the chrome browser. Casting through a script or automation still doesn’t work reliable and no custom cards.

home assistant docker, nginx proxy docker

Any news on this topic? Does anyone have a final recipe on full support for casting custom-cards?

1 Like

Hi, I’m having a similar issue: I added and configured the sun-card custom card from here: https://github.com/mishaaq/sun-card
It works perfectly on my browser (Chrome) but when i cast the Lovelace Tab I get the “card doesn’t exist” error. I tried to add to my configuration.yaml the following lines to the http: section

  cors_allowed_origins:
  - https://google.com
  - https://www.home-assistant.io

but that didn’t help. My plugin is located in /home/homeassistant/.homeassistant/www/community/sun-card (my HA is venv), it was installed via HACS. What else can I do? I would really love to see that in my Nest Hub… Thank you!

I do have the same problem. I am trying to cast on my Android TV.
I tried to change the custom cards to community, but it does not load them at all … is there any remaining setup to make sure the ‘transfer’ from hacsfiles ?

Hello community,
this is my first post.
I am new on HA since a few months and i still have this issue with casting to a Google Nest Hub.
At the browser all the custom cards are ok.
I have tried all the descriptions in this thread and also out from other communities (github), but it still will not render the custom cards at the cast.
Does anybody have an idea?
My system is running on a rpi4 as OS 2021.3.4 and frontend 20210302.6
Thanks at all!

Anybody any further on this?
Some of the cards mentioned above are still not working today.

Yeah, just checked, many custom cards is not working, and icons custom packs also too…