当前位置： 首页 > news >正文

MicroPython ESP32网页实时更新DHT11数据显示

news 2026/3/31 21:03:57

MicroPython ESP32网页实时更新DHT11数据显示

  • 📌相关篇《MicroPython ESP32 读取DHT11温湿度传感器数据》
  • 📍《【Micropython esp32/8266】网页点灯控制示例》
  • ✨本例综合以上两篇文章内容实现：在本地网页中显示DHT11温度传感器数据。可以做到在线监测湿度度数据变化。
  • ✨本示例基于Thonny平台下开发。✨
  • 🎉固件版本：esp32-20220618-v1.19.1应该也兼容最新的版本。
  • 🌼效果如下：
    在这里插入图片描述
  • 📖工程架构
    在这里插入图片描述

⛳注意事项

  • 🚩运行程序前，DHT11传感器必须已经接到指定定义的引脚上了，否则运行会报错！！！
  • 🧲在boot.py为文件中需要修改成个人的WiFi信息。
  • 🎯本地路由器设置不能开启AP隔离功能，否则设备与设备直接无法正常访问。
  • 🔰设备端和访问端必须在同一个网络环境下。
  • 🏳‍🌈不支持5G网络。

步骤

在这里插入图片描述

📘代码实现

  • boot.py
# This file is executed on every boot (including wake-boot from deepsleep)
#import esp
#esp.osdebug(None)
#import uos, machine
#uos.dupterm(None, 1) # disable REPL on UART(0)
#import gc
#import webrepl
#webrepl.start()
#gc.collect()try:import usocket as socket
except:import socketfrom machine import Pin
import networkimport esp
esp.osdebug(None)import gc
gc.collect()
# wifi信息
ssid = 'MERCURY_D268G'	# 填写自己的WiFi信息
password = 'pba5ayzk'	# 填写自己的WiFi信息station = network.WLAN(network.STA_IF)station.active(True)
station.connect(ssid, password)while station.isconnected() == False:passprint('Connection successful')
print(station.ifconfig())led = Pin(2, Pin.OUT)
  • 📑main.py
import dht
import machined = dht.DHT11(machine.Pin(4))
d.measure()
t=d.temperature() # eg. 23 (°C)
h=d.humidity()    # eg. 41 (% RH)
def web_page():html = """<html><head><meta http-equiv="refresh" content="3"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="icon" href="data:,"><style>body { text-align: center; font-family: "Trebuchet MS", Arial;}table { border-collapse: collapse; width:45%; margin-left:auto; margin-right:auto;}th { padding: 12px; background-color: #0043af; color: white; }tr { border: 1px solid #ddd; padding: 12px; }tr:hover { background-color: #bcbcbc; }td { border: none; padding: 12px; }.sensor { color:red; font-weight: bold; background-color: #bcbcbc; padding: 1px;</style></head><body><h1>ESP Web DHT11 DATA</h1><table><tr><th>MEASUREMENT</th><th>VALUE</th></tr><tr><td>Temperature</td><td><span class="sensor">""" + str(t) + """</span></td></tr><tr><td>Humidity</td><td><span class="sensor">""" + str(h) + """</span></td></tr></body></html>"""return htmls = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
s.bind(('', 80))
s.listen(5)while True:conn, addr = s.accept()conn.settimeout(3.0)print('Got a connection from %s' % str(addr))request = conn.recv(1024)request = str(request)print('Content = %s' % request)response = web_page()conn.send('HTTP/1.1 200 OK\n')conn.send('Content-Type: text/html\n')conn.send('Connection: close\n\n')conn.sendall(response)conn.close()

相关文章：

MicroPython ESP32网页实时更新DHT11数据显示

MicroPython ESP32网页实时更新DHT11数据显示 &#x1f4cc;相关篇《MicroPython ESP32 读取DHT11温湿度传感器数据》&#x1f4cd;《【Micropython esp32/8266】网页点灯控制示例》 ✨本例综合以上两篇文章内容实现&#xff1a;在本地网页中显示DHT11温度传感器数据。可以做到…...

编程日记 2023/8/2 9:33:29

JavaWeb之HTML基础篇（一）

系列文章目录 HTML基础篇&#xff08;一&#xff09; 文章目录 系列文章目录HTML基础篇&#xff08;一&#xff09;[TOC](文章目录) 前言一、HTML简介1.1介绍1.2HTML文件的书写规范1.3 HTML标签介绍1.4 HTML常见的标签 二、CSS的简介2.1css技术介绍2.2 CSS与HTML结合的三种方式…...

