Lovelace HomeSeer WD200+ Status Card

Share your Projects! Dashboards & Frontend
1

This card shows the status of the seven LEDs on the HS-WD200+ dimmer switch connected using zwave_js. The color and blinking of the LEDs are set as configuration parameters of the Z-Wave device and the current zwave_js integration does not reveal them in attributes of a sensor (yet?), so this was kind of a challenge for me.

The code is at: www/homeseer-wd200-status-card.js. (This is my very first Lovelace card, so if I am not doing something in a standard way, I am open to suggestions.)

With a very basic configuration it looks like this:

image

    cards:
      - type: "custom:homeseer-wd200-status-card"
        entity_id: light.node_20

Addition of a few configuration options makes it look like this:

image

    cards:
      - type: "custom:homeseer-wd200-status-card"
        entity_id: light.node_20
        title: Status Panel
        labels:
          - "Garage Side Door"
          - "Garage House Door"
          - "Garage Car Door"
          - "Front Door"
          - "Basement Door"
          - "Back Door"
          - "Alarm"
2 Likes
2

This is just what I was looking for. However, I have no clue how to install this. Can you give a guy any pointers?

Scott

3

This is probably too late to help you, but here are some hints for those who may follow.

I wish there were an easy way to explain how to add a custom card. Some of it depends on whether you are configuring Lovelace in YAML or in the dashboard. It would be easy if I restructure my repositories for installation using HACS, which I will probably do one of these days.

Manually:

  1. Create a www subfolder under your config folder if there isn’t one there already.
  2. Copy homeseer-wd200-status-card.js to the config>/www folder.
  3. Add a resource entry. This is where it gets complicated depending on how you are set up.
  4. Reload Resources in the dashboard.
  5. Add a card configuration.

Resource entry example in configuration.yaml if using YAML mode:

lovelace:
  mode: yaml
  resources:
    - url: /local/homeseer-wd200-status-card.js
      type: module

For UI (non-YAML) mode:

  1. Click your name in the lower-left corner to get your profile.
  2. Turn on Advanced Mode.
  3. Go to Settings > Dashboards > click the three dots menu and pick Resources.
  4. Click Add Resource and add the resource.
    If you get “You are using your dashboard in YAML mode…”, then do it like the YAML mode example.
5

I made a small update to the card so that it also recognizes the HS-WX300-R2 dimmer.