Circular control panel for Roon?

I’m looking for ideas on how a dial-based UI for Roon would work… What would you put on the dial? What would moving the needle do? Given a circular color LCD display 86 mm in diameter and two rotating knobs as inputs, how would you drive Roon?

Some background… You may have seen my posts about fitting new guts into an old novelty radio cabinet:

I’m at the point where I need to start building a Roon extension that will replace the old dial:

The two knobs are now connected to two encoders that feed back into a Raspberry Pi, which at the moment runs volumeio.

What I’m trying to do now is prototype up a simple circular UI, using Electron with a transparent window containing a round “div” (using CSS). Some issues, but in general the approach seems to work.

But what to put in that UI? What to do with the rotation info from the knobs? Your thoughts are welcome.

A record label with the info of track and artist rotating slowly…and maybe the actual company logo too

1 Like

Hmmm, I’d think the rotating would make it hard to read the text, though… Perhaps the artist pic rotating. I guess that’s a “now playing” screen. How about the navigation?

Should mention the encoders do have push-buttons built into them, so there are two momentary-contact pushbutton inputs, as well.

I’m kind of liking this

Put a one-cm rim around the outside to display the volume (right-hand knob is off-on and volume), then the left-hand knob when turned changes the selection to the next segment – pressing it in selects that segment. Genres, then albums, then tracks.

Could you not have a number of favourite internet radio stations that can be called up depending on the position of the needle when you ‘tune’ to them?

Maybe call up playlists in a similar way?

2 Likes

That’s a neat idea. Radial menus are not uncommon in VR and touch interfaces (there are a handful apps I know that use them), though usually with direct/touch interaction. There are some like the ones built into BMWs and Minis that use a radial encoder out of necessity, too.

Using a starburst or similar radial visualization for navigation could be neat. But if you’re after usability, you might want to think about cutting a rectangular hole for a normal screen…

I don’t know how often you navigate genre-album-track, I’d rather put letters around the circles to select artists, then albums, etc. With two encoders, you could even make it faster to select – or build an etch-a-sketch :wink:

1 Like

Oh, I’ve thought about it. But it would be nifty to keep the original plastic bubble over the dial, which is still in fine shape.