ESP8266 應用一:智能插座 .8 建制自己的 Socket Server

TCP Client 請自行根據作業系統以及個人喜好選擇,記得通訊字串最後要「換行」

Socket1.php – 只會顯示接收訊息的 Socket Server

這是第一個功能最簡單的 Socket 程式,只會把接收的訊息顯示

執行起來像這樣

Socket2.php – 將接收訊息複製回傳並加上流水號

Socket3.php – 儲存資料到資料庫

常駐程式內要使用資料庫,要注意 timeout 問題,Hoyo 目前的解決方法是使用短連結 PDO::ATTR_PERSISTENT=>false ,以及不使用 global 傳遞資源,每個 funtion(){} 內建立 PDO 資源,如此每個 MySQL 連線都是新建立,沒有長連結共用問題就沒有 MySQL server has gone away 錯誤

Socket3.php

Socket4.php – 紀錄 Client 以及推送

Socket5.php – 不須 restart 更新程式方式

只須將程式片段另外儲存 php 後,使用 require 引入使用即可,不過修改對象是 Socket5.php 還是需要 stop 再 start 才行

mysql.php

Socket6.php – SSL 通訊加密

如果是 Python 這類較高階程式可以複製 apache.crt 就可以建立 SSL 加密通訊,ESP8266 目前是使用指紋憑證,可以使用 How to View a Certificate Fingerprint as SHA-256, SHA-1 or MD5 using OpenSSL 的查詢指令

934 total views, 2 views today

ESP8266 應用一:智能插座 .7 SSL 通訊加密

官方範例

在寫這篇的時候 (2019/12) 可以查到指紋憑證已經和範例網站 api.github.com 不同,如果沒有 OTA 機制更新 SSL 指紋憑證就是一個大問題,所以 Hoyo 使用自己發憑證的方式解決,因為 ESP8266 並不會像瀏覽器一樣審核發行單位。

自己發憑證

根據自己的網站發行一個超久的憑證給 ESP8266 使用,Hoyo 這裡示範的是一個極端的例子

如此即可使用

1,386 total views, 4 views today

ESP8266 應用一:智能插座 .5 改用 Socket 通訊為主動控制做準備 TCP Client

在完整的應用,ESP8266 除了上傳監測器數據,還需要接收主機送過來的繼電器控制訊號,必須建立即時、可控的雙向通訊機制

為了簡約開發使用 TCP Text 通訊 JSON 當成通訊格式,最後加上 SSL 加密就完成規劃

此階段只做到 Text 雙向通訊完結

TCP Server

這裡還是使用多年以前使用的 TCP Server Tool 來擔任 Server 角色,等 Client 開發完成再自行架設

Socket_TCPServerTool

ESP8266 TCP Client

ESP8266 使用 TCP Socket 做通訊沒有想像中的困難,反而是相當的容易

使用 netstat -nt 指令查看確定網路通訊狀態正常

TCP Server 推送

ESP8266 Arduino

  • client.readStringUntil(‘\n’); 從 client 接收字串,使用 \n 換行區隔
  • Serial.println(Control); 將收到的字串輸出看看

從 TCP Server Tool 發送訊息,會自動送出換行,其他軟體請注意設定

ESP8266_SocketClient_TCPServer_Push

在串列監視就可以收到訊息

ESP8266_SocketClient_Seria

2,763 total views, 6 views today

ESP8266 應用一:智能插座 .6 接收 Server 指令及繼電器控制

為了可以擁有指令擴充能力,還是採用 JSON 格式

增加 JSON 處理能力

到 GitHub 下載 zip 後,Arduino → 草稿碼 → 匯入程式庫 → 加入 .ZIP 程式庫,選擇剛剛下載的 zip 檔案

在整理資料的時候版本已經升到 6 了,以前的程式碼不適用了 … = =a

JSON 接收處理

參照 GitHub 上的 example 加上上一章 ESP8266 應用一:智能插座 .5 改用 Socket 通訊為主動控制做準備 TCP Client 的 TCP Server 程式來發送 json 測試

運作起來的結果大概就像這樣

ESP8266 接收 JSON 字串處理

繼電器控制

繼電器有分高電平和低電平,意思就是有電還是沒電可以導通,選擇要看需求,例如在本次的專案是智能插座,打算沒通電的時候就也不通電,所以選擇的是高電平控制繼電器

把上面的程式加上繼電器的接腳輸出定義,以及將從 TCP Server 接收的 JSON 指令解析控制繼電器即可完成

1,882 total views, 3 views today

ESP8266 應用一:智能插座 .3 DHT-11 溫濕度

終於要把現實世界和數位世界連接了,一開始的現實對象是環境溫、濕度,所以要使用溫、濕度監測器或是說監測模組。

模組一般都是將主功能電子零件加上必要的配套電路成為獨立零件,非電子專業使用會比較方便,Hoyo 使用的模組是 DHT-11

(非業配,賣場內還有另一個是只有監測器,比較便宜可是沒有應用電路)

加入程式庫

為了讀取 DHT11 數據,所以直接用其他大大分享的程式庫是比較快速的方式

