合宙ESP32-C3 arduino lvgl8.3 Squarelin_studio 开发体验 （一个温湿度监控屏幕）

目录

先看最终效果

材料准备 

 使用squarelin_studio 创建ui界面

 项目创建

 放置控件与修改控件样式

使用自己准备的字体

 导出项目的UI文件与创建示例工程

 修改配置文件

打开arduino文件修改代码

选择开发板与端口编译运行！

---

先看最终效果

使用 squarelin_studio 开发ui界面直观，美观，体验很不错，接下来开始这个demo的制作。

材料准备 

合宙esp32开发板

tft屏幕模块 SPI接口 (文中使用的为1.8'128x160) 驱动芯片为st7735s

dht11 温湿度传感器一个

 使用squarelin_studio 创建ui界面

下载与安装 squarelin_studio 的过程省略，自行完成。

 项目创建

 创建项目时选择arduino平台，将使用tft_espi 模块驱动lvgl项目。

具体选择如下图所示，项目地址等设置好，根据自身所有的屏幕模块的素质进行相关设置之后点击创建按钮。

 

 放置控件与修改控件样式

 直接使用拖拽的方式将控件元素拖拽到页面上，包括按钮，文本，输入框，图片等等。

 可以直接对组件的各种属性进行设置。

 

综上所述，按照自己的需求摆放控件位置，对控件样式进行设置，不同选项的效果一试便知，最终达到自己心仪的效果即可。

这里不讨论添加事件与动画，可以查看其它文章。

使用自己准备的字体

默认的可选字体并不丰富，我们可以自己添加创建字体，参考字体的创建，自己添加图片等资源的操作也是类似的。 在底部的 assets 选项卡下点击 add file into assets 按钮将自己下载好的字体文件添加进来。

 点击右侧选项卡的 Font Manager 选项卡。

 创建字体名称，选择添加进来的字体文件，字体大小等设置之后点击创建即可。

 此时字体就可以使用了，选择一个文本控件找到属性里字体相关设置，将其字体设置为我们自己创建的字体即可。

 

 导出项目的UI文件与创建示例工程

当我们已经将界面设置的符合自己的要求之后可以直接使用软件导出ui文件也一块使用软件直接创建一个demo。

这里我两个都导出直接使用。 

选择好你要导出的文件位置，导出结束之后打开。

导出项目之后再点击导出UI文件之后它会自动在ui文件夹中更新。

主文件夹中一个是存放所需库的libreries 文件夹，一个是ui文件夹，它包括arduino文件和一些其它生成的ui文件。

库文件夹内容如下 

tft_espi lvgl 为导出项目时自动创建，adafruit_sensor-master dth-sensor-library-master,为接下来驱动温湿度传感器的库。

下面的文章中提供了下载链接。

Arduino DHT11温湿度传感器模块的使用（安装对应库和代码）_arduino温湿度传感器代码_赴遥的博客-CSDN博客

 修改配置文件

现在仍然无法正确的驱动屏幕，需要对tft_espi 和 lvgl 的配置文件进行修改。

tft_espi 中，设置你的屏幕所使用的驱动，屏幕的规格，屏幕对应SPI的引脚信息等，这部分可以自行搜索参考其它文章。

修改 \libraries\TFT_eSPI 下的 User_Setup.h

选择对应的驱动

// Only define one driver, the other ones must be commented out
//#define ILI9341_DRIVER       // Generic driver for common displays
//#define ILI9341_2_DRIVER     // Alternative ILI9341 driver, see https://github.com/Bodmer/TFT_eSPI/issues/1172
#define ST7735_DRIVER      // Define additional parameters below for this display
//#define ILI9163_DRIVER     // Define additional parameters below for this display
//#define S6D02A1_DRIVER

选择屏幕规格

// For ST7789, ST7735, ILI9163 and GC9A01 ONLY, define the pixel width and height in portrait orientation
// #define TFT_WIDTH  80
#define TFT_WIDTH  128
// #define TFT_WIDTH  172 // ST7789 172 x 320
// #define TFT_WIDTH  240 // ST7789 240 x 240 and 240 x 320
#define TFT_HEIGHT 160
// #define TFT_HEIGHT 128

屏幕的颜色 

 #define TFT_RGB_ORDER TFT_RGB  // Colour order Red-Green-Blue
// #define TFT_RGB_ORDER TFT_BGR  // Colour order Blue-Green-Red

定义引脚

// The hardware SPI can be mapped to any pins

#define TFT_MOSI 3 // In some display driver board, it might be written as "SDA" and so on.
#define TFT_SCLK 2
#define TFT_CS   7 // Chip select control pin
#define TFT_DC   6  // Data Command control pin
#define TFT_RST  10  // Reset pin (could connect to Arduino RESET pin)
#define TFT_BL   11  // LED back-light

将 lvgl/lv_conf_template.h 复制到 lvgl 同级目录下，并将其重命名为 lv_conf.h 。 打开文件并将开头的 #if 0 更改为 #if 1 以使能其内容。

LV_TICK_CUSTOM 设置为 1

打开arduino文件修改代码

现在可以打开arduino文件并对代码进行修改添加温湿度传感器的部分。

下面是温湿度传感器的demo 将引脚修改为你的实际引脚。

#include <DHT.h>

// 定义传感器引脚
#define DHTPIN 2

// 传感器类型为DHT11
#define DHTTYPE DHT11

// 创建DHT对象
DHT dht(DHTPIN, DHTTYPE);

void setup() {
  // 初始化串口通信
  Serial.begin(9600);
  Serial.println("DHT11 温湿度传感器测试");
  
  // 初始化DHT传感器
  dht.begin();
}

void loop() {
  // 读取温湿度值
  float temperature = dht.readTemperature();
  float humidity = dht.readHumidity();
  
  // 检查是否成功读取温湿度值
  if (isnan(temperature) || isnan(humidity)) {
    Serial.println("无法读取温湿度值！");
    return;
  }
  
  // 打印温湿度值
  Serial.print("温度：");
  Serial.print(temperature);
  Serial.print(" °C\t");
  Serial.print("湿度：");
  Serial.print(humidity);
  Serial.println(" %");

  delay(2000); // 间隔2秒钟进行下一次读取
}

添加到生成的arduino文件中。

#include <DHT.h>
#include <lvgl.h>
#include <TFT_eSPI.h>
#include "ui.h"
#include <stdio.h>
#include <string.h>

// 定义传感器引脚
#define DHTPIN 8
// 传感器类型为DHT11
#define DHTTYPE DHT11

// 创建DHT对象
DHT dht(DHTPIN, DHTTYPE);

/*If you want to use the LVGL examples,
  make sure to install the lv_examples Arduino library
  and uncomment the following line.
#include <lv_examples.h>
*/

/*Change to your screen resolution*/
static const uint16_t screenWidth  = 128;
static const uint16_t screenHeight = 160;

static lv_disp_draw_buf_t draw_buf;
static lv_color_t buf[ screenWidth * screenHeight / 10 ];

TFT_eSPI tft = TFT_eSPI(screenWidth, screenHeight); /* TFT instance */

#if LV_USE_LOG != 0
/* Serial debugging */
void my_print(const char * buf)
{
    Serial.printf(buf);
    Serial.flush();
}
#endif

/* Display flushing */
void my_disp_flush( lv_disp_drv_t *disp, const lv_area_t *area, lv_color_t *color_p )
{
    uint32_t w = ( area->x2 - area->x1 + 1 );
    uint32_t h = ( area->y2 - area->y1 + 1 );

    tft.startWrite();
    tft.setAddrWindow( area->x1, area->y1, w, h );
    tft.pushColors( ( uint16_t * )&color_p->full, w * h, true );
    tft.endWrite();

    lv_disp_flush_ready( disp );
}

/*Read the touchpad*/
void my_touchpad_read( lv_indev_drv_t * indev_driver, lv_indev_data_t * data )
{
    uint16_t touchX = 0, touchY = 0;

    bool touched = false;//tft.getTouch( &touchX, &touchY, 600 );

    if( !touched )
    {
        data->state = LV_INDEV_STATE_REL;
    }
    else
    {
        data->state = LV_INDEV_STATE_PR;

        /*Set the coordinates*/
        data->point.x = touchX;
        data->point.y = touchY;

        Serial.print( "Data x " );
        Serial.println( touchX );

        Serial.print( "Data y " );
        Serial.println( touchY );
    }
}

void setup()
{
    Serial.begin( 115200 ); /* prepare for possible serial debug */

    String LVGL_Arduino = "Hello Arduino! ";
    LVGL_Arduino += String('V') + lv_version_major() + "." + lv_version_minor() + "." + lv_version_patch();

    Serial.println( LVGL_Arduino );
    Serial.println("DHT11 温湿度传感器测试");
    // 初始化DHT传感器
    dht.begin();

    lv_init();

#if LV_USE_LOG != 0
    lv_log_register_print_cb( my_print ); /* register print function for debugging */
#endif

    tft.begin();          /* TFT init */
    tft.setRotation( 0 ); /* Landscape orientation, flipped */

    lv_disp_draw_buf_init( &draw_buf, buf, NULL, screenWidth * screenHeight / 10 );

    /*Initialize the display*/
    static lv_disp_drv_t disp_drv;
    lv_disp_drv_init( &disp_drv );
    /*Change the following line to your display resolution*/
    disp_drv.hor_res = screenWidth;
    disp_drv.ver_res = screenHeight;
    disp_drv.flush_cb = my_disp_flush;
    disp_drv.draw_buf = &draw_buf;
    lv_disp_drv_register( &disp_drv );

    /*Initialize the (dummy) input device driver*/
    static lv_indev_drv_t indev_drv;
    lv_indev_drv_init( &indev_drv );
    indev_drv.type = LV_INDEV_TYPE_POINTER;
    indev_drv.read_cb = my_touchpad_read;
    lv_indev_drv_register( &indev_drv );


    ui_init();

    Serial.println( "Setup done" );
}

void loop()
{
    // 读取温湿度值
   int temperature = (int)dht.readTemperature();
   int humidity = (int)dht.readHumidity();
     // 检查是否成功读取温湿度值
   if (isnan(temperature) || isnan(humidity)) {
     Serial.println("无法读取温湿度值！");
     return;
   }

    // 打印温湿度值
    Serial.print("温度：");
    Serial.print(temperature);
    Serial.print(" °C\t");
    Serial.print("湿度：");
    Serial.print(humidity);
    Serial.println(" %");

    lv_arc_set_value(ui_ta, temperature);
    char temperchar[10];
    sprintf(temperchar,"%d",temperature);
    lv_label_set_text(ui_tnumber, temperchar);

    lv_arc_set_value(ui_ha, humidity);
    char humiditychar[10];
    sprintf(humiditychar,"%d",humidity);
    lv_label_set_text(ui_hnumber, humiditychar);

    lv_timer_handler(); /* let the GUI do its work */
    delay(5);
}

读取到的数据更新到ui上只需要使用lvgl自带的函数。

例如下面将读取到的温湿度数据更新到 arc类型控件 ta,label类型控件tnumber 上。

lv_arc_set_value(ui_ta, temperature);
    char temperchar[10];
    sprintf(temperchar,"%d",temperature);
    lv_label_set_text(ui_tnumber, temperchar);

    lv_arc_set_value(ui_ha, humidity);
    char humiditychar[10];
    sprintf(humiditychar,"%d",humidity);
    lv_label_set_text(ui_hnumber, humiditychar);

选择开发板与端口编译运行！

欢迎交流 。