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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1. Выбираем тип отображения Pointer
2. В Direction указываем ссылку на наши данные до Wind_direction
3. В поле 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 и $

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

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

1. Умный дом. Моя программная и аппаратная часть. 50\50
2. Умный дом. Универсальный пульт управления и выключатели 50/50
3. Умный дом. Умные розетки. 50\50
4. Умный дом. Сенсорные выключатели. 50\50
5. Кроха, которая может многое или ESP8266 50\50
6. Умный дом. Сервис Народный мониторинг. 50\50
7. Умный дом. Инфракрасный датчик движения. 50\50
8. Метеостанция за 10$ своими руками. Часть 1
9. Метеостанция за 10$ своими руками. Часть 2
10. Метеостанция за 10$ своими руками. Часть 3
11. Управляем Умным домом через Telegram 50/50

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