阿珏酱のBlog因为我是活在二次元的女孩

用ESP8266-NodeMCU开发板显示一下我的QQ头像

阿珏酱·2024-06-16 17:01·112 次阅读

用ESP8266-NodeMCU开发板显示一下我的QQ头像

诶，说好的自己写esp8266的开发板固件的我回来了。
20年说好的，今天回来还愿了 ESP8266串口WiFi模块 - WiFi杀手

今天我们把OLED显示屏也接上，我此次买的是4脚的OLED(128*64)，不支持彩色显示的。

NodeMCU开发板#

NodeMCU是一个开源的IoT物联网硬件开发板，由于它支持WIFI功能且使用方法十分类似Arduino开发板，所以近些年获得了越来越多来自全世界的创客朋友们的青睐。NodeMCU尺寸与Arduino Nano类似。它并不是Arduino团队开发的，但是我们也可以使用Arduino IDE 对它进行开发。

作为万物互联的IoT基础，首先物联网控制板的成本不能过高。高昂的物联网控制元件不利于项目成本控制也不利于广大创客爱好者学习和使用它。在这一点上，NodeMCU比树莓派以及Arduino家族的IoT平台等更具优势。

细心的朋友可能已经发现了，这会我开发板叫做了ESP8266-NodeMCU。然而在其它的网站或资料中，有时是用ESP8266有时是用NodeMCU。那么ESP8266和NodeMCU之间是什么关系呢？

ESP8266是一块芯片（被铁壳子保住的方型的东西），而NodeMCU则是以ESP8266芯片为核心的开发板，如下图所示。
img
要想对ESP8266芯片来进行实验操作是很困难的，因为我们很难将小小一枚芯片上的引脚与我们的电脑连接起来然后再进行上传程序等操作。于是便诞生了围绕ESP8266芯片的各种开发板。NodeMCU就是这些开发板中的一员。

NodeMCU开发板上的两排插针与ESP8266芯片的引脚相连。有了开发板上的两排插针，我们就可以很轻松的使用杜邦线将芯片的引脚接到实验电路中。NodeMCU开发板上还配有USB接口以及电压转换电路。这些为我们提供了很大的便利。我们只要用一根USB数据线就可以轻松的实现为ESP8266供电以及上传程序的操作。当然，NodeMCU开发板上的电路功能还不止这些，我就不再继续延伸下去了

驱动的安装#

虽然之前已经讲过开发板的驱动安装了，但是不够详细。

目前市面上的ESP8266驱动有多种，即使是同一块NodeMcu的开发板驱动也可能是不一样的。目前主流的是CH340和CP210X的驱动

驱动的下载请直接去芯片的制造商的官网下载即可
CP210X：https://cn.silabs.com/developers/usb-to-uart-bridge-vcp-drivers
CH340C：https://www.wch.cn/downloads/CH341SER_EXE.html

下载适合自己平台的驱动安装程序
需要看清楚自己的串口芯片型号是否在驱动程度的支持范围内

如何查看自己的开发板需要什么驱动#

  1. 直接看，下图中竖着的长方形黑条，那个就是USB转串口芯片。上面会写明芯片的型号名称
    img
  2. 问你买的商家

显示屏的焊接#

不要焊接错了，不然会烧坏芯片的
OLED接线：

  • GND - GND
  • VCC - VCC
  • SCL - GPIO5(D1)
  • SDA - GPIO4(D2)

洛铁加热中
img

下面就是焊接好的，注意接线，不一定是按我这个顺序的，要看名称
img

Arduino IDE的安装#

  1. 下载arduino IDE
    https://www.arduino.cc/en/software

  2. 安装
    安装还要我教？

  3. 配置
    点击工具-开发板-开发板管理器,在设置中写上开发板地址：http://arduino.esp8266.com/stable/package_esp8266com_index.json
    之后就会自动下载相应的支持库文件了，期间需要保证网络的科学性

  4. 选择开发板
    NodeMCU1.0(ESP-12EModule)

  5. 选择端口
    在计算机的设备管理器中找到你的开发板的COM口

Arduino代码#

