Один монитор, чтобы править всем Умным Домом

Краткий обзор моей сенсорной панели управления всеми устройствами умного дома, а также программного обеспечения и реализации интерфейса.

Что умеет?

На основном экране: управление всем светом, кранами, увлажнителем, пылесосом, колонкой, управление температурой, информация с датчиков, камеры, прогноз погоды, управление окнами/шторами.

Вот несколько моих дополнительных рабочих экранов:

Если вы заинтересовались этой темой, то можно приступить к выбору монитора.

Выбор монитора

Я начал строить дом и задался вопросом: Что можно повесить на стену для управления всеми устройствами, которые у меня есть и будут? Смотрел в сторону планшетов: ipad - ограничен приложением Home, сложно что-то кастомизировать; android - может быть, большое разнообразие моделей, но хотелось что-то побольше в размерах, чтобы все влезло на один экран и этим было удобно пользоваться. Я сместил фокус поиска на мониторы, потом перешел к информационным панелям, таким, которые используются в различных киосках для оплаты чего-либо, электронных очередей и т.п. На самом деле, есть всего один производитель - iiyama, выбор сводится всего к нескольким параметрам в каталоге:

Диагональ экранаОптимально 20-24 дюйма, разрешение не меньше Full HD 1080.

Встраивать или вешатьВстраиваемые панели стоят почти в два раза дороже, но с ними чуть проще. tf2234mc-b6x , tf2415mc-b2
Монитор с креплением на стену - вопрос к эстетике. t2235msc_b1, t2435msc_b2
Если надо сэкономить, то можно встроить обычный монитор, требования такие: лаконичный дизайн, экран должен быть цельным стеклом, без пластиковых краев и без кнопок спереди. t2236msc_b2

ТонкостиПо личным наблюдениям, у разных панелей разное расстояние от стекла до сенсора, это может влиять на управление. Например, у моего это около 5мм, касаешься монитора, а палец, как-будто висит над картинкой. У более дорогих моделей стекло тоньше <3мм. Тип сенсора проекционно-емкостной зарекомендовал себя хорошо, все нажатия определяются четко. Мультитач обычно указан на 10 пальцев, но в линуксе это не поддерживается (максимум 2). Если после установки монитора нет доступа к его кнопкам, ничего страшного, можно управлять программно.

Я купил модель t2236msc_b2 - это монитор, не предназначенный для встраивания, без кнопок на лицевой панели, с цельным куском стекла и почти идеально ровными гранями. Обошелся мне в 400$, и отлично встроился заподлицо, в стену.

Монтаж и подключение

Начать надо с выбора места расположения монитора. У меня он находится в коридоре - самой проходной зоне, место оказалось очень удачным и верным. Выходя из любой комнаты, невольно бросаешь взгляд на экран, а ночью он никому не мешает.

Монитор должен подключаться к компьютеру, например, к Raspberry Pi4, и чем мощнее, тем лучше, в идеале должна быть полноценная графическая карта, для быстрой отрисовки интерфейсов. Если использовать более мощный компьютер, то встает вопрос, где он должен располагаться. Мой монитор находится на первом этаже, а его серверная часть - на втором. Я использовал 10 м HDMI кабель и 10 м USB удлинитель (для тач итерфейса), предварительно проверил работоспособность на такой длине проводов! Но также оставил и "план-Б", разместил несколько обычных розеток и сетевую розетку прямо рядом с монитором, таким образом, если пострадает трасса с кабелями, то я смогу повесить малинку прямо на заднюю часть монитора.

Устанавливал сам, крепление придумал из доработанного VESA. На алиэкспрессе есть множество угловых переходников для usb/hdmi - это упростит подключение.

Монитор потребляет 10 Вт на минимальной яркости, 20 Вт на максимальной, 0 Вт при отключении питания hdmi, и 3 Вт в режиме сна. Режим сна нельзя активировать с pi4, хотя работает на pi3. Такой режим примечателен моментальным включением, тогда как включение hdmi занимает 3 секунды.

Когда сигнализация находится в состоянии "Ночь", монитор выключен, но включается по датчику движения. Датчик WB очень тонко можно откалибровать, таким образом, что он не будет работать, если человек проходит мимо, но срабатывает, если подойти на расстояние вытянутой руки. Можно заменить оптическим, ультразвуковым или даже микроволновым - все они настраиваются на расстояние срабатывания.

Настройка ПО

Качаем и устанавливаем образ Raspberry Pi OS (32-bit) with desktop, открываем ssh.

По желанию, удаленный доступ через VNC, работает из коробки.

Приступаем к установке и настройке софта:

sudo apt-get update sudo apt-get upgrade #установка node-red curl --silent https://deb.nodesource.com/gpgkey/nodesource.gpg.key | sudo apt-key add - curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash - sudo apt-get install -y nodejs sudo npm install npm@latest -g bash <(curl -sL https://raw.githubusercontent.com/node-red/raspbian-deb-package/master/resources/update-nodejs-and-nodered) sudo systemctl enable nodered.service node-red-start #установка необходимых пакетов sudo apt-get install -y xscreensaver dirmngr ddcutil uncluttered #чтобы монитор не засыпал sudo nano /etc/lightdm/lightdm.conf #добавить следующие команды в [SeatDefaults] секцию: xserver-command=X -s 0 dpms xserver-command = X -nocursor #убрать черную рамку экрана sudo nano /boot/config.txt #выставить disable_overscan=1 #настраиваем автозагрузку sudo nano /home/pi/.config/lxsession/LXDE-pi/autostart xset s 0 0 @xset s noblank @xset s noexpose @xset dpms 0 0 0 @bash /home/pi/kiosk/kiosk.sh & #путь к скрипту

