# 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

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

### Full Configuration Options

```yaml
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](https://materialdesignicons.com/).

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

```yaml
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