Code Monkey home page Code Monkey logo

pic-shutter-card's Introduction

pic-shutter-card

EN

hacs_badge

Donate

Карточка штор для Lovelace UI Home Assistant all all Карточка отображает текущее положение шторы, позволяет управлять её положением и имеет пользовательские настройки для устоновки произвольных изображений окна, вида за окном и полотна шторы.

Содержание

Добавление репозитория

В разделе HACS в меню, расположенном в правом верхнем углу, выбираем пункт: Пользовательские репозитории.

Вводим адрес репозитория: https://github.com/samoswall/pic-shutter-card, выбираем категорию Lovelace, нажимаем кнопку Добавить.

Установка

В разделе HACS в поиске вводим pic-shutter-card, выбираем карточку, нажимаем кнопку Скачать.

Конфигурация

Главное

Имя Тип Важность параметра Значение по умолчанию Описание
type string Обязательно - Должно быть "custom:pic-shutter-card"
title string Не обязательно - Название карточки. Отображается в верхнем правом углу.

Параметры

Имя Тип Важность параметра Значение по умолчанию Описание
entity string Обязательно - Идентификатор сущности
name string Не обязательно Friendly name of the entity Отображаемое имя шторы
buttons_position string Не обязательно left Местоположение кнопок управления: слева - left , справа - right от окна или не показывать - not show
title_position string Не обязательно top Местоположение имени шторы и процента открытия: сверху - top , снизу - bottom
outside_window string Не обязательно not show Отображение картинки вида за окном: показывать - show , не показывать - любое другое значение
invert_percentage boolean Не обязательно false Инверсия положения шторы. Установите true если 100% - штора закрыта и 0% when it is opened
outside_window_pic string Не обязательно /local/community/pic-shutter-card/outside_window.png Файл изображения вида за окном. Загружены с карточкой: 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 Не обязательно /local/community/pic-shutter-card/frame_window.png Файл изображения рамы окна. Загружены с карточкой: frame_window.png frame_win1.png frame_win1_2.png frame_win2.png
shutter_slide_pic string Не обязательно /local/community/pic-shutter-card/sc_shutter_slide.png Файл изображения полотна шторы. Загружены с карточкой: 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 Не обязательно /local/community/pic-shutter-card/sc_shutter_bottom.png Файл изображения нижней планки у рулонных штор. Загружен с карточкой: sc_shutter_bottom.png
shutter_min_position int (px) Не обязательно 4 Минимальное положение шторы. (в открытом положении)
shutter_max_position int (px) Не обязательно 127 Максимальное положение шторы. (в закрытом положении)
shutter_heigth int (px) Не обязательно 140 Высота шторы. Используется только для штор, у которых направление открытия влево и/или вправо.
shutter_direction string Не обязательно up Направление открытия шторы: вверх - up , влево - left , вправо - right , влево и вправо одновременно - leftright
shutter_top int (px) Не обязательно 17 Отступ от верхнего края окна до полотна шторы. Значение в пикселях. (высота окна 141 пиксель)
shutter_animation string Не обязательно show Отображение анимации направления движения: показывать - show , не показывать - любое другое значение
shutter_pic_height int (px) Не обязательно 155 Высота изображения окна. Увеличивает вертикальный размер карточки.
shutter_left int (%) Не обязательно 5 Отступ полотна шторы от левого края окна. Указывается в % от размера окна.
shutter_width int (%) Не обязательно 90 Ширина полотна шторы. Указывается в % от размера окна.
shutter_end_offset int (%) Не обязательно 0 Смещение нижнего значения полотна шторы. Указывается в % от 100. (Пример: Если при 80% штора полностью закрывает окно, то смещение 20 отобразит как закрытое на 100%)

Описание файлов изображений

В папке карточки pic-shutter-card уже имеются некоторые изображения:

