Time to show my Volumio project. Basically, I wanted to have a possibility to play MP3 files on my ~20 year old Sony hi-fi system. And, very important, it should fit optically to the system. So I came to the idea to use an old CD player housing and fill it with a RaspberryPi…
1st step was to get the Adafruit 3.2 inch touchscreen running with Volumio. After that, I realized that the Volumio UI is not perfect for such a small touchscreen, so I started to modify the UI (removed some elements I don’t need, changed sizes, etc). Was a little bit painful but I am happy with the result.
Now it was time to include a Hifiberry to the system and solder the necessary cables. In the meantime, I also managed to get a cheap Sony XE-530 (display had been stopped working and the remote control was missing, so I got it for 10 Euros) and so I mounted everything into the housing. Audio cable has been connected via the ports which I removed from the original Sony circuit board. I also added a WiFi stick and used an extension cable to get the antenna out of the housing.
Play / Forward / Backward keys of the original front panel are also connected to the GPIO connector and can be used.
The one open point is now to get a new insert for the front panel, but I am not yet sure if I will make it with a 3D printing or if I order a milled plexiglass panel.
The attached zip file contains the files I have modified. Make a copy of the original files and give them a try…
PS: The modifications I have done at the app folder files are very special for my usage as the re-sort the menu and the source folders, I also added an entry for my specific USB stick. Only use this files when you know what you are doing (compare them with WinDiff to the original files). The UI changes are all at the www folder. forum.zip (348 KB)
Hi, thanks for zip file. I will look at it during the weekend. In my case I need to fit existing UI into 3.5 lcd.
As UI is responsive it changes to mobile look below some resolution. Can live with this. My problem is that 3.5 is to small and I get ugly scroll bar on a side and volume knob does not fit the screen either.
Tanks for help. Will keep you updated.
Volume knob is not part of my layout for the touch as I have the HiFi Berry Light without volum control, so this element is not relevant for me.
If you want to modify the UI: I have used Vivaldi browser, tried to identify the element I have to modify using the developer tools of the browser and then tried to find the matching element and/or css class at the www files. Was a pain at some points, but it worked. I think I will make some more smaller modifications, but at most points I am now happy with the layout on the small touchscreen.
In the meantime I also finished the front panel. I was really unsure if I should do it with a 3D printed part or some laser cutted parts. At the end, I have opted for a stack of 3 laser cutted black Plexiglas panels, each of them 3mm high. The first two are only frames to get the same high as the touchscreen panel (which is about 5.7mm in height. The also have 4 cutted holes to hold the screws I used for mounting. At the second frame, I countersinked the holes so that 4 countersunk head screws completely fit into. Then I glewed all 3 panels and the 4 screws together and mounted it to the case:
I also like the idea of “revamping” the case of defective devices to build a Volumio system that is meeting the design of existing HIFI equipment.
All that existing buttons, rotary encoder(s) and display options.