index.js 2.94 KiB
document.onkeydown = updateKey;
document.onkeyup = resetKey;
update_data()
var server_port = 65432;
var server_addr = "192.168.50.110"; // the IP address of your Raspberry PI
var direction = "Stopped";
var message = "none";
let decoder = new TextDecoder("utf-8");
function client(){
const net = require('net');
//var input = document.getElementById("message").value;
const client = net.createConnection({ port: server_port, host: server_addr }, () => {
// 'connect' listener.
console.log('connected to server!');
// send the message
client.write(`${direction}|${message}`);
});
// get the data from the server
client.on('data', (data) => {
var data_in = decoder.decode(data).split("|");
document.getElementById("direction").innerHTML = data_in[0]
document.getElementById("responce").innerHTML = data_in[1]
document.getElementById("distance").innerHTML = data_in[2]
document.getElementById("temperature").innerHTML = data_in[3]
document.getElementById("voltage").innerHTML = data_in[4]
if (data_in[1] != "none" && data_in[1] == message) {
message = "none";
document.getElementById("message").value = message;
}
// document.getElementById("bluetooth").innerHTML = data;
console.log(data.toString());
client.end();
client.destroy();
});
client.on('end', () => {
console.log('disconnected from server');
});
}
// for detecting which key is been pressed w,a,s,d
function updateKey(e) {
e = e || window.event;
if (e.keyCode == '87') {
// up (w)
document.getElementById("upArrow").style.color = "green";
// send_data("87");
direction = "Going Forward";
}
else if (e.keyCode == '83') {
// down (s)
document.getElementById("downArrow").style.color = "green";
// send_data("83");
direction = "Going Backwards";
}
else if (e.keyCode == '65') {
// left (a)
document.getElementById("leftArrow").style.color = "green";
// send_data("65");
direction = "Turning Left";
}
else if (e.keyCode == '68') {
// right (d)
document.getElementById("rightArrow").style.color = "green";
// send_data("68");
direction = "Turning Right";
}
}
// reset the key to the start state
function resetKey(e) {
e = e || window.event;
document.getElementById("upArrow").style.color = "grey";
document.getElementById("downArrow").style.color = "grey";
document.getElementById("leftArrow").style.color = "grey";
document.getElementById("rightArrow").style.color = "grey";
direction = "Stopped";
}
function update_message() {
message = document.getElementById("message").value;
}
// update data for every 50ms
function update_data(){
setInterval(function(){
// get image from python server
client();
}, 50);
}