Собираем данные погоды и делаем красивый Дашборд. 50/50

А сегодня мой пост будет о погоде, точнее сборе информации из разных источников и отображении на главной странице веб-интерфейса в системе умного дома MajorDoMo

Для сбора информации я использую модуль Погода от OpenWeatherMap.org

Для его работы нам нужно зарегистрироваться на OpenWeatherMap.org и получить API ключ для доступа к данным.

Настройка модуля очень проста:

Указываем страну и город
Указываем период прогноза в днях
Указываем период обновления
Вписываем API ключ полученный на сайте OpenWeatherMap.org

После того как погода будет обновлена, в Объектах появится раздел openweather с объектами-днями.

Свойства Объектов ow_day есть данные прогноза погоды и другие астрономические данные.

Вот перечень основных данных которые я буду использовать для отображения:

Время Восхода и Заката солнца, а также рассчитанная на их основе длинна дня.
Осадки (Дождь и Снег) в миллиметрах.
Облачность в процентном отношении.
Давление
Влажность воздуха
Скорость и направление ветра
Ну и конечно температура

Данные мы получили, их можно использовать в своих сценариях по вашему усмотрению. Например при утреннем приветствии голосовой ассистент скажет "Сегодня ожидается дождь, возьмите зонтик", все зависит от вашей фантазии и умении написать код.

Теперь нам нужно отобразить эти данные на Информационной панели (Dashboard), в этом нам поможет локальная версия сервиса Freeboard.io.
Этот сервис умеет собирать данные с разных API-сервисов и отображать их в графиках, значениях, координатах, индикаторах, шкалах. К ней есть много дополнений и плагинов от других разработчиков.

Скриншот со страницы проекта

Локальная версия этого сервиса абсолютно бесплатна и может быть использована в своих проектах без ограничений, она встроена в сборку MajorDoMo

На основе этого дашборда мы и сделаем страничку с погодой и другими данными из базы данных нашего Умного дома. Я повторюсь, что для подключения к данным используется API, он встроен в MajorDoMo и в формате JSON доступен по адресу :

http://Адрес-Вашего-Умного-Дома/api.php/data/Имя-Объекта

Эти данные нужно заполнить в DATASOURCE (Источники данных)

Данные подключены, жмем добавить панель и в добавленной панели кнопкой + добавляем виджет:

Выбираем тип отображения
Заголовок виджета
Значение выбираем наш добавленный DATASOURCE и Свойство
Указываем единицы измерения
Указываем максимальное и минимальное значение

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

Выбираем тип отображения Pointer
В Direction указываем ссылку на наши данные до Wind_direction
В поле Value нужно вписать следующий код через кнопку JS EDITOR:

var dir = datasources.Openweather.data.wind_direction;
if(dir <= 22.5)
return "С";
else if(dir <= 67.5)
return "СВ";
else if(dir <= 112.5)
return "В";
else if(dir <= 157.5)
return "ЮВ";
else if(dir <= 202.5)
return "Ю";
else if(dir <= 247.5)
return "ЮЗ";
else if(dir <= 292.5)
return "З";
else if(dir <= 337.5)
return "СЗ";
else if(dir <= 360)
return "С";

Учтите, что источник данных у вас может называться по другому и имя в коде нужно поменять на ваше.

Собрав все свои данные с уличных датчиков и API OpenWeather я получил вот такую информационную панель.

Хочется отметить, что возможности ограничены только вашей фантазией. С помощью этой панели я, например, собираю курсы криптовалют с API CoinmarketCap, множу их на количество своих монеток и получаю данные по портфелю в BTC и $

На этом сегодня все, для вопросов я всегда открыт в комментариях.

МОИ ПРОШЛЫЕ ПОСТЫ об Умном Доме:

Выплата за этот пост распределяется по принципу 50/50

255