编程日记 2023/8/2 9:32:28

TVM_深度学习编译器

TVM_深度学习编译器 TVM所做的是要比传统compiler更偏上层的，你可以把它理解成source-to-source compiler，需要其他的后端(backend)来生成最后的指令。比如当编译的Target是Intel CPU时，翻译的顺序是Relay IR -> TVM IR/ Halide IR -> LLVM IR，之后交给LLVM生成最后…...

编程日记 2023/8/2 9:31:26

Flutter InheritedWidget 共享状态管理

InheritedWidget和React中的context功能类似&#xff0c;可以实现跨组件数据的传递。 定义一个共享数据的InheritedWidget&#xff0c;需要继承自InheritedWidget 这里定义了一个of方法&#xff0c;该方法通过context开始去查找祖先的HYDataWidget&#xff08;可以查看源码查找…...

编程日记 2023/8/2 9:30:25

什么是反射？Java反射？反射的优缺点

目录 什么是反射&#xff08;Reflection &#xff09;&#xff1f;Java反射&#xff1f;反射的优缺点获取Class对象的三种方式&#xff1a;java反射技术的应用场景 什么是反射&#xff08;Reflection &#xff09;&#xff1f; 主要是指程序可以访问、检测和修改它本身状态或行…...

编程日记 2023/8/2 9:29:22

小红书2020校招测试开发后端笔试题卷三

//完全背包求组合数 #include <iostream> #include<vector> #include<set> #include<map> #include<algorithm> using namespace std; int value[300]; // vector<int>vis; // vector<int>vis1; map<vector<int>,int>m…...

编程日记 2023/8/2 9:28:21

python数据可视化Matplotlib

1.绘制简单的折线图 # -*- coding: utf-8 -*- import matplotlib.pyplot as pltinput_values [1, 2, 3, 4, 5] squares [1, 4, 9, 16, 25] plt.style.use(seaborn) fig, ax plt.subplots() ax.plot(input_values, squares, linewidth3) # 线条粗细# 设置图表标题并给坐标…...

编程日记 2023/8/2 9:27:20

firewalld防火墙

firewalld防火墙 它属于包过滤防火墙。工作在网络层&#xff0c;是centos7自带的默认防火墙。主要是取代iptables。 firewalld的两种配置模式&#xff1a; 分别是运行时配置和永久配置。 iptable是静态防火墙 firewalld是动态防火墙 它是按照区域来划分的&#xff0c;有9…...

编程日记 2023/8/2 9:26:19

iMacros WebBrowser Component for .NET

iMacros WebBrowser Component for .NET 在几分钟内实现应用程序自动化 快速轻松地将iMacro集成到您的应用程序中。不需要单独的安装程序。 无缝集成 iMacros与您的.NET应用程序无缝集成&#xff0c;作为Microsoft WebBrowser控件的替代品。它甚至可以用作每个.NET应用程序中的…...

编程日记 2023/8/2 9:25:17

3，堆，桶排序，排序总结【p4-p5】

桶排序&#xff0c;排序总结 3.1堆3.1.1堆结构3.1.1.1完全二叉树3.1.1.2堆分为大根堆和小根堆3.1.1.2.1案例1-去掉最大数字&#xff0c;使剩下的数字依然是大根堆3.1.1.2.2案例23.1.1.2.3案例33.1.1.2.4案例4-方便制造大根堆方法 3.1.2堆排序3.1.2.1案例-堆排序的扩展3.1.2.1.1…...

编程日记 2023/8/2 9:24:16

使用langchain与你自己的数据对话(四)：问答(question answering)

之前我已经完成了使用langchain与你自己的数据对话的前三篇博客&#xff0c;还没有阅读这三篇博客的朋友可以先阅读一下&#xff1a; 使用langchain与你自己的数据对话(一)&#xff1a;文档加载与切割使用langchain与你自己的数据对话(二)&#xff1a;向量存储与嵌入使用langc…...

编程日记 2023/8/2 9:23:15

如何快速开拓海外华人市场？附解决方案！

开拓华人市场对于企业来说是非常必要的。华人市场庞大且潜力巨大&#xff0c;拥有巨额的消费能力。随着华人经济的不断增长&#xff0c;越来越多的企业开始意识到华人市场的重要性。 通过开拓华人市场&#xff0c;企业可以获得更多的销售机会&#xff0c;并且在竞争激烈的市场…...

