Curtain Card for Lovelace UI Home Assistant The card displays the current position of the curtain, allows you to control its position and has user settings for adjusting arbitrary images of the window, the view outside the window and the curtain canvas.
- Adding a repository
- Installation
- Configuration
- Description of image files
- Sample Card code
- Thanks
- Donations
In the HACKS section, in the menu located in the upper right corner, select the item: User repositories.
Enter the repository address: https://github.com/samoswall/pic-shutter-card
, select the category Lovelace, click the Add button.
In the HACS section in the search, enter pic-shutter-card, select the card, click the Download button.
Name | Type | Required | Default value | Description |
---|---|---|---|---|
type | string | true | - | Must be "custom:pic-shutter-card" |
title | string | false | - | The name of the card. It is displayed in the upper right corner. |
Name | Type | Required | Default value | Description |
---|---|---|---|---|
entity | string | true | - | The shutter entity ID |
name | string | false | Friendly name of the entity | Name to display for the shutter |
buttons_position | string | false | left |
Set buttons on left or on right of the shutter or not show to disable visibility |
title_position | string | false | top |
Set title on top or on bottom of the shutter |
outside_window | string | false | not show |
Set it to show for visibility of the background picture outside the window |
invert_percentage | boolean | false | false |
Set it to true if your shutter is 100% when it is closed, and 0% when it is opened |
outside_window_pic | string | false | /local/community/pic-shutter-card/outside_window.png |
The image file of the view outside the window. Uploaded with a card: outside_window.png outside_window1.png outside_window2.png outside_window3.png outside_window4.png outside_window5.png outwin1.png outwin2.png outwin3.png |
frame_window_pic | string | false | /local/community/pic-shutter-card/frame_window.png |
The image file of the window frame. Uploaded with a card: frame_window.png frame_win1.png frame_win1_2.png frame_win2.png |
shutter_slide_pic | string | false | /local/community/pic-shutter-card/sc_shutter_slide.png |
The image file of the curtain cloth. Uploaded with a card: art.png art1.png art_city.png art3.png art4.png purple.png liteblue.png litegreen.png sc_shutter_slide.png |
shutter_bottom_pic | string | false | /local/community/pic-shutter-card/sc_shutter_bottom.png |
An image file of the bottom bar of the roller blinds. Uploaded with a card: sc_shutter_bottom.png |
shutter_min_position | int (px) | false | 4 | The minimum position of the curtain. (in the open position) |
shutter_max_position | int (px) | false | 127 | The maximum position of the curtain. (in the closed position) |
shutter_heigth | int (px) | false | 140 | The height of the curtain. It is used only for curtains with an opening direction to the left and/or right. |
shutter_direction | string | false | up |
The direction of opening the curtain: up - up , left - left , right - right , left and right at the same time - leftright |
shutter_top | int (px) | false | 17 | The indentation from the upper edge of the window to the curtain cloth. The value in pixels. (window height 141 pixels) |
shutter_animation | string | false | show |
Displaying the animation of the direction of movement: show - show , do not show - any other value |
shutter_pic_height | int (px) | false | 155 | The height of the window image. Increases the vertical size of the card. |
shutter_left | int (%) | false | 5 | The indentation of the curtain cloth from the left edge of the window. It is specified as a % of the window size. |
shutter_width | int (%) | false | 90 | The width of the curtain cloth. It is specified as a % of the window size. |
shutter_end_offset | int (%) | false | 0 | The offset of the lower value of the curtain cloth. Specified in % of 100. (Example: If at 80% the curtain completely covers the window, then offset 20 will display as 100% closed) |
replace_0_percent | string | false | notuse | Replaces the value of 0% with a custom word. For example: Closed, Bottom, etc. Any language is allowed. |
replace_100_percent | string | false | notuse | Replaces the value of 100% with a custom word. For example: Open, Top, etc. Any language is allowed. |
There are already some images in the pic-shutter-card
folder:
Example of the minimum card code
type: custom:pic-shutter-card
entities:
- entity: cover.roll_1
Sample card code 1
type: horizontal-stack
cards:
- type: custom:pic-shutter-card
entities:
- entity: cover.roll_2
name: ' '
buttons_position: not show
title_position: bottom
outside_window: show
outside_window_pic: /local/community/pic-shutter-card/outwin1.png
shutter_slide_pic: /local/community/pic-shutter-card/sc_shutter_slide.png
shutter_animation: not show
- type: custom:pic-shutter-card
entities:
- entity: cover.roll_2
name: ' '
buttons_position: not show
title_position: bottom
outside_window: show
outside_window_pic: /local/community/pic-shutter-card/outwin2.png
shutter_slide_pic: /local/community/pic-shutter-card/purple.png
- type: custom:pic-shutter-card
entities:
- entity: cover.roll_2
name: ' '
buttons_position: not show
title_position: bottom
outside_window: show
outside_window_pic: /local/community/pic-shutter-card/outwin1.png
shutter_slide_pic: /local/community/pic-shutter-card/litegreen.png
- type: custom:pic-shutter-card
entities:
- entity: cover.roll_2
name: ' '
buttons_position: not show
title_position: bottom
outside_window: show
outside_window_pic: /local/community/pic-shutter-card/outwin2.png
shutter_slide_pic: /local/community/pic-shutter-card/liteblue.png
shutter_animation: not show
Sample card code 2
type: horizontal-stack
cards:
- type: custom:pic-shutter-card
entities:
- entity: cover.roll_1
name: Left
buttons_position: left
title_position: bottom
outside_window: show
outside_window_pic: /local/community/pic-shutter-card/outside_window2.png
frame_window_pic: /local/community/pic-shutter-card/frame_window.png
shutter_slide_pic: /local/community/pic-shutter-card/art1.png
shutter_bottom_pic: none
shutter_direction: left
shutter_heigth: 135
shutter_min_position: 5
shutter_max_position: 95
shutter_animation: show
- type: custom:pic-shutter-card
entities:
- entity: cover.roll_1
name: LeftRight
buttons_position: left
title_position: bottom
outside_window: show
outside_window_pic: /local/community/pic-shutter-card/outside_window4.png
frame_window_pic: /local/community/pic-shutter-card/frame_window.png
shutter_slide_pic: /local/community/pic-shutter-card/art1.png
shutter_bottom_pic: none
shutter_direction: leftright
shutter_heigth: 135
shutter_min_position: 5
shutter_max_position: 95
shutter_animation: show
- type: custom:pic-shutter-card
entities:
- entity: cover.roll_1
name: Right
buttons_position: left
title_position: bottom
outside_window: show
outside_window_pic: /local/community/pic-shutter-card/outside_window5.png
frame_window_pic: /local/community/pic-shutter-card/frame_window.png
shutter_slide_pic: /local/community/pic-shutter-card/art1.png
shutter_bottom_pic: none
shutter_direction: right
shutter_heigth: 135
shutter_min_position: 5
shutter_max_position: 95
shutter_animation: show
Sample card code 3
type: horizontal-stack
cards:
- type: custom:pic-shutter-card
entities:
- entity: cover.roll_1
name: Left
buttons_position: right
title_position: bottom
shutter_animation: show
shutter_min_position: 5
shutter_top: 4
shutter_max_position: 135
outside_window: show
outside_window_pic: /local/community/pic-shutter-card/outside_window.png
frame_window_pic: /local/community/pic-shutter-card/frame_win1.png
shutter_slide_pic: /local/community/pic-shutter-card/art_city.png
shutter_bottom_pic: show
- type: custom:pic-shutter-card
entities:
- entity: cover.roll_1
name: Right
buttons_position: left
title_position: bottom
shutter_animation: show
outside_window: show
outside_window_pic: /local/community/pic-shutter-card/outwin1.png
frame_window_pic: /local/community/pic-shutter-card/frame_win1_2.png
shutter_slide_pic: /local/community/pic-shutter-card/art4.png
shutter_bottom_pic: none
shutter_top: -1
shutter_heigth: 159
shutter_direction: leftright
shutter_min_position: -1
shutter_max_position: 100
Sample card code 4
type: horizontal-stack
cards:
- type: custom:pic-shutter-card
entities:
- entity: cover.roll_2
name: ' '
buttons_position: left
title_position: bottom
outside_window: show
outside_window_pic: /local/community/pic-shutter-card/outside_window.png
frame_window_pic: /local/community/pic-shutter-card/frame_win1.png
shutter_min_position: 3
shutter_top: 5
shutter_max_position: 137
- type: custom:pic-shutter-card
entities:
- entity: cover.roll_2
name: ' '
buttons_position: right
title_position: bottom
outside_window: show
outside_window_pic: /local/community/pic-shutter-card/outside_window.png
frame_window_pic: /local/community/pic-shutter-card/frame_win2.png
shutter_min_position: 3
shutter_top: 5
shutter_max_position: 142
Sample card code 5
type: horizontal-stack
cards:
- type: custom:pic-shutter-card
entities:
- entity: cover.roll_1
name: ' '
buttons_position: left
title_position: bottom
outside_window: show
frame_window_pic: /local/community/pic-shutter-card/pic_balcon_l.png
shutter_min_position: 3
shutter_top: 18
shutter_left: 21
shutter_max_position: 257
shutter_pic_height: 300
shutter_width: 74
- type: custom:pic-shutter-card
entities:
- entity: cover.roll_2
name: ' '
buttons_position: right
title_position: bottom
outside_window: show
frame_window_pic: /local/community/pic-shutter-card/pic_balcon_r.png
shutter_min_position: 3
shutter_top: 18
shutter_left: 3
shutter_max_position: 173
shutter_pic_height: 300
shutter_width: 80
This card is an upgrade of the has-shutter-card. Thanks to the author Deejayfool.