Francesco Pongiluppi willywongi

Update on Nov 30, 2025: This Gist is nearly eight years old! These instructions worked back in 2018 for the Pi 3, but recent comments suggest that they may not be sufficient on more recent Pi models and newer versions of Raspberry Pi OS. Be advised.

Using a rotary encoder as a volume control

On my RetroPie machine I wanted a hardware volume knob — the games I play use a handful of emulators, and there's no unified software interface for controlling the volume. The speakers I got for my cabinet are great, but don't have their own hardware volume knob. So with a bunch of googling and trial and error, I figured out what I need to pull this off: a rotary encoder and a daemon that listens for the signals it sends.

Rotary encoder

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.

Element APIs

Getting box metrics

elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent

	function Property() {}

	Property.prototype = {
	// -- Public Prototype Methods ---------------------------------------------
	defineProperties: function (properties) {
	return Property.defineProperties(this, properties);
	},

	defineProperty: function (name, descriptor) {
	return Property.defineProperty(this, name, descriptor);

	/* Use this to cause a function to fire no more than once every 'ms' milliseconds.
	For example, an expensive mousemove handler:

	$('body').mouseover(ratelimit(function(ev) {
	// ...
	}, 250));
	*/

	function ratelimit(fn, ms) {
	var last = (new Date()).getTime();