Boilerplate Card by @iantrich
A community driven boilerplate of best practices for Home Assistant Lovelace custom cards
Support
Hey dude! Help me out for a couple of ๐ป or a โ!
Options
| 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 double tap | none |
Action Options
| 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 success, warning, failure, light, medium, heavy, selection | none |
| repeat | number | Optional | How often to repeat the hold_action in milliseconds. |
none |
Starting a new card from boilerplate-card
Step 1
Click the "Use this template" button on the main page and clone the new repository to your machine
Step 2
Install necessary modules (verified to work in node 8.x)
yarn install or npm install
Step 3
Do a test lint & build on the project. You can see available scripts in the package.json
npm run build
Step 4
Search the repository for all instances of "TODO" and handle the changes/suggestions
Step 5
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.
- Open a devcontainer terminal and run
npm startwhen it's ready. - The compiled
.jsfile 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: moduleChange "127.0.0.1" to the IP of your development machine.
Bonus
If you need a fresh test instance you can install a fresh Home Assistant instance inside the devcontainer as well.
- Run the command
container start. - Home Assistant will install and will eventually be running on port
9123
Troubleshooting
NB This will not work with node 9.x if you see the following errors try installing node 8.10.0
yarn install v1.3.2
[1/4] ๐ Resolving packages...
warning [email protected]: This package has been deprecated and is no longer maintained. Please use @rollup/plugin-commonjs.
[2/4] ๐ Fetching packages...
error @typescript-eslint/[email protected]: The engine "node" is incompatible with this module. Expected version "^8.10.0 || ^10.13.0 || >=11.10.1".
error Found incompatible module
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.