Volumio GUI with kivy

Hello all,

I’m looking to build my own stereo system from scratch using a Raspberry Pi and Volumio as base. Since I have a background in design that is where I chose to start this project, you can see a rough draft of what the final product is supposed to look like in the attached picture. The black square in the middle is a 7" colour screen, and that is where the problem starts; I would like to create my own custom GUI.

Thats a problem since I’m a total and complete noob when it comes to programming in general and python in particular. But I’m stubborn and the idea is to learn as I go. After some research online I found that it seems that the best/easiest way to create a custom GUI is Kivy. Unfortunatly I’ve been unsuccessful in trying to make it work with Volumio.

Has anyone had Kivy work with Volumio? Or does anyone have a better idea on how to make a custom GUI for the Raspberry Pi? Tried to find a similar project here but didn’t seem to find any, most are using the built in web-based UI.

Thanks
StefPlayOvalRend3Low.jpg

Nice design, looks really promising!

There are some audio-projects around based on the combination of a raspberry pi + (small) touchscreen with a GUI based on PyGame.

A basic desgin (mpd):
http://home.uktechreviews.com/Raspberry/Pi%20blog/files/RaspberryRadio.html

A colorfull design (mpd):
github.com/5Volt-Junkie/RPi-Tron-Radio

A design based on Mopidy:
github.com/9and3r/mopidy-touchscreen

a blog with PyGame UI basics:
http://jeremyblythe.blogspot.nl/2014/09/raspberry-pi-pygame-ui-basics.html

and…

Good luck and post some pictures of your “work in progress”

Harry

1 Like

It might be an idea to ‘limit’ yourself to modifying the HTML and CSS of Volumio instead of rebuilding the UI.

Volumio does a great job in what it does and has all the needed functionality without all extra bells and whistles that are seldom/never used.

By re-arranging/sizing/collering the objects per screen, you can probably customize it enough to create a fitting UI that matches your design.

It also makes it a little easier to keep your Volumio sort of upgradable when newer/improved version of Volumio are released.

Just a thought and interesed to see some design pictures :slight_smile:

Thank you guys for your replies and tips. I should say that the screen is not with touch, the idea is rather that one of the knobs is a rotary encoder and the other is volume control. The screen and the UI is supposed to be controlled via the rotary encoder, I like the way that resonates with the retro look and feel of the stereo.

Why I chose to try it with Kivy is, because I’m an designer, that it seemed fairly easy to produce animated and good looking UI. All the links you gave me Harry are all great, but the interfaces are very simple with buttons and text, and don’t get me wrong I’m impressed with how they work but they are very square and plain. I would like to create a UI with depth and animations, nothing fancy but for example when you turn the rotary encoder the current displayed choice(image) slides out from the screen and a new choice slides in. The same is for the webUI from volumio, sure I can change the fonts and colors and pics, but it’s not quite what I’m looking for unfortunatly.