今天給大家分享一篇保姆級(jí)的DIY教程：基于Esp8266的多功能點(diǎn)陣時(shí)鐘 。

簡(jiǎn)介

很早就了解ESP8266了，當(dāng)時(shí)也用這個(gè)搞過(guò)一些小demo，一直也沒有想過(guò)要弄些實(shí)際的作品出來(lái)，也許是因?yàn)樽约罕容^菜吧！最近剛好工作上沒那么忙， 想著自己重新搭建一個(gè)mqtt服務(wù)器，做一些和物聯(lián)網(wǎng)有關(guān)的功能。

逛論壇的時(shí)候有一篇帖子吸引到我了，就是這篇：

https://www.arduino.cn/thread-98790-1-1.html

讓我萌生了自己搞一個(gè)點(diǎn)陣時(shí)鐘的想法，所以就一點(diǎn)一點(diǎn)的開始了這個(gè)制作點(diǎn)陣時(shí)鐘的制作旅程，過(guò)程談不上很難，但是中途也遇到了很多的問(wèn)題，中途遇到了很多的問(wèn)題，有些解決了，有些就只能簡(jiǎn)單粗暴的解決，好在最終還是能夠?qū)崿F(xiàn)自己所想的功能。

總結(jié)經(jīng)驗(yàn)和教訓(xùn)想分享給有同樣興趣愛好的人，文筆不太好，代碼也寫的不好，但依舊阻擋不了這顆分享的心。

演示

圖片

?視頻

https://www.bilibili.com/video/BV18i4y1R7ft?spm_id_from=333.999.0.0

理念

盡管網(wǎng)上有很多人都搞過(guò)或正在esp8266的點(diǎn)陣時(shí)鐘，我重復(fù)搞更像是在造輪子，我作為一個(gè)開發(fā)者也很抵制重復(fù)造輪子的行為。

但是作為一個(gè)初學(xué)者的我更想去體驗(yàn)這個(gè)造輪子的過(guò)程，而且在這個(gè)過(guò)程中我希望這個(gè)輪子有更多我個(gè)人的想法在里面，所以就想著自己從頭開始來(lái)搞這個(gè)東西。

至于我個(gè)人的理念就是做一個(gè)極簡(jiǎn)的點(diǎn)陣時(shí)鐘出來(lái)， 在擁有更多其他的功能之外，要滿足它最最核心的功能（時(shí)鐘，誤差低），其次就是擁有更多的功能，更簡(jiǎn)單的交互，再者就是成本要低，希望想自己diy的人用最低的成本做一個(gè)好看又好用的點(diǎn)陣時(shí)鐘出來(lái)。

• 簡(jiǎn)單
• 好用
• 功能豐富
• 低成本

硬件選材

這里我就只介紹一些必要的硬件，懂得都懂就不需要我這種小白列舉了。在這里我也放上我一直逛的一家淘寶店：欣薇電子科技 。

不是打廣告，主要是里面東西比較全面，且價(jià)格也差不多，購(gòu)買東西的時(shí)候不需要不同的淘寶店之間換來(lái)?yè)Q去，而且運(yùn)費(fèi)也只要3元，一般的這種電子產(chǎn)品店運(yùn)費(fèi)都是5-6元的。元器件的具體作用請(qǐng)自行百度，我就不一一贅述。

NodeMcu(Esp8266)

這是我們的核心硬件，功能很多，可能是今年芯片漲價(jià)的緣故吧，這類東西越來(lái)越貴了。

DS3231

買這個(gè)模塊主要的作用是掉電時(shí)間不重置，且時(shí)間誤差小。

Max7219 32x8 點(diǎn)陣

點(diǎn)陣的驅(qū)動(dòng)芯片好像有蠻多的，Max7219有一個(gè)優(yōu)點(diǎn)就是可以級(jí)聯(lián)。

杜邦線若干

買杜邦線是解決焊接的麻煩，可以快速簡(jiǎn)單的搞出我們需要的電路出來(lái)

單路觸摸模塊

原本是搞點(diǎn)動(dòng)開關(guān)的，但是那種成本也不低，體驗(yàn)又不好，所以就買這種觸摸模塊，用來(lái)實(shí)現(xiàn)單擊，雙擊，長(zhǎng)按等功能，當(dāng)然這個(gè)是非必要的，如果你不想要任何實(shí)體交互，只用小程序進(jìn)行交互的話，就可以忽略此模塊。

