lovelace-shutter-row
lovelace-shutter-row copied to clipboard
berrywhite96
Home Assistant Lovelace Shutter Row Card
Shutter Row Card
Simple shutter card with preset buttons and button customization for Home Assistant.
Install
HACS
This lovelace card is available on the HACS (Home Assistant Community Store).
Go to the Frontend section and search for Shutter Row.
Manual
- Download
shutter-row.jsfile from latest release. - Put
shutter-row.jsfile into yourconfig/wwwfolder. - Add reference to
shutter-row.jsin Lovelace. There's two ways to do that:- Using UI: Settings → Dashboards → Click on the three dots in the top right → Resources → Add resource → Set Url as
/hacsfiles/lovelace-shutter-row/shutter-row.js→ Set Resource type asJavaScript Module. Note: If you do not see the Resources Tab, you will need to enable Advanced Mode in your User Profile - Using YAML: Add following code to
lovelacesection.resources: - url: /hacsfiles/lovelace-shutter-row/shutter-row.js type: module
- Using UI: Settings → Dashboards → Click on the three dots in the top right → Resources → Add resource → Set Url as
- Add
custom:shutter-rowto Lovelace UI as any other card (using either editor or YAML configuration).
Usage
YAML mode
Card example with inverted slider position, state color and one preset button.
type: "custom:shutter-row"
entity: cover.cover_entity
name: Friendly name
invert_position: true
state_color: true
preset_buttons:
- name: Open
icon: mdi:window-shutter-open
tap_action:
action: call-service
service: cover.set_cover_position
data:
entity_id: cover.cover_entity
position: 100
Main configuration
| Name | Type | Default | Description |
|---|---|---|---|
type |
string |
Required | custom:shutter-row to use shutter row |
entity |
string |
Required | Existing cover entity id |
name |
string |
Optional | Overwrites friendly name from entity |
invert_position |
boolean |
false | Inverts position value (0% => 100%, 30% => 70%), forces also invert_position_label to true |
invert_position_label |
boolean |
false | Inverts position label (if false => 0% = closed, 100% = open; if true => 0% = open, 100% = closed) |
disable_position |
boolean |
false | Disables position controls |
rtl_position |
boolean |
false | Switches direction of the position slider to right to left |
state_color |
boolean |
false | Enables icon coloring if the shutter is not fully closed |
group |
boolean |
false | Removes outer card styling, use if card is part of entities card |
ignore_state |
boolean |
false | Always enable moving buttons, independent of state |
title_template |
template |
Optional | Overwrites card title with a rendered template |
position_template |
template |
Optional | Overwrites position with a rendered template |
move_down_button |
action |
Optional | Custom action for the move down button (overwrites default functions) |
move_stop_button |
action |
Optional | Custom action for the move stop button (overwrites default functions) |
move_up_button |
action |
Optional | Custom action for the move up button (overwrites default functions) |
preset_buttons |
list |
Optional | List of preset buttons |
Preset button
| Name | Type | Default | Description |
|---|---|---|---|
icon |
icon |
Optional | Icon e.g. mdi:window-shutter |
name |
string |
Optional | Label for button |
tap_action |
action |
Optional | Action on tap |
double_tap_action |
action |
Optional | Action on double tap |
hold_action |
action |
Optional | Action on hold |
Action
The action type is the typical Home Assistant action variable extended by the set-position action. It's an shortcut for the set_cover_position service.
| Name | Type | Default | Description |
|---|---|---|---|
action |
string |
Required | set-position or any other action |
position |
int |
Optional | Used if action is set-position, sets the cover position for the card entity |
Any other action does work as well.
Localize
If you want to help the project you can translate into your daily language. Just create a new file from the src/localization/en.json and translate the values. Add the language into the switch case at the top of src/localize.js. Make a pull request and your translation will be merged into the project.
License
This project is under the MIT license.
berrywhite96