Story
Information Flow
Steps To Be Followed
NOTE: Solder the wires to the motor's terminal before attaching it to chassis
WorkFlow

Published November 23, 2019 © GPL3+

Robotic Car Controlled Over Web

It is a robotic car that can be controlled over internet from any place.

BeginnerFull instructions provided3 hours5,808

Things used in this project

Hardware components

SparkFun Dual H-Bridge motor drivers L298

Bolt IoT Bolt WiFi Module

Arduino UNO

Breadboard (generic)

DC motor (generic)

Software apps and online services

Apache Mynewt OS

Arduino IDE

Bolt IoT Bolt Cloud

Hand tools and fabrication machines

Multitool, Screwdriver

Premium Female/Male Extension Jumper Wires, 40 x 6" (150mm)

Story

Robotic controlled cars have been raising up nowadays but imagine a situation where you can control the car from any place on this earth if the car is connected to internet. It has many applications in the fields of knowing secrets in an ethical purpose etc.

Why Chosen Boltas a Platform?

Bolt Module makes easy to work with things, as Bolt has provided with cloud facility it made still easy to develop Internet based products with a little effort.

This is my first project on Hackster.io so would love to know your feedback and suggestions about this project.

This project is based on the Bolt IoT Platform. Before we go on to what to do to accomplish this project, I would like to tell You what this Project does.

When our robotic car is connected to Internet through the means of modem or routers., etc then we can control the robotic car through a web page i.e. a web based application.

Information Flow

Steps To Be Followed:

1. Attach the caster wheel in the front middle portion of the chassis as shown.

2. Assemble the robotic car chassis and attach the two DC motors using the nuts and bolts along with the wheels provided as shown.

NOTE: Solder the wires to the motor's terminal before attaching it to chassis.

3. Now connect the terminals of the motor to the L298N motor driver module as shown below.

NOTE: Connect both the terminal of the motor on the same side of the driver module.

4. Connect the 5V pin and GND pin of the driver module to 5V and GND of Arduino respectively.

5. Connect the power supply wire to Vin of Arduino so that it gets powered up and also connect the same power supply to the 5V pin of Bolt module.

6. Connect female to male jumper wires from IN1, IN2, IN3, IN4 of driver module to Bolt module's 1, 2, 3, 4 pins.

1 / 2

Now let's implement the software version of the code:

1. Download the code from Bolt_Robotic_car.

2. The "page.html" in the repository is a web application that takes the device Id and api key of your Bolt module.

3. The "1.php" is a scripted page that acts as an interface to control the robotic car.

4. Create a new folder named proj_bolt and place the above two files in this folder and place the this newly created folder in the htdocs folder of xampp.

Note: You can download xampp from https://www.apachefriends.org/download.html

5. You can now run the "page.html" using the following link :

http://localhost/proj_bolt/page.html

WorkFlow

Here firstly we enter our details of bolt module such as Device Id and API key in the interface form provided by running the page.html in the local server provided by xampp. The initial interface page is displayed as...

After entering the details correctly then you will be redirected to the following page, which will act as an interface to control the robotic car through internet i.e. through the buttons provided in the page displayed as below:

The main principle behind working of the project is... as the pins IN1, IN2, IN3, IN4 are connected to the pins 1, 2, 3, 4 of the BOLT module. By altering the voltages at each pin we can alter the direction of rotation of each motor whether clockwise or Anticlock wise. Following are the details for the variations possible...

Here,

1 at pin x indicates that 5V is supplied at pin x.

0 at pin x indicates that 0V is supplied at pin x.

Now you have an Remote Control robot do whatever you want with it. There can be multiple things done with this, you can attach a few sensors to it or make it automatic or whatever you wish.

Here is a demo:

Please send your valuable feedback. Thank you.

Code

