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

25 сентября 2020, 11:49

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

1600x_image.png?1600805771

Что умеет?

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

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

1600x_image.png?1600805771Статистика, графики.
1600x_image.png?1600805813Заставка с Youtube, можно развернуть на полный экран, монитор воспроизводит звук треска камина.
1600x_image.png?1600805761 Сварить пиво? Полезный экран.
1600x_image.png?1600805754Пылесос Roborock S5 Max.
1600x_image.png?1600805753Управление окнами, проветрить можно по таймеру.
1600x_image.png?1600805755Такие настройки у вытяжек, света. Режим авто, когда девайс работает по сценариям.
1600x_image.png?1600979938Прогноз погоды и данные с метеостанции.
1600x_image.png?1600979936Можно оставить весточку.
1600x_image.png?1600979935Настройка уведомлений в телеграм.

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

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

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

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

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

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

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

1600x_image.png?1600807116В виде планшета, компактный корпус
1600x_image.png?1600807111С кронштейном, для встраивания
1600x_image.png?1600807115Монитор с лаконичным дизайном

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

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

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

1600x_image.png?1600966285Под монитором находится датчик движения wb-msw3.
1600x_image.png?1600966284Задняя часть располагается в шкафу, поэтому эстетическая составляющая не учитывалась.
1600x_image.png?1600966285
Устанавливал сам, крепление придумал из доработанного 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 (по адресу http://ip_адрес:1880), надо установить следующие плагины:
На страницах плагинов есть примеры и описание возможностей.
Все готово, после перезагрузки экран покажет киоск, с пустым дэшбордом.

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

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

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

1600x_image.png?1600977349

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

  • Настройки 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 пальцами влево и я вижу картинку точь-в-точь, как на мониторе. Иногда закидываю интерфейс на второй монитор. 

Заключение

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

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

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

1600x_image.png?1600805762

Все новости мира умных домов - t.me/SprutAI_News или Instagram
Остались вопросы? Мы в Telegram - @SprutAI

Хочешь умный дом но нет времени разбираться?
Посмотри примеры работ и выбери себе интегратора.
  1. Сергей Сафронов (deda)
    Сергей Сафронов (deda) 27 дней назад

    Лайк однозначно

    • (dahof53988)
      (dahof53988) 27 дней назад

      Лайк, подписка, колокольчик))

  2. Евгений Лузин (EvLuz)
    Евгений Лузин (EvLuz) 27 дней назад

    Классно, думаю и я когда-нибудь созрею.👍

  3. (dahof53988)
    (dahof53988) 27 дней назад

    Пипец как это всё страшно выглядит

  4. (yudaevvalera)
    (yudaevvalera) 27 дней назад

    Вангую возникновение сенсорных теликов. если тема УД будет так же быстро развиваться, Статья супер, спасибо

    • (dahof53988)
      (dahof53988) 27 дней назад

      Здесь что клуб предсказателей? Идите в форум любителей ванг и шоу экстрасенсов. Этому булшиту здесь не место

  5. Олег Челбаев (sprut)
    Олег Челбаев (sprut) 27 дней назад
    Весточка получена )))

  6. Maксат Умиров (Maxat_Shymkent)

    Класс просто...

  7. (znammut)
    (znammut) 26 дней назад

    Красотой не блещет, надо дорабатывать. За труды +

  8. Александр Попов (9516970@gmail.com)

    Статья одна из лучших на портале. Управлять домом через сенсорный монитор очень удобно. Всегда видно, что где включено. Для квартиры из двух комнат, конечно это избыточно, а вот для частного дома лучшее решение. Помимо основного экрана можно включать различные странички с необходимыми для умного дома компонентами, в частности страничка управлением колонкой с Алисой, включать музыку по жанрам, детские сказки и много другое. От себя хочу добавить Большое спасибо Андрею за помощь в создании моего Умного Дома.

  9. (t3sc0)
    (t3sc0) 24 дня назад
    практично ли использовать глянцевый экран? на нем же постоянно будут отпечатки
    оффтоп
    судя по скринам, Кате тема умного дома не особо интересна =)
    • Андрей Попов (andreypopov)

      думаю, что зависит от места, если прямой солнечный свет не попадает на него, то отпечатки незаметны (я не замечаю их)

К списку статей

Устройства в материале

Скидки для сообщества

Интернет-магазин yourhomekit.ru

+7 914 550-51-11
Промокод:
SPRUT-BLG
Размер скидки:
8%
Cамый большой ассортимент в России аксессуаров Apple HomeKit

Похожие статьи

15 ноября 2018, 09:42
Способы автоматизации механических ворот
28 августа 2018, 09:48
От голого Raspbian до веб-интерфейса homebridge за четыре команды в терминале.
03 октября 2018, 22:03
Как собрать и настроить Hyperion Ambilight - адаптивную подсветку ТВ.
18 февраля 2020, 17:06
В данной статье описывается сборка слаботочного эл. щита на базе Wiren Board 6, а так же силового щита для небольшой квартиры.
24 августа 2018, 09:49
Как удаленно управлять Mac через Siri.
01 октября 2019, 07:07
"У всякого в умном дому неведомо никому" (с) Народная мудрость
09 января 2019, 17:34
Небольшая статья о том, зачем нужна малина, почему автоматизации в HomeKit это не очень хорошо и чем USB стик лучше отдельного шлюза.
03 апреля 2019, 04:29
Разбираем простейшую задачу по электрическому подключению светодиодной ленты к источнику питания и управлению через Умный дом.
04 апреля 2019, 08:22
Личная жизнь мешает увлечению "умным домом"? Есть решение!
08 апреля 2020, 11:32
Голосовые уведомления через Xiaomi Gateway, Home Assistant и HomeKit. Пример реализации, кейсы применения.