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

基于STM32设计的工地扬尘与噪音实时监测系统(网页)

一、前言

当前项目使用的相关软件工具、传感器源代码工程已经上传到网盘(实时更新项目内容):https://ccnr8sukk85n.feishu.cn/wiki/QjY8weDYHibqRYkFP2qcA9aGnvb?from=from_copylink

1.1 项目开发背景

近年来,随着城市化进程的加快和工业活动的增加,工地扬尘和噪声污染问题日益严重。扬尘不仅会对大气质量造成影响,进而危害人类健康,还可能加剧区域性的环境问题。而施工过程中产生的噪声污染,则直接影响周边居民的生活质量,甚至对工人自身的身体健康造成危害。加强对工地扬尘与噪声的实时监测与控制,成为了环保治理和施工管理的重要方向。

传统的监测方式主要依赖于定点采样和手动记录,效率低下,且难以实现实时性和广覆盖。而基于现代物联网技术的智能监测方案,不仅能够提高监测效率,还能实现远程数据访问和动态控制,极大地提升了治理效果。因此,设计一套基于STM32的工地扬尘与噪音实时监测系统,具有重要的实际应用价值。

本项目开发一套能够实时监测PM2.5浓度和环境噪声的系统,并通过集成显示、网络传输和自动控制功能,为工地的环保治理提供智能化的解决方案。利用夏普PM2.5传感器和噪声检测模块实现对空气质量和噪声的采集,通过STM32F103RCT6主控芯片进行数据处理,并通过ESP8266模块将监测数据上传到服务器,为远程管理提供支持。同时,系统集成了加湿器控制功能,当检测到粉尘浓度超标时,自动启动加湿器喷洒水雾,降低粉尘浓度,从而对环境污染进行有效控制。

本系统不仅支持在LCD显示屏上实时显示监测数据,还支持通过TCP协议上传数据,并借助Flask框架开发的网页应用实现可视化展示,方便用户随时随地查看和分析数据。整体设计以高效、便捷、低成本为目标,为施工环境的实时监测和治理提供了可靠的技术支持。

image-20241214005548798

1.2 设计实现的功能

(1) PM2.5含量检测:系统通过夏普PM2.5检测传感器实时监测空气中的PM2.5含量,并将数据传输给主控芯片STM32F103RCT6进行处理。

(2) 噪声检测:使用模拟量输出的噪声检测传感器,通过电压输出反映环境噪声的大小,STM32F103RCT6对噪声信号进行采集和处理。

(3) LCD显示屏实时数据显示:系统配备1.44寸的LCD显示屏,本地实时显示检测到的PM2.5、噪声、温湿度等环境数据。

(4) Web应用数据可视化:通过Python的socket模块创建TCP服务器,接收设备上传的数据,使用Flask框架开发Web应用,展示实时监测数据。用户可以通过浏览器访问系统,查看各项环境指标。

(5) WIFI+TCP协议数据传输:设备端通过ESP8266模块实现WIFI连接,采用TCP协议将监测数据传输到服务器,确保数据实时传递和远程监控。

(6) 加湿系统控制:当PM2.5含量超出预定范围时,系统会自动启用继电器控制的加湿器,通过喷洒水雾降低空气中灰尘的含量,从而改善空气质量。

(7) 温湿度检测:使用SHT30温湿度传感器检测环境的温度和湿度信息,主控芯片STM32F103RCT6处理后显示在LCD屏幕上,并上传到Web应用进行展示。

1.3 项目硬件模块组成

(1) 空气质量检测模块

  • 采用夏普PM2.5检测传感器,用于检测空气中的PM2.5含量。传感器将数据转化为电信号,STM32读取并处理数据。

(2) 噪声检测模块

  • 使用模拟量输出的噪声检测传感器,传感器输出电压信号与声音的大小成正比,STM32通过ADC接口采集并分析噪声数据。

(3) LCD显示模块

  • 使用1.44寸的LCD显示屏,实时显示空气质量、噪声、温湿度等数据。通过STM32的SPI接口与LCD连接,显示系统监测的各项指标。

(4) 温湿度检测模块

  • 使用SHT30模块来测量环境的温度和湿度。该模块通过I2C接口与STM32连接,STM32读取数据并显示或传输到服务器。

(5) 加湿器控制模块

  • 使用继电器控制加湿器。当PM2.5超过预设范围时,STM32控制继电器打开加湿器,对空气进行喷水,降低灰尘浓度。继电器通过数字输出控制,STM32负责监测和决策。

(6) WIFI通信模块

  • 使用ESP8266模块进行WIFI通信,传输传感器数据至服务器。ESP8266与STM32通过串口进行数据交换,将数据通过TCP协议发送给远程服务器。

(7) 主控模块

  • 使用STM32F103RCT6作为主控芯片,负责整个系统的控制、数据采集和处理。STM32连接所有传感器模块,处理数据并通过WIFI模块将数据上传到服务器。

(8) 电源模块

  • 使用USB接口为系统提供电力,通过USB供电模块转化为系统所需的电压(如5V),为主控芯片和传感器提供稳定电源。

(9) 服务器端通信模块

  • 使用Python的Socket模块在服务器端建立TCP服务器,接收设备上传的数据。数据通过WIFI传输,最终传递给Flask Web应用进行可视化展示。

(10) Web应用模块

  • 使用Flask框架开发Web应用,用于展示数据。Flask应用接收从TCP服务器获取的传感器数据,并通过浏览器展示实时监控的数据。

1.4 设计思路

本项目的设计思路主要分为硬件选型、数据采集与处理、通信方式、控制系统以及可视化展示几个方面。

在硬件选型上,考虑到项目的需求和稳定性,我们选择了STM32F103RCT6作为主控芯片,它具备强大的处理能力和丰富的外设接口,适合处理多种传感器的数据采集与控制任务。为了监测空气质量,选择了夏普PM2.5传感器,该传感器能精确测量空气中的PM2.5含量,通过模拟信号输出,STM32通过ADC采集数据并进行处理。噪声检测则采用了模拟输出噪声传感器,噪声强度通过电压信号体现,STM32通过相应的接口读取数据。环境温湿度的检测选用了SHT30模块,通过I2C接口读取温湿度数据。加湿器控制通过继电器实现,当PM2.5超标时,STM32发出信号启动继电器,控制加湿器进行加湿操作。

