Rotary Encoder for Website Control

[DIY89]

Hi Andi,

da meine Photobox kein Touchscreen enthält würde die Website gerne mit einem Druck-Dreh-Taster bedienen wollen.
In der vorherigen Version habe ich ein Sock-Server(nodejs) eingebaut der hardwareseitig die Signale einliest und an den Client (Website) Befehle (links/rechts/gedrückt) sendet.

Die Befehle habe ich genutzt um von einem zum anderen benachtbarten Button zu springen.
Beim Aufruf der Startseite wird dem ersten Button eine zusätzlich css-class spendiert "focused".
Über den Javascript Code springe ich je nach Befehl zum $('.focused').prev('button') oder zum $('.focused').next('button')

Aktuell funktioniert die Verbindung zu dem sock-Server nicht da der Cross-Origin Zugriff nicht funktioniert.
Die Webserver Adresse steht auf Localhost (127.0.0.1). Selbt wenn ich die Website auf dem PI aufrufe klappt die Verbindung zu dem Sock-Server nicht.

`/* VARIABLES */
const myPid = process.pid;
let mTimeTrigger = 0,
collageInProgress = false;

let triggerArmed = true,
buttonIsPressed = false;

const Rotary = require('raspberrypi-rotary-encoder');

// WARNING ! This is WIRINGPI pin numerotation !! please see https://fr.pinout.xyz/pinout/wiringpi#*
const rotary = new Rotary(12, 13, 14);

/* HANDLE EXCEPTIONS */

process.on('uncaughtException', function (err) {
console.log('socket.io server [', myPid, ']: Error: ', err.message);
fs.unlink(pidFilename, function (error) {
if (error) {
console.log('socket.io server [', myPid, ']: Error deleting PID file ', error.message);
}
});
console.log('socket.io server [', myPid, ']: Exiting');

/* got to exit now and here - can not recover from error */
process.exit();

});

/* SOURCE PHOTOBOOTH CONFIG */

const {execSync} = require('child_process');
const stdout = execSync('cd api && php ./config.php').toString();
//const config = JSON.parse(stdout.slice(stdout.indexOf('{'), -1));

/* WRITE PROCESS PID FILE */

const pidFilename = config.folders.tmp + '/socket_server.pid';

const fs = require('fs');

fs.writeFile(pidFilename, myPid, function (err) {
if (err) {
throw new Error('Unable to write PID file [' + pidFilename + '] - ' + err.message);
}

console.log('socket.io server [', myPid, ']: PID file created [', pidFilename, ']');

});

/* START WEBSOCKET SERVER */

console.log(
'socket.io server [',
myPid,
']: Requested to start on http://' + config.webserver_ip + ':' + config.socket_port,
', Pin_l: ', config.pin_l,
', Pin_r: ', config.pin_r,
', Pin_b: ', config.pin_b
);

rotary.on("rotate", (delta) => {
console.log("Rotation :"+delta);
if(delta > 0){
ioServer.emit("photobooth-socket", "negative");
}else{
ioServer.emit("photobooth-socket", "positive");
}
});
rotary.on("pressed", () => {
console.log("Rotary switch pressed");
ioServer.emit("photobooth-socket", "pressed");
});
rotary.on("released", () => {
console.log("Rotary switch released");
ioServer.emit("photobooth-socket", "released");
});

const ioServer = require('socket.io')(config.socket_port, {
cors: {
origin: 'http://' + config.webserver_ip,
methods: ['GET', 'POST']
}
});

ioServer.on('connection', function (client) {
console.log('socket.io server [', myPid, ']: New client connected - ID', client.id);
client.on('photobooth-socket', function (data) {
console.log(
'socket.io server [',
myPid,
']: Data from client ID ',
client.id,
': [ photobooth-socket ] => [',
data,
']'
);

	/* Main */
	if($('#start').is(':visible')){
		// set focus if not done yet
		if(!($('.divinnen2 a').hasclass('focused'))){
			$('.divinnen2 a').first().addClass('focused');
		}
	}

	/* Result */
	if($('.resultInner').hasClass('show')){
		// set focus if not done yet
		if(!($('.resultInner a').hasclass('focused'))){
			$('.divinnen2 a').first().addClass('focused');
		}
	}

	/* Filter */
	if($('#mysidenav').hasClass('sidenav--open')){
		// set focus if not done yet
		if(!($('#mysidenav div').hasclass('focused'))){
			$('.divinnen2 div').first().addClass('focused');
		}

		if(data == "negative"){
			if($('.focused div:first').hasClass('focused')){
				$('.focused').removeClass('focused').prev().addClass('focused');
				return;
			}
		}
	}

	/* Gallery */
	if($('#gallery').hasClass('gallery--open')){
		// set focus if not done yet
		if(!($('gallery__body div').hasclass('focused')) || (!($('gallery__close').hasclass('focused')))){
			$('.gallery__body a').first().addClass('focused');
		}

		// Up
		if(data == "negative"){
			// if focus is on picture
			if($('.pswp__button.focused').nextAll('.pswp__button:visible:first').length != 0){
				$('.focused').removeClass('focused').nextAll(':visible:first').addClass('focused');
			// if focus is on close button
			}else if($('gallery__close').hasClass('focused')){
				$('.focused').removeClass('focused');
				$('.gallery__body a').first().addClass('focused');
			}
		}

		if(data == "positive"){
			// if focus is on picture
			if($('.pswp__button.focused').prevAll('.pswp__button:visible:first').length != 0){
				$('.focused').removeClass('focused').prevAll(':visible:first').addClass('focused');
			}else if($('gallery__close').hasClass('focused')){
				$('.focused').removeClass('focused');
				$('gallery__close').addClass('focused');
			}
		}
		console.log('Focuse now on: ' + $('.focused').attr('class') + ' FocusIndex: ' + $('.focused').index());
		return;
	}

	/* Photoswipe */
	if($('.pswp').hasClass('pswp--open')){
		if(data == "negative" && $('.pswp__button.focused').nextAll('.pswp__button:visible:first').length != 0){
			$('.focused').removeClass('focused').nextAll(':visible:first').addClass('focused');
		}
		if(data == "positive" && $('.pswp__button.focused').prevAll('.pswp__button:visible:first').length != 0){
			$('.focused').removeClass('focused').prevAll(':visible:first').addClass('focused');
		}
	}

	/* set focus to prev() or next() button */
	if(data == "negative"){
		$('a .focused').prev().removeClass('focused').next().addClass('focused');
	}
	if(data == "positive"){
		$('a .focused').next().removeClass('focused').prev().addClass('focused');
	}
	if(data == "pressed"){
	$('.focused').removeClsss('focused').click();
}

});

client.on('disconnect', function () {
	console.log('socket.io server [', myPid, ']: Client disconnected - ID ', client.id);

	if (ioServer.engine.clientsCount == 0) {
		console.log('socket.io server [', myPid, ']: No more clients connected - removing lock and arming trigger');
		triggerArmed = true;
		collageInProgress = false;
	}
});

});
console.log('socket.io server [', myPid, ']: socket.io server started');

`

