Light Button Card

A custom Lovelace card for Home Assistant that combines a button entity (for toggling) with a binary sensor entity (for status display). Perfect for controlling lights or other devices via PLC relays.

Features

• Button Toggle: Click the card to send a toggle command to your button entity
• Status Display: Shows the current state from your binary sensor entity
• Custom Icons: Support for custom icons with separate icons for on/off states
• Visual Feedback: Status indicator dot and icon color changes based on state
• Card Editor: Full UI editor support in Lovelace

Installation

Manual Installation

1. Copy dist/light-button-card.js to your www/community/light-button-card/ directory in Home Assistant
2. Add the resource to your Lovelace configuration:

resources:
  - url: /local/light-button-card/light-button-card.js
    type: module

HACS Installation (if published)

1. Go to HACS → Frontend
2. Click the three dots menu → Custom repositories
3. Add this repository
4. Install "Light Button Card"
5. Refresh your browser

Configuration

Basic Configuration

type: custom:light-button-card
button_entity: button.plc_light_1
binary_sensor_entity: binary_sensor.plc_light_1_status

Full Configuration Options

type: custom:light-button-card
button_entity: button.plc_light_1          # Required: Button entity to toggle
binary_sensor_entity: binary_sensor.plc_light_1_status  # Required: Binary sensor for status
name: Living Room Light                     # Optional: Display name
icon: mdi:lightbulb                         # Optional: Default icon (MDI format)
icon_on: mdi:lightbulb                      # Optional: Icon when state is "on"
icon_off: mdi:lightbulb-outline             # Optional: Icon when state is "off"
show_name: true                             # Optional: Show/hide name (default: true)

Icon Configuration

Icons use Material Design Icons (MDI) format. You can use any icon from Material Design Icons.

Examples:

• mdi:lightbulb - Light bulb
• mdi:lightbulb-outline - Light bulb outline
• mdi:lamp - Lamp
• mdi:ceiling-light - Ceiling light
• mdi:wall-sconce - Wall sconce

Usage Example

type: custom:light-button-card
button_entity: button.plc_kitchen_light
binary_sensor_entity: binary_sensor.plc_kitchen_light_status
name: Kitchen Light
icon_on: mdi:lightbulb
icon_off: mdi:lightbulb-outline
show_name: true

How It Works

1. Button Entity: When you click the card, it calls button.press service on the specified button entity, which sends a command to your PLC to toggle the relay.

2. Binary Sensor Entity: The card continuously monitors the binary sensor entity to display the current state (on/off) of the PLC output.

3. Visual Feedback:

   • The icon changes color and style based on the state
   • A status indicator dot shows green when on, gray when off
   • The state text displays the current state

Development

Building

npm install
npm run build

The compiled file will be in dist/light-button-card.js.

Development Mode

npm run watch

Requirements

• Home Assistant 2023.1.0 or later
• Button entity (for toggling)
• Binary sensor entity (for status)

License

MIT