時(shí)鐘功能

硬件功能

• NTP校時(shí)
• 調(diào)節(jié)亮度
• 顯示時(shí)間
• 顯示日期
• 顯示溫度
• 顯示B站粉絲數(shù)
• 顯示自定義內(nèi)容
• OTA更新

微信小程序功能

• 同步設(shè)備狀態(tài)
• 設(shè)置顯示方向
• 設(shè)置亮度
• 設(shè)置是否顯示
• 切換顯示內(nèi)容
• 切換顯示模式
• 恢復(fù)出廠
• wifi配網(wǎng)
• OTA更新
• 自定義點(diǎn)陣內(nèi)容

原理圖

實(shí)在是沒有作圖的天賦，也沒有找到比較好的制圖工具，只能借助windows自帶的畫圖工具制作一個(gè)簡(jiǎn)單易懂的原理圖出來(lái)吧，望見諒

• PS: 立創(chuàng)的PCB原理圖和PCB打板已經(jīng)在制作的路上了，帶后續(xù)更新

制作過(guò)程

其實(shí)制作過(guò)程算是比簡(jiǎn)單的，主要分以下幾步

1. 購(gòu)買元器件

購(gòu)買器材可參考上文中提到的一些元器件，淘寶上很多淘寶店都是有賣的。

2. 安裝對(duì)應(yīng)的軟件

這里我們主要用到的軟件是arduino 很多diy愛好者應(yīng)該都用過(guò)，用過(guò)的用戶可跳過(guò)，也可以接著往下看

安裝Arduino

通過(guò)官網(wǎng)下載Arduino IDE，解壓后運(yùn)行arduino.exe就表示安裝完成了。下載地址如下：

https://downloads.arduino.cc/arduino-1.8.19-windows.zip

如果鏈接失效，請(qǐng)?jiān)?官網(wǎng) 自行下載，下載選項(xiàng)選Windows ZIP file

安裝esp8266 SDK

這里我也是直接從論壇搬運(yùn)的，但是為了方便閱讀所以在下面列出來(lái)，可以直接按我列出來(lái)的步驟來(lái)，如果有問(wèn)題請(qǐng)到 這里 看看有沒有其他的解決方法

1. 打開Arduino IDE菜單 > 文件 >首選項(xiàng)，在 附加開發(fā)板管理器網(wǎng)址 輸入框中，填入以下網(wǎng)址：https://www.arduino.cn/package_esp8266com_index.json

2. 下載社區(qū)打包的esp8266安裝包，直接運(yùn)行并解壓即可

• SDK下載（44M）：

  藍(lán)湊云分享地址：https://wwi.lanzouo.com/ij4GEyjcz7c (推薦使用這個(gè))

  阿里云盤地址：https://www.aliyundrive.com/s/QhgGreFTjJb (推薦使用這個(gè))

• 雙擊運(yùn)行即可解壓，解壓完成后，再打開Arduino IDE，即可在 菜單欄 --> 工具 --> 開發(fā)板 中找到你使用的esp8266開發(fā)板

• 提示：如果安裝過(guò)其他版本的esp8266sdk，請(qǐng)先刪除，再使用本安裝包，刪除方法：文件管理器地址欄輸入 %LOCALAPPDATA%/Arduino15/packages，回車進(jìn)入，然后刪除掉其中的esp8266文件夾

安裝串口驅(qū)動(dòng)

NodeMcu有好多種規(guī)格，比較常見的是CP2102串口芯片和CH340串口芯片的，所以都需要對(duì)應(yīng)的驅(qū)動(dòng)，下面分享兩者的驅(qū)動(dòng)下載地址：

CP2102驅(qū)動(dòng)

藍(lán)湊云分享地址：https://wwi.lanzouo.com/iU5mcyjdxuj (推薦使用這個(gè))

博客文件地址：CP210x_Universal_Windows_Driver.zip（不推薦這個(gè)，上面鏈接失效可以使用）

CH340驅(qū)動(dòng)

