网页显示stm32串口输出的数据，环境检测（温湿度）、小型智能房屋系统

没有头发的男人

于 2024-08-27 09:57:49 发布

阅读量47

点赞数

文章标签： stm32 嵌入式实时数据库嵌入式硬件单片机

本文链接：https://blog.csdn.net/weixin_53569144/article/details/140839057

版权

一、前言

这几天自己接了个小的项目，要求将stm32的串口数据打印出来并且在自制的网页上显示，一个小型的智能房屋系统，显示房屋灯、门、窗的打开或关闭状态，显示检测到的温湿度数值，并且将数据保存到本地的数据库中。

这次的设计是本地化的形式，所有的数据不通过网络上传，具体的方式是stm32数据需要的数据并接电脑，电脑上将串口输出数据保存为Jason格式的TXT文档，这个文档需要给前端识别并将数据解析使用，思路并不复杂，使用起来就比较麻烦了，前期的环境配置更是难，浪费了五六个小时，好在最后是已经通过测试，并且交付到客户手中。

二、设计内容

本次设计需要用到四款软件：

①Navicat Premium 17做数据库；

②HBuilder X做前端；

③IntelliJ IDEA 2024.1做后端的Java程序；

④Keil uVision5做stm32程序。

这四款软件我主要做的是最后一个项，设计stm32的硬件➕程序，前三项的程序内容是由别人做出来的，由于网页是本地化的，所以最终的实现是在我电脑上完成，所以我这别有完成的一套程序代码。

三、技术难点代码展示

1、数据库部分程序：

数据库应该用软件生成的，由于我这边不懂，所以不做过多阐述：

smarthome.sql

INSERT INTO `outputdevice` VALUES (1, 'light', 'LivingRoom', 'ON', '2024-07-04 00:34:48');
INSERT INTO `outputdevice` VALUES (2, 'door', 'Bedroom', 'OFF', '2024-07-04 00:34:48');
INSERT INTO `outputdevice` VALUES (3, 'window', 'Office', 'ON', '2024-07-04 00:34:48');

INSERT INTO `records` VALUES (1, 'temperature', '2024-07-04 00:36:50', 22.1, 1);
INSERT INTO `records` VALUES (2, 'humidity', '2024-07-04 00:36:50', 48.2, 2);

2、前端部分程序：

前端也不是我做的，所以不做过多阐述：

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login and Register Page</title>
    <link rel="stylesheet" href="./css/login.css">
</head>
<body>
    <div class="login-container">
        <h2 id="formTitle">Login</h2>
        <form id="loginForm">
            <div class="input-group">
                <input type="text" id="loginUsername" placeholder="Username" required>
            </div>
            <div class="input-group">
                <input type="password" id="loginPassword" placeholder="Password" required>
            </div>
            <button type="submit">Login</button>
            <p>Don't have an account? <a href="#" id="showRegisterForm">Register</a></p>
        </form>
        <form id="registerForm" style="display:none;">
            <div class="input-group">
                <input type="text" id="registerUsername" placeholder="Username" required>
            </div>
            <div class="input-group">
                <input type="password" id="registerPassword" placeholder="Password" required>
            </div>
            <button type="submit">Register</button>
            <p>Already have an account? <a href="#" id="showLoginForm">Login</a></p>
        </form>
    </div>
    <script>
        document.getElementById('loginForm').addEventListener('submit', function(event) {
            event.preventDefault();
            const username = document.getElementById('loginUsername').value;
            const password = document.getElementById('loginPassword').value;
    
            fetch('http://localhost:8080/api/login', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ username, password })
            })
            .then(response => response.json())
            .then(data => {
                if (data.message === 'Login successful') {
                    window.location.href = 'home.html';
                } else {
                    alert(data.message);
                }
            })
            .catch(error => {
                console.error('Error:', error);
            });
        });

        document.getElementById('registerForm').addEventListener('submit', function(event) {
            event.preventDefault();
            const username = document.getElementById('registerUsername').value;
            const password = document.getElementById('registerPassword').value;
    
            fetch('http://localhost:8080/api/register', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ username, password })
            })
            .then(response => response.json())
            .then(data => {
                alert(data.message);
                if (data.message === 'User registered successfully') {
                    document.getElementById('showLoginForm').click();
                }
            })
            .catch(error => {
                console.error('Error:', error);
            });
        });

        document.getElementById('showRegisterForm').addEventListener('click', function(event) {
            event.preventDefault();
            document.getElementById('loginForm').style.display = 'none';
            document.getElementById('registerForm').style.display = 'block';
            document.getElementById('formTitle').innerText = 'Register';
        });

        document.getElementById('showLoginForm').addEventListener('click', function(event) {
            event.preventDefault();
            document.getElementById('loginForm').style.display = 'block';
            document.getElementById('registerForm').style.display = 'none';
            document.getElementById('formTitle').innerText = 'Login';
        });
    </script>
