1 成品效果展示

B站视频：[开源]迷你像素灯，四种模式，多种风格～点亮你的桌面！网页控制～可自定义内容～

 

2 硬件方面

2.1 使用本项目硬件

硬件原理图与PCB图以及BOM见文章末尾，焊接完成效果如下图所示。

外壳3D打印模型在附件中，安装外壳后的效果如下所示。

 

2.2 使用开发板硬件

为了令像素灯实现更小尺寸，使用了更小尺寸的WS2812B-2020幻彩灯珠，也增加焊接难度。如不追求尺寸小巧，结构紧凑，也可直接esp8266开发板和8x8全彩像素屏进行硬件搭建。只需要用杜邦线连接以下3处：

ESP8266开发板	8x8 WS2812B像素屏
5V	VCC（V+）
GPIO4（D2）	IN
GND	GND（V-）

 

 

3 软件方面

3.1 开发工具

该项目使用Arduino进行开发，需要安装Arduino的ESP8266支持，如未安装，请自行查找相关资料进行安装。

 

3.2 Arduino 库

使用Arduino Library 管理工具安装下面五个依赖库：

ArduinoJson

FastLED

Time

WebSockets

WiFiManager

 

3.3 程序编译下载

1.下载附件中的程序，用arduino打开文件夹同名的.ino文件；

2.选择开发板为Generic ESP8266 Module，选择相应的端口；

3. 点击下载，若使用本项目硬件，则在编译完成下载时，需要在屏幕显示Connecting...时点按一下RST按键（出现下划线前），方能进行下载。

 

3.4 固件烧录下载

若不想通过arduino进行编译下载，也可进行固件烧录下载，步骤如下：

1.烧录工具esptool下载

地址：https://www.espressif.com.cn/zh-hans/support/download/other-tools

2.打开esptool，选择如下：

3.下载附件中的固件，并在esptool中选择并勾选该固件，烧录地址为0x0。

4.连接开发板，选择相应的串口，先点击ERASE按键，待擦除成功后点击START下载，待烧录成功即可。（本项目硬件需按RST键进入下载）

 

4 功能实现

4.1 YuePixel文件夹说明

1.与文件夹同名YuePixel_x.x.x.ino文件为主程序所在文件(x.x.x为版本号)。

2.Config.h文件为配置文件，包含引用库、配置参数、全局变量、函数定义等。

3.AnimationPage.ino、ClockPage.ino、Character.ino、Pic.ino、ShowPage.ino文件分别为动画、时钟、文字显示、图片显示和IP滚动显示功能所在文件。

4.Function.ino为一些常用基础函数功能的实现；NTP.ino中为通过NTP获取时间相关函数实现；WebServer.ino为网络配置界面功能实现。

5.Cnfont.h、Pixfont.h 、Image.h、MyPalette.h中方便为中文字库、英文字库、图片、调色板相关数据。

 

4.2 整体框架说明

 

 

 

项目的总体框架及开发思路如上图所示。

1.ESP8266作为一款物联网芯片，本项目中首先对像素灯进行联网，方便后续功能的开发。这里使用的是ESP8266第三方库：WiFiManager库。其能够通过网页方便快速地实现实现设备的配网。有关资料可参考GitHub：https://github.com/tzapu/WiFiManager

本项目灯珠使用WS2812B型号，可通过FastLED库实现灯珠色彩亮度的控制。通过编写相关程序，使其适配矩阵方式控制，并可实现图案、字符、动态画面等显示功能。

2.项目硬件上未设置按键，由于ESP8266可作为服务器使用，因此使用ESP8266WebServer库并编写相应的HTML代码来实现网页控制。网页间的切换通过POST方法来实现，网页配置结果通过WebSocket传回设备，该过程中使用WebSocketsServer库来获取数据。在高级配置界面中，需要回传的数据类型较多，因此采用了JSON格式存储，在接受数据后，使用ArduinoJson库对高级配置信息进行解析。

3.为使像素灯能进行时钟显示功能，需要对时间进行获取。由于硬件上未添加时钟模块，因此时间获取需要在联网后通过网络获取。这里基于WiFiUdp库通过NTP获取时间。获取时间后通过Time库将时间同步到本地，以实现后续时钟显示功能。

4.在程序中为实现网页处理与像素灯显示同时运行，使用Ticker库来实现多任务的处理。在程序中，为节省RAM空间，因此将字符字体及网页等通过PROGMEM功能，将字符串放入闪存中。

 

5 日常使用

5.1 WiFi连接

本项目使用WiFiManager库来实现网页配网，如果为首次使用，在上电后，在WiFi中连接名为YuePixel的网络，连接成功后将自动跳转至配网界面，在配网界面中点击Configure WiFi，并在页面中选择WiFi并填写密码，保存后即可自动将设备连接WiFi。首次配网后，将保存相应WiFi配置，后续在同一网络下无需再次配网。

 

5.2 登录网页配置界面

当像素灯成功联网后，会显示像素灯在该局域网下的IP地址，使用同一局域网下的其他设备（如电脑、手机）等，在浏览器中输入该IP地址并跳转，即可进入配置界面。

 

5.3 显示内容配置

关于各模式下的内容及配置，可观看B站视频：

[开源]迷你像素灯，四种模式，多种风格～点亮你的桌面！网页控制～可自定义内容～

 

6 其他事项

6.1像素灯排列方式

本项目硬件灯珠排列方式为蛇形排列，若购买像素屏搭建硬件，像素屏非蛇形排列时，需在程序的config.h中将kMatrixSerpentineLayout设置为false，方可正常显示。

 

6.2显示镜像解决方法

若显示结果为镜像，则可以在源程序里修改，在Function.ino里的XY函数最开始加一行 x=7-x; 

 

6.3电池供电

本项目硬件未设置开关，故使用电池供电时将一直处于开启状态。

 

6.4网页程序

网页程序可见附件。