数据采集与处理方面,STM32负责读取所有传感器的数据并进行必要的处理。通过模拟信号输入的噪声传感器和PM2.5传感器数据,STM32会对其进行实时监测,根据设定的阈值判断是否启动加湿器。当PM2.5值超过预设的安全范围时,STM32会控制继电器开启加湿器,以降低空气中的粉尘浓度,保证环境的安全性。环境温湿度数据则会被实时采集并传送给显示屏和服务器端,确保数据的准确性与实时性。

在通信方式上,采用ESP8266模块为系统提供WIFI功能,方便数据远程传输。通过TCP协议,设备端将实时采集到的数据通过ESP8266传送到服务器,确保数据可以及时传输到远程服务器端,供后续的数据分析和可视化展示使用。STM32和ESP8266通过串口进行数据交换,确保数据传输的稳定性和效率。

在控制系统方面,STM32不仅负责采集和处理数据,还承担了整个系统的控制任务。例如,在检测到PM2.5超过安全阈值时,STM32会自动启动继电器控制加湿器,确保空气质量得到改善。温湿度数据和噪声数据则持续监测和更新,在LCD显示屏上实时反馈。

数据的可视化展示是本项目的一项重要功能。通过Flask框架,设计了一个Web应用,服务器接收从设备端传输的数据后,通过浏览器进行可视化展示,用户可以通过PC或手机端实时查看工地的空气质量、噪声强度、温湿度等数据。这部分的设计使用了Python的Socket模块来接收来自设备的数据,并使用Flask框架生成网页,展现实时数据,进一步提高了监测系统的实用性和便捷性。

本项目通过合理的硬件选型、数据采集与处理方式、通信手段和控制策略,打造了一个高效且实时的工地扬尘与噪音监测系统,为环境监控提供了强大的技术支持。

1.5 系统功能总结

功能模块功能描述
空气质量检测采用夏普PM2.5传感器,实时检测空气中的PM2.5含量。
噪声检测使用模拟量输出噪声传感器,检测环境中的噪声强度并通过电压信号反馈。
LCD显示屏显示通过1.44寸LCD显示屏实时显示PM2.5含量、噪声值、温湿度等数据。
温湿度检测采用SHT30模块实时监测环境温度和湿度,通过I2C接口将数据传输给STM32并显示。
加湿器控制当PM2.5浓度超过预设范围时,系统自动启动继电器控制加湿器喷洒水雾,减少空气中的粉尘浓度。
数据传输设备通过ESP8266模块连接WIFI,将实时采集的数据通过TCP协议传输至服务器端。
远程数据监控使用Python的Socket模块和Flask框架创建Web应用,浏览器可以实时查看传感器数据的可视化界面。
系统控制STM32主控芯片负责数据采集、处理和控制任务,保证系统的正常运行和数据传输。
电源管理通过USB接口提供电源,为系统供电,确保稳定运行。

1.8 模块的技术详情介绍

【1】ESP8266模块

ESP8266是一款低功耗、低成本的WiFi模块,广泛应用于物联网(IoT)项目中。它集成了WiFi无线通信功能,可以实现设备与互联网的无线连接,具有非常高的性价比。ESP8266模块的设计旨在简化无线网络的配置和连接过程,特别适合嵌入式系统和智能硬件应用。

ESP8266模块基于Tensilica Xtensa架构的32位微处理器,并集成了WiFi协议栈、网络功能以及各种控制和通信接口,能够支持WiFi标准的IEEE 802.11 b/g/n协议。它内置有处理器、存储器、WiFi射频模块以及网络协议栈,支持通过AT命令或通过编程来控制和操作。用户可以通过编程将其嵌入到各种应用中,作为通信桥梁在微控制器和互联网之间进行数据传输。

该模块通常包括多个版本,常见的有ESP-01、ESP-12E等,它们的差异主要体现在引脚数目、外部存储、天线设计等方面。ESP8266具有较强的处理能力,能够支持复杂的通信协议,并能够独立执行部分任务,无需外部微处理器的支持。它的主要功能是将嵌入式设备连接到WiFi网络,通过HTTP、MQTT、WebSocket等协议与云端进行数据交互和控制。

在实际应用中,ESP8266模块通过串口(UART)与其他硬件设备进行通信,且其支持AT命令集,通过这些命令可以配置WiFi参数、控制网络连接、发送和接收数据。对于开发者来说,它的开发环境支持Arduino IDE、NodeMCU、PlatformIO等,极大地简化了开发流程。使用这些开发环境,开发者可以通过编程实现更复杂的功能,如数据采集、远程控制、智能家居应用等。

ESP8266的低功耗特点使得它特别适合于物联网设备的应用。模块的工作电压范围为3.3V,虽然其本身的功耗较低,但在深度休眠模式下,功耗可以进一步降低到微安级别,从而延长电池寿命。这使得ESP8266在需要长期运行的无线传感器网络和便携式设备中具有广泛的应用。

在物联网应用中,ESP8266常常用于实现设备与互联网的互联互通,能够通过WiFi协议将数据上传到云平台,如华为云、AWS、ThingSpeak等,实现数据存储、远程监控、控制和分析。在智能家居、智能农业、环境监控等领域,ESP8266作为通信模块发挥着至关重要的作用。

ESP8266凭借其低成本、高集成度、强大的WiFi连接功能以及良好的开发支持,成为了物联网领域中最受欢迎的无线通信模块之一,尤其适用于需要无线连接的嵌入式设备和智能硬件项目。

【2】TCP协议

TCP(Transmission Control Protocol,传输控制协议)是一种面向连接的、可靠的传输层协议,它位于OSI七层模型中的传输层。TCP协议主要用于在计算机网络中实现可靠的数据传输,它保证了数据的正确性和顺序性,适用于对数据传输质量要求较高的应用场景,如网页浏览、文件传输和实时数据交换。

TCP协议的核心特性是可靠性有序性。在TCP连接中,发送方和接收方建立了一个可靠的连接,确保数据能够按顺序到达接收方。TCP通过使用数据包的序列号来确保数据的顺序性,并通过校验和机制来检测数据传输过程中的错误。如果在传输过程中出现丢包或错误,接收方会请求重传,保证数据传输的完整性。

建立TCP连接时,采用了三次握手(three-way handshake)过程。首先,客户端发送一个SYN(同步)包,表示请求连接;然后,服务器回应一个SYN-ACK(同步应答)包,表示同意连接并回送确认信息;最后,客户端发送一个ACK(确认)包,完成连接的建立。这个过程确保了双方都准备好进行数据传输。连接建立后,双方就可以开始数据的双向传输了。