藍(lán)湊云分享地址：https://wwi.lanzouo.com/iyFTayjdxsh (推薦使用這個(gè))

博客文件地址：CH34x_Install_Windows_v3_4.zip （不推薦這個(gè)，上面鏈接失效可以使用）

• 解壓對(duì)應(yīng)的驅(qū)動(dòng)壓縮包，然后雙擊運(yùn)行對(duì)應(yīng)系統(tǒng)的驅(qū)動(dòng)即可。

• 驅(qū)動(dòng)安裝成功以后需要重啟電腦

3. 連接對(duì)應(yīng)的線材

這里就是使用杜邦線進(jìn)行一個(gè)簡(jiǎn)單的連接，如果有大佬愿意也可以通過(guò)我畫的電路圖進(jìn)行焊接，不過(guò)還是推薦先使用杜邦線連接，調(diào)試好程序后再進(jìn)行焊接處理。

NodeMcu和Max7219點(diǎn)陣接線

• VCC → 3.3V (其實(shí)這里也可以接5v，如果你想點(diǎn)陣的亮度比較亮的話)

• GND → GND

• DIN → D7

• CS → D6

• CLK → D5

NodeMcu和DS3231模塊接線

• VCC → 3.3V (這里不用接5v，低電壓更安全)

• GND → GND

• DIN → D7

• SDA → D2

• SCL → D1

NodeMcu和單路觸摸模塊接線

• VCC → 3.3V (這里不用接5v，低電壓更安全)

• GND → GND

• SIG → D8

4. 寫入程序

使用Arduino寫入程序其實(shí)也挺簡(jiǎn)單的，大致步驟分為如下幾步

檢查

• 簡(jiǎn)單ESP8266SDK是否安裝成功

• 檢查串口驅(qū)動(dòng)是否安裝成功

安裝所需要的依賴包

• 由于我也是初學(xué)者，很多都是使用別人的庫(kù)文件，自己并沒有去深入原理的去重寫代碼，所以我們需要安裝一些庫(kù)文件

• 安裝步驟如下：

  • 工具 --> 管理庫(kù) --> 搜索我們需要安裝的庫(kù) --> 點(diǎn)擊安裝即可

• 需要安裝的庫(kù)文件如下

  • DS3231 DS3231時(shí)鐘現(xiàn)成庫(kù)文件
  • LedControl 驅(qū)動(dòng)Max7219點(diǎn)陣的庫(kù)文件
  • OneButton 實(shí)現(xiàn)按鍵單擊，雙擊，長(zhǎng)按功能的庫(kù)

• 如果有遺漏的庫(kù)，請(qǐng)看報(bào)錯(cuò)提示，按錯(cuò)誤提示將其中的庫(kù)安裝一下即可

下載源碼

• github下載 https://github.com/Lengff/esp8266-lattice-clock-open

• gitee下載 https://gitee.com/lengff/esp8266-lattice-clock-open

  通過(guò)上面的地址下載我們的源碼。

將源碼寫入Esp8266

• 通過(guò)Arduino IDE 打開我們上一步下載好的代碼

  文件 --> 打開 --> 選擇源碼所在文件夾中.ino后綴的文件

• 選擇開發(fā)板

  工具 --> 開發(fā)板 --> ESP8266 --> NodeMcu 1.0

  選擇開發(fā)板

• 選擇端口

  工具 --> 端口 --> 選擇我們串口設(shè)備對(duì)應(yīng)的端口

• 寫入程序

  項(xiàng)目 --> 上傳 或 點(diǎn)左側(cè)的 → 箭頭 （波特率選115200，會(huì)快一些）

5. 測(cè)試&檢驗(yàn)

這里列舉個(gè)人處理過(guò)程中遇到比較多的問(wèn)題：

1. 程序編譯失敗

• 編譯失敗最多的可能就是庫(kù)文件不存在，或者esp8266的sdk安裝有問(wèn)題，檢查一下編譯報(bào)錯(cuò)的地方即可

• 程序上傳失敗

• 上傳失敗基本就是串口沒選對(duì)或者開發(fā)板沒有選對(duì)

• 上傳成功后不無(wú)任何顯示

• 這里就需要檢查自己的接線是否正確。（此操作請(qǐng)斷開電源后進(jìn)行）

