Custom Alarm Panel Card does not display properly in Google Chrome

[crumbliness]

Custom Alarm Panel Card from this project does not display properly in Google Chrome Version 119.0.6045.106 (Official Build) (64-bit), Windows 11. Message: "Custom element doesn't exist: alarm-keypad-card." Sorry but I don't know when it stopped working.

Working fine in

• Brave Version 1.59.124 Chromium: 118.0.5993.117 (Official Build) (64-bit)
• Microsoft Edge Version 118.0.2088.76 (Official build) (64-bit)
• Android 14 Chrome
• possibly others

[Dilbert66]

What branch? If you are using master, I've pushed an updated version.

[crumbliness]

Master - Aug22 Vista-12P ESP8266 NodeMCU

I'll try the new card

[5hortCircuit]

I am having the same issue. Appears to show fine with Edge, but chrome on my desktop/laptop and cellphone doesn't render the card. Tried the new card and it didn't seem to resolve it for me. Not sure if this is helpful but below is the code from the Chrome Javascript Console.

Uncaught ReferenceError: Polymer is not defined at alarm-keypad-card.js:3:31 default_view:1 Uncaught (in promise) Error: A listener indicated an asynchronous response by returning true, but the message channel closed before a response was received Virtualizer.ts:741 Uncaught (in promise) TypeError: Cannot destructure property 'scrollTop' of 'this._scrollerController' as it is null. at y._correctScrollError (Virtualizer.ts:741:14) at y._finishDOMUpdate (Virtualizer.ts:546:10) at y._updateDOM (Virtualizer.ts:538:10) at y._handleLayoutMessage (Virtualizer.ts:603:12) at _._hostSink (Virtualizer.ts:441:44) at _._sendStateChangedMessage (BaseLayout.ts:478:10) at _._reflow (BaseLayout.ts:364:10) at _._reflow (flow.ts:491:11) at _.reflowIfNeeded (BaseLayout.ts:257:12) at y._updateLayout (Virtualizer.ts:563:21)

I am not familiar with Javascript, but a google search on the first line shows that maybe this was written in Polymer? "Polymer was recently deprecated in HA. If a card still uses Polymer, it needs to be rewritten to use Lit or plain Javascript instead." Hope this is helpful to someone smarter than me. lol

[Dilbert66]

Like I noted above you need to use the new card from dev or the new version on master. You are still using the old polymer version.

[crumbliness]

Tried the new card from mater and had the same display issues in Google Chrome Version 119.0.6045.106. Also tried to to install master and dev on a new ESP8266 NodeMCU device and could not compile/install either. Still trying to digest the errors reported. ESPHome 2023.10.6

[crumbliness]

Tried again using master and was able to compile/install with a handful of warnings ... no explanation for the change.

[crumbliness]

The alarm-panel-card.js file in my /config/www directory of homeassistant installation is using Lit ...

[Dilbert66]

If you look at the dev readme, it explains what you need to do to refresh the javascript load. Due to browser caching, you need to make it look like a new file. The easiest is to add ?id=1 to the file name where you will increase the =1 everytime you load to make it new again.

eg: /local/alarm-keypad-card.js?id=xx

[crumbliness]

Thanks! It's working and I learned something.

[5hortCircuit]

Just to clarify the new card requires the updated ESPHome installation? Or can the new card be used with the old ESP software?

[Dilbert66]

The card works with both new and old versions

[5hortCircuit]

@Dilbert66 I think you have git merge leftovers in the dev branch

[Dilbert66]

argh... Tks! Corrected and pushed