Как можно НЕ использовать сцены в MJDM. Часть 1.

<<< Back

Как можно НЕ использовать сцены в MJDM. Часть 1.

Показываю свою реализацию веб - интерфейса MJDM

Привет всем! Мой первый блог в коннекте, не судите строго :)

Предыстория.

Пару месяцев назад я начал делать ремонт и твердо решил, что хочу себе умный дом (Саша, 27 годиков :)). Естественно, родня сказала, что я немного не в себе, но моя "хотелка" перевесила и я заказал первую партию оборудования Xiaomi и ее суббрендов. Почему Xiaomi, а не модные "сонофы, атмеги и т.д."? - Мне показалось, что они проще. У меня нет времени сидеть и ковырять железки, в них разбираться. Заказал я датчики температуры, протечки, дыма; выключатели беспроводные; шлюз; диодные ленты Yeelight и еще всякой мелочевки.

Как я себе это видел.

Я хотел планшет на (в) стене с управлением, блекджеком и ..... Было только одно "но" - кривые сцены в MJDM. Я считаю себя неплохим web-дизайнером, немного php разработчиком и ну по мелочи - JS, JQ и т.д. Что же я, не смогу написать свой интерфейс? - Все решено. Пишу свое. На просторах интернета был найден подходяий шаблон админки (Нету времени рисовать и верстать свой), а по совпадению в нем еще была и страничка с умным домом! Перековырял, подправил CSS расставил Bootstrap блоки и готово!
Сказано - сделано! Вот так выглядит сейчас главная страница. Закончена % на 60. Осталось причесать и мобильную версию допилить...

Как видно при просмотре с телефона показываю блок с камерами (Пока 1, ибо ремонт). Т.к. смысла нет на планшет выводить картинку с камер.

Реализация. Погода и общение с MDJM

P.S. Многие вещи писал ночью или в не совсем социально правильном состоянии :) Поэтому за куски страшного кода не пинайте. Работает - значит не трогай :)

Для получения сведений от датчиков, я использовал JQ AJAX + сценарии в MDJM. Т.е. создал сценарий getWether и прописал там:

$array = [
    'BedroomTemperature_temperature' => round(gg('BedroomTemperature.temperature')),
    'BedroomTemperature_humidity' => round(gg('BedroomTemperature.humidity')),
    'BedroomTemperature_battery_level' => round(gg('BedroomTemperature.battery_level')),
];

echo json_encode($array);

Как видим - все просто. Просто массив и вывод JSON в браузер. Никакого модного REST API. Только хардкор.
На стороне Web странички стандартная функция с таймером на отправку AJAX запроса:

//Функция получения данных от датчиков температуры
        function homeWeather() {
            $.ajax({
                url: '/objects/?script=getTemperature',
                success: function(responce) {
                    //Раскодируем JSON
                    responce = JSON.parse(responce);
                    //Распакуем данные и расставим по местам циклом
                    for (key in responce) {
                        $('#' + key).text(responce[key]);
                    }
                    //Заодно обновим данные по уличным датчикам. Спасибо Яндекс!
                    $.ajax({
                        url: 'json/weather.php',
                        success: function(yandexWeather) {
                            yandexWeather = JSON.parse(yandexWeather);
                            $('#nowTemp').html(yandexWeather.nowTemp + '<i class="meteocons-Celsius" style="color: #5d5386;"></i>');
                            $('#nowWeatherIcon').html('<img src="'+ yandexWeather.nowWeatherIcon +'" />');
                            //$('#nowWeatherText').html(yandexWeather.nowWeatherText);
                            $('#monIcon').html('<img src="'+ yandexWeather.monIcon +'" />');
                            $('#monTemp').html(yandexWeather.monTemp);
                            $('#dayIcon').html('<img src="'+ yandexWeather.dayIcon +'" />');
                            $('#dayTemp').html(yandexWeather.dayTemp);
                            $('#eveningIcon').html('<img src="'+ yandexWeather.eveningIcon +'" />');
                            $('#eveningTemp').html(yandexWeather.eveningTemp);
                        },
                        error: function(responce) {
                            showNoty('error', 'Невозможно обновить данные о погоде на улице!');
                        }
                    });

                    console.log('✓ Запрос на получение данных от погодных датчиков выполнен успешно!' + ' - ' + Date());
                },
                error: function(responce) {
                    showNoty('error', 'Невозможно обновить данные о погоде дома!');
                }
            });
        }

Есстесно, можно было проще и код сократить, однако большую часть кода я писал, когда у меня вообще небыло оборудования и писал я в слепую. Гуру JS просьба не пинать :)
Собственно большинство данных получаю именно таким образом, что позволяет не обновлять открытую на планшете страничку.

Реализация. Программы.

Прикупил я самый дешевый 10' Android планшет, чтобы на нем гонять интерфейс. Но тут возникло несколько проблем:
1) Хочу чтобы во весь экран
2) Хочу видеть статус батареи
3) Хочу управлять яркостью дисплея, чтобы не получить "удар по лицу" в 3 часа ночи идя в туалет
4) Хочу использовать штатный Android TTS
5) Хочу используя симку в отсутсвии инета и электричества слать уведомления

Прогуглив ровно до 7 страницы Google я нашел только 1 известную мне программу - Tasker. Но он мне не подходит ибо:
1) Он шлет состояние сам, а я хочу именно запрашивать состояние
2) Черт ногу сломит в настройках.

И тут, спустя несколько часов поисков я нашел вот это - ioBroker.paw II программа написанная по сути для другой системы умного дома, но основана на известном в узком кругу старичке pawServer и умеет рулить планшетом http запросами вида:

<!-- Отправка текста на синтез речи.  -->
http://<IP>:<PORT>/api/set.json?tts=Привет

Шикарно! Именно с ее помощью я получаю информацию о сети, батареи, рулю яркостью, отправляю на синтез уведомления. Вот пример ответа:

{"general":{"brand":"DEXP","model":"VA210","time":1552287824000,"sdk":27,"version":"1.35","versionCode":35},"network":{"type":"Notfound"},"battery":{"voltage":3803,"level":47,"temperature":200,"status":"charging","type":"AC"},"display":{"brightness":100,"state":true,"mode":"manual","timeOff":1800},"memory":{"totalInternal":"5543","freeInternal":"3597","freeRAM":296,"totalRAM":904},"wifi":{"ssid":"\"SmoKE\"","strengthpercent":"96%","linkspeed":"65 Mbps","ip":"192.168.1.105","rssi":-24,"mac":"02:00:00:00:00:00"},"volume":{"ring":0,"ring-max":7,"music":15,"music-max":15,"alarm":7,"alarm-max":7,"notification":0,"notification-max":7,"system":0,"system-max":7,"voice":4,"voice-max":5},"info":{"ip":"192.168.1.105","device":"VA210","port":"8080","versionCode":35,"status":"ERROR"}}

Во второй части покажу реализацию управления освещением, а также интересные сценарии поведения умного дома, а также как сделать из дешевой веб-камеры - камеру наблюдения :)

Discuss (27) (27)

Smoke