Skip to content
Snippets Groups Projects
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);
}