Скрипт для автозагрузки киоска, разместить по пути:

/home/pi/kiosk/kiosk.sh

При запуске OS, скрипт открывает браузер на node-red dashboard UI, отключает курсор, заставку, меню браузера и др.

#!/bin/bash xset s noblank xset s off xset -dpms xset s 0 0 xset s noblank xset s noexpose xset dpms 0 0 0 unclutter -idle 0.1 -keystroke -root & sed -i 's/"exited_cleanly":false/"exited_cleanly":true/' /home/pi/.config/chromium/Default/Preferences sed -i 's/"exit_type":"Crashed"/"exit_type":"Normal"/' /home/pi/.config/chromium/Default/Preferences chromium-browser http://127.0.0.1:1880/ui --window-size=1920,1080 --start-fullscreen --kiosk --incognito --noerrdialogs --disable-translate --no-first-run --fast --fast-start --disable-infobars --disable-features=TranslateUI --disk-cache-dir=/dev/null --password-store=basic while true; do xdotool keydown ctrl Tab; xdotool keyup ctrl Tab; sleep 15 xdone

Проверить работоспособность команд управления:

DISPLAY=:0 xset dpms force on #включить питание DISPLAY=:0 xset dpms force off #отключить питание #войти в режим сна, на pi4 выключит питание vcgencmd display_power 0 #ddcutil не работает на pi4 ddcutil setvcp 10 62 #яркость 62% ddcutil getvcp 10 #получить текущую яркость

• node-red-dashboard
• node-red-contrib-ui-svg
• node-red-contrib-ui-contextmenu

На страницах плагинов есть примеры и описание возможностей.

Все готово, после перезагрузки экран покажет киоск, с пустым дэшбордом.

Создание интерфейса

Для отрисовки UI можно выбрать любую платформу: node-red, homeassistant, majordomo и тд.

Я остановился на node-red и svg. Выглядит это вот так, тут ничего страшного нет, все возникло путем эволюционных решений.

Разберу несколько базовых вещей:

• Настройки SVG ноды - в ней есть встроенный редактор, возможно, им даже можно приноровиться пользоваться, но я его отключил, проще отредактировать код. Есть настройка для показа координат курсора - это будет удобно, при настройке.
• Фоновая картинка - это план дома, стены, окна. У меня был проект дома в автокаде, из него я сделал png, и подогнал размеры. Нарисовать в чем угодно, это неважно. Можно сделать сразу в SVG. Как закинуть картинку в статическую директорию httpStatic, можно почитать здесь.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="none" x="0" y="0" viewBox="0 0 1704 695" width="100%"> <image width="1704px" height="695" id="background" xlink:href="/SVG.png" /> </svg>

• svg иконки - я нахожу их в Интернете, беру самые простые, которые занимают мало места, переношу их в текстовый редактор, располагаю в контейнере, для которого указываю размеры и координаты, вот пример лампочки:

<g transform="translate(1532 530)"> <rect x="0" y="0" width="110" height="110" fill-opacity="0" stroke-opacity="0"></rect> <g id="wb-mr6c_25-K1" class="bulb box p-middle" transform="matrix(0.55 0 0 0.55 0 0)"> <path d="M24.043 58.233c-0.631 13.205 5.858 24.94 15.957 31.701v14.066h40v-14.066c9.647-6.458 16-17.453 16-29.934 0-20.264-16.742-36.617-37.148-35.982-18.625 0.579-33.919 15.603-34.809 34.215z" /> <path d="M40 112.16c0 8.749 7.091 15.84 15.84 15.84h8.32c8.749 0 15.84-7.091 15.84-15.84v-0.16h-40v0.16z" /> </g> <text id="wb-mr6c_25-K1-auto" class="motion_auto p-middle" x="33" y="33">A</text> </g>

translate(1532 530) - координаты х/y
matrix(0.55 0 0 0.55 0 0) - масштабирование, 55% от оригинала
<rect> - это невидимый блок, который является зоной нажатия, используется для удобства, чтобы легче попадать в нужный элемент интерфейсаСтили - если знакомы с html css, то все будет очень просто: помещаем стили в template node, to head section:

<style> svg { -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Safari */ -khtml-user-select: none; /* Konqueror HTML */ -moz-user-select: none; /* Old versions of Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; /* Non-prefixed version, currently supported by Chrome, Opera and Firefox */ }.box { pointer-events:bounding-box; }.p-middle { text-anchor:middle; alignment-baseline:middle; }.bulb { fill: #cccccc; stroke:black; stroke-width:1px; vector-effect:non-scaling-stroke; }.bulb[data-status="1"] { fill: yellow; } </style>

• http доступ - не могу не поделиться очень удобным способом использования. На своем макбуке я открываю интерфейс умного дома, в отдельной вкладке и на отдельном экране. Свайп 4 пальцами влево и я вижу картинку точь-в-точь, как на мониторе. Иногда закидываю интерфейс на второй монитор.

Заключение

Когда я покупал сенсорный монитор, я не думал, что он может стать фишкой всего дома, а самое главное - удобным инструментом, которым пользуются все члены семьи, каждый день. Я очень рекомендую это решение: относительно низкая цена при огромной пользе, вау-эффект, миллион различных методов использования.

Настройка занимает немало времени и каждый должен пройти этот путь сам, ведь у каждого свой собственный уникальный проект, но все усилия потом окупятся с лихвой.

Примеры работ моих последователей: