Where is the sample alarm_control_panel code is supposed to be included?

[mmoraes80]

I am trying to link the alarm control panel with the code snippet but I can't figure out where the code needs to included.

Also, it seems that the new esphome version does not accept some of the keywords and only arm-away service is being pulled from the standard panel.

[bmwhitetx]

Short answer - files go in the www folder that is one below the folder your configuration.yaml file is in. Long answer:
The readme is a little hosed due to ill-placed formatting tags and for me references an older version of HA. I use the HA OS in a virtual machine so for me if I open the File Editor add-on, then click on the folder icon in the top right (Browse Filesystem), I am in the /homeassistant folder. This is the same as /config in other methods. You will see your configuration.yaml file there as well as the home-assistant.log file. You should also see a www folder. Click to open that. That is where alarm-keypad-card.js and the *beeps.mp3 files go. You can upload them from File Editor using the Upload File button (one at a time I think). You know you're in the right folder if you see a community folder there that has subfolders of any other custom cards you have downloaded (e.g. lovelace-mushroom).

Next add the reference to the .js file. Go to Settings - Dashboards [used to be called Config - Lovelace]. Click on the three dots in the upper right and choose Resources from the dropdown (the only choice). It will display a list of files. In the lower right click the blue Add Resource button. In the URL field enter /local/alarm-keypad-card.js?id=1 and for type choose Javascript module. Click Create and restart HA.

Finally go to the Dashboard you want and click Add Card. Choose the Alarm panel card. Choose Code Editor mode. Delete any lines that are already there and then paste in all the code from the lovelace.yaml file. Note copying from Github directly always causes me grief so I paste into a notepad first and recopy. Double check the service name matches yours (e.g., the 'vistaalarm' part).

Here are the original instructions with formatting tags fixed - note they are for a previous version of HA:

I've added a sample lovelace alarm-panel card copied from the repository at https://github.com/GalaxyGateway/HA-Cards. I've customized it to work with this ESP library's services. I've also added two new text fields that will be used by the card to display the panel prompts the same way a real keypad does. To configure the card, just place the alarm-keypad-card.js and *.mp3 files into the /config/www directory of your homeassistant installation and add a new resource in your lovelace configuration pointing to /local/alarm-keypad-card.js.

Add a reference to alarm-keypad-card.js in Lovelace. There’s two way to do that:

1. Using UI: Configuration → Lovelace Dashboards → Resources Tab → Click Plus button → Set Url as /local/alarm-keypad-card.js?id=1 → Set Resource type as JavaScript Module.
   
   Note: If you do not see the Resources Tab, you will need to enable Advanced Mode in your User Profile.
2. Using YAML: Add following code to lovelace section

yaml
resources:
- url: /local/alarm-keypad-card.js?id=1
  type: module

*** NOTE *** : Every time you update this file, you will need to increase the id=xx number in the url by 1 in order to force the browser to reload it.

You can then configure the card as shown below. Just substitute your service name to your application and choose one of the two chunks.
[then the lovelace.yaml card contents are shown]

[mmoraes80]

Thank you for posting. Perhaps I should've been more specific about my question.

What I meant about the alarm sample code is the yaml piece of code calling the services below:

alarm_control_panel:

• platform: template
  panels:
  safe_alarm_panel:
  name: "Alarm Panel"
  value_template: "{{states('sensor.vistaalarm_system_status')}}"
  code_arm_required: false

  arm_away:
    - service: esphome.vistaalarm_alarm_arm_away
            
  arm_home:
    - service: esphome.vistaalarm_alarm_arm_home
    
  arm_night:
    - service: esphome.vistaalarm_alarm_arm_night
      data_template:
        code: '{{code}}' #if you didnt set it in the yaml, then send the code here
    
  disarm:
    - service: esphome.vistaalarm_alarm_disarm
      data_template:
        code: '{{code}}'   
  

The ESP yaml file does not seem to accept some of the keywords such as "panels", "safe_alarm_panel", or the service itself.

[Dilbert66]

That's because it's not an ESPhome config. It's an HA config. Read up on it here:
https://www.home-assistant.io/integrations/alarm_control_panel.template/

You don't need this config though if you are using the virtual keypad.

[mmoraes80]

Thank you!