ESP8266 鼓搗記 - 從零製作一個溫溼度計

曉晨Master發表於2020-11-19

一.前言

經過上一篇文章 《ESP8266 鼓搗記 - 入門（環境搭建） 》搭建好環境後，肯定不會滿足於 Hello World ，想快速做一個實際有用的東西出來，我認為溫溼度計就非常合適，簡單易做，需要的材料也不多。

二.材料的準備

除了 ESP8266 開發板以外，還需要一個 DHT11 溫溼度感測器模組，這個直接在某寶搜尋即可，幾塊錢一個。

image-20201119222038230

因為我是直接買的物聯網開發套餐，包含了DHT11模組的，板子也是定製的學習板子，包含了很多針腳，只需要用杜邦線連線起來就行了，不需要錫焊，如果你是買的普通板子，可能要考慮買個電烙鐵來焊接模組。

三.連線電路

image-20201119222322735

這個圖片是我買的套餐裡，賣家提供的資料，把 DHT11的針腳連線到 ESP8266 板子上。完成後如下圖：

image-20201119222519123

四.編碼

編碼是基於點燈科技提供的 Blinker 物聯網開發平臺，它提供了豐富的示例程式碼，對於溫溼度計來說，有現成的程式碼。

首選需要安裝 DHT11 庫

image-20201119222900583

然後是編碼


#define BLINKER_WIFI

#include <Blinker.h>

//blinker 提供的key
char auth[] = "";
//你的wifi名字
char ssid[] = "";
//你的wifi密碼
char pswd[] = "";

//傳送到 blinker 的溼度資料key
BlinkerNumber HUMI("humi");
//傳送到 blinker 的溫度資料key
BlinkerNumber TEMP("temp");

//引入 DHT 庫
#include <DHT.h>

#define DHTPIN 2

#define DHTTYPE DHT11   // DHT 11
//#define DHTTYPE DHT22   // DHT 22  (AM2302), AM2321
//#define DHTTYPE DHT21   // DHT 21 (AM2301)

DHT dht(DHTPIN, DHTTYPE);

uint32_t read_time = 0;

float humi_read, temp_read;

void dataRead(const String & data)
{
    BLINKER_LOG("Blinker readString: ", data);

    Blinker.vibrate();
    
    uint32_t BlinkerTime = millis();
    
    Blinker.print("millis", BlinkerTime);
}

void heartbeat()
{
    HUMI.print(humi_read);
    TEMP.print(temp_read);
}

void dataStorage() {
    //新增資料儲存 以便於圖示資料展示
    Blinker.dataStorage("humi", humi_read);
    //新增資料儲存 以便於圖示資料展示
    Blinker.dataStorage("temp", temp_read);
}

void setup()
{
    Serial.begin(115200);
    BLINKER_DEBUG.stream(Serial);

    pinMode(LED_BUILTIN, OUTPUT);
    digitalWrite(LED_BUILTIN, LOW);

    Blinker.begin(auth, ssid, pswd);
    Blinker.attachData(dataRead);
    Blinker.attachHeartbeat(heartbeat);
    Blinker.attachDataStorage(dataStorage);
    
    dht.begin();
}

void loop()
{
    Blinker.run();

    if (read_time == 0 || (millis() - read_time) >= 2000)
    {
        read_time = millis();
        //讀取溼度
        float h = dht.readHumidity();
        //讀取溫度
        float t = dht.readTemperature();        

        if (isnan(h) || isnan(t)) {
            BLINKER_LOG("Failed to read from DHT sensor!");
            return;
        }

        float hic = dht.computeHeatIndex(t, h, false);

        humi_read = h;
        temp_read = t;

        BLINKER_LOG("Humidity: ", h, " %");
        BLINKER_LOG("Temperature: ", t, " *C");
        BLINKER_LOG("Heat index: ", hic, " *C");
    }
}

程式碼我就不一一講解了，加了部分註釋，複製這段程式碼，設定 Blinker 的 key，然後wifi名字和密碼，寫入esp8266即可完成，非常簡單。

五.設定UI

因為我們是基於 Blinker 平臺的，所以可以直接使用 Blinker APP 來連線我們的開發板，該APP提供了非常強大的UI編輯功能。

這是我設計好的UI，標註了各個控制元件的型別。

image-20201119223727223

資料控制元件的配置

image-20201119223828868

幾乎所有控制元件都是根據資料 key 來讀取並展示資料的，資料的詳細資訊我們也可以在 debug 控制元件裡看到。

image-20201119223921652

我的介面配置匯出

{¨config¨{¨headerColor¨¨transparent¨¨headerStyle¨¨dark¨¨background¨{¨img¨¨assets/img/headerbg.jpg¨¨isFull¨«}}¨dashboard¨|{¨type¨¨tex¨¨t0¨¨曉晨溫溼度計¨¨t1¨¨文字2¨¨bg¨É¨ico¨´´¨cols¨Í¨rows¨Ê¨key¨¨tex-272¨´x´É´y´É¨speech¨|÷¨lstyle¨Ê¨clr¨¨#00A90C¨}{ßA¨num¨ßC¨溼度¨ßH¨fad fa-smile¨ßO¨#389BEE¨¨min¨É¨max¨¢1c¨uni¨´%´ßGÉßIÍßJËßK¨humi¨´x´É´y´ÊßM|÷ßNÊ}{ßA¨deb¨¨mode¨ÉßGÉßIÑßJÍßK¨debug¨´x´É´y´¤AßM|÷ßNÊ}{ßAßQßC¨溫度¨ßH¨fad fa-thermometer-three-quarters¨ßOßTßUÉßVº0ßW´℃´ßGÉßIÍßJËßK¨temp¨´x´Í´y´ÊßM|÷ßNÊ}{ßA¨cha¨ßGɨsty¨¨line¨ßOßP¨sty1¨ßg¨clr1¨¨#EA0909¨¨sty2¨ßg¨clr2¨ßTßIÑßJÍßKßd´x´É´y´ÌßM|÷ßC¨溫度曲線¨¨key1¨´´ßE´´ßNÊ}{ßAßeßGÉßfßgßOßTßhßgßißTßkßgßlßTßIÑßJÌßKßX´x´É´y´ÐßM|÷ßC¨溼度曲線¨}÷¨actions¨|¦¨cmd¨¦¨switch¨‡¨text¨‡¨on¨¨開啟?name¨¨off¨¨關閉?name¨—÷¨triggers¨|{¨source¨ßr¨source_zh¨¨開關狀態¨¨state¨|ßtßv÷¨state_zh¨|´開啟´´關閉´÷}÷}

六.展示

完成後的樣子

對於小米溫度計2

七.結束

這個溫度計做起來還是非常簡單，很多東西都有現成的示例。基於現在的還可以使用3d印表機，列印一個漂亮的殼子，再加一個 LED 螢幕，就可以做成一個媲美現在淘寶上賣的某些溫溼度計了。這個的話我暫時只能想想了，這一塊是我從沒接觸過的領域，還需要時間去學習。生命不息，學習不止！

相關文章