IoT - kontrollera en Raspberry Pi Robot över internet med HTML och shell skript endast (6 / 9 steg)
Steg 6: Skapa en HTML-sida för att styra roboten
Låt oss tänka på en enkel design för vår sida. Vilka kommandon kan vi ha?
- Två knappar för att slå och av lamporna == > kommer att arbeta med scrips: lighton.cgi och lighoff.cgi
- Fem knappar för styrning av motor riktning == > kommer att arbeta med scrips: forward.cgi, stop.cgi, left.cgi, right.cgi och reverse.cgi
- Fyra knappar för motor speed control == > kommer att arbeta med scrips: nospeed.cgi, lowspeed.cgi, regularspeed.cgi och höga speed.cgi
Låt oss använda index.html som vi skapat i det sista steget, inkluderar knappar som anropar funktioner för att köra skript.
Till exempel, låt oss skapa en knapp för att light ON the LED (GPIO.10):
< xmp >
knappen {
färg: blå;
bakgrund: ljusgrå;
Border: 1px solid #000;
border-radius: 8px;
position: center;
}
< knappen stil = "höjd: 50.0px; bredd: 100.0px;" >< img src="/images/lighton.png" style = "höjd: 40.0px;" >< / knapp >
< / xmp >
Ovanstående HTML skulle skapa en rundad knapp med en "lättade lampa" som en bild (se sista sidan ovan).
När knappen trycks, på grund av kommandot "onclick=lighton()," funktionen "lighton() kallas:
< xmp >
funktion lighton()
{
XMLHTTP.Open("get","cgi-bin/Lighton.cgi",true);
XMLHTTP.send();
}
< / xmp >
Och när funktionen lighton() anropas, körs skriptet lighton.cgi och "voila", LED kommer att vara på.
Samma förfarande skall användas för alla knappar. Det finns vissa HTML-funktioner som kommer att organisera utseendet och fylla att inser du ser full HTML-sidan. HTML-källan kan vara ses nedan (sidan med lysdioder inställningen används på föregående steg-test):
< xmp >
< html >
< head >
< / head >
< style >
kroppen {bakgrundsfärg: lightyellow}
H1 {color: blue}
knappen {
färg: blå;
bakgrund: ljusgrå;
Border: 1px solid #000;
border-radius: 8px;
position: center;
}
< / stil >
< body >
< div stil = "text-align: center" >
< H1 > MJRoBot RPi webbkontroll Robot < img stil = "höjd: 100px"src="/images/robot52.png" >< / h1 >
< br >< br >
< knappen stil = "höjd: 50px; bredd: 100px "onclick="lighton() ">< img stil =" höjd: 40px"src="/images/lighton.png ">< / knapp >
< img hspace = "20" style = "stoppning vänster: 200px" >
< knappen stil = "höjd: 50px; bredd: 100px "onclick="lightoff() ">< img stil =" höjd: 35px"src="/images/lightoff.png ">< / knapp >
< br >< br >
< span style = "display: inline-block; padding: 5px; border: 1px solid #fc0; font-size: 140%, font-weight: bold; " >
< br >
< knappen stil = "höjd: 75; bredd: 75px "onclick="forward() ">< img stil =" höjd: 65px"src="/images/forward.png ">< / knapp >
< br >< br >< br >< br >
< img hspace = "10" style = "stoppning vänster: 5px" >
< knappen stil = "höjd: 75; bredd: 75px "onclick="left() ">< img stil =" höjd: 65px"src="/images/left.png ">< / knapp >
< img hspace = "20" style = "stoppning vänster: 10px" >
< knappen stil = "höjd: 75; bredd: 75px "onclick="stop() ">< img stil =" höjd: 63px"src="/images/stop.png ">< / knapp >
< img hspace = "20" style = "stoppning vänster: 10px" >
< knappen stil = "höjd: 75; bredd: 75px "onclick="right() ">< img stil =" höjd: 65px"src="/images/right.png ">< / knapp >
< img hspace = "10" style = "stoppning vänster: 5px" >
< br >< br >< br >< br >
< knappen stil = "höjd: 75; bredd: 75px "onclick="reverse() ">< img stil =" höjd: 65px"src="/images/reverse.png ">< / knapp >
< br >< br >< br >
< p > Motor varvtalsreglering < /p >
< img hspace = "10" style = "stoppning vänster: 5px" >
< knappen stil = "höjd: 50px; bredd: 50px; font-size: 18px "onclick="nospeed() "> 0 < / knapp >
< img hspace = "30" style = "stoppning vänster: 20px" >
< knappen stil = "höjd: 50px; bredd: 50px; font-size: 18px "onclick="lowspeed() ">--< / knapp >
< img hspace = "30" style = "stoppning vänster: 20px" >
< knappen stil = "höjd: 50px; bredd: 50px; font-size: 18px "onclick="regularspeed() "> == < / knapp >
< img hspace = "30" style = "stoppning vänster: 20px" >
< knappen stil = "höjd: 50px; bredd: 50px; font-size: 18px "onclick="highspeed() "> ++ < / knapp >
< img hspace = "10" style = "stoppning vänster: 5px" >
< br >< br >
< / span >
< / div >
< script >
var xmlhttp;
XMLHTTP = nya XMLHttpRequest();
funktion lighton()
{
XMLHTTP.Open("get","cgi-bin/Lighton.cgi",true);
XMLHTTP.send();
}
funktion lightoff()
{
XMLHTTP.Open("get","cgi-bin/lightoff.cgi",true);
XMLHTTP.send();
}
funktion forward()
{
XMLHTTP.Open("get","cgi-bin/forward.cgi",true);
XMLHTTP.send();
}
funktionen stop()
{
XMLHTTP.Open("get","cgi-bin/stop.cgi",true);
XMLHTTP.send();
}
funktion left()
{
XMLHTTP.Open("get","cgi-bin/Left.cgi",true);
XMLHTTP.send();
}
funktion right()
{
XMLHTTP.Open("get","cgi-bin/right.cgi",true);
XMLHTTP.send();
}
funktionen reverse()
{
XMLHTTP.Open("get","cgi-bin/Reverse.cgi",true);
XMLHTTP.send();
}
funktion lowspeed()
{
XMLHTTP.Open("get","cgi-bin/Lowspeed.cgi",true);
XMLHTTP.send();
}
funktion regularspeed()
{
XMLHTTP.Open("get","cgi-bin/regularspeed.cgi",true);
XMLHTTP.send();
}
funktion highspeed()
{
XMLHTTP.Open("get","cgi-bin/highspeed.cgi",true);
XMLHTTP.send();
}
funktion nospeed()
{
XMLHTTP.Open("get","cgi-bin/nospeed.cgi",true);
XMLHTTP.send();
}
< / script >
< / body >
< / html >
< / xmp >