Hey guys and gals!
I’m developing a “display” extension for my own use, as well as anybody else who’s looking to add a DIY now playing visualisation to their setup. I wanted to use something ready made, but since I couldn’t find something for my specific setup (RPi + Pimoroni HyperPixel 4" display) I decided to roll my own.
Code can be found here: GitHub - CatalinMustata/roon-display
Interface currently looks like this:
It has a cute flip animation when the album art changes and I’ll add some more info on current state (playing, paused, number of tracks in queue, is it on radio, stuff like that…). I’m also thinking about a “clock and current paused track” kind of screen if you’re paused for more than 30s or so (I feel my display will have a tendency for burn-in).
I’m open to suggestions and ideas, but you’re also open to fork the thing and go crazy. Mine will go with some hardcoded values (display resolution being the biggest issue, but also Roon Core IP address and targeted zone name). These are easy to change and I plan to build a small web UI to allow customization.
PS: Let me know if anyone is interested in the RPi setup needed to host this (barebones OS, plus X server, chromium in a nutshell).
10 Likes
Mustafa,
Nice idea. I am interested and would like to know more. This would be a good screensaver or a TV background picture view.
How did you mean about the RPi. Are you intending to provide a code to add to RPi and create the display via HDMI?
Thanks.
Hi Hussein,
Unfortunately this is not designed to work on a TV, but on a Raspberry Pi with a display attached. As far as I know there is an existing solution for displaying “now playing” info on a TV (I have a friend using that)
My project is mostly for myself… and others DIY inclined. I plan on adding some internal logic to control the display’s backlight as well (dim when paused and also auto adjustable to match ambiental light). That goes beyond Roon and will become a bit technical.
Cheers,
Catalin
This is probabbly exactly what I’m looking for now - RPi running Ropieee with an option to display play info on external display. Ropieee supports only official 7 inch one which is too big for me.
How is your display connected? HDMI + USB?
Also is there please any guideline how to install your SW?
Hi @Petr_G !
Hah, same for me. I wanted to use RoPieee, but the 7" is way to big for my needs.
I’m using the Pimoroni Hyperpixel display, which is connected to the RPi using all of the 40 GPIO pins. However, my solution is a simple web page that I display using Chromium in kiosk mode, so any display for the RPi will work, no matter the connection.
I will add a Readme with instructions to my repo, as well as some simple releases for people who would like to try it without building it themselves. One will need to do some manual setup though and I don’t plan on changing that (although if someone wants to bundle it in a ready-made RPi image, by all means please do).
The only issue right now is that the whole layout is kinda hardcoded for the Hyperpixel’s 800x480 resolution. It can be adapted easily, but it’s not very high on my to-do list.
I’ve also developed a small webserver that allows for backlight control. I plan on adding an ambient light sensor to my whole setup so I can control the backlight automatically and have it match my room.
As a sort of personal roadmap, I plan to add the following features:
- a sort of dithering / noise overlay for the blurred background (the Hyperpixel is sharp, but only a 6bit display so gradiends develop banding easily)
- add a new screen while connecting to the Roon Core
- dim the display and go to a simple black & white layout if paused for more than 30s
- small hour display in the top right corner
- maybe some info on current queue position or if running Roon Radio
If someone’s curious to try this (works on a PC as well), I’ve made a beta release in which you can actually configure stuff - you know, so that it works on anything else other than my machine.
You can download this small thingy from here (instructions included): Releases · CatalinMustata/roon-display · GitHub
Hi Catalin_Mustata,
I’m a complete newbie - can you please help me how to make it run on RPi 4 with Ropieee installed on it? Where should I copy your files? Do I need to just copy it or need to install something? And will it run after power on? Thanks a lot
I would gladly help, but this will not work on a unit running RoPieee, unless you do at least some customisation to it - I’ll send you a PM with details so we won’t polute this thread.
Just to make it clear - my project is a simple-ish web app. It can run in any modern browser and is designed to cover an 800x480 display. It will connect to your specified Roon Core and display info from a specified zone. You only need a web browser.
This looks great! I’ve just ordered a couple of Hyperpixel displays to try out.
I’m hoping to use a square one to purely display the album art - is that something that could be done with some mods to your app?
Yeah, sure. If you’re knowledgeable with CSS you can do it yourself. If not, I can help you with it, but I can’t promise when - I’ve been real busy lately.
Just as a sort of update, I’ve finished a beta version awhile back and I’ve been using it more or less daily in my system, with only one nagging issue: when network connectivity is down, it might crash the Chromium instance in which it’s running and it will require a restart - it happened only once or twice in a couple months, so it’s rather hard to reproduce.
Contrary to what most have been trying to achieve in this thread, display album art on a display smaller than the 7" RPi display, I would love to use an RPi connected to a 32" monitor to show off high res album art in my living room whenever music starts playing in that zone. Would your beta release enable this @Catalin_Mustata ?
It would probably need some tweaking, as the aspect ratio of your display would be 16:9, whereas the Pimoroni is 4:3. Also, resolution is different, so it would have to request a higher res album art from Roon.
All of this is rather simple to do, but I’d recommend look at Roon’s built in support for this. I know a friend of mine is using that with his TV.
1 Like
Thanks Catalin - looks like I’ve got some learning to do…should be fun. I’ll report back here once I get started.
1 Like
hi, sorry if its a dumb question. but how do i go about getting the code to work? anychance of a few step by step instructions?
i have been wondering about this solution. have a hyperpixel 4 display
Cheers @Martin_Spencer!
Not a dumb question at all - it’s not quite plug and play at the moment as I haven’t had time to prepare a proper release for it. I will write a proper readme and a separate setup guide for the RPi.
In the meantime, I’d suggest you start by getting it to work on your desktop/laptop before attempting anything on the RPi. Not sure how proficient you are as a developer, so please excuse me if I sound patronising in any way 
If you want to build it yourself, you need nodejs and npm installed locally. You then grab the repo, open a terminal inside it and run npm install to get all dependencies. Then you edit config.js in the root folder - main things you need to edit are the coreIP, corePort (these refer to your Roon Core - autodiscovery doesn’t work in the browser, so it’s all manual for the moment) and targetZone, which represents the name of the zone you want the display to link to. Once you’ve done the setup, you run npm run build-static to create the final version that’ll run in the browser.
If you don’t want to go through all of the trouble, I’ll prepare a new release this weekend and upload it to GitHub so the only step you’ll have to do is to edit the config to punch in your Roon Core details.
When all of that is done… just open dist/index.html in your browser. You’ll need to enable the extension from Roon → Settings → Extensions and that’s that.
Setting it up on the RPi is a bit more involved of a process, as you need X11 and chromium installed and configured. We’ll get to that later.
hi, its not possible to do an image that i can put on an sd card, then change the settings and ip adresses so it knows where to look?
i am interested i getting it to work as a stand alone on my pi with hyperpixel.
Short answer: At the moment no, sorry.
Long answer: I’ve created this for my own use, but I’m happy to share it with the community for anyone to use, modify, whatever. I don’t have time to turn it into a proper “product”. However, if someone wants to put in the effort to create an image, I can support them with whatever’s needed, but I just don’t have enough time on my hands to do that now.
1 Like
Ah ok. Understand. Looks stunning and the simplicity is just what one needs
1 Like
I launched your extension, unfortunately the application does not refresh. The seek bar doesn’t move and when a track changes nothing happens.
