ESP Arduino 網頁架設手把手教學 – 用ESPAsyncWebServer建立你的第一個網頁

基礎知識建立

一般來說,我們要使用ESP建立一個網頁,有三種方式。

  • 使用TCP/IP 傳輸HTML文本,自行處理進來跟出去的數據。
    (大神等級,從0開始自己重新實做一次HTTP協定)
  • 使用 ESPWebServer 這個Library 建立網頁。
    (不推薦,ESPWebServer 為阻斷式,一次只能一個連線)
  • 使用 ESPAsyncWebServer 這個 Library建立網頁。
    (推薦,非阻斷式,可以同時多個連線,功能完整強大)

因此,我們會使用 ESPAsyncWebServer 這個 Library,來幫助我們快速的架出第一個網頁。

相依程式庫

雖然在開發上,ESP8266 與 ESP32的程式碼是一樣的,但是他們相依的Library有些許不同。

 

ESP8266ESP32
ESPAsyncTCPAsyncTCP
ESPAsyncWebServerESPAsyncWebServer
ESP8266WiFiWiFi

因此,在開發時,要注意不要引用錯Library了。
這邊就不再贅述安裝Library的過程,可以參考網路上已經有非常多範例了。

建立第一個 Hello World! 網頁

使用ESPASyncWebServer 開發網頁,非常的簡潔,只須少少幾行即可完成一個基礎的網頁。

我們希望一樣的Code,在ESP8266 / ESP32 都可以運行,因此在我們引用Library時,
要用 巨集if 去判斷現在的環境是ESP8266 還是 ESP32,才可以引用對的Library。

引用好Library之後,我們要先開啟ESP8266 / ESP32的WiFi,這邊以AP Mode作為示範,AP Mode的IP為192.168.4.1。
若是想讓ESP連接家裡WiFi,之後會有 mDNS 的應用文章,再請各位敬請期待。

呼叫了 WiFi.softAP(WIFI_SSID,WIFI_PASS); 之後,ESP就會成為一個WiFi熱點,WiFi名稱與密碼可以自行定義

接下來,我們開始實做ASyncWebServer,我們首先要產生一個ASyncWebServer的類別,設為全域變數。

Port 指定為 80(HTTP的Port)。

當我們用瀏覽器去存取http://192.168.4.1時,其實瀏覽器就是用GET方法去存取的,

因此我們需要新增一個Get方法,這樣當瀏覽器存取 192.168.4.1時,讓ESP回傳Hello World!,這樣網頁上就會有Hello World!

再新增notFound回傳值,使用者存取其他網頁時,例如 http://192.168.4.1/test,
因為我們還沒有定義”/test”這個Page,因此網頁需回傳404 notFound。

最後,啟動WebServer,開始等候連線。

完整程式碼

瀏覽器存取 http://192.168.4.1  取得Hello World!

瀏覽器存取 http://192.168.4.1/test 取得notFound!

ESP Arduino 網頁架設手把手教學 – 認識基礎HTTP協定與架構

認識基礎HTTP協定

我是新手,想用ESP做互動式網頁,但不知道怎麼開始?
我是老手,有開發單晶片經驗,但卻不了解網路協定?

沒關係,這系列帶你手把手教學,透過ESP8266/ESP32,做出互動式系統。

但在開始寫Code實做WebServer之前,我們要先了解一下HTTP的基礎協定!

有了基礎知識,才能知所以然,不會一頭霧水的照抄Code

HTTP

HTTP是用戶端(Client)伺服器端(Server)請求(Request)應答(Response)的標準。
HTTP/1.1協定中共定義了八種方法(動作),以不同方式操作指定的資源,
分別為 GET、HEAD、POST、PUT、DELETE、TRACE、OPTIONS、CONNECT
上述的每一種方式在一開始定義時皆有其用途

但我們今天,就講最基本的兩個,GET and POST

GET

GET,字面上意思就是取(GET)資料的意思,通常我們會使用GET,帶著一些參數(Query String),去取得你需要的資料,

GET像是明信片一樣,把要傳遞的資訊(Query String),沒有包裝的寫在URL上,

例如: http://example.com?id=1234

利用這樣的方式,傳輸資料到後端(ESP),後端再根據你傳送的資訊去判斷,執行相對應動作並且回傳資訊(Reponse)

但也因為像是明信片一般的傳遞資料,因此完全是沒有安全性的,因此在使用GET時,要考慮到使用情境,

無安全性考量,才建議使用GET

POST

POST,發佈資料到後端,通常我們使用POST,去傳遞一些比較複雜的資訊到後端(ESP)

例如: 檔案,帳號密碼等。

POST就像一般的信件,把要傳遞的資訊,寫在信紙內,並且用信件袋包起來,因此安全性比較好一些。

實際來說,POST 是將表單資料放在 message-body 進行傳送,因此在不偷看封包的時候是安全的。

後端一樣接收,處理資訊,並且執行相對應動作並且回傳資訊(Reponse)。

下篇文章:

ESP Arduino 網頁架設手把手教學 – 用ESPAsyncWebServer建立你的第一個網頁