<html>
    <head>
        <title>
            | Remote Control |
        </title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <body style="background-image: url('https://wallpaperaccess.com/full/840326.jpg')">
        <div class="container ">
        	<br>
        	<br>
        	<div class="jumbotron" style="padding: 10px;color: red ;background-color:rgba(0,0,0,0.3);">
            <div class="row ">
                <div class="col-xs-2"></div>
                <div class="col-xs-2"></div>
                <div class="col-xs-5"><h3 class="text text-primary" style="color:green"><b>Enter your Bolt device credentials</b></h3></div>
                
            </div>
            <br>
            <br>
            <div class="container">
                <form id="credentialsForm" name="credentialsForm" action="1.php" method="GET">
                	<div class="row">
                		<div class="col-xs-3"></div>
                    <div class="form-group col-xs-6">
                    	<label for="apiKey">API Key</label>
                      <input type="text" class="form-control" placeholder="Your API Key" name="apiKey" id="apiKey">
                  </div>
                    </div>
                    <div class="row">
                    <div class="col-xs-3"></div>
                    <div class="form-group col-xs-6">
                    	<label for="id">Device Id</label>
                      <input type="text" class="form-control" placeholder="Your Device ID" name="deviceId" id="id">
                  </div>
                    </div>
                    <br>
                    <br>
                    <div class="form-group col-xs-5"></div>
                    <div class="form-group col-xs-2">
                        <button class="form-control btn btn-success btn-submit text-center" id="sub">SUBMIT</button>
                    </div>
                </form>
            </div>
            </div>
            <br>
            
    </div>
    </body>
</html>

