Published October 2, 2018

IoT Car

This project was done to create an understanding of IoT and how one can step into it.

IntermediateFull instructions provided5 hours5,006

Things used in this project

Hardware components

Raspberry Pi 3 Model B

SparkFun Dual H-Bridge motor drivers L298

Battery Bank 5V

Cell Compartment

DIY Car Kit

Software apps and online services

Notepad ++

Raspberry Pi Raspbian Stretch Lite

Story

Introduction

This project is going to help the newbies understand Internet of Things (IoT) and how they can start working on this. For anyone, this term may look very difficult to understand and complex to work on. But I have tried my best to keep it as simple as possible to encourage new comers.

Steps

Below are the steps in which the project will flow:

Build a basic car

Setup Raspberry Pi

Setup Apache server

Setup PHP

Make PHP pages

Run the car

Build Basic Car

This step is very easy as you just need to follow the supplier instructions to build it using very simple DIY kit. This will give you a basic skeleton car that you can use for multiple projects. Please follow supplier instructions as shown in this video.

basic car

intermediate stage

final shape

Setup Raspberry Pi

For this step, you can follow the instructions in this video to setup a basic Raspberry Pi. We need to install Stretch Lite as no GUI needed for this project and commandline version is enough.

Setup Apache Server

Please follow below steps to install Apache Server. This is required to run your PHP pages and accessible via internet. After booting the Pi and log in into it (make sure it is connected to internet), please run below commands:

1. sudo apt install apache2

2. sudo service apache2 start

This should install and start Apache service.

Setup PHP

Please follow below steps to install PHP where you can have support of PHP pages. This is required to run your PHP pages. Please run below commands after installing Apache:

1. sudo apt-get install libapache2-mod-php

2. use chown command to make 'pi' (if this is your default user) get access to 'html' folder where you will keep your PHP scripts.

3. use chmod +x command to make your scripts executable

Make PHP Page

Now, this section needs your more attention as it contains the actual work to build the IoT car software. All above steps were pre-requisites for this. There are three PHP pages (you can combine them as well).

1. index.php (captures arrow keys from keyboard and send command to car)

2. control.php (captures arrow images clicks from from page and send command to car)

3. gpio.php (process and control car motors)

index.php code:

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title>Raspberry Pi Vehicle</title>
   </head>
   <body style="background-color: white;">
		<?php
			$val_array = array(1,2,3,4);
			echo ("<img id='st_sp' src='data/start_stop.png' style='position:absolute; top:20px; left:20px; width:170px; height:150px' onclick='engine()'/>");			
		?>
		<div><img id='indi' src='data/red_led.png' style='position:absolute; top:20px; left:200px; width:20px; height:20px'/></div>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
		<script type="text/javascript">
			var status=0;
			function engine() {
				if(status==0){
					document.getElementById("indi").src="data/green_led.png"
					status=1;
				}
				else if(status==1){
					document.getElementById("indi").src="data/red_led.png"
					status=0;
				}
			}
			$(document).ready(function(){				
				$(window).keydown(function (e) {
				$k_code=e.keyCode;
				$k_char=String.fromCharCode(e.keyCode);
				var pin = <?php echo $val_array[0]; ?>;
				if( status==1 ){
					if($k_code==37){ //left key
						call_php(pin);
					}
					else if($k_code==38){ //up key
						call_php(pin);
					}
					else if($k_code==39){ //right key
						call_php(pin);
					}
					else if($k_code==40){ //down key
						call_php(pin);
					}
				}
				else{
					alert ("Please Start Engine!");
				}});
			});
			function call_php(pin){
				var request = new XMLHttpRequest();
				request.open( "GET" , "gpio.php?pin=" + pin, true);
				request.send(null);
			}
		</script>
		<iframe src="control.php" frameborder='0'; style='position:absolute; top:410px; left:450px; width:400px; height:200px'></iframe>
   </body>
</html>

control.php code:

<html>
	<body>
		<?php			
			$val_array = array(1,2,3,4);
			//this php script generate the first page in function of the file
			for ( $i= 0; $i<3; $i++) {
				//set the pin's mode to output and read them
				system("gpio mode ".$i." out");
			}
			echo ("<img id='up' src='data/up.png' style='position:absolute; top:10px; left:150px; width:80px; height:80px' onclick='moveup()'/>");
			echo ("<img id='down' style='position:absolute; top:110px; left:150px; width:80px; height:80px' src='data/down.png' onclick='movedwn()'/>");
			echo ("<img id='right' style='position:absolute; top:60px; left:230px; width:80px; height:80px' src='data/right.png' onclick='movert()'/>");
			echo ("<img id='left' style='position:absolute; top:60px; left:70px; width:80px; height:80px' src='data/left.png' onclick='movelt()'/>");
		?>
		<!-- javascript -->
			<script type="text/javascript"> 
				function moveup() {
					var pin = <?php echo $val_array[0]; ?>;
					call_php(pin);
					return false;
				}
				function movedwn() { 
					var pin = <?php echo $val_array[1]; ?>;
					call_php(pin);
					return false; 
				} 
				function movert() { 
					var pin = <?php echo $val_array[2]; ?>;
					call_php(pin);
					return false; 
				} 
				function movelt() { 
					var pin = <?php echo $val_array[3]; ?>;
					call_php(pin);
					return false; 
				}
				function call_php(pin){
					var request = new XMLHttpRequest();
					request.open( "GET" , "gpio.php?pin=" + pin, true);
					request.send(null);
				}
			</script>			
   </body>
</html>

P.S: $val_array = array(1, 2, 3, 4) contains GPIO pins to which H-Bridge (L298N) is connected.

gpio.php code:

<?php
if (isset ( $_GET["pin"] )) {
	$pin = strip_tags ($_GET["pin"]);
	if ($pin == 0) {
		echo pin;
		system("gpio mode 4 out");
		system("gpio write 4 1");		
		system("gpio mode 5 out");
		system("gpio write 5 0");
		system("gpio mode 28 out");
		system("gpio write 28 0");		
		system("gpio mode 29 out");
		system("gpio write 29 1");
	}
	else if ($pin == 2) {
		echo pin;
		system("gpio mode 4 out");
		system("gpio write 4 0");		
		system("gpio mode 5 out");
		system("gpio write 5 1");
		system("gpio mode 28 out");
		system("gpio write 28 1");		
		system("gpio mode 29 out");
		system("gpio write 29 0");
	}
	else if ($pin == 3) {
		echo pin;
		system("gpio mode 4 out");
		system("gpio write 4 1");		
		system("gpio mode 5 out");
		system("gpio write 5 0");
		system("gpio mode 28 out");
		system("gpio write 28 1");		
		system("gpio mode 29 out");
		system("gpio write 29 0");
	}
	else if ($pin == 7) {
		echo pin;
		system("gpio mode 4 out");
		system("gpio write 4 0");		
		system("gpio mode 5 out");
		system("gpio write 5 1");
		system("gpio mode 28 out");
		system("gpio write 28 0");		
		system("gpio mode 29 out");
		system("gpio write 29 1");
	}
	else { 
		echo ("fail"); 
	}
}
else { echo ("fail"); }
?>

you need to copy all above php files to 'html' folder and make sure they are executable by 'pi' user. Then make a folder 'data' to copy all below image files used in the PHP pages.

1 / 7 • down button

Make sure the filenames are same as used in php files.

Also make sure that you have GPIO package installed on your raspberry pi otherwise follow below steps:

1. sudo apt-get purge wiringpi

2. hash -r

3. git clone git://git.drogon.net/wiringPi

4. cd ~/wiringPi

4. git pull origin

6. cd ~/wiringPi

7. ./build

use gpio readll command to check status of all pins.

Check this video to see the car in action:

IoT Car

Operation

Click on Engine Start/Stop button. Indicator should turn Green which shows you can operate your car now. Now either use keyboard arrow keys or click on navigation buttons to control the car.

Code

<!DOCTYPE html>

<html>
    <head>
        <meta charset="utf-8" />
        <title>Raspberry Pi Vehicle</title>
    </head>
	
    <body style="background-color: white;">
		<?php
			$val_array = array(1,2,3,4);
			echo ("<img id='st_sp' src='data/start_stop.png' style='position:absolute; top:20px; left:20px; width:170px; height:150px' onclick='engine()'/>");			
		?>
		<div><img id='indi' src='data/red_led.png' style='position:absolute; top:20px; left:200px; width:20px; height:20px'/></div>
		
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
		<script type="text/javascript">
			var status=0;
			function engine() {
				if(status==0){
					document.getElementById("indi").src="data/green_led.png"
					status=1;
				}
				else if(status==1){
					document.getElementById("indi").src="data/red_led.png"
					status=0;
				}
			}
			$(document).ready(function(){				
				$(window).keydown(function (e) {
				$k_code=e.keyCode;
				$k_char=String.fromCharCode(e.keyCode);
				var pin = <?php echo $val_array[0]; ?>;
				if( status==1 ){
					if($k_code==37){ //left key
						call_php(pin);
					}
					else if($k_code==38){ //up key
						call_php(pin);
					}
					else if($k_code==39){ //right key
						call_php(pin);
					}
					else if($k_code==40){ //down key
						call_php(pin);
					}
				}
				else{
					alert ("Please Start Engine!");
				}});
			});
			function call_php(pin){
				var request = new XMLHttpRequest();
				request.open( "GET" , "gpio.php?pin=" + pin, true);
				request.send(null);
			}
		</script>
		<iframe src="control.php" frameborder='0'; style='position:absolute; top:410px; left:450px; width:400px; height:200px'></iframe>
		<iframe src="http://localhost/emms/led.html" frameborder='0'; style='position:absolute; top:10px; left:450px; width:400px; height:400px'></iframe>
    </body>
