# 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:

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

```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: 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](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

## 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_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

```bash
npm install
npm run build
```

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

### Development Mode

```bash
npm run watch
```

## Requirements

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

## License

MIT