手把手教你制做ESP8266物联网创意点阵时钟，女友看了都想要！

本文做者：默

前段时间我在网上看到了一款颇有意思的点阵时钟，它能够播报天气，查看 YouTube 的订阅数，还有好看的时间动画。你能够把它当作普通闹钟，也能够链接蓝牙把它当作音箱来使用。它的许多功能都颇有意思，其中我最喜欢的是它的时间显示动画效果，然而它一千多的价格让我望而却步，放弃了入手的打算。不过既然身为创客，我为何不制做一个属于本身独一无二的创意网络时钟呢？

说干就干，因而我就作了一个创意点阵时钟，先来看一下演示视频吧（点击连接跳转B站查看演示视频）：

https://www.bilibili.com/video/BV12v411z7sJ/

预期目标及功能

• 网络自动校准时间
• 无网络链接时及时反馈
• 一键配置时钟网络
• 自定义精美时间显示字体
• 时间显示动画
• 亮度自动调节
• 时段提示

材料清单

• ESP8266 Wemos mini 开发板 1 块；
• 杜邦线若干；
• 4 合 1 点阵模块；
• 激光切割外壳；
• 栎木滑面仿木纹贴纸。

电路原理图

电路链接关系以下图所示：

结构拼装

将 USB 数据线按下图所示方向由外壳背部插入开发板，使用热熔胶将开发板固定到木板上，保持稳定直到热熔胶凝固，主要热熔胶不要碰到数据线。

将外壳前部与点阵屏按下图所示方式放置入面板凹槽，使用热熔胶固定点阵，保持稳定直到热熔胶凝固。

而后使用杜邦线按原理图正确链接电路，并拼接外壳底部与左右两侧，最后将外壳顶部进行封顶。

剪切合适大小的栎木滑面仿木纹贴纸，粘贴至外壳表面。注意留出点阵位置，能够适当使用刻刀雕刻出 USB 下载接口，以便进行供电及程序下载或更新。

程序设计

下面开始详细讲解程序设计过程。

开发环境

咱们使用 Aduino 软件来编写本项目的程序，开发板选择 ESP8266 类型。至于如何在 Arduino 中配置 ESP8266 的开发环境，不在本文的介绍范围，请自行查阅相关资料。

程序思路

为了达到咱们的预期目标，咱们先绘制功能的思惟导图，再根据思惟导图逐步实现创意点阵时钟的程序设计。

下面咱们将具体讨论创意点阵时钟各个子功能是如何实现的。

获取网络时间

做为一个时钟，最重要的功能固然是显示时间啦。那么该如何从网络获取时间呢？

下面的例子演示了如何获取网络时间并将时间保存在变量中，其中 ESP8266WiFi.h 库的功能是链接网络，NtpClientLib.h 库的功能是获取 NTP 服务器的网络时间，SimpleTimer.h 库是用来设置定时器每秒刷新一次时间。该例子并无串口打印当前时间，你能够添加串口打印相关代码用来调试程序。

#include <ESP8266WiFi.h>
#include <NtpClientLib.h>
#include <TimeLib.h>
#include <SimpleTimer.h>

SimpleTimer timer;

const PROGMEM char *ntpServer = "ntp1.aliyun.com";
int8_t timeZone = 8;

volatile int hour_variable;
volatile int minute_variable;
volatile int second_variable;

void Simple_timer() {
  hour_variable = NTP.getTimeHour24();
  minute_variable = NTP.getTimeMinute();
  second_variable = NTP.getTimeSecond();
}

void setup() {
  Serial.begin(9600);
  WiFi.begin("ssid", "password");
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
    
  Serial.println("Local IP:");
  Serial.print(WiFi.localIP());
    
  NTP.setInterval(600);
  NTP.setNTPTimeout(1500);
  NTP.begin(ntpServer, timeZone, false);
    
  timer.setInterval(1000L, Simple_timer);
}

void loop() {
  timer.run();
}

点阵屏显示库：MD_Parola

MD_Parola 是 MAX7219 点阵屏的模块化滚动文本显示库，其主要特色以下：

