I am playing around with GPIO pins on a raspberry pi and have been trying to teach myself how to get them to function via a webpage, I am familiar with python, CSS and HTML but not so much with javascript so I am struggling with this code.
I followed a tutorial on youtube where I built a basic webpage with 2 buttons that turns on and off an LED on a breadboard.
As I have the code written there, the code works fine, the LED's turn on and off.
I am trying to add more buttons to the page but I am having trouble accessing the javascript so the LED will turn on. The functioning web page is as follows.
<!DOCTYPE html>
<html>
<head>
<style>
</style>
<meta charset="UTF-8">
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#clickOn').click(function(){
var a = new XMLHttpRequest();
a.open("GET","pinOn.php");
a.onreadystatechange=function(){
if(a.readyState==4){
if(a.status == 200){
}
else alert("HTTP ERROR!");
}
}
a.send();
});
$('#clickOff').click(function(){
var a = new XMLHttpRequest();
a.open("GET","pinOff.php");
a.onreadystatechange=function(){
if(a.readyState==4){
if(a.status == 200){
}
else alert("HTTP ERROR!");
}
}
a.send();
});
});
</script>
<title>Pi GPIO Controller</title>
</head>
<body>
<h1><center>Turn the light on and off!</center></h1></br></br>
<div class="button">
<center><button type="button" id="clickOn">ON</center></button></br>
<center><button type="button" id="clickOff">OFF</center></button></br>
</div>
</body>
</html>
This is the pinOff.php file that sets pin 4 to high.
<?php
system("gpio -g mode 4 out");
system("gpio -g write 4 1");
?>
And the pinOn.php to set it to pin low.
<?php
system("gpio -g mode 4 out");
system("gpio -g write 4 0");
?>
I am trying to add another button and have tried simply adding:
<center><button type="button" id="clickOff">OFF</center></button></br>
But it isn't working.
How can I call the javascript in a button to get the code in the pinOn and pinOff files to work.
