On the first post the command to go forward and backward doesn't toggle off the GPIO. I'm confuse the way they work!
I thing you forget to turn them OFF.
I assume that your are using H type driver and each GPIO switch power or ground to the motor.
I did make a small python script which uses your corresponding GPIO and assumes a H type driver.
1 - First create your python script
Code: Select all
#!/usr/bin/env python
import webiopi
import RPi.GPIO as io
io.setwarnings(False)
io.setmode(io.BCM)
m1a = 17
m1b = 18
m2a = 22
m2b = 23
#assume motor1 forward is m1a=True m1b=False
#assume motor1 backward is m1a=False m1b=True
#assume motor2 forward is m2a=True m2b=False
#assume motor2 backward is m2a=False m2b=True
pins = (m1a,m1b,m2a,m2b)
for i in pins:
io.setup(i,io.OUT)
@webiopi.macro
def Forward():
io.output(m1b,False)
io.output(m2b,False)
io.output(m1a,True)
io.output(m2a,True)
@webiopi.macro
def Stop():
io.output(m1b,False)
io.output(m2b,False)
io.output(m1a,False)
io.output(m2a,False)
@webiopi.macro
def Backward():
io.output(m1a,False)
io.output(m2a,False)
io.output(m1b,True)
io.output(m2b,True)
@webiopi.macro
def TurnRight():
io.output(m1a,False)
io.output(m2b,False)
io.output(m1b,True)
io.output(m2a,True)
@webiopi.macro
def TurnLeft():
io.output(m1b,False)
io.output(m2a,False)
io.output(m1a,True)
io.output(m2b,True)
Stop()
2 - add the script into the webiopi config after the SCRIPTS label
Code: Select all
[SCRIPTS]
# Load custom scripts syntax :
# name = sourcefile
# each sourcefile may have setup, loop and destroy functions and macros
#myscript = /home/pi/webiopi/examples/scripts/macros/script.py
myscript = /home/pi/WebRobot.py
3 - Restart webiopi
if any problem check the log in /var/log/webiopi
I also create a simple html page to control the motors.
4 - create the webpage
Code: Select all
sudo nano /usr/share/webiopi/htdocs/WebRobot.html
Code: Select all
<html>
<head>
<title>WebRobot</title>
<script type="text/javascript" src="/webiopi.js"></script>
<script type="text/javascript">
function Forward() {
webiopi().callMacro("Forward");
}
function Stop() {
webiopi().callMacro("Stop");
}
function TurnLeft() {
webiopi().callMacro("TurnLeft");
}
function TurnRight() {
webiopi().callMacro("TurnRight");
}
function Backward() {
webiopi().callMacro("Backward");
}
</script>
<style type="text/css">
.myButton {
-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
box-shadow:inset 0px 1px 0px 0px #ffffff;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #f6f6f6));
background:-moz-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);
background:-webkit-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);
background:-o-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);
background:-ms-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);
background:linear-gradient(to bottom, #ffffff 5%, #f6f6f6 100%);
background-color:#ffffff;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
border:1px solid #dcdcdc;
display:inline-block;
cursor:pointer;
color:#666666;
font-family:Arial;
font-size:15px;
font-weight:bold;
padding:6px 24px;
text-decoration:none;
text-shadow:0px 1px 0px #ffffff;
width: 130px;
height:30px;
margin:1px;
}
.myButton:hover {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f6f6f6), color-stop(1, #ffffff));
background:-moz-linear-gradient(top, #f6f6f6 5%, #ffffff 100%);
background:-webkit-linear-gradient(top, #f6f6f6 5%, #ffffff 100%);
background:-o-linear-gradient(top, #f6f6f6 5%, #ffffff 100%);
background:-ms-linear-gradient(top, #f6f6f6 5%, #ffffff 100%);
background:linear-gradient(to bottom, #f6f6f6 5%, #ffffff 100%);
background-color:#f6f6f6;
padding:6px 24px;
}
.myButton:active {
color:#ff0000;
position:relative;
top:1px;
padding:6px 24px;
}
</style>
</head>
<body>
<center><h3> My robot</h3></center><br>
<center>
<table>
<tr><td colspan=3 align="center"><button class="myButton" onmousedown="Forward()" onmouseup="Stop()">Forward</button></td></tr>
<tr><td><button class="myButton" type="button" onmousedown="TurnLeft()" onmouseup="Stop()">Left</button></td>
<td><button class="myButton" type="button" onclick="Stop()">Stop</button></td>
<td><button class="myButton" type="button" onmousedown="TurnRight()" onmouseup="Stop()">Right</button></td></tr>
<tr><td colspan=3 align="center"><button class="myButton" type="button" onmousedown="Backward()" onmouseup="Stop()">Backward</button></td></tr>
</table>
</center>
</body>
</html>
Since the default button layout on webiopi are change with webiopi.css, I include a css class to give the button a normal style.
You could change the look of the button by changing the style of it. I use this webpage to create myButton style.
http://www.bestcssbuttongenerator.com/#/23
Now if you open the url with your RaspberryPi IP on port 8000 something like this
http://192.168.0.100:8000/WebRobot.html it should work.
If it doesn't work, open a second browser's window with the webiopi GPIO status and check if they toggle when you press the button.
like this
https://dl.dropboxusercontent.com/s/ivu ... bRobot.mp4
B.T.W. For tablet onmouse won't work you need ontouch !
Also the stop button do nothing since no button press = Stop
