一.前言

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

ESP8266 鼓捣记 - 从零制作一个温湿度计的更多相关文章

  1. Unity3D游戏开发从零单排(四) - 制作一个iOS游戏

    提要 此篇是一个国外教程的翻译,尽管有点老,可是适合新手入门. 自己去写代码.debug,布置场景,能够收获到非常多.游戏邦上已经有前面两部分的译文,这里翻译的是游戏的最后一个部分. 欢迎回来 在第一 ...

  2. 使用ESP8266制作一个微型气象站

    本文主要介绍如何制作一个微型气象站. 这个想法和大部分代码来自Daniel Eichhorn在这个网址上的博客,可以去看看,这里面有一些很酷的东西! http://blog.squix.ch/2015 ...

  3. TensorFlow练习13: 制作一个简单的聊天机器人

    现在很多卖货公司都使用聊天机器人充当客服人员,许多科技巨头也纷纷推出各自的聊天助手,如苹果Siri.Google Now.Amazon Alexa.微软小冰等等.前不久有一个视频比较了Google N ...

  4. 怎样制作一个横版格斗过关游戏 Cocos2d-x 2.0.4

     本文实践自 Allen Tan 的文章<How To Make A Side-Scrolling Beat 'Em Up Game Like Scott Pilgrim with Coco ...

  5. 使用CocosSharp制作一个游戏 - CocosSharp中文教程

    注:本教程翻译自官方<Walkthrough - Building a game with CocosSharp>,官方教程有很多地方说的不够详细,或者代码不全,导致无法继续,本人在看了G ...

  6. CSharpGL(34)以从零编写一个KleinBottle渲染器为例学习如何使用CSharpGL

    CSharpGL(34)以从零编写一个KleinBottle渲染器为例学习如何使用CSharpGL +BIT祝威+悄悄在此留下版了个权的信息说: 开始 本文用step by step的方式,讲述如何使 ...

  7. ios学习-制作一个浏览图片的Demo

    一.项目要求:制作一个浏览图片的Demo,要求包含夜间模式,以及改变图片大小,能够显示不同的图片描述 二.开发步骤: 1.在storyboard上添加一个空白的View,然后添加”设置“按钮,添加im ...

  8. iOS学习——制作一个小型加法计算器

    一.项目要求:制作一个加法计算器.在第1个和第2个文本框中输入两个整数,然后点击“计算”按钮,可将计算结果显示在第3个文本框中. 二.开发步骤: 1.搭建UI界面 2.监听按钮的点击事件 3.获取文本 ...

  9. 制作一个简洁的jquery插件

    原文:http://mp.weixin.qq.com/s?__biz=MzAxMzgwNDU3Mg==&mid=401571467&idx=1&sn=08cb00963e6ef ...

  10. 用Phaser来制作一个html5游戏——flappy bird (二)

    在上一篇教程中我们完成了boot.preload.menu这三个state的制作,下面我们就要进入本游戏最核心的一个state的制作了.play这个state的代码比较多,我不会一一进行说明,只会把一 ...

随机推荐

  1. django自带加密模块的使用

    首先,引入模块:  代码如下 复制代码 >>> from django.contrib.auth.hashers import make_password, check_passwo ...

  2. svn黄色叹号解决

    客户端是TortoiseSVN的话,在该文件或文件夹上点右键,选择TortoiseSVN——revert

  3. bzoj1216 [HNOI2003]操作系统

    1216: [HNOI2003]操作系统 Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 751  Solved: 419[Submit][Status ...

  4. iSlider手机平台JS滑动组件

    iSlider手机平台JS滑动组件,无任何插件依赖.它能够处理任何元素,例如图片或者DOM元素.它有如下特性:能够自定义动画,自带的动画包括default, rotate, flip 和 depth你 ...

  5. extern int *a与extern int a[]

    extern int *a与int a[] Table of Contents 1. 问题: 2. 解答: 1 问题: 以下的声明取自某个源文件: int a[10]; int *b=a; 但在还有一 ...

  6. eval和列表解析的一处陷阱

    >>> def f(): a=1 return [i+a for i in range(3)] >>> f() [1, 2, 3] >>> def ...

  7. Spring Boot开发MongoDB应用实践

    本文继续上一篇定时任务中提到的邮件服务,简单讲解Spring Boot中如何使用MongoDB进行应用开发. 上文中提到的这个简易邮件系统大致设计思路如下: 1.发送邮件支持同步和异步发送两种 2.邮 ...

  8. Open Source 开发工具集

    Open Source 开发工具集 转自:http://www.linuxforum.net原作者:gogoliu(Pooh-Bah) 编辑器: vi:老牌编辑器,在各个unix和unix-like平 ...

  9. CXF2.7整合spring发布webservice,返回值类型是Map和List&lt;Map&gt;类型

    在昨天研究了发布CXF发布webservice之后想着将以前的项目发布webservice接口,可是怎么也发布不起来,服务启动失败,原来是自己的接口有返回值类型是Map. 研究了一番之后,发现: we ...

  10. HADOOP+SPARK+ZOOKEEPER+HBASE+HIVE集群搭建(转)

    原文地址:https://www.cnblogs.com/hanzhi/articles/8794984.html 目录 引言 目录 一环境选择 1集群机器安装图 2配置说明 3下载地址 二集群的相关 ...