Вывод информации о погоде в Умном доме.

Сегодня рассмотрим пример «Как вывести погоду в своём городе».

Я покажу, как не делая всяких там метеостанций, даже не имея ни одного датчика, вывести на экран телефона, а в конце урока покажу как вывести в HABPanel, наиболее полную информацию о погоде.
Сейчас вы видите как выглядят данные о погоде на телефоне. И это далеко не полная информация. Я вывел только основные данные.  На вывод этих параметров вы потратите не более 10-15 минут. Если заинтересовались, то смотрим это видео до конца. В конце как всегда всё самое интересное. И не забываем подписываться, так вы не пропустите новые видео. 

Для получения информации о погоде нам надо зарегистрироваться на одном из бесплатных погодных серверов и получить API. 
Вот список провайдеров из документации OPENHAB. Их адреса надеюсь вы найдёте сами вбив имя в поиск. Я в своём примере использовал провайдера OpenWeatherMap. Вы же можете выбрать другого. Вам только потом в коде надо будет указать его имя. А можно вообще использовать несколько провайдеров.

Можно получить несколько API. Я например сделал вывод для дома и для дачи, хотя разница там не существенная, но всё же.
Для получения API вам понадобится зарегистрироваться на сайте. С этим вообще ни каких сложностей. 
Заходим на страничку выбранного вами провайдера. Придумываем себе логин, указываем свою почту, и пароль. Пароль должен быть сложный. Я сначала ввёл простой пароль, но меня не зарегистрировали. Указываем, что вы не робот. Выпадает окошко, для каких целей вам это нужно. Это ни на что не влияет, поэтому можно выбрать любой пункт. Компанию можно не указывать.
Теперь ждём письма подтверждения, и подтверждаем свою почту.
Заходим под логином на сайт.
Выбираем пункт меню API, и видим разные варианты которые предоставляет провайдер. Я выбрал самый простой. С прогнозом погоды на 16 дней. Конечно, мне это не понадобится, но можно вывести в Умном доме прогноз погода на завтра и послезавтра. Например захотел поехать на дачу в пятницу. Зашёл и смотришь какая погода будет на выходных.
Здесь вы можете почитать какие возможности даёт этот ключ и как можно его использовать. Если вы захотите сами парсить JSON или XML.

Но за нас это сделает OPENHAB. По этому просто жмём получить API.  На этой странице для вас будет создан ключ. Так же вы можете создать здесь ещё несколько ключей. Для этого надо придумать имя и нажать сгенерировать.
Теперь давайте посмотрим, что ещё есть на сайте. Нажимаем MAPS. В поисковой строке набираем свой город.
Здесь может быть несколько вариантов. Смотрим какой ваш и копируем его геокоординаты. Они нам понадобятся с коде.
А ещё можно на карте посмотреть есть ли ваш город и как он пишется по английски. Или просто посмотреть погоду в этом городе.
Ну всю основную работу мы сделали. Получили ключ и координаты своего города. Теперь приступим к настройке OPENHAB.

Для начала нам надо установить погодный BINDING. 
Заходим на страницу с BINDING ами и чтобы долго не прокручивать начинаем набирать weather.
Выбираем WEATHER BINDING и жмём инсталл. Ждём минутку. За всё время у меня не разу страничка не показала что всё прошло хорошо и BINDING установлен. Поэтому просто ждём и переходим на другую вкладку. Всё уже установлено, просто OPENHAB нам об этом не хочет говорить.

Теперь идём в директорию куда у вас установлен OPENHAB.
Обычно - это OpenHAB2
Заходим в OpenHAB2/conf/services и открываем файл weather.cfg
Здесь указаны настройки для провайдера.

