基于HTML、JAVAscript、AJAX、的可视化页面

wlwwwhl

已于 2022-05-28 21:17:38 修改

阅读量961

点赞数 2

于 2021-07-23 11:44:02 首次发布

本文链接：https://blog.csdn.net/wlwwwhl/article/details/119028450

版权

AJAX 专栏收录该内容

1 篇文章 1 订阅

订阅专栏

基于HTML、JAVAscript、AJAX、的可视化页面

简单物联网应用——基于老人居家声音监测系统

用户界面主要包括数据实时显示、异常数据报警、时间阈值和音量阈值的设置。
页面实时展示数据的接收时间、设备的名称位置、设备的类型、设备的状态以及音量值，
目的是实时监测老人行为信息，当声音感知识别发现老人处在同一地方较长时间未发出声音
或老人发生突发状况时，及时显示报警信息，从而及时救治老人。根据老人长时间的生活习
惯准确提取老人健康信息，以便采取相关措施，有效地预防疾病和及早治疗，确保身体健康。
实时监测老人的地理位置信息，当老人出现问题时，儿女能以最快的速度精确的找到老人的
所在位置，及时为老人提供相应的帮助。
为此，编写了一个 web 端和移动端的界面，如下图 4-2 和图 4-3 所示所示，用来直接监
测老人居家情况。

在这里插入图片描述

系统的数据的接收时间、设备的名称定位、设备的类型、设备的状态以及传感器采集的
数据将在页面展示出来。当接收到一条新的数据时，将数据放入 data 变量，由于发送方发
送的数据格式为 json，则将 json 数据直接由键值的形式赋值给相应的变量，并传到页面上
去，代码如下：

if(1)
{16
var data=eval("("+r_message.payloadString+")")

(1)房间数据传送：

if(data.device == "room"){
document.getElementById("data_time1").value = data.get_time;
document.getElementById("data_device1").value = data.device;
document.getElementById("data_type1").value = data.sensorType;
document.getElementById("data_get_data1").value = data.get_data;
document.getElementById("data_value1").value = data.get_value;
}

(2)卧室数据传送：

if(data.device == "bedroom"){
document.getElementById("data_time2").value = data.get_time;
document.getElementById("data_device2").value = data.device;
document.getElementById("data_type2").value = data.sensorType;
document.getElementById("data_get_data2").value = data.get_data;
document.getElementById("data_value2").value = data.get_value;
}

(3)厨房数据传送：

if(data.device == "kitchen"){
document.getElementById("data_time3").value = data.get_time;
document.getElementById("data_device3").value = data.device;
document.getElementById("data_type3").value = data.sensorType;
document.getElementById("data_get_data3").value = data.get_data;
document.getElementById("data_value3").value = data.get_value;
}

(4)卫生间数据传送：

if(data.device == "bathroom"){
document.getElementById("data_time4").value = data.get_time;
document.getElementById("data_device4").value = data.device;
document.getElementById("data_type4").value = data.sensorType;
document.getElementById("data_get_data4").value = data.get_data;
document.getElementById("data_value4").value = data.get_value;
}
}

如
下代码所示，通过 if 语句判断，当老人出现异常情况时（超出用户设置的阈值上下
限），哪里检测异常，系统将在页面的哪一个部分变红提示警告，以便家人判断了解情况。

if (data.get_value > 200 && data.device=="bathroom"){
document.getElementById("weishenjian").style.background="red";17
}
if (data.get_value < 200 && data.device=="bathroom"){
document.getElementById("weishenjian").style.background="gray";
}
if (data.get_value >200 && data.device=="kitchen"){
document.getElementById("chufang").style.background="red";
}
if (data.get_value < 200 && data.device=="kitchen"){
document.getElementById("chufang").style.background="gray";
}

4.2.3 历史记录查询程序
为了查询数据库中的信息，使用一种用于创建快速动态网页的技术 AJAX，该技术通过
在后台与服务器进行少量数据交换， AJAX 可以使网页实现异步更新。这意味着可以在不重
新加载整个网页的情况下，对网页的某部分进行更新。以及 JSON 技术，从 web 服务器上
读取 JSON 数据（作为文件或作为 HttpRequest），将 JSON 数据转换为 JavaScript 对象，然
后在网页中使用该数据。对于 AJAX 应用程序来说， JSON 比 XML 更快更易使用。
url 参数是服务器上文件的地址： http://192.168.43.188/query。 JSON 的对象为
在这里插入图片描述

{"startTime":startTime,"EndTime":endTime}。

Flask server 端程序：

