===== Эксперимент 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 arduino Exp49.ino[enable_line_numbers="2", start_line_numbers_at="1"]>
#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() {
}
</file>

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

Задаем псевдонимы выводов микроконтроллера, к которым подключается дисплей
<code arduino[enable_line_numbers="2", start_line_numbers_at="5"]>
#define PIN_CS  2
#define PIN_DC  4
#define PIN_RST 5
</code>

Cоздаем объекты дисплея дисплея и считывателя изображений
<code arduino[enable_line_numbers="2", start_line_numbers_at="13"]>
Adafruit_ST7735 tft = Adafruit_ST7735(PIN_CS,  PIN_DC, PIN_RST);
LittleFS_ImageReader reader;
</code>

Этой строкой мы переключаем частоту микроконтроллера на максимальные для него  160 мегагерц. Это нужно для увеличения скорости его работы, что ускоряет работу с дисплеем.
<code arduino[enable_line_numbers="2", start_line_numbers_at="13"]>
  os_update_cpu_frequency(160);
</code>

Инициализируем файловую систему и дисплей, устанавливаем поворот изображения на 180°. 
заливаем его фоновым цветом и отображаем картинку с секундомером. 
<code arduino[enable_line_numbers="2", start_line_numbers_at="14"]>
  LittleFS.begin();
  tft.initR(INITR_BLACKTAB);
  tft.setRotation(2); 
</code>

Закрашиваем дисплей RBG цветом, получая нужное значение с помощью метода ''color565'', выводим картинку секундомера. 
<code arduino[enable_line_numbers="2", start_line_numbers_at="18"]>
  tft.fillScreen(tft.color565(255, 251, 240));
  tft.draw_bmp(0,0,'time.bmp')
</code>

Задаем цвет шрифта и его размер
<code arduino[enable_line_numbers="2", start_line_numbers_at="21"]>
 tft.setTextColor(tft.color565(39, 40, 51));
 tft.setTextSize(3);
</code>

Отображаем часы, разделитель — двоеточие, и минуты.
<code arduino[enable_line_numbers="2", start_line_numbers_at="23"]>
  tft.setCursor(8, 125);
  tft.print("00");
  tft.setCursor(41, 125);
  tft.print(":");
  tft.setCursor(55, 125);
  tft.print("00");
</code>

Уменьшаем размер шрифта, отображаем разделитель и секунды
<code arduino[enable_line_numbers="2", start_line_numbers_at="29"]>
  tft.setTextSize(2);
  tft.setCursor(88, 132);
  tft.print(":");
  tft.setCursor(98, 132);
  tft.print("00");
}
</code>

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

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