在之前成功驅(qū)動墨水屏顯示時間天氣后，最近小魚君也是突發(fā)奇想將墨水屏的界面進行了修改，其中擁有4個待辦事項可以上傳，并且記錄學(xué)習(xí)的時間。最終效果可以直接在視頻中看到：https://www.bilibili.com/video/BV1Mg4y1N7AW/?spm_id_from=333.999.0.0&;vd_source=6ae1f46247eae3d4f5525c98089598dc

?其中用到的主要功能有瀏覽器配網(wǎng)、編寫一點html代碼、墨水屏局部刷新、wifi更新時間。

?單片機為ESP32DevKit，也就是最普通的那種。

?開發(fā)平臺為VScode+Platformio，用到的第三方庫有三個：GxEPD2、U8g2、Json是用來獲取天氣的，不需要就不用加。直接將這三個庫添加到ini文件中就可以了。

本文將按照使用順序來逐個介紹它的主要功能。

首先需要將每天的4個任務(wù)傳輸?shù)紼SP32上，這里一開始小魚君用的是藍牙傳輸，但是發(fā)現(xiàn)中文直接傳會發(fā)生亂碼，雖然通過編碼就可以解決但是想到用wifi好像能夠更方便，由于之前也沒怎么用過，所以想學(xué)習(xí)一下Ap配網(wǎng)就選擇了瀏覽器配網(wǎng)。

大致邏輯是ESP32先作為一個熱點，發(fā)出一個名為【ESP32_AP】的熱點，用手機連接后在瀏覽器輸入默認的ip：192.168.4.1就會進入我們寫好的網(wǎng)頁。所以這里就需要會一點html的編寫了，之前在學(xué)習(xí)的時候也看到有wifi配網(wǎng)的教程，但是在當(dāng)前需求下想要增加每日4個計劃并且以Json的格式發(fā)送就有點難度了。（雖然最后沒用Json）

所以這里直接借助于Chatgpt，生成了一大段代碼：

差不多就是這樣的效果，至于怎么樣能看到自己代碼在網(wǎng)頁中的效果呢？在VScode中下載這個插件： liveServerPreview，然后按下F1就可以用了。

如果按照Gpt生成的代碼來看的話還有一大堆Funtion定義了Json發(fā)送，但是在經(jīng)過后面的測試小魚君驚奇的發(fā)現(xiàn)刪掉就可以了，具體配置在ESP32中，由于圖片復(fù)制會瘋狂降低畫質(zhì)所以這里直接插入代碼。

看起來是不是簡潔高效呢？至于代碼也是非常簡單的，就是把剛才編寫的html文件放到板子里，然后每次收到網(wǎng)頁信息后就會進行處理，但是在配網(wǎng)后網(wǎng)頁連接就會斷開，也就是說每次配網(wǎng)后就不能修改每日計劃了。想調(diào)整也不難，等后續(xù)再修改吧。

至于墨水屏的顯示可以找到之前傳到Github的代碼，可以直接調(diào)用然后修改。

等待WIFI配置之后就開始更新時間然后計算學(xué)習(xí)分鐘數(shù)據(jù)，最頂層的古詩句是隨機從6句中選擇的，用到了隨機數(shù)生成，只是為了裝飾。

最后效果如下所示，為什么沒有自己畫板子呢，因為畢業(yè)回家后設(shè)備不全，也沒有好伙伴給小魚君3D建模了，一想到這里就懶得開始畫板加硬件，應(yīng)該至少得有一兩個按鍵的。

最后展示一下：

工程寫的有點亂，等整理后會上傳到Github中。