有时候我觉得我逼逼叨叨说一大堆还不如直接上代码来的直接，我觉得你肯定也是想直接看代码的而不是听我说一堆废话
我也尽可能在代码中注释了(编写arduino代码请遵循C/C++语言规范)

下列的例子中，连接WiFi使用的是<WiFiManager.h>库，首次连接需要使用手机连接ESP8266发送出来的WiFi先进行配网操作。写出屏幕使用的是<U8g2lib.h>库，支持中文直接写出

  1. 这是一个简单的连接WiFi和屏幕显示图片的示例
Copy
#include <Adafruit_GFX.h>
#include <Adafruit_SSD1306.h>
#include <ESP8266WiFi.h>
#include <NTPClient.h>
#include <WiFiManager.h>
#include <U8g2lib.h>

#define SDA 4  // SDA引脚，默认gpio4(D2)
#define SCL 5  // SCL引脚，默认gpio5(D1)

Adafruit_SSD1306 oled(128, 64, &Wire,-1);   //OLED 屏幕实例化
WiFiUDP ntpUDP;

NTPClient timeClient(ntpUDP,"pool.ntp.org", 8*3600, 60000);

U8G2_SSD1306_128X64_NONAME_F_SW_I2C u8g2(U8G2_R0, /*clock=*/SCL, /*data=*/SDA, /*reset=*/U8X8_PIN_NONE);           // 选择显示屏幕

// 只执行一次
void setup() {

  u8g2.begin();            // 初始化
  u8g2.enableUTF8Print();  // UTF8允许
  u8g2.setFont(u8g2_font_wqy12_t_gb2312b); //字体大小   u8g2_font_wqy15_t_gb2312b  
  
  // 初始化屏幕
  OLED_Init();
  
  OLED_Showchin(1,13,"正在连接WiFi....",0);
  WiFiManager wifiManager;
  wifiManager.autoConnect("ESP8266");

  OLED_Showchin(1,27,"WiFi连接成功！",0);
  OLED_Showchin(1,41,"名称： " + WiFi.SSID(),0);
  OLED_Showchin(1,55,"IP: " + WiFi.localIP().toString(),1);

  // 获取时间
  timeClient.begin();
  u8g2.setFont(u8g2_font_wqy15_t_gb2312b); //字体大小   u8g2_font_wqy15_t_gb2312b  
  
  OLED_Showchin(1,13,"宁小建",0);
  OLED_Showchin(1,27,"hhhhhhhhhhhh",0);
  OLED_Showchin(1,55,"大傻逼哈哈哈",1);


  timeClient.update();
  OLED_Showchin(1,20,"当前北京时间: ",0);
  OLED_Showchin(1,41,timeClient.getFormattedTime(),1);
  delay(1000);
  OLED_img();
}

// 重复执行程序
void loop() {
  // 更新时间
  // timeClient.update();
  // OLED_Showchin(1,27,"当前北京时间: ",0);
  // OLED_Showchin(1,41,timeClient.getFormattedTime(),0);
}

// 打印输出到屏幕（支持中文）
void OLED_Showchin(uint8_t x, uint8_t y, String string, uint8_t boot) {
  u8g2.setCursor(x, y);  //设置显示坐标
  u8g2.print(string);  // 指定缓存区需要打印的字符串
  u8g2.sendBuffer();          // 将定位信息发送到缓冲区
  if(boot == 1){
    delay(1000);
    u8g2.clearBuffer();     // 清除缓存，其实初始化里有清除，循环时一定要加上
  }
}

// 屏幕初始化
void OLED_Init() {
  oled.begin(SSD1306_SWITCHCAPVCC, 0x3C);     //"SSD1306_SWITCHCAPVCC"表示显示器为OLED ,"0x3C"为OLED屏幕默认通信地址
  oled.setTextColor(WHITE);//开像素点发光
  oled.clearDisplay();//清屏
}

// 输出屏幕
void OLED_ShowString(uint8_t x, uint8_t y, uint8_t font_size, String string) {
  oled.setTextSize(font_size);    //设置字体尺寸 (>=1)
  oled.setCursor(x, y);           //设置显示坐标
  oled.println(string);           //显示内容
  oled.display();                 //开启显示
}