• 支持点阵屏显示文本时左对齐、右对齐或居中对齐；
• 具备文字滚动，进入和退出效果；
• 可以控制显示参数和动画速度；
• 支持硬件 SPI 接口；
• 能够在点阵屏虚拟多个显示区域；
• 用户定义的字体和/或单个字符替换；
• 支持双高显示；
• 支持在混合显示文本和图形。

下面的例子简单演示了如何利用 MD_Parola 滚动显示字符串，其中 MD_Parola 对象有 4 个参数：分别为 SPI 管脚 DIN、CLK、CS 及点阵数目。下面咱们所作的创意点阵时钟的显示功能均由此库开发。

#include <MD_Parola.h>
#include <MD_MAX72xx.h>
#include <SPI.h>

MD_Parola P = MD_Parola(13,14,12,4);  //DIN(D7) CLK(D5) CS(D6)
MD_MAX72XX mx = MD_MAX72XX(13,14,12,4);  //DIN(D7) CLK(D5) CS(D6)

void setup() {
  mx.begin();
  P.begin();
}

void loop() {
  if (P.displayAnimate()) {
    P.displayScroll("Mixly", PA_LEFT, PA_SCROLL_LEFT, 50);
  }
}

点阵位图取模

要在点阵屏中显示图片，首先须要设计点阵图案（位图），而后对图案进行取模操做。点阵取模使用 PCtoLCD2002 取模软件，取模设置以下：

取模方式为阴码、逆向、逐列式，输出方式为 16 进制，注意格式设置为 C51 格式，其他参数按照默认取模方式设置便可。

位图显示函数：display_bitmap()

这里咱们取模的数据格式为 uint8_t 数组，咱们有自定义字体 0~9 和时间分隔符“：”，再加上一些自定义的图像，这就致使咱们有大量的位图。为了方便的管理这些位图，咱们使用指针数组 bitmap_data[] 去管理咱们的位图。为了显示方便，咱们定义了函数 display_bitmap()，该函数须要 3 个参数，分别为显示横坐标 abscissa、位图宽度 width 及指针数组 bitmap_data[] 中的位置 bitmap_number。须要注意的是咱们这里并无指定位图的高度，由于咱们用到的 MAX7219 点阵屏分辨率为 8×32，因此这里咱们默认位图高度为 8。

#include <MD_Parola.h>
#include <MD_MAX72xx.h>
#include <SPI.h>

MD_Parola P = MD_Parola(13,14,12,4); //DIN(D7) CLK(D5) CS(D6) 
MD_MAX72XX mx = MD_MAX72XX(13,14,12,4);

uint8_t bitmap_data1[] = {0x3e, 0x2a, 0x3e};
uint8_t bitmap_data2[] = {0x2e, 0x2a, 0x3e};

uint8_t * bitmap_data[] = {
  bitmap_data1
  bitmap_data2
  ……
};

void display_bitmap(int abscissa, int width, int bitmap_number) {
  mx.control(MD_MAX72XX::UPDATE, MD_MAX72XX::OFF);
  mx.setBuffer(abscissa, width, bitmap_data[bitmap_number]);
  mx.control(MD_MAX72XX::UPDATE, MD_MAX72XX::ON);
}

时间显示：时、分

MD_Parola 库中，因为字体过大并且不美观，致使显示的时间过长，因此咱们须要自定义字体。自定义字体以下图所示，值得注意的是 0~9 的位图宽度是 3，分割符“：”的宽度是 1。

自定义字体取模数据以下所示：

uint8_t Small_font_0[] = {0x3e, 0x22, 0x3e};
uint8_t Small_font_1[] = {0x24, 0x3e, 0x20};
uint8_t Small_font_2[] = {0x3a, 0x2a, 0x2e};
uint8_t Small_font_3[] = {0x2a, 0x2a, 0x3e};
uint8_t Small_font_4[] = {0x0e, 0x08, 0x3e};
uint8_t Small_font_5[] = {0x2e, 0x2a, 0x3a};
uint8_t Small_font_6[] = {0x3e, 0x2a, 0x3a};
uint8_t Small_font_7[] = {0x02, 0x02, 0x3e};
uint8_t Small_font_8[] = {0x3e, 0x2a, 0x3e};
uint8_t Small_font_9[] = {0x2e, 0x2a, 0x3e};
uint8_t Small_font_10[] = {0x14};

