ESP8266 鼓捣记 - 从零制作一个温湿度计

一.前言

经过上一篇文章 《ESP8266 鼓捣记 - 入门（环境搭建） 》搭建好环境后，肯定不会满足于 Hello World ，想快速做一个实际有用的东西出来，我认为温湿度计就非常合适，简单易做，需要的材料也不多。

二.材料的准备

除了 ESP8266 开发板以外，还需要一个 DHT11 温湿度传感器模块，这个直接在某宝搜索即可，几块钱一个。

因为我是直接买的物联网开发套餐，包含了DHT11模块的，板子也是定制的学习板子，包含了很多针脚，只需要用杜邦线连接起来就行了，不需要锡焊，如果你是买的普通板子，可能要考虑买个电烙铁来焊接模块。

三.连接电路

这个图片是我买的套餐里，卖家提供的资料，把 DHT11的针脚连接到 ESP8266 板子上。完成后如下图：

四.编码

编码是基于点灯科技提供的 Blinker 物联网开发平台，它提供了丰富的示例代码，对于温湿度计来说，有现成的代码。

首选需要安装 DHT11 库

然后是编码

#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，标注了各个控件的类型。

数据控件的配置

几乎所有控件都是根据数据 key 来读取并展示数据的，数据的详细信息我们也可以在 debug 控件里看到。

我的界面配置导出

{¨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 显示屏，就可以做成一个媲美现在淘宝上卖的某些温湿度计了。这个的话我暂时只能想想了，这一块是我从没接触过的领域，还需要时间去学习。生命不息，学习不止！