Различия

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

Ссылка на это сравнение

Следующая версия		Предыдущая версия
products:laboratory_iot:exp49 [2020/06/01 17:41] – создано labuser29products:laboratory_iot:exp49 [2024/12/13 13:34] (текущий) – labuser30
Строка 1: Строка 1:
 ===== Эксперимент 49. Графический интерфейс секундомера ===== ===== Эксперимент 49. Графический интерфейс секундомера =====
 +
 +Попробуем создать первое полезное устройство с использованием TFT дисплея. Пусть это будет простой секундомер. На дисплее будут отображаться часы, минуты и секунды, которые будет отсчитывать секундомер. Также снабдим его кнопкой по нажатию на которую, секундомер будет запускаться и останавливаться. Для красоты дополнительно выведем на дисплей картинку.
 +
 +Картинка с изображением секундомера
 +<WRAP center round download 60%>
 +{{ :products:esp-iot:time.zip |}}
 +</WRAP>
 +Ее нужно загрузить во внутреннюю память микроконтроллера
 +
 +==== Схема эксперимента ====
 +
 +{{ :products:esp-iot:exp24.1_mont.png?direct&600 |}}
 +//Рисунок 1. Монтажная схема эксперимента для дисплея с 8 выводами//
 +
 +{{ :products:esp-iot:exp24.1_mont_11pin.png?direct&600 |}}
 +//Рисунок 2. Монтажная схема эксперимента для дисплея с 11 выводами//
 +==== Программный код эксперимента ====
 +
 +<file python Exp49.py[enable_line_numbers="2", start_line_numbers_at="1"]>
 +from machine import Pin, SPI
 +from tft import TFT_GREEN
 +import font
 +import time
 +_init()
 +machine.freq(160000000)
 +
 +
 +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) #Если вместо синего цвета отображается красный, а вместо красного синий
 +tft.clear(tft.rgbcolor(255,251,240)) 
 +tft.draw_bmp(0,0,'time.bmp')
 +
 +fontcolor = tft.rgbcolor(39,40,51)
 +
 +tft.text(5, 125, '00', font.terminalfont, fontcolor, 3)
 +tft.text(41, 125, ":", font.terminalfont, fontcolor, 3)
 +tft.text(55, 125, '00', font.terminalfont, fontcolor, 3)
 +tft.text(90, 130, ":", font.terminalfont, fontcolor, 2)
 +tft.text(98, 132, '00', font.terminalfont, fontcolor, 2)
 +</file>
 +
 +Этот код выводит интерфейс секундомера. 
 +
 +Этой строкой мы переключаем частоту микроконтроллера на максимальные для него  160 мегагерц. Это нужно для увеличения скорости его работы, что ускоряет работу с дисплеем.
 +<code python[enable_line_numbers="2", start_line_numbers_at="6"]>
 +machine.freq(160000000)
 +</code>
 +
 +Настройка выводов микроконтроллера, к которым подключается дисплей
 +<code python[enable_line_numbers="2", start_line_numbers_at="9"]>
 +dc  = Pin(4, Pin.OUT) 
 +cs  = Pin(2, Pin.OUT)
 +rst = Pin(5, Pin.OUT)
 +</code>
 +
 +Настраиваем аппаратный контроллер шины SPI и создаем объект дисплея
 +<code python[enable_line_numbers="2", start_line_numbers_at="13"]>
 +spi = SPI(1, baudrate=40000000, polarity=0, phase=0)
 +tft = TFT_GREEN(128, 160, spi, dc, cs, rst, rotate=0)
 +</code>
 +
 +Инициализируем дисплей, заливаем его фоновым цветом и отображаем картинку с секундомером. Меняем настройку цвета в ''initr'' при необходимости.
 +<code python[enable_line_numbers="2", start_line_numbers_at="16"]>
 +tft.initr(tft.BGR) # tft.initr(tft.RGB) #Если вместо синего цвета отображается красный, а вместо красного синий
 +tft.clear(tft.rgbcolor(255,251,240)) 
 +tft.draw_bmp(0,0,'time.bmp')
 +</code>
 +
 +Объявляем переменную с цветом шрифта
 +<code python[enable_line_numbers="2", start_line_numbers_at="20"]>
 +fontcolor = tft.rgbcolor(39,40,51)
 +</code>
 +
 +Отображаем часы шрифтом 3 с началом в координате 5, 125
 +<code python[enable_line_numbers="2", start_line_numbers_at="22"]>
 +tft.text(5, 125, '00', font.terminalfont, fontcolor, 3)
 +</code>
 +
 +Отображаем двоеточие — разделитель
 +<code python[enable_line_numbers="2", start_line_numbers_at="23"]>
 +tft.text(41, 125, ":", font.terminalfont, fontcolor, 3)
 +</code>
 +
 +Подобным образом отображаем остальные данные: минуты и секунды
 +<code python[enable_line_numbers="2", start_line_numbers_at="24"]>
 +tft.text(55, 125, '00', font.terminalfont, fontcolor, 3)
 +tft.text(90, 130, ":", font.terminalfont, fontcolor, 2)
 +tft.text(98, 132, '00', font.terminalfont, fontcolor, 2)
 +</code>
 +
 +Координаты для вывода данных подбирались экспериментально, для получения приемлемого дизайна.
 +Мы намерено разбили данные на части: часы, минуты, секунды и разделители. Ведь в будущем нам нужно будет изменять эти данные независимо друг от друга, именно поэтому мы и разделили их.
 +
 +Мы получили интерфейс нашего устройства — секундомера. В следующем эксперименте займемся реализацией логики его работы.