Dilbert66/esphome-vistaECP

Alarm card working in Safari, FIrefox and IOS but not in Chrome

Closed this issue · 2 comments

When adding an alarm panel with the code from the repository (alarm-keycard-card.js), I am able to view the alarm panel in Safari and Firefox and on my iPhone. However, in Chrome, I am getting the error "Custom element doesn't exist: alarm-keypad-card". (I've also tried chrome-derived browsers such as Brave and they have the problem too.)

No changes to your .js file. I did have to modify the first example text (HA) for my sensor name and to change the names of the various sensors (they don't match the names in the VistaAlarm.yaml file)

Full error is:

type: custom:alarm-keypad-card
title: ' 586 Alarm'
unique_id: vistaalarm
disp_line1: sensor.line1_ln1_1
disp_line2: sensor.line2_ln2_1
scale: 1
service_type: esphome
service: vistaalarm_alarm_keypress_partition
status_A: AWAY
status_B: STAY
status_C: READY
status_D: BYPASS
status_E: TROUBLE
status_F: CHIME
status_G: ''
status_H: ''
sensor_A: binary_sensor.away_arma_1
sensor_B: binary_sensor.stay_arms_1
sensor_C: binary_sensor.ready_rdy_1
sensor_D: binary_sensor.bypass_byp_1
sensor_E: binary_sensor.trouble_trbl_1
sensor_F: binary_sensor.chime_chm_1
button_A: STAY
button_B: AWAY
button_C: DISARM
button_D: BYPASS
button_F: <
button_G: '>'
button_E: A
button_H: B
cmd_A:
keys: '12343'
partition: 1
cmd_B:
keys: '12342'
partition: 1
cmd_C:
keys: '12341'
partition: 1
cmd_D:
keys: 12346#
partition: 1
cmd_E:
keys: A
partition: 1
cmd_H:
keys: B
partition: 1
cmd_F:
keys: <
partition: 1
cmd_G:
keys: '>'
partition: 1
key_0:
keys: '0'
partition: 1
key_1:
keys: '1'
partition: 1
key_2:
keys: '2'
partition: 1
key_3:
keys: '3'
partition: 1
key_4:
keys: '4'
partition: 1
key_5:
keys: '5'
partition: 1
key_6:
keys: '6'
partition: 1
key_7:
keys: '7'
partition: 1
key_8:
keys: '8'
partition: 1
key_9:
keys: '9'
partition: 1
key_star:
keys: '*'
partition: 1
key_pound:
keys: '#'
partition: 1
text_1: 'OFF'
text_2: AWAY
text_3: STAY
text_4: MAX
text_5: TEST
text_6: BYPASS
text_7: INSTANT
text_8: CODE
text_9: CHIME
text_star: READY
text_pound: ''
text_0: ''
beep: sensor.beeps_bp_1
view_pad: true
view_display: true
view_status: true
view_status_2: true
view_bottom: false
button_left: false

There is some chatter about getting this error on Chrome for other components. Discussion like https://stackoverflow.com/questions/59398462/customelements-not-working-in-google-chrome.

Not a javascript programmer, so I'm not sure how to fix the code.

I use chrome all the time and no issues. Try pressing F12 to open the debug console and then F5 to refresh the page with the keypad view. Error messages should show in the console window.