更多資料與參考文章

淺談 HTTP Method:表單中的 GET 與 POST 有什麼差別?

https://progressbar.tw/posts/53

 

 

ArduinoJson Assistant使用教學 !

在設計物聯網系統時,一定會與Json格式交互

json,算是這幾年最流行的網頁資料格式,

不論是Web開發,或是資料庫開發,都會應用到。

在這邊推薦大家一個好用的Library,ArduinoJson

這個Library可以幫助我們寫Arduino時,分解json格式並且取值。

但是!

如果像是遇到如此複雜的Json格式,就連我自己都不知道要如何運用ArduinoJson做分解了。

但我最近發現,原來有一個超級好用的小工具,ArduinoJson Assistant

ArduinoJson有v5 v6 version,我自己還是習慣用v5 version(都開發了 改不掉了

因此這邊以ArduinoJson V5作為示範

只要把你的Json格式,放到Input內

就可以幫你計算記憶體佔用量

以及做解碼

與編碼

真的是非常好用,大家趕快去試試看吧!

https://arduinojson.org/v5/assistant/

簡單使用AsyncElegantOTA 幫ESP做OTA

最近開發ESP8266時,線路都已經接好,如果要燒錄又要把線拔開,非常麻煩。

於是在Github上找尋有沒有能透過WiFi簡單OTA的library。

發現了一個好物 AsyncElegantOTA

 

主要功能就是透過AsyncTCP 與 AsyncWebServer , 做出非阻斷式的OTA更新功能。

完完全全符合我的需求阿,分享給大家

範例程式碼也相當簡單。

ESP8266的範例程式碼

ESP32的範例程式碼

 

只須include 相關library , 開啟WiFi後,再呼叫AsyncElegantOTA.begin(&server),最後在loop定期更新。

這樣即可完成OTA功能

連接 http://192.168.4.1/update 即可看到要你上傳bin file的頁面。

即可上傳bin file做OTA更新!

如何判讀ORP數據?

【如何判讀ORP數據?】

很多養殖戶都不太清楚ORP這個數字該如何判讀,
池中亞硝破表,卻不清楚該如何防治嗎?

ORP(氧化還原電位) – 養殖水體的環境健康指標

在聊ORP前,我們先聊聊養殖水體的水質污染主要成份,
其實就是飼料 – 蛋白質與碳水化合物

#當我們丟飼料到水裡,發生什麼變化?

飼料一部分被我們的魚蝦轉換成肉,長在自己身上,
其他的殘餌,與魚蝦排泄的糞便,一併沈澱到水池底部成為 #底泥

未提供相片說明。

底泥無氧,經過厭氧菌分解後,
就成為養殖戶人人害怕的 #氨氮與硫化氫

氨氮 再經過亞硝化菌的分解,就會成為 #亞硝酸(有毒)

亞硝酸經過硝化菌分解,成為 #硝酸(安全)

未提供相片說明。

亞硝為什麼會破表

氨氮(NH4) → 亞硝酸(HNO2) + 硝酸(HNO3)
其實就是一段氧化的過程。
我喜歡把這一段氧化的過程比喻成我們燃燒煤炭的過程。
燃燒其實就是一種氧化過程。

燃燒不完全時
C → CO(多)+CO2(少)

燃燒不完全時,因為氧氣不足,一氧化碳就比較多,就對我們有危害。

燃燒完全時
C → CO(少) + CO2(多)

燃燒完全時,產生出的氣體大部分都是二氧化碳,就對我們無害了。

把同樣的道理轉換成我們脫硝的過程

未提供相片說明。

氧化強度低

氨氮(NH4) → 亞硝酸(HNO2)(多) + 硝酸(HNO3)(少)

氧化強度高

氨氮(NH4) → 亞硝酸(HNO2)(少) + 硝酸(HNO3)(多)

很明顯的可以看出,其實亞硝破表的因數,就是因為氧化不完全。

我們該如何知道現在水體的氧化強度

透過ORP這個數字,可以很簡單的判讀出水體的氧化程度

未提供相片說明。

ORP > +150mv ,水體氧化程度足夠,水體健康,大部份的氨氮都轉換為硝酸。

+50mv < ORP < +150mv ,水體氧化能力欠佳,需要注意,亞硝比例會變多。

ORP < +50mv,水體氧化能力差,要趕緊處理,亞硝兩三天後就會拉高,且有弧菌爆發的危險。

未提供相片說明。

6V 2.5A 太陽能鋰電池充電板 5V/12V輸出 設計筆記

設計初期的錯誤

最近開始在做物聯網的專案,而有一些要使用太陽能供電的需求,於是開始研究相關方案,在這裡紀錄下各種初期的嘗試錯誤。

太陽能板+升降壓模組+行動電源

一開始想說太陽能板是6V,降壓降到5v給行動電源充電之後,在讓行動電源輸出5v給IOT裝置。
於是就採購了 6V 10W的太陽能板+DC-DC模組+小米行動電源,進行組裝測試。

測試後發現,小電流的應用,如果用行動電源供給的話,會自動斷電,於是不符合需求,於是測試下一個方案。

太陽能板+4.2V輸出升降壓模組+鋰電池+5V升降壓模組

要讓電路可以持續輸出電壓,讓IOT裝置不會斷電,於是想到先把太陽能板降到4.2V對鋰電池充電,在讓鋰電池升壓到5V。

這個方案是大致可行的,但是在充電效率與電流上面不夠好,效率不夠高且電流不夠大,不過電壓輸出是穩定的,所以下一步就是要改善充電效率。

MPPT

不斷的搜尋太陽能充電相關的技術文章,發現原來MPPT這個技術在太陽能充電的時候相當重要,節錄MPPT WiKi的說明

最大功率點追蹤(Maximum power point tracking,簡稱MPPT)是常用在風力發電機光伏太陽能系統的技術,目的是在各種情形下都可以得到最大的功率輸出。

最大功率點追蹤主要是用在太陽能發電,不過其原理也可以應用在其輸入功率會變化的能量源:例如光能傳輸以及熱光電等。
其實這個概念就是跟高職時學基本電學的最大功率轉移是差不多的道理,蠻好了解的。
一般小型太陽能板會標注6V 9V 12V 18V等等的電壓,這些電壓就是表示這片太陽能板的最大功率點,因此在挑選太陽能板跟充電模組的時候這兩個MPPT電壓要相同,才能發揮最佳充電的效率。

找到關鍵字之後,終於找到合使用規格的MPPT充電模組。
於是架構就變成 太陽能板->MPPT充電->DC to DC模組輸出5V。

第一個能動的MVP

在淘寶上採購了各模組,用洞洞板把他們焊起來測試功能,測試後終於正常運作,效率也不錯。
採用10W 6V的太陽能板,大概可以用1.5A左右的電流去充10000mAh 3.7V的鋰電池,大約2到3小時就可以完全把電池充飽。

實際充電曲線圖

未提供相片說明。

太陽能充電經驗公式

後來跟一位做大型太陽能發電的前輩聊過之後,知道他們最簡單計算一天之中太陽能板能發多少電就是以

一日4小時

的計算方式去初估,所以我這邊用10W的太陽能板的話,就是一天能發出40Wh的電。
當然如果要更詳盡的話,可以去查中央氣象局統整出來的平均日照時間,可以更精確的估算太陽能板的發電輸出。

不過對我來說,讓機器可以正常運作,隨時充飽才是最重要的,因此用大一點的太陽能板去讓備載容量高一點也沒有什麼關係。

Lipo Solar Charge V0

MVP丟到現場測試OK之後,就開始著手進行整合,並且設計電路板,我這邊把CN3791太陽能充電ic 跟 boost ic 合在同一片板子,並且將輸入輸出以XH2.54作為標準接頭,MPPT電壓選擇6V,因此太陽能板只能用6V的,但換個電阻配比就可以讓這片板子的最大功率電壓變成9v or 18v,詳情請見CN3791的datasheet

再串接上boost電路就完成功能電路了,而在輸出部份我做了Jumper可以切換5V/12V輸出,方便各式應用使用。

實際組裝照片

有太陽日的充電曲線(10W太陽能板-10000mAh 3.7V鋰電池)
未提供相片說明。

最近陰雨綿綿的充電曲線,陰天充不飽,但電壓還是可以維持在一定程度,不會沒電。

Lipo Solar Charger 電路資料

Input : 6V太陽能板
Output : 3.7V(電池直出)/5V(2A) or 3.7V/12V(0.6A)

如果對我的設計有興趣的話,歡迎到我的Github自行取用資料~
詳細電路規格也標記在github內。

https://github.com/notbeloser/Lipo_Solar_Charger

Orange pi zero 擴展系統空間

利用parted工具擴展磁區空間

重新開機後 利用resize2fs 完成系統擴展

 

即可完成 ^ ^

Orange pi zero 安裝 libbpg 紀錄

 

下載libbpg

編輯Makefile

開始安裝libbpg

 

Orange pi zero 透過4G Dongle 上網配置

設定網卡bridge

需以usb to uart 設置,在設置時網路會斷掉 無法用ssh

1.安裝 brctl工具

 

2. 添加橋

 

文件立即生效
3. 修改 /etc/network/interfaces (static IP)

4. 重啟機器

BC35-G升級firmware失敗方法

最近在開發NB-IOT的應用,對接MQTT的服務,透過BC35-G這個模組。

但討厭的是,這顆模組一到貨的時候,韌體並沒有更新到最新板,因此就沒有支援MQTT,於是需要自行手動更新。

跟淘寶賣家要了QDownload_NB_IoT_V3.4.exe這個程式做更新,但怎麼弄都出現一個”系統找不到指定的路徑”之error。

後來發現有更好更方便的軟體可以使用,在CSDN上找到了QFlash_V4.9.zip這個程式,

比起原先的程式好用太多

只需要選好firmware,按下start後,系統會reset讀秒,這時候請把NB-IOT模組電源重新插拔,

等數分鐘即可燒入完畢。