编程日记 2023/8/2 9:22:15

【云原生-制品管理】制品管理的优势

制品介绍制品管理-DevOps制品管理优势总结 制品介绍 制品管理指的是存储、版本控制和跟踪在软件开发过程中产生的二进制文件或“制品”的过程。这些制品可以包括编译后的源代码、库和文档&#xff0c;包括操作包、NPM 和 Maven 包&#xff08;或像 Docker 这样的容器镜像&…...

编程日记 2023/8/2 9:21:13

Java爬虫----HttpClient方式（获取数据篇）

目录 一、爬虫的定义 二、获取数据 &#xff08;1&#xff09;基于Get方式的请求&#xff08;无参&#xff09; &#xff08;2&#xff09;基于Get方式请求&#xff08;有参&#xff09; &#xff08;3&#xff09;基于Post方式的请求&#xff08;无参&#xff09; &…...

编程日记 2023/8/2 9:20:12

计算机视觉实验：图像增强应用实践

本次实验主要从基于统计、函数映射的图像增强方法和基于滤波的图像增强方法两种方法中对一些图像增强的算法进行实现。主要的编程语言为python&#xff0c;调用了python自带的PIL图像库用于读取图像&#xff0c;利用numpy进行图像运算&#xff0c;最后使用opencv第三方库进行对…...

编程日记 2023/8/2 9:19:11

ES6：Generator函数详解

ES6&#xff1a;Generator函数详解 1、 概念2、yield表达式2.1 yield 语句与 return 语句区别2.2 Generator函数不加yield语句&#xff0c;这时变成了一个单纯的暂缓执行函数2.3 yield 表达式只能用在 Generator 函数里面&#xff0c;用在其它地方都会报错2.4 yield 表达式如果…...

编程日记 2023/8/2 9:18:09

前端小练-产品宣传页面

文章目录 前言页面结构固定钉头部轮播JS特效 完整代码总结 前言 经过一个月的爆肝&#xff0c;花费了一个月&#xff08;期间还花费了将近半个月的时间打比赛&#xff0c;还要备研&#xff09;算是把数二高数的内容强化了一遍&#xff0c;接下来刷熟练度即可&#xff0c;可惜的…...

编程日记 2023/8/2 9:17:07

arm学习之stm32设备树学习-中断控制led灯亮灭+字符设备指令控制led灯亮灭

中断控制led灯亮灭 驱动文件源码 led-key.c #include<linux/init.h> #include<linux/module.h> #include<linux/of.h> #include<linux/of_gpio.h> #include<linux/gpio.h> #include<linux/of_irq.h> #include<linux/interrupt.h> s…...

编程日记 2023/8/2 9:16:06

快速开发框架若依的基础使用详解

Hi I’m Shendi 快速开发框架若依的基础使用详解 最近在为公司制作新的项目&#xff0c;经过了一段时间的技术沉淀&#xff0c;我开始尝试接触市面上用的比较多的快速开发框架&#xff0c;听的最多的当属若依吧 于是就选用了若依 介绍 为什么选&#xff1f;目的是为了提高开发…...

编程日记 2023/8/2 9:15:05

RabbitMQ 教程 | 第4章 RabbitMQ 进阶

&#x1f468;&#x1f3fb;‍&#x1f4bb; 热爱摄影的程序员 &#x1f468;&#x1f3fb;‍&#x1f3a8; 喜欢编码的设计师 &#x1f9d5;&#x1f3fb; 擅长设计的剪辑师 &#x1f9d1;&#x1f3fb;‍&#x1f3eb; 一位高冷无情的编码爱好者 大家好&#xff0c;我是 DevO…...

编程日记 2023/8/2 9:14:04

收藏！从Prompt到Harness，AI工程升级三步搞定大模型应用

本文阐述了AI工程从关注Prompt到Context再到Harness的演进过程。Prompt工程负责明确任务指令&#xff0c;Context工程负责提供准确有效的信息供给&#xff0c;而Harness工程则关注AI在系统中的可靠执行与治理。三者并非替代关系&#xff0c;而是嵌套协作&#xff0c;共同推动AI…...

编程新知 2026/3/31 20:56:33

戴森球计划FactoryBluePrints蓝图库：从新手到专家的终极工厂建设指南

