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

基于树莓派的智能家居中控系统：集成Flask、HTML、JavaScript与MQTT协议的文心一言AI接入（代码示例）

news 来源：原创 2024/9/19 2:48:47

一、项目概述

随着智能家居技术的快速发展，越来越多的用户希望通过智能设备提升家居生活的便利性和智能化水平。本项目旨在搭建一个基于树莓派的AI接入文心一言智能家居中控系统。该系统能够根据AI获取的实时数据（如天气、温度、湿度等）自动控制家居设备，并支持用户通过可视化界面进行手动控制。

通过接入文心一言的AI接口，我们可以获取天气预报、空气质量等信息，进而智能化地控制家居设备。例如，当天气预报显示即将下雨时，系统可以自动关闭窗帘，或者在高温天气时启动空调。

二、系统架构

1. 硬件架构

  • 主控单元：树莓派 4B
  • 传感器：DHT11温湿度传感器、BMP180气压传感器
  • 执行器：继电器模块（控制灯光、风扇等设备）
  • 网络模块：Wi-Fi模块（树莓派自带）

2. 软件架构

  • 操作系统：Raspberry Pi OS
  • 编程语言：Python
  • 后端框架：Flask
  • 数据库：SQLite（用于存储用户设置和设备状态）
  • 消息协议：MQTT（用于设备间通信）
  • 前端框架：HTML/CSS/JavaScript（用于可视化界面）
  • AI接口：文心一言API（获取天气等信息）

3. 系统流程

  1. 数据采集：传感器实时采集环境数据并上传至后端。
  2. 数据处理：后端根据采集的数据和文心一言AI接口获取的天气信息进行处理。
  3. 设备控制：根据处理结果通过MQTT控制继电器模块，进而控制家居设备。
  4. 用户交互：用户通过可视化界面查看状态和手动控制设备。

三、环境搭建

1. 硬件连接

将传感器和继电器模块连接至树莓派的GPIO接口。以DHT11为例，接线如下：

  • DHT11 VCC接树莓派5V
  • DHT11 GND接树莓派GND
  • DHT11 DATA接树莓派GPIO 17

2. 软件环境

1. 系统更新
sudo apt update
sudo apt upgrade
2. 安装Python及相关库
sudo apt install python3 python3-pip
3. 安装Flask和MQTT库
pip3 install Flask paho-mqtt requests
4. 安装传感器库
pip3 install Adafruit-DHT
5. 创建SQLite数据库

使用SQLite创建数据库和表：

import sqlite3conn = sqlite3.connect('smart_home.db')
c = conn.cursor()# 创建设备状态表
c.execute('''CREATE TABLE IF NOT EXISTS device_status(id INTEGER PRIMARY KEY, name TEXT, state INTEGER)''')conn.commit()
conn.close()

四、代码实现

1. 硬件端代码

1.1 读取传感器数据

以下是用于读取DHT11温湿度传感器数据并通过MQTT发布的代码：

import Adafruit_DHT
import paho.mqtt.client as mqtt
import requests
import time
import sqlite3# 传感器设置
DHT_SENSOR = Adafruit_DHT.DHT11
DHT_PIN = 17# MQTT设置
MQTT_BROKER = "localhost"
MQTT_TOPIC = "home/sensors"# 文心一言API设置
WENXIN_API_URL = "https://api.wenxinyiyan.com/weather"  # 替换为实际的文心一言API URL
WENXIN_API_KEY = "your_api_key"  # 替换为你的文心一言API密钥
def get_weather_data():"""获取实时天气数据"""try:response = requests.get(WENXIN_API_URL, params={"apikey": WENXIN_API_KEY})if response.status_code == 200:return response.json()  # 返回JSON数据else:print("获取天气数据失败:", response.status_code)return Noneexcept Exception as e:print("请求文心一言API时出错:", e)return Nonedef read_sensor_and_control():"""读取传感器数据并根据天气数据控制设备"""humidity, temperature = Adafruit_DHT.read_retry(DHT_SENSOR, DHT_PIN)if humidity is not None and temperature is not None:mqtt_publish(temperature, humidity)# 获取天气数据weather_data = get_weather_data()if weather_data:# 根据天气数据做出智能决策if weather_data['weather'] == "Rain":control_device("窗帘", 0)  # 关闭窗帘elif weather_data['temperature'] > 30:control_device("空调", 1)  # 打开空调else:print("无法从湿度传感器获取数据")def mqtt_publish(temperature, humidity):"""将温湿度数据发布到MQTT主题"""client = mqtt.Client()  # 创建MQTT客户端client.connect(MQTT_BROKER)  # 连接到MQTT代理client.publish(MQTT_TOPIC, f"Temperature: {temperature}°C, Humidity: {humidity}%")  # 发布数据client.disconnect()  # 断开连接def control_device(device_name, state):"""根据设备名称和状态来控制设备"""conn = sqlite3.connect('smart_home.db')c = conn.cursor()c.execute("UPDATE device_status SET state=? WHERE name=?", (state, device_name))  # 更新设备状态conn.commit()conn.close()if __name__ == "__main__":while True:read_sensor_and_control()  # 持续读取传感器数据并控制设备time.sleep(10)  # 每10秒读取一次