// 绘画
void OLED_img() {
  //  图片数据
    const unsigned char gImage_1[518] = { 0X00,0X01,0X40,0X00,0X40,0X00,
  0X00,0X40,0X00,0X00,0X00,0X3E,0XF0,0X00,0X00,0X80,0X00,0X00,0X00,0X1F,0XE0,0X00,
  0X00,0X00,0X00,0X00,0X00,0X06,0XB0,0X00,0X01,0X00,0X00,0X00,0X00,0X03,0XF8,0X00,
  0X00,0X00,0X00,0X00,0X00,0X03,0XFC,0X00,0X00,0X00,0X00,0X00,0X00,0X03,0XDC,0X00,
  0X04,0X00,0X00,0X00,0X00,0X01,0XC0,0X00,0X0E,0X00,0X00,0X00,0X00,0X00,0X80,0X00,
  0X06,0X00,0X00,0X00,0X00,0X00,0X00,0X00,0X01,0X00,0X00,0X00,0X10,0X00,0X00,0X00,
  0X08,0X00,0X00,0X00,0X0E,0X00,0X00,0X00,0X08,0X00,0X00,0X00,0X8F,0X00,0X00,0X00,
  0X00,0X00,0X02,0X02,0X47,0X00,0X00,0X00,0X00,0X00,0X01,0X10,0X63,0X80,0X00,0X00,
  0X00,0X00,0X01,0XC9,0X73,0XC0,0X00,0X00,0X00,0X00,0X00,0XE4,0X79,0XE0,0X00,0X00,
  0X00,0X02,0X00,0XFA,0XF9,0XE0,0X00,0X00,0X10,0X02,0X00,0X7D,0X8C,0XF0,0X00,0X00,
  0X10,0X03,0X01,0X7E,0X90,0XF1,0X80,0X00,0X10,0X01,0X20,0XFD,0X1C,0X7B,0XE0,0X00,
  0X00,0X01,0XA0,0X7D,0X03,0X7B,0X20,0X00,0X10,0X01,0XD8,0XFF,0X8B,0X7E,0X30,0X00,
  0X00,0X01,0XFC,0X7F,0X83,0XB6,0X10,0X00,0X00,0X00,0XF7,0XFF,0XC7,0XBE,0X10,0X00,
  0X00,0X01,0X8F,0XFF,0XE3,0XF6,0X10,0X00,0X01,0X01,0X4F,0XFF,0XFF,0XFF,0X10,0X00,
  0X00,0X01,0XCF,0XFF,0XFF,0XDF,0X10,0X00,0X00,0X01,0XC3,0XFF,0XFF,0XDF,0X70,0X00,
  0X01,0X03,0XE3,0XFF,0XFF,0XDF,0XE0,0X00,0X04,0X01,0XE7,0XFF,0XFF,0XDF,0XE4,0X00,
  0X07,0X00,0XFB,0XFF,0XFF,0XDF,0XC0,0X00,0X07,0X00,0XFB,0XFF,0XFF,0XFE,0X00,0X00,
  0X13,0X00,0X7F,0XFF,0XFF,0XFC,0X00,0X00,0X01,0X20,0X3F,0XFF,0XFF,0XFC,0X00,0X00,
  0X00,0X00,0X3F,0XFF,0XFF,0XF8,0X00,0X0B,0X00,0X00,0X1F,0XFE,0X0F,0XF8,0X00,0X1F,
  0X00,0X00,0X1F,0XF8,0X6F,0XF0,0X00,0XFF,0X00,0X00,0X1F,0XE1,0XFF,0XF0,0X05,0XFF,
  0X00,0X00,0X0F,0XF3,0XFF,0XE0,0X03,0XFF,0X00,0X40,0X0F,0XF7,0XFF,0XC0,0X07,0XFF,
  0X00,0X00,0X07,0XFF,0XFF,0X80,0X07,0XFF,0X08,0X00,0X07,0XFF,0XFF,0X00,0X0F,0XFF,
  0X00,0X00,0X23,0XFF,0XFE,0X00,0X0F,0XFF,0X00,0X08,0X60,0XFF,0XFE,0X00,0X0F,0XFF,
  0X00,0X40,0X20,0X3F,0XFE,0X00,0X1F,0XFF,0X00,0X00,0X10,0X0B,0XFF,0X80,0X1F,0XFF,
  0X00,0X00,0X40,0X00,0X3F,0X00,0X1F,0XFF,0X00,0X00,0X10,0X00,0X3F,0X00,0X1F,0XFF,
  0X20,0X00,0X02,0X00,0X3F,0X00,0X3F,0XFF,0X00,0X00,0X00,0X00,0X7F,0X80,0X3F,0XFF,
  0X00,0X00,0X00,0X10,0X7F,0X80,0X7F,0XFF,0X00,0X00,0X00,0X80,0X7F,0X80,0X7F,0XFF,
  0X10,0X00,0X00,0X00,0X7F,0X80,0XFF,0XFF,0X30,0X00,0X00,0X00,0X7F,0X80,0XFF,0XFF,
  0X10,0X10,0X00,0X00,0X7F,0XC1,0XFF,0XFF,0X00,0X00,0X00,0X00,0X7F,0XF3,0XFF,0XFF,
  0X00,0X00,0X01,0X00,0X3F,0XFF,0XFF,0XFF,0X00,0X00,0X00,0X04,0X3F,0XFF,0XFF,0XFF,
  0X00,0X00,0X00,0X00,0X3F,0XFF,0XFF,0XFF,0X00,0X00,0X10,0X80,0X1F,0XFF,0XFF,0XFF,
  0X01,0X00,0X00,0X05,0X1F,0XFF,0XFF,0XFB,0X00,0X00,0X00,0X00,0X1F,0XF7,0XFF,0XFC,
  0X00,0X00,0X00,0X00,0X1F,0XFB,0XFF,0XFF,0X00,0X00,0X40,0X00,0X19,0XFF,0XFF,0XFF,
  };

  oled.clearDisplay();
  oled.drawBitmap(3, 1, gImage_1, 64, 64, WHITE);
  oled.display();
}