</html>

<html>
	<body>
		<?php			
			$val_array = array(1,2,3,4);
			//this php script generate the first page in function of the file
			for ( $i= 0; $i<3; $i++) {
				//set the pin's mode to output and read them
				system("gpio mode ".$i." out");
			}
			echo ("<img id='up' src='data/up.png' style='position:absolute; top:10px; left:150px; width:80px; height:80px' onclick='moveup()'/>");
			echo ("<img id='down' style='position:absolute; top:110px; left:150px; width:80px; height:80px' src='data/down.png' onclick='movedwn()'/>");
			echo ("<img id='right' style='position:absolute; top:60px; left:230px; width:80px; height:80px' src='data/right.png' onclick='movert()'/>");
			echo ("<img id='left' style='position:absolute; top:60px; left:70px; width:80px; height:80px' src='data/left.png' onclick='movelt()'/>");
		?>
		
		<!-- javascript -->
			<script type="text/javascript"> 
				function moveup() {
					var pin = <?php echo $val_array[0]; ?>;
					call_php(pin);
					return false;
				}
				function movedwn() { 
					var pin = <?php echo $val_array[1]; ?>;
					call_php(pin);
					return false; 
				} 
				function movert() { 
					var pin = <?php echo $val_array[2]; ?>;
					call_php(pin);
					return false; 
				} 
				function movelt() { 
					var pin = <?php echo $val_array[3]; ?>;
					call_php(pin);
					return false; 
				}
				function call_php(pin){
					var request = new XMLHttpRequest();
					request.open( "GET" , "gpio.php?pin=" + pin, true);
					request.send(null);
				}
			</script>			
    </body>
</html>

<?php
if (isset ( $_GET["pin"] )) {
	$pin = strip_tags ($_GET["pin"]);
	if ($pin == 0) {
		echo pin;
		system("gpio mode 4 out");
		system("gpio write 4 1");		
		system("gpio mode 5 out");
		system("gpio write 5 0");
		system("gpio mode 28 out");
		system("gpio write 28 0");		
		system("gpio mode 29 out");
		system("gpio write 29 1");
	}
	else if ($pin == 2) {
		echo pin;
		system("gpio mode 4 out");
		system("gpio write 4 0");		
		system("gpio mode 5 out");
		system("gpio write 5 1");
		system("gpio mode 28 out");
		system("gpio write 28 1");		
		system("gpio mode 29 out");
		system("gpio write 29 0");
	}
	else if ($pin == 3) {
		echo pin;
		system("gpio mode 4 out");
		system("gpio write 4 1");		
		system("gpio mode 5 out");
		system("gpio write 5 0");
		system("gpio mode 28 out");
		system("gpio write 28 1");		
		system("gpio mode 29 out");
		system("gpio write 29 0");
	}
	else if ($pin == 7) {
		echo pin;
		system("gpio mode 4 out");
		system("gpio write 4 0");		
		system("gpio mode 5 out");
		system("gpio write 5 1");
		system("gpio mode 28 out");
		system("gpio write 28 0");		
		system("gpio mode 29 out");
		system("gpio write 29 1");
	}
	else { 
		echo ("fail"); 
	}
}
else { echo ("fail"); }
?>

Credits

Zeeshan

13 projects • 50 followers

Creative and destructive design master. Ability to use the brain waves for both construction and destruction

IoT Car

Things used in this project

Hardware components

Software apps and online services

Story

Introduction

Steps

Build Basic Car

Setup Raspberry Pi

Setup Apache Server

Setup PHP

Make PHP Page

Operation

Schematics

L298N to Raspberry Pi

Code

index.php

control.php

gpio.php

Credits

Zeeshan

Comments

Embed the widget on your own site

IoT Car

IoT Car

Things used in this project

Hardware components

Software apps and online services

Story

Introduction

Steps

Build Basic Car

Setup Raspberry Pi

Setup Apache Server

Setup PHP

Make PHP Page

Operation

Schematics

L298N to Raspberry Pi

Code

index.php

control.php

gpio.php

Credits

Zeeshan

Comments

Related channels and tags