★ Blynk 應用 (二) : 在手機顯示即時溫溼度與光度

上週完成用手機透過 Blynk App 控制 Arduino Nano 板上 D13 LED 的實驗, 參考 :

# Blynk 應用 : 用手機控制 Arduino (一)

這實驗是 Write 操作, 也就是由 Blynk (手機) 向遠端 Arduino 做寫入動作. 實際上除了寫入以外, Blynk 也有好幾個元件是用來讀取 Arduino 所送出的資料 (Read 操作), 然後以圖形呈現在手機上. 今天就來測試看看如何將 DHT11 與光敏電阻所組成的小型氣象站呈現於手機上的 Blynk App, 這樣就不需要開瀏覽器進去 Xively 或 ThingSpeak 網站看測量結果了. 作法參考 :

# Weather and Security Station with Blynk

雖然這篇使用 CC32000 Wifi 擴充板, 不是 ESP8266, 但可以參考它如何使用 Virtual Pin 來連接手機 App 與 Arduino 所取得的量測值.

以下測試程式是在我自己用洞洞板焊接的 Arduino Nano+ESP8266 IOT 模組上進行實驗, 電路圖參考 :

# 製作 Arduino Nano + ESP8266 物聯網模組 (四) : 完結篇

首先開啟手機上的 Blynk App 來新增專案.

輸入專案名稱 "WeatherStation", 選擇我使用的板子 "Arduino Nano", 按 "E-mail" 鈕將認證金鑰寄到信箱以便複製到程式中, 按 "Create" 產生專案 :

這樣就產生了一個空的專案面板 :

按右上方的 + 或面板中任何一處就會出現元件箱 (Widget Box), 選取其中的 Graph :

面板上會出現一個圖表 :

點一下此圖表會進入設定畫面, 輸入元件名稱 "oC" (表示攝氏溫度) :

再按 "PIN" 鈕選擇 Virtual V0, 表示此圖表將從虛擬腳位 V0 讀取資料 :

設定適當溫度範圍, 一般 0~40 即可, 讀取週期 (10 秒), 以及圖表樣式為折線圖 (LINE) :

接下來如法炮製新增濕度 RH% 與光度 LM% 的圖形顯示元件, 其值都是 0~100% :

OK, 這樣 App 設定部分就完成了. 接下來是 Arduino 程式部分, 溫溼度與照度量測參考 :

# 以 Arduino+ESP8266 物聯網模組重作 DHT11 溫溼度實驗
# Arduino 光敏電阻測試

我使用 Arduino 的 D2 連接到 DHT11 的 data 腳, 使用 A0 腳位連接光敏電阻與 10K 電阻的分壓點以取得照度值, 然後將量測到的溫溼度與照度綁定到 Blynk 的 V0~V2 虛擬腳位. 關於虛擬腳位用法, 參考 :

# How to use Virtual Pins in Blynk (有範例)

而適用 Arduino + ESP8266 架構, 即把 ESP8266 當成 Arduino 的 Wifi 擴充板, 所需要的函式庫與 Arduino 應用程式, 參考前篇關於 Blynk 控制 LED 的程式 :

# Blynk 應用 : 用手機控制 Arduino (一)

完整程式如下 :

#define BLYNK_PRINT Serial    // Comment this out to disable prints and save space
#include <ESP8266_Lib.h>
#include <BlynkSimpleShieldEsp8266.h>
#include "DHT.h"
#define DHTPIN 6
#define DHTTYPE DHT11

// You should get Auth Token in the Blynk App.
// Go to the Project Settings (nut icon).
char auth[] = "c4965ac3d8b8464a8e6a0ffxxxxxxaae";

// Your WiFi credentials.
// Set password to "" for open networks.
char ssid[] = "EDIMAX-tony";
char pass[] = "1234567890";

// Hardware Serial on Mega, Leonardo, Micro...
//#define EspSerial Serial1

// or Software Serial on Uno, Nano...
#include <SoftwareSerial.h>
SoftwareSerial EspSerial(7, 8); // RX, TX

// Your ESP8266 baud rate:
#define ESP8266_BAUD 9600

ESP8266 wifi(&EspSerial);
DHT dht(DHTPIN, DHTTYPE); // Initialize DHT sensor

void setup() {
  // Set console baud rate
  Serial.begin(9600);
  delay(10);
  // Set ESP8266 baud rate
  EspSerial.begin(ESP8266_BAUD);
  delay(10);
  Blynk.begin(auth, wifi, ssid, pass);
  }

