75945浏览
查看: 75945|回复: 0

[项目] FireBeetle 2 ESP32-S3自制GDI转接板用DFRobot_GDL库驱动普通3.2寸彩...

[复制链接]
本帖最后由 Cf6IaBPUniNl 于 2023-9-7 15:01 编辑

FireBeetle 2 ESP32-S3自制GDI转接板用DFRobot_GDL库驱动普通3.2寸彩色TFT屏幕(下)

根据DFRobot_GDL库中的定义对应3.2寸彩色TFT的针脚定义,我们首先使用杜邦线进行连接以下引脚

FireBeetle 2 ESP32-S3自制GDI转接板用DFRobot_GDL库驱动普通3.2寸彩...图1

连接后打开Arduino软件,在软件中选择对应开发板

FireBeetle 2 ESP32-S3自制GDI转接板用DFRobot_GDL库驱动普通3.2寸彩...图2


上传以下程序

  1. /*!
  2. * @file basicTest.ino
  3. * @brief 演示各种图形绘画效果
  4. * @n 本示例支持的主板有Arduino Uno, Leonardo, Mega2560, FireBeetle-ESP32, FireBeetle-ESP8266, FireBeetle-M0
  5. * @copyright    Copyright (c) 2010 DFRobot Co.Ltd (http://www.dfrobot.com)
  6. * @licence     The MIT License (MIT)
  7. * @author [LuoYufeng](yufeng.luo@dfrobot.com)
  8. * @version  V0.1
  9. * @date  2020-01-07
  10. * @url https://github.com/DFRobot/DFRobot_GDL
  11. */
  12. #include "DFRobot_GDL.h"
  13. /*M0*/
  14. #if defined ARDUINO_SAM_ZERO
  15. #define TFT_DC  7
  16. #define TFT_CS  5
  17. #define TFT_RST 6
  18. /*ESP32 and ESP8266*/
  19. #elif defined(ESP32) || defined(ESP8266)
  20. #define TFT_DC  D2
  21. #define TFT_CS  D6
  22. #define TFT_RST D3
  23. /*AVR系列主板*/
  24. #else
  25. #define TFT_DC  2
  26. #define TFT_CS  3
  27. #define TFT_RST 4
  28. #endif
  29. /**
  30. * @brief Constructor  硬件SPI通信的构造函数
  31. * @param dc  SPI通信的命令/数据线引脚
  32. * @param cs  SPI通信的片选引脚
  33. * @param rst  屏的复位引脚
  34. */
  35. //DFRobot_ST7789_240x240_HW_SPI screen(/*dc=*/TFT_DC,/*cs=*/TFT_CS,/*rst=*/TFT_RST);
  36. //DFRobot_ST7789_240x320_HW_SPI screen(/*dc=*/TFT_DC,/*cs=*/TFT_CS,/*rst=*/TFT_RST);
  37. DFRobot_ILI9341_240x320_HW_SPI  screen(/*dc=*/TFT_DC,/*cs=*/TFT_CS,/*rst=*/TFT_RST);
  38. //DFRobot_ILI9488_320x480_HW_SPI screen(/*dc=*/TFT_DC,/*cs=*/TFT_CS,/*rst=*/TFT_RST);
  39. /*M0主板下DMA传输*/
  40. //DFRobot_ST7789_240x240_DMA_SPI screen(/*dc=*/TFT_DC,/*cs=*/TFT_CS,/*rst=*/TFT_RST);
  41. //DFRobot_ST7789_240x320_DMA_SPI screen(/*dc=*/TFT_DC,/*cs=*/TFT_CS,/*rst=*/TFT_RST);
  42. //DFRobot_ILI9341_240x320_DMA_SPI screen(/*dc=*/TFT_DC,/*cs=*/TFT_CS,/*rst=*/TFT_RST);
  43. //DFRobot_ILI9488_320x480_DMA_SPI screen(/*dc=*/TFT_DC,/*cs=*/TFT_CS,/*rst=*/TFT_RST);
  44. /*
  45. *可供用户选择的宏定义颜色
  46. *COLOR_RGB565_BLACK   COLOR_RGB565_NAVY    COLOR_RGB565_DGREEN   COLOR_RGB565_DCYAN
  47. *COLOR_RGB565_MAROON  COLOR_RGB565_PURPLE  COLOR_RGB565_OLIVE    COLOR_RGB565_LGRAY     
  48. *COLOR_RGB565_DGRAY   COLOR_RGB565_BLUE    COLOR_RGB565_GREEN    COLOR_RGB565_CYAN  
  49. *COLOR_RGB565_RED     COLOR_RGB565_MAGENTA COLOR_RGB565_YELLOW   COLOR_RGB565_ORANGE           
  50. *COLOR_RGB565_WHITE   
  51. */
  52. void setup() {
  53.   Serial.begin(115200);
  54.   screen.begin();//生成了screen对象
  55. }
  56. void loop(){
  57.     testDrawPixel();
  58.     testLine();
  59.     testFastLines(COLOR_RGB565_PURPLE,COLOR_RGB565_YELLOW);      
  60.     testRects(COLOR_RGB565_BLACK,COLOR_RGB565_WHITE);
  61.     testRoundRects();
  62.     testCircles(24,COLOR_RGB565_BLUE);
  63.     testTriangles(COLOR_RGB565_YELLOW);
  64.     testPrint();
  65. }
  66. /*测试画像素点*/
  67. void testDrawPixel() {
  68.   /*
  69.    *@brief 清屏
  70.    *@param c 屏幕颜色
  71.    */
  72.   screen.fillScreen(COLOR_RGB565_BLACK);
  73.   int x = 0;
  74.   int y = screen.height();
  75.   for(int i = 0; i <= screen.width()/2; i += 10){
  76.     for (x = screen.width() - i; x >= i; x-=10 ){
  77.       /*
  78.        *@brief 画像素点
  79.        *@param x 横坐标
  80.        *       y 纵坐标
  81.        *       c 像素点颜色
  82.        */
  83.       screen.drawPixel(x, y, COLOR_RGB565_ORANGE);
  84.       delay(10);
  85.     }
  86.     for (y = screen.height() - i; y >= i; y-=10){
  87.       screen.drawPixel(x, y, COLOR_RGB565_ORANGE);
  88.       delay(10);
  89.     }
  90.     for (x = i; x <= screen.width() - i + 1; x+=10 ){
  91.       screen.drawPixel(x, y, COLOR_RGB565_ORANGE);
  92.       delay(10);
  93.     }
  94.     for (y = i; y <= screen.height() - i + 1; y+=10){
  95.       screen.drawPixel(x, y, COLOR_RGB565_ORANGE);
  96.       delay(10);
  97.     }
  98.   }
  99. }
  100. /*测试画线*/
  101. void testLine(){
  102.      //0x00FF 是格式为RGB565的颜色数据
  103.   uint16_t color = 0x00FF;
  104.   screen.fillScreen(COLOR_RGB565_BLACK);
  105.   for (int16_t x=0; x < screen.width(); x+=6) {
  106.     /*
  107.      *@brief 画线段
  108.      *@param x0 第一个顶点横坐标
  109.      *       y0 第一个顶点纵坐标
  110.      *       x1 第二个顶点横坐标
  111.      *       y1 第二个顶点纵坐标
  112.      *       c 线段颜色
  113.      */
  114.     screen.drawLine(/*x0=*/screen.width()/*屏幕宽度*//2, /*y0=*/screen.height()/*屏幕高度*//2, /*x1=*/x, /*y1=*/0, /*c=*/color+=0x0700);
  115.   }
  116.   for (int16_t y=0; y < screen.height(); y+=6) {
  117.     screen.drawLine(screen.width()/2, screen.height()/2, screen.width(), y, color+=0x0700);
  118.   }
  119.   for (int16_t x = screen.width(); x >= 0; x-=6) {
  120.     screen.drawLine(screen.width()/2, screen.height()/2, x,screen.height(), color+=0x0700);
  121.   }
  122.   for (int16_t y = screen.height(); y >= 0; y-=6) {
  123.     screen.drawLine(screen.width()/2, screen.height()/2, 0, y, color+=0x0700);
  124.   }
  125. }
  126. /*测试快速画线(需设置延时),只有横线和纵线*/
  127. void testFastLines(uint16_t color1, uint16_t color2) {
  128.   for (int16_t y=0; y < screen.height(); y+=4) {
  129.     /*
  130.      *@brief 画线段
  131.      *@param x 第一个顶点横坐标
  132.      *       y 第一个顶点纵坐标
  133.      *       w 线段的长度
  134.      *       c 线段颜色
  135.      */
  136.     screen.drawFastHLine(/*x=*/0, /*y=*/y, /*w=*/screen.width(),/*c=*/color2);
  137.     delay(10);
  138.   }
  139.   for(int16_t x=0; x < screen.width(); x+=3) {
  140.     /*
  141.      *@brief 画线段
  142.      *@param x 第一个顶点横坐标
  143.      *       y 第一个顶点纵坐标
  144.      *       h 线段的长度
  145.      *       c 线段颜色
  146.      */
  147.     screen.drawFastVLine(/*x=*/x, /*y=*/0, /*h=*/screen.height(), /*c=*/color1);
  148.     delay(10);
  149.   }
  150. }
  151. /*测试画矩形*/
  152. void testRects(uint16_t color1, uint16_t color2) {
  153.     screen.fillScreen(COLOR_RGB565_BLACK);
  154.     int16_t x=screen.width()-12;
  155.     for (; x > 100; x-=screen.width()/40) {
  156.       /*
  157.        *@brief 画空心矩形
  158.        *@param x 顶点横坐标
  159.        *@param y 顶点纵坐标
  160.        *@param w 横向边长
  161.        *@param h 纵向边长
  162.        *@param color 填充颜色,565结构的RGB色
  163.        */
  164.       screen.drawRect(/*x=*/screen.width()/2 -x/2, /*y=*/screen.height()/2 -x/2 , /*w=*/x, /*h=*/x, /*color=*/color2+=0x0F00);
  165.       delay(100);
  166.     }
  167.     /*
  168.      *@brief 画填充矩形
  169.      *@param x 顶点横坐标
  170.      *@param y 顶点纵坐标
  171.      *@param w 横向边长
  172.      *@param h 纵向边长
  173.      *@param color 填充颜色,565结构的RGB色
  174.     */
  175.     screen.fillRect(/*x=*/screen.width()/2 -x/2, /*y=*/screen.height()/2 -x/2 , /*w=*/x, /*h=*/x, /*color=*/color2);
  176.     delay(100);
  177.     for(; x > 6; x-=screen.width()/40){
  178.       screen.drawRect(screen.width()/2 -x/2, screen.height()/2 -x/2 , x, x, color1);
  179.       delay(100);
  180.     }
  181. }
  182. /*测试画圆角矩形*/
  183. void testRoundRects() {
  184.   screen.fillScreen(COLOR_RGB565_BLACK);
  185.    //0xF00F 是格式为RGB565的颜色数据
  186.   int color = 0xF00F;
  187.   int i;
  188.   int x = 0;
  189.   int y = 0;
  190.   int w = screen.width()-3;
  191.   int h = screen.height()-3;
  192.   for(i = 0 ; i <= 16; i+=2) {
  193.     /*
  194.      *@brief 画空心圆角矩形
  195.      *@param x0 起始顶点横坐标
  196.      *@param y0 起始顶点纵坐标
  197.      *@param w 横向边长
  198.      *@param h 纵向边长
  199.      *@param radius 圆角半径
  200.      *@param color 边框颜色,565结构的RGB色
  201.      */
  202.     screen.drawRoundRect(/*x0=*/x, /*y0=*/y, /*w=*/w, /*h=*/h, /*radius=*/20, /*color=*/color);
  203.     x+=5;
  204.     y+=5;
  205.     w-=10;
  206.     h-=10;
  207.     color+=0x0100;
  208.     delay(50);
  209.   }
  210.   for(i = 0 ; i <= 16; i+=2) {
  211.     /*
  212.      *@brief 画填充圆角矩形
  213.      *@param x0 起始顶点横坐标
  214.      *@param y0 起始顶点纵坐标
  215.      *@param w 横向边长
  216.      *@param h 纵向边长
  217.      *@param radius 圆角半径
  218.      *@param color 填充颜色,565结构的RGB色
  219.      */
  220.     screen.fillRoundRect(/*x0=*/x, /*y0=*/y, /*w=*/w, /*h=*/h, /*radius=*/10, /*color=*/color);
  221.     x+=5;
  222.     y+=5;
  223.     w-=10;
  224.     h-=10;
  225.     color+=0x0500;
  226.     delay(50);
  227.   }
  228. }
  229. /*测试画圆*/
  230. void testCircles(uint8_t radius, uint16_t color) {
  231.   screen.fillScreen(COLOR_RGB565_BLACK);
  232.   for (int16_t x=radius; x <=screen.width()-radius; x+=radius*2) {
  233.     for (int16_t y=radius; y <=screen.height()-radius; y+=radius*2) {
  234.       /*
  235.        *@brief 画空心圆
  236.        *@param x0 圆心横坐标
  237.        *@param y0 圆心纵坐标
  238.        *@param r 半径
  239.        *@param color 圆周颜色,565结构的RGB色
  240.        */
  241.       screen.drawCircle(/*x0=*/x, /*y0=*/y, /*r=*/radius, /*color=*/color);
  242.         if(x == y ||x == -y ||x == y + 2*radius)
  243.           /*
  244.            *@brief 画填充圆
  245.            *@param x0 圆心横坐标
  246.            *@param y0 圆心纵坐标
  247.            *@param r 半径
  248.            *@param color 填充颜色,565结构的RGB色
  249.            */
  250.           screen.fillCircle(/*x0=*/x, /*y0=*/y, /*r=*/radius, /*color=*/color);
  251.        color += 800;
  252.        delay(100);
  253.     }
  254.   }
  255. }
  256. /*测试画三角形*/
  257. void testTriangles(uint16_t color){
  258.   screen.fillScreen(COLOR_RGB565_BLACK);
  259.   for (int16_t i=0; i <=screen.width(); i+=24)
  260.     /*
  261.      *@brief 画空心三角形
  262.      *@param x0 起始顶点横坐标
  263.      *@param y0 起始顶点纵坐标
  264.      *@param x1 第二个顶点横坐标
  265.      *@param y1 第二个顶点纵坐标
  266.      *@param x2 第三个顶点横坐标
  267.      *@param y2 第三个顶点纵坐标
  268.      *@param color 边框颜色,565结构的RGB色
  269.      */
  270.     screen.drawTriangle(/*x0=*/i,/*y0=*/0,/*x1=*/0,/*y1=*/screen.height()-i,/*x2=*/screen.width()-i,/*y2=*/screen.height(), /*color=*/color);
  271.   for (int16_t i=0; i <screen.width(); i+=24)
  272.     screen.drawTriangle(screen.width(),i*4/3,0,screen.height()-i*4/3,i,0, color);
  273.   for (int16_t i=0; i <screen.width(); i+=24)
  274.     screen.drawTriangle(screen.width(),i*4/3,i,0,screen.width()-i,screen.height(), color);
  275.   color = COLOR_RGB565_RED;
  276.   for (int16_t i=0; i <=screen.width(); i+=24)
  277.     /*
  278.      *@brief 画填充三角形
  279.      *@param x0 起始顶点横坐标
  280.      *@param y0 起始顶点纵坐标
  281.      *@param x1 第二个顶点横坐标
  282.      *@param y1 第二个顶点纵坐标
  283.      *@param x2 第三个顶点横坐标
  284.      *@param y2 第三个顶点纵坐标
  285.      *@param color 填充颜色,565结构的RGB色
  286.      */
  287.     screen.fillTriangle(/*x0=*/i,/*y0=*/0,/*x1=*/0,/*y1=*/screen.height()-i,/*x2=*/screen.width()-i,/*y2=*/screen.height(), /*color=*/color+=100);
  288.   for (int16_t i=0; i <screen.width(); i+=24)
  289.     screen.fillTriangle(screen.width(),i*4/3,0,screen.height()-i*4/3,i,0, color+=100);
  290.   for (int16_t i=0; i <screen.width(); i+=24)
  291.     screen.fillTriangle(screen.width(),i*4/3,i,0,screen.width()-i,screen.height(), color+=100);
  292. }
  293. void testPrint() {
  294. //0x00FF 是格式为RGB565的颜色数据
  295.   int16_t color = 0x00FF;
  296.   //设置文本自动换行模式
  297.   //true=文本自动换行,false=不自动换行
  298.   screen.setTextWrap(false);
  299.   //填充颜色,565结构的RGB色
  300.   screen.fillScreen(COLOR_RGB565_BLACK);
  301.   //设置坐标位置x=0,y=50
  302.   screen.setCursor(0, 50);
  303.   //设置文本颜色;这是变化的值
  304.   screen.setTextColor(color+=0x3000);
  305.   //设置文本大小为0
  306.   screen.setTextSize(0);
  307.   //输出文本
  308.   screen.println("Hello World!");
  309.   screen.setTextColor(color+=0x3000);
  310.   //设置文本大小为1
  311.   screen.setTextSize(1);
  312.   screen.println("Hello World!");
  313.   screen.setTextColor(color+=0x3000);
  314.   //设置文本大小为2
  315.   screen.setTextSize(2);
  316.   screen.println("Hello World!");
  317.   screen.setTextColor(color+=0x3000);
  318.   //设置文本大小为3
  319.   screen.setTextSize(3);
  320.   screen.println("Hello World!");
  321.   screen.setTextColor(color+=0x3000);
  322.   //设置文本大小为4
  323.   screen.setTextSize(4);
  324.   screen.println("Hello!");
  325.   //设置文本大小为5
  326.   screen.setTextSize(5);
  327.   screen.print("Hello!");
  328.   delay(2000);
  329.   //设置坐标位置x=0,y=0
  330.   screen.setCursor(0, 0);
  331.   //填充颜色,565结构的RGB色
  332.   screen.fillScreen(COLOR_RGB565_BLACK);
  333.   screen.setTextSize(2);
  334.   screen.setTextColor(color+=0x3000);
  335.   screen.print("a = ");
  336.   screen.setTextColor(color+=0x3000);
  337.   int a = 1234;
  338.   screen.println(a, 1);
  339.   screen.setTextColor(color+=0x3000);
  340.   screen.print(8675309, HEX);
  341.   screen.println("this is HEX!");
  342.   screen.println("");
  343.   screen.setTextColor(color+=0x0F00);
  344.   screen.println("running for: ");
  345.   screen.setTextColor(color+=0x0F00);
  346.   //输出毫秒时间
  347.   screen.print(millis());
  348.   screen.setTextColor(color+=0x0F00);
  349.   screen.println("/1000 seconds.");
  350.   char *text = "Hi DFRobot!";
  351.   screen.setTextColor(color+=0x0F00);
  352.   screen.setTextWrap(true);
  353.   screen.setTextSize(3);
  354.   screen.println(text);
  355.   //screen.setFonts((const gdl_Font_t *)SIMKAIFont18ptBitmaps);
  356.   screen.println(text);
  357.   delay(2000);
  358. }
