PinLab Docs

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

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

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

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

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

Exp49.ino

#include <SPI.h>
#include <Adafruit_ST7735.h>
#include "LittleFS_ImageReader.h" 
 
#define PIN_CS  2
#define PIN_DC  4
#define PIN_RST 5
 
Adafruit_ST7735 tft = Adafruit_ST7735(PIN_CS,  PIN_DC, PIN_RST);
 
LittleFS_ImageReader reader;
 
void setup() {
  os_update_cpu_frequency(160);
  LittleFS.begin();
  tft.initR(INITR_BLACKTAB);
  tft.setRotation(2); 
 
  tft.fillScreen(tft.color565(255, 251, 240));
  reader.drawBMP("/time.bmp", tft, 0, 0);
 
  tft.setTextColor(tft.color565(39, 40, 51));
  tft.setTextSize(3);
  tft.setCursor(8, 125);
  tft.print("00");
  tft.setCursor(41, 125);
  tft.print(":");
  tft.setCursor(55, 125);
  tft.print("00");
  tft.setTextSize(2);
  tft.setCursor(88, 132);
  tft.print(":");
  tft.setCursor(98, 132);
  tft.print("00");
}
 
void loop() {
}

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

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

  os_update_cpu_frequency(160);

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

#define PIN_CS  2
#define PIN_DC  4
#define PIN_RST 5

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

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

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

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)

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

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)

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

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