Shutter Row Card

Simple shutter card with preset buttons and button customization for Home Assistant.

WARNING: This card is no longer developed

This card will be no longer supported. Currently, it works with the example YAML below, but this is not guaranteed for future Home Assistant updates. As newer, prettier and more feature rich cards exist, this card makes also no sense anymore. Use the beautiful Bubble Card or Mushroom.

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.js file from latest release.
Put shutter-row.js file into your config/www folder.
Add reference to shutter-row.js in Lovelace. There's two ways to do that:
1. 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 as JavaScript Module.
  Note: If you do not see the Resources Tab, you will need to enable Advanced Mode in your User Profile
2. Using YAML: Add following code to lovelace section.
```
resources:
    - url: /hacsfiles/lovelace-shutter-row/shutter-row.js
      type: module
```
Add custom:shutter-row to 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/lovelace-shutter-row