Complete installation instructions?

[hallisseyb]

I really apologise, but I am almost completely new to programming. I have followed the instructions on your GitHub page, but my setup won't recognise the alarm_control_panel-card when I try to add it to the Lovelace. I can see in the Javascript file that the alarm_control_panel-card is defined. I see the javascript file called from the Lovelace Resources, but where is the AlarmLovelaceDashboard.yaml called from? I copied your scripts, automations, config and groups into my files and added the files as suggested to the config/www folder.

Are there any steps that you would consider too obvious to list that I might not have done? As mentioned, I am completely new to this - I am using a raspberry pi 4 and a few konnected.io boards to set up a house alarm - but I really like what you have done with this alarm panel, it's exactly what I want to have!

[jcooper-korg]

Note, for this installation step, (from https://github.com/jcooper-korg/AlarmPanel/blob/master/README.md)

install it as a custom Lovelace resource in Configuration > Lovelace Dashboards > Resources. Turn on Advanced Mode in your user profile if you can't see the Resources tab. The Url of the file will be /local/alarm_control_panel-card.js, and the type is "JavaScript Module".

it will let you add an entry for a file even if that file doesn't exist. So, just seeing it on the Lovelace Resources list doesn't mean it's going to work. Did you definitely put the alarm_control_panel-card.js file in a www subdirectory within the same folder that your other configuration files are? (i.e. the www folder will be in the same folder as configuration.yaml and automations.yaml, etc)

the AlarmLovelaceDashboard.yaml isn't used directly or called by anything. It's just my example of how to set up your manual Lovelace card. In your HA dashboard, hit the ... menu in the top right corner and choose Edit Dashboard. Then hit the "+ Add Card" button. Choose manual, and then set the type like:

type: 'custom:alarm_control_panel-card'

You can copy/paste in the contents of my AlarmLovelaceDashboard.yaml there, and edit as necessary.

Hope this helps!

[hallisseyb]

John, You're a gentleman, thanks so much for the response.

1. Yes, I enabled Advanced Mode and added the Javascript as a Resource

I also copied that .js file into the www folder which is below config (I have .png images in there that work in other items on my dashboard, so I'm confident that the www folder is correct at least).

I hadn't known that I was to copy the AlarmLovelaceDashboard.yaml contents into the Dashboard Card (does it just go directly under the 'type' declaration?

BUT, even if I can copy that text into the card, the card isn't being recognised. "Custom element doesn't exist". So, my understanding is that I (we) are trying to use a custom designed 'Card' which will be the alarm keypad on the Dashboard. The code for this Card is in the .js file (saved in the www folder). It is referenced for the dashboard from the Resources tab. The final line of the .js file defines the name of the card "alarm_control_panel-card".But when I use that custom type to define the Card, it's not recognised. Due to my lack of knowledge, I'm utterly stumped at this stage. The error logs don't provide any clues either (I have errors in my groups.yaml file, but I can't imagine that they are related). Thanks again,Brendan On Monday 5 April 2021, 17:12:02 IST, John Cooper @.***> wrote:

Note, for this installation step, (from https://github.com/jcooper-korg/AlarmPanel/blob/master/README.md)

install it as a custom Lovelace resource in Configuration > Lovelace Dashboards > Resources. Turn on Advanced Mode in your user profile if you can't see the Resources tab. The Url of the file will be /local/alarm_control_panel-card.js, and the type is "JavaScript Module".

it will let you add an entry for a file even if that file doesn't exist. So, just seeing it on the Lovelace Resources list doesn't mean it's going to work. Did you definitely put the alarm_control_panel-card.js file in a www subdirectory within the same folder that your other configuration files are? (i.e. the www folder will be in the same folder as configuration.yaml and automations.yaml, etc)

the AlarmLovelaceDashboard.yaml isn't used directly or called by anything. It's just my example of how to set up your manual Lovelace card. In your HA dashboard, hit the ... menu in the top right corner and choose Edit Dashboard. Then hit the "+ Add Card" button. Choose manual, and then set the type like: type: 'custom:alarm_control_panel-card'

You can copy/paste in the contents of my AlarmLovelaceDashboard.yaml there, and edit as necessary.

Hope this helps!

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or unsubscribe.

[jcooper-korg]

that "custom element doesn't exist" can occur if the js file is missing, OR if there's any problem or syntax error in the js file itself. Did you edit/modify it at all?

my example AlarmLovelaceDashboard.yaml is a complete dashboard with two cards in it- the 'custom:alarm_control_panel-card' card, and an 'entity-filter' card. so you'd need to copy/paste just the section for the card you're adding.

[hallisseyb]

dI didn't make any changes, just copy&paste into the file in the www folder:

There are a few errors reported though.1. (not shown above) Row 39 says "Setter is defined without getter."2. Row 125 says "Use '===' to compare with 'null'." (this error is also repeated further down)3. Rows 139, 142 and 144 say "Read only." Are these real problems?

On Monday 5 April 2021, 20:33:43 IST, John Cooper ***@***.***> wrote:  

that "custom element doesn't exist" can occur if the js file is missing, OR if there's any problem or syntax error in the js file itself. Did you edit/modify it at all?

my example AlarmLovelaceDashboard.yaml is a complete dashboard with two cards in it- the 'custom:alarm_control_panel-card' card, and an 'entity-filter' card.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or unsubscribe.

[jcooper-korg]

Thanks for that. Where are those errors reported?

[hallisseyb]

In the .js file On Monday 5 April 2021, 21:43:51 IST, John Cooper @.***> wrote:

Thanks for that. Where are those errors reported?

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or unsubscribe.

[jcooper-korg]

I mean, who is reporting the errors? where are the errors logged?

[hallisseyb]

:-) Told you I was new.I'm using the File Editor Add-On and I spotted little warning triangles in the code page of this. On Monday 5 April 2021, 21:53:23 IST, John Cooper @.***> wrote:

I mean, who is reporting the errors? where are the errors logged?

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or unsubscribe.

[hallisseyb]

On Monday 5 April 2021, 21:57:29 IST, Brendan Hallissey ***@***.***> wrote:  

:-) Told you I was new.I'm using the File Editor Add-On and I spotted little warning triangles in the code page of this. On Monday 5 April 2021, 21:53:23 IST, John Cooper @.***> wrote:

I mean, who is reporting the errors? where are the errors logged?

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or unsubscribe.

[jcooper-korg]

I see. Anyway- none of those suggestions would be causing the kind of thing you're seeing...

[hallisseyb]

Okay - thanks again for your time. I appreciate that it's very generous to help out a total stranger.FYI: I also got these errors in the Notifications Log:

On Monday 5 April 2021, 23:38:32 IST, John Cooper ***@***.***> wrote:  

I see. Anyway- none of those suggestions would be causing the kind of thing you're seeing...

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or unsubscribe.

[jcooper-korg]

To rule out issues with my custom panel js-- let's make sure you can get a simple example working. Take a look at this: https://developers.home-assistant.io/docs/frontend/custom-ui/lovelace-custom-card#defining-your-card

Try making that custom card example. Copy/paste the contents of that ContentCardExample into a new content-card-example.js in your config www folder:

class ContentCardExample extends HTMLElement {
  set hass(hass) {
    if (!this.content) {
      const card = document.createElement('ha-card');
      card.header = 'Example card';
      this.content = document.createElement('div');
      this.content.style.padding = '0 16px 16px';
      card.appendChild(this.content);
      this.appendChild(card);
    }

    const entityId = this.config.entity;
    const state = hass.states[entityId];
    const stateStr = state ? state.state : 'unavailable';

    this.content.innerHTML = `
      The state of ${entityId} is ${stateStr}!
      <br><br>
      <img src="http://via.placeholder.com/350x150">
    `;
  }

  setConfig(config) {
    if (!config.entity) {
      throw new Error('You need to define an entity');
    }
    this.config = config;
  }

  // The height of your card. Home Assistant uses this to automatically
  // distribute all cards over the available columns.
  getCardSize() {
    return 3;
  }
}

customElements.define('content-card-example', ContentCardExample);

then add that to your Lovelace Dashboard > Resources, with URL /local/content-card-example.js and type JavaScript Module.

then add a manual card to your Lovelace dashboard, and specify an existing entity. My card config was:

type: 'custom:content-card-example'
entity: switch.dining_room_light

and the result was:

Let me know how that goes...

[hallisseyb]

Perfect - I had tried stripping your files down to just the first and last lines, to see if I could make it work with a simple input, but knew that wasn't the most reliable plan.The sample card plan worked fine!! the 350x150 card (with my own entity) works fine. On Tuesday 6 April 2021, 17:55:15 IST, John Cooper @.***> wrote:

To rule out issues with my custom panel js-- let's make sure you can get a simple example working. Take a look at this: https://developers.home-assistant.io/docs/frontend/custom-ui/lovelace-custom-card#defining-your-card

Try making that custom card example. Copy/paste the contents of that ContentCardExample into a new content-card-example.js in your config www folder: class ContentCardExample extends HTMLElement { set hass(hass) { if (!this.content) { const card = document.createElement('ha-card'); card.header = 'Example card'; this.content = document.createElement('div'); this.content.style.padding = '0 16px 16px'; card.appendChild(this.content); this.appendChild(card); }

const entityId = this.config.entity;
const state = hass.states[entityId];
const stateStr = state ? state.state : 'unavailable';

this.content.innerHTML = `
  The state of ${entityId} is ${stateStr}!
  <br><br>
  <img src="http://via.placeholder.com/350x150">
`;

}

setConfig(config) { if (!config.entity) { throw new Error('You need to define an entity'); } this.config = config; }

// The height of your card. Home Assistant uses this to automatically // distribute all cards over the available columns. getCardSize() { return 3; } }

customElements.define('content-card-example', ContentCardExample);

then add that to your Lovelace Dashboard > Resources, with URL /local/content-card-example.js and type JavaScript Module.

then add a manual card to your Lovelace dashboard, and specify an existing entity. My card config was: type: 'custom:content-card-example' entity: switch.dining_room_light

and the result was:

Let me know how that goes...

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or unsubscribe.

[jcooper-korg]

👍🏻 So, I guess the next thing to do would be for you to send me a zip containing all your config files, and I'll try to spot the problem. (please exclude any secrets file containing passwords, etc). Also, please let me know your version of HA and what system you're running on, from Configuration > Info. Here is mine:

[hallisseyb]

You're going above and beyond! Many thanks.Zip file attached. Screenshots below.

Brendan On Wednesday 7 April 2021, 14:49:15 IST, John Cooper @.***> wrote:

👍🏻 So, I guess the next thing to do would be for you to send me a zip containing all your config files, and I'll try to spot the problem. (please exclude any secrets file containing passwords, etc). Also, please let me know your version of HA and what system you're running on, from Configuration > Info. Here is mine:

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or unsubscribe.

[hallisseyb]

FYI: I just updated to the latest HASS release

On Wednesday 7 April 2021, 22:41:56 IST, Brendan Hallissey ***@***.***> wrote:  

You're going above and beyond! Many thanks.Zip file attached. Screenshots below.

Brendan On Wednesday 7 April 2021, 14:49:15 IST, John Cooper @.***> wrote:

👍🏻 So, I guess the next thing to do would be for you to send me a zip containing all your config files, and I'll try to spot the problem. (please exclude any secrets file containing passwords, etc). Also, please let me know your version of HA and what system you're running on, from Configuration > Info. Here is mine:

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or unsubscribe.

[jcooper-korg]

hi again- I didn't receive the zip or the screenshots. maybe it doesn't work properly when you reply by email? please go to the issue page at https://github.com/jcooper-korg/AlarmPanel/issues/3, and you can drag in the file and screenshot there.

[hallisseyb]

HASS-BHallissey.zip User config up until yesterday:

[jcooper-korg]

I replaced my configuration, www and custom component files with those in your zip. My dashboard worked fine.

I wonder if your browser has cached a bad copy of the alarm_control_panel-card.js from when you were experimenting with editing the file.

Did you notice this comment in my install notes about adding a suffix like ?v=99 to force it to refresh?

Install it as a custom Lovelace resource in Configuration > Lovelace Dashboards > Resources. Turn on Advanced Mode in your user profile if you can't see the Resources tab. The Url of the file will be /local/alarm_control_panel-card.js, and the type is "JavaScript Module". If you are making local modifications to the file, you can add a version number to the end of the Url, like /local/alarm_control_panel-card.js?v=3 and increment the number each time you make a change, to force it to use the new version instead of your browser cached version.

[scottjjr]

Suspect he's having the same issue I had. If the entity isn't set you get this error as per the original screenshot. The instructions only talk about adding the type which leads to a big red error box.

_add the alarm panel to your lovelace view using a Manual card, with type set as type: 'custom:alarm_controlpanel-card' (see my example config)

I found this by inspecting the code and noticed it was a thrown javascript config error causing it.

_setConfig(config) {
  if (!config.entity || config.entity.split(".")[0] !== "alarm_control_panel") {
    throw new Error('Please specify an entity from alarm_control_panel domain.');_ 

If you set the entity as well as the below then it works. May want to update the instructions to say the entity is required also as for noobs like us it reads that type is enough alone to get started :)

type: 'custom:alarm_control_panel-card' entity: alarm_control_panel.home_alarm

[jcooper-korg]

Thanks for the suggestion! I had listed it just below in 'Card configuration' options as required:

entity: (required string) the name of the manual alarm_control_panel entity

But I see your point that the initial instruction could be misleading. I'll update the instructions now. @hallisseyb - was that your issue?

[hallisseyb]

Thanks Scott and John. I hadn't noticed that entity was a required option for the card config - but unfortunately, it didn't do the trick. As I have very little already configured in my system, I'm going to just format and reset, using John's example config, unchanged, as my base. Hopefully, I'll get a chance to do that tomorrow. Thanks again - Brendan

[scottjjr]

Did you add the manual alarm entity in your configuration yaml file first? Otherwise it won't find the entity to add I suspect. You can grab that code from the manual alarm section at home assistant

[jcooper-korg]

@hallisseyb - did you also see my comment above about alarm_control_panel-card.js in your browser cache? (and to try a suffix like ?v=99 to force it to refresh)

[hallisseyb]

@scottjjr Yes, believe that I added that - it's in @jcooper-korg's configuration.yaml file

configure manual alarm

alarm_control_panel:

• platform: manual name: House code: !secret house_alarm_code ...etc

@jcooper-korg Yes, I had tried using the version number tag (on the file, I assume, rather than in the Lovelace Resources?).

This evening, I re-flashed HASS to my Raspberry Pi and started from absolute scratch again. Using copy&paste, I copied in the text from your Example Config files, fully overwriting whatever was in the existing files:

• configuration.yaml
• automation.yaml
• scripts.yaml
• groups.yaml
• I added house_alarm_code to the secrets.yaml file
• I created a www folder in the /config folder and created a file called alarm_control_panel-card.js
• Using copy&paste, I copied the text from your alarm_control_panel-card.js into my new file

I restarted HASS and added the Resource to Lovelace. I tried adding the manual card, but got the same error.

I tried to add the "custom-content-card" test card that you suggested, but I replaced the file name with brendantest.js. I also called the Lovelace Resource /local/brendantest.js and finally, I changed the final line (customElements.define('brendantest', ContentCardExample);. I got the same error as before "Custom element doesn't exist". Then, when I changed those three names back to custom-card-example, the card loads. Why would that be?

Considerations:

1. When I added the other sample manual card that you suggested a few days ago, it worked fine - which suggests my method is okay.
2. When you copied my config files (which were essentially yours anyway), your custom card worked fine.
3. When I look at the automatically generated Overview Dashboard, the entity alarm_control_panel.house is recognised and the 'standard' alarm control panel is shown.

Might there be some other 'basic' setting that I just don't know about?

[jcooper-korg]

Yes, I had tried using the version number tag (on the file, I assume, rather than in the Lovelace Resources?).

No- I didn't mean that you should rename the file. I meant to leave the file named alarm_control_panel-card.js, and add a version indicator to the url specified in Lovelace Resources, like this:

Then, when I changed those three names back to custom-card-example, the card loads. Why would that be?

Not sure. May be some browser cache related issues? Have you tried clearing your cache completely?

[hallisseyb]

What's the emoji for -huge sigh of relief- ? :-) I'm not sure what I did different - cos I was trying lots of different things, but as I had the "custom-card-example' working, I copied and pasted the alarm_control_panel content into that .js file. The last thing I changed was the ?v=12 tag onto the Lovelace Resource. Maybe that was the trick I was missing.

I honestly really appreciate your time in helping me slog through this.

[jcooper-korg]

The last thing I changed was the ?v=12 tag onto the Lovelace Resource. Maybe that was the trick I was missing.

Yes, I think so. As I suggested previously, your browser probably had cached a bad version of the alarm_control_panel-card.js

Happy to hear you've got it going!