用小程序便捷实现TTGO电子屏画面切换

前端

2024-02-20 11:42:51

在日常生活中，我们可以看到各种各样的电子屏，它们随处可见，例如：广告牌、显示屏、仪表盘等。电子屏的作用是显示信息，而信息可以是文字、图片、视频等。随着技术的进步，电子屏变得越来越智能，我们可以通过小程序来控制电子屏的显示内容。

TTGO电子屏是一款基于ESP32的开发板，它具有强大的功能和丰富的接口，非常适合用来制作IoT项目。TTGO电子屏有一个TFT屏幕，我们可以通过小程序来控制屏幕显示的图片。

本篇文章将介绍如何用小程序实现TTGO电子屏的画面切换。我们将分以下几个步骤进行讲解：

硬件准备
软件准备
编写代码
调试程序
使用小程序

硬件准备

要实现TTGO电子屏的画面切换，我们需要准备以下硬件：

TTGO电子屏
USB数据线
电脑

软件准备

我们需要在电脑上安装以下软件：

Arduino IDE
ESP32开发环境
小程序开发工具

编写代码

在Arduino IDE中，我们新建一个项目，然后将以下代码复制到项目中：

#include <TFT_eSPI.h>
#include <WiFi.h>
#include <WebServer.h>
#include <SPIFFS.h>

// 创建TFT屏幕对象
TFT_eSPI tft = TFT_eSPI();

// 创建Web服务器对象
WebServer server(80);

// 设置ESP32的Wi-Fi信息
const char *ssid = "your_ssid";
const char *password = "your_password";

// 设置TFT屏幕的宽度和高度
const int screenWidth = 320;
const int screenHeight = 240;

// 定义一个变量来存储收到的图片
byte imageData[screenWidth * screenHeight * 3];

// 定义一个函数来处理POST请求
void handlePOST() {
  // 获取请求的长度
  int contentLength = server.contentLength();

  // 如果请求的长度大于0，则表示有数据传输过来
  if (contentLength > 0) {
    // 读取请求的正文
    server.readBytes(imageData, contentLength);

    // 将接收到的图片显示在TFT屏幕上
    tft.drawBitmap(0, 0, imageData, screenWidth, screenHeight);
  }
}

// 定义一个函数来处理GET请求
void handleGET() {
  // 发送一个HTML页面给客户端
  server.send(200, "text/html", "<html><body><h1>Hello World!</h1></body></html>");
}

// 设置服务器的路由
void setupRoutes() {
  server.on("/", handleGET);
  server.on("/image", handlePOST);
}

// ESP32的初始化函数
void setup() {
  // 初始化串口
  Serial.begin(115200);

  // 连接Wi-Fi
  WiFi.begin(ssid, password);

  // 等待Wi-Fi连接成功
  while (WiFi.status() != WL_CONNECTED) {
    delay(1000);
  }

  // 初始化SPIFFS
  SPIFFS.begin();

  // 初始化TFT屏幕
  tft.init();
  tft.setRotation(0);

  // 设置TFT屏幕的背景色
  tft.fillScreen(TFT_BLACK);

  // 设置服务器的路由
  setupRoutes();

  // 启动Web服务器
  server.begin();
}

// ESP32的主循环函数
void loop() {
  // 处理Web服务器的请求
  server.handleClient();
}

调试程序

将代码上传到TTGO电子屏后，我们可以通过串口监视器来查看程序的运行情况。如果程序运行正常，串口监视器中会输出以下信息：

TFT_eSPI library initialized.
Connecting to WiFi...
Connected.
SPIFFS initialized.
Web server started.

使用小程序

现在，我们可以使用小程序来控制TTGO电子屏的显示内容。我们可以通过以下步骤来实现：

在手机上安装小程序开发工具
打开小程序开发工具，创建一个新的项目
将以下代码复制到项目中：

Page({
  data: {
    url: 'http://192.168.1.100/image', // TTGO电子屏的IP地址
    image: '', // 要显示的图片
  },

  // 当小程序加载完成后执行
  onLoad: function () {
    // 从相册中选择一张图片
    wx.chooseImage({
      count: 1, // 最多选择一张图片
      sizeType: ['original', 'compressed'], // 可以选择原图或压缩图
      sourceType: ['album', 'camera'], // 可以从相册或相机中选择图片
      success: (res) => {
        // 获取图片的临时路径
        const tempFilePath = res.tempFilePaths[0];

        // 将图片上传到服务器
        wx.uploadFile({
          url: this.data.url, // 服务器的地址
          filePath: tempFilePath, // 要上传的图片的路径
          name: 'image', // 文件的名称
          success: (res) => {
            // 上传成功后，将图片的路径显示在小程序中
            this.setData({
              image: tempFilePath,
            });
          },
          fail: (err) => {
            // 上传失败时，输出错误信息
            console.error(err);
          },
        });
      },
    });
  },
});