從 GitHub 下載 zip 打開 Arduino IDE,草稿檔 → 匯入程式庫 → dht11-master.zip

程式範例 – 從串列埠觀看溫、濕度

 

下圖中的 delay 時間為 200 ,並非上面設定的 2000

ESP8266 DHT11 串列埠輸出

將 DHT11 讀取溫、濕度上傳到主機

先假設你已經有一個可以使用 HTTP API 上傳資料的主機,然後接下來就是如何把資料丟上去,在此假設的規格是使用 GET 傳遞

上傳到其他 IoT 平台 – 以 Ubidots 為例

從 Devices 查看上傳數據

點選單一監測數據可以看到詳細數據

接腳接反會燒壞!

其實電子零件大多是這樣的下場,以前搞音響 DIY 燒的更慘 …

優、缺點

極限值以及準確度是 DHT11 的硬傷,所以在熟悉 DHT11 之後可以選擇更高階的同類產品,例如 DHT2x 系列

3,448 total views, 2 views today

ESP8266 應用一:智能插座 .2 認識 ESP8266 及連上 WiFi

參考

初期只要跟著佑老師的 youtube 影片教學,買一塊 ESP8266 照著做一些實驗就差不多了

Hoyo 是買這個 (NodeMCU 開發板 ESP8266串口WiFi模塊 ESP-12E Lua 物聯網 CP2102 (NOD002)) 因為在台南可以直接去拿比較方便

NodeMcu 腳位圖

NodeMcu 板上 LED 是 D4 (GPIO2),一開始沒有其他硬體配合可以先嘗試控制這個燈號

ESP8266 可控制 LED 燈號

USB 驅動

USB\VID_1A86&PID_7523

http://www.arduined.eu/files/CH341SER.zip

Arduino 開發環境設定

Hoyo 選擇的是 Arduino 開發,所以請到 Arduino 官網下載,初學者建議直接下載安裝檔比較省事

安裝完成開啟先讓 Arduino IDE 支援 ESP8266

檔案 → 偏好設定 → 額外的開發板管理者網址,輸入以下網址

工具 → 開發板 → 開發板管理員,過濾輸入 esp8266 選擇版本安裝,請使用 2.5.0 以後版本

控制板上的 LED 閃爍

第一個程式就是讓上面說的板上 LED 閃爍

儲存後上傳到 ESP8266 執行即可看到閃爍的 LED

連上 WiFi & 讀取網頁

第二步就是連上 WiFi 並且讀取,記得修改成自己 WiFi AP 名稱和密碼

  • WIFI_AP : AP 模式
  • WIFI_STA : Client 模式
  • WIFI_AP_STA : 同時是 AP 也是 Client
  • WIFI_OFF : 關閉

可以打開「序列埠監控視窗」觀察運行結果

8,967 total views, 11 views today

ESP8266 應用一:智能插座 .4 ACS712 交流電流偵測

事前叮嚀:

  1. 電流偵測在搜尋資料時,請先確認該應用場合是直流還是交流?交流是正弦波,對於量測並不是直接取一次樣就可以搞定
  2. 目前看到網路影片資料,極大多數都沒有查看 datasheet ,在最大值輸出電壓全部都是錯的,5A 只到 3.5V,20A 30A 也只到 4.5V,所以計算公式全是錯的
  3. ACS712 只能使用 5V ,輸出自然也是 5V ,ESP8266 當然不支援,網路上看到可以使用電平轉換或是電阻分壓的方式接入,不過為了更精準的量測最後決定升級成「雙核」版本,使用 Arduino UNO + ESP8266 來達到 ACS712 + WiFi 的目的
  4. 有看到搭配 ADS1115 的使用方式,沒使用過不確定效果

什麼是 ACS712

簡單說就是,一顆測量電流後轉換成電壓大小的 IC ,根據電壓大小即可換算用電

應用硬體線路

 

 

Datasheet 對於量測後輸出電壓的解釋

ACS712 有三個型號 5A, 20A, 30A 我們就看 5A 和 30A 就好了

先看 5A 的

當 Vcc 為 5V 時,輸出 2.5V 為 0 負載,滿負載是 3.5V

然後是 30A 的

一樣 Vcc 為 5V 時,2.5V 為 0 負載,滿負載 30A 時為 4.5V

無論哪個型號,輸出電壓結果都是線性的,換句話說就是可以直接把 「輸出電壓 – 2.5」 然後和極限電壓來做簡單的計算即可得到真正的負載電流

接上 Arduino 的情況

當我使用一顆 ACS712 30A 的偵測器時,接到 A0 的類比腳位,0 負載時理想值是收到 511 左右的值,這是因為 ACS712 0 負載時會輸出 2.5V 的電壓

換句話說,如果使用 30A 這顆 IC 的話,那就只能得到 408 ( (1024/5) * (4.5-2.5) = 408 ) 個取樣,每個取樣為 0.074A,接到 110V 交流電就是 8.1W

也就是說精度就是 0.074A,數值抖一下就是 8.1W 的差異,當然這樣 30A 的情況,如果是 5A 的話因為滿負載是 3.5V 所以就要自己換算一下 (等 Hoyo 自己有用到再換算更新上來 )

