Add a wiki?

[appleguru]

Any way you can add a wiki to this project so we can build up a knowledge base? (Eg, compatible hardware, example builds, BOM…)

[Dilbert66]

from the js code in the resources. When you add a card, it just load the js code and displays it in whatever dashboard you are using.

[Dilbert66]

I've pushed an update that fixes an issue with the * being sent while in programming mode. This would cause odd behaviour if your trying to program the system while using the card. You should only need to update the file vistaalarm.h.

[appleguru]

Thanks, seems to be working well. I noticed you checked in some mp3 files and made a few changes for "beeps". Do those work? I copied them over but they don't seem to do anything.

Unrelated, I opened a small PR for the js to improve the button size/spacing to make the keypad behave better on mobile (and also match the native themes): https://github.com/Dilbert66/esphome-vistaECP/pull/12

[Dilbert66]

The beep is still a work in progress. It needs to have the beep duration better controlled. It does beep depending on the beep code sent from the esp (you need to also have the beep section setup in the esp yaml). Add this line to the card config:

beep: sensor.vistaalarmtest_beeps

Awesome about the PR, I'll check it out. I also want to add feedback on a keypress to show visually when the button is pressed. This polymer entity stuff is new to me .

[Dilbert66]

Tried the changes. Excellent. You even have the keypress showing correctly. Exactly what it needed. I'll clean up the directory structure for the card resources later. I'd like to also add some indicator lights to match a real panel. Could show ready status, trouble, etc.

[appleguru]

I had to enable sound "auto play" in my browser too (it worked ok in the HA app out of the box at least).

Those beeps are pretty bad; maybe I'll just make some recordings of the actual beeps..

[appleguru]

Some more things to eventually go in the wiki if we make one:

Sensor entities from this integration can return the following states: O = Open / Fault C = Closed A = Alarm T = Trouble B = Bypass

because they have more than two states, they aren't binary sensors, and the built in "Color icons based on state?" toggle (state_color) will have no impact.

There are lots of ways to address this, but I opted to use custom-ui. You can download a version compatible with the latest Home Assistant here: https://github.com/Mariusthvdb/custom-ui

Once you install the custom-ui.js file, you can add an icon-color glob rule to /config/customize_glob.yaml like this:

sensor.vistaalarm_*:
  templates:
    icon_color: >
      if (state == 'C') return 'steelblue';
      return 'var(--paper-item-icon-active-color)';

Make sure you also enable the glob .yaml by adding this to your main configuration.yaml if you don't already have it:

customize_glob: !include customize_glob.yaml

That's it, once you reboot your entities should be colored when not in the closed state, like this:

[Dilbert66]

Good info. Tks.

[AlexandreUSA]

Just found this thread. I will start the project soon to connect my Vista 21ip to HA. Can't wait to get the electronics on order.

[appleguru]

I see we have a new "Discussions" area on this project. Will start moving some of this information there, since GitHub wiki's aren't really community editable.

https://github.com/Dilbert66/esphome-vistaECP/discussions

Also, gave the latest code a whirl... I like it a lot! Having more buttons I can program is helpful (Eg, buttons to enter/exit programming mode since I'm a Vista n00b and always have to google it otherwise), and I like the status "lights". Only real (minor) nit now is that the bottom row of buttons doesn't auto align with the rest of the virtual panel (likely because they're in their own DIV?).

I guess I can cheat by making the labels the same width so that the buttons align... probably easier than actually "fixing" it:

[Dilbert66]

The idea was to be able to hide the bottom row since some users might not need it which is why I used a separate div but it causes the alignment issue you noticed. For the vista the <> buttons are not needed for navigation but they are used on the DSC which is why I have them there. I wanted a keypad that was flexible enough to use on different systems. I didnt spend too much time on the style to try and fix it as I am more concerned with the functions for now. I'm modifying my dsc application to fully emulate a DSC LCD keypad.

[Dilbert66]

Some more things to eventually go in the wiki if we make one:

Sensor entities from this integration can return the following states: O = Open / Fault C = Closed A = Alarm T = Trouble B = Bypass

because they have more than two states, they aren't binary sensors, and the built in "Color icons based on state?" toggle (state_color) will have no impact.

There are lots of ways to address this, but I opted to use custom-ui. You can download a version compatible with the latest Home Assistant here: https://github.com/Mariusthvdb/custom-ui

Once you install the custom-ui.js file, you can add an icon-color glob rule to /config/customize_glob.yaml like this:

sensor.vistaalarm_*:
  templates:
    icon_color: >
      if (state == 'C') return 'steelblue';
      return 'var(--paper-item-icon-active-color)';

Make sure you also enable the glob .yaml by adding this to your main configuration.yaml if you don't already have it:

customize_glob: !include customize_glob.yaml

That's it, once you reboot your entities should be colored when not in the closed state, like this:

I'm going to add this to the readme when I get a chance.

[bmwhitetx]

Sorry to open an old discussion but speaking of the onscreen display I thought I would show a quick mod I made to the file alarm-keypad-card.js. I didn't like dull blue background color and wanted to match the display screen with the backlight on (used this site to pick color). Here is the change I made and what it looks like:

    .keypad_display {
      background: #94ff4d;

Thanks for a great program. I have mine working using the first hardware schematic.

[Dilbert66]

Color is an individual preference. I might just add some config options for users to set their own. I like the one I have but it's not for everyone :)

[bmwhitetx]

Yes, definitely a preference, just wanted to show an option - it was fun trying to figure out the code and how to install the panel. Speaking of which, the instructions on adding this interface panel in the readme.md somehow is tagged as code so it was difficult to read (no line wrap). I ended up just copying the whole section and pasting into an editor with word wrap and was able to follow the instructions. I think the part about the hardware interfaces got duplicated in there too. Its the part that starts with: '## Setting up the alarm panel keyboard card on HA

And while you're in there, HA, as they are prone to do, moved things around - so this part: Using UI: Configuration → Lovelace Dashboards → Resources Tab → Click Plus button → ... Should now be: Using UI: Settings → Dashboards → Click three dots in upper right → Choose Resources → Click Add Resource button → ... The file option may have changed as well, I didn't have a lovelace section in my configuration.yaml file.

Thanks again for making this project!