[jacques42]

Hi @DIY89 - thank you for the idea and I like it a lot. I think we should add it in as base functionality. And this idea could also work in a scenario with one, two or three distinct buttons - i.e. one button for left, another one for right and one more for press. Or in a a scenario with one button where short press moves focus "to the right" - this way one can cycle through UI - and a longer press issues a button press. So really great idea and could help to build very simplistic, button based UI interaction.

Instead of building another, separate server script, I'd integrate the functionality as option to the existing remote-buzzer server. From my perspective it seems fairly possible to integrate your idea into that existing script. (there is rework going on behind the scenes which is not yet shared publicly).

I need to check into why CORS prevents localhost to localhost - I never tested this.

Checking the raspberrypi-rotary-encoder library, I would propose that we find an alternative or do a native encoding. Main reason here is that it's not a native JS library but the JS is a wrapper for a python script being forked - that is something we should be able to avoid having to do. And the python library then uses the wiringpi library for GPIO access, where I just converted remote-buzzer to using the onoff library. When you started looking around, was there alternative libraries you could see ?

So - I'm happy to take the remote-buzzer server part if that would look like help, and then with your help to complete the JS script updates for UI navigation, we can make this a quite nice feature. What do you think ?

[jacques42]

Hi @DIY89 wenn du willst komm in unseren Telegram Channel mich würde auch interessieren welchen Rotary Button du verwendest

[DIY89]

Hi @DIY89 wenn du willst komm in unseren Telegram Channel mich würde auch interessieren welchen Rotary Button du verwendest

Ihr könnt mich gerne in den Channel aufnehmen.

