How to use GPIO buttons to interact with front end of Nodejs server

Question

So I'm currently trying to make an application that will display columns of data in the browser. I want to be able to interact with what is being displayed with buttons wired in through the GPIO pins.

I want to be able to select different columns and then delete columns when necessary by using the buttons. i.e. I have a blue arrow that indicates which column is selected and then "left" and "right" buttons will move this arrow to change the selection.

What is the best way to do this? I'm able to get Nodejs to detect when the buttons are pushed but not sure how I can use this to modify what the front end displays.

I'm using the node-rpio module to allow Nodejs to interact with the GPIO pins and then express and ejs for general web development and templating stuff.

Is this easier with a Python backend and using something like rpi-gpio or something?

Answer 1

Web Server

You can use node.js as a server and generate HTML with the vanilla javascript way. You can use express.js or simply XMLHttpRequest! The backend would respond to your GPIO input. So I would have the following files server.js, client.js, index.html

Roughly have this sort of setup off.

From backend.

#Server.js
var server = http.createServer(function(request, response) {
fs.readFile(index, function (err, html) {
        if (err) {
            response.writeHead(404)
            response.write("File not found")
            throw err;
        } 
    switch(request.method){
            case "GET":
                if(request.url ==='/'){
                    response.writeHeader(200, {"Content-Type": "text/html"});
                    response.write(html)
                    response.end()
                }
                else if(request.url ==='/client.js'){
                    response.writeHeader(200, {"Content-Type": "text/html"});
                    response.write(clientjs)
                    response.end()
                }
             break;
          case "POST":
                 if (request.url === '/indexJSON'){
                    myJSON((data)=>{
                        console.log('index data table')
                            response.write(data)
                            response.end()
                    })
                }
             if(GPIO1 == 1){

             }
})

Then on your client you could handle the HTML.

#client.js
###### XHR response
xhr.onload = function (){
    if(this.status == 200){
        var response = this.responseText
        document.getElementById("index").innerHTML = response;
        let element1 = document.createElement("div"); 
        document.body.appendChild(element1);
    }
}