118 lines
3.3 KiB
Markdown
118 lines
3.3 KiB
Markdown
# 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
|
|
|