下面咱们分析如何显示时间，这里咱们只显示小时和分钟。

这里咱们有一个小技巧，咱们能够把 0~9 的位图放到指针数组 bitmap_data[] 的 0~9 的位置上，时间分隔符“：”放置在数组序号 10 的位置上。因为前面咱们定义了一个显示位图的函数 display_bitmap()，这样咱们不须要经过任何映射就能够显示数字了，例如 display_bitmap(22, 3, 0) 就显示 0；display_bitmap(22, 3, 1) 就显示 1，这样是否是很方便呢？

为了分别获取小时和分钟的十位及个位，咱们须要对其进行除法和取余操做，例如对小时 9 除 10 获得十位 0（为何不是0.9？这是由于咱们时间变量定义为整数，一个整数除以另外一个整数结果只能为整数。仍是不懂？那你就该补一下C语言基础知识了。），9 除 10 取余获得个位 9。由分析咱们在合适的位置显示时间获得了下面的时间显示函数。

最后，为了显示更加美观，若是小时或分钟只有一位数，咱们就须要进行补零操做，将 1:1 补零变成 01:01。显示时间的代码以下：

display_bitmap(22, 3, hour_variable / 10);
display_bitmap(18, 3, hour_variable % 10);
display_bitmap(14, 1, 10);
display_bitmap(12, 3, minute_variable / 10);
display_bitmap(8, 3, minute_variable % 10);

时间显示：秒

时间在流逝，可是咱们上面并无显示秒钟，那咱们怎样感知时间的进度呢？为了解决这个问题，咱们定义了下面的一系列位图，注意这里定义位图的宽度是 5 不是 8，咱们每隔一秒切换一次下面的位图，看起来是否是像秒针在走动呢？

使用取模软件分别对上述点阵图案取模：

uint8_t clock_0[] = {0x1c, 0x22, 0x2e, 0x22, 0x1c};
uint8_t clock_1[] = {0x1c, 0x22, 0x2a, 0x26, 0x1c};
uint8_t clock_2[] = {0x1c, 0x22, 0x2a, 0x2a, 0x1c};
uint8_t clock_3[] = {0x1c, 0x22, 0x2a, 0x32, 0x1c};
uint8_t clock_4[] = {0x1c, 0x22, 0x3a, 0x22, 0x1c};
uint8_t clock_5[] = {0x1c, 0x32, 0x2a, 0x22, 0x1c};
uint8_t clock_6[] = {0x1c, 0x2a, 0x2a, 0x22, 0x1c};
uint8_t clock_7[] = {0x1c, 0x26, 0x2a, 0x22, 0x1c};

前面咱们指针数组 bitmap_data[] 的 0~10 位置都用来放置数字了，咱们这里有 8 幅位图，因此放入指针数组 bitmap_data[] 的 11~18 位置，咱们定义一个静态局部变量Clock_variable，设置其初始值为 11，每隔一秒 Clock_variable 变量的值增长 1，并显示对应序号的位图，当 Clock_variable 的值为 19 时，将它从新赋值为 11，这样咱们就实现了秒表动画的设计。程序以下：

static int Clock_variable = 11;

display_bitmap(4, 5, Clock_variable);

Clock_variable = Clock_variable + 1;

if (Clock_variable == 19) {
  Clock_variable = 11;
}

上面咱们设计了秒表动画，可是还有一个问题，因为点阵屏空间限制，咱们没办法用数字显示精确的秒数，那怎么办呢？咱们观察到，在点阵屏的底部还空了 2 个像素点的高度，因此咱们能够在最后一行经过点数显示精确到秒数。

如上图所示，最后一行前面有 5 个点，后面有 9 个点，所以秒数为 59 秒。显示秒数的代码以下：

if (second_variable / 10) {
  mx.drawLine(7, 22, 7, (23 - second_variable / 10), true);
}
if (second_variable % 10) {
  mx.drawLine(7, 14, 7, (15 - second_variable % 10), true);
}

