IoT: Raspberry Pi Robot med Video Streamer och Pan/Tilt kamera fjärrkontroll över internet (8 / 10 steg)
Steg 8: Låt oss integrera kamera, servon och motorer
Nu när vi har vår RPI strömmande video och dess kameraposition kan styras via internet, varför inte integrera detta projekt med tidigare?
Komplett idén kommer att vara en RPi Robot kontrollerad av internet. I blockdiagram visas hur projektet kan integreras och kretsen visar hur man gör anslutningarna.
Låt oss ta den webpage framkallat här (index.html) och lägga till knapparna motor (och dess respektive funktioner) framkallade på första delen av detta projekt.
< 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 >
< iframe src = "http://10.0.1.31:9000/javascript_simple.html" frameborder = "0" align = "mellersta" width = "640" höjd = "480" align = "mellersta" rullning = "no" >< / iframe >
< 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 = "30" 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 = "30" style = "stoppning vänster: 5px" >
< br >< br >
< / span >
< br >< br >
< span style = "display: inline-block; padding: 5px; border: 1px solid #fc0; font-size: 140%, font-weight: bold; " >
< p > Tilt kameravinkel < /p >
< img hspace = "18" style = "stoppning vänster: 5px" >
< knappen stil = "höjd: 50px; bredd: 100px; font-size: 25px "onclick="downtilt() ">-D < / knapp >
< knappen stil = "höjd: 50px; bredd: 100px; font-size: 25px "onclick="downcentertilt() "> D < / knapp >
< knappen stil = "höjd: 50px; bredd: 100px; font-size: 25px "onclick="centertilt() "> 0 < / knapp >
< knappen stil = "höjd: 50px; bredd: 100px; font-size: 25px "onclick="upcentertilt() "> U < / knapp >
< knappen stil = "höjd: 50px; bredd: 100px; font-size: 25px "onclick="uptilt() "> U + < / knapp >
< img hspace = "18" style = "stoppning vänster: 5px" >
< br >< br >
< p > kamera stereoplacering < /p >
< knappen stil = "höjd: 50px; bredd: 100px; font-size: 25px "onclick="leftpan() "> + L < / knapp >
< knappen stil = "höjd: 50px; bredd: 100px; font-size: 25px "onclick="leftCenterPan() "> L < / knapp >
< knappen stil = "höjd: 50px; bredd: 100px; font-size: 25px "onclick="centerpan() "> 0 < / knapp >
< knappen stil = "höjd: 50px; bredd: 100px; font-size: 25px "onclick="rightCenterPan() "> R < / knapp >
< knappen stil = "höjd: 50px; bredd: 100px; font-size: 25px "onclick="rightpan() "> R + < / knapp >
< p >< /p >
< / span >
< 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();
}
funktion downtilt()
{
XMLHTTP.Open("get","cgi-bin/downtilt.cgi",true);
XMLHTTP.send();
}
funktion downcentertilt()
{
XMLHTTP.Open("get","cgi-bin/downcentertilt.cgi",true);
XMLHTTP.send();
}
funktion centertilt()
{
XMLHTTP.Open("get","cgi-bin/centertilt.cgi",true);
XMLHTTP.send();
}
funktion upcentertilt()
{
XMLHTTP.Open("get","cgi-bin/upcentertilt.cgi",true);
XMLHTTP.send();
}
funktion uptilt()
{
XMLHTTP.Open("get","cgi-bin/uptilt.cgi",true);
XMLHTTP.send();
}
funktion leftpan()
{
XMLHTTP.Open("get","cgi-bin/leftpan.cgi",true);
XMLHTTP.send();
}
funktion leftCenterPan()
{
XMLHTTP.Open("get","cgi-bin/leftCenterPan.cgi",true);
XMLHTTP.send();
}
funktion centerpan()
{
XMLHTTP.Open("get","cgi-bin/centerpan.cgi",true);
XMLHTTP.send();
}
funktion rightCenterPan()
{
XMLHTTP.Open("get","cgi-bin/rightCenterPan.cgi",true);
XMLHTTP.send();
}
funktion rightpan()
{
XMLHTTP.Open("get","cgi-bin/rightpan.cgi",true);
XMLHTTP.send();
}
< / script >
< / body >
< / html >
< / xmp >
Ovanför kan du se den slutliga integrerad webbsidan.