Volumio project with extra hardware buttons

Getting ready to assemble the second iteration of my Volumio box:

  • Hardware is a Pi 3B+ and IQAudio Pi Digi+ HAT.
  • Screen is the standard 7" Raspberry Pi touch screen.
  • The case is a modified Smarti Pi Touch Pro.
  • Other parts are:
    • Pimoroni onoff shim and pico hat hacker soldered on to a tall extension header, and wired to a GPIO breakout board
    • Stripboard with hardware buttons, LEDs and IR sensor
    • Bit of old IDE ribbon cable to connect the Pi and the HAT (note: important to use an old old 40-wire cable, not the later 80-wire type of IDE cable)

Assembled on to the case:

Took a few attempts at re-routing wires before the back panel would fit on. Don’t buy the 25mm version of the Smart Pi Touch Pro case if you want to do anything remotely complicated! The 45mm version is so much easier to fit stuff in. The 25mm one does look nice and sleek though.


Here are my modifications to the GPIO-buttons plugin, if anyone wants to use them (or upload to Github). I added support for mute, random and repeat buttons.
gpio-buttons.zip (4.1 KB)
I also did a modified version of gpio_control to support indicator LEDs for those functions. I passed those changes on to supercrab who is still active on here and maintaining that plugin.


Very nice build!

Very Nice

Based on this post I tweaked my display CSS to hide the volume control which is useless with the digital output:

Here’s what I added to the end of app-e831b7a181.css:

@media (min-width: 800px) and (max-width:800px) and (min-height: 480px) and (max-height: 480px)
/* hide scrollbar on playback screen */
div#contentWrapper.playback { overflow-y: hidden !important; }

/* hide multi-room */
multi-room-dock {

/* wider scrollbars */
    width: 30px;
    height: 30px;

.knobWrapper {
    margin-bottom: 4px;

#playbackPanelWrapper #rightPanel {

#trackInfo #trackDetails
	margin-left: -433px;
	height: 200px;
	overflow:  visible;

#playbackPanelWrapper #leftPanel {
	float: left;
	width: 50%

#playbackPanelWrapper #centerPanel {
	float: left;
	width: 50%

#trackInfo {
	position: relative;
	float: left;
	width: 100%;
	min-height: 1px;
	padding-left: 0px;
	padding-right: 0px;
	text-align: right;
	margin-top: 28px;
	line-height: 1.3;
	margin-left: 25px;

#trackInfo img {
	width: 100%;
	margin: 0;
	max-width: 380px;
	max-height: 320px;
	border: 0px;
	margin-top: -200px;

there is a nice one for the contemporary:
( i expanded mine to 4 options in menu )