复制代码
程序上传成功后屏幕可以正确点亮

FireBeetle 2 ESP32-S3自制GDI转接板用DFRobot_GDL库驱动普通3.2寸彩...图3


FireBeetle 2 ESP32-S3用DFRobot_GDL库驱动3.2寸彩色TFT屏幕(上)中我们介绍了怎样获得一个GDI显示屏接口转接板,使用这个转接板,就可以让普通TFT彩色屏幕支持DFRobot专用的GDI接口,可以去掉杂乱的杜邦线,并使用DFRobot_GDL库来驱动这个屏幕,将屏幕插在转接板上,用FCP排线连接ESP32-S3主控板
FireBeetle 2 ESP32-S3自制GDI转接板用DFRobot_GDL库驱动普通3.2寸彩...图4


同样上传程序,屏幕点亮,正确显示内容

FireBeetle 2 ESP32-S3自制GDI转接板用DFRobot_GDL库驱动普通3.2寸彩...图5



您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

为本项目制作心愿单
购买心愿单
心愿单 编辑
[[wsData.name]]

硬件清单

  • [[d.name]]
btnicon
我也要做!
点击进入购买页面
上海智位机器人股份有限公司 沪ICP备09038501号-4

© 2013-2024 Comsenz Inc. Powered by Discuz! X3.4 Licensed

mail