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?

• MatsK: This question is to broad, you should show that you have made some research! And when/if you get stuk you are welcome to ask for help.
• Ingo: And please take the short Tour and visit the Help Center to see how things work here.
• KFrancis: @MatsK In my opinion I have done extensive research but have yet to come across an effective way to do this. Most of any tutorials I've seen mention using buttons on the front end to control output of the GPIO pins but not the other way around. I've thought about using the buttons to switch to different ejs templates but figured there ought to be a more efficient way and that's why I came here.
• KFrancis: @MatsK Would something like using a websocket make more sense?

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);
 }
}