Hallo an Alle,
ich habe auf meinem Pi WebIOPi am laufen und habe mehrere Button mit MouseDown und MouseUp Funktionen. Der erste Button funktioniert einwandfrei und bei den Anderen nur die MouseUp Funktion.
Kann mir jemand Helfen?
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content = "height = device-height, width = 420, user-scalable = no" />
<title>WebIOPi | PiBot Steuerung</title>
<script type="text/javascript" src="/webiopi.js"></script>
<script type="text/javascript">
webiopi().ready(function() {
var vor, zurück, links, rechts, buttonvorne, buttonzurück, buttonlinks, buttonrechts;
vor = $("#vor");
hinter = $("#hinter");
links = $("#links");
rechts = $("#rechts");
webiopi().setFunction(22, "OUT");
webiopi().setFunction(23, "OUT");
webiopi().setFunction(24, "OUT");
webiopi().setFunction(25, "OUT");
webiopi().digitalWrite(22, 0);
webiopi().digitalWrite(23, 0);
webiopi().digitalWrite(24, 0);
webiopi().digitalWrite(25, 0);
// Button zum vor -fahren
buttonvorne = webiopi().createButton("vor", "vor", vorne, vornestop);
vor.append(buttonvorne); // append button to vor div
// Button zum zurück -fahren
buttonzurück = webiopi().createButton("zurück", "zurück", zurück, zurückstop);
hinter.append(buttonzurück); // append button to zurück div
// Button zum links -drehen
buttonlinks = webiopi().createButton("links", "links", links, linksstop);
links.append(buttonlinks); // append button to links div
// Button zum rechts -drehen
buttonrechts = webiopi().createButton("rechts", "rechts", rechts, rechtsstop);
rechts.append(buttonrechts); // append button to rechts div
});
function vorne() {
// Funktion zum vor fahren
webiopi().digitalWrite(22, 1);
webiopi().digitalWrite(24, 1);
}
function vornestop() {
// Funktion zum vorne anhalten
webiopi().digitalWrite(22, 0);
webiopi().digitalWrite(24, 0);
}
function zurück() {
// Funktion zum zurück fahren
webiopi().digitalWrite(23, 1);
webiopi().digitalWrite(25, 1);
}
function zurückstop() {
// Funktion zum zurück anhalten
webiopi().digitalWrite(23, 0);
webiopi().digitalWrite(25, 0);
}
function links() {
// Funktion zum links drehen
webiopi().digitalWrite(22, 1);
webiopi().digitalWrite(25, 1);
}
function linksstop() {
// Funktion zum links drehen
webiopi().digitalWrite(22, 0);
webiopi().digitalWrite(25, 0);
}
function rechts() {
// Funktion zum rechts drehen
webiopi().digitalWrite(23, 1);
webiopi().digitalWrite(24, 1);
}
function rechtsstop() {
// Funktion zum rechts drehen
webiopi().digitalWrite(23, 0);
webiopi().digitalWrite(24, 0);
}
</script>
<style type="text/css">
buttonvorne {
display: block;
margin: 5px 5px 5px 5px;
width: 180px;
height: 180px;
font-size: 24pt;
font-weight: bold;
color: black;
}
buttonhinten {
display: block;
margin: 5px 5px 5px 5px;
width: 180px;
height: 180px;
font-size: 24pt;
font-weight: bold;
color: black;
}
buttonlinks {
display: block;
margin: 5px 5px 5px 5px;
width: 180px;
height: 180px;
font-size: 24pt;
font-weight: bold;
color: black;
}
buttonrechts {
display: block;
margin: 5px 5px 5px 5px;
width: 180px;
height: 180px;
font-size: 24pt;
font-weight: bold;
color: black;
}
input[type="range"] {
display: block;
width: 160px;
height: 45px;
}
#gpio2.LOW {
background-color: White;
}
#gpio3.LOW {
background-color: White;
}
#gpio4.LOW {
background-color: White;
}
#gpio14.LOW {
background-color: White;
}
#gpio2.HIGH {
background-color: Red;
}
#gpio3.HIGH {
background-color: Red;
}
#gpio4.HIGH {
background-color: Red;
}
#gpio14.HIGH {
background-color: Red;
}
</style>
</head>
<body>
<div id="content" align="center"></div>
<center>
<h1>PiBot Steuerung<h1>
<br />
<img src="http://192.168.1.121:8081">
<br />
<br />
<table>
<tr>
<th>
</th>
<th>
<div id="vor" align="center"></div>
</th>
<th>
</th>
</tr>
<tr>
<td>
<div id="links" align="center"></div>
</td>
<td>
</td>
<td>
<div id="rechts" align="center"></div>
</td>
</tr>
<tr>
<td>
</td>
<td>
<div id="hinter" align="center"></div>
</td>
<td>
</td>
</tr>
</table>
</center>
</body>
</html>[/php]
Alles anzeigen