• 一鍵配網(wǎng)不成功

• 配網(wǎng)需要手機(jī)和設(shè)備在同一個(gè)wifi，且wifi是2.4G的wifi
• 查看點(diǎn)陣顯示內(nèi)容：no wifi 表示沒有配置過(guò)wifi，需要配置wifi；con wifi 則表示已經(jīng)配置過(guò)wifi信息了，正在連接wifi，如果需要重新配置wifi的話就需要長(zhǎng)按觸摸按鍵6秒重置系統(tǒng)。
• 配網(wǎng)建議先按nodeMcu上的reset按鍵，再點(diǎn)擊手機(jī)上的配網(wǎng)

• 配網(wǎng)成功后顯示的內(nèi)容是 2359

• 這個(gè)就表示你的DS3231接線有問(wèn)題，需要檢查接線是否正確。（此操作請(qǐng)斷開電源后進(jìn)行）
• 還是不行的話，請(qǐng)先斷開電源，再將DS3231上的電池拆拆下來(lái)，重新安裝后重試。

交互

硬件上我們?cè)O(shè)置了一個(gè)觸摸按鍵用于人機(jī)交互，更多的交互邏輯我是在小程序上實(shí)現(xiàn)的。

觸摸按鍵：

• 單擊：?jiǎn)螕魹榍袚Q顯示功能，目前是 時(shí)間 - 日期 - 溫度 - B站粉絲數(shù) - 自定義顯示 五個(gè)循環(huán)切換
• 雙擊：雙擊是切換功能的顯示模式，例如：時(shí)間有兩種顯示模式 1. 時(shí)- 分 - 秒 2. 時(shí) - 分 可以實(shí)現(xiàn)兩種不同顯示模式
• 長(zhǎng)按三秒：長(zhǎng)按超過(guò)三秒低于六秒會(huì)觸發(fā)NTP自動(dòng)校準(zhǔn)時(shí)間
• 長(zhǎng)按六秒：長(zhǎng)按超過(guò)六秒則會(huì)重置系統(tǒng)（在系統(tǒng)出現(xiàn)異常的時(shí)候，或者更換了wifi的情況下需要重置系統(tǒng)）

微信小程序：

• 這里不做過(guò)多贅述，微信小程序里面的功能都比較簡(jiǎn)單明了一看便知，上述按鍵支持的功能微信小程序全部都支持

小程序

為什么會(huì)選擇小程序來(lái)和Esp8266交互呢？

1. 小程序開發(fā)起來(lái)比較快捷，支持的功能也很多，很多功能直接調(diào)用api即可
2. 使用app或者是在訪問(wèn)esp8266里面的頁(yè)面我覺得交互有點(diǎn)差，我認(rèn)為最交互應(yīng)該簡(jiǎn)單到家，不需要有過(guò)多的學(xué)習(xí)成本
3. 小程序支持配網(wǎng)，UDP，藍(lán)牙等等諸多功能，后續(xù)的其他小作品可能都會(huì)用到小程序

頁(yè)面展示

代碼

目前小程序不在此次開源分享當(dāng)中，其實(shí)小程序這塊難度不大，而且可以直接使用，減少大家的開發(fā)工作。

小程序入口

通過(guò)手機(jī)微信掃描下面的小程序碼 或 微信搜索小程序 Lengff即可找到我的小程序

通訊方式

目前esp8266和小程序的通訊是使用UDP的通訊方式，使用UDP的通訊方式的好處就是無(wú)連接，即開即用，不需要有服務(wù)器的存在。

只要保證esp8266和手機(jī)連接的是同一個(gè)局域網(wǎng)即可，而且可以通過(guò)廣播的方式發(fā)現(xiàn)設(shè)備，不需要建立長(zhǎng)鏈接，缺點(diǎn)就是不穩(wěn)定，會(huì)丟包，但是我認(rèn)為是可以接受的，因?yàn)槭謾C(jī)更多的是發(fā)送一些指令，我每次都發(fā)送兩次指令丟包的概率就會(huì)下降一些。

傳輸協(xié)議