在数据传输过程中,TCP采用流量控制拥塞控制机制。流量控制通过调整发送窗口的大小,确保发送方不会超过接收方的处理能力;而拥塞控制则通过动态调整发送速度,避免过多的数据包在网络中引发拥塞,从而提高网络的整体性能。TCP的拥塞控制通常使用四种算法:慢启动、拥塞避免、快速重传和快速恢复,来有效地应对网络的波动。

此外,TCP协议还提供了端到端的连接管理。每个TCP连接都由一个四元组唯一标识:源IP地址、源端口号、目的IP地址和目的端口号。通过这个四元组,数据可以精确地发送到网络中的特定应用程序。TCP协议通过序列号和确认号来跟踪和控制数据的传输,保证数据的可靠传送并解决丢包和乱序的问题。

TCP连接的关闭也需要经过四次挥手(four-way handshake)。当传输完成后,任一一方可以主动发起连接关闭请求。首先,发送方发送一个FIN(结束)包,表示数据发送完毕;接收方确认收到FIN包后,返回一个ACK包;接着,接收方发送一个FIN包,表示它也已经准备好关闭连接;最后,发送方返回ACK包,确认连接关闭。通过这种方式,TCP确保了双方在完全断开连接前能够完成数据的最终传输。

TCP协议是实现可靠通信的基石,尤其适合需要高可靠性和数据完整性的应用。虽然TCP相比于UDP(User Datagram Protocol,用户数据报协议)在性能上存在一定的开销,但其可靠的数据传输机制、流量控制、拥塞控制以及顺序保证使得它在需要保证数据完整和正确的场景中成为首选协议。

【3】SHT30温湿度模块

SHT30温湿度模块是一款由Sensirion公司生产的数字化温湿度传感器模块,采用I2C接口进行数据传输,广泛应用于环境监测、气象站、家居智能系统等领域。SHT30模块具有高精度、高稳定性和低功耗的特点,适合需要精确温湿度数据采集的应用场景。

SHT30模块的工作原理基于湿度传感器和温度传感器的组合。它通过电容式湿度传感元件和半导体温度传感器来测量环境的温度和湿度。当传感器采集到温湿度数据后,会将数据通过I2C协议发送到主控芯片(如STM32、Arduino等)。SHT30能够提供高达±2%相对湿度和±0.3°C的温度精度,确保在多种环境条件下都能稳定可靠地工作。

在通信方面,SHT30模块采用I2C总线协议,这使得它与主控芯片的连接变得简单方便。I2C协议是一种双向串行数据传输协议,允许多个设备共用两根数据线(SDA和SCL),使得传感器的连接和控制更加高效。通过I2C总线,主控芯片可以发出命令来启动温湿度测量操作,接收测量结果。SHT30模块支持不同的工作模式,包括单次测量模式和周期性测量模式,用户可以根据需要选择合适的模式进行配置。

SHT30模块的优势之一是其低功耗设计,适用于对能耗有较高要求的场合。在正常工作模式下,SHT30的功耗非常低,适合长时间运行而不会消耗大量电池电量,这使得它成为物联网(IoT)设备和可穿戴设备中的常见选择。它还支持宽广的工作电压范围(2.4V至5.5V),适用于不同电压等级的应用场景。

除了高精度和低功耗,SHT30模块还具有较强的抗干扰能力和稳定性。它采用了先进的封装和温湿度传感技术,能够在高湿度、高温度等恶劣环境下稳定工作,并且提供长期的可靠数据输出。对于需要在复杂环境中工作的应用,SHT30能够有效地避免因环境变化而引起的测量误差。

SHT30温湿度模块是一款性能优异、易于使用的传感器,它能够提供准确、稳定的温湿度数据,广泛应用于各种智能监测和控制系统中。通过I2C接口与主控芯片进行数据交换,用户能够方便地采集到环境的温湿度信息,进而实现精准的环境监测与调节。

二、安装Python环境

2.1 环境介绍

操作系统: win10 64位

python版本: 3.8

IDE: 采用vscode

用到的相关安装包下载地址: https://ccnr8sukk85n.feishu.cn/wiki/QjY8weDYHibqRYkFP2qcA9aGnvb?from=from_copylink

2.2 Python版本介绍

因为Python是跨平台的,它可以运行在Windows、Mac和各种Linux/Unix系统上。在Windows上写Python程序,放到Linux上也是能够运行的。

要开始学习Python编程,首先就得把Python安装到你的电脑里。安装后,你会得到Python解释器(就是负责运行Python程序的),一个命令行交互环境,还有一个简单的集成开发环境。

目前,Python有两个版本,一个是2.x版,一个是3.x版,这两个版本是不兼容的。由于3.x版越来越普及,后面就选择 3.x版本进行安装。

2.3 在windows下安装Python环境

Python官网下载地址: Download Python | Python.org

img

勾上Add Python 3.8 to PATH,然后点“Install Now”即可完成安装。

img

img

安装完成之后,打开windows的命令行窗口。

img

在命令行运行python,出现下面的提示就表示安装成功。

img

进入终端之后,输入exit()可以退出Python命令行。

img

Python安装成功后,在python交互式环境模式下,可以简单学习一下Python的第一份代码:

C:\Users\11266>python
Python 3.8.0 (tags/v3.8.0:fa919fd, Oct 14 2019, 19:21:23) [MSC v.1916 32 bit (Intel)] on win32
Type "help", "copyright", "credits" or "license" for more information.
>>> 100+500      #直接输入有效数字进行运算
600  
>>> 300-100
200
>>> print("hello python")    #打印文本
hello python
>>> print('hello python')     #打印文本
hello python 
>>> exit()                #退出交互式命令行C:\Users\11266>

2.4 windows下安装VSCode代码编辑器

下载地址: https://code.visualstudio.com/

安装包下载之后,直接鼠标双击运行。

img

根据自己平台下载:

img

接受协议继续安装。

img

选择一下安装路径。

img

浏览路径。

img

安装。

img

img

img

安装完成。打开的页面。

img

软件安装之后下面设置 Visual Studio 支持中文语言

首先打开 Visual Studio 软件, 再按下 F1 或者 Shift + Ctrl + P:

然后在命令行输入 Configure Display Language

img

选择安装语言选项。

img

img

img

安装之后右下角有提示重启,点击重启即可。

新建文本文件,保存的后缀为.py。

img

img

img

img

img

img

img

修改vscode的颜色主题

下面介绍更改颜色vscode的内置颜色主题方法。

img

img

三、设计后端服务器与前端页面

3.1 Python后端代码(http_server.py)

