SPI

SPI

Example: Driving an SPI Display

Connect a DFR0664 2.0-inch TFT LCD screen to the SPI interface of the Edge101 board.

First, we need to install the DFRobot_GDL library (see TFT LCD wiki), then open the example from DFRobot_GDL->example->Basic->UI_bar.

Hardware Preparation:

• ESP32 IoT Programmable Controller (SKU: DFR0886)×1
• 2.0-inch TFT LCD (SKU: DFR0664) ×1

Hardware Connections:

- Connect the LCD VCC to the +5V of the Edge101 board (Note: the LCD screen requires 5V power).  
- Connect the LCD GND to the GND of the Edge101 board.  
- Connect the LCD CK to the SPI interface's SCK (P14) on the Edge101 board.  
- Connect the LCD SI to the SPI interface's SDO (P12) on the Edge101 board.  
- Connect the LCD SO to the SPI interface's SDI (P39) on the Edge101 board.  
- Connect the LCD BL to the 3.3V of the Edge101 board.  
- Connect the LCD DC to P15 on the Edge101 board.  
- Connect the LCD CS to P5 on the Edge101 board.  
- Connect the LCD RT to P33 on the Edge101 board.

Sample Code:

This is an example displaying loading controls, showing three different types of loading controls.

/*!
 * @file UI_bar.ino
 * @brief Create a progress bar control on the screen.
 * @n Users can customize the parameters of the progress bar or use the default parameters.
 * @n Users can control the value of the progress bar through the callback function of the progress bar.
 * @n The example supports Arduino Uno, Leonardo, Mega2560, FireBeetle-ESP32, FireBeetle-ESP8266, FireBeetle-M0.
 * @copyright  Copyright (c) 2010 DFRobot Co.Ltd (http://www.dfrobot.com)
 * @licence     The MIT License (MIT)
 * @author [fengli]([email protected])
 * @version  V1.0
 * @date  2019-12-6
 * @get from https://www.dfrobot.com
 * @url https://github.com/DFRobot/DFRobot_GDL/src/DFRpbot_UI
*/

#include "DFRobot_UI.h"
#include "DFRobot_GDL.h"

/*M0*/
#if defined ARDUINO_SAM_ZERO
#define TFT_DC  7
#define TFT_CS  5
#define TFT_RST 6
/*ESP32 and ESP8266*/
// LCD VCC connected to Edge101WE board +5V (40PIN expansion interface PIN2)
// LCD GND connected to Edge101WE board GND
// LCD CK connected to Edge101WE board SPI interface SCK
// LCD SI connected to Edge101WE board SPI interface SDO
// LCD SO connected to Edge101WE board SPI interface SDI
// LCD BL connected to Edge101WE board 3.3V
// LCD DC connected to Edge101WE board GPIO 15
// LCD CS connected to Edge101WE board GPIO 5
// LCD RT connected to Edge101WE board GPIO 33
#define TFT_DC  15
#define TFT_CS  5
#define TFT_RST 33
/*AVR series mainboard*/
#else
#define TFT_DC  2
#define TFT_CS  3
#define TFT_RST 4
#endif

// Constructor for hardware SPI communication
DFRobot_ST7789_240x320_HW_SPI screen(TFT_DC, TFT_CS, TFT_RST);

// Initialize UI
DFRobot_UI ui(&screen, NULL);

uint8_t value1 = 0;
uint8_t value2 = 0;
uint8_t value3 = 0;

// Callback function for progress bar1
void barCallback1(DFRobot_UI::sBar_t &obj) {
    delay(50);
    obj.setValue(value1);
    if (value1 < 100) value1++;
}

// Callback function for progress bar2
void barCallback2(DFRobot_UI::sBar_t &obj) {
    delay(50);
    obj.setValue(value2);
    if (value2 < 100) value2++;
}

// Callback function for progress bar3
void barCallback3(DFRobot_UI::sBar_t &obj) {
    delay(50);
    obj.setValue(value3);
    if (value3 < 100) value3++;
}

void setup() {
  Serial.begin(9600);
  // Initialize UI
  ui.begin();
  ui.setTheme(DFRobot_UI::MODERN);

  // Display a string on the screen
  ui.drawString(33, screen.height() / 5 * 4, "Page of loading", COLOR_RGB565_WHITE, ui.bgColor, 2, 0);
  
  // Create a progress bar control
  DFRobot_UI::sBar_t &bar1 = ui.creatBar();
  bar1.setStyle(DFRobot_UI::COLUMN);
  bar1.fgColor = COLOR_RGB565_GREEN;
  bar1.setCallback(barCallback1);
  ui.draw(&bar1, 33, screen.height() / 5 * 3);

  DFRobot_UI::sBar_t &bar2 = ui.creatBar();
  bar2.setStyle(DFRobot_UI::CIRCULAR);
  bar2.setCallback(barCallback2);
  ui.draw(&bar2, 120, screen.height() / 5 * 2);

  DFRobot_UI::sBar_t &bar3 = ui.creatBar();
  bar3.fgColor = COLOR_RGB565_BLUE;
  bar3.setStyle(DFRobot_UI::BAR);
  bar3.setCallback(barCallback3);
  ui.draw(&bar3, (screen.width() - bar3.width) / 2, screen.height() / 10);
}

void loop() {
  // Refresh UI
  ui.refresh();
}

Result: The display result is shown below.