void loop() {
  Blynk.run();
  }

BLYNK_READ(0) {
  float Temperature=dht.readTemperature(); //get temperature (C) from DHT11
  Blynk.virtualWrite(0, Temperature);
  BLYNK_LOG("Temperature %5.1f", Temperature);
  }

BLYNK_READ(1) {
  float Humidity=dht.readHumidity(); //get humidity from DHT11
  Blynk.virtualWrite(1, Humidity);
  BLYNK_LOG("Humidity %5.1f", Humidity);
  }

 BLYNK_READ(2) {
  int cds=analogRead(A0); //get cds voltage (0~5V to 0~1023 dark)
  int Luminance=100-map(cds,0,1023,0,100); //map 0~1023(dark) to 0(dark)~100%
  Blynk.virtualWrite(2, Luminance);
  BLYNK_LOG("Luminance %3d", Luminance);
  }

這裡我們定義了三個 BLYNK_READ() 函數, 其參數為虛擬腳位編號 (僅數字, 不含 V), 分別對應 V0~V2 三個虛擬腳位所綁定的元件. 每當手機 Blynk App 裡的元件 (Widget) 向 Arduino 提出資料要求時, 這些對應的函數就會被呼叫. 上面在設定三個元件時, 我們指定 Request 頻率為每 10 秒提出要求一次, 亦即此三個函數每 10 秒就會被呼叫一次. 當此三函數被呼叫時, 我們就去讀取測量值, 然後呼叫 Blynk.virtualWrite() 函數把測量值寫進相應之虛擬腳位, 這樣手機 App 便能收到所傳送的測量值了.

另外這裡的 BLYNK_LOG() 函數其實就是我們常用的 Serial.println(), 即向指定序列埠輸出訊息, 但 Blynk 定義的這個 BLYNK_LOG() 較有彈性, 只要在程式開始時用定義 BLYNK_PRINT 常數為哪一個序列埠 (須在第一行), 之後只要直接使用 BLYNK_LOG() 即可. 參考 Blynk 說明文件關於 Debugging 部分 :

# http://docs.blynk.cc

To enable debug prints on the default Serial, add on the top of your sketch (should be the first line):

#define BLYNK_PRINT Serial // Defines the object that is used for printing
#define BLYNK_DEBUG        // Optional, this enables more detailed prints

And enable Serial Output in setup():

Serial.begin(9600);

其實用 Serial,println() 就可以了.

此程式編譯後記憶體耗用 :

草稿碼使用了 23,524 bytes (76%) 的程式存儲空間。最大值為 30,720 bytes。
全域變數使用了 861 bytes (42%) 的動態記憶體，剩餘 1,187 bytes 供局部變數。最大值為 2,048 bytes 。

程式上傳 Arduino 後, 手機連上網路, 打開 Blynk, 執行 WeatherStation 專案, 可看到溫濕度與照度的摺線圖, 時間軸會不斷往左移動更新數據. 若覺得 10 秒更新頻率太低, 可以改為 1 秒 :

圖中照度突然變小是因為我關掉檯燈, 測試光敏電阻是否真的有在動.

也可以使用儀表 Gauge 來呈現, 可以在專案中新增一個 Gauge 元件, 並賦予 V3 虛擬腳位來量測溫度 :

然後在上面程式中添加 BLYNK_READ(3) 函數將溫度寫入 V3 腳位 :

BLYNK_READ(3) {
  float Temperature=dht.readTemperature(); //get temperature (C) from DHT11
  Blynk.virtualWrite(3, Temperature);
  }

重新上傳程式就可以看到溫度表了 :

不過, 儀表只能呈現目前的測量值, 沒辦法看到隨時間變動的情形. 我覺得使用 Blynk 比開啟瀏覽器連線到 ThingSpeak 要簡單得多, 可以透過 Internet 隨時監看遠端設備的運作情況, 實在非常方便. 這如果用 ThingSpeak 來做, 得自己寫個 App 從 ThingSpeak 伺服器讀取數據才行, 總之, Blynk 已經幫我們寫好 App 啦! 而且非常有彈性, 可以隨時修改設定.

在專案標題按兩個圈圈圖形, 再按 "Generate Link" 鈕即可分享此專案 :

手機只要安裝 Blynk, 以照相機讀取上面 QR Code 即可取得此專案.