img
2. 这是一个发起HTTP请求，然后在屏幕显示近四天的天气信息

Copy
#include <ESP8266WiFi.h>
#include <ESP8266HTTPClient.h>
#include <WiFiManager.h> // 引入 WiFiManager 库
#include <ArduinoJson.h> // 引入 ArduinoJson 库
#include <U8g2lib.h> // 引入 U8g2 库

#define SDA 4  // SDA引脚，默认gpio4(D2)
#define SCL 5  // SCL引脚，默认gpio5(D1)

// 选择显示屏幕
U8G2_SSD1306_128X64_NONAME_F_SW_I2C u8g2(U8G2_R0, /*clock=*/SCL, /*data=*/SDA, /*reset=*/U8X8_PIN_NONE);


// 要请求的 URL
const char* url = "http://t.weather.itboy.net/api/weather/city/101230308";

// Wi-Fi 自动连接
void connectToWiFi() {
  WiFiManager wifiManager;
  wifiManager.autoConnect("ESP8266"); // 自动连接到已保存的 Wi-Fi 网络，或设置一个指定名称的接入点
  if (WiFi.status() == WL_CONNECTED) {
    Serial.println("已连接到 Wi-Fi");
  } else {
    Serial.println("未连接到 Wi-Fi");
  }
}

// 发起 HTTP GET 请求并返回响应
String httpRequest(const char* url) {
  WiFiClient client;
  HTTPClient http;
  http.begin(client, url); // 使用 WiFiClient 和 URL

  int httpCode = http.GET(); // 发起请求
  String payload;

  if (httpCode > 0) {
    Serial.printf("HTTP GET 请求已发送，响应码: %d\n", httpCode);
    if (httpCode == HTTP_CODE_OK) {
      payload = http.getString(); // 获取响应内容
      Serial.println("响应内容:");
      Serial.println(payload); // 打印响应内容
    }
  } else {
    Serial.printf("HTTP GET 请求失败，错误: %s\n", http.errorToString(httpCode).c_str());
  }

  http.end(); // 关闭连接
  return payload;
}

// 全局变量存储天气数据
StaticJsonDocument<2048> doc;
int dayIndex = 0;
unsigned long previousMillis = 0;
const long interval = 5000; // 每隔 5 秒切换一次显示