udp是發(fā)送一些hex數(shù)據(jù)包來(lái)實(shí)現(xiàn)esp8266和手機(jī)之間的數(shù)據(jù)傳輸，所以我就自己簡(jiǎn)單定義了一個(gè)自己的UDP傳輸協(xié)議，協(xié)議如下：

自定義一個(gè)UPD協(xié)議用于小程序和esp8266進(jìn)行UDP通信

|01|2345|67|01234567|
---------------------------------
|RT|TE|VN|LH|
---------------------------------
報(bào)文數(shù)據(jù)(64bit)
---------------------------------

自定義UDP協(xié)議說(shuō)明:

1.RT:(2bit)成功返回?cái)?shù)值
2.TE:(4bit)type報(bào)文類型:0:重置時(shí)間,1:設(shè)置亮度,2:切換功能,3:切換功能顯示樣式,4:訂閱BIlibiliUID,5:是否啟用點(diǎn)陣屏幕,6:切換顯示方向,7:設(shè)置用戶數(shù)據(jù),8:設(shè)置動(dòng)畫速度,9:OTA升級(jí)(這里有個(gè)缺陷,就是最多只支持16種類型,所以后續(xù)會(huì)擴(kuò)展此處)
3.VN:(2bit)version協(xié)議版本,目前固定為1
4.LH:(8bit)length數(shù)據(jù)包長(zhǎng)度
5.報(bào)文數(shù)據(jù):(64)bit版本1目前支持的最大數(shù)據(jù)包長(zhǎng)度為64bit

優(yōu)化 ？

優(yōu)化空間自然是有的，改動(dòng)其實(shí)也不大，那就是后續(xù)接入到自己的MQTT服務(wù)器上去同時(shí)兼容UPD通訊方式，但是目前沒有搞是因?yàn)槟壳皼]有穩(wěn)定可用的服務(wù)器，盲目的接入后續(xù)升級(jí)起來(lái)就會(huì)影響設(shè)備正常的功能使用。

自我評(píng)價(jià)

這個(gè)項(xiàng)目（也算是一個(gè)小項(xiàng)目吧）我做了一個(gè)多月，也不能算是從0開始，一開始到時(shí)候熟悉一點(diǎn)東西，只是知識(shí)點(diǎn)零零散散的，就像一堆凌亂的拼圖，這次就像在拼拼圖。

雖然拼的不好但是好歹也是拼出來(lái)的一個(gè)作品，雖說(shuō)也有很多人搞這種點(diǎn)陣時(shí)鐘，但是我個(gè)人覺得自己真的去實(shí)踐就會(huì)發(fā)現(xiàn)沒有那么簡(jiǎn)單，而且別人做的你也未必會(huì)滿意，自己去做更能去注入自己的靈魂在里面。

在此講講個(gè)人感悟：本人不是專職搞這種硬件開發(fā)，這個(gè)只是個(gè)人的業(yè)余愛好，雖然平常也有積累一些相關(guān)的知識(shí)，但是遠(yuǎn)不如系統(tǒng)性學(xué)習(xí)來(lái)的高效。

所以，如果真的要學(xué)習(xí)這個(gè)還是要系統(tǒng)性的看一些視頻來(lái)學(xué)習(xí)，其次就是就是實(shí)踐，雖然我掌握了一些零零散散的技能，但是卻不知道如何去使用，所以需要不斷的去實(shí)踐來(lái)理解自己所掌握的技能。

缺點(diǎn):

• 需要連接wifi（且必須是2.4Gwifi）才能用 -（這個(gè)也會(huì)在后續(xù)程序上做出優(yōu)化）
• 需要持續(xù)供電，因?yàn)辄c(diǎn)陣功耗比較大，所以用電池反而體驗(yàn)很差

優(yōu)點(diǎn)：

• 支持OTA可持續(xù)更新系統(tǒng)
• 交互簡(jiǎn)單便捷
• 支持自定義顯示內(nèi)容

結(jié)尾

這里我提供一個(gè)8x8和 32x8點(diǎn)陣的在線取模工具，做的比較粗糙，如果有需要改進(jìn)的地方歡迎在評(píng)論區(qū)留言。

8x8點(diǎn)陣的在線取模工具：http://lengff.com/lengff/lattice2.html

32x8點(diǎn)陣的在線取模工具：http://lengff.com/lengff/lattice3.html