首页 > 编程语言 >esp32 墨水屏 html 上位机程序 传图

esp32 墨水屏 html 上位机程序 传图

时间:2023-04-28 13:44:11浏览次数:58  
标签:esp32 墨水 server html println Serial 传图 display

使用 esp32 开发墨水屏显示图片

这里的墨水屏工具为我自己制作的,使用 esp32c3 和 2.9 寸墨水屏,你如果使用的是自己的,请更换墨水屏驱动代码,引脚定义和图片尺寸

在之前的 demo 演示中,我展示了使用 esp32c3 配合墨水屏展示 Hello World! 的一个程序。

有朋友问我,墨水屏可以展示图片嘛?当然可以。只需要将图片的位图写在程序里,然后调用显示就好。

有更简单的方式嘛?可以通过网页上传图片,然后展示吗?

这个,可以,安排上。

简单流程说明

  1. 安装 Image2Lcd 取模软件
  2. 准备一张比例大约为 128*296 的 jpg 图片
  3. 使用 Image2Lcd 将 jpg 图片转换为二进制 bin 文件
  4. 给 esp32 墨水屏通电,并连接上它的 WiFi
  5. 访问网页,上传图片

详细教程

编写代码

由于代码比较的简单,我就不放在 github 上了,在文章末尾我贴出了所有的代码。

Image2Lcd 取模软件

Image2Lcd 软件的安装我就不赘述了,安装包文件地址如下:https://files.cnblogs.com/files/manastudent/image2lcd3-2版本.zip?t=1682306176&download=true

自己准备一张黑白的图片,比例大约为 128*296 即可,导入到 Image2Lcd 中后注意 输入格式为 二进制.bin,宽度和高度为 128 296,取消勾选 包含图像头数据,调节亮度直至右边预览图满意。

这里我通过 1.jpg 获取到了 晴子.bin 文件。

上传 bin 文件

将代码烧录到 esp32 上后,电脑打开 WiFi 寻找名称为 ESP32_Config 的热点并链接。

打开浏览器,输入 192.168.4.1 打开文件上传页面,上传刚刚生成的 晴子.bin 文件。

enjoy...

代码

platformio.ini

[env:esp32-c3-devkitm-1]
platform = espressif32
board = esp32-c3-devkitm-1
framework = arduino
board_build.flash_mode = dio
monitor_speed = 115200
lib_deps = 
    zinggjm/GxEPD2@^1.5.0

main.cpp

#include <Arduino.h>
#include <Ticker.h>
#include <WiFi.h>
#include <WebServer.h>

#include <GxEPD2_BW.h>
#include <Fonts/FreeMonoBold9pt7b.h>

GxEPD2_BW<GxEPD2_290_T5D, GxEPD2_290_T5D::HEIGHT> display(GxEPD2_290_T5D(/*CS=D8*/ SS, /*DC=D3*/ 10, /*RST=D4*/ 3, /*BUSY=D2*/ 2));


WebServer server(80);
const char *AP_SSID = "ESP32_Config"; // 热点名称

String HTML = "<form method=\"post\" action=\"connect\" enctype=\"multipart/form-data\"><input type=\"file\" name=\"msg\"><input class=\"btn\" type=\"submit\" name=\"submit\"value=\"Submit\"></form>";

void handle_root()
{
  server.send(200, "text/html", HTML);
}

// HTML & CSS contents which display on web server
String HTML2 = "<!DOCTYPE html>\
<html>\
<body>\
<h1>OK</h1>\
</body>\
</html>";

void handle_root_2()
{
  server.send(200, "text/html", HTML2);
  HTTPUpload &upload = server.upload();

  if (upload.status == UPLOAD_FILE_END)
  {
    Serial.println("draw file");
    Serial.println(upload.filename);
    Serial.println(upload.totalSize);

    display.firstPage();
    do
    {
      display.setRotation(0);
      display.fillScreen(GxEPD_WHITE);
      display.drawBitmap(0, 0, upload.buf, 128, 296, GxEPD_BLACK);
    } while (display.nextPage());
  }
}