戴森球计划FactoryBluePrints蓝图库&#xff1a;从新手到专家的终极工厂建设指南 【免费下载链接】FactoryBluePrints 游戏戴森球计划的**工厂**蓝图仓库 项目地址: https://gitcode.com/GitHub_Trending/fa/FactoryBluePrints FactoryBluePrints蓝图库是戴森球计划游戏…...

编程新知 2026/3/31 19:25:03

手把手教你用Qt6和Arduino Uno打造实时数据监控面板（附串口数据粘包处理源码）

基于Qt6与Arduino Uno的工业级数据可视化系统开发实战 在工业物联网和智能硬件开发领域&#xff0c;实时数据监控是核心需求之一。想象一下这样的场景&#xff1a;车间里的温度传感器阵列通过Arduino采集数据&#xff0c;工程师在办公室的PC端就能实时查看温度曲线波动&#x…...

编程新知 2026/3/31 19:18:54

npm新手必看：如何用package.json一键运行本地JS文件（附常见错误排查）

npm新手必看&#xff1a;如何用package.json一键运行本地JS文件&#xff08;附常见错误排查&#xff09; 刚接触Node.js生态的开发者&#xff0c;往往会被各种工具和配置文件搞得晕头转向。其中package.json作为项目的"身份证"和"说明书"&#xff0c;掌握它…...

编程新知 2026/3/31 18:34:08

新手必看：在快马平台学习排列组合公式的代码实现

新手必看&#xff1a;在快马平台学习排列组合公式的代码实现 作为一个编程新手&#xff0c;当我第一次接触排列组合公式时&#xff0c;那些数学符号和递归逻辑让我一头雾水。直到在InsCode(快马)平台上找到了带详细注释的示例代码&#xff0c;才真正理解了Cn和An公式的实现原理…...

编程新知 2026/3/31 16:42:21

ai辅助硬件设计：让快马智能解析并生成db9接口与mcu连接的完整原理图与代码

在硬件开发中&#xff0c;DB9接口的设计与连接是个常见但容易出错的环节。最近我在一个嵌入式项目里需要实现STM32与DB9接口的RS-232通信&#xff0c;发现传统设计流程存在几个痛点&#xff1a; 引脚定义容易混淆 DB9公头和母头的引脚定义是相反的&#xff0c;比如母头的2号引脚…...

编程新知 2026/3/31 15:53:32

【大英赛】2009-2026年大英赛ABCD类历年真题、样卷、听力音频及答案PDF电子版

2026年大英赛将于4月12日9:00—11:00举行&#xff0c;开始倒计时啦&#xff01;小编整理了最新的2009-2026年大学生英语竞赛&#xff08;大英赛NECCS&#xff09;ABCD类历年真题、样卷、听力音频及答案解析&#xff0c;PDF电子版&#xff0c;可下载打印&#xff01; 资料下载&a…...

编程新知 2026/3/31 15:49:30

SpringBoot3.3.1+Elasticsearch8.13.4日期转换踩坑实录：LocalDateTime保存为时间戳的完整方案

SpringBoot3.3.1与Elasticsearch8.13.4时间类型转换实战&#xff1a;从踩坑到优雅解决 最近在升级技术栈到SpringBoot3.3.1时&#xff0c;发现与Elasticsearch8.13.4的集成出现了一个棘手的问题&#xff1a;LocalDateTime类型在保存和查询时表现异常。这让我花了整整两天时间排…...

编程新知 2026/3/31 15:04:34

原创：第三篇（工程落地・首个抓手）电磁筑基：无线充电工程落地总案

第三篇&#xff08;工程落地・首个抓手&#xff09;电磁筑基&#xff1a;无线充电工程落地总案 作者&#xff1a;华夏之光永存 总摘要 当前人类电磁学应用仍处于婴孩阶段&#xff0c;现有电磁能量传输技术多局限于有线模式&#xff0c;存在传输损耗高、场景适配性差、灵活性不足…...

编程新知 2026/3/31 12:50:00

ECharts 5.4.3实战：3步打造科技感爆棚的流光折线图（附完整代码）

ECharts 5.4.3实战&#xff1a;3步打造科技感爆棚的流光折线图&#xff08;附完整代码&#xff09; 在数据可视化领域&#xff0c;ECharts凭借其强大的功能和灵活的配置选项&#xff0c;已经成为前端开发者的首选工具之一。特别是其丰富的动画效果&#xff0c;能够为静态数据注…...

编程新知 2026/3/31 12:39:58