这个项目是制造一个可以通过手机连接、显示 8×8 像素 Emoji 的标牌。基于便宜又好用的物联网开发板 ESP8266，马上来试试吧！
材料清单
- ESP8266 开发板 × 1
- NeoPixels LED × 64
- USB 金属软管线 × 1
准备工作
ESP8266 开发板
任何 ESP8266 开发板都可以。本项目使用的是 WeMos D1 Mini Pro。
NeoPixels
项目中用到了 Arduino Adafruit_NeoPixel 库，任何兼容的 LED 都可以，例如 WS2812、WS2812B、SK6812、SK6812mini 等。
这次使用的是 64 个 SK6812mini LED，制作一个微型 8×8 点阵。
标牌支架
这里用到一个小的 USB 金属软管作为标牌的支架。
3D 打印和组装
在项目文件库中下载打印文件。https://make.quwj.com/project/340
- 打印出外壳。
- 曲折方向放置 SK6812mini LED。
- 焊接电路。
- 用热熔胶密封电路。
- 电源引脚接 ESP8266 开发板的 VCC。SK6812 Din 引脚连接 ESP8266 的 4/D2 脚。
- 扣上外壳、拧紧。
- 插入 USB 线开机。
软件准备
Arduino IDE
在官网下载 Arduino IDE 并安装好。https://www.arduino.cc/en/main/software
ESP8266 支持
如果你还没有安装 Arduino 的 ESP8266 支持，请按照「Arduino on ESP8266」一节的方法来操作。
https://github.com/esp8266/Arduino
Arduino 库
使用 Arduino Library 管理工具安装下面三个依赖库：
- WiFiManager
- ArduinoWebSockets
- Adafruit_NeoPixel
编程
准备 8×8 Emoji
我通过 Google 收集了一些 8×8 像素的 emoji 图片素材。
然后使用 base64decode.org 将它们转换成 base64 编码的字符串，内嵌到 HTML 页面中。
项目文件库中提供了源码和这些 emoji 图片素材。
https://make.quwj.com/project/340
制作 Web UI
我使用了一个非常简单的 HTML 页面，用来选择 emoji 并通过 Web Socket 协议以二进制格式将像素传输到 ESP8266。
然后，我用 html-minifier 这个工具把上面的 HTML 页面压缩成一行，嵌入到 Arduino 代码中。
GitHub：https://github.com/moononournation/IoT-Emoji-Sign
- 将 ESP8266 连接到电脑
- 打开 Arduino IDE
- 在工具菜单中选择好正确的开发板
- 上传代码到 Arduino
开玩
下面做一个体验步骤的小结。
1、插入 IoT Emoji 标牌
2、配置 WiFi (仅首次打开时)
2.1、在手机上搜索并找到 esp-emoji 这个热点
2.2、WiFiManager Captive Portal 页面展示
2.3、点击 “Configure WiFi” 按钮
2.4、选择你的 AP
2.5、输入 AP 密码
2.6、点击 “Save” 按钮
2.7、ESP8266 自动重启
3、ESP8266 自动连接到你的 AP
4、在你的手机上用浏览器打开网址 “esp-emoji.local”
5、选择一个 Emoji、Play！
这一组 Emoji 只是一个简单的示例，有兴趣的话你还可以自己绘制 8×8 的 Emoji 符号来显示！