Den Druckdrehtaster habe ich verwendet: https://www.reichelt.de/drehimpulsegeber-15-impulse-30-rastungen-vertikal-stec11b04-p73914.html?&nbc=1

[DIY89]

Hi @DIY89 - thank you for the idea and I like it a lot. I think we should add it in as base functionality. And this idea could also work in a scenario with one, two or three distinct buttons - i.e. one button for left, another one for right and one more for press. Or in a a scenario with one button where short press moves focus "to the right" - this way one can cycle through UI - and a longer press issues a button press. So really great idea and could help to build very simplistic, button based UI interaction.

Instead of building another, separate server script, I'd integrate the functionality as option to the existing remote-buzzer server. From my perspective it seems fairly possible to integrate your idea into that existing script. (there is rework going on behind the scenes which is not yet shared publicly).

I need to check into why CORS prevents localhost to localhost - I never tested this.

Checking the raspberrypi-rotary-encoder library, I would propose that we find an alternative or do a native encoding. Main reason here is that it's not a native JS library but the JS is a wrapper for a python script being forked - that is something we should be able to avoid having to do. And the python library then uses the wiringpi library for GPIO access, where I just converted remote-buzzer to using the onoff library. When you started looking around, was there alternative libraries you could see ?

So - I'm happy to take the remote-buzzer server part if that would look like help, and then with your help to complete the JS script updates for UI navigation, we can make this a quite nice feature. What do you think ?

I had tried to integrate the sock server in the existing 'remote-buzzer-server' without success like I wrote before. I would prefer to implement an option for the art of remote-control (push-buttons, rotary-encoder, touch). To avoid the detour via python the following libary could be used (https://www.google.com/url?sa=t&source=web&rct=j&url=https://github.com/cruepprich/node_rotary&ved=2ahUKEwiEgrXlm_buAhUGDxQKHTMEClQQFjACegQICBAD&usg=AOvVaw0j-yMpGsYt3B5nAaaMxREk&cshid=1613747605233) - not tested yet.

[jacques42]

@DIY89 I pushed branch v3/hardwarebutton-rotary which has a well working base version of a rotary integration. Have a look please and I'd appreciate if you could do some testing. Please also check the respective FAQ section for functional details. Any feedback and suggestions is really appreciated.

[DIY89]

Hallo,

it's great to see what you're doing for the rotary-encoder function.
But i tried to get the feature running on my raspi. I still struggling with cors exception.

The socket-server seems to run when i check the logs.
pi@raspberrypi:/var/www/photobooth/data/tmp $ cat remotebuzzer_server.log
Remote Buzzer Server [2859]: Server starting on http://127.0.0.1:14711
Remote Buzzer Server [2859]: socket.io server started
Remote Buzzer Server [2859]: Operating in ROTARY mode
Remote Buzzer Server [2859]: Ready for Rotary Encoder on GPIOs 21 20 16
Remote Buzzer Server [2859]: Initialization completed
Remote Buzzer Server [2859]: PID file created [ data/tmp/remotebuzzer_server.pid ]

Console
Remote Buzzer client is enabled remotebuzzer_client.js:11
Remote buzzer connecting to http://127.0.0.1:14711 remotebuzzer_client.js:36

Access to XMLHttpRequest at 'http://127.0.0.1:14711/socket.io/?EIO=4&transport=polling&t=NWyA3kU' from origin 'http://localhost' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header has a value 'http://127.0.0.1' that is not equal to the supplied origin.
GET http://127.0.0.1:14711/socket.io/?EIO=4&transport=polling&t=NWyA3kU net::ERR_FAILED

Any idea what to do to fix this issue?

[andi34]

@DIY89 can you add the real IP address inside the Adminpanel and access it though the real IP?

Instructions:
https://github.com/andi34/photobooth/blob/21070854fecbb70bc3377ecf9891681f1e21119d/faq/faq.md#can-i-use-hardware-button-on-my-raspberry-pi-to-take-a-picture-

[DIY89]

I'd tried several IPs:
$config['webserver']['ip'] = '127.0.0.1'; --> Access via Raspi Desktop --> Chrome Browser
$config['webserver']['ip'] = 'localhost'; --> Access via Raspi Desktop --> Chrome Browser
$config['webserver']['ip'] = '192.168.1.46'; --> Access from my PC (192.168.1.20) --> Chrome Browser

Nothing is working

[andi34]

@jacques42 you've modified your server config?
https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors/CORSMissingAllowOrigin

I've not had time yet to test myself.... 😅