search

Dilbert66 / esphome-vistaECP

This is an implementation of an ESPHOME custom component and ESP Library to interface directly to a Safewatch/Honeywell/Ademco Vista 15/20 alarm system using the ECP interface and very inexpensive ESP8266/ESP32 modules .
GNU Lesser General Public License v2.1
124 stars 21 forks source link

Custom Alarm Panel Card does not display properly in Google Chrome #113

Open crumbliness opened 10 months ago

crumbliness commented 10 months ago

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.

image

Working fine in

Dilbert66 commented 10 months ago

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

crumbliness commented 10 months ago

Master - Aug22 Vista-12P ESP8266 NodeMCU

I'll try the new card

5hortCircuit commented 9 months ago

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 commented 9 months ago

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 commented 9 months ago

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 commented 9 months ago

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

crumbliness commented 9 months ago

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

Dilbert66 commented 9 months ago

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 commented 9 months ago

Thanks! It's working and I learned something.

5hortCircuit commented 9 months ago

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

Dilbert66 commented 9 months ago

The card works with both new and old versions

5hortCircuit commented 9 months ago

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

image

Dilbert66 commented 9 months ago

argh... Tks! Corrected and pushed