Различия

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

--- products:laboratory_iot:exp70 [2020/06/15 17:00] – [Эксперимент 70. Графический интерфейс метеостанции] labuser29
+++ products:laboratory_iot:exp70 [2024/12/17 18:15] (текущий) – [Программный код эксперимента] labuser30
@@ Строка 17: / Строка 17: @@
 {{ :products:esp-iot:exp39.1_mont.png?direct&600 |}}
-//Рисунок 1. Монтажная схема эксперимента//
+//Рисунок 1. Монтажная схема эксперимента с 8 выводами//
+{{ :products:esp-iot:exp39.1_mont_11pin.png?direct&600 |}}
+//Рисунок 2. Монтажная схема эксперимента с 11 выводами//
 ==== Программный код эксперимента ====
@@ Строка 40: / Строка 42: @@
 spi = SPI(1, baudrate=40000000, polarity=0, phase=0)
 tft = TFT_GREEN(128, 160, spi, dc, cs, rst, rotate=0)
-tft.initr()
+tft.initr(tft.BGR) # tft.initr(tft.RGB) #Если вместо синего цвета отображается красный, а вместо красного синий
@@ Строка 88: / Строка 90: @@
 tft.text(1,1,wCity, font.terminalfont, FontColor, 2)
-tft.draw_bmp(34,16,'/w/' + wPic + pod + '.bmp')
+tft.draw_bmp(34,16,'/weather/' + wPic + pod + '.bmp')
-tft.draw_bmp(5,70,'/w/' + wTempPic + '.bmp')
+tft.draw_bmp(5,70,'/weather/' + wTempPic + '.bmp')
 tft.text(30,75, str(wTemp), font.terminalfont, FontColor, 4)
@@ Строка 98: / Строка 100: @@
 </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>