MJRoBot
Published © GPL3+

IoT - Controlling a Raspberry Pi Robot Over Internet

Controlling a RPi robot (or anything), using low level commands written with shell scripts commanded straight from a HTML page.

IntermediateFull instructions provided24 hours4,981
IoT - Controlling a Raspberry Pi Robot Over Internet

Things used in this project

Story

Read more

Schematics

RPi control Motors

Code

Code snippet #1

Plain text
<html>
<head>
</head>
		
<style>
body {background-color: lightyellow}
h1 {color:blue}
</style>

<body>
<div style="text-align:center">
<h1>MJRoBot RPi Web Robot Control</h1>
<br><br>
<img src="/images/robot52.png">
</body>
</html>

Code snippet #2

Plain text
<xmp>
button {
	color: blue;
	background:lightgrey;
	border: 1px solid #000;
	border-radius: 8px;
	position: center;
}

<button style="height: 50.0px;width: 100.0px;"><img src="/images/lighton.png" style="height: 40.0px;"></button>
</xmp>

Code snippet #3

Plain text
<xmp>
function lighton()
    {
        xmlhttp.open("GET","cgi-bin/lighton.cgi",true);
        xmlhttp.send();
    }

</xmp>

Code snippet #4

Plain text
<xmp>
<html>
<head>
</head>

<style>
body {background-color: lightyellow}
h1 {color:blue}

button {
	color: blue;
	background:lightgrey;
	border: 1px solid #000;
	border-radius: 8px;
	position: center;
}

</style>

<body>
<div style="text-align:center">
<h1> MJRoBot RPi Web Robot Control   <img style="height: 100px"src="/images/robot52.png"> </h1>
<br><br>
<button style="height: 50px; width: 100px" onclick="lighton()"><img style="height: 40px"src="/images/lighton.png"></button>
<img hspace="20" style="padding-left: 200px">
<button style="height: 50px; width: 100px" onclick="lightoff()"><img style="height: 35px"src="/images/lightoff.png"></button>
<br><br>

<span style="display:inline-block;padding:5px;border:1px solid #fc0; font-size: 140%;font-weight: bold;">
<br>
<button style="height: 75px; width: 75px" onclick="forward()"><img style="height: 65px"src="/images/forward.png"></button>
<br><br><br><br>
<img hspace="10" style="padding-left: 5px">
<button style="height: 75px; width: 75px" onclick="left()"><img style="height: 65px"src="/images/left.png"></button>
<img hspace="20" style="padding-left: 10px">
<button style="height: 75px; width: 75px" onclick="stop()"><img style="height: 63px"src="/images/stop.png"></button>
<img hspace="20" style="padding-left: 10px">
<button style="height: 75px; width: 75px" onclick="right()"><img style="height: 65px"src="/images/right.png"></button>
<img hspace="10" style="padding-left: 5px">
<br><br><br><br>
<button style="height: 75px; width: 75px" onclick="reverse()"><img style="height: 65px"src="/images/reverse.png"></button>

<br><br><br>
<p>Motor speed control</p>
<img hspace="10" style="padding-left: 5px">
<button style="height: 50px; width: 50px; font-size: 18px" onclick="nospeed()">0</button>
<img hspace="30" style="padding-left: 20px">
<button style="height: 50px; width: 50px; font-size: 18px" onclick="lowspeed()">--</button>
<img hspace="30" style="padding-left: 20px">
<button style="height: 50px; width: 50px; font-size: 18px" onclick="regularspeed()">==</button>
<img hspace="30" style="padding-left: 20px">
<button style="height: 50px; width: 50px; font-size: 18px" onclick="highspeed()">++</button>
<img hspace="10" style="padding-left: 5px">

<br><br>
</span>

</div>

<script>
var xmlhttp;
xmlhttp=new XMLHttpRequest();

function lighton()
    {
        xmlhttp.open("GET","cgi-bin/lighton.cgi",true);
        xmlhttp.send();
    }
function lightoff()
    {
        xmlhttp.open("GET","cgi-bin/lightoff.cgi",true);
        xmlhttp.send();
    }
function forward()
{
	xmlhttp.open("GET","cgi-bin/forward.cgi",true);
	xmlhttp.send();
}
function stop()
{
	xmlhttp.open("GET","cgi-bin/stop.cgi",true);
	xmlhttp.send();
}
function left()
{
	xmlhttp.open("GET","cgi-bin/left.cgi",true);
	xmlhttp.send();
}
function right()
{
	xmlhttp.open("GET","cgi-bin/right.cgi",true);
	xmlhttp.send();
}
function reverse()
{
	xmlhttp.open("GET","cgi-bin/reverse.cgi",true);
	xmlhttp.send();
}

function lowspeed()
{
	xmlhttp.open("GET","cgi-bin/lowspeed.cgi",true);
	xmlhttp.send();
}
function regularspeed()
{
	xmlhttp.open("GET","cgi-bin/regularspeed.cgi",true);
	xmlhttp.send();
}
function highspeed()
{
	xmlhttp.open("GET","cgi-bin/highspeed.cgi",true);
	xmlhttp.send();
}
function nospeed()
{
	xmlhttp.open("GET","cgi-bin/nospeed.cgi",true);
	xmlhttp.send();
}

</script>

</body>
</html>



</xmp>

Github

https://github.com/Mjrovai/MJRoBot-Web-RPi-Robot

Credits

MJRoBot

MJRoBot

32 projects • 498 followers
Engineer, writer and forever student. Passionate to share knowledge of electronics with focus on IoT and robotics.

Comments