其中 mx.drawLine() 为绘制线段的函数，它有 4个参数，分别为：线段起点横坐标、起点纵坐标、终点横坐标、终点纵坐标，以及显示状态（true 点亮线段；false 熄灭线段）。根据咱们使用的 4 和 1 点阵坐标定义，其中横坐标最大为 7，纵坐标最大为 31。

当秒数的个位为 0 的时候将线段清除，重复显示线段便可显示当前秒数了。这里我不对显示线段的位置、长度与秒数的关系进行分析，留给你们当作思考题活动一下大脑了。

时段图标显示

为了感知一天时间的变化，咱们但愿不一样时间段用不一样的图标进行提示。咱们定义了太阳和月亮两个图标，它们的宽度都是 8，样式以下图所示。

使用取模软件取模数据以下：

uint8_t sun[] = {0x24, 0x00, 0xbd, 0x3c, 0x3c, 0xbd, 0x00, 0x24};
uint8_t moon[] = {0x38, 0x7c, 0xe2, 0xc0, 0xc4, 0x4e, 0x24, 0x00};

继续将太阳和月亮的取模数据添加到指针数组 bitmap_data[] 的位置 19 和 20。这里咱们定义在 6 点到 18 点之间，在横坐标为 31 处显示太阳，其余时间显示月亮，程序以下：

if ((hour_variable >= 6) && (hour_variable <= 18)) {
  display_bitmap(31, 8, 19);
} else {
  display_bitmap(31, 8, 20);
}

一键配网：WiFiManager

若是咱们在程序里固定 WiFi 信息，那么当网络环境变化时，时钟将不可用，此时你须要从新修改网络信息并上传程序，这无疑是很麻烦的。为此咱们须要一种动态修改网络信息的办法，这里咱们使用了 WiFiManager 库，该库支持经过网页对 WiFi 链接进行配置。下面是一个网络配置的简单示例，该例子上传成功后，将启用一个名为 ESP8266 的 WiFi 热点，使用手机链接此热点便可按提示对网络进行配置。这里你也可使用其余热点名称，例如你的做品名称而不是 ESP8266。须要注意的是，ESP8266 仅支持 2.4G 频段的 WiFi 网络，不支持 5G 频段的 WiFi 网络。

#include <ESP8266WiFi.h>
#include <DNSServer.h>
#include <ESP8266WebServer.h>
#include <WiFiManager.h>

WiFiServer server(80);

void setup(){
 WiFiManager wifiManager;
 wifiManager.autoConnect("ESP8266");
 server.begin();
}

void loop(){

}

WiFi 链接反馈

当网络环境发生变化时，咱们可能须要对网络从新进行配置，为此咱们定义了下面的位图用于断网提示。该位图的宽度为 19，看上去像是 WiFi 被外星人劫持了，是否是很生动形象！

使用取模软件取模数据以下：

uint8_t wifi[] = {0x04, 0x06, 0x13, 0xDB, 0xDB, 0x13, 0x06, 0x04, 0x00, 0x70, 0x18, 0x7d, 0xb6, 0x3c, 0x3c, 0xb6, 0x7d, 0x18, 0x70};

这里咱们使用 !(WiFi.status() != WL_CONNECTED) 语句来判断网络链接是否断开。当 WiFi 链接成功时，!(WiFi.status() != WL_CONNECTED) 返回真，这是咱们能够同步时间；当 WiFi 断开时，!(WiFi.status() != WL_CONNECTED) 返回假，咱们在点阵屏上显示 WiFi 断开链接提示，而后使用配网函数对网络进行配置，配网成功后再次显示正常的时间便可。代码以下：

if (!(WiFi.status() != WL_CONNECTED)) {
  hour_variable = NTP.getTimeHour24();
  minute_variable = NTP.getTimeMinute();
  second_variable = NTP.getTimeSecond();
} else {
  mx.clear();
  display_bitmap(25, 19, 21);
  WiFiManager wifiManager;
  wifiManager.autoConnect("ESP8266");
  server.begin();
  mx.clear();
}

