今天給大家分享一篇保姆級的DIY教程：基于Esp8266的多功能點陣時鐘 。

簡介

很早就了解ESP8266了，當時也用這個搞過一些小demo，一直也沒有想過要弄些實際的作品出來，也許是因為自己比較菜吧！最近剛好工作上沒那么忙， 想著自己重新搭建一個mqtt服務器，做一些和物聯網有關的功能。

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

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

讓我萌生了自己搞一個點陣時鐘的想法，所以就一點一點的開始了這個制作點陣時鐘的制作旅程，過程談不上很難，但是中途也遇到了很多的問題，中途遇到了很多的問題，有些解決了，有些就只能簡單粗暴的解決，好在最終還是能夠實現自己所想的功能。

總結經驗和教訓想分享給有同樣興趣愛好的人，文筆不太好，代碼也寫的不好，但依舊阻擋不了這顆分享的心。

演示

圖片

?視頻

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

理念

盡管網上有很多人都搞過或正在esp8266的點陣時鐘，我重復搞更像是在造輪子，我作為一個開發者也很抵制重復造輪子的行為。

但是作為一個初學者的我更想去體驗這個造輪子的過程，而且在這個過程中我希望這個輪子有更多我個人的想法在里面，所以就想著自己從頭開始來搞這個東西。

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

• 簡單
• 好用
• 功能豐富
• 低成本

硬件選材

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

不是打廣告，主要是里面東西比較全面，且價格也差不多，購買東西的時候不需要不同的淘寶店之間換來換去，而且運費也只要3元，一般的這種電子產品店運費都是5-6元的。元器件的具體作用請自行百度，我就不一一贅述。

NodeMcu(Esp8266)

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

DS3231

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

Max7219 32x8 點陣

點陣的驅動芯片好像有蠻多的，Max7219有一個優點就是可以級聯。

杜邦線若干

買杜邦線是解決焊接的麻煩，可以快速簡單的搞出我們需要的電路出來

單路觸摸模塊

原本是搞點動開關的，但是那種成本也不低，體驗又不好，所以就買這種觸摸模塊，用來實現單擊，雙擊，長按等功能，當然這個是非必要的，如果你不想要任何實體交互，只用小程序進行交互的話，就可以忽略此模塊。

時鐘功能

硬件功能

• NTP校時
• 調節亮度
• 顯示時間
• 顯示日期
• 顯示溫度
• 顯示B站粉絲數
• 顯示自定義內容
• OTA更新

微信小程序功能

• 同步設備狀態
• 設置顯示方向
• 設置亮度
• 設置是否顯示
• 切換顯示內容
• 切換顯示模式
• 恢復出廠
• wifi配網
• OTA更新
• 自定義點陣內容

原理圖

實在是沒有作圖的天賦，也沒有找到比較好的制圖工具，只能借助windows自帶的畫圖工具制作一個簡單易懂的原理圖出來吧，望見諒

• PS: 立創的PCB原理圖和PCB打板已經在制作的路上了，帶后續更新

制作過程

其實制作過程算是比簡單的，主要分以下幾步

1. 購買元器件

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

2. 安裝對應的軟件

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

安裝Arduino

通過官網下載Arduino IDE，解壓后運行arduino.exe就表示安裝完成了。下載地址如下：

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

如果鏈接失效，請在 官網 自行下載，下載選項選Windows ZIP file

安裝esp8266 SDK

這里我也是直接從論壇搬運的，但是為了方便閱讀所以在下面列出來，可以直接按我列出來的步驟來，如果有問題請到 這里 看看有沒有其他的解決方法

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

2. 下載社區打包的esp8266安裝包，直接運行并解壓即可

• SDK下載（44M）：

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

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

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

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

安裝串口驅動

NodeMcu有好多種規格，比較常見的是CP2102串口芯片和CH340串口芯片的，所以都需要對應的驅動，下面分享兩者的驅動下載地址：

CP2102驅動

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

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

CH340驅動

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

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

• 解壓對應的驅動壓縮包，然后雙擊運行對應系統的驅動即可。

• 驅動安裝成功以后需要重啟電腦

3. 連接對應的線材

這里就是使用杜邦線進行一個簡單的連接，如果有大佬愿意也可以通過我畫的電路圖進行焊接，不過還是推薦先使用杜邦線連接，調試好程序后再進行焊接處理。

NodeMcu和Max7219點陣接線

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

• 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寫入程序其實也挺簡單的，大致步驟分為如下幾步

檢查

• 簡單ESP8266SDK是否安裝成功

• 檢查串口驅動是否安裝成功

安裝所需要的依賴包

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

• 安裝步驟如下：

  • 工具 --> 管理庫 --> 搜索我們需要安裝的庫 --> 點擊安裝即可

• 需要安裝的庫文件如下

  • DS3231 DS3231時鐘現成庫文件
  • LedControl 驅動Max7219點陣的庫文件
  • OneButton 實現按鍵單擊，雙擊，長按功能的庫

• 如果有遺漏的庫，請看報錯提示，按錯誤提示將其中的庫安裝一下即可