• Нам надо выбрать провайдера и вставить свой ключ
• Затем выбрать имя. Я указал что это мой дом.
• А во втором блок можно указать ещё другое место. Например дача.
• Указать имя. Я указал свой город.
• Широту и долготу города.
• Название провайдера.
• Язык. Он будет выводить названия на русском языки. Например снег, небольшой снег. И другие.
• Правда зюйт-зюйт-вест он не переводит. Но это и так все знают.
• Время обновлений. Так как мы пользуемся бесплатной версией, то не стоит особо нагружать провайдера. Я указал обновлять раз в 10 минут.
• И в каких единицах выводить. Цельсий или Фаренгейт.

единицы измерения - метрические (SI) или имперские (US)
Самое простое – заменить данные скопировав из одноимённого файла из архива.
Вам только надо заменить ключ, имя города и широту и долготу.

Теперь надо создать файл ITEMS.
Я его уже создал, поэтому можно скопировать его в папку ITEMS.
Здесь мы создаём ITEMS. Для вывода числовых значений со знаками после запятой и градусов Цельсия или Процентов.
В простом варианте я вывожу только погоду и влажность. 
Кстати здесь можно указать прогноз погоды на будущее. Это можно сделать, добавив в код 

• Сегодня     forecast=0, 
• Завтра       forecast=1, 
• Послезавтра    forecast=2, 

Number   Temperature      "Температура [%.2f °C]"   {weather="locationId=home, forecast=1, type=temperature, property=current"}
Number   Temperature      "Температура [%.2f °C]"   {weather="locationId=home, forecast=2, type=temperature, property=current"}

Я правда сам не проверял, но думаю, что проблем не будет.

Теперь открываем SITEMAP. Здесь выводится только 2 параметра. Температура и влажность. 
В дальнейшем мы сделаем вывод всех возможных параметров.
У каждого провайдера они могут быть разные. 
В смысле что температура и влажность может немного отличаться. Какие-то параметры будут выводиться , а другие нет. Так что экспериментируйте.
А вот так выглядит этот простой пример. Теперь локализируем его. Переведём на русский.

А теперь давайте добавим ещё данных.
Для этого из 2 архива скопируйте файлы ITEMS и SITEMAP
Я перевёл эти файлы на русский, но так как не являюсь носителем буржуйского языка, то особо не ругайтесь.
Вот так выглядит файл ITEMS. Надеюсь, что всё понятно.
А так выглядит SITEMAP. Здесь тоже ничего сложного.
Ну и посмотрим результат. 
Разберём построчно. 
Сначала выводится время последнего обновления данных.
Затем название города и его координаты.
Дальше температура, Минимальная и максимальная температура, и как она ощущается.
Потом влажность и облачность.
Количество выпавших осадков.
Дождь и снег. 
Единицами измерения по умолчанию являются:

• скорость: километры в час
• температура: Цельсий
• осадки: дождь в миллиметрах и снег в сантиметрах
•  давление: миллибары

Скорость и направления ветра. Направление указывается в зюйтах и вестах. Так, что это надо выучить.
Дальше давление.
И последняя строка – это состояние. Здесь указывается что сейчас на улице. Снег, небольшой снег или дождь. И другие параметры.
А теперь выведем это всё красиво в HABPanel.
Для этого надо скачать и установить дополнительные файлы.

По ссылке нужно будет скачать архив с файлами под названием weather-data. Устанавливать будем под виндовс, под другие системы чуть по другому. Так как есть отличие в путях и папках. Скачиваем и разархивируем файлы.

Переходим в OPENHAB2 и в папку USERDATA 
Создаём папку webapps.
В ней создаём папку  weather-data
Заходим в неё и создаём папку layouts
Переходим в архив и копируем оттуда файл example.html в созданную папку.

Для RASPbery
Переходим в VAR – LIB – OPENHAB2 
Создаём папку webapps.
В ней создаём папку  weather-data
Заходим в неё и создаём папку layouts
Переходим в архив и копируем оттуда файл example.html в созданную папку.

Переходим в папку HTML и копируем туда все папки и файлы из архива.
Открываем редактор и переходим в папку html
example.html
Этот файл отвечает за вывод html страницы в HABPanel
Файл example.css – это ccs таблица отвечающая за ---- Здесь можно настроить всю красоту виджета. Шрифты, отступы, бордюры, цвета итд.
example.js это iframe. В нём можно изменить размер виджета.

