Boilerplate Card by @iantrich
A community driven boilerplate of best practices for Home Assistant Lovelace custom cards
Hey dude! Help me out for a couple of 🍻 or a ☕!
Name | Type | Requirement | Description | Default |
---|---|---|---|---|
type | string | Required | custom:boilerplate-card |
|
name | string | Optional | Card name | Boilerplate |
show_error | boolean | Optional | Show what an error looks like for the card | false |
show_warning | boolean | Optional | Show what a warning looks like for the card | false |
entity | string | Optional | Home Assistant entity ID. | none |
tap_action | object | Optional | Action to take on tap | action: more-info |
hold_action | object | Optional | Action to take on hold | none |
double_tap_action | object | Optional | Action to take on hold | none |
Name | Type | Requirement | Description | Default |
---|---|---|---|---|
action | string | Required | Action to perform (more-info, toggle, call-service, navigate url, none) | more-info |
navigation_path | string | Optional | Path to navigate to (e.g. /lovelace/0/) when action defined as navigate | none |
url | string | Optional | URL to open on click when action is url. The URL will open in a new tab | none |
service | string | Optional | Service to call (e.g. media_player.media_play_pause) when action defined as call-service | none |
service_data | object | Optional | Service data to include (e.g. entity_id: media_player.bedroom) when action defined as call-service | none |
haptic | string | Optional | Haptic feedback for the Beta IOS App success, warning, failure, light, medium, heavy, selection | none |
repeat | number | Optional | How often to repeat the hold_action in milliseconds. |
non |
Clone this repository
Install necessary modules (verified to work in node 8.x)
yarn install
or npm install
Do a test lint & build on the project. You can see available scripts in the package.json
npm run build
Search the repository for all instances of "TODO" and handle the changes/suggestions
Customize to suit your needs and contribute it back to the community
Starting a new card from boilerplate-card with devcontainer
Note: this is available only in vscode ensure you have the Remote Containers extension installed.
- Fork and clone the repository.
- Install necessary modules (verified to work in node 8.x)
yarn install
ornpm install
- Open a devcontainer terminal and run
npm start
when it's ready. - The compiled
.js
file will be accessible onhttp://127.0.0.1:5000/boilerplate-card.js
. - On a running Home Assistant installation add this to your Lovelace
resources:
- url: "http://127.0.0.1:5000/boilerplate-card.js"
type: module
Change "127.0.0.1" to the IP of your development machine.
If you need a fresh test instance you can install a fresh Home Assistant instance inside the devcontainer as well.
- Run the command
dc start
. - Home Assistant will install and will eventually be running on port
9123