</body>
</html>

3、后端部分程序：

后端里面主要就是如何去解析stm32串口的数据，这部分是最重要的，如果这块解析不了，那么这个设计基本就废了，所以，经过产找资料并且反复实验，最终将串口输出的格式改为Jason格式并保存到TXT文档，后端去直接调用这个文档并解析使用：

HandleDeviceRecord.java

public void checkAndProcessFile() {
        Path path = Paths.get("D:\\device_record.txt");
        if (Files.exists(path)&& Files.isRegularFile(path) && Files.isWritable(path)) {

            logger.info("Start parsing device information !***************");

            List<List<DeviceRequest>> deviceRequests = parseDeviceRequests(path);
            if (!CollectionUtils.isEmpty(deviceRequests)) {
                List<DeviceRequest> lastDeviceRequests = deviceRequests.get(deviceRequests.size() - 1);
                this.upsertConditionAndRecord(lastDeviceRequests);
                try {
                    Files.delete(path);
                    logger.info("File deleted successfully.");
                } catch (IOException e) {
                    System.err.println("Failed to delete file: " + e.getMessage());
                }

            }
            logger.info("End parsing device information !***************");
        }
    }

4、STM32部分程序：

output_Jason.c

pJson2Buff[MqttType] = 0x30;
	
	pJson2Buff[TopicNameLen] 		 		= 0x00;
	pJson2Buff[TopicNameLen + 1] 		= 0x03;
	pJson2Buff[TopicName] 			 		= 0x24;	//$dp
	pJson2Buff[TopicName + 1] 	 		= 0x64;
	pJson2Buff[TopicName + 2] 	 		= 0x70;
			
	pJson2Buff[DpType] 					 		= 0x03;
	
	pJson2Buff[JsonStrLen + 2 + i++]	= '{';
	
	STRING_SIZE7('"','t','e','m','p','"',':');//"temp":
	
	pJson2Buff[JsonStrLen + 2 + i++]	= sht30_gTEMP[3];	//*
	pJson2Buff[JsonStrLen + 2 + i++]	= sht30_gTEMP[2];	//*
	pJson2Buff[JsonStrLen + 2 + i++]	= '.';	//*
	pJson2Buff[JsonStrLen + 2 + i++]	= sht30_gTEMP[1];	//*
	pJson2Buff[JsonStrLen + 2 + i++]	= sht30_gTEMP[0];	//temp scale
	
	pJson2Buff[JsonStrLen + 2 + i++]	= ',';	//*
	STRING_SIZE7('"','h','u','m','i','"',':');	//,"humi":
	
	pJson2Buff[JsonStrLen + 2 + i++]	= sht30_gHUMI[3];	//*
	pJson2Buff[JsonStrLen + 2 + i++]	= sht30_gHUMI[2];	//*
	pJson2Buff[JsonStrLen + 2 + i++]	= '.';	//*
	pJson2Buff[JsonStrLen + 2 + i++]	= sht30_gHUMI[1];	//*
	pJson2Buff[JsonStrLen + 2 + i++]	= sht30_gHUMI[0];	//temp scale
	
	pJson2Buff[JsonStrLen + 2 + i++]	= ',';	//*