void setup()
{
  Serial.begin(115200);
  display.init(115200);

  Serial.println("Try Connecting to ");

  WiFi.mode(WIFI_AP);                        // 配置为AP模式
  boolean result = WiFi.softAP(AP_SSID, ""); // 开启WIFI热点
  if (result)
  {
    IPAddress myIP = WiFi.softAPIP();
    // 打印相关信息
    Serial.println("");
    Serial.print("Soft-AP IP address = ");
    Serial.println(myIP);
    Serial.println(String("MAC address = ") + WiFi.softAPmacAddress().c_str());
    Serial.println("waiting ...");
  }
  else
  { // 开启热点失败
    Serial.println("WiFiAP Failed");
    delay(3000);
    ESP.restart(); // 复位esp32
  }

  server.on("/", handle_root);
  server.on("/connect", handle_root_2);
  server.begin();
  Serial.println("HTTP server started");
  delay(100);
}

void loop()
{
  server.handleClient();
}

标签:esp32,墨水,server,html,println,Serial,传图,display
From: https://www.cnblogs.com/manastudent/p/17361871.html

相关文章

  • 网页截图,html2canvas简单示例
     <divid="box"><p>asd4a5s6fa6s5f1asf</p><imgstyle="width:200px"src="xxxxxx.png"/><buttonstyle="width:100px;height:30px"onclick="prtsc()">pr......
  • 从零开始构建HTML 5 Web页面
    HTML5是时下Web开发领域炒得火热的一个术语,是的,很多人都看好它,也有很多业内知名公司开始正式使用HTML5重新构建自己的网站,如YouTube开始使用HTML5视频,Google已经弃用自家的Gears,开始全面拥抱HTML5实现离线解决方案,各大浏览器厂家也纷纷开始支持HTML5,连被人诟病的微软也声称要......
  • 认识HTML5的WebSocket
    在HTML5规范中,我最喜欢的Web技术就是正迅速变得流行的WebSocketAPI。WebSocket提供了一个受欢迎的技术,以替代我们过去几年一直在用的Ajax技术。这个新的API提供了一个方法,从客户端使用简单的语法有效地推动消息到服务器。让我们看一看HTML5的WebSocketAPI:它可用于客户端、服务器......
  • cshtml和html的区别从语法和功能上来看
    https://www.lookxue.com/blog/o61302ve.htmlcshtml和html的区别:1.cshtml是一种混合式的文件,它将html、javascript和C#代码结合在一起,而html只是一种纯静态的文件;2.cshtml可以使用C#代码进行逻辑处理,而html不能;3.cshtml中可以使用Razor语法,而html中不能;4.cshtml可以使用@......
  • html表格相关属性
    <!DOCTYPEhtml><html>   <head>      <metacharset="UTF-8">      <title>表头标签</title>   </head>   <body>      <tablealign="center"border="1"cellpadding="0"......
  • HTML中script 标签中的那些属性
    在HTML中,<script>标签用于嵌入或引用JavaScript代码。在<script>标签中,有两个属性可以用来控制脚本的加载和执行方式:async和defer。当然这也是常见的一道面试题,async 和 defer的作用和区别。async和defer属性都可以用于异步加载脚本,从而避免了在加......
  • java 后台给前台传值,html:select,html:text等加载页面显示默认值的方法
    后台写request.setAttribute("dateCreated","黑色头发");前台接收:html:text<html:textproperty="dateCreated"value="${dateCreated}"/>html:select<html:selectproperty="accountsUser"va......
  • java js JavaScript 设置html:radio的默认选中, js也可以用el表达式
    <html:radioproperty="consumptionClass"value="花了">花了</html:radio><html:radioproperty="consumptionClass"value="赚了">赚了</html:radio><html:radioproperty="consumptionClass"va......
  • html超链接
    html超链接​外部链接腾讯 target打开窗口的方式默认的值_self当前窗口打开页面_blank新窗口打开页面 百度​<h4>内部链接</h4><ahref="第一次使用工具.html">工具介绍</a><h4>空链接</h4><ahref="#">公司地址</a><h4>下载链接地......
  • Html 每个属性的意义
    <!DOCTYPEhtml><html>   <head>      <metacharset="utf-8">      <title>利用工具做的第一个页面</title>//注释网页顶端介绍   </head>   <body>      <p><h1>如果说是JQuery是手工作坊,那么Vue.js就像是一座工厂,<br/&g......