小狗动画设计

为了时钟富有动态感，咱们这里为时钟添加一个小狗的动画效果，该动画由两个宽度为 8 的动画帧构成，首先咱们先使用取模软件绘制出这两帧图像，再点击水平镜像按钮获得镜像后的图像，最后生成字模便可。

使用取模软件取模数据以下：

uint8_t PROGMEM dog[] = {0x8C, 0x4C, 0xFE, 0x30, 0xB0, 0x70, 0xF0, 0x08, 0x0C, 0x0C, 0xFE, 0x30, 0x30, 0x30, 0xF8, 0x00,};

下面的例子演示将点阵划分为两个区域，区域 0 和区域 1。P.setZone() 函数将点阵划分为不一样的显示区域，它有 3 个参数：分别为区域编号、起始点阵及终止点阵。P.begin() 指定区域数量，参数为空默认一个区域，这里咱们有两个显示区域，故参数为 2，其中点阵编号与区域的对应关系以下图所示：

P.setSpriteData() 函数为精灵动画的初始化函数，该函数接受 7 个参数：分别为初始化区域、动画开始精灵数据、动画开始精灵宽度、动画开始精灵帧数、动画结束精灵数据、动画结束精灵宽度、动画结束精灵帧数。

P.displayAnimate() 函数有两个做用，分别为反馈显示状态和动画执行函数。看成为反馈状态时，动画显示完成返回 1，未完成返回 0。看成为动画执行函数时，经过不断调用该函数实现动画的流畅运行，所以程序须要不断的调用 P.displayAnimate() 函数。

P.getZoneStatus() 函数做用相似 P.displayAnimate() 函数，不一样的是它仅返回区域的显示状态。

P.displayZoneText() 函数为字符串的动画显示函数，该函数接受 7 个参数，分别为：显示区域、显示字符串、对齐方式、动画速度、文本显示时间、动画进入效果、动画退出效果。下面的代码演示了如何在区域显示精灵动画。这里咱们显示字符串为空、显示时间为0，显示字符串为空保证了咱们仅有小狗动画没有文字，显示时间为 0 保证了小狗动画的连贯性。

void setup() {
  P.begin(2);
  mx.begin();
  P.setZone(0, 0, 2);
  P.setZone(1, 3, 3);
  P.setSpriteData(1, dog, 8, 2, dog, 8, 2);
}

void loop() {
  P.displayAnimate();
  if (P.getZoneStatus(1)) {
    P.displayZoneText(1, "", PA_CENTER, 100, 0, PA_SPRITE, PA_SPRITE);
  }
}

自动亮度调节

当咱们睡觉之后咱们是不会看时间的，此时下降点阵显示的亮度有助于节能环保，所以咱们须要根据时间段自动调节点阵显示的亮度。下面的代码在晚上 0~6 点亮度设置为 1，其余时间亮度设置为 10。P.setIntensity() 函数为区域亮度设置函数，其有两个参数，分别是：显示区域和亮度值，其中亮度值范围为 0~15。

if ((hour_variable >= 0) && (hour_variable < 6)) {
  P.setIntensity(0, 1);
  P.setIntensity(1, 1);
} else {
  P.setIntensity(0, 10);
  P.setIntensity(1, 10);
}

代码组合

最后，按照上述功能之间的逻辑关系，将代码组合在一块儿便可。因为篇幅限制，这里就不放完整的代码了。

使用说明

首先链接电源，时钟进行初始化，同时出现以下界面提示配网，此时开发板会自动开启名为 ESP8266 的无密码 WiFi 热点。

打开手机，链接这个网络，配网步骤以下图所示：

配网说明（以安卓手机为例）：

1. 打开手机设置选择 WiFi 设置打开 WiFi；
2. 链接时钟热点 ESP8266（热点名由程序设置，可更改成其余名称）；
3. 选择登陆进入网络配置页面；
4. 点击配置 WiFi 进入图示页面点击扫描，扫描附近热点；
5. 选择 WiFi 输入 WiFi 密码；
6. 点击保存等待配网成功。

效果展现