Arduino 演練 - 利用LCD及網頁顯示溫溼度

這次主要是將DHT11溫溼度感測板所得到的數據呈現在LCD及網頁上面，重點放在如何利用W5100乙太網路擴展版建立一微型網站伺服器及如何將溫溼度顯示在客戶端(client)上，如此一來只要透過網頁也可以輕鬆查詢溫溼度，而不需要到現場查看LCD!

這次使用的素材如下：

1. Arduino Uno R3
2. LiquidCrystal_I2C*1

3. W5100乙太網路擴展板*1

4. DHT11溫溼度感測板*1

5. 杜邦線(公對母)*4 (LCD使用)

6. 杜邦線(公對母)*3 (DHT11使用)

7. 杜邦線(公對公)*2 (V5及GND)

7. 麵包板

8. RJ45網路線

Arduino IDE版本 1.8.16

實際電路接法

一、演練效果說明

1. 接上電源後，初始化DHT、LCD及微型網站伺服器，此時等待伺服器回應目前動態分配的IP address

2. 再來LCD會每隔2秒更新讀取到的溫溼度

3. 同時可在網頁上輸入IP address連結到網站伺服器來顯示溫溼度，並每隔2秒進行網頁更新

二、簡單說明一下電路接法

#乙太網路擴展板 → Arduino UNO

擴充板插上 UNO板

#麵包板 → 乙太網路擴展板

麵包板+ → V5

麵包板- → GND

#DHT11 → 乙太網路擴展板

DAT → 數位2

VCC → 麵包板+

GND → 麵包板-

#LiquidCrystal_I2C → 乙太網路擴展板
VCC → 麵包板+
GND → 麵包板-
SDA → A4
SCL → A5

三、程式說明

這支程式主要需使用到二個外部Library，可以在IDE上的library manager進行安裝，分別為

依序載入及宣告的global變數如下：


#include <DHT.h>
#include <LiquidCrystal_I2C.h>
#include <Ethernet.h>

#define DHTPIN 2
#define DHTTYPE DHT11   // DHT 11

DHT dht(DHTPIN, DHTTYPE);

// Set the LCD address to 0x27 for a 16 chars and 2 line display
LiquidCrystal_I2C lcd(0x27, 16, 2);

EthernetServer server(80);

byte mac[]={0x00, 0xAA, 0xBB, 0xCC, 0xDE, 0x02};
byte tempSymbol[8] = {B11100, B10100, B11100, B00000, B00000, B00000, B00000, B00000};

關於伺服器的部分是傾聽80 port；mac的部分，由於該擴充版並非官方的乙太網路卡，因此針對mac address就隨意設定，只要不與網域內的其他裝置一樣即可!

3.1、初始化


void setup() {
  dht.begin();
  
  lcd.init();
  lcd.backlight();

  lcd.createChar(0, tempSymbol);
  lcd.home();

  lcd.print("Initializes netw");
  lcd.setCursor(0,1);
  lcd.print("ork settings...");
  if(Ethernet.begin(mac)){
    server.begin();

    lcd.clear();
    lcd.print("IP Address ");
    lcd.setCursor(0,1);
    lcd.print(Ethernet.localIP());
  }else{
    lcd.clear();
    lcd.print("Cannot get IP Ad");
    lcd.setCursor(0,1);
    lcd.print("dress!");
  }
  delay(5000);
  lcd.clear(); //clear lcd
}

在LCD內建置一自訂符號(tempSymbol)，主要是在LCD上想呈現度C的"度"這個符號

再來若有連接網路線，網站伺服器才可以順利初始化，並顯示動態分配的IP address

3.2、溫溼度顯示於LCD及網頁上


void loop() {
  lcd.home();
  
  float h = dht.readHumidity();
  float c = dht.readTemperature();

  EthernetClient client = server.available();
  if(client){
    while(client.connected()){
      if(client.available()){
        client.println("HTTP/1.1 200 OK");
        client.println("Content-Type: text/html");
        client.println();

        client.println("<!doctype html>");
        client.println("<html><head>");
        client.println("<meta http-equiv=\"refresh\" content=\"2\" />");
        client.println("</head></body>");
        client.println("<h1>Humidity (%):");
        client.println(h,0);
        client.println("</h1>");
        client.println("<br>");
        client.println("<h1>Temperature (°C):");
        client.println(c,0);
        client.println("</h1>");
        client.println("</body></html>");
        break;
      }
    }
    delay(1);
    client.stop();
  }
  
  if(isnan(h) || isnan(c)){
    lcd.print("Sensor Error");
  }else{
    lcd.setCursor(0,0);
    lcd.print("Humidity (%):");
    lcd.print(h,0);

    lcd.setCursor(0,1);

    lcd.print("Temp (");
    lcd.print(char(0));
    lcd.print("C):");
    lcd.print(c,0);
  }
  delay(2000);
  lcd.clear(); //clear lcd
}

接著在網頁上輸入IP，此時會輸出溫溼度資訊及每隔2秒進行網頁重新整理

LCD上也會同步顯示目前的溫溼度資訊

最後DEMO影片如下：

參考資料

趙英傑著超圖解 arduino 互動設計入門第3版第九、十五章節

Zhi-Bin's 談天說地

搜尋此網誌

Arduino 演練 - 利用LCD及網頁顯示溫溼度

留言

張貼留言