// 解析 JSON 并保存天气信息
bool parseWeather(const String& payload) {
  DeserializationError error = deserializeJson(doc, payload); // 反序列化 JSON

  if (!error) {
    Serial.println("JSON 解析成功!");
    return true;
  } else {
    Serial.print("JSON 解析失败: ");
    Serial.println(error.c_str());
    return false;
  }
}

// 显示天气信息
void displayWeather(int index) {
  if (!doc["data"]["forecast"][index]) return; // 检查 JSON 数据是否存在

  char buffer[128];
  const char* high = doc["data"]["forecast"][index]["high"].as<const char*>();
  const char* low = doc["data"]["forecast"][index]["low"].as<const char*>();
  const char* ymd = doc["data"]["forecast"][index]["ymd"].as<const char*>();
  const char* week = doc["data"]["forecast"][index]["week"].as<const char*>();
  const char* type = doc["data"]["forecast"][index]["type"].as<const char*>();
  const char* notice = doc["data"]["forecast"][index]["notice"].as<const char*>();

  u8g2.clearBuffer();  // 先清空缓冲区

  // 将日期和星期显示在一行中
  snprintf(buffer, sizeof(buffer), "%s %s", ymd, week);
  OLED_Showchin(0, 15, buffer, 2); // 调整文本大小为 1

  // 显示高温和低温在一行中
  snprintf(buffer, sizeof(buffer), "%s %s", high, low);
  OLED_Showchin(0, 35, buffer, 2); // 调整文本大小为 1

  // 显示天气类型
  snprintf(buffer, sizeof(buffer), "%s", type);
  OLED_Showchin(0, 55, buffer, 3); // 调整文本大小为 1

  // 显示提示信息
  // snprintf(buffer, sizeof(buffer), "%s", notice);
  // OLED_Showchin(0, 55, buffer, 1); // 调整文本大小为 1
  
  

  u8g2.sendBuffer(); // 发送缓冲区内容到显示屏
}

// 打印输出到屏幕（支持中文和设置字体大小）
void OLED_Showchin(uint8_t x, uint8_t y, const char* string, uint8_t textSize) {
  u8g2.setCursor(x, y);  // 设置显示坐标
  switch (textSize) {
    case 1:
      u8g2.setFont(u8g2_font_wqy12_t_gb2312b); // 设置最小字体
      break;
    case 2:
      u8g2.setFont(u8g2_font_wqy13_t_gb2312b); // 设置大字体
      break;
    case 3:
      u8g2.setFont(u8g2_font_wqy15_t_gb2312b); // 设置最大字体
      break;
  }
  u8g2.print(string); // 指定缓存区需要打印的字符串
}

void setup() {
  Serial.begin(115200);
  delay(1000);

  u8g2.begin(); // 初始化 U8g2
  u8g2.enableUTF8Print(); // 允许 UTF8

  connectToWiFi(); // 连接 Wi-Fi

  if (WiFi.status() == WL_CONNECTED) {
    String payload = httpRequest(url); // 发起 HTTP 请求
    if (!payload.isEmpty()) {
      if (parseWeather(payload)) { // 解析天气数据
        displayWeather(dayIndex); // 显示初始天气数据
      }
    }
  } else {
    Serial.println("无法连接到 Wi-Fi");
  }
}

void loop() {
  unsigned long currentMillis = millis();

  if (currentMillis - previousMillis >= interval) {
    previousMillis = currentMillis;

    dayIndex = (dayIndex + 1) % 4; // 切换到下一天的数据
    displayWeather(dayIndex); // 显示天气信息
  }

  // 检查WiFi连接状态，如果断开则重新连接
  if (WiFi.status() != WL_CONNECTED) {
    connectToWiFi();
  }
}

img

posted @   阿珏酱  阅读(112)  评论(0)  编辑  收藏  举报
相关博文：
· ESP8266串口WiFi模块 - WiFi杀手
· emlog新浪上传插件+接口 V1.1
· ESP8266 开发板网络时钟和天气 OLED 显示
· ESP8266点亮nokia5110，打造自己的小电视
· 基于ESP8266网络天气时钟的OLED显示
阅读排行：
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 单线程的Redis速度为什么快？
点击右上角即可分享
微信分享提示
AI FOR CODE 大赛
目录
✕