Greetings! I am currently working on a Robot control system and would like to be able to control it through a website that I have created. However, I am facing difficulties in connecting this to Python code to control the Raspberry Pi GPIO.
You can access the active version of my website at www.awesomecoding.co.uk, and below is the source code of the HTML:
<html>
<head>
<style type="text/css">
#commands{
text-align: center;
color: FF8300;
font-size: 100px;
}
.controllbox{
width: 610px;
margin: 0 auto;
}
#arrowUp{
text-align: center;
position: static;
}
#arrowRight{
text-align: right;
position: static;
margin-top: 0;
}
#arrowDown{
text-align: center;
position: static;
}
#arrowLeft{
text-align: left;
position: static;
margin-top: -200px;
}
#stop{
width: 120px;
height: auto;
margin: 0 auto;
margin-top: -65%;
margin-left: 34%;
text-align: center;
position: static;
}
</style>
</head>
<body>
<h1 id="commands">Controll Me!!</h1>
<div class="controllBox">
<div id="arrowUp"><img src="arrowUp.jpg" class="controll" id="button1"></div>
<div id="arrowRight"><img src="arrowRight.jpg" class="controll" id="button2"></div>
<div id="arrowLeft"><img src="arrowLeft.jpg" class="controll" id="button3"></div>
<div id="arrowDown"><img src="arrowDown.jpg" class="controll" id="button4"></div>
<div id="stop"><img src="stop.jpg" class="controll" id="button5"></div>
</div>
<script type="text/javascript">
document.getElementById('button1').onclick = function(){
document.getElementById('commands').innerHTML = 'Forward'
}
document.getElementById('button2').onclick = function(){
document.getElementById('commands').innerHTML = 'Right'
}
document.getElementById('button3').onclick = function(){
document.getElementById('commands').innerHTML = 'Left'
}
document.getElementById('button4').onclick = function(){
document.getElementById('commands').innerHTML = 'Backwards'
}
document.getElementById('button5').onclick = function(){
document.getElementById('commands').innerHTML = 'Stop'
}
</script>
</body>
I am currently seeking advice on finding an efficient yet lag-free method to achieve this. Thank you for any input or suggestions you may have for this project.