Файл Описание Размер изображения Изображение
frame_window.png Рама окна вариант 1 (вертикальные жалюзи) (153px х 151px) all
frame_win1.png Рама окна вариант 2 (белая рама с подоконником) (153px х 151px) all
frame_win1_2.png Рама окна вариант 2 c гардиной для полотна шторы art4.png (153px х 151px) all
frame_win2.png Рама окна вариант 3 (коричневая рама) (153px х 151px) all
outside_window.png Изображение вида за окном вариант 1 (Москва Сити) (153px х 151px) all
outside_window1.png Изображение вида за окном вариант 2 (Панорама ночного города часть 1) (153px х 151px) all
outside_window2.png Изображение вида за окном вариант 2 (Панорама ночного города часть 2) (153px х 151px) all
outside_window3.png Изображение вида за окном вариант 2 (Панорама ночного города часть 3) (153px х 151px) all
outside_window4.png Изображение вида за окном вариант 2 (Панорама ночного города часть 4) (153px х 151px) all
outside_window5.png Изображение вида за окном вариант 2 (Панорама ночного города часть 5) (153px х 151px) all
outwin1.png Изображение вида за окном вариант 3 (Природа) (153px х 151px) all
outwin2.png Изображение вида за окном вариант 4 (Лес) (153px х 151px) all
outwin3.png Изображение вида за окном вариант 5 (Озеро) (153px х 151px) all
art.png Изображение полотна шторы вариант 1 (Абстракция белый фон) (100px х 150px) all
art1.png Изображение полотна шторы вариант 2 (Абстракция черный фон) (141px х 125px) all
art_city.png Изображение полотна шторы вариант 3 (Ночной город черный фон) (141px х 125px) all
art3.png Изображение полотна шторы вариант 1 (Абстракция белый фон) (142px х 145px) all
art4.png Изображение полотна шторы вариант 4 (Синяя штора на гардине) (141px х 130px) all
purple.png Изображение сиреневого полотна шторы (1px х 1px) all
liteblue.png Изображение голубого полотна шторы (1px х 1px) all
litegreen.png Изображение светлозеленого полотна шторы (1px х 1px) all
sc_shutter_slide.png Изображение жалюзи (верхние 4 пикселя белые, нижние с прозрачным градиентом) (1px х 6px) all
sc_shutter_bottom.png Изображение нижней планки у рулонных штор (137px х 7px) all
pic_balcon_l.png Рама окна с дверью. (левая) (232px x 610px) all
pic_balcon_r.png Рама окна с дверью. (правая) (234px x 610px) all

Примеры кода карточки

Пример минимального кода карточки

all

type: custom:pic-shutter-card
entities:
- entity: cover.roll_1

Пример кода карточки 1

all

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

Пример кода карточки 2

all

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

Пример кода карточки 3

all

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

Пример кода карточки 4

all

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

Пример кода карточки 5

all

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

Благодарности

Эта карточка является модернизацией карточки hass-shutter-card. Спасибо автору Deejayfool.

Пожертвования

Вы можете поддержать этот или другие проекты. Donate

pic-shutter-card's People

Contributors

samoswall avatar

Stargazers

avatar avatar avatar avatar avatar avatar avatar avatar avatar

Watchers

avatar avatar

pic-shutter-card's Issues

Different heights for window and door-window

Hi @samoswall, thanks for your nice work!

Not really an issue, but probably an improvement.
I have windows and door-windows (so they have different heights) and I'd like to show them in an horizontal stack.
I've tried with layout-card and card-mod but the result is awful because the full card is squeezed including buttons and text.
Is it a native way to have shutters with different heights in the same horizotal stack?

Can you also put the English readme as default pls?

Animation Issue and Offset

Hello,

Thank you for this kind project and all those customizations !
I have an issue with the animation which it doesn't seem to work.

I have tested with this sample code:

type: custom:pic-shutter-card
entities:
  - entity: cover.volet_xxxx
    shutter_animation: show

Web browser : Chrome & Edge
Home Assistant Core : 2024.5.1

Is-there something wrong on my side ?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.