2. 软件层代码

2.1 Flask后端代码

接下来，我们需要实现Flask后端，以便用户可以通过HTTP请求与系统交互。

from flask import Flask, jsonify, request
import sqlite3
import requestsapp = Flask(__name__)def init_db():"""初始化数据库，创建设备状态表"""conn = sqlite3.connect('smart_home.db')c = conn.cursor()c.execute('''CREATE TABLE IF NOT EXISTS device_status(id INTEGER PRIMARY KEY, name TEXT, state INTEGER)''')conn.commit()conn.close()@app.route('/devices', methods=['GET'])
def get_devices():"""获取所有设备的状态"""conn = sqlite3.connect('smart_home.db')c = conn.cursor()c.execute("SELECT * FROM device_status")devices = c.fetchall()  # 获取所有设备状态conn.close()return jsonify(devices)  # 以JSON格式返回设备状态@app.route('/devices/<int:device_id>', methods=['POST'])
def control_device(device_id):"""控制设备的开关状态"""data = request.jsonstate = data.get('state')conn = sqlite3.connect('smart_home.db')c = conn.cursor()c.execute("UPDATE device_status SET state=? WHERE id=?", (state, device_id))  # 更新设备状态conn.commit()conn.close()return jsonify({"message": "设备状态已更新"}), 200  # 返回成功消息@app.route('/weather', methods=['GET'])
def get_weather():"""获取天气信息"""weather_data = get_weather_data()  # 调用获取天气数据的函数if weather_data:return jsonify(weather_data)  # 返回天气数据else:return jsonify({"error": "无法获取天气数据"}), 500if __name__ == "__main__":init_db()  # 初始化数据库app.run(host='0.0.0.0', port=5000)  # 启动Flask应用

3. 前端代码

3.1 HTML文件（index.html）

首先，创建一个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"> <!-- 引入CSS样式 --><script src="script.js" defer></script> <!-- 引入JavaScript文件 -->
</head>
<body><h1>智能家居控制中心</h1><h2>设备状态</h2><div id="device-list"></div> <!-- 显示设备状态的区域 --><button id="refresh-button">刷新设备状态</button> <!-- 刷新按钮 --><h2>当前天气</h2><div id="weather-info"></div> <!-- 显示天气信息的区域 --><script>// 页面加载时自动获取设备状态和天气信息window.onload = function() {fetchDevices();fetchWeather();};</script>
</body>
</html>

代码说明：

  • 创建基本的HTML结构，包含标题和显示设备状态的区域。
  • 添加一个按钮用于手动刷新设备状态和天气信息。
  • 在页面加载时，自动调用fetchDevices()和fetchWeather()函数以获取设备状态和天气信息。
3.2 CSS样式（style.css）

接下来，创建一个CSS文件来美化页面。

body {font-family: Arial, sans-serif; /* 设置字体 */margin: 0;padding: 20px;background-color: #f4f4f4; /* 背景颜色 */
}h1 {color: #333; /* 标题颜色 */
}h2 {color: #555; /* 副标题颜色 */
}#device-list {margin-top: 20px; /* 设备列表的间距 */
}.device {background-color: #fff; /* 每个设备的背景颜色 */border: 1px solid #ccc; /* 边框样式 */border-radius: 5px;padding: 10px;margin-bottom: 10px; /* 设备之间的间距 */
}button {padding: 10px 15px; /* 按钮内边距 */background-color: #007bff; /* 按钮背景颜色 */border: none;color: white; /* 按钮文本颜色 */border-radius: 5px; /* 按钮圆角 */cursor: pointer; /* 鼠标悬停时显示为手型 */
}button:hover {background-color: #0056b3; /* 鼠标悬停时的背景颜色 */
}

代码说明：

  • 使用简单的CSS样式来美化页面，包括背景颜色、字体、边框和按钮样式。
  • .device类用于设置设备状态显示的样式。

3.3 JavaScript代码（script.js）

