2022-01-09 08:28:44 +00:00
|
|
|
|
<!--
|
|
|
|
|
微型气泵控制板
|
|
|
|
|
HW:Ver 1.0
|
|
|
|
|
FW:Ver 1.2
|
|
|
|
|
-->
|
|
|
|
|
<html lang="zh-cn">
|
|
|
|
|
|
2022-01-09 08:25:28 +00:00
|
|
|
|
<head>
|
2022-01-09 08:28:44 +00:00
|
|
|
|
<title>Air Pump Control</title>
|
|
|
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
|
|
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
|
|
|
|
<meta http-equiv="Cache-Control" content="max-age=7200" />
|
|
|
|
|
<meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
|
2022-01-09 08:25:28 +00:00
|
|
|
|
<style>
|
|
|
|
|
/*input框*/
|
|
|
|
|
input,
|
|
|
|
|
button {
|
|
|
|
|
border: none;
|
|
|
|
|
outline: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tl-input {
|
|
|
|
|
width: 100%;
|
|
|
|
|
border: 1px solid #ccc;
|
|
|
|
|
padding: 7px 0;
|
|
|
|
|
background: #F4F4F7;
|
|
|
|
|
text-align: center;
|
|
|
|
|
border-radius: 3px;
|
|
|
|
|
padding-left: 5px;
|
|
|
|
|
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
|
|
|
|
|
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
|
|
|
|
|
-webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
|
|
|
|
|
-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
|
|
|
|
|
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tl-input:focus {
|
|
|
|
|
border-color: #66afe9;
|
|
|
|
|
outline: 0;
|
|
|
|
|
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
|
|
|
|
|
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.ant-btn {
|
|
|
|
|
line-height: 1.499;
|
|
|
|
|
position: relative;
|
|
|
|
|
display: inline-block;
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
text-align: center;
|
|
|
|
|
background-image: none;
|
|
|
|
|
border: 1px solid transparent;
|
|
|
|
|
-webkit-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.015);
|
|
|
|
|
box-shadow: 0 2px 0 rgba(0, 0, 0, 0.015);
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
-webkit-transition: all .3s cubic-bezier(.645, .045, .355, 1);
|
|
|
|
|
transition: all .3s cubic-bezier(.645, .045, .355, 1);
|
|
|
|
|
-webkit-user-select: none;
|
|
|
|
|
-moz-user-select: none;
|
|
|
|
|
-ms-user-select: none;
|
|
|
|
|
user-select: none;
|
|
|
|
|
-ms-touch-action: manipulation;
|
|
|
|
|
touch-action: manipulation;
|
|
|
|
|
height: 32px;
|
|
|
|
|
padding: 0 15px;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
color: rgba(0, 0, 0, 0.65);
|
|
|
|
|
background-color: #fff;
|
|
|
|
|
border-color: #d9d9d9;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.ant-btn-primary {
|
|
|
|
|
color: #fff;
|
|
|
|
|
background-color: #1890ff;
|
|
|
|
|
border-color: #1890ff;
|
|
|
|
|
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12);
|
|
|
|
|
-webkit-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);
|
|
|
|
|
box-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.ant-btn-red {
|
|
|
|
|
color: #fff;
|
|
|
|
|
background-color: #FF5A44;
|
|
|
|
|
border-color: #FF5A44;
|
|
|
|
|
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12);
|
|
|
|
|
-webkit-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);
|
|
|
|
|
box-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 这里不考虑浏览器的兼容性 */
|
|
|
|
|
#control input {
|
|
|
|
|
border: none;
|
|
|
|
|
background-color: transparent;
|
|
|
|
|
margin: 20px 0;
|
|
|
|
|
outline: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#control input[type="text"] {
|
|
|
|
|
width: 100%;
|
|
|
|
|
font-size: 25px;
|
|
|
|
|
appearance: none;
|
|
|
|
|
padding-bottom: 5px;
|
|
|
|
|
border-bottom: 3px solid #ededed;
|
|
|
|
|
color: #ededed;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#control input[type="range"] {
|
|
|
|
|
width: 100%;
|
|
|
|
|
-webkit-appearance: none;
|
|
|
|
|
/* background-color: silver; */
|
|
|
|
|
height: 8px;
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
background: -webkit-linear-gradient(#ffa200, #ffa200) no-repeat white;
|
|
|
|
|
background-size: 50% 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#control input[type="range"]::-webkit-slider-thumb {
|
|
|
|
|
-webkit-appearance: none;
|
|
|
|
|
background-color: #aaa;
|
|
|
|
|
width: 8px;
|
|
|
|
|
height: 20px;
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#control input[type="range"]::-webkit-slider-thumb:hover {
|
|
|
|
|
background: #666;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#control #voltage {
|
|
|
|
|
background-size: 0% 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#control #speed {
|
|
|
|
|
background: linear-gradient(to right, #ffa200, white 0%, white);
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#control input[type="button"] {
|
|
|
|
|
padding: 5px;
|
|
|
|
|
margin: 5px 0;
|
|
|
|
|
background: linear-gradient(to bottom right, red 10%, white 90%);
|
|
|
|
|
border: 0px;
|
|
|
|
|
width: 100%;
|
|
|
|
|
color: white;
|
|
|
|
|
font-weight: white;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|
2022-01-09 08:28:44 +00:00
|
|
|
|
<script>
|
|
|
|
|
var running_type = ["无", "篮球", "摩托车", "汽车", "自行车", "自定义"];
|
|
|
|
|
var pressure_type = [0, 0.6, 2.4, 2.5, 3.9, 2.4];
|
|
|
|
|
|
|
|
|
|
function loadXMLDoc(path, element) {
|
|
|
|
|
var xmlhttp;
|
|
|
|
|
if (window.XMLHttpRequest) {
|
2022-01-09 08:25:28 +00:00
|
|
|
|
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
|
2022-01-09 08:28:44 +00:00
|
|
|
|
xmlhttp = new XMLHttpRequest();
|
|
|
|
|
} else {
|
2022-01-09 08:25:28 +00:00
|
|
|
|
// IE6, IE5 浏览器执行代码
|
2022-01-09 08:28:44 +00:00
|
|
|
|
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
|
|
|
|
|
}
|
|
|
|
|
xmlhttp.onreadystatechange = function() {
|
|
|
|
|
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
|
|
|
|
|
document.getElementById(element).innerHTML = xmlhttp.responseText;
|
2022-01-09 08:25:28 +00:00
|
|
|
|
}
|
2022-01-09 08:28:44 +00:00
|
|
|
|
}
|
|
|
|
|
xmlhttp.open("GET", path, true);
|
|
|
|
|
xmlhttp.send();
|
2022-01-09 08:25:28 +00:00
|
|
|
|
}
|
|
|
|
|
|
2022-01-09 08:28:44 +00:00
|
|
|
|
function UpdateInfo() {
|
|
|
|
|
var xmlhttp;
|
|
|
|
|
if (window.XMLHttpRequest) {
|
2022-01-09 08:25:28 +00:00
|
|
|
|
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
|
2022-01-09 08:28:44 +00:00
|
|
|
|
xmlhttp = new XMLHttpRequest();
|
|
|
|
|
} else {
|
2022-01-09 08:25:28 +00:00
|
|
|
|
// IE6, IE5 浏览器执行代码
|
2022-01-09 08:28:44 +00:00
|
|
|
|
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
|
|
|
|
|
}
|
|
|
|
|
xmlhttp.onreadystatechange = function() {
|
|
|
|
|
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
|
|
|
|
|
var arr = xmlhttp.responseText.split(",");
|
|
|
|
|
document.getElementById('bat_voltage').innerHTML = arr[1];
|
|
|
|
|
if (arr[3] == 1) {
|
|
|
|
|
document.getElementById('CurrentMillis').innerHTML = "已启动:" + arr[0];
|
|
|
|
|
} else {
|
|
|
|
|
document.getElementById('CurrentMillis').innerHTML = "未启动";
|
|
|
|
|
}
|
|
|
|
|
document.getElementById('running_type').innerHTML = arr[4];
|
|
|
|
|
document.getElementById('running_pressure_type').value = arr[5];
|
2022-01-14 13:12:46 +00:00
|
|
|
|
document.getElementById('sysMillis').innerHTML = arr[6];
|
2022-01-09 08:28:44 +00:00
|
|
|
|
running_type5(arr[4]);
|
|
|
|
|
if (arr[2] == "-1.00") {
|
|
|
|
|
document.getElementById('pressure_val').innerHTML = "<font color='red'>传感器异常</font>";
|
|
|
|
|
document.getElementById('running_type_html').innerHTML = document.getElementById('running_type_html').innerHTML + " <font color='red'>传感器异常,启动会限制执行1分钟</font>";
|
|
|
|
|
} else {
|
|
|
|
|
document.getElementById('pressure_val').innerHTML = arr[2];
|
|
|
|
|
}
|
2022-01-09 08:25:28 +00:00
|
|
|
|
}
|
2022-01-09 08:28:44 +00:00
|
|
|
|
}
|
|
|
|
|
xmlhttp.open("GET", '/update', true);
|
|
|
|
|
xmlhttp.send();
|
2022-01-09 08:25:28 +00:00
|
|
|
|
}
|
|
|
|
|
|
2022-01-09 08:28:44 +00:00
|
|
|
|
function MyAutoRun() {
|
|
|
|
|
UpdateInfo();
|
|
|
|
|
}
|
|
|
|
|
setInterval("MyAutoRun()", 1000);
|
2022-01-09 08:25:28 +00:00
|
|
|
|
|
2022-01-09 08:28:44 +00:00
|
|
|
|
function checkNum(obj) {
|
|
|
|
|
if (isNaN(obj.value)) { //检查是否是非数字值
|
|
|
|
|
obj.value = "";
|
|
|
|
|
}
|
|
|
|
|
if (obj != null) { //检查小数点后是否对于两位
|
|
|
|
|
if (obj.value.toString().split(".").length > 1 && obj.value.toString().split(".")[1].length > 2) { //alert("小数点后多于两位!");
|
|
|
|
|
obj.value = Number(obj.value).toPrecision(2);
|
|
|
|
|
}
|
|
|
|
|
if (obj.value < 0) {
|
|
|
|
|
obj.value = 0 - obj.value;
|
|
|
|
|
}
|
|
|
|
|
if (obj.value > 6) {
|
|
|
|
|
obj.value = 6;
|
|
|
|
|
}
|
|
|
|
|
}
|
2022-01-09 08:25:28 +00:00
|
|
|
|
}
|
|
|
|
|
|
2022-01-09 08:28:44 +00:00
|
|
|
|
function running_type5(obj) {
|
|
|
|
|
document.getElementById('running_type_html').innerHTML = running_type[obj];
|
|
|
|
|
document.getElementById('running_type').value = obj;
|
|
|
|
|
if (obj != "5") {
|
|
|
|
|
document.getElementById('running_pressure_type').value = pressure_type[obj];
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</script>
|
2022-01-09 08:25:28 +00:00
|
|
|
|
</head>
|
2022-01-09 08:28:44 +00:00
|
|
|
|
|
2022-01-09 08:25:28 +00:00
|
|
|
|
<body style="background-color:black;color:white">
|
|
|
|
|
|
2022-01-09 08:28:44 +00:00
|
|
|
|
<div>
|
2022-01-09 08:25:28 +00:00
|
|
|
|
<font size=6>微型气泵状态监控</font>
|
2022-01-09 08:28:44 +00:00
|
|
|
|
</div>
|
|
|
|
|
<div id="OperationHit">
|
|
|
|
|
<h2></h2>
|
|
|
|
|
</div>
|
|
|
|
|
<table border="0">
|
|
|
|
|
<tr>
|
2022-01-14 13:12:46 +00:00
|
|
|
|
<td height="30">
|
|
|
|
|
系统启动:<span id="sysMillis"></span> 气泵启动:<span id="CurrentMillis"></span>
|
2022-01-09 08:28:44 +00:00
|
|
|
|
</td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr>
|
2022-01-14 13:12:46 +00:00
|
|
|
|
<td height="30">
|
2022-01-09 08:28:44 +00:00
|
|
|
|
<div>气压:<span id=pressure_val>0</span>Bar 电压:<span id=bat_voltage>0</span>V</div>
|
|
|
|
|
</td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr>
|
|
|
|
|
<td>
|
2022-01-09 08:25:28 +00:00
|
|
|
|
<table border="0" cellspacing="0" cellpadding="0">
|
|
|
|
|
<tr>
|
|
|
|
|
<td height="50">
|
2022-01-09 08:28:44 +00:00
|
|
|
|
<button type="button" class="ant-btn ant-btn-primary" onclick="running_type5(this.value);loadXMLDoc('/Control?Type=2&Index='+this.value+'&Operation='+document.getElementById('running_pressure_type').value,'OperationHit');" value="1">篮球</button>
|
|
|
|
|
<button type="button" class="ant-btn ant-btn-primary" onclick="running_type5(this.value);loadXMLDoc('/Control?Type=2&Index='+this.value+'&Operation='+document.getElementById('running_pressure_type').value,'OperationHit');" value="2">摩托车</button>
|
|
|
|
|
<button type="button" class="ant-btn ant-btn-primary" onclick="running_type5(this.value);loadXMLDoc('/Control?Type=2&Index='+this.value+'&Operation='+document.getElementById('running_pressure_type').value,'OperationHit');" value="5">自定义</button> <br><br>
|
|
|
|
|
<button type="button" class="ant-btn ant-btn-primary" onclick="running_type5(this.value);loadXMLDoc('/Control?Type=2&Index='+this.value+'&Operation='+document.getElementById('running_pressure_type').value,'OperationHit');" value="3">汽车</button>
|
|
|
|
|
<button type="button" class="ant-btn ant-btn-primary" onclick="running_type5(this.value);loadXMLDoc('/Control?Type=2&Index='+this.value+'&Operation='+document.getElementById('running_pressure_type').value,'OperationHit');" value="4">自行车</button>
|
2022-01-09 08:25:28 +00:00
|
|
|
|
</td>
|
2022-01-09 08:28:44 +00:00
|
|
|
|
<td align="center">
|
|
|
|
|
<table border="0" cellspacing="0" cellpadding="0" id="diy_show">
|
|
|
|
|
<tr>
|
|
|
|
|
<td>
|
|
|
|
|
<input class="tl-input" type="text" name="running_pressure_type" id="running_pressure_type" size="2" onchange="checkNum(this);loadXMLDoc('/Control?Type=2&Index=5&Operation='+document.getElementById('running_pressure_type').value,'OperationHit');">
|
|
|
|
|
<button type="button" class="ant-btn ant-btn-primary" onclick="running_type5(5);document.getElementById('running_pressure_type').value=(Number(document.getElementById('running_pressure_type').value)+0.1).toPrecision(2);checkNum(document.getElementById('running_pressure_type'));loadXMLDoc('/Control?Type=2&Index=5&Operation='+document.getElementById('running_pressure_type').value,'OperationHit');">+</button>
|
|
|
|
|
<button type="button" class="ant-btn ant-btn-primary" onclick="running_type5(5);document.getElementById('running_pressure_type').value=(Number(document.getElementById('running_pressure_type').value)-0.1).toPrecision(2);checkNum(document.getElementById('running_pressure_type'));loadXMLDoc('/Control?Type=2&Index=5&Operation='+document.getElementById('running_pressure_type').value,'OperationHit');">-</button>
|
|
|
|
|
</td>
|
|
|
|
|
</tr>
|
|
|
|
|
</table>
|
2022-01-09 08:25:28 +00:00
|
|
|
|
</td>
|
2022-01-09 08:28:44 +00:00
|
|
|
|
</tr>
|
|
|
|
|
</table>
|
|
|
|
|
</td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr>
|
|
|
|
|
<td height="50">
|
|
|
|
|
<input value="0" id="running_type" hidden>
|
|
|
|
|
当前充气类型:<span id="running_type_html">无</span>
|
|
|
|
|
</td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr>
|
|
|
|
|
<td height="50">
|
|
|
|
|
<button type="button" class="ant-btn ant-btn-red" onclick="loadXMLDoc('/Control?Type=1&Index='+document.getElementById('running_type').value+'&Operation='+document.getElementById('running_pressure_type').value,'OperationHit')">气泵启停</button>
|
|
|
|
|
<button type="button" class="ant-btn ant-btn-red" onclick="loadXMLDoc('/Control?Type=0&Index=0&Operation=2','OperationHit')">系统重启</button>
|
|
|
|
|
<button type="button" class="ant-btn ant-btn-red" onclick="loadXMLDoc('/Control?Type=0&Index=0&Operation=0','OperationHit')">传感器重置</button>
|
|
|
|
|
</td>
|
|
|
|
|
</tr>
|
|
|
|
|
</table>
|
2022-01-09 08:25:28 +00:00
|
|
|
|
</body>
|
2022-01-09 08:28:44 +00:00
|
|
|
|
|
2022-01-09 08:25:28 +00:00
|
|
|
|
</html>
|