零基础入门学用物联网 – MQTT应用篇 – 1-1-3 天气时钟使用说明

位置导航: 首页 / 零基础入门学用物联网总目录 / MQTT应用篇目录

步骤0. 预备知识

由于本项目制作和使用需要具备ESP8266物联网开发的基础知识,我们强烈建议您先学习以下教程,这样您才可以完全掌握如何使用本项目源码实现项目搭建。

零基础入门学用物联网基础知识篇

以上教程中的以下两几部分内容对于本项目的使用尤为重要,请务必掌握。

ESP8266 NodeMCU 闪存文件系统(SPIFFS)
WiFiManager使用方法
ESP8266心知天气使用教程
ESP8266 哔哩哔哩 API 使用教程

如果您希望使用手机控制本项目设备,那么推荐您学习掌握以下教程,会对您掌握本项目的MQTT物联网协议控制有很大的帮助。

零基础入门学用物联网MQTT篇

步骤1. 资源下载安装

请点击以下链接前往本项目资源下载页面将主控程序和下载到您的电脑中。

http://www.taichi-maker.com/homepage/esp8266-nodemcu-iot/iot-tuttorial/mqtt-application/1-1-0-weather-clock-resources/

请注意,本项目的主控程序需要一系列第三方库。在编译本项目的主控程序以前,需要先讲第三方库安装到您的Arduino IDE中。

您同样可以通过以上链接中的资源下载页面找到第三方库的下载链接。


步骤2. 代码修改设置

注意:系统搭建好以后,请您不要马上上传主程序。因为本项目源代码还需要进行一些基本设置,才能让系统为您提供定制化服务。

2.1 添加心知天气信息

本物联网时钟采用心知天气API获取天气信息。

假如您不太熟悉心知天气,没关系。针对如何使用ESP8266通过心知天气API获取天气信息这一操作,我们制作了免费教程资料供您查阅,请参考本网站中的这个链接:http://www.taichi-maker.com/homepage/iot-development/iot-platform/seniverse/

请将您的心知天气私钥以及需要获取的城市代码添加到settings.h中的以下代码部分。

比如我的心知天气私钥是“ferv32ee5rwr32”,而我想要让系统显示北京的天气信息。那么我的代码将修改为以下内容:

2.2 设置哔哩哔哩网站信息

为了让系统可以显示up主的粉丝信息以及视频的播放量。您需要把up主的id号以及视频的bv号填入settings.h的相应部分。比如太极创客up主id是103589285。希望显示播放次数的视频bv号是BV1L7411c7jw。那么我将这些信息填入settings.h中的响应代码修改为以下这样就好了。

假如您不确定如何获取以上这些信息,请点击以下链接进入我们制作的教程页面。

ESP8266 哔哩哔哩 API 使用教程

2.3 修改时区

系统默认的时间是北京时间。如果您所在的位置需要调整时区,那么可以通过调整settings.h中的以下代码来得以实现。

2.4 设置MQTT服务

如果希望使用然也物联手机应用来对系统进行设置,那么请将代码中的以下内容解除注释。

变成下面这样


步骤3. 上传主控程序

完成了以上程序修改以后,您就可以使用Arduino IDE将修改后的主控程序上传到Arduino IDE中了。


步骤4. 上传背景图片

主控程序上传完成后,您还需要通过Arduino IDE的ESP8266-Sketch-Data-Upload选项将背景图片上传到ESP8266的SPIFFS中(如下图所示)。注意,假如您的Arduino IDE没有此选项,请点击以下链接进入我们制作的教程页面了解详细操作方法。

ESP8266 NodeMCU 闪存文件系统(SPIFFS)

ESP8266-Sketch-Data-Upload
ESP8266-Sketch-Data-Upload

步骤5. 设置WiFi连接

设备使用WiFiManager设置设备的WiFi连接。如果您还不清楚WiFiManager库是如何工作的,请您前往以下链接了解如何使用WiFimanager库来实现ESP8266的WiFi连接。

WiFiManager使用方法

假如您的设备已经成功设置好WiFi连接了,那么您的设备就可以开始为您工作了。

哔哩哔哩天气时钟彩屏版
哔哩哔哩天气时钟彩屏版

常见问题

1. 如下图所示如果您的屏幕可以正常显示测试画面,但是上传了主控程序以后显示白屏。那么可能您的设备没有成功连接WiFi。

ESP8266未成功连接WiFi导致TFT白屏
ESP8266未成功连接WiFi导致TFT白屏

2. 无法正常显示天气信息。
这可能是没有成功设置心知天气的原因。如前所述,您需要将心知天气的密钥等信息正确输入程序才能让天气时钟正确显示天气信息。

未正确设置哔哩哔哩信息
未正确设置哔哩哔哩信息

假如您不太熟悉心知天气,没关系。针对如何使用ESP8266通过心知天气API获取天气信息这一操作,我们制作了免费教程资料供您查阅,请参考本网站中的这个链接:http://www.taichi-maker.com/homepage/iot-development/iot-platform/seniverse/

3. 无法正常显示背景图片

这说明您的背景图片可能没有成功上传到ESP8266的SPIFFS中。您需要确保图片正确上传方能让天气时钟正确显示图片信息。关于SPIFFS的详细操作方法,请参考以下连接。

http://www.taichi-maker.com/homepage/esp8266-nodemcu-iot/iot-c/spiffs/

4. 无法正常显示bilibili信息

这可能是没有正确设置bilibili用户的BV号或视频号造成的。假如您不确定如何获取以上这些信息,请点击以下链接进入我们制作的教程页面。

ESP8266 哔哩哔哩 API 使用教程