AC 交流

  • https://ngsir.netfirms.com/capplets/rms/rms.pdf

交流電負載的情況就是交流電「正弦波」的樣子,因此必須至少取樣一個以上的週期後的數據才能計算電流。

台灣交流電為 60HZ 所以一次的取樣至少不能低於 1/60 = 0.0167 秒 才是一個週期

週期取樣計算 Arduino 程式

SoftwareSerial – Arduino + ESP8266 雙核通訊

Arduino 和 ESP8266 使用 SoftwareSerial 達到雙向資訊交換,需要注意串列鮑率(Baud Rate) 不能設定太低,會掉資料

Arduino 端,接 ACS712

ESP8266

ADS1115

更準的類比數位轉位器以及可應用在 ESP8266 上

6,399 total views, 11 views today

Hoyo 教你 Web Audio API – 02. 簡易播放介面

 

一、使用按鈕控制

現成的檔案在這裡 02_audio

二、滑動控制音量

現成的檔案在這裡 03_audio

音量處理好了,所以進度也可以照樣造句?事情當然沒有這麼單純…

三、播放進度及控制

audio.currentTime即可得到播放進度,例如增加下列程式碼即可多一個查詢進度的按鈕,單位為秒

指定數值即可跳轉,例如增加以下程式碼就可以立刻跳到 30 秒處

目前的進度檔案 04_audio

四、會動的進度條

用功的同學綜合上面了解的資訊可以先嘗試自行做做看,和 Hoyo 一樣偷懶的同學就直接往下看

這裡的坑是,進度本身會動,指定進度就是控制滑軌,可惜兩者會打架,所以播放進度和控制必須分開做,播放進度可以使用 CSS 填色或是也用一個 <input type=”range”>,控制進度當然就是 <input type=”range”>,下面因為懶惰所以就用兩個 range

完成檔案 05_audio

至此對於 <audio> 的基礎控制已經完成,不過實務上使用還是有很多問題,相信同學也有測試出來,例如音樂還沒載入就播放,或是播放中想要上一頁或切換網頁卡住問題,這些後面會講到,不過接下來是美化播放介面,不是用醜醜的按鈕了

575 total views, no views today

Hoyo 教你 Web Audio API – 01. 從 HTML5 Tag 開始,讓音樂從網頁播放

Hoyo 教你 Web Audio API 系列目標是教同學如何建立自己的音樂串流平台

  • RWD,跨平台
  • 串流
  • 存取控管,付費內容或是隱私不公開
  • 點一次播放聽一整天
  • 搜尋歌曲,分類、歌手、曲目名稱
  • 錄音

一、拿香跟拜

  1. 在桌面準備一個測試網頁 audio.html
  2. 使用記事本或其他純文字編輯器 (Sublime Text) 開啟 audio.html
  3. 拿香跟拜,或是直接下載 audio

雙擊開啟 audio.html 看到類似這樣的網頁,並且點選播放可以順利聽到音樂就成功了

二、不同的瀏覽器、不同的播放介面

Hoyo 相信大多數的網頁畫面都和上面那張不同,應該比較接近下面這樣

除了畫面長相不同之外還多了下載按鈕,當然也有可能長這樣

為了統一播放介面所以接下來就必須 Hoyo 教你 Web Audio API – 02. 簡易播放介面

440 total views, no views today

Hoyo 教你串金流 – 綠界

Hoyo 提供原廠都沒有的測試工具

下載綠界串接文件

需要下載 「全方位金流 API 技術文件」以及「PHP SDK」

撰寫文件時為 2018-6-29 , API 文件版本 5.1.17

流程

雖然金流 API 文件第 2 章有交易流程說明,可是第一次使用看懂的機率是極低的,所以 Hoyo 另外整理為

  1. 送出一個訂單表單送到「介接路徑」
  2. 準備接收綠界付款結果的資訊

訂單表單

網頁表單 – f.html

  • MerchantTradeNo : 訂單編號,一個編號只能用一次,所以針對實際情況不能直接將網站的訂單編號送出,必須使用一個對應的變動編號,這個問題後面再討論
  • ReturnURL : 必須要可以對外訪問的網址,所以沒有自己的網站是不能接線上支付 (沒有意義)
  • MerchantID : 測試的商家 value 都要根據 API 文件設定
  • HashKey 同上
  • HashIV 同上

送給 PHP 計算 CheckMacValue – Ecpay.php

  • PHP 的作用只有計算 CheckMacValue 這個值之後附加到表單再送到綠界
  • 送出之後的所有錯誤綠界都會清楚的回應

接收付款結果資訊

payEcpay.php

  • 根據回傳格式說明,至少要成功支付以及驗證碼正確才進行後續處理,否則可能是造假回傳資訊

模擬綠界回傳表單

可以自己設計表單模擬綠界回傳送出資訊,方便接收除錯

綠界回傳資訊

使用 print_r($_POST); 把回傳資訊展開大概就是長這樣

20,768 total views, 6 views today