Smoke
Как можно НЕ использовать сцены в 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"}}Во второй части покажу реализацию управления освещением, а также интересные сценарии поведения умного дома, а также как сделать из дешевой веб-камеры - камеру наблюдения :)
Нижний Новгород, Россия
На форуме: SmoKE_xDDD