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: Icon picker with Material Design Icons support
• Icon Size Control: Adjustable icon size (16px to 500px)
• Visual Feedback: Icon color changes based on state (yellow when on, gray when off)
• Show/Hide Options: Toggle visibility of name and status text
• Card Editor: Full visual editor support in Lovelace with filtered entity pickers

Installation

Manual Installation

1. Copy light-button-card.js to your www/light-button-card/ directory in Home Assistant
2. Add the resource to your Lovelace configuration:
   • Go to Settings → Dashboards → Resources
   • Click "+ ADD RESOURCE"
   • Enter the URL: /local/light-button-card/light-button-card.js
   • Set Type to: JavaScript Module
   • Click CREATE
3. Refresh your browser (hard refresh: Ctrl+Shift+R)

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: Icon (MDI format)
icon_size: 64                                        # Optional: Icon size in pixels (16-500, default: 64)
show_name: true                                      # Optional: Show/hide name (default: true)
show_status: true                                    # Optional: Show/hide status text (default: true)

Visual Editor

The card includes a full visual editor with:

• Button Entity Picker: Filtered to show only button entities
• Binary Sensor Entity Picker: Filtered to show only binary sensor entities
• Icon Picker: Dropdown with Material Design Icons
• Icon Size Field: Number input for icon size (16-500px)
• Name Field: Text input for card name
• Show Name Switch: Toggle name visibility
• Show Status Switch: Toggle status text visibility

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
• mdi:light-recessed - Recessed light

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: mdi:lightbulb
icon_size: 90
show_name: true
show_status: 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 based on the state (yellow when on, gray when off)
   • Icon size is customizable from 16px to 500px
   • Name and status text can be shown or hidden
   • Hover effects provide visual feedback

File Structure

HomeAssistant-Light-Buttons/
├── light-button-card.js      # Main card file (ready to use)
├── example-configuration.yaml # Example YAML configuration
├── hacs.json                  # HACS metadata
└── README.md                  # This file

Requirements

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

Troubleshooting

Card not appearing

1. Clear browser cache (Ctrl+Shift+R)
2. Reload Lovelace resources (Settings → Dashboards → Resources → Reload resources)
3. Verify the resource URL is /local/light-button-card/light-button-card.js
4. Check browser console (F12) for errors

Icon size not changing

1. Hard refresh browser (Ctrl+Shift+R)
2. Enter the size value directly in the field
3. Check that the value is between 16 and 500

Can only type one character in editor

1. Clear browser cache completely
2. Hard refresh (Ctrl+Shift+R)
3. The editor should maintain focus while typing

License

MIT