Рассмотрим эти файлы.

А начнём с CSS.
CSS — Cascading Style Sheets — это каскадные таблицы стилей и он отвечает за описание внешнего вида HTML-документа. Здесь можно задать размер и цвет шрифта. Установку отступов и толщину бордюров. И многое другое. В конце видео я покажу как им пользоваться. 

Следующий файл – это javascript.
Здесь просто создаётся iframe без бордюра и полосы прокрутки. Высотой 280 пикселов. 
Ну и основной файл который и будет выводиться в HABPanel Это простой html документ. Сюда я поместил значения переменных таких же как и в sitemaps. 

Теперь давайте выведем нашу погоду в панель.

• Для этого создаём новую панель. Обзываем её Погода.
• Добавляем виджет – Рамка
• Открываем его для редактирования.
• Даём ему имя Погода.
• Интервал обновления делаем 60 секунд.
• Теперь нам надо прописать URL.

http://192.168.1.147:8080/weather?locationId=home&layout=example&iconset=colorful 

Он состоит из IP адреса сервера и порта. Далее идёт значение weather? Затем значение location id, мы его установили в значение home, дальше layout который равен имени html документа который мы положили в эту папку. И УКАЗЫВАЕМ ПАПКУ В КОТОРОЙ БУДУТ ХРАНИТЬСЯ КАРТИНКИ. Потом объясню,  покажу как их менять.

Вставляем эту ссылку и ставим обновление страницы каждые 60 секунд. 
И ставить галочку НЕ КЭШИРОВАТЬ.

Смотрим что у нас получилось. Всё выводится, но на тёмном фоне очень плохо видно. Давайте это исправим.

Заходим в редактирование и в дополнительно. И выберем фон какой-нибудь по светлее. Стало получше. Но фон сполз вниз. Это потому, что надо убрать заголовок.

Убираем вывод заголовка и выбираем заполнить по рамке.
Вот теперь всё влезло. Давайте теперь что-нибудь изменим. Посмотрим как работает цэ эсэс.
Увеличим размер облака, тем самым сдвинем текст вправо. Теперь увеличим шрифт цифр температуры. Сделаем их побольше.
Прижмём текст к правой стороне, а то он как-то и не по центру и не справа. Кажется слишком много. Значок температуры и Цельсия убежал вправо. 
Вот теперь в самый раз. Давайте увеличим шрифт первых двух строчек. А для этого нам надо найти какие классы отвечают за вывод этих строк. Видим что это weather location name. Теперь найдём его в файле и увеличим шрифт. Слишком много. Всё съехало вниз. Сделаем поменьше. Всё равно много.
А вот это в самый раз. А теперь давайте сделаем текст красным цветом. Для этого надо написать color red.
Текст стал красным. Удаляем цвет. Сделаем как было раньше. 
Будем считать, что CSS мы изучили. Переходим дальше. Давайте научимся менять стили картинок. В архиве много различных вариантов цветов.
Они лежат в своих папках. Есть картинки для тёмной темы, есть для светлой. Для замены надо всего лишь изменить в URL последнюю переменную. Узнать какие есть папки можно 
Изменим на тёмную тему. И видим, что картинки стали темнее.
Теперь изменим на тему  light. Картинки стали светлее. Так вы можете выбирать какие лучше будут смотреться для вашей темы.

Ну вот и ещё одно видео про Умный дом закончилось. Конец видео правда получился немного смазанным. Если что не понятно, то спрашивайте. Тема оказалась не до конца раскрыта и я ещё обязательно вернусь к ней. А пока вы можете посмотреть видео которые будут сейчас показаны. Все они по теме Умный дом на OPENHAB. А пока прощаюсь с вами, и до новых встреч. Не забудьте поставить лайк если вам понравилось это видео. И подпишитесь, если ещё не подписаны.