<h1>WiFi Car App Javascript</h1>
<?php
$ip = $_SERVER['SERVER_ADDR'];
echo "<div style='width:640; height:480; margin-left:auto; margin-right:auto;'>";
echo "<iframe src='http://".$ip.":8000' height=480 width=640></iframe>";
echo "</div>";
echo "<br>";
?>
<div style='width:200px; margin-left:auto; margin-right:auto;'>
<p>Command (Use NumPad)</p>
<form id="form" onsubmit="return false">
<input type="text" placeholder="Press command keys here" id="kinput">
</form>
<p>Speed: <span id="speed"></span></p>
<p>Direction: <span id="direction"></span></p>
</div>
<script src="script.js"></script>
<div style="width:800;">
<iframe style="width:700px; height:100px;" src="system-status.php"></iframe>
</div>
Code language: HTML, XML (xml)
window.onload = function() {
document.getElementById("kinput").focus();
};
kinput.onkeydown = handle;
speed = " ";
direction = " ";
function handle(e) {
if(e.code == "Numpad8"){
direction = "forward";
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", "./controls.php?command=" + direction);
xmlhttp.send();
}
if(e.code == "Numpad7"){
direction = "forwardLeft";
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", "./controls.php?command=" + direction);
xmlhttp.send();
}
if(e.code == "Numpad9"){
direction = "forwardRight";
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", "./controls.php?command=" + direction);
xmlhttp.send();
}
if(e.code == "Numpad4"){
direction = "left";
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", "./controls.php?command=" + direction);
xmlhttp.send();
}
if(e.code == "Numpad5"){
direction = "stop";
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", "./controls.php?command=" + direction);
xmlhttp.send();
}
if(e.code == "Numpad6"){
direction = "right";
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", "./controls.php?command=" + direction);
xmlhttp.send();
}
if(e.code == "Numpad2"){
direction = "backward";
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", "./controls.php?command=" + direction);
xmlhttp.send();
}
if(e.code == "Digit1"){
speed = "slow";
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", "./speed.php?speed=" + speed);
xmlhttp.send();
}
if(e.code == "Digit2"){
speed = "medium";
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", "./speed.php?speed=" + speed);
xmlhttp.send();
}
if(e.code == "Digit3"){
speed = "fast";
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", "./speed.php?speed=" + speed);
xmlhttp.send();
}
document.getElementById("speed").innerHTML = speed;
document.getElementById("direction").innerHTML = direction;
kinput.value = " ";
kinput.value = e.code;
}
Code language: JavaScript (javascript)