Краткий обзор моей сенсорной панели управления всеми устройствами умного дома, а также программного обеспечения и реализации интерфейса.
Что умеет?
Вот несколько моих дополнительных рабочих экранов:
Если вы заинтересовались этой темой, то можно приступить к выбору монитора.
Выбор монитора
- Диагональ экрана
- Встраивать или вешать
Монитор с креплением на стену - вопрос к эстетике. t2235msc_b1, t2435msc_b2
Если надо сэкономить, то можно встроить обычный монитор, требования такие: лаконичный дизайн, экран должен быть цельным стеклом, без пластиковых краев и без кнопок спереди. t2236msc_b2
- Тонкости
Я купил модель t2236msc_b2 - это монитор, не предназначенный для встраивания, без кнопок на лицевой панели, с цельным куском стекла и почти идеально ровными гранями. Обошелся мне в 400$, и отлично встроился заподлицо, в стену.
Монтаж и подключение
Монитор должен подключаться к компьютеру, например, к Raspberry Pi4, и чем мощнее, тем лучше, в идеале должна быть полноценная графическая карта, для быстрой отрисовки интерфейсов. Если использовать более мощный компьютер, то встает вопрос, где он должен располагаться. Мой монитор находится на первом этаже, а его серверная часть - на втором. Я использовал 10 м HDMI кабель и 10 м USB удлинитель (для тач итерфейса), предварительно проверил работоспособность на такой длине проводов! Но также оставил и "план-Б", разместил несколько обычных розеток и сетевую розетку прямо рядом с монитором, таким образом, если пострадает трасса с кабелями, то я смогу повесить малинку прямо на заднюю часть монитора.
Монитор потребляет 10 Вт на минимальной яркости, 20 Вт на максимальной, 0 Вт при отключении питания hdmi, и 3 Вт в режиме сна. Режим сна нельзя активировать с pi4, хотя работает на pi3. Такой режим примечателен моментальным включением, тогда как включение hdmi занимает 3 секунды.
Когда сигнализация находится в состоянии "Ночь", монитор выключен, но включается по датчику движения. Датчик WB очень тонко можно откалибровать, таким образом, что он не будет работать, если человек проходит мимо, но срабатывает, если подойти на расстояние вытянутой руки. Можно заменить оптическим, ультразвуковым или даже микроволновым - все они настраиваются на расстояние срабатывания.
Настройка ПО
По желанию, удаленный доступ через 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 & #путь к скрипту
Скрипт для автозагрузки киоска, разместить по пути:
При запуске 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 #получить текущую яркость
Создание интерфейса
Для отрисовки 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>
<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 пальцами влево и я вижу картинку точь-в-точь, как на мониторе. Иногда закидываю интерфейс на второй монитор.
Заключение
Настройка занимает немало времени и каждый должен пройти этот путь сам, ведь у каждого свой собственный уникальный проект, но все усилия потом окупятся с лихвой.
Примеры работ моих последователей:
Лайк однозначно
Лайк, подписка, колокольчик))
Классно, думаю и я когда-нибудь созрею.👍
Пипец как это всё страшно выглядит
Вангую возникновение сенсорных теликов. если тема УД будет так же быстро развиваться, Статья супер, спасибо
Здесь что клуб предсказателей? Идите в форум любителей ванг и шоу экстрасенсов. Этому булшиту здесь не место
Класс просто...
Красотой не блещет, надо дорабатывать. За труды +
И Непонятно почему не взять какую-нибудь home assistant за основу
Статья одна из лучших на портале. Управлять домом через сенсорный монитор очень удобно. Всегда видно, что где включено. Для квартиры из двух комнат, конечно это избыточно, а вот для частного дома лучшее решение. Помимо основного экрана можно включать различные странички с необходимыми для умного дома компонентами, в частности страничка управлением колонкой с Алисой, включать музыку по жанрам, детские сказки и много другое. От себя хочу добавить Большое спасибо Андрею за помощь в создании моего Умного Дома.
оффтоп судя по скринам, Кате тема умного дома не особо интересна =)
думаю, что зависит от места, если прямой солнечный свет не попадает на него, то отпечатки незаметны (я не замечаю их)