{"id":43678588,"url":"https://github.com/samoswall/pic-shutter-card","last_synced_at":"2026-02-05T01:21:17.100Z","repository":{"id":39579594,"uuid":"498475847","full_name":"samoswall/pic-shutter-card","owner":"samoswall","description":"Shutter card for Home Assistant Lovelace UI","archived":false,"fork":false,"pushed_at":"2024-05-07T19:12:36.000Z","size":38442,"stargazers_count":8,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-05-08T19:05:46.902Z","etag":null,"topics":["cards","cover","curtains","home-assistant","rolls","shutter"],"latest_commit_sha":null,"homepage":"","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/samoswall.png","metadata":{"files":{"readme":"README.en.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-05-31T19:45:13.000Z","updated_at":"2024-05-07T19:00:54.000Z","dependencies_parsed_at":"2024-05-07T18:54:31.801Z","dependency_job_id":null,"html_url":"https://github.com/samoswall/pic-shutter-card","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"purl":"pkg:github/samoswall/pic-shutter-card","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/samoswall%2Fpic-shutter-card","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/samoswall%2Fpic-shutter-card/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/samoswall%2Fpic-shutter-card/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/samoswall%2Fpic-shutter-card/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/samoswall","download_url":"https://codeload.github.com/samoswall/pic-shutter-card/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/samoswall%2Fpic-shutter-card/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29105274,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-05T00:52:08.035Z","status":"ssl_error","status_checked_at":"2026-02-05T00:52:07.703Z","response_time":62,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cards","cover","curtains","home-assistant","rolls","shutter"],"created_at":"2026-02-05T01:21:16.499Z","updated_at":"2026-02-05T01:21:17.090Z","avatar_url":"https://github.com/samoswall.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# pic-shutter-card\n[![EN](https://img.shields.io/badge/lang-RU-green.svg)](/README.md)\n\n[![hacs_badge](https://img.shields.io/badge/HACS-Custom-orange.svg)](https://github.com/custom-components/hacs)\n![](https://img.shields.io/github/watchers/samoswall/pic-shutter-card.svg)\n![](https://img.shields.io/github/stars/samoswall/pic-shutter-card.svg)\n\n[![Donate](https://img.shields.io/badge/donate-Yandex-red.svg)](https://yoomoney.ru/fundraise/b8GYBARCVRE.230309)\n\n**Curtain Card for Lovelace UI Home Assistant**\n![all](https://github.com/samoswall/pic-shutter-card/blob/main/Image/sample.gif)\n![all](https://github.com/samoswall/pic-shutter-card/blob/main/Image/sample0.gif)\n**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.**\n\n## Content\n- [Adding a repository](#A1)\n- [Installation](#A2)\n- [Configuration](#A3)\n- [Description of image files](#A4)\n- [Sample Card code](#A5)\n- [Thanks](#A6)\n- [Donations](#A7)\n\n\u003ca id=\"A1\"\u003e\u003c/a\u003e\n## Adding a repository\n\nIn the HACKS section, in the menu located in the upper right corner, select the item: **User repositories**.\n\nEnter the repository address: `https://github.com/samoswall/pic-shutter-card `, select the category **Lovelace**, click the **Add** button.\n\n\u003ca id=\"A2\"\u003e\u003c/a\u003e\n## Installation\n\nIn the HACS section in the search, enter **pic-shutter-card**, select the card, click the **Download** button.\n\n\u003ca id=\"A3\"\u003e\u003c/a\u003e\n## Configuration\n\n### General\n\n| Name | Type    | Required | Default value | Description\n| ---- | ----    | -------- | -------       | -----------\n| type | string  | true     | -             | Must be \"custom:pic-shutter-card\"\n| title | string | false    | -             | The name of the card. It is displayed in the upper right corner.\n\n### Параметры\n\n| Name | Type | Required | Default value | Description\n| ----                 | ----    | ---------------    | -------                       | -----------\n| entity               | string  | true               | -                             | The shutter entity ID\n| name                 | string  | false              | Friendly name of the entity   | Name to display for the shutter\n| buttons_position     | string  | false              | `left`                        | Set buttons on `left` or on `right` of the shutter or `not show` to disable visibility\n| title_position       | string  | false              | `top`                         | Set title on `top` or on `bottom` of the shutter\n| outside_window       | string  | false              | `not show`                    | Set it to `show` for visibility of the background picture outside the window\n| invert_percentage    | boolean | false              | `false`                       | Set it to `true` if your shutter is 100% when it is closed, and 0% when it is opened\n| 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 `\n| 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`\n| 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`\n| 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`\n| shutter_min_position | int (px)| false              | 4                            | The minimum position of the curtain. (in the open position)\n| shutter_max_position | int (px)| false              | 127                          | The maximum position of the curtain. (in the closed position)\n| 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.\n| 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`\n| 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)\n| shutter_animation    | string  | false              | `show`                       | Displaying the animation of the direction of movement: show - `show` , do not show - any other value\n| shutter_pic_height   | int (px)| false              | 155                          | The height of the window image. Increases the vertical size of the card.\n| 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.\n| shutter_width        | int (%) | false              | 90                           | The width of the curtain cloth. It is specified as a % of the window size.\n| 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)\n| replace_0_percent    | string  | false              | notuse                       | Replaces the value of 0% with a custom word. For example: Closed, Bottom, etc. Any language is allowed.\n| replace_100_percent  | string  | false              | notuse                       | Replaces the value of 100% with a custom word. For example: Open, Top, etc. Any language is allowed.\n\n\u003ca id=\"A4\"\u003e\u003c/a\u003e\n### Description of image files\n\nThere are already some images in the `pic-shutter-card` folder:\n\n| File                  | Description                                                                       | Image Size      | Image\n| ----                  | -----------                                                                       | -----------     | --------\n| frame_window.png      | Window frame option 1 (vertical blinds)                                           | (153px x 151px) | ![all](https://github.com/samoswall/pic-shutter-card/blob/main/dist/frame_window.png)\n| frame_win1.png        | Window frame option 2 (white frame with window sill)                              | (153px x 151px) | ![all](https://github.com/samoswall/pic-shutter-card/blob/main/dist/frame_win1.png)\n| frame_win1_2.png      | Window frame option 2 with curtain cloth art4.png                                 | (153px x 151px) | ![all](https://github.com/samoswall/pic-shutter-card/blob/main/dist/frame_win1_2.png)\n| frame_win2.png        | Window frame option 3 (brown frame)                                               | (153px x 151px) | ![all](https://github.com/samoswall/pic-shutter-card/blob/main/dist/frame_win2.png)\n| outside_window.png    | Image of the view outside the window option 1 (Moscow City)                       | (153px x 151px) | ![all](https://github.com/samoswall/pic-shutter-card/blob/main/dist/outside_window.png)\n| outside_window1.png   | Image of the view outside the window option 2 (Panorama of the night city part 1) | (153px x 151px) | ![all](https://github.com/samoswall/pic-shutter-card/blob/main/dist/outside_window1.png)\n| outside_window2.png   | Image of the view outside the window option 2 (Panorama of the night city part 2) | (153px x 151px) | ![all](https://github.com/samoswall/pic-shutter-card/blob/main/dist/outside_window2.png)\n| outside_window3.png   | Image of the view outside the window option 2 (Panorama of the night city part 3) | (153px x 151px) | ![all](https://github.com/samoswall/pic-shutter-card/blob/main/dist/outside_window3.png)\n| outside_window4.png   | Image of the view outside the window option 2 (Panorama of the night city part 4) | (153px x 151px) | ![all](https://github.com/samoswall/pic-shutter-card/blob/main/dist/outside_window4.png)\n| outside_window5.png   | Image of the view outside the window option 2 (Panorama of the night city part 5) | (153px x 151px) | ![all](https://github.com/samoswall/pic-shutter-card/blob/main/dist/outside_window5.png)\n| outwin1.png           | Image of the view outside the window option 3 (Nature)                            | (153px x 151px) | ![all](https://github.com/samoswall/pic-shutter-card/blob/main/dist/outwin1.png)\n| outwin2.png           | Image of the view outside the window option 4 (Forest)                            | (153px x 151px) | ![all](https://github.com/samoswall/pic-shutter-card/blob/main/dist/outwin2.png)\n| outwin3.png           | Image of the view outside the window option 5 (Lake)                              | (153px x 151px) | ![all](https://github.com/samoswall/pic-shutter-card/blob/main/dist/outwin3.png)\n| art.png               | Curtain canvas image option 1 (Abstraction white background)                      | (100px x 150px) | ![all](https://github.com/samoswall/pic-shutter-card/blob/main/dist/art.png)\n| art1.png              | Curtain canvas image option 2 (Abstraction black background)                      | (141px x 125px) | ![all](https://github.com/samoswall/pic-shutter-card/blob/main/dist/art1.png)\n| art_city.png          | Canvas curtain image option 3 (Night City black background)                       | (141px x 125px) | ![all](https://github.com/samoswall/pic-shutter-card/blob/main/dist/art_city.png)\n| art3.png              | Curtain canvas image option 1 (Abstraction white background)                      | (142px x 145px) | ![all](https://github.com/samoswall/pic-shutter-card/blob/main/dist/art3.png)\n| art4.png              | Picture of the curtain cloth option 4 (Blue curtain on the curtain)               | (141px x 130px) | ![all](https://github.com/samoswall/pic-shutter-card/blob/main/dist/art4.png)\n| purple.png            | Image of a purple curtain cloth                                                   | (1px x 1px)     | ![all](https://github.com/samoswall/pic-shutter-card/blob/main/dist/purple.png)\n| liteblue.png          | Image of a blue curtain cloth                                                     | (1px x 1px)     | ![all](https://github.com/samoswall/pic-shutter-card/blob/main/dist/liteblue.png)\n| litegreen.png         | Image of a light green curtain cloth                                              | (1px x 1px)     | ![all](https://github.com/samoswall/pic-shutter-card/blob/main/dist/litegreen.png)\n| sc_shutter_slide.png  | Louver image (top 4 pixels white, bottom with transparent gradient)               | (1px x 6px)     | ![all](https://github.com/samoswall/pic-shutter-card/blob/main/dist/sc_shutter_slide.png)\n| sc_shutter_bottom.png | Image of the bottom bar of the roller blinds                                      | (137px x 7px)   | ![all](https://github.com/samoswall/pic-shutter-card/blob/main/dist/sc_shutter_bottom.png)\n| pic_balcon_l.png      | Window frame with door. (left)                                                    | (232px x 610px) | ![all](https://github.com/samoswall/pic-shutter-card/blob/main/dist/pic_balcon_l.png)\n| pic_balcon_r.png      | Window frame with door. (right)                                                   | (234px x 610px) | ![all](https://github.com/samoswall/pic-shutter-card/blob/main/dist/pic_balcon_r.png)\n\n\u003ca id=\"A5\"\u003e\u003c/a\u003e\n### Examples of the card code\n\n**Example of the minimum card code**\n\n![all](https://github.com/samoswall/pic-shutter-card/blob/main/Image/sample1.png)\n```yaml\ntype: custom:pic-shutter-card\nentities:\n- entity: cover.roll_1\n```\n\n**Sample card code 1**\n\n![all](https://github.com/samoswall/pic-shutter-card/blob/main/Image/sample2.png)\n```yaml\ntype: horizontal-stack\ncards:\n- type: custom:pic-shutter-card\n  entities:\n  - entity: cover.roll_2\n    name: ' '\n    buttons_position: not show\n    title_position: bottom\n    outside_window: show\n    outside_window_pic: /local/community/pic-shutter-card/outwin1.png\n    shutter_slide_pic: /local/community/pic-shutter-card/sc_shutter_slide.png\n    shutter_animation: not show\n- type: custom:pic-shutter-card\n  entities:\n  - entity: cover.roll_2\n    name: ' '\n    buttons_position: not show\n    title_position: bottom\n    outside_window: show\n    outside_window_pic: /local/community/pic-shutter-card/outwin2.png\n    shutter_slide_pic: /local/community/pic-shutter-card/purple.png\n- type: custom:pic-shutter-card\n  entities:\n  - entity: cover.roll_2\n    name: ' '\n    buttons_position: not show\n    title_position: bottom\n    outside_window: show\n    outside_window_pic: /local/community/pic-shutter-card/outwin1.png\n    shutter_slide_pic: /local/community/pic-shutter-card/litegreen.png\n- type: custom:pic-shutter-card\n  entities:\n  - entity: cover.roll_2\n    name: ' '\n    buttons_position: not show\n    title_position: bottom\n    outside_window: show\n    outside_window_pic: /local/community/pic-shutter-card/outwin2.png\n    shutter_slide_pic: /local/community/pic-shutter-card/liteblue.png\n    shutter_animation: not show\n```\n\n**Sample card code 2**\n\n![all](https://github.com/samoswall/pic-shutter-card/blob/main/Image/sample3.png)\n```yaml\ntype: horizontal-stack\ncards:\n- type: custom:pic-shutter-card\n  entities:\n  - entity: cover.roll_1\n    name: Left\n    buttons_position: left\n    title_position: bottom\n    outside_window: show\n    outside_window_pic: /local/community/pic-shutter-card/outside_window2.png\n    frame_window_pic: /local/community/pic-shutter-card/frame_window.png\n    shutter_slide_pic: /local/community/pic-shutter-card/art1.png\n    shutter_bottom_pic: none\n    shutter_direction: left\n    shutter_heigth: 135\n    shutter_min_position: 5\n    shutter_max_position: 95\n    shutter_animation: show\n- type: custom:pic-shutter-card\n  entities:\n  - entity: cover.roll_1\n    name: LeftRight\n    buttons_position: left\n    title_position: bottom\n    outside_window: show\n    outside_window_pic: /local/community/pic-shutter-card/outside_window4.png\n    frame_window_pic: /local/community/pic-shutter-card/frame_window.png\n    shutter_slide_pic: /local/community/pic-shutter-card/art1.png\n    shutter_bottom_pic: none\n    shutter_direction: leftright\n    shutter_heigth: 135\n    shutter_min_position: 5\n    shutter_max_position: 95\n    shutter_animation: show\n- type: custom:pic-shutter-card\n  entities:\n  - entity: cover.roll_1\n    name: Right\n    buttons_position: left\n    title_position: bottom\n    outside_window: show\n    outside_window_pic: /local/community/pic-shutter-card/outside_window5.png\n    frame_window_pic: /local/community/pic-shutter-card/frame_window.png\n    shutter_slide_pic: /local/community/pic-shutter-card/art1.png\n    shutter_bottom_pic: none\n    shutter_direction: right\n    shutter_heigth: 135\n    shutter_min_position: 5\n    shutter_max_position: 95\n    shutter_animation: show\n```\n\n**Sample card code 3**\n\n![all](https://github.com/samoswall/pic-shutter-card/blob/main/Image/sample4.png)\n```yaml\ntype: horizontal-stack\ncards:\n- type: custom:pic-shutter-card\n  entities:\n  - entity: cover.roll_1\n    name: Left\n    buttons_position: right\n    title_position: bottom\n    shutter_animation: show\n    shutter_min_position: 5\n    shutter_top: 4\n    shutter_max_position: 135\n    outside_window: show\n    outside_window_pic: /local/community/pic-shutter-card/outside_window.png\n    frame_window_pic: /local/community/pic-shutter-card/frame_win1.png\n    shutter_slide_pic: /local/community/pic-shutter-card/art_city.png\n    shutter_bottom_pic: show\n- type: custom:pic-shutter-card\n  entities:\n  - entity: cover.roll_1\n    name: Right\n    buttons_position: left\n    title_position: bottom\n    shutter_animation: show\n    outside_window: show\n    outside_window_pic: /local/community/pic-shutter-card/outwin1.png\n    frame_window_pic: /local/community/pic-shutter-card/frame_win1_2.png\n    shutter_slide_pic: /local/community/pic-shutter-card/art4.png\n    shutter_bottom_pic: none\n    shutter_top: -1\n    shutter_heigth: 159\n    shutter_direction: leftright\n    shutter_min_position: -1\n    shutter_max_position: 100\n```\n\n**Sample card code 4**\n\n![all](https://github.com/samoswall/pic-shutter-card/blob/main/Image/sample5.png)\n```yaml\ntype: horizontal-stack\ncards:\n- type: custom:pic-shutter-card\n  entities:\n  - entity: cover.roll_2\n    name: ' '\n    buttons_position: left\n    title_position: bottom\n    outside_window: show\n    outside_window_pic: /local/community/pic-shutter-card/outside_window.png\n    frame_window_pic: /local/community/pic-shutter-card/frame_win1.png\n    shutter_min_position: 3\n    shutter_top: 5\n    shutter_max_position: 137\n- type: custom:pic-shutter-card\n  entities:\n  - entity: cover.roll_2\n    name: ' '\n    buttons_position: right\n    title_position: bottom\n    outside_window: show\n    outside_window_pic: /local/community/pic-shutter-card/outside_window.png\n    frame_window_pic: /local/community/pic-shutter-card/frame_win2.png\n    shutter_min_position: 3\n    shutter_top: 5\n    shutter_max_position: 142\n```\n\n**Sample card code 5**\n\n![all](https://github.com/samoswall/pic-shutter-card/blob/main/Image/sample6.gif)\n```yaml\ntype: horizontal-stack\ncards:\n  - type: custom:pic-shutter-card\n    entities:\n      - entity: cover.roll_1\n        name: ' '\n        buttons_position: left\n        title_position: bottom\n        outside_window: show\n        frame_window_pic: /local/community/pic-shutter-card/pic_balcon_l.png\n        shutter_min_position: 3\n        shutter_top: 18\n        shutter_left: 21\n        shutter_max_position: 257\n        shutter_pic_height: 300\n        shutter_width: 74\n  - type: custom:pic-shutter-card\n    entities:\n      - entity: cover.roll_2\n        name: ' '\n        buttons_position: right\n        title_position: bottom\n        outside_window: show\n        frame_window_pic: /local/community/pic-shutter-card/pic_balcon_r.png\n        shutter_min_position: 3\n        shutter_top: 18\n        shutter_left: 3\n        shutter_max_position: 173\n        shutter_pic_height: 300\n        shutter_width: 80\n```\n\u003ca id=\"A6\"\u003e\u003c/a\u003e\n### Thanks\n\nThis card is an upgrade of the [has-shutter-card](https://github.com/Deejayfool/has-shutter-card).\nThanks to the author [Deejayfool](https://github.com/Deejayfool).\n\n\u003ca id=\"A7\"\u003e\u003c/a\u003e\n## Donations\nYou can support this or other projects.\n[![Donate](https://img.shields.io/badge/donate-Yandex-red.svg)](https://yoomoney.ru/fundraise/b8GYBARCVRE.230309)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsamoswall%2Fpic-shutter-card","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsamoswall%2Fpic-shutter-card","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsamoswall%2Fpic-shutter-card/lists"}