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

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

Что умеет?

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

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

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

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

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

Настройка ПО

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 #получить текущую яркость

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

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

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

• Настройки 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>

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

Заключение