savetheclocktower

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

A rotary encoder is like the standard potentiometer (i.e., analog volume knob) we all know, except (a) you can keep turning it in either direction for as long as you want, and thus (b) it talks to the RPi differently than a potentiometer would.

I picked up this one from Adafruit, but there are plenty others available. This rotary encoder also lets you push the knob in and treats that like a button press, so I figured that would be useful for toggling mute on and off.

paulirish

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

rgrove

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

simonw

/* 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();