const apiUrl = "http://<树莓派IP>:5000/devices"; // 替换为你的树莓派IP地址
const weatherApiUrl = "http://<树莓派IP>:5000/weather"; // 替换为你的树莓派IP地址// 页面加载时自动获取设备状态和天气信息
window.onload = function() {fetchDevices();fetchWeather();
};// 获取设备状态的函数
async function fetchDevices() {try {const response = await fetch(apiUrl); // 发起GET请求获取设备状态const devices = await response.json(); // 解析JSON响应displayDevices(devices); // 显示设备状态} catch (error) {console.error("获取设备状态失败：", error); // 错误处理}
}// 显示设备状态的函数
function displayDevices(devices) {const deviceList = document.getElementById("device-list");deviceList.innerHTML = ""; // 清空之前的内容devices.forEach(device => {const deviceDiv = document.createElement("div");deviceDiv.className = "device"; // 设置设备样式deviceDiv.innerHTML = `<h2>${device[1]}</h2> <!-- 设备名称 --><p>状态: ${device[2] === 1 ? "开" : "关"}</p> <!-- 设备状态 --><button onclick="toggleDevice(${device[0]}, ${device[2]})">${device[2] === 1 ? "关闭" : "打开"}</button>`; // 创建设备状态和控制按钮deviceList.appendChild(deviceDiv); // 添加到设备列表中});
}// 切换设备状态的函数
async function toggleDevice(deviceId, currentState) {const newState = currentState === 1 ? 0 : 1; // 切换状态try {const response = await fetch(`http://<树莓派IP>:5000/devices/${deviceId}`, { // 替换为你的树莓派IPmethod: 'POST', // 指定请求方法为POSTheaders: {'Content-Type': 'application/json', // 设置请求头为JSON格式},body: JSON.stringify({ state: newState }) // 将新状态转为JSON格式});if (response.ok) {fetchDevices(); // 更新设备状态alert("设备状态已更新!"); // 提示用户设备状态已更新} else {alert("设备状态更新失败!"); // 提示用户更新失败}} catch (error) {console.error("更新设备状态时出错：", error); // 错误处理}
}// 获取天气信息的函数
async function fetchWeather() {try {const response = await fetch(weatherApiUrl); // 发起GET请求获取天气信息const weatherData = await response.json(); // 解析JSON响应displayWeather(weatherData); // 显示天气信息} catch (error) {console.error("获取天气信息失败：", error); // 错误处理}
}// 显示天气信息的函数
function displayWeather(weatherData) {const weatherInfo = document.getElementById("weather-info");weatherInfo.innerHTML = ""; // 清空之前的内容// 显示天气信息if (weatherData) {weatherInfo.innerHTML = `<p>温度: ${weatherData.temperature} °C</p><p>天气: ${weatherData.weather}</p><p>湿度: ${weatherData.humidity} %</p>`;} else {weatherInfo.innerHTML = "<p>无法获取天气信息</p>"; // 显示错误信息}
}// 刷新设备状态的按钮功能
document.getElementById("refresh-button").addEventListener("click", function() {fetchDevices(); // 刷新设备状态fetchWeather(); // 刷新天气信息
});

代码说明：

  • fetchDevices():

    • 使用fetch API发起GET请求，获取当前设备的状态数据。
    • 如果请求成功，解析JSON格式的响应并调用displayDevices(devices)函数将设备信息显示在页面上。
    • 如果请求失败，捕获并打印错误信息到控制台。

  • displayDevices(devices):

    • 接收设备列表作为参数，清空之前显示的内容。
    • 遍历每个设备，创建一个新的div元素来展示设备的名称、状态（开/关）和对应的控制按钮。
    • 按钮的onclick事件绑定到toggleDevice(deviceId, currentState)函数，以便用户可以通过点击按钮来切换设备的状态。
    • 将每个设备的div元素添加到设备列表中。

  • toggleDevice(deviceId, currentState):

    • 接收设备ID和当前状态作为参数，计算出新的状态（如果当前是开，则切换为关，反之亦然）。
    • 使用fetch API发起POST请求，向后端发送更新设备状态的请求。
    • 请求的URL为http://<树莓派IP>:5000/devices/${deviceId}，其中deviceId是要控制的设备的ID。
    • 请求体使用JSON格式，包含新的状态。
    • 如果请求成功，调用fetchDevices()刷新设备状态并显示更新后的信息，同时弹出提示框通知用户设备状态已更新。
    • 如果请求失败，则弹出提示框通知用户更新失败，并在控制台打印错误信息。

  • fetchWeather():

    • 使用fetch API发起GET请求，获取天气信息。
    • 如果请求成功，解析JSON格式的响应并调用displayWeather(weatherData)函数将天气信息显示在页面上。
    • 如果请求失败，捕获并打印错误信息到控制台。

  • displayWeather(weatherData):

    • 接收天气数据作为参数，清空之前显示的内容。
    • 如果天气数据存在，则更新天气信息的显示，包括温度、天气状况和湿度。
    • 如果没有获取到天气数据，则显示相应的错误信息。

  • 刷新按钮功能:

    • 为“刷新设备状态”按钮添加事件监听器，当用户点击按钮时，会调用fetchDevices()和fetchWeather()函数，以获取最新的设备状态和天气信息，确保用户界面始终显示最新的数据。

五、项目总结

通过本项目，我们成功搭建了一个基于树莓派的AI接入文心一言智能家居中控系统。该系统能够实时获取环境数据，并根据获取的天气信息自动控制家居设备。同时，用户可以通过可视化界面方便地查看设备状态和手动控制设备开关。

技术栈总结

  • 硬件：树莓派、DHT11传感器、继电器模块
  • 后端：Flask（Python）、SQLite（数据库）
  • 前端：HTML、CSS、JavaScript
  • 通信协议：MQTT（用于传感器和设备的通信）
  • AI接口：文心一言API（获取天气和空气质量信息）

相关文章：

  • 北京网站建设多少钱？
  • 辽宁网页制作哪家好_网站建设
  • 高端品牌网站建设_汉中网站制作
  • c语言11天笔记
  • @SpringBootConfiguration重复加载报错
  • 层次分析法（评价类问题）
  • NLP——文本预处理
  • Vue脚手架的安装（超详细篇，保姆级教程）
  • 【web3.0】Web3 开发教程与代码资源:探索如何在Web3项目中开发应用
  • VBA之Excel应用第二章第三节:InputBox函数对话框
  • Io 35
  • VUE实现TAB切换不同页面
  • 【Vue】vue3 中使用 ResizeObserver 监听元素的尺寸宽度变化
  • 洛谷练习（8.6）
  • Maven实战.插件
  • 深入SpringBoot：SpringCache的集成与使用
  • SQL注入之sqli-labs靶场第一关
  • sql server 通过 sql查询今天、本周、上周、本月、上月、今年、去年的时间范围
  • 2017年终总结、随想
  • android 一些 utils
  • AngularJS指令开发（1）——参数详解
  • Asm.js的简单介绍
  • es的写入过程
  • iOS仿今日头条、壁纸应用、筛选分类、三方微博、颜色填充等源码
  • Java 网络编程（2）：UDP 的使用
  • js递归,无限分级树形折叠菜单
  • learning koa2.x
  • MySQL-事务管理（基础）
  • OSS Web直传 （文件图片）
  • SQLServer插入数据
  • vue+element后台管理系统，从后端获取路由表，并正常渲染
  • 从PHP迁移至Golang - 基础篇
  • 基于HAProxy的高性能缓存服务器nuster
  • 技术发展面试
  • 目录与文件属性：编写ls
  • 前端
  • 深度学习入门：10门免费线上课程推荐
  • 数组的操作
  • 小程序滚动组件，左边导航栏与右边内容联动效果实现
  • # Panda3d 碰撞检测系统介绍
  • # Pytorch 中可以直接调用的Loss Functions总结：
  • #vue3 实现前端下载excel文件模板功能
  • #我与Java虚拟机的故事#连载19：等我技术变强了，我会去看你的 ​
  • （14）学习笔记：动手深度学习（Pytorch神经网络基础）
  • （9）目标检测_SSD的原理
  • （BFS）hdoj2377-Bus Pass
  • （附源码）springboot炼糖厂地磅全自动控制系统 毕业设计 341357
  • (附源码)计算机毕业设计SSM在线影视购票系统
  • （理论篇）httpmoudle和httphandler一览
  • （力扣）循环队列的实现与详解（C语言）
  • （论文阅读30/100）Convolutional Pose Machines
  • （没学懂，待填坑）【动态规划】数位动态规划
  • (转)Java socket中关闭IO流后，发生什么事？（以关闭输出流为例） .
  • （转）负载均衡，回话保持，cookie
  • ****** 二 ******、软设笔记【数据结构】-KMP算法、树、二叉树
  • ./mysql.server: 没有那个文件或目录_Linux下安装MySQL出现“ls: /var/lib/mysql/*.pid: 没有那个文件或目录”...
  • .gitignore
  • .net 4.0发布后不能正常显示图片问题