Различия

Показаны различия между двумя версиями страницы.

--- products:laboratory_iot:exp70 [2020/06/15 16:25] – создано labuser29
+++ products:laboratory_iot:exp70 [2024/12/17 18:15] (текущий) – [Программный код эксперимента] labuser30
@@ Строка 3: / Строка 3: @@
 В предыдущем эксперименте мы зарегистрировались в интернет-сервисе weatherbit.io, подключились к нему и получили данные о текущей погоде в Москве. Если заменить название города, то можно получить данные о погоде в другом городе.
-Но эти данные приходят в виде удобном для программы, но не для человека. Человеку хотелось бы видеть красивую иконку погоды, которая бы символизировала ситуацию на улице, например солнышко или облачко. Температуру нужно вывести крупным шрифтом, а влажность и скорость ветра — мелким. Многие другие данные вообще могут быть не интересны человеку. Иными словами нам нужно сделать графический пользовательский интерфейс (англ. graphical user interface, GUI)
+Но эти данные приходят в виде удобном для программы, но не для человека. Человеку хотелось бы видеть красивую иконку погоды на дисплее, которая бы символизировала ситуацию на улице, например солнышко или облачко. Температуру нужно вывести крупным шрифтом, а влажность и скорость ветра — мелким. Многие другие данные вообще могут быть не интересны человеку. Иными словами нам нужно сделать графический пользовательский интерфейс (англ. graphical user interface, GUI)
+Для отображения иконок погоды и пользовательского интерфейса их нужно загрузить во внутреннюю память микроконтроллера. Для этого нужно создать папку ''weather'' в корне файловой системы, в нее загрузим все файлы из архива.
+<WRAP center round download 60%>
+{{ :products:esp-iot:weather.zip |}}
+</WRAP>
+Отображать данные мы будем на TFT дисплее, поэтому подключим его согласно схеме.
+==== Схема эксперимента ====
+{{ :products:esp-iot:exp39.1_mont.png?direct&600 |}}
+//Рисунок 1. Монтажная схема эксперимента с 8 выводами//
+{{ :products:esp-iot:exp39.1_mont_11pin.png?direct&600 |}}
+//Рисунок 2. Монтажная схема эксперимента с 11 выводами//
+==== Программный код эксперимента ====
+<file python Exp70.py[enable_line_numbers="2", start_line_numbers_at="1"]>
+from machine import Pin, SPI
+from tft import TFT_GREEN
+import font
+import network
+import gc
+import time
+import socket
+_init()
+gc.collect()
+dc  = Pin(4, Pin.OUT)
+cs  = Pin(2, Pin.OUT)
+rst = Pin(5, Pin.OUT)
+spi = SPI(1, baudrate=40000000, polarity=0, phase=0)
+tft = TFT_GREEN(128, 160, spi, dc, cs, rst, rotate=0)
+tft.initr(tft.BGR) # tft.initr(tft.RGB) #Если вместо синего цвета отображается красный, а вместо красного синий
+data = {'count': 1, 'data': [{'wind_cdir_full': 'southeast', 'weather': {'code': '804', 'icon': 'r01d', 'description': 'Light rain'}, 'datetime': '2020-06-15:11', 'temp': 24.4, 'station': 'E8051', 'elev_angle': 53.53, 'app_temp': 23.8, 'state_code': '48', 'wind_dir': 137, 'last_ob_time': '2020-06-15T10:46:00', 'solar_rad': 163.2, 'sunrise': '00:43', 'slp': 1007, 'pod': 'd', 'vis': 1.5, 'pres': 992.8, 'wind_cdir': 'SE', 'wind_spd': 1.34, 'ghi': 815.91, 'ts': 1592217960, 'snow': 0, 'uv': 8.64467, 'clouds': 100, 'city_name': 'Moscow', 'precip': 2.84211, 'timezone': 'Europe/Moscow', 'country_code': 'RU', 'dni': 882.12, 'dhi': 113.84, 'sunset': '18:15', 'ob_time': '2020-06-15 10:46', 'h_angle': 20, 'dewpt': 6.2, 'aqi': 48, 'lat': 55.7522, 'rh': 31, 'lon': 37.6156}]}
+wCity = data['data'][0]['city_name']
+wTemp = round(data['data'][0]['temp'])
+wTempFeels = data['data'][0]['app_temp']
+wHumidity = data['data'][0]['rh']
+wWind = data['data'][0]['wind_spd']
+pod = data['data'][0]['pod']
+wCode = int(data['data'][0]['weather']['code'])
+if wCode <= 233:
+    wPic = '11'
+elif (wCode >= 300 and wCode <= 520) or wCode == 522:
+    wPic = '09'
+elif wCode in  (521, 600):
+    wPic = '10'
+elif wCode >= 601 and wCode <= 622:
+    wPic = '13'
+elif wCode >= 623 and wCode <= 751:
+    wPic = '50'
+elif wCode == 800:
+    wPic = '01'
+elif wCode in (801, 802):
+    wPic = '02'
+elif wCode == 803:
+    wPic = '03'
+elif wCode == 804:
+    wPic = '04'
+if (wTemp > 0):
+    wTempPic = 'tp'
+else:
+    wTempPic = 'tn'
+FontColor = tft.rgbcolor(33,149, 82)
+FontColor2 = tft.rgbcolor(8,85, 41)
+tft.clear(tft.rgbcolor(255,255, 255))
+tft.text(1,1,wCity, font.terminalfont, FontColor, 2)
+tft.draw_bmp(34,16,'/weather/' + wPic + pod + '.bmp')
+tft.draw_bmp(5,70,'/weather/' + wTempPic + '.bmp')
+tft.text(30,75, str(wTemp), font.terminalfont, FontColor, 4)
+tft.text(5,120,"Feels: " + str(wTempFeels), font.terminalfont, FontColor2, 1)
+tft.text(5,128,"Humidity: " + str(wHumidity) + "%", font.terminalfont, FontColor2, 1)
+tft.text(5,136,"Wind: " + str(wWind) + "m/s", font.terminalfont, FontColor2, 1)
+</file>
+В этой программе мы сосредоточились на создании GUI — графического интерфейса пользователя, поэтому пока убрали из программы обращение к интернет-сервису. Вместо этого мы задали в коде типовой ответ от сервера. Эту "заглушку" и будем использовать как временный источник данных.
+Первым делом извлекаем из структуры нужные нам данные. А именно: название города, текущую температуру, влажность, скорость ветра, время суток, код погоды. Разберем по порядку:
+Название города записываем в переменную wCity
+<code python[enable_line_numbers="2", start_line_numbers_at="24"]>
+wCity = data['data'][0]['city_name']
+</code>
+Текущую температуру записываем в переменную wTemp
+<code python[enable_line_numbers="2", start_line_numbers_at="25"]>
+wTemp = round(data['data'][0]['temp'])
+</code>
+Ощущение температуры записываем в переменную wTempFeels. (например из-за ветра или влажности температура может ощущаться человеком как более низкая, чем есть на самом деле)
+<code python[enable_line_numbers="2", start_line_numbers_at="26"]>
+wTempFeels = data['data'][0]['app_temp']
+</code>
+Влажность в % записываем в переменную wHumidity
+<code python[enable_line_numbers="2", start_line_numbers_at="27"]>
+wHumidity = data['data'][0]['rh']
+</code>
+Скорость ветра в метрах в секунду записываем в переменную wWind
+<code python[enable_line_numbers="2", start_line_numbers_at="28"]>
+wWind = data['data'][0]['wind_spd']
+</code>
+Текущее время суток записываем в переменную pod. Если сейчас день, то в ней будет значение d, а если ночь — n. Эти данные нам понадобятся для выбора правильной иконки погоды. Например, днем мы будем отображать солнышко, а ночью луну.
+<code python[enable_line_numbers="2", start_line_numbers_at="30"]>
+pod = data['data'][0]['pod']
+</code>
+Сервис weatherbit.io среди прочих данных о погоде сообщает код текущей погоды. Это коды, которые используются именно этим сервисом. По ним можно понять какую иконку погоды нужно отобразить. [[https://www.weatherbit.io/api/codes|Подробнее о кодах и иконках.]] Код нам будет нужен в виде числа, поэтому сразу преобразуем его в целое число с помощью ''int()''
+<code python[enable_line_numbers="2", start_line_numbers_at="32"]>
+wCode = int(data['data'][0]['weather']['code'])
+</code>
+Сервис поддерживает очень большое количество иконок у нас столько нет. У нас всего 18 погодных иконок — 9 дневных и 9 ночных. Поэтому нам нужно настроить соответствие кодов из сервиса нашим иконкам. Например несколько видов дождя, которые обозначаются разными кодами, мы будем отображать одной и той же иконкой. Этот код преобразует коды в 9 иконок:
+<code python[enable_line_numbers="2", start_line_numbers_at="34"]>
+if wCode <= 233:
+    wPic = '11'
+elif (wCode >= 300 and wCode <= 520) or wCode == 522:
+    wPic = '09'
+elif wCode in  (521, 600):
+    wPic = '10'
+elif wCode >= 601 and wCode <= 622:
+    wPic = '13'
+elif wCode >= 623 and wCode <= 751:
+    wPic = '50'
+elif wCode == 800:
+    wPic = '01'
+elif wCode in (801, 802):
+    wPic = '02'
+elif wCode == 803:
+    wPic = '03'
+elif wCode == 804:
+    wPic = '04'
+</code>
+Для отображения иконки термометра на дисплее нужно определить положительная сейчас температура или отрицательная. Если температура ниже нуля, то будем отображать "холодный" градусник с синим содержимым, иначе будем отображать "теплый" градусник. Этот код определяет какую иконку градусника нужно будет отобразить:
+<code python[enable_line_numbers="2", start_line_numbers_at="53"]>
+if (wTemp > 0):
+    wTempPic = 'tp'
+else:
+    wTempPic = 'tn'
+</code>
+Определяем цвета для шрифтов. Один из них будет использоваться для отображения названия города и температуры, второй для остальной информации.
+<code python[enable_line_numbers="2", start_line_numbers_at="58"]>
+FontColor = tft.rgbcolor(33,149, 82)
+FontColor2 = tft.rgbcolor(8,85, 41)
+</code>
+Закрашиваем весь дисплей белым
+<code python[enable_line_numbers="2", start_line_numbers_at="62"]>
+tft.clear(tft.rgbcolor(255,255, 255))
+</code>
+Выводим на дисплей название города
+<code python[enable_line_numbers="2", start_line_numbers_at="65"]>
+tft.text(1,1,wCity, font.terminalfont, FontColor, 2)
+</code>
+Рисуем иконки: иконку погоды и градусник
+<code python[enable_line_numbers="2", start_line_numbers_at="67"]>
+tft.draw_bmp(34,16,'/w/' + wPic + pod + '.bmp')
+tft.draw_bmp(5,70,'/w/' + wTempPic + '.bmp')
+</code>
+Выводим текущую температуру
+<code python[enable_line_numbers="2", start_line_numbers_at="70"]>
+tft.text(30,75, str(wTemp), font.terminalfont, FontColor, 4)
+</code>
+Выводим дополнительные данные: температура по ощущениям, влажность и скорость ветра
+<code python[enable_line_numbers="2", start_line_numbers_at="72"]>
+tft.text(5,120,"Feels: " + str(wTempFeels), font.terminalfont, FontColor2, 1)
+tft.text(5,128,"Humidity: " + str(wHumidity) + "%", font.terminalfont, FontColor2, 1)
+tft.text(5,136,"Wind: " + str(wWind) + "m/s", font.terminalfont, FontColor2, 1)
+</code>