import socket
from flask import Flask, render_template, jsonify# 初始化Flask应用
app = Flask(__name__)# 全局变量保存最新上传的数据
data = {"pm25": None,"noise": None,"temperature": None,"humidity": None,"humidifier_status": None
}# TCP服务器处理设备端数据上传
def start_tcp_server():host = '0.0.0.0'port = 5005server_socket = socket.socket(socket.AF_INET, socket.SOCK_STREAM)server_socket.bind((host, port))server_socket.listen(5)print(f"Listening on {host}:{port}")while True:client_socket, addr = server_socket.accept()print(f"Connection from {addr}")try:while True:received_data = client_socket.recv(1024).decode("utf-8").strip()if not received_data:break  # 如果没有数据,退出循环print(f"Raw Data received: {received_data}")# 解析数据try:values = received_data.split(',')if len(values) == 5:global datadata["pm25"] = float(values[0])data["noise"] = float(values[1])data["temperature"] = float(values[2])data["humidity"] = float(values[3])data["humidifier_status"] = "ON" if int(values[4]) == 1 else "OFF"# 打印解析后的数据print(f"Parsed Data:")print(f"  PM2.5: {data['pm25']} μg/m³")print(f"  Noise: {data['noise']} dB")print(f"  Temperature: {data['temperature']} °C")print(f"  Humidity: {data['humidity']} %")print(f"  Humidifier Status: {data['humidifier_status']}")except Exception as e:print(f"Error parsing data: {e}")except Exception as e:print(f"Error handling client connection: {e}")finally:client_socket.close()# 启动TCP服务器线程
import threading
threading.Thread(target=start_tcp_server, daemon=True).start()# Web路由
@app.route('/')
def index():return render_template("index.html")@app.route('/api/data')
def get_data():return jsonify(data)if __name__ == "__main__":app.run(host="0.0.0.0", port=8080, debug=True)

3.2 HTML前端代码(index.html)

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>工地扬尘与噪音监测系统</title><link rel="stylesheet" href="style.css"><script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <!-- 图表库 --><script src="https://cdn.jsdelivr.net/npm/echarts@5.4.2/dist/echarts.min.js"></script> <!-- ECharts图表库 -->
</head>
<body><div class="container"><header><h1>工地扬尘与噪音实时监测系统</h1></header><section class="dashboard"><!-- PM2.5 --><div class="card pm25"><h2>PM2.5含量</h2><div id="pm25-value">0</div><canvas id="pm25-chart"></canvas></div><!-- 噪音 --><div class="card noise"><h2>噪声水平</h2><div id="noise-value">0</div><canvas id="noise-chart"></canvas></div><!-- 温湿度 --><div class="card temp-humidity"><h2>温湿度</h2><div id="temp-humidity-value">温度: 0°C 湿度: 0%</div></div><!-- 加湿器状态 --><div class="card humidifier"><h2>加湿器状态</h2><div id="humidifier-status">关闭</div><button id="humidifier-toggle">切换加湿器</button></div></section><footer><p>监测数据由STM32系统提供</p></footer></div><script src="script.js"></script>
</body>
</html>

3.3 style.css文件

/* 通用样式 */
* {margin: 0;padding: 0;box-sizing: border-box;
}body {font-family: Arial, sans-serif;background-color: #2c3e50;color: #ecf0f1;display: flex;flex-direction: column;justify-content: center;align-items: center;height: 100vh;
}.container {width: 90%;max-width: 1200px;margin: 0 auto;
}header {text-align: center;margin-bottom: 20px;
}header h1 {font-size: 3em;color: #1abc9c;
}.dashboard {display: grid;grid-template-columns: repeat(2, 1fr);gap: 20px;margin-top: 20px;
}.card {background-color: #34495e;padding: 20px;border-radius: 10px;text-align: center;box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}.card h2 {font-size: 1.5em;margin-bottom: 10px;
}.card div {font-size: 2em;margin-top: 10px;
}footer {margin-top: 20px;text-align: center;font-size: 1em;color: #7f8c8d;
}/* 图表样式 */
canvas {max-width: 100%;height: 200px;margin-top: 20px;
}#pm25-value, #noise-value, #temp-humidity-value, #humidifier-status {font-size: 1.5em;font-weight: bold;color: #f39c12;
}

3.4 script.js 文件

