IoT: Raspberry Pi Robot med Video Streamer och Pan/Tilt kamera fjärrkontroll över internet (7 / 10 steg)
Steg 7: Skapa en HTML-sida för att styra kameran
Låt oss använda index.html som vi skapat i det sista steget, inkluderar 10 knappar som anropar funktioner för att köra skript skapat på sista steg (se sista sidan ovan).
Till exempel, låt oss skapa en knapp för att placera kameran på sin centrala TILT position:
< xmp >
knappen {
färg: blå;
bakgrund: ljusgrå;
Border: 1px solid #000;
border-radius: 8px;
position: center;
}
...
< knappen stil = "höjd: 50px; bredd: 100px; font-size: 25px "onclick="centertilt() "> 0 < / knapp >
...
< / xmp >
Ovanstående HTML-kod skapar en rundad knapp med en "0" på det (se sista sidan ovan).
När knappen trycks, på grund av kommandot "onclick=centertilt()," funktionen "centertilt() kallas:
< xmp >
funktion centertilt()
{
XMLHTTP.Open("get","cgi-bin/centertilt.cgi",true);
XMLHTTP.send();
} < / xmp >
Och när funktionen centertilt() anropas, körs skriptet centertilt.cgi och servo kommer att flytta till centrera position.
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:
< 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$
< 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 downtilt()
{
XMLHTTP.Open("get","cgi-bin/downtilt.cgi",true);
XMLHTTP.send();
}
funktion downcentertilt()
{
XMLHTTP.Open("get","cgi-bin/downcentertilt.cgi",true);
XMLHTTP.send();
} fungera 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();
} fungera 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 >