This project allows you to control your Dojo Derby Vehicle by tilting your iOS device. Speed is controlled by Forward/ Back tilting, and direction is side to side.
We use Javascript to to pull the X,Y and Z coordinate values from the iOS devices, and then create if/else statements to send commands to the vehicle using XMLHttpRequest with GET.
Current Project Confidence Level: Proof of Concept
This project works well for moving the vehicle. The quirk is that for iOS the webpage has to be presented using SSL for iOS to allow permission to the Accelerometer. You can install a local SSL certificate easily, but I have not yet figured out how to get the camera to work with SSL.
Setup Self Signed SSL Certificate
For this project we need the encryption capability of SSL, but actual security is not the highest concern so we can simply create our own SSL certificate.
First install openssl
sudo apt-get install opensslCode language: JavaScript (javascript)Then we create a directory for the certificates
sudo mkdir -p /etc/ssl/mycertsCreate SSL Certificate
sudo openssl req -new -x509 -days 365 -nodes -out /etc/ssl/mycerts/apache.pem -keyout /etc/ssl/mycerts/apache.keyCode language: JavaScript (javascript)Set permission for mycerts folder
sudo chmod 600 /etc/ssl/mycerts/apache*Enable Apache2 SSL Module
sudo a2enmod sslConfigure Apache2 to use SSL Certificates
sudo nano /etc/apache2/sites-available/default-ssl.confCode language: JavaScript (javascript)Add certificate location under SSL Engine Switch
SSLCertificateFile /etc/ssl/mycerts/apache.pem
SSLCertificateKeyFile /etc/ssl/mycerts/apache.key
Then enable SSL Configuration
sudo a2ensite default-sslCode language: JavaScript (javascript)Finally Restart Apache2
sudo service apache2 reloadindex-accel.php Code
First, at this point this isn’t an actual PHP file, but since we use PHP to build the dashboards and panels I have named this with .php to make it easier for add-ons in the future.
Currently this is a single file that contains the CSS, Javascript and HTML. I have done it this way to make it simpler to understand what the full program looks like, but the CSS and Javascript could be put in their own files.
To send commands to the vehicle we use XMLHttpRequest to send values to the controls.php and speed.php scripts on the vehicle. When he device is tilted based on the value a commend is sent using the direction or speed variable.
Note: The controls.php and speed.php scripts take the values received, and write them to text files. The vehicle has a python script in infinite loop constantly reading from those text files and then modifying the status of the GPIO pins.
For diagnostic purposes we have a DIV that shows the current X,Y and Z Axis readings, and another DIV that shows the commands being sent to the vehicle.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dojo Derby Accelerometer Control</title>
<style>
.coordinateDisplay{
width: 600px;
height: 125px;
background-color:blanchedalmond;
}
.commandDisplay{
width: 600px;
height: 100px;
background-color:lightblue;
}
</style>
<script>
function getAccel(){
DeviceMotionEvent.requestPermission().then(response => {
if (response == 'granted') {
// Add a listener to get smartphone orientation
// in the alpha-beta-gamma axes (units in degrees)
window.addEventListener('deviceorientation',(event) => {
// Expose each orientation angle in a more readable way
rotation_degrees = event.alpha;
frontToBack_degrees = event.beta;
leftToRight_degrees = event.gamma;
//Print out Coordinates
document.getElementById("coordinates").innerHTML = "Y Axis: " +frontToBack_degrees+"<br>X Axis: "+leftToRight_degrees+"<br>Z Axis: "+rotation_degrees;
//Controls Vehicle Speed
if(frontToBack_degrees > 80){
speed = " ";
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", "./speed.php?speed=" + speed);
xmlhttp.send();
} else if (frontToBack_degrees < 80 && frontToBack_degrees > 50){
speed = "slow";
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", "./speed.php?speed=" + speed);
xmlhttp.send();
} else if (frontToBack_degrees < 50 && frontToBack_degrees > 30){
speed = "medium";
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", "./speed.php?speed=" + speed);
xmlhttp.send();
} else if (frontToBack_degrees < 30 && frontToBack_degrees > 10){
speed = "fast";
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", "./speed.php?speed=" + speed);
xmlhttp.send();
} else if (frontToBack_degrees < 10){
speed = " ";
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", "./speed.php?speed=" + speed);
xmlhttp.send();
}
//Controls Vehicle Direction
if(leftToRight_degrees > -20 && leftToRight_degrees < 20){
direction = "forward";
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", "./controls.php?command=" + direction);
xmlhttp.send();
} else if (leftToRight_degrees > -50 && leftToRight_degrees < -20){
direction = "forwardLeft";
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", "./controls.php?command=" + direction);
xmlhttp.send();
} else if ( leftToRight_degrees < -50){
direction = "left";
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", "./controls.php?command=" + direction);
xmlhttp.send();
} else if ( leftToRight_degrees < 50 && leftToRight_degrees > 20){
direction = "forwardRight";
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", "./controls.php?command=" + direction);
xmlhttp.send();
} else if ( leftToRight_degrees > 50){
direction = "right";
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", "./controls.php?command=" + direction);
xmlhttp.send();
}
//Prints Speed and Direction to Page
document.getElementById("speed").innerHTML = speed;
document.getElementById("direction").innerHTML = direction;
});
}
});
}
</script>
</head>
<body>
<h1>iOS Accelerometer Car App Javascript</h1>
<button id="accelPermsButton" style="height:50px;" onclick="getAccel()"><h1>Get Accelerometer Permissions</h1></button>
<div class="coordinateDisplay">
<p id="coordinates" style="font-size: 30px;">Axis Coordinates</p>
</div>
<div class="commandDisplay">
<p id="direction" style="font-size: 30px;"></p>
<p id="speed" style="font-size: 30px;"></p>
</div>
</body>
</html>
Code language: HTML, XML (xml)