mirror of
https://github.com/Matysh/houseplan-card
synced 2026-07-31 08:28:31 +00:00
Matysh
70d3453f78
- READMEs (en+ru): doors/windows/locks section (openings tool, live rendering, drag, double-click properties), presence ripples + per-device icon size/rotation in the manual-marker section. - ARCHITECTURE: room geometry rules (derived walls, no-overlap, merge/split via polyclip-ts and why not polygon-clipping), doors & windows model (space.openings, snapToWall, absolute coords, security), per-marker display fields + cell_cm ruler. - DEVELOPMENT: gotchas — polygon-clipping ESM/types mismatch; same-version redeploys keep ?v so browsers cache the old bundle. - STATUS: snapshot refreshed (releases to v1.23.1, dacha deployed v1.23.1), milestones v1.17–v1.23.1 incl. the lost-sources lesson (push right after building). - ROADMAP: 8 shipped Quality-Scale items ticked (done since v1.12.0). - TESTING: restored the v1.22.0 ripple checklist lost in the sandbox reset.
232 lines
21 KiB
Markdown
232 lines
21 KiB
Markdown
# 🏠 House Plan — интерактивный план дома для Home Assistant
|
||
|
||
**Живая карта вашего дома прямо в Home Assistant: этажи, комнаты и устройства на настоящем плане — с реальными состояниями, температурой и уровнем сигнала. Всё настраивается мышкой, без единой строчки YAML.**
|
||
|
||
|
||
|
||
🇬🇧 [English documentation](README.md)
|
||
|
||
---
|
||
|
||
## Что это и зачем
|
||
|
||
House Plan показывает ваш умный дом так, как он выглядит на самом деле — на плане этажей. Вместо длинных списков сущностей вы видите комнаты и устройства на своих местах: где протечка, какая температура в детской, включён ли свет в прихожей, открыты ли ворота.
|
||
|
||
Это удобно, когда:
|
||
|
||
- устройств много, и списками пользоваться неудобно;
|
||
- нужно быстро понять состояние дома «одним взглядом»;
|
||
- хочется отдать доступ близким — по картинке разберётся любой;
|
||
- вы хотите красивый обзорный экран для настенного планшета.
|
||
|
||
Интеграция состоит из двух частей, которые ставятся вместе:
|
||
|
||
- **карточка Lovelace** `houseplan-card` — сам интерактивный план;
|
||
- **серверный компонент** — хранит разметку комнат и позиции иконок в Home Assistant, поэтому план одинаков во всех браузерах и на всех устройствах.
|
||
|
||
---
|
||
|
||
## Чем отличается от аналогов
|
||
|
||
Обычно план дома в Home Assistant делают через `picture-elements`, `ha-floorplan` и подобные решения. Там приходится вручную писать YAML, вычислять координаты каждой иконки и заново править конфиг при каждом изменении. House Plan устроен иначе:
|
||
|
||
| | House Plan | Обычные решения (picture-elements / ha-floorplan) |
|
||
|---|---|---|
|
||
| **Настройка** | Полностью через интерфейс, мышкой | Ручной YAML и правка кода |
|
||
| **Добавление устройств** | Автоматически по комнатам | Каждую сущность вписываете руками |
|
||
| **Координаты иконок** | Перетаскиваете мышью | Считаете пиксели и пишете в конфиг |
|
||
| **Разметка комнат** | Встроенный редактор контуров | Рисуете в стороннем редакторе SVG |
|
||
| **Хранение** | На сервере HA (общее для всех устройств) | В YAML дашборда |
|
||
| **Масштаб** | Плавный зум, всё остаётся чётким (вектор) | Обычно фиксированная картинка |
|
||
|
||
Ключевые преимущества коротко:
|
||
|
||
- **Никакого кода.** Всё — пространства, комнаты, устройства — настраивается кликами.
|
||
- **Автоматическое добавление устройств.** Обвели комнату и привязали её к зоне Home Assistant — устройства этой зоны сами появляются на плане.
|
||
- **Ручное добавление своих.** Любое устройство, группу или даже «виртуальную» точку можно поставить на план вручную, задать имя, иконку, модель, ссылку и приложить PDF-инструкцию.
|
||
- **Живые состояния.** Температура, уровень сигнала Zigbee, вкл/выкл, открыто/закрыто — всё обновляется в реальном времени.
|
||
- **Чёткий зум.** Приближение не «мылит» картинку: план, подписи и иконки остаются векторно-чёткими на любом масштабе.
|
||
|
||
---
|
||
|
||
## Установка
|
||
|
||
В один клик, если у вас уже есть HACS:
|
||
|
||
[](https://my.home-assistant.io/redirect/hacs_repository/?owner=Matysh&repository=houseplan-card&category=integration)
|
||
|
||
|
||
### Через HACS (рекомендуется)
|
||
|
||
1. Откройте **HACS → меню (⋮) → Custom repositories**.
|
||
2. Вставьте URL этого репозитория, категория — **Integration**, и нажмите **Add**.
|
||
3. Найдите в списке **House Plan**, установите и **перезапустите Home Assistant**.
|
||
4. Перейдите в **Настройки → Устройства и службы → Добавить интеграцию** и выберите **House Plan**.
|
||
|
||
Карточка подключается автоматически — добавлять ресурс Lovelace вручную не нужно.
|
||
|
||
> **Карточка не грузится (`Custom element doesn't exist: houseplan-card`) или вы ведёте ресурсы
|
||
> Lovelace в YAML?** Добавьте ресурс вручную, указав URL, который *раздаёт сама интеграция*:
|
||
>
|
||
> ```yaml
|
||
> resources:
|
||
> - url: /houseplan_files/houseplan-card.js
|
||
> type: module
|
||
> ```
|
||
>
|
||
> **Не** используйте `/custom_components/houseplan/frontend/houseplan-card.js` — это путь к файлу
|
||
> на диске, который Home Assistant не отдаёт по HTTP (получите ошибку MIME `text/plain`, и элемент
|
||
> не зарегистрируется). Правильный URL, который раздаёт интеграция, — `/houseplan_files/houseplan-card.js`.
|
||
> Обе карточки (`houseplan-card` и `houseplan-space-card`) лежат в этом одном файле — отдельный ресурс
|
||
> не нужен.
|
||
|
||
### Вручную
|
||
|
||
1. Скопируйте папку `custom_components/houseplan` в каталог `config/custom_components` вашего Home Assistant.
|
||
2. Перезапустите Home Assistant.
|
||
3. Добавьте интеграцию: **Настройки → Устройства и службы → Добавить интеграцию → House Plan**.
|
||
|
||
### Добавление экрана с планом
|
||
|
||
Создайте новую вкладку дашборда (удобнее всего — в режиме «Панель»/Panel) и добавьте карточку:
|
||
|
||
```yaml
|
||
type: custom:houseplan-card
|
||
title: План дома
|
||
```
|
||
|
||
Больше ничего указывать не нужно — всё остальное настраивается прямо на экране.
|
||
|
||
---
|
||
|
||
## Как пользоваться
|
||
|
||
### Шаг 1. Добавьте пространство (этаж)
|
||
|
||
При первом открытии план ещё пуст — House Plan сразу предложит создать первое пространство.
|
||
|
||
Если в вашем Home Assistant уже настроены **этажи**, мастер предложит создать
|
||
пространство для каждого: названия подставятся сами, план попросит по очереди,
|
||
любой этаж можно пропустить.
|
||
|
||
|
||
|
||
В диалоге задайте **название** (например, «1 этаж») и **загрузите подложку** — картинку плана этажа в формате SVG, PNG или JPG. Оба поля обязательны: без плана кнопка «Сохранить» неактивна.
|
||
|
||
|
||
|
||
> 💡 Подложку можно нарисовать в любом планировщике (например, РЕМПЛАННЕР) или сфотографировать бумажный план. Лучше всего SVG — он остаётся чётким при увеличении.
|
||
|
||
Позже можно добавить сколько угодно пространств (этажи, двор, гараж) кнопкой **＋** рядом со вкладками.
|
||
|
||
### Шаг 2. Обведите комнаты
|
||
|
||
После добавления первого пространства карточка сама переходит в режим разметки. Кликайте по точкам сетки, соединяя их линиями, и замкните контур комнаты кликом по первой точке.
|
||
|
||
Как только контур замкнётся, появится окно сохранения комнаты. Здесь нужно **привязать комнату к зоне Home Assistant** — именно это включает автоматику. Для служебных помещений без устройств (холл, сауна) есть кнопка **«Без зоны»**.
|
||
|
||
|
||
|
||
Во время рисования у курсора показывается линейка с реальной длиной текущего отрезка (метры или футы+дюймы на имперской системе HA). Масштаб задаётся для каждого пространства — поле **«Масштаб (размер ячейки сетки)»** в диалоге пространства: сколько сантиметров в одной ячейке (по умолчанию 5 см).
|
||
|
||
Комнаты не могут пересекаться: клик строго внутри существующей комнаты или контур, охватывающий её, отклоняются. Ещё два инструмента помогают перекроить план позже:
|
||
|
||
- **Объединить** — кликните комнату, затем соседнюю с общей стеной; они сольются в одну. Диалог выбирает, чьё имя и зона останутся.
|
||
- **Разделить** — кликните комнату, затем две точки на её стенах; хорда разрежет её надвое. Бо́льшая часть остаётся прежней комнатой (имя, зона, устройства), меньшая просит новое имя и зону.
|
||
|
||
|
||
### Двери, окна и замки
|
||
|
||
В режиме разметки инструмент **«Проём»** ставит двери и окна: кликните рядом со стеной — проём
|
||
примагнитится к ней. Выберите тип, **длину в реальных сантиметрах** (по умолчанию дверь 90 см,
|
||
окно 120 см), датчик открытия и — для двери — **замок**.
|
||
|
||
С привязанным датчиком план оживает: створка двери поворачивается на петле, и дуга распахивания
|
||
дорисовывается по мере открытия настоящей двери; окно раскрывает две створки. Пока открыто,
|
||
подвижные части подсвечены акцентным цветом. У двери с замком рядом отображается замочек —
|
||
зелёный, когда заперто, оранжевый, когда нет. Ради безопасности замок с плана **нельзя**
|
||
переключить — клик по проёму показывает карточку с обоими статусами.
|
||
|
||
Проёмы легко поправить позже: при наведении проём подсвечивается, его можно **перетащить вдоль
|
||
стен** (в том числе за угол), а **двойной клик открывает свойства**.
|
||
|
||
### Шаг 3. Устройства появляются сами
|
||
|
||
Как только вы сохранили комнату с привязкой к зоне, **устройства этой зоны автоматически расставляются внутри контура**. Берутся те же устройства, что показаны на странице **Настройки → Устройства → (фильтр по нужной комнате)** — только осмысленные, без служебных записей, мостов и дубликатов.
|
||
|
||
По умолчанию на план попадают только осмысленные устройства — служебные записи, мосты и дубликаты отфильтрованы. Если нужно видеть **вообще все** устройства зоны, включите в шапке кнопку **👁 «Показать все устройства»**.
|
||
|
||
Дальше можно просто пользоваться планом: клик по иконке открывает карточку устройства с моделью, ссылкой и кнопкой перехода в Home Assistant.
|
||
|
||
|
||
|
||
### Шаг 4. Масштаб
|
||
|
||
Колесо мыши или кнопки **－ / ⊹ / ＋** приближают и отдаляют план; на сенсорном экране работает «щипок» двумя пальцами. При отдалении виден весь план целиком, при приближении — детали, и всё остаётся чётким. Масштаб запоминается отдельно для каждого пространства.
|
||
|
||
|
||
|
||
### Шаг 5. Расставьте значки по местам
|
||
|
||
Значки устройств можно **перетаскивать мышью в любой момент** — отдельный «режим правки» включать не нужно. Позиции сохраняются на сервере и одинаковы во всех браузерах и устройствах. Кнопка **↺** в шапке возвращает автоматическую раскладку.
|
||
|
||
|
||
|
||
### Управление с плана (tap actions)
|
||
|
||
По умолчанию тап по значку открывает инфо-карточку. В настройках карточки можно
|
||
переключить **«Тап по устройству»** на *Переключить* — тогда тап включает/выключает
|
||
свет, розетки, вентиляторы и увлажнители прямо с плана (режим настенного планшета).
|
||
Для безопасности общий toggle не действует на замки, сигнализации, шторы/ворота и
|
||
клапаны; для конкретного устройства toggle можно включить осознанно в его диалоге
|
||
(кроме замков и сигнализаций — они с плана не переключаются никогда). **Долгое
|
||
нажатие** всегда открывает инфо-карточку.
|
||
|
||
### Правила иконок
|
||
|
||
Какая MDI-иконка достанется устройству, решают **правила иконок** — редактируются
|
||
прямо в карточке (кнопка ⬡ в шапке): упорядоченный список «шаблон имени → иконка»
|
||
с живым тест-полем, двуязычные умолчания (EN/RU) и сброс одной кнопкой. Если ни одно
|
||
правило не подошло — решает *device class* сущности (термометр для датчиков
|
||
температуры и т.п.).
|
||
|
||
### Шаг 6. Добавление своих устройств вручную
|
||
|
||
Можно поставить и **отдельную сущность** (не только устройство целиком): начните печатать в поиске привязки — рядом с устройствами появятся отдельные сущности. Удобно, когда одно устройство отдаёт несколько значений (например, температуру и влажность), а вы хотите каждое своей иконкой.
|
||
|
||
|
||
Не всё нужно оставлять на автоматику. Кнопкой **＋** в шапке можно поставить на план любое устройство, группу или **виртуальную точку** (например, «Вентиль на вводе», которого нет как устройства). Задайте имя, иконку, модель, ссылку, описание и при желании приложите **PDF-инструкцию**.
|
||
|
||
В этом же диалоге настраивается вид устройства на плане. **Отображение** переключает значок,
|
||
анимированную **пульсацию присутствия** (расходящиеся кольца, пока сущность активна, и тусклая
|
||
точка в покое — идеально для датчиков движения) или то и другое сразу, с цветом и размером колец
|
||
на устройство. **Размер значка** (×0,5–3) и **поворот** — тоже индивидуальные: вентиль на стене
|
||
может быть маленьким и повёрнутым так, как он установлен.
|
||
|
||
|
||
|
||
---
|
||
|
||
## Удаление
|
||
|
||
1. Уберите карточку (или вкладку с планом) из дашборда.
|
||
2. **Настройки → Устройства и службы → House Plan → Удалить** запись интеграции.
|
||
3. Удалите интеграцию из **HACS** (или папку `custom_components/houseplan` при ручной установке) и перезапустите Home Assistant.
|
||
4. При желании удалите сохранённые данные плана: файлы `config/houseplan/` (подложки и вложения) и записи `houseplan.config` / `houseplan.layout` в каталоге `config/.storage`.
|
||
|
||
---
|
||
|
||
## Часто задаваемые вопросы
|
||
|
||
**Нужно ли что-то писать в YAML?** Нет. Единственная строчка — это добавление карточки на дашборд; всё остальное делается мышкой.
|
||
|
||
**Мои устройства не появились на плане.** Устройство появляется, только если его зона в Home Assistant привязана к нарисованной комнате. Проверьте, что у устройства задана комната (Настройки → Устройства), а комната обведена и привязана к этой зоне. Если устройство есть, но скрыто курированием (мосты, служебные, дубликаты) — включите в шапке кнопку **👁 «Показать все устройства»**.
|
||
|
||
**Можно ли скрыть лишнее устройство или переименовать его?** Да — кликните по устройству на плане и в его карточке нажмите «Редактировать»: там можно сменить имя, иконку, модель или скрыть значок.
|
||
|
||
**Данные хранятся в облаке?** Нет. Всё хранится локально в вашем Home Assistant.
|
||
|
||
---
|
||
|
||
<p align="center"><sub>Скриншоты сделаны на реальной конфигурации Home Assistant.</sub></p>
|