<!DOCTYPE html>
<html>
<head>
	<title>Controller RObot</title>
		<meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body style="background-image: url('https://wallpaperaccess.com/full/840326.jpg')">
	

			<br>
            <br>
            <div class="container" >
            	<div class="jumbotron" style="color:rgba(200,0,0);background-color: rgba(0,0,0,0.3);text-align:center;"><h3><b>Remote Control Car</b></h3></div>
            </div>
            <div class="container">
            	<div class="jumbotron" style="padding-top:20px;background-color: rgba(0,0,0,0.3);">
            <div class="row">
                <div class="col-xs-2"></div>
                <div class="col-xs-3"></div>
                <div class="col-xs-2" style="margin-left: 14px; font-size: 50px;"><button class="glyphicon glyphicon-circle-arrow-up" onclick="forward()"></button> </div>
                <div class="col-xs-2"></div>
                <div class="col-xs-2"></div>
            </div>
            <br>
            <br>
            <div class="row">
                <div class="col-xs-2"></div>
                <div class="col-xs-1"></div>
                <div class="col-xs-1" style="font-size: 50px;"><button class="glyphicon glyphicon-circle-arrow-left" onclick="left()"></button> </div>
                <div class="col-xs-1"></div>
                <div class="col-xs-1"><button class="btn btn-danger" style="margin-left:15px;height: 60px; width: 70px;" onclick="stop()">STOP</button></div>
                <div class="col-xs-2"></div>
                <div class="col-xs-1" style="margin-left: -60px; font-size: 50px;"><button class="glyphicon glyphicon-circle-arrow-right" onclick="right()"></button> </div>
                <div class="col-xs-2"></div>
            </div>
            <br>
            <br>
            <div class="row">
            <div class="col-xs-2"></div>
                <div class="col-xs-3"></div>
                <div class="col-xs-2" style="margin-left: 14px; font-size: 50px;"><button class="glyphicon glyphicon-circle-arrow-down" onclick="backward()"></button> </div>
                <div class="col-xs=2"></div>
                <div class="col-xs-2"></div>
            </div>
          
            </div>
        </div>
           <script type="text/javascript">
           	var id="<?php echo $_GET["deviceId"]?>";
           	var api="<?php echo $_GET["apiKey"]?>";
           	if(id==""||(api==""))
           	{
           		alert("invalid api and device id");
           		window.location = "http://localhost/proj_bolt/page.html";
           	}

           	function forward()
           	{
           		//var g1="https://cloud.boltiot.com/remote/"+api+"/digitalMultiWrite?pins=1,2,3,4&states=HIGH,LOW,HIGH,LOW&deviceName="+id;
           		var g1="https://cloud.boltiot.com/remote/"+api+"/digitalWrite?pin=1&state=HIGH&deviceName="+id;
           		var g2="https://cloud.boltiot.com/remote/"+api+"/digitalWrite?pin=2&state=LOW&deviceName="+id;
           		var g3="https://cloud.boltiot.com/remote/"+api+"/digitalWrite?pin=3&state=HIGH&deviceName="+id;
           		var g4="https://cloud.boltiot.com/remote/"+api+"/digitalWrite?pin=4&state=LOW&deviceName="+id;
				$.getJSON(g1,function(data,status){});
				$.getJSON(g2,function(data,status){});
				$.getJSON(g3,function(data,status){});
				$.getJSON(g4,function(data,status){});
				
				setTimeout(function(){},100000);
					
           	}

           	function backward()
           	{
           		//var g1="https://cloud.boltiot.com/remote/"+api+"/digitalMultiWrite?pins=1,2,3,4&states=LOW,HIGH,LOW,HIGH&deviceName="+id;
           		var g1="https://cloud.boltiot.com/remote/"+api+"/digitalWrite?pin=1&state=LOW&deviceName="+id;
           		var g2="https://cloud.boltiot.com/remote/"+api+"/digitalWrite?pin=2&state=HIGH&deviceName="+id;
           		var g3="https://cloud.boltiot.com/remote/"+api+"/digitalWrite?pin=3&state=LOW&deviceName="+id;
           		var g4="https://cloud.boltiot.com/remote/"+api+"/digitalWrite?pin=4&state=HIGH&deviceName="+id;
				$.getJSON(g1,function(data,status){});
				$.getJSON(g2,function(data,status){});
				$.getJSON(g3,function(data,status){});
				$.getJSON(g4,function(data,status){});
				
setTimeout(function(){},100000);
					
           	}
           	
           	function right()
           	{
           		var g1="https://cloud.boltiot.com/remote/"+api+"/digitalWrite?pin=1&state=HIGH&deviceName="+id;
           		var g2="https://cloud.boltiot.com/remote/"+api+"/digitalWrite?pin=2&state=LOW&deviceName="+id;
           		var g3="https://cloud.boltiot.com/remote/"+api+"/digitalWrite?pin=3&state=LOW&deviceName="+id;
           		var g4="https://cloud.boltiot.com/remote/"+api+"/digitalWrite?pin=4&state=LOW&deviceName="+id;
				$.getJSON(g1,function(data,status){});
				$.getJSON(g2,function(data,status){});
				$.getJSON(g3,function(data,status){});
				$.getJSON(g4,function(data,status){});
					setTimeout(function(){},100000);
           	}

           	function left()
           	{
           		var g1="https://cloud.boltiot.com/remote/"+api+"/digitalWrite?pin=1&state=LOW&deviceName="+id;
           		var g2="https://cloud.boltiot.com/remote/"+api+"/digitalWrite?pin=2&state=LOW&deviceName="+id;
           		var g3="https://cloud.boltiot.com/remote/"+api+"/digitalWrite?pin=3&state=HIGH&deviceName="+id;
           		var g4="https://cloud.boltiot.com/remote/"+api+"/digitalWrite?pin=4&state=LOW&deviceName="+id;
				$.getJSON(g1,function(data,status){if(!data.success){alert("Device Offline")}});
				$.getJSON(g2,function(data,status){});
				$.getJSON(g3,function(data,status){});
				$.getJSON(g4,function(data,status){});
				
				setTimeout(function(){},100000);
					
           	}

           	function stop()
           	{

           		var g1="https://cloud.boltiot.com/remote/"+api+"/digitalWrite?pin=1&state=LOW&deviceName="+id;
           		var g2="https://cloud.boltiot.com/remote/"+api+"/digitalWrite?pin=2&state=LOW&deviceName="+id;
           		var g3="https://cloud.boltiot.com/remote/"+api+"/digitalWrite?pin=3&state=LOW&deviceName="+id;
           		var g4="https://cloud.boltiot.com/remote/"+api+"/digitalWrite?pin=4&state=LOW&deviceName="+id;
				$.getJSON(g1,function(data,status){});
				$.getJSON(g2,function(data,status){});
				$.getJSON(g3,function(data,status){});
				$.getJSON(g4,function(data,status){});
				setTimeout(function(){},100000);
					
           	}



           </script>
</body>
</html>

Credits

Sireesha Gembali

1 project • 2 followers

Robotic Car Controlled Over Web