// 获取数据并更新页面内容
function updateData(data) {// 更新PM2.5const pm25Value = document.getElementById('pm25-value');pm25Value.textContent = `${data.pm25} µg/m³`;updatePM25Chart(data.pm25);// 更新噪声const noiseValue = document.getElementById('noise-value');noiseValue.textContent = `${data.noise} dB`;updateNoiseChart(data.noise);// 更新温湿度const tempHumidityValue = document.getElementById('temp-humidity-value');tempHumidityValue.textContent = `${data.temp}°C / ${data.humidity}%`;// 更新加湿器状态const humidifierStatus = document.getElementById('humidifier-status');humidifierStatus.textContent = data.humidifier === 1 ? '开启' : '关闭';
}// 更新PM2.5图表
function updatePM25Chart(pm25) {const pm25Chart = document.getElementById('pm25-chart').getContext('2d');const chart = new Chart(pm25Chart, {type: 'bar',data: {labels: ['PM2.5'],datasets: [{label: 'PM2.5含量',data: [pm25],backgroundColor: 'rgba(46, 204, 113, 0.6)',borderColor: 'rgba(46, 204, 113, 1)',borderWidth: 1}]},options: {responsive: true,scales: {y: {beginAtZero: true,max: 300}}});
}// 更新噪声图表
function updateNoiseChart(noise) {const noiseChart = document.getElementById('noise-chart').getContext('2d');const chart = new Chart(noiseChart, {type: 'line',data: {labels: ['噪声'],datasets: [{label: '噪声级别',data: [noise],borderColor: 'rgba(241, 196, 15, 1)',backgroundColor: 'rgba(241, 196, 15, 0.3)',borderWidth: 1}]},options: {responsive: true,scales: {y: {beginAtZero: true,max: 120}}});
}// 从服务器获取数据
function fetchData() {// 从服务器接收数据,您可以替换为从实际服务器获取const mockData = {pm25: 65,noise: 80,temp: 25.3,humidity: 40,humidifier: 1};updateData(mockData);
}// 每5秒获取一次数据
setInterval(fetchData, 5000);// 初始化页面
fetchData();

3.5 运行效果

image-20241214005600960

image-20241214005548798

四、STM32代码设计

main.c文件中,进行必要的初始化,包括传感器、WIFI模块和USART接口,然后循环采集数据并通过TCP协议传输给服务器。

#include "stm32f1xx_hal.h"
#include "string.h"
#include "stdio.h"
#include "esp8266.h"  // 假设ESP8266模块的驱动函数已编写
#include "pm25_sensor.h"  // 假设PM2.5传感器的接口函数已编写
#include "noise_sensor.h"  // 假设噪声传感器的接口函数已编写
#include "sht30.h"  // 假设SHT30温湿度模块的接口函数已编写#define SERVER_IP "192.168.1.100"  // 服务器IP地址
#define SERVER_PORT 8080  // 服务器端口// 函数声明
void SystemClock_Config(void);
static void MX_GPIO_Init(void);
static void MX_USART1_UART_Init(void);
void send_data_to_server(char *data);int main(void)
{// 初始化硬件资源HAL_Init();SystemClock_Config();MX_GPIO_Init();MX_USART1_UART_Init();// 初始化ESP8266模块(假设该模块已初始化完毕)ESP8266_Init();// 初始化传感器(假设各传感器模块已初始化完毕)PM25_Init();NoiseSensor_Init();SHT30_Init();// 数据传输字符串char data_buffer[100];while (1){// 获取PM2.5数据int pm25_value = PM25_ReadData();// 获取噪声数据int noise_value = NoiseSensor_ReadData();// 获取温湿度数据float temperature = SHT30_ReadTemperature();float humidity = SHT30_ReadHumidity();// 获取加湿器开关状态(此处为模拟,如果有实际的继电器控制,请替换为实际代码)int humidifier_status = (pm25_value > 100) ? 1 : 0;// 格式化数据字符串snprintf(data_buffer, sizeof(data_buffer),"#%d,%d,%.1f,%.1f,%d\r\n",pm25_value, noise_value, temperature, humidity, humidifier_status);// 发送数据到服务器send_data_to_server(data_buffer);}
}void send_data_to_server(char *data)
{// 通过ESP8266模块发送数据(假设ESP8266已经建立TCP连接)ESP8266_SendData(SERVER_IP, SERVER_PORT, data);
}void SystemClock_Config(void)
{// 系统时钟配置代码(根据具体的硬件平台来配置)
}static void MX_GPIO_Init(void)
{// GPIO初始化代码
}static void MX_USART1_UART_Init(void)
{// UART初始化代码,用于ESP8266与STM32通信USART1_Init();
}
  1. 硬件初始化
    • HAL_Init():初始化硬件抽象层。
    • SystemClock_Config():系统时钟配置函数,通常根据具体硬件平台进行配置。
    • MX_GPIO_Init()MX_USART1_UART_Init():分别用于初始化GPIO和USART接口,这里USART1用于与ESP8266模块通信。
  2. 传感器初始化
    • PM25_Init()NoiseSensor_Init()SHT30_Init()分别初始化PM2.5传感器、噪声传感器和温湿度模块。假设这些模块已经在其他地方编写好,并且能够提供相关数据。
  3. 数据采集
    • PM25_ReadData():从PM2.5传感器读取PM2.5数据。
    • NoiseSensor_ReadData():从噪声传感器读取噪声数据。
    • SHT30_ReadTemperature()SHT30_ReadHumidity():分别获取环境的温度和湿度数据。
  4. 加湿器控制
    • humidifier_status变量控制加湿器的开关状态。当PM2.5浓度超过100时(这里是模拟阈值,实际值可根据需求调整),加湿器开启,状态为1;否则,状态为0。
  5. 数据格式化与发送
    • 使用snprintf格式化数据为符合要求的字符串:#PM2.5含量,噪声检测,环境温度,湿度检测,加湿器开关状态\r\n
    • send_data_to_server(data_buffer):通过ESP8266模块发送数据至服务器。ESP8266_SendData是与ESP8266通信的假设函数,具体的发送逻辑需要根据ESP8266的驱动进行实现。

五、总结

本项目设计了一个基于STM32的工地扬尘与噪音实时监测系统,通过集成多个传感器模块,实现了对工地环境中PM2.5、噪声、温湿度等参数的实时监控。系统通过无线通信技术(ESP8266模块)将数据上传至服务器,并通过Web界面进行可视化展示,方便用户进行远程监控和数据分析。加湿器控制功能也被集成到系统中,通过继电器控制加湿器来减少空气中的粉尘,确保环境的安全和健康。

在硬件方面,系统选择了适合的传感器模块,如夏普PM2.5传感器、噪声传感器、SHT30温湿度模块等,以确保数据采集的准确性与稳定性。STM32F103RCT6作为主控芯片,承担着数据采集、处理和控制任务,通过I2C和SPI接口与各个模块进行连接与通信,确保系统的高效运行。通过WIFI模块ESP8266实现数据的远程传输,使得系统具备了实时监控和远程管理的能力。

在软件和通信部分,系统采用了TCP协议和Flask框架,通过Web浏览器展示实时数据,为用户提供了便捷的操作界面。Python的Socket模块用于建立TCP连接,确保设备与服务器之间的数据传输稳定可靠。通过这些设计,用户可以方便地获取工地环境的实时数据,并根据需求进行进一步的分析和处理。

通过该系统的设计与实现,不仅能实时监测工地环境的空气质量、噪声水平、温湿度等关键指标,还能通过智能控制(如加湿器)改善环境条件,提高工地工作人员的工作环境安全性。未来,该系统可以进一步扩展功能,如加入更多环境参数的监测、支持多种通信方式、增强数据分析功能等,以应对更复杂的实际应用场景。

本项目实现了一个高效、实时、可视化的环境监控系统,展示了STM32在物联网和智能监测领域的广泛应用潜力。通过硬件和软件的有机结合,系统不仅满足了当前工地扬尘与噪音监测的需求,还为类似的环境监控系统提供了可参考的设计思路和技术实现。

相关文章:

基于STM32设计的工地扬尘与噪音实时监测系统(网页)

一、前言 当前项目使用的相关软件工具、传感器源代码工程已经上传到网盘&#xff08;实时更新项目内容&#xff09;&#xff1a;https://ccnr8sukk85n.feishu.cn/wiki/QjY8weDYHibqRYkFP2qcA9aGnvb?fromfrom_copylink 1.1 项目开发背景 近年来&#xff0c;随着城市化进程的…...

LLM之RAG实战(五十)| FastAPI:构建基于LLM的WEB接口界面

FastAPI是WEB UI接口&#xff0c;随着LLM的蓬勃发展&#xff0c;FastAPI的生态也迎来了新的机遇。本文将围绕FastAPI、OpenAI的API以及FastCRUD&#xff0c;来创建一个个性化的电子邮件写作助手&#xff0c;以展示如何结合这些技术来构建强大的应用程序。 下面我们开始分步骤操…...

JavaScript 中的 Map方法

JavaScript 中的 Map方法 在 JavaScript 中&#xff0c;Map 是一种用于存储键值对的数据结构&#xff0c;相较于传统的对象&#xff08;Object&#xff09;&#xff0c;Map 提供了更高效的键值对操作方式适合处理需要频繁操作键值对的场景。 1. 创建 Map const map new Map…...

img引入svg如何修改颜色

方法1&#xff1a;通过css中filter:drop-shadow 首先需要一个容纳图标的父盒子(下方实例中的.svg-img)&#xff0c;通过css造一个图标的‘影子’&#xff08;.svg-color中的drop-shadow&#xff09;&#xff0c;然后设置‘影子’的颜色&#xff0c;再把图标本体移出父盒子&…...

自然语言处理基础及应用场景

自然语言处理定义 让计算机理解人所说的文本 语音 Imitation Game 图灵测试 行为主义 鸭子理论 自然语言处理的基本任务 词性标注&#xff1a;区分每个词名词、动词、形容词等词性命名实体的识别&#xff1a;名词的具体指代是哪一类事物共指消解&#xff1a;代词指代的是前面…...

构建centos docker基础镜像

1、介绍 比较老的版本docker镜像&#xff0c;不太好找&#xff0c;可以尝试自己构建 各版本构建基础镜像方法不太一样&#xff0c;方式也不同&#xff0c;自己尝试&#xff0c;本文只介绍了我自己的尝试 2、构建centos5.11 docker镜像 准备iso文件 &#xff08;1&#xff09;安…...

etcd命令大全

默认安装自带etcdctl 命令行客户端&#xff0c;分两个版本ETCDCTL_API2和ETCDCTL_API3&#xff0c;两个版本不一样&#xff0c;操作的数据也不相容。 本文以v3 为例。 使用之前需要先设置&#xff1a;export ETCDCTL_API3。 1 etcd查询集群节点列表及状态 标准输出&#xff1…...

Go有限状态机实现和实战

Go有限状态机实现和实战 有限状态机 什么是状态机 有限状态机&#xff08;Finite State Machine, FSM&#xff09;是一种用于建模系统行为的计算模型&#xff0c;它包含有限数量的状态&#xff0c;并通过事件或条件实现状态之间的转换。FSM的状态数量是有限的&#xff0c;因此称…...

使用torch模拟 BMM int8量化计算。

使用torch模型BMM int8计算。 模拟&#xff1a;BMM->softmax->BMM 计算流程 import torch import numpy as np torch.manual_seed(777) def int8_quantize_per_token(x: torch.Tensor, axis: int -1, attnsFalse):if x.dtype ! torch.float32:x x.type(torch.float32)…...

vue3的watch一次性监听多个值用法

vue3的watch一次性监听多个值 1、监听单个值 watch(() > route.params.keyword, (newValue, oldValue) > {console.log(监听值变化, newVal, oldVal)state.a newValue});2、监听多个值 watch(() > [route.params.id, route.params.keyword], (newValue, oldValue) &g…...

【one-api和ollama结合使用】

将Ollama接入one-api one-api是一个开源AI中间件服务&#xff0c;可以聚合各家大模型API&#xff0c;比如OpenAI、ChatGLM、文心一言等&#xff0c;聚合后提供统一的OpenAI调用方法。举个例子&#xff1a;ChatGLM和文心一言的API调用方法并不相同&#xff0c;one-api可以对其进…...

Oracle PDB的开启和关闭

[生产环境关闭与开启Oracle PDB] 【运维场景】 在运维Oracle PDB的时候经常要开启和关闭PDB&#xff0c;对关闭和开启PDB的操作要非常熟悉。 【操作方法】 1. PDB的打开与关闭 关闭和开启DB的时候要看DB的警告日志&#xff0c;日志位置&#xff08;在Oracle用户下查看&…...

十一、动态构建UI元素

装饰器Builder 装饰器BuilderParam <font style"color:rgba(0, 0, 0, 0.9);">BuilderParam</font> 该装饰器用于声明任意UI描述的一个元素&#xff0c;类似slot占位符。 链接 简而言之&#xff1a;就是自定义组件允许外部传递 UI // SonCom 的实现略…...

智能时代的基石:神经网络

智能时代的基石&#xff1a;神经网络 第一节&#xff1a;神经网络简介 课程目标 本节课程旨在全面介绍神经网络的基本概念、结构以及其在历史发展中的重要里程碑。通过深入理解神经网络的工作原理和演变过程&#xff0c;学员将能够掌握神经网络在现实世界中的多种应用&#…...

VScode配置GIT

在Visual Studio Code&#xff08;VSCode&#xff09;中检测不到已安装的Git可以通过以下步骤来解决‌&#xff1a; ‌确认Git是否正确安装‌&#xff1a;首先&#xff0c;确保在计算机上正确安装了Git。可以通过打开命令行窗口并输入git --version来检查是否能够显示Git的版本…...

【CSS】css 如何实现固定宽高比

今天和同事讨论这个问题&#xff0c;一时间还想不到了&#xff0c;于是学习了下&#xff0c;就顺便当个记录吧 要在CSS中实现固定宽高比&#xff0c;有两种主要的方法可以选择。一种是使用新的aspect-ratio属性&#xff0c;另一种是利用padding技巧。随着现代浏览器对aspect-ra…...

使用webrtc-streamer查看实时监控

摄像头配置&#xff08;海康摄像头为例&#xff09; 摄像头视频编码应改成H264格式 webrtc-streamer下载 webrtc-streamer下载地址 下载后解压出来双击运行&#xff0c;端口默认8000 VUE2项目引入文件 在项目静态文件“public”中需引入两个js文件“webrtcstreamer.js”与“…...

ansible部署nginx:1个简单的playbook脚本

文章目录 hosts--ventoryroles执行命令 使用ansible向3台centos7服务器上安装nginx hosts–ventory [rootstand playhook1]# cat /root/HOSTS # /root/HOSTS [webservers] 192.168.196.111 ansible_ssh_passpassword 192.168.196.112 ansible_ssh_passpassword 192.168.196.1…...

Ubuntu安装Gitlab详细图文教程

1、环境准备 1.1、Ubuntu环境 Ubuntu24.04Sever版安装教程 1.2、更新系统 sudo apt update -y sudo apt-get update sudo apt-get upgrade 2、安装Nginx 2.1 安装nginx # 安装 apt install nginx -y 2.2 修改nginx配置⽂件 # 修改nginx配置 vim /etc/nginx/si…...

前端面试准备问题2

1.防抖和节流分别是什么&#xff0c;应用场景 防抖&#xff1a;在事件被触发后&#xff0c;只有在指定的延迟时间内没有再次触发&#xff0c;才执行事件处理函数。 在我的理解中&#xff0c;简单的说就是在一个指定的时间内&#xff0c;仅触发一次&#xff0c;如果有多次重复触…...

uni-app之web-view组件 postMessage 通信【跨端开发系列】

&#x1f517; uniapp 跨端开发系列文章&#xff1a;&#x1f380;&#x1f380;&#x1f380; uni-app 组成和跨端原理 【跨端开发系列】 uni-app 各端差异注意事项 【跨端开发系列】uni-app 离线本地存储方案 【跨端开发系列】uni-app UI库、框架、组件选型指南 【跨端开…...

IntelliJ IDEA 使用技巧与插件推荐

目录 常用使用技巧 1. 使用快捷键提升开发效率 2. 多光标编辑 3. 代码自动补全 4. 使用 Find Action 快速执行操作 5. 集成版本控制系统&#xff08;VCS&#xff09; 6. 快速查看代码文档 推荐插件 1. Lombok Plugin 2. Rainbow Brackets 3. Key Promoter X 4. Chec…...

zookeeper基础命令详解

zookeeper基础命令详解目录 文章目录 zookeeper基础命令详解目录一、列出所有基础命令 一、列出所有基础命令 先启动一个zookeeper客户端连接zookeeper&#xff0c;如果还没有启动zookeeper集群的参考本文启动之后再做后续操作。 https://blog.csdn.net/weixin_42924400/artic…...

2025周易算命网站搭建详细方法+源码选择php环境的配置

以下是一个详细的搭建教程&#xff0c;包括网站分类、环境配置、程序设计和功能实现。 1. 环境准备 1.1 服务器选择 操作系统: Linux&#xff08;推荐使用Ubuntu或CentOS&#xff09;Web服务器: Nginx数据库: MySQLPHP版本: 7.4.x&#xff08;确保小于8.0&#xff09; 1.2 安…...

16:00面试,16:06就出来了,问的问题有点变态。。。

从小厂出来&#xff0c;没想到在另一家公司又寄了。 到这家公司开始上班&#xff0c;加班是每天必不可少的&#xff0c;看在钱给的比较多的份上&#xff0c;就不太计较了。没想到5月一纸通知&#xff0c;所有人不准加班&#xff0c;加班费不仅没有了&#xff0c;薪资还要降40%…...

《杨辉三角》

题目描述 给出 n(1≤n≤20)n(1≤n≤20)&#xff0c;输出杨辉三角的前 nn 行。 如果你不知道什么是杨辉三角&#xff0c;可以观察样例找找规律。 输入格式 无 输出格式 无 输入输出样例 输入 #1复制 6 输出 #1复制 1 1 1 1 2 1 1 3 3 1 1 4 6 4 1 1 5 10 10 5 1 C语言…...

2024年03月中国电子学会青少年软件编程(Python)等级考试试卷(五级)答案 + 解析

青少年软件编程(Python)等级考试试卷(五级) 分数:100 题数:38 一、单选题(共25题,共50分) 1. 以下代码的输出结果是?( ) nums = list(range(100, 201)) print...

【游戏设计原理】7 - 加德纳的多元智能理论

虽然多元智能理论是对认知方式的分类&#xff0c;但它也可以为游戏设计提供丰富的思路和策略&#xff0c;帮助设计师创建更具吸引力、包容性和多样性的游戏。通过理解不同玩家的认知方式和优势&#xff0c;我们可以更精准地设计游戏的元素和玩法&#xff0c;使其能够吸引广泛的…...

Jackson @JsonProperty 注解

1. 概述 Jackson 是一个流行的Java库&#xff0c;用于将Java对象转换为JSON格式以及从JSON反序列化回Java对象。一种常见的需求是在序列化为JSON或从JSON反序列化时自定义字段的命名。Jackson 的 JsonProperty 注解正好满足了这一需求。 JsonProperty 注解概览 JsonProperty…...

【数据结构——栈与队列】链栈的基本运算(头歌实践教学平台习题)【合集】

目录&#x1f60b; 任务描述 相关知识 测试说明 我的通关代码: 测试结果&#xff1a; 任务描述 本关任务&#xff1a;编写一个程序实现链栈的基本运算。 相关知识 为了完成本关任务&#xff0c;你需要掌握&#xff1a; 初始化栈、销毁栈、判断栈是否为空、进栈、出栈、取栈…...

数据库乐观锁和悲观锁、redis分布式锁使用场景

前言 最近发现我们同事&#xff0c;但凡需要加锁的地方都用的是分布式锁。而且我们的后台系统&#xff0c;并没有什么并发量&#xff0c;而且还是单体应用。我真的有点怀疑我的同事不太清楚数据乐观锁、悲观锁和redis分布式的使用场景。 请今天就说一下各种锁的应用场景吧。 …...

React的状态管理库-Redux

核心思想&#xff1a;单一数据源、状态是只读的、以及使用纯函数更新状态。 组成部分 Store&#xff08;存储&#xff09; 应用的唯一状态容器&#xff0c;存储整个应用的状态树,使用 createStore() 创建。 getState()&#xff1a;获取当前状态。dispatch(action)&#xff…...

《自制编译器》--青木峰郎 -读书笔记 编译hello

在该书刚开始编译hello.cb时就遇到了问题。 本人用的是wsl&#xff0c;环境如下&#xff0c; 由于是64位&#xff0c;因此根据书中的提示&#xff0c;从git上下载了64位的cb编译器 cbc-64bit 问题一: 通过如下命令编译时,总是报错。 cbc -Wa,"--32" -Wl,"-…...

XSS(跨站攻击)

XSS漏洞&#xff08;跨站脚本&#xff09; 1.XSS 漏洞简介 ​ XSS又叫CSS&#xff08;Cross Site Script&#xff09;跨站脚本攻击是指恶意攻击者往Web页面里插入恶意Script代码&#xff0c;当用户浏览该页之时&#xff0c;嵌入其中Web里面的Script代码会被执行&#xff0c;从…...

华为自反ACL实验

一、实验背景 做这个实验的原因是最近公司里上了三台小程序服务器&#xff0c;由于三台服务器的端口都映射出去了&#xff0c;领导要求A网段的三台服务器不能访问内网B&#xff0c;C网段&#xff0c;同时B、C网段内网用户可以访问A段的94、95、96服务器&#xff1b; 也就是PC4\…...

MyBatisPlus实现多表查询

在MyBatisPlus中实现多表查询&#xff0c;主要有以下几种方法&#xff1a; 使用注解进行多表查询&#xff1a; 你可以在Mapper接口中使用Select注解来编写SQL查询语句&#xff0c;实现多表查询。例如&#xff0c;如果你想根据用户ID查询用户信息和对应的区域名称&#xff0c;可…...

【人工智能-中级】循环神经网络(RNN)与Transformer在自然语言处理中的进阶应用

循环神经网络(RNN)与Transformer在自然语言处理中的进阶应用 自然语言处理(NLP)是人工智能领域中的重要分支,其主要任务是使计算机能够理解、生成和处理人类语言。近年来,循环神经网络(RNN)和Transformer模型已成为NLP领域的两大核心技术。本文将探讨这两类模型在自然…...

ZED相机应用

下载SDK wget https://stereolabs.sfo2.cdn.digitaloceanspaces.com/zedsdk/3.6/ZED_SDK_Ubuntu18_cuda11.5_v3.6.5.run 安装 ./ZED_SDK_Ubuntu18_cuda11.5_v3.6.5.run skip_python 测试 cd /usr/local/zed/tools ls ZED_Calibration ZED_Depth_Viewer ZED_Diagnostic ZED_E…...

大模型呼入机器人如何赋能呼叫中心?(转)

大模型呼入机器人如何赋能呼叫中心&#xff1f;(转) 原作者&#xff1a;开源呼叫中心FreeIPCC 大模型呼入机器人在赋能呼叫中心方面发挥着重要作用&#xff0c;主要体现在以下几个方面&#xff1a; 一、提升服务效率与质量 24小时不间断服务&#xff1a; 大模型呼入机器人能…...

基于Python对xslxslx文件进行操作

利用python操作表格文件 读取xsl格式文件-源码 import xlrd# 读取xls文件中的工作对象 wb xlrd.open_workbook(示例文件/xxx物理学与信息技术学院.xls) print(wb)# 获取所有的工作表名称 sheet_names wb.sheet_names() # print(sheet_names)# 选择要读取的具体工作表对象 s…...

预处理器Stylus的介绍及使用,并同Less、Sass进行对比(简单介绍)

目录 一、安装与配置 安装Node.js&#xff1a; 安装Stylus&#xff1a; 配置Webpack&#xff1a; 二、编写Stylus代码 定义变量&#xff1a; 使用变量&#xff1a; 嵌套语法&#xff1a; 混合&#xff08;Mixins&#xff09;&#xff1a; 函数&#xff1a; 6.关键字参…...

ansible自动化运维(四)jinjia2模板

Jinjia2模板 前面说到playbook组成的时候&#xff0c;有介绍到template模块&#xff0c;而template模块对模板文件进行渲染时&#xff0c;使用的就是jinja2模板引擎&#xff0c;jinja2本身就是基于python的模板引擎&#xff0c;所以下面先来了解一下jinjia2模板的一些用法 基…...

ubuntu系统的docker安装(2)

查看系统版本 lsb_release -asudo systemctl status docker查看docker是否安装成功 docker pull拉取镜像不成功/docker run不成功 可能有多种原因&#xff1a;网络链接不稳定&#xff0c;没有重启docker&#xff0c;可以先将docker源设置为国内镜像源 sudo systemctl rest…...

.Net C#医院检验系统源码,实验室管理信息LIS系统

LIS系统源代码&#xff0c;.Net C#医院检验系统源码&#xff0c;三级医院应用案例&#xff0c;自主版权&#xff0c;适合二次开发上项目。 本套实验室管理信息LIS系统采用.Net C#语言开发&#xff0c;用C/S架构。支持DB2,Oracle,MS SQLServer等主流数据库。可根据医院情况配置…...

STM32-FATFS文件系统

一、FATFS文件系统介绍&#xff1a; FATFS 是一个完全免费开源的 FAT/exFAT 文件系统模块&#xff0c;专门为小型的嵌入式系统而设计。它完全用标准 C 语言&#xff08;ANSI C C89&#xff09;编写&#xff0c;所以具有良好的硬件平台独立性&#xff0c;只需做简单的修改就可以…...

【多模态】swift框架使用qwen2-vl

前言 前几篇里面学习了常见的一些多模态模型的典型架构和源代码&#xff0c;上一篇里面测试使用了minicpm-v系列模型&#xff0c;在尝试RLHF的时候发现swift特别好用特别全&#xff0c;记录一下对swift的一些使用&#xff0c;欢迎批评指正&#xff5e;   前一篇里面写了minic…...

什么是全局对象和全局变量

在JavaScript中&#xff0c;全局对象和全局变量是两个重要的概念&#xff0c;它们与代码的执行环境和作用域紧密相关。 全局对象 全局对象&#xff08;Global Object&#xff09;是在代码的任何地方都能访问到的对象。在浏览器环境中&#xff0c;全局对象通常是window对象&…...

【收藏】Cesium billboard添加icon图片、label文字带背景图片(使用canvas绘制实现,附完整源码,vue2或vue3+vite都适用)

1.效果 在项目开发过程中&#xff0c;有一个需求是有若干个需要展示的点&#xff0c;每个点icon不一样、对应的广告牌文字不一样、并且文字还需要有图片背景、每个文字背景也不同&#xff08;抓狂&#xff09;。这种需求只能编写canvas来绘制“icon文字背景文字”的image&#…...

【安卓开发】【Android Studio】启动时报错“Unable to access Android SDK add-on list”

一、问题描述 在启动Android Studio时&#xff0c;软件报错&#xff1a;Unable to access Android SDK add-on list&#xff0c;报错截图如下&#xff1a; 二、原因及解决方法 初步推测是由于网络节点延迟&#xff0c;无法接入谷歌导致的。点击Cancel取消即可。...

前缀和的两种构造方法

方法1 public preSum(int[] nums) {// preSum[0] 0&#xff1b;preSum new int[nums.length 1];// 计算 nums 的累加和for (int i 1; i < preSum.length; i) {preSum[i] preSum[i - 1] nums[i - 1];}} 方法2 public preSum(int[] nums) {preSum[0] nums[0];preSum …...