【发布时间】：2017-11-04 06:17:32
【问题描述】：
所以我有一个有趣的问题。我写了一个程序来控制房间里的气候。该程序作为 python 程序运行并具有 Web 界面。该程序运行良好，但如果我重新启动 pi，所有 GPIO 引脚都会打开。然后我运行我的 python 程序，直到我进入我的开关页面，它们才会关闭。就在加载所有命令时打开和关闭引脚并且程序正常运行。在我启动后加载该页面一次后，它不再影响程序并使 pin 命令不再挂起。
这是该页面的代码。
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
<html>
<head>
<link rel="shortcut icon" href="icon.png" /> </head>
<head>
<html>
<head>
<title>Grow Hub</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<style>
.jumbotron {
margin-bottom: 25px;
height: 130px;
border-bottom: 2px solid black;
}
.container {
width: 100%;
}
</style>
</head>
<body>
<body>
<div class="jumbotron">
<div class="container">
<?php include 'menu.php';?>
<center>
</div>
</div>
<div class="container">
<center>
<!-- On/Off button's picture -->
<?php //this php script generate the first page in function of the gpio's status $status = array(0,2,3,4,5,6,21,22); $pins = array(0,2,3,4,5,6,21,22); for ($i = 0; $i < count($status); $i++) { $pin = $pins[$i]; //set the pin's mode to output and read them system("gpio mode ".$pin." out"); exec ("gpio read ".$pin, $status[$i], $return ); //if off if ($status[$i][0] == 0 ) { echo ("<img id='button_".$pin."' src='data/img/red/red_".$pin.".png' alt='off'/><br>"); } //if on if ($status[$i][0] == 1 ) { echo ("<img id='button_".$pin."' src='data/img/green/green_".$pin.".png' alt='on'/><br>"); } } ?>
</div>
<!-- javascript -->
<script src="script.js"></script>
<div class="container"> </div>
</center>
</body>
</html>
这是 script.js 的代码
//JavaScript, use pictures as buttons, sends and receives values to/from the Rpi //These are all the buttons
var button_0 = document.getElementById("button_0");
var button_2 = document.getElementById("button_2");
var button_3 = document.getElementById("button_3");
var button_4 = document.getElementById("button_4");
var button_5 = document.getElementById("button_5");
var button_6 = document.getElementById("button_6");
var button_21 = document.getElementById("button_21");
var button_22 = document.getElementById("button_22");
//this function sends and receives the pin's status
function change_pin(pin, status) { //this is the http request
var request = new XMLHttpRequest();
request.open("GET", "gpio.php?pin=" + pin + "&status=" + status);
request.send(null); //receiving information
request.onreadystatechange = function() {
if (request.readyState == 4 && request.status == 200) {
return (parseInt(request.responseText));
} //test if fail
else if (request.readyState == 4 && request.status == 500) {
alert("server error");
return ("fail");
} //else
else {
return ("fail");
}
}
} //these are all the button's events, it just calls the change_pin function and updates the page in function of the return of it.
button_0.addEventListener("click", function() {
//if red
if (button_0.alt === "off") {
//use the function
var new_status = change_pin(0, 0);
if (new_status !== "fail") {
button_0.alt = "on"
button_0.src = "data/img/green/green_0.png";
return 0;
}
} //if green
if (button_0.alt === "on") {
//use the function
var new_status = change_pin(0, 1);
if (new_status !== "fail") {
button_0.alt = "off"
button_0.src = "data/img/red/red_0.png";
return 0;
}
}
});
button_2.addEventListener("click", function() {
//if red
if (button_2.alt === "off") {
//use the function
var new_status = change_pin(2, 0);
if (new_status !== "fail") {
button_2.alt = "on"
button_2.src = "data/img/green/green_2.png";
return 0;
}
}
//if green
if (button_2.alt === "on") {
//use the function
var new_status = change_pin(2, 1);
if (new_status !== "fail") {
button_2.alt = "off"
button_2.src = "data/img/red/red_2.png";
return 0;
}
}
});
button_3.addEventListener("click", function() {
//if red
if (button_3.alt === "off") {
//use the function
var new_status = change_pin(3, 0);
if (new_status !== "fail") {
button_3.alt = "on"
button_3.src = "data/img/green/green_3.png";
return 0;
}
}
//if green
if (button_3.alt === "on") {
//use the function
var new_status = change_pin(3, 1);
if (new_status !== "fail") {
button_3.alt = "off"
button_3.src = "data/img/red/red_3.png";
return 0;
}
}
});
button_4.addEventListener("click", function() {
//if red
if (button_4.alt === "off") {
//use the function
var new_status = change_pin(4, 0);
if (new_status !== "fail") {
button_4.alt = "on"
button_4.src = "data/img/green/green_4.png";
return 0;
}
}
//if green
if (button_4.alt === "on") {
//use the function
var new_status = change_pin(4, 1);
if (new_status !== "fail") {
button_4.alt = "off"
button_4.src = "data/img/red/red_4.png";
return 0;
}
}
});
button_5.addEventListener("click", function() {
//if red
if (button_5.alt === "off") {
//use the function
var new_status = change_pin(5, 0);
if (new_status !== "fail") {
button_5.alt = "on"
button_5.src = "data/img/green/green_5.png";
return 0;
}
}
//if green
if (button_5.alt === "on") {
//use the function
var new_status = change_pin(5, 1);
if (new_status !== "fail") {
button_5.alt = "off"
button_5.src = "data/img/red/red_5.png";
return 0;
}
}
});
button_6.addEventListener("click", function() {
//if red
if (button_6.alt === "off") {
//use the function
var new_status = change_pin(6, 0);
if (new_status !== "fail") {
button_6.alt = "on"
button_6.src = "data/img/green/green_6.png";
return 0;
}
}
//if green
if (button_6.alt === "on") {
//use the function
var new_status = change_pin(6, 1);
if (new_status !== "fail") {
button_6.alt = "off"
button_6.src = "data/img/red/red_6.png";
return 0;
}
}
});
button_21.addEventListener("click", function() {
//if red
if (button_21.alt === "off") {
//use the function
var new_status = change_pin(21, 0);
if (new_status !== "fail") {
button_21.alt = "on"
button_21.src = "data/img/green/green_21.png";
return 0;
}
}
//if green
if (button_21.alt === "on") {
//use the function
var new_status = change_pin(21, 1);
if (new_status !== "fail") {
button_21.alt = "off"
button_21.src = "data/img/red/red_21.png";
return 0;
}
}
});
button_22.addEventListener("click", function() {
//if red
if (button_22.alt === "off") {
//use the function
var new_status = change_pin(22, 0);
if (new_status !== "fail") {
button_22.alt = "on"
button_22.src = "data/img/green/green_22.png";
return 0;
}
}
//if green
if (button_22.alt === "on") {
//use the function
var new_status = change_pin(22, 1);
if (new_status !== "fail") {
button_22.alt = "off"
button_22.src = "data/img/red/red_22.png";
return 0;
}
}
});
【问题讨论】：
-
你能编辑你的代码，让它不在一行上吗？
标签： javascript php python html raspberry-pi