下載源碼

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

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

  通過上面的地址下載我們的源碼。

將源碼寫入Esp8266

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

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

• 選擇開發板

  工具 --> 開發板 --> ESP8266 --> NodeMcu 1.0

  選擇開發板

• 選擇端口

  工具 --> 端口 --> 選擇我們串口設備對應的端口

• 寫入程序

  項目 --> 上傳 或 點左側的 → 箭頭 （波特率選115200，會快一些）

5. 測試&檢驗

這里列舉個人處理過程中遇到比較多的問題：

1. 程序編譯失敗

• 編譯失敗最多的可能就是庫文件不存在，或者esp8266的sdk安裝有問題，檢查一下編譯報錯的地方即可

• 程序上傳失敗

• 上傳失敗基本就是串口沒選對或者開發板沒有選對

• 上傳成功后不無任何顯示

• 這里就需要檢查自己的接線是否正確。（此操作請斷開電源后進行）

• 一鍵配網不成功

• 配網需要手機和設備在同一個wifi，且wifi是2.4G的wifi
• 查看點陣顯示內容：no wifi 表示沒有配置過wifi，需要配置wifi；con wifi 則表示已經配置過wifi信息了，正在連接wifi，如果需要重新配置wifi的話就需要長按觸摸按鍵6秒重置系統。
• 配網建議先按nodeMcu上的reset按鍵，再點擊手機上的配網

• 配網成功后顯示的內容是 2359

• 這個就表示你的DS3231接線有問題，需要檢查接線是否正確。（此操作請斷開電源后進行）
• 還是不行的話，請先斷開電源，再將DS3231上的電池拆拆下來，重新安裝后重試。

交互

硬件上我們設置了一個觸摸按鍵用于人機交互，更多的交互邏輯我是在小程序上實現的。

觸摸按鍵：

• 單擊：單擊為切換顯示功能，目前是 時間 - 日期 - 溫度 - B站粉絲數 - 自定義顯示 五個循環切換
• 雙擊：雙擊是切換功能的顯示模式，例如：時間有兩種顯示模式 1. 時- 分 - 秒 2. 時 - 分 可以實現兩種不同顯示模式
• 長按三秒：長按超過三秒低于六秒會觸發NTP自動校準時間
• 長按六秒：長按超過六秒則會重置系統（在系統出現異常的時候，或者更換了wifi的情況下需要重置系統）

微信小程序：

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

小程序

為什么會選擇小程序來和Esp8266交互呢？

1. 小程序開發起來比較快捷，支持的功能也很多，很多功能直接調用api即可
2. 使用app或者是在訪問esp8266里面的頁面我覺得交互有點差，我認為最交互應該簡單到家，不需要有過多的學習成本
3. 小程序支持配網，UDP，藍牙等等諸多功能，后續的其他小作品可能都會用到小程序

頁面展示

代碼

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

小程序入口

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

通訊方式

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

只要保證esp8266和手機連接的是同一個局域網即可，而且可以通過廣播的方式發現設備，不需要建立長鏈接，缺點就是不穩定，會丟包，但是我認為是可以接受的，因為手機更多的是發送一些指令，我每次都發送兩次指令丟包的概率就會下降一些。

傳輸協議

udp是發送一些hex數據包來實現esp8266和手機之間的數據傳輸，所以我就自己簡單定義了一個自己的UDP傳輸協議，協議如下：

自定義一個UPD協議用于小程序和esp8266進行UDP通信

|01|2345|67|01234567|
---------------------------------
|RT|TE|VN|LH|
---------------------------------
報文數據(64bit)
---------------------------------

自定義UDP協議說明:

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

優化 ？

優化空間自然是有的，改動其實也不大，那就是后續接入到自己的MQTT服務器上去同時兼容UPD通訊方式，但是目前沒有搞是因為目前沒有穩定可用的服務器，盲目的接入后續升級起來就會影響設備正常的功能使用。

自我評價

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

雖然拼的不好但是好歹也是拼出來的一個作品，雖說也有很多人搞這種點陣時鐘，但是我個人覺得自己真的去實踐就會發現沒有那么簡單，而且別人做的你也未必會滿意，自己去做更能去注入自己的靈魂在里面。

在此講講個人感悟：本人不是專職搞這種硬件開發，這個只是個人的業余愛好，雖然平常也有積累一些相關的知識，但是遠不如系統性學習來的高效。

所以，如果真的要學習這個還是要系統性的看一些視頻來學習，其次就是就是實踐，雖然我掌握了一些零零散散的技能，但是卻不知道如何去使用，所以需要不斷的去實踐來理解自己所掌握的技能。

缺點:

• 需要連接wifi（且必須是2.4Gwifi）才能用 -（這個也會在后續程序上做出優化）
• 需要持續供電，因為點陣功耗比較大，所以用電池反而體驗很差

優點：

• 支持OTA可持續更新系統
• 交互簡單便捷
• 支持自定義顯示內容

結尾

這里我提供一個8x8和 32x8點陣的在線取模工具，做的比較粗糙，如果有需要改進的地方歡迎在評論區留言。

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

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