用掌控板OLED打造智能桌面天气站从硬件连接到数据可视化全解析清晨醒来你是否希望桌面上有个精致的小设备一眼就能看到当天的天气状况利用掌控板和OLED显示屏我们可以轻松实现这个想法。本文将带你从零开始打造一个既能展示实时天气数据又充满科技感的桌面天气站。不同于简单的硬件连接教程我们会深入探讨如何优雅地处理网络请求、解析JSON数据并在有限的OLED屏幕上实现最佳的可视化效果。1. 硬件准备与环境搭建1.1 掌控板与OLED显示屏选型掌控板作为一款集成了ESP32的开发板其优势在于内置Wi-Fi功能这为我们的天气站项目提供了关键的网络连接能力。市面上常见的OLED显示屏主要有两种驱动芯片型号分辨率接口类型特点SSD1306128×64I2C/SPI成本低兼容性好SH1106132×64I2C显示区域稍大对比度更高对于本项目我们选择SH1106驱动的0.96英寸OLED屏其132×64的分辨率能提供更好的显示效果。接线时需要注意SDA引脚连接掌控板的GPIO23SCL引脚连接掌控板的GPIO22VCC接3.3V电源GND接地1.2 Arduino IDE环境配置在开始编码前需要完成以下准备工作安装Arduino IDE建议版本1.8.x或更高添加ESP32开发板支持打开首选项在附加开发板管理器网址中添加https://dl.espressif.com/dl/package_esp32_index.json通过开发板管理器安装esp32平台安装必要的库SH1106Wire库用于OLED驱动ArduinoJson库用于解析天气API返回的数据WiFiClientSecure库用于HTTPS连接提示如果找不到SH1106Wire库可以直接从GitHub下载并手动安装到Arduino的libraries文件夹。2. OLED显示屏基础驱动2.1 初始化SH1106显示屏正确驱动OLED是项目的第一步。下面是一个基本的初始化示例#include Wire.h #include SH1106Wire.h SH1106Wire display(0x3c, 23, 22); // I2C地址0x3cSDA23SCL22 void setup() { display.init(); display.flipScreenVertically(); // 根据安装方向调整 display.setFont(ArialMT_Plain_16); // 设置默认字体 } void loop() { display.clear(); display.drawString(0, 0, Weather Station); display.drawString(0, 16, Initializing...); display.display(); delay(2000); }这段代码完成了以下功能包含必要的头文件创建SH1106Wire对象并指定引脚在setup()中初始化显示屏在loop()中显示简单文本2.2 优化显示效果为了提升用户体验我们可以添加一些视觉效果void showSplashScreen() { display.clear(); // 绘制边框 display.drawRect(0, 0, 132, 64); // 显示项目名称带滚动效果 for (int i -50; i 20; i) { display.clear(); display.drawRect(0, 0, 132, 64); display.drawString(i, 20, 智能天气站); display.display(); delay(30); } // 显示版本信息 display.drawString(20, 40, v1.0); display.display(); delay(2000); }3. 网络连接与天气API集成3.1 连接Wi-Fi网络掌控板的ESP32芯片内置Wi-Fi功能我们可以利用它连接到互联网获取天气数据#include WiFi.h const char* ssid 你的WiFi名称; const char* password 你的WiFi密码; void connectToWiFi() { display.clear(); display.drawString(0, 0, 连接Wi-Fi...); display.display(); WiFi.begin(ssid, password); int attempts 0; while (WiFi.status() ! WL_CONNECTED attempts 20) { delay(500); display.drawString(0, 16, String(尝试 ) (attempts/2) ...); display.display(); attempts; } if (WiFi.status() WL_CONNECTED) { display.drawString(0, 32, 连接成功!); display.drawString(0, 48, WiFi.localIP().toString()); } else { display.drawString(0, 32, 连接失败!); } display.display(); delay(2000); }3.2 获取天气数据我们可以使用免费的天气API服务如OpenWeatherMap。首先需要注册获取API Key然后通过HTTP请求获取数据#include HTTPClient.h #include ArduinoJson.h const String apiKey 你的API密钥; const String city 北京; void fetchWeatherData() { HTTPClient http; String url http://api.openweathermap.org/data/2.5/weather?q city appid apiKey unitsmetric; http.begin(url); int httpCode http.GET(); if (httpCode HTTP_CODE_OK) { String payload http.getString(); parseWeatherData(payload); } else { display.clear(); display.drawString(0, 0, 获取天气失败); display.drawString(0, 16, 错误码: String(httpCode)); display.display(); } http.end(); } void parseWeatherData(String json) { DynamicJsonDocument doc(1024); deserializeJson(doc, json); float temp doc[main][temp]; float humidity doc[main][humidity]; String weather doc[weather][0][main]; displayWeather(temp, humidity, weather); }4. 数据可视化与界面设计4.1 设计天气显示界面在有限的OLED屏幕上我们需要精心设计信息布局void displayWeather(float temp, float humidity, String weather) { display.clear(); // 顶部状态栏 display.drawHorizontalLine(0, 10, 132); display.drawString(0, 0, city); // 主天气信息 display.setFont(ArialMT_Plain_24); display.drawString(0, 15, String(temp, 1) °C); display.setFont(ArialMT_Plain_16); display.drawString(0, 45, 湿度: String(humidity) %); // 天气图标 if (weather Clear) { drawSun(100, 20); } else if (weather Clouds) { drawCloud(100, 20); } else if (weather Rain) { drawRain(100, 20); } display.display(); } void drawSun(int x, int y) { display.drawCircle(x, y, 10); for (int i 0; i 360; i 45) { float rad i * PI / 180; display.drawLine(x, y, x 15 * sin(rad), y 15 * cos(rad)); } }4.2 添加动态效果为了让显示更加生动可以添加一些简单的动画void animateRain(int x, int y) { for (int i 0; i 5; i) { display.clear(); drawCloud(x, y); for (int j 0; j 8; j) { display.drawLine(x-10j*5, y15, x-10j*5, y15i*2); } display.display(); delay(200); } }5. 项目优化与扩展5.1 降低功耗策略作为桌面设备我们可以通过以下方式优化功耗调整屏幕刷新率从每秒1次降到每10秒1次在不活跃时段降低屏幕亮度使用深度睡眠模式需要硬件支持void setDisplayBrightness(int level) { // level从0到255 Wire.beginTransmission(0x3C); Wire.write(0x81); // 设置对比度命令 Wire.write(level); Wire.endTransmission(); }5.2 多城市支持通过按钮或旋转编码器可以实现切换不同城市的功能#include Button.h Button nextBtn(0); // 假设按钮接在GPIO0 String cities[] {北京, 上海, 广州}; int currentCity 0; void checkButton() { if (nextBtn.pressed()) { currentCity (currentCity 1) % 3; fetchWeatherData(); } }5.3 数据持久化与历史记录添加RTC模块或利用ESP32的RTC内存可以记录天气变化趋势struct WeatherRecord { float temp; float humidity; time_t timestamp; }; WeatherRecord history[24]; // 存储24小时数据 int recordIndex 0; void saveWeatherData(float temp, float humidity) { history[recordIndex] {temp, humidity, time(nullptr)}; recordIndex (recordIndex 1) % 24; } void displayHistory() { display.clear(); display.drawString(0, 0, 温度趋势); float minTemp 100, maxTemp -100; for (int i 0; i 24; i) { if (history[i].temp minTemp) minTemp history[i].temp; if (history[i].temp maxTemp) maxTemp history[i].temp; } float range maxTemp - minTemp; if (range 0) range 1; for (int i 0; i 24; i) { int x i * 5; int h map(history[i].temp, minTemp, maxTemp, 5, 50); display.drawVerticalLine(x, 60 - h, h); } display.display(); }6. 外壳设计与最终组装6.1 3D打印外壳设计使用3D建模软件设计一个简洁的外壳考虑以下因素OLED显示屏的开口位置按钮或旋钮的安装散热孔设计电源接口位置6.2 电源解决方案几种可行的供电方案比较方案优点缺点USB供电稳定易于实现需要连接电源适配器锂电池便携可移动需要充电管理干电池更换方便续航时间有限对于桌面使用推荐使用USB供电既稳定又方便。如果追求无线化可以选用18650锂电池配合充电模块。6.3 最终代码整合将所有功能整合到一个完整的项目中#include Wire.h #include SH1106Wire.h #include WiFi.h #include HTTPClient.h #include ArduinoJson.h #include Button.h // 硬件配置 SH1106Wire display(0x3c, 23, 22); Button nextBtn(0); // WiFi配置 const char* ssid yourSSID; const char* password yourPassword; // 天气API配置 const String apiKey yourAPIKey; String cities[] {北京, 上海, 广州}; int currentCity 0; void setup() { Serial.begin(115200); display.init(); display.flipScreenVertically(); connectToWiFi(); showSplashScreen(); } void loop() { static unsigned long lastUpdate 0; checkButton(); if (millis() - lastUpdate 600000) { // 每10分钟更新一次 fetchWeatherData(); lastUpdate millis(); } // 其他循环任务... delay(100); }在实际使用中我发现天气API的免费套餐通常有调用频率限制因此将更新间隔设置为10分钟是比较合理的选择。另外为提升用户体验可以添加一个手动刷新按钮在需要时立即获取最新天气数据。
用掌控板+OLED做个桌面天气站吧！从硬件连接到Arduino代码全流程
发布时间：2026/6/12 21:19:56
用掌控板OLED打造智能桌面天气站从硬件连接到数据可视化全解析清晨醒来你是否希望桌面上有个精致的小设备一眼就能看到当天的天气状况利用掌控板和OLED显示屏我们可以轻松实现这个想法。本文将带你从零开始打造一个既能展示实时天气数据又充满科技感的桌面天气站。不同于简单的硬件连接教程我们会深入探讨如何优雅地处理网络请求、解析JSON数据并在有限的OLED屏幕上实现最佳的可视化效果。1. 硬件准备与环境搭建1.1 掌控板与OLED显示屏选型掌控板作为一款集成了ESP32的开发板其优势在于内置Wi-Fi功能这为我们的天气站项目提供了关键的网络连接能力。市面上常见的OLED显示屏主要有两种驱动芯片型号分辨率接口类型特点SSD1306128×64I2C/SPI成本低兼容性好SH1106132×64I2C显示区域稍大对比度更高对于本项目我们选择SH1106驱动的0.96英寸OLED屏其132×64的分辨率能提供更好的显示效果。接线时需要注意SDA引脚连接掌控板的GPIO23SCL引脚连接掌控板的GPIO22VCC接3.3V电源GND接地1.2 Arduino IDE环境配置在开始编码前需要完成以下准备工作安装Arduino IDE建议版本1.8.x或更高添加ESP32开发板支持打开首选项在附加开发板管理器网址中添加https://dl.espressif.com/dl/package_esp32_index.json通过开发板管理器安装esp32平台安装必要的库SH1106Wire库用于OLED驱动ArduinoJson库用于解析天气API返回的数据WiFiClientSecure库用于HTTPS连接提示如果找不到SH1106Wire库可以直接从GitHub下载并手动安装到Arduino的libraries文件夹。2. OLED显示屏基础驱动2.1 初始化SH1106显示屏正确驱动OLED是项目的第一步。下面是一个基本的初始化示例#include Wire.h #include SH1106Wire.h SH1106Wire display(0x3c, 23, 22); // I2C地址0x3cSDA23SCL22 void setup() { display.init(); display.flipScreenVertically(); // 根据安装方向调整 display.setFont(ArialMT_Plain_16); // 设置默认字体 } void loop() { display.clear(); display.drawString(0, 0, Weather Station); display.drawString(0, 16, Initializing...); display.display(); delay(2000); }这段代码完成了以下功能包含必要的头文件创建SH1106Wire对象并指定引脚在setup()中初始化显示屏在loop()中显示简单文本2.2 优化显示效果为了提升用户体验我们可以添加一些视觉效果void showSplashScreen() { display.clear(); // 绘制边框 display.drawRect(0, 0, 132, 64); // 显示项目名称带滚动效果 for (int i -50; i 20; i) { display.clear(); display.drawRect(0, 0, 132, 64); display.drawString(i, 20, 智能天气站); display.display(); delay(30); } // 显示版本信息 display.drawString(20, 40, v1.0); display.display(); delay(2000); }3. 网络连接与天气API集成3.1 连接Wi-Fi网络掌控板的ESP32芯片内置Wi-Fi功能我们可以利用它连接到互联网获取天气数据#include WiFi.h const char* ssid 你的WiFi名称; const char* password 你的WiFi密码; void connectToWiFi() { display.clear(); display.drawString(0, 0, 连接Wi-Fi...); display.display(); WiFi.begin(ssid, password); int attempts 0; while (WiFi.status() ! WL_CONNECTED attempts 20) { delay(500); display.drawString(0, 16, String(尝试 ) (attempts/2) ...); display.display(); attempts; } if (WiFi.status() WL_CONNECTED) { display.drawString(0, 32, 连接成功!); display.drawString(0, 48, WiFi.localIP().toString()); } else { display.drawString(0, 32, 连接失败!); } display.display(); delay(2000); }3.2 获取天气数据我们可以使用免费的天气API服务如OpenWeatherMap。首先需要注册获取API Key然后通过HTTP请求获取数据#include HTTPClient.h #include ArduinoJson.h const String apiKey 你的API密钥; const String city 北京; void fetchWeatherData() { HTTPClient http; String url http://api.openweathermap.org/data/2.5/weather?q city appid apiKey unitsmetric; http.begin(url); int httpCode http.GET(); if (httpCode HTTP_CODE_OK) { String payload http.getString(); parseWeatherData(payload); } else { display.clear(); display.drawString(0, 0, 获取天气失败); display.drawString(0, 16, 错误码: String(httpCode)); display.display(); } http.end(); } void parseWeatherData(String json) { DynamicJsonDocument doc(1024); deserializeJson(doc, json); float temp doc[main][temp]; float humidity doc[main][humidity]; String weather doc[weather][0][main]; displayWeather(temp, humidity, weather); }4. 数据可视化与界面设计4.1 设计天气显示界面在有限的OLED屏幕上我们需要精心设计信息布局void displayWeather(float temp, float humidity, String weather) { display.clear(); // 顶部状态栏 display.drawHorizontalLine(0, 10, 132); display.drawString(0, 0, city); // 主天气信息 display.setFont(ArialMT_Plain_24); display.drawString(0, 15, String(temp, 1) °C); display.setFont(ArialMT_Plain_16); display.drawString(0, 45, 湿度: String(humidity) %); // 天气图标 if (weather Clear) { drawSun(100, 20); } else if (weather Clouds) { drawCloud(100, 20); } else if (weather Rain) { drawRain(100, 20); } display.display(); } void drawSun(int x, int y) { display.drawCircle(x, y, 10); for (int i 0; i 360; i 45) { float rad i * PI / 180; display.drawLine(x, y, x 15 * sin(rad), y 15 * cos(rad)); } }4.2 添加动态效果为了让显示更加生动可以添加一些简单的动画void animateRain(int x, int y) { for (int i 0; i 5; i) { display.clear(); drawCloud(x, y); for (int j 0; j 8; j) { display.drawLine(x-10j*5, y15, x-10j*5, y15i*2); } display.display(); delay(200); } }5. 项目优化与扩展5.1 降低功耗策略作为桌面设备我们可以通过以下方式优化功耗调整屏幕刷新率从每秒1次降到每10秒1次在不活跃时段降低屏幕亮度使用深度睡眠模式需要硬件支持void setDisplayBrightness(int level) { // level从0到255 Wire.beginTransmission(0x3C); Wire.write(0x81); // 设置对比度命令 Wire.write(level); Wire.endTransmission(); }5.2 多城市支持通过按钮或旋转编码器可以实现切换不同城市的功能#include Button.h Button nextBtn(0); // 假设按钮接在GPIO0 String cities[] {北京, 上海, 广州}; int currentCity 0; void checkButton() { if (nextBtn.pressed()) { currentCity (currentCity 1) % 3; fetchWeatherData(); } }5.3 数据持久化与历史记录添加RTC模块或利用ESP32的RTC内存可以记录天气变化趋势struct WeatherRecord { float temp; float humidity; time_t timestamp; }; WeatherRecord history[24]; // 存储24小时数据 int recordIndex 0; void saveWeatherData(float temp, float humidity) { history[recordIndex] {temp, humidity, time(nullptr)}; recordIndex (recordIndex 1) % 24; } void displayHistory() { display.clear(); display.drawString(0, 0, 温度趋势); float minTemp 100, maxTemp -100; for (int i 0; i 24; i) { if (history[i].temp minTemp) minTemp history[i].temp; if (history[i].temp maxTemp) maxTemp history[i].temp; } float range maxTemp - minTemp; if (range 0) range 1; for (int i 0; i 24; i) { int x i * 5; int h map(history[i].temp, minTemp, maxTemp, 5, 50); display.drawVerticalLine(x, 60 - h, h); } display.display(); }6. 外壳设计与最终组装6.1 3D打印外壳设计使用3D建模软件设计一个简洁的外壳考虑以下因素OLED显示屏的开口位置按钮或旋钮的安装散热孔设计电源接口位置6.2 电源解决方案几种可行的供电方案比较方案优点缺点USB供电稳定易于实现需要连接电源适配器锂电池便携可移动需要充电管理干电池更换方便续航时间有限对于桌面使用推荐使用USB供电既稳定又方便。如果追求无线化可以选用18650锂电池配合充电模块。6.3 最终代码整合将所有功能整合到一个完整的项目中#include Wire.h #include SH1106Wire.h #include WiFi.h #include HTTPClient.h #include ArduinoJson.h #include Button.h // 硬件配置 SH1106Wire display(0x3c, 23, 22); Button nextBtn(0); // WiFi配置 const char* ssid yourSSID; const char* password yourPassword; // 天气API配置 const String apiKey yourAPIKey; String cities[] {北京, 上海, 广州}; int currentCity 0; void setup() { Serial.begin(115200); display.init(); display.flipScreenVertically(); connectToWiFi(); showSplashScreen(); } void loop() { static unsigned long lastUpdate 0; checkButton(); if (millis() - lastUpdate 600000) { // 每10分钟更新一次 fetchWeatherData(); lastUpdate millis(); } // 其他循环任务... delay(100); }在实际使用中我发现天气API的免费套餐通常有调用频率限制因此将更新间隔设置为10分钟是比较合理的选择。另外为提升用户体验可以添加一个手动刷新按钮在需要时立即获取最新天气数据。
)
