Lovelace: Alarm card

Romquenin · March 6, 2019, 8:41pm

My buttons are displaying weird since 0.88 upgrade, i have lost the icon in the top right corner.

The card is still usable, but it looks not good now

Any idea to solve this? Thanks.

JumpMaster · March 6, 2019, 10:00pm

JumpMaster/custom-lovelace/blob/master/alarm_control_panel-card/alarm_control_panel-card.js

class AlarmControlPanelCard extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    this._icons = {
      'armed_away': 'mdi:shield-lock',
      'armed_custom_bypass': 'mdi:security',
      'armed_home': 'mdi:shield-home',
      'armed_night': 'mdi:shield-home',
      'disarmed': 'mdi:shield-check',
      'pending': 'mdi:shield-outline',
      'triggered': 'hass:bell-ring',
    }
  }

  set hass(hass) {
    const entity = hass.states[this._config.entity];

    if (entity) {
      this.myhass = hass;

This file has been truncated. show original

Romquenin · March 6, 2019, 10:15pm

Thank you @JumpMaster

AhmadK · March 7, 2019, 1:28pm

I tried your card, and have 1 question and one issue.

It looks exactly the same as the standard one, is it just a coincidence?
It does not show the keypad when armed, tried both “hide_keypad: false” and “show_keypad: true”
Here how it looks like

04%20(2)1455×727 53.4 KB

My code is

type: 'custom:alarm_control_panel-card'
entity: alarm_control_panel.house
show_keypad: true

I run Hass.io 0.89.0, browser Chrome 72.0.3626.121 64-bit
I’m hoping to get better buttons than those you can see on the right of my screenshot.

JumpMaster · March 7, 2019, 4:31pm

Hi,

I’m not op. But yes the idea is to look like the original with extra features.

The keypad should show if you’ve defined code = 1234 (or another code) in your configuration.yaml

AhmadK · March 7, 2019, 4:53pm

I know that you’re not the op
Do you mean that I need to define code inside my alarm entity?
If yes, then it’s already there (I’m using this alarm)
And the original one shows the keypad, but this one doesn’t…

JumpMaster · March 7, 2019, 4:54pm

Might be a new “feature” in 0.89. I haven’t upgraded yet.

Wilky13 · March 11, 2019, 3:51am

Same here

AhmadK · March 11, 2019, 7:23am

Too many “nice” features from HA team recently…
How can we find out for sure?

jerrychong25 · March 11, 2019, 7:53am

Looks like all having issue on HA 0.89.1. Same for my side.

Comparison between Original 0.89.1 (alarm-panel) and Lovelace 0.89.1:

Hope this can be solved asap.

Romquenin · March 11, 2019, 9:26am

Hello @Wilky13, use the code from @JumpMaster and empty your cache. It worked for me.

jerrychong25 · March 11, 2019, 10:05am

Hi,

Just to confirm, you are testing on HA 0.88 or 0.89?

Thanks.

JumpMaster · March 11, 2019, 11:35am

I have upgraded to 0.89.0 and 0.89.1. My version of the card is working without any issues.

jerrychong25 · March 12, 2019, 2:18am

Finally it is working now.

Looks like it is due to browser cache issue, cause this weird displays issue.

Anyway, is there any way I can change the label icon to old big icon for keypad like below?
43046718-b51efbc4-8dd5-11e8-83ad-330dbbb51b1a

Thanks.

JumpMaster · March 12, 2019, 9:03am

You mean the icon/shield in the top right corner which shows the arm state? The new icon is the same size except the circular border is larger to accommodate the state text.

jerrychong25 · March 12, 2019, 10:14am

Hi,

Sorry for wrong explanation that caused confusion.

I am referring to following keypad style (Right hand side).

Thanks.

JumpMaster · March 12, 2019, 10:31am

That makes sense. It was caused by a breaking change in 0.88. I’m unsure how to fix it but the official alarm card changed too.

Note for Lovelace custom card developers: if you relied on the availability of <paper-button> in your code, you will have to update it to <mwc-button> to get a similar component.

jerrychong25 · March 13, 2019, 7:05am

Thanks for the info.

I am not aware of this official changes.

gurbina93 · March 17, 2019, 11:21am

Quick fix:
Open the .js file and replace all “paper-button” for “mwc-button” then you will be good to go.
Don’t forget to increase the version number in your dependency declaration.

jerrychong25 · March 18, 2019, 3:18am

Hi,

If I only wanna to change this keypad section, which part of “paper-button” in .js file I should change?

Thanks.