Эксперимент 49. Графический интерфейс секундомера

Попробуем создать первое полезное устройство с использованием TFT дисплея. Пусть это будет простой секундомер. На дисплее будут отображаться часы, минуты и секунды, которые будет отсчитывать секундомер. Также снабдим его кнопкой по нажатию на которую, секундомер будет запускаться и останавливаться. Для красоты дополнительно выведем на дисплей картинку.

Картинка с изображением секундомера

Ее нужно загрузить во внутреннюю память микроконтроллера

Схема эксперимента

Рисунок 1. Монтажная схема эксперимента для дисплея с 8 выводами

Рисунок 2. Монтажная схема эксперимента для дисплея с 11 выводами

Программный код эксперимента

Exp49.py
  1. from machine import Pin, SPI
  2. from tft import TFT_GREEN
  3. import font
  4. import time
  5. _init()
  6. machine.freq(160000000)
  7.  
  8.  
  9. dc = Pin(4, Pin.OUT)
  10. cs = Pin(2, Pin.OUT)
  11. rst = Pin(5, Pin.OUT)
  12.  
  13. spi = SPI(1, baudrate=40000000, polarity=0, phase=0)
  14. tft = TFT_GREEN(128, 160, spi, dc, cs, rst, rotate=0)
  15.  
  16. tft.initr(tft.BGR) # tft.initr(tft.RGB) #Если вместо синего цвета отображается красный, а вместо красного синий
  17. tft.clear(tft.rgbcolor(255,251,240))
  18. tft.draw_bmp(0,0,'time.bmp')
  19.  
  20. fontcolor = tft.rgbcolor(39,40,51)
  21.  
  22. tft.text(5, 125, '00', font.terminalfont, fontcolor, 3)
  23. tft.text(41, 125, ":", font.terminalfont, fontcolor, 3)
  24. tft.text(55, 125, '00', font.terminalfont, fontcolor, 3)
  25. tft.text(90, 130, ":", font.terminalfont, fontcolor, 2)
  26. tft.text(98, 132, '00', font.terminalfont, fontcolor, 2)

Этот код выводит интерфейс секундомера.

Этой строкой мы переключаем частоту микроконтроллера на максимальные для него 160 мегагерц. Это нужно для увеличения скорости его работы, что ускоряет работу с дисплеем.

  1. machine.freq(160000000)

Настройка выводов микроконтроллера, к которым подключается дисплей

  1. dc = Pin(4, Pin.OUT)
  2. cs = Pin(2, Pin.OUT)
  3. rst = Pin(5, Pin.OUT)

Настраиваем аппаратный контроллер шины SPI и создаем объект дисплея

  1. spi = SPI(1, baudrate=40000000, polarity=0, phase=0)
  2. tft = TFT_GREEN(128, 160, spi, dc, cs, rst, rotate=0)

Инициализируем дисплей, заливаем его фоновым цветом и отображаем картинку с секундомером. Меняем настройку цвета в initr при необходимости.

  1. tft.initr(tft.BGR) # tft.initr(tft.RGB) #Если вместо синего цвета отображается красный, а вместо красного синий
  2. tft.clear(tft.rgbcolor(255,251,240))
  3. tft.draw_bmp(0,0,'time.bmp')

Объявляем переменную с цветом шрифта

  1. fontcolor = tft.rgbcolor(39,40,51)

Отображаем часы шрифтом 3 с началом в координате 5, 125

  1. tft.text(5, 125, '00', font.terminalfont, fontcolor, 3)

Отображаем двоеточие — разделитель

  1. tft.text(41, 125, ":", font.terminalfont, fontcolor, 3)

Подобным образом отображаем остальные данные: минуты и секунды

  1. tft.text(55, 125, '00', font.terminalfont, fontcolor, 3)
  2. tft.text(90, 130, ":", font.terminalfont, fontcolor, 2)
  3. tft.text(98, 132, '00', font.terminalfont, fontcolor, 2)

Координаты для вывода данных подбирались экспериментально, для получения приемлемого дизайна. Мы намерено разбили данные на части: часы, минуты, секунды и разделители. Ведь в будущем нам нужно будет изменять эти данные независимо друг от друга, именно поэтому мы и разделили их.

Мы получили интерфейс нашего устройства — секундомера. В следующем эксперименте займемся реализацией логики его работы.