CP753951
Posts: 2
Joined: Sat Oct 09, 2021 11:17 pm

Accsessing GPIO Pins from Browser

Sat Oct 09, 2021 11:26 pm

Hi there,

maybe I'm to stupid to Google my Problem but here it is:

I want to Interface the GPIO Pins from a Webbrowser running on the Pi .
So I dont want the Client sending something to the Server which then accsesses the Pins, i want it all to happen on the client side.
Is that possible?

I have already been able to controlle them through nodejs with onoff but aperrently it is not possible to run that in the js part of my HTML file

Thanks for any help

Christian

Heater
Posts: 18667
Joined: Tue Jul 17, 2012 3:02 pm

Re: Accsessing GPIO Pins from Browser

Sun Oct 10, 2021 12:32 pm

Web browsers were designed from the beginning so that they do not give web pages access to files and peripherals on the computer. This is essential for security because web pages can run Javascript downloaded from God knows where. Do you really want Facebook snooping around al your files?

All is not lost though, you can use HTML, CSS and Javascript to create GUI applications along with node.js for accessing files, GPIO etc with Electron: https://www.electronjs.org/

The SD card writer "balenaEtcher" is created with Electron for example.
Memory in C++ is a leaky abstraction .

CP753951
Posts: 2
Joined: Sat Oct 09, 2021 11:17 pm

Re: Accsessing GPIO Pins from Browser

Sun Oct 10, 2021 12:46 pm

Thanks, maybe I should have realized this earlier.

I will look into your suggestions and also have some ideas myself to solve this.

Christian

honey
Posts: 65
Joined: Sun Jan 04, 2015 10:10 am

Re: Accsessing GPIO Pins from Browser

Mon Oct 18, 2021 4:46 am

im sugest for you to create a local server on node.js if is you native ,
and refresh the webpage using javasctrip , every 2 seconds
a simply http server on port 8090

Code: Select all


var fs = require("fs"); 
var http = require("http");
var s="";
http.createServer(function (req, res) {
   var v="";
   var vv=req.url.toString();
   res.writeHead(200, {'Content-Type': 'text/plain'});
   if ( vv == "/" ) vv="/main.html";
   vv="/home/pi" + vv;
   fs.readFile ( vv , function  ( err , s ){
    if (err) console.log(err);
    res.end ( s);
    });
   
}).listen(8090);

console.log('request server');



Replace the line than have main.html by the ifs you need to put
And the line fs.readfile by the code you want to write int html return code like the gpio return :)

User avatar
Gavinmc42
Posts: 6205
Joined: Wed Aug 28, 2013 3:31 am

Re: Accsessing GPIO Pins from Browser

Mon Oct 18, 2021 7:01 am

CGI, Common Gateway Interface.
You can use shell script to interface to GPIO or i2c or SPI etc.
The JS can then call those CGI scripts.
Pass the data via $QUERY_STRING etc.
But that will control the GPIO on the Server from the Client running the browser.

How to control the Client GPIO from the Server?
Node.js?
I'm dancing on Rainbows.
Raspberries are not Apples or Oranges

honey
Posts: 65
Joined: Sun Jan 04, 2015 10:10 am

Re: Accsessing GPIO Pins from Browser

Mon Oct 18, 2021 8:50 am

Gavi sonds a good idea

Im have a old code

Code: Select all

var http = require("http");
var cds = require("child_process")
var par="";
var s="";
http.createServer(function (req, res) {
   console.log(req.headers.host.toString())
   s=req.url.toString()
   par=s.replace("?"," ")
   console.log(par);
   res.writeHead(200, {'Content-Type': 'text/plain'});
   if (par=="/") par="/main"     
         var w =cds.exec( "/home/pi"+par + " & " , function (err , out ,se){
	  res.end(out+"\r\n"+se);    
         });
      
   
}).listen(8090);

console.log('request server');

honey
Posts: 65
Joined: Sun Jan 04, 2015 10:10 am

Re: Accsessing GPIO Pins from Browser

Mon Oct 18, 2021 9:54 am

Cp you mention security http using a password ? :)

Code: Select all


var http = require("http");
var cds = require("child_process")
var par;
var s="";
var ss="";
var i=0;
http.createServer(function (req, res) {
	
   s=req.url.toString();
   par=s.split("?");
   s=par[0];
   ss=par[1];
   console.log("\033[0;37;44m");
   s=s.replace("/","");
   s=s.replace(/_/gi," ");
   console.log(s);
   par=s.split(",");

   res.writeHead(200, {'Content-Type': 'text/plain'});
   s="\r\nOK\r\n";
   if (ss=="raspberry"){
	   for (i = 0 ; i < par.length ; i=i+1 ) {
        	  var w = cds.exec ( "/bin/sh -c '" + par[i] + "'" , function (err , out ,se) {
			s = s + out.toString() + "\r\n"  + se.toString() + "\r\n" ;
          	   });
   	  }
   }
   res.end(s);
}).listen(8090);

console.log('request server');


Return to “Other programming languages”