app = Flask(__name__)
@app.after_request
def cors(environ):
environ.headers['Access-Control-Allow-Origin']='*'
environ.headers['Access-Control-Allow-Method']='*'
environ.headers['Access-Control-Allow-Headers']='x-requested-with,content-type'
return environ
定义查询请求函数 query()， 当获取到页面发起的请求后， 接受请求的 json 数据：
@app.route("/query", methods=['POST', 'OPTIONS'])
def query():
try:
if(request.is_json):
print('Got Requst')
content = request.get_json()
startTime = content['startTime']
EndTime = content['EndTime']
print("收到查询条件 startTime->{0},
EndTime->{1}".format(startTime,EndTime))
#print(type(int(startTime)))18
start_Time=int(startTime)
end_Time=int(EndTime)
data=sqlselect(start_Time,end_Time)
print(len(data)+1)
_deviceRecord = {}
for index in range(len(data)):
strr="\""+str(index)+"\""
_deviceRecord[strr] = data[index][0]
res = make_response(jsonify(_deviceRecord))
else:
res = {}
except Exception as e:
print(str(e)) # Important!
res = {}
return res
定义数据库查询函数， 返回一个元组为查询结果：
def sqlselect(start_Time,end_Time):
# 打开数据库连接
db = pymysql.connect(host="192.168.174.128",
user="root",password="password",database="test",charset='utf8')
# 使用 cursor()方法获取操作游标
cursor = db.cursor()
sql2 = "select get_time from datasensor
where get_value=4095 and get_time> %d and get_time<%d" % (start_Time,end_Time)
# SQL 查询语句
sql = "SELECT * FROM data_voice_sensor \
WHERE get_value = %d" % 155
cursor.execute(sql2)
results = cursor.fetchall()
print(results[0][0])
print(len(results))
#print(type(results))
#jsonresults=json.loads(results)
#print(jsonresults)
print("数据库查询成功！ ")
# 关闭数据库连接
db.close()
return results19
页面请求后， 并且成功收到服务器返回的数据（查询结果） ：
$(document).ready(function () {
$("#btn").click(function () {
startTime = document.getElementById("startTime").value;
endTime = document.getElementById("endTime").value;
var opt =
{"startTime": startTime, "EndTime": endTime};
// var obj={"cishu": "共报警： 3 次", "times": "时间是： 3,5,7"};
var obj={"cishu": cishu, "times": times};
$.ajax({
type: "POST",
url: "http://192.168.43.188/query",
dataType: "json",
contentType: "application/json; charset=utf-8",
data: JSON.stringify(opt),
success: function (d) {
console.log(d);
document.getElementById("cishu").value = d.cishu;
document.getElementById("times").value = d.times;
}
});
})
})

在这里， method（请求的类型）使用 POST，虽然与 POST 相比， GET 更简单也更快，
并且在大部分情况下都能用。但是，在某些情况下，请使用 POST 请求：，如无法使用缓存
文件（更新服务器上的文件或数据库），服务器发送大量数据（POST 没有数据量限制），
发送包含未知字符的用户输入时， POST 比 GET 更稳定也更可靠。
页面：

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<style type="text/css">

    caption {
        color:blue;
        background: gray;
    }
    input{
        color: red;
    }
    td{
        color: green;
    }


#messages
{
background-color:yellow;
font-size:3px;
font-weight:bold;
line-height:140%;
}
#status
{
background-color:red;
font-size:4px;
font-weight:bold;
color:white;
line-height:140%;
}
table{
border: 1px solid black;
}
.out
{
background-color:gray;
}

</style>
  <head>
    <title>老人居家声音检测</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.js" type="text/javascript"></script>
 	<script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script type = "text/javascript">
	var connected_flag=0	
	var mqtt;
    var reconnectTimeout = 2000;
	var host= "192.168.43.188";
	var port= 8083;
	
var sub_topic="esp/test/#";
	function onConnectionLost(){
	console.log("connection lost");
	document.getElementById("status").innerHTML = "连接丢失";
	document.getElementById("messages").innerHTML ="连接丢失";
	connected_flag=0;
	}
	function onFailure(message) {
		console.log("Failed");
		document.getElementById("messages").innerHTML = "连接失败- 重新连接";
        setTimeout(MQTTconnect, reconnectTimeout);
        }
	function onMessageArrived(r_message){
		out_msg="收到消息"+r_message.payloadString+"</br>";
		out_msg=out_msg+"Message received Topic "+r_message.destinationName;
		//console.log("Message received ",r_message.payloadString);
		console.log(out_msg);
		document.getElementById("messages").innerHTML =out_msg;
		var topic=r_message.destinationName;
		console.log(topic);
		if(1)
		{
		var data=eval("("+r_message.payloadString+")")
        if(data.device == "room"){
            document.getElementById("data_time1").value = data.get_time;
            document.getElementById("data_device1").value = data.device;
            document.getElementById("data_type1").value = data.sensorType;
            document.getElementById("data_get_data1").value = data.get_data;
            document.getElementById("data_value1").value = data.get_value;
        }
            if(data.device == "bedroom"){
                document.getElementById("data_time2").value = data.get_time;
                document.getElementById("data_device2").value = data.device;
                document.getElementById("data_type2").value = data.sensorType;
                document.getElementById("data_get_data2").value = data.get_data;
                document.getElementById("data_value2").value = data.get_value;
            }
            if(data.device == "kitchen"){
                document.getElementById("data_time3").value = data.get_time;
                document.getElementById("data_device3").value = data.device;
                document.getElementById("data_type3").value = data.sensorType;
                document.getElementById("data_get_data3").value = data.get_data;
                document.getElementById("data_value3").value = data.get_value;
            }
            if(data.device == "bathroom"){
                document.getElementById("data_time4").value = data.get_time;
                document.getElementById("data_device4").value = data.device;
                document.getElementById("data_type4").value = data.sensorType;
                document.getElementById("data_get_data4").value = data.get_data;
                document.getElementById("data_value4").value = data.get_value;
            }
            if (data.get_value > 200 && data.device=="bathroom"){
                document.getElementById("weishenjian").style.background="red";
            }
            if (data.get_value < 200 && data.device=="bathroom"){
                document.getElementById("weishenjian").style.background="gray";
            }
            if (data.get_value  >200 && data.device=="kitchen"){
                document.getElementById("chufang").style.background="red";
            }
            if (data.get_value  < 200 && data.device=="kitchen"){
                document.getElementById("chufang").style.background="gray";
            }
		}
    }
	function onConnected(recon,url){
	console.log(" in onConnected " +reconn);
	}
	
	function onConnect() {
	  // Once a connection has been made, make a subscription and send a message.
	document.getElementById("messages").innerHTML ="Connected to "+host +"on port "+port;
	connected_flag=1
	document.getElementById("status").innerHTML = "Connected";
	console.log("on Connect "+connected_flag);
	mqtt.subscribe(sub_topic);
	}

    function MQTTconnect() {
	console.log("connecting to "+ host +" "+ port);
	var x=Math.floor(Math.random() * 10000); 
	var cname="controlform-"+x;
	mqtt = new Paho.MQTT.Client(host,port,cname);
	//document.write("connecting to "+ host);
	var options = {
        timeout: 3,
		onSuccess: onConnect,
		onFailure: onFailure,
      
     };
	
        mqtt.onConnectionLost = onConnectionLost;
        mqtt.onMessageArrived = onMessageArrived;
		//mqtt.onConnected = onConnected;

	mqtt.connect(options);
	return false;
	}
	
	function sub_topics(){
		document.getElementById("messages").innerHTML ="";
		if (connected_flag==0){
		out_msg="&lt;b>Not Connected so can't subscribe&lt;/b>"
		console.log(out_msg);
		document.getElementById("messages").innerHTML = out_msg;
		return false;
		}
		
	var stopic= document.forms["subs"]["Stopic"].value;
	console.log("Subscribing to topic ="+stopic);
	mqtt.subscribe(stopic);
	return false;
	}
	
	
	function send_message(msg,topic){
		if (connected_flag==0){
		out_msg="&lt;b>Not Connected so can't send&lt;/b>"
		console.log(out_msg);
		document.getElementById("messages").innerHTML = out_msg;
		return false;
		}
		var value=msg.value;
		console.log("value= "+value);
		console.log("topic= "+topic);
		message = new Paho.MQTT.Message(value);
		message.destinationName = "house/"+topic;

		mqtt.send(message);
		return false;
	}


    </script>




      <script typet="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
      <script type="text/javascript">


          var startTime;
          var endTime;
          // var cishu;
          // var times;
          $(document).ready(function () {
              $("#btn").click(function () {
                  startTime = document.getElementById("startTime").value;
                  endTime = document.getElementById("endTime").value;
                  var opt =
                      {"startTime": startTime, "EndTime": endTime};
                  // var obj={"cishu": "共报警：3次", "times": "时间是：3,5,7"};
                  var obj={"cishu": cishu, "times": times};
                  $.ajax({
                      type: "POST",
                      url: "http://192.168.43.188/query",
                      dataType: "json",
                      contentType: "application/json; charset=utf-8",      //网上很多介绍加上此参数的，后来我发现不加入这个参数才会请求成功。
                      data: JSON.stringify(opt),
                      success: function (d) {
                          console.log(d);
                          document.getElementById("cishu").value = d.cishu;
                          document.getElementById("times").value = d.times;
                      }
                  });
              })
          })



      </script>
  </head>
 <body onload="MQTTconnect()">
    <h1>老人居家声音检测</h1>



    <input type="button" value="查询历史报警记录"
           style="color: black;size: 20px"
           id="btn"
           />

<!--    <button>查询报警信息</button>-->
    <br>
    <input type="text"  id="startTime" placeholder="请输入查询开始时间">
    <br>
    <input type="text" id="endTime" placeholder="请输入查询结束时间">
    <br>
    <br>
    <table id="历史记录" align="left" >
        <tr><td >次数:</td><td class="title"><input type="text" id="cishu" )></td></tr>
        <tr><td >时间:</td><td class="title"><input type="text" id="times" )></td></tr>
    </table>
<br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <input type="text" id="time" placeholder="默认时间阈值为200">
    <button onclick="onclick1();">时间阈值</button>
    <br>
    <input type="text" id="voiceValue" placeholder="默认音量阈值为200">
    <button onclick="onclick2();">音量阈值</button>




    <table>
        <tr>
            <td>
                <table id="kitchen" align="left">
                    <caption id="chufang">厨房</caption>
                    <tr><td >接收时间:</td><td class="title"><input type="text" id="data_time3" )></td></tr>
                    <tr><td >设备:</td><td class="title"><input type="text" id="data_device3" )></td></tr>
                    <tr><td >状态:</td><td class="title"><input type="text" id="data_get_data3" )></td></tr>
                    <tr><td >类型:</td><td class="title"><input type="text" id="data_type3" )></td></tr>
                    <tr><td >数值:</td><td class="title"><input type="text" id="data_value3" )></td></tr>
                </table>
            </td>
            <td>
                <img src="kitchen.jpg" width="250" height="150">
            </td>
            <td>
                <table id="bathroom" align="left">
                    <caption id="weishenjian">卫生间</caption>
                    <tr><td >接收时间:</td><td class="title"><input type="text" id="data_time4" )></td></tr>
                    <tr><td >设备:</td><td class="title"><input type="text" id="data_device4" )></td></tr>
                    <tr><td >状态:</td><td class="title"><input type="text" id="data_get_data4" )></td></tr>
                    <tr><td >类型:</td><td class="title"><input type="text" id="data_type4" )></td></tr>
                    <tr><td >数值:</td><td class="title"><input type="text" id="data_value4" )></td></tr>
                </table>
            </td>
            <td>
                <img src="bathroom.jpg" width="250" height="150">
            </td>
        </tr>
        <tr>
            <td>
                <table id="room" align="left">
                    <caption>客厅</caption>
                    <tr><td >接收时间:</td><td class="title"><input type="text" id="data_time1" )></td></tr>
                    <tr><td >设备:</td><td class="title"><input type="text" id="data_device1" )></td></tr>
                    <tr><td >状态:</td><td class="title"><input type="text" id="data_get_data1" )></td></tr>
                    <tr><td >类型:</td><td class="title"><input type="text" id="data_type1" )></td></tr>
                    <tr><td >数值:</td><td class="title"><input type="text" id="data_value1" )></td></tr>
                </table>
            </td>
            <td>
                <img src="room.jpg" width="250" height="150">
            </td>
            <td>
                <table id="bedroom" align="left" >
                <caption >卧室</caption>
                <tr><td >接收时间:</td><td class="title"><input type="text" id="data_time2" )></td></tr>
                <tr><td >设备:</td><td class="title"><input type="text" id="data_device2" )></td></tr>
                <tr><td >状态:</td><td class="title"><input type="text" id="data_get_data2" )></td></tr>
                <tr><td >类型:</td><td class="title"><input type="text" id="data_type2" )></td></tr>
                <tr><td >数值:</td><td class="title"><input type="text" id="data_value2" )></td></tr>
            </table>
            </td>
            <td>
                <img src="bedroom.jpg" width="250" height="150">
            </td>
        </tr>
    </table>

<div id="status">连接状态: 未连接</div>
    

Messages:<p id="messages"></p>

  </body>
</html>

wlwwwhl

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
2
评论
基于HTML、JAVAscript、AJAX、的可视化页面

基于HTML、JAVAscript、AJAX、的可视化页面用户界面主要包括数据实时显示、异常数据报警、时间阈值和音量阈值的设置。页面实时展示数据的接收时间、设备的名称位置、设备的类型、设备的状态以及音量值，目的是实时监测老人行为信息，当声音感知识别发现老人处在同一地方较长时间未发出声音或老人发生突发状况时，及时显示报警信息，从而及时救治老人。根据老人长时间的生活习惯准确提取老人健康信息，以便采取相关措施，有效地预防疾病和及早治疗，确保身体健康。实时监测老人的地理位置信息，当老人出现问
复制链接

扫一扫