I recently found this great extension and decided to make some tweaks to it better suit my personal use, i.e. showing what’s playing on a small iPhone SE next to my hifi setup, and occasionally skip tracks or pause & play when I don’t want to reach out to the actual Roon app on my iPad.
Really love the work Mike had done originally, but I thought the visual details could use a few tweaks here & there at least to my designer eyes – and the scrolling of longer texts I found to be a major visual distraction which I wanted to get rid of. While I was doing these tweaks I also noticed newer versions of Safari had some issues in sizing the icons correctly (several comments about them in this thread as well).
So, I forked the code to a repo of my own on Github and just today published a dot-update of v1.2.13.1 there. It contains the following changes:
Additional setting:
you can now toggle scrolling of longer titles and names on and off in the settings, defaults to scrolling still as earlier versions
Visual tweaks:
changed the typeface to Lato so it’s same as what Roon uses in their apps
changed the SVG icons to use rounded variants of the Material Icons to go visually better with the smoother shape of the Lato typeface
highlight color changed to Roon purple (or actually slightly brighter for better visibility)
tweaks to the visual hierarchy between the elements in #containerMusicInfo
tweaks to the album image style
Bug fixes:
SVG icons size now much better even on newer Safari versions which had bad issues with earlier code
End result: something that I myself enjoy using a bit better than the original. Note that most of the visual optimizations have been done with my own use case in mind, i.e. the very small iPhone SE screen size.
NOTE: All the updates above are done just to make this more usable to myself. I’ve shared these in case someone else finds these usable, but I make no guarantees on them working on every possible setup out there. Also I have no interest in starting doing any other fixes or updates to the code.
If you feel that this is something that suits your fancy as well, you can install the code from this URL: https://github.com/miemo/roon-web-controller (same exact installation procedures as with the original otherwise)
Some screenshots on various sized screens and pointer to the new setting (you might need scroll down the settings popup on a smaller screen!)
@mnp75 , did you fix the bug for Zone names with a single quote?
Looks fantastic. I’m also running Mike’s newer alpha version on another Pi. I’ll decide if I want to change when he’s finished. And you appear to have access to a number of devices to update the css accordingly, something I don’t have. Well done!
Here’s btw how I personally use the Web Controller: running on full-screen browser on iPhone SE in my main listening setup, so I can always glance what’s playing and do a quick pausing or skipping, without needing to grab iPad and fire up Roon there (which is my main control method)
This looks excellent. Great work.
I currently run the 1.2.13 version on DietPi via the Extension Manager Snapshots and use an old iPad (2nd generation) as a display which works fine but the iPad is a bit slow to e.g. update album covers.
On all other device like my newer iPads I run into the known issue of icon and font sizes.
When reading through the documentation, I was struggling to figure out how to update to your modified version. Typically, I would update extensions through the extensions section in the Roon remote but it looks like this does not work here.
Any help how to perform the update is appreciated. Thanks.
Well I have actually never myself updated Roon Web Controller myself, as this version of my own is the very first one I’ve ever run (in addition to the original 1.2.13 it’s based on) so don’t really know how the updates have usually worked. But given that this code is coming from a different URL, I doubt any of the automated updates would actually work here. Also not familiar with Extension Manager Snapshots, so can’t help with that either, sorry.
Doing a clean install is probably the easiest option, i.e. removing the original one and installing my fork as a new one with the same installation instructions as the original but just replacing my repo’s URL as the codebase URL.
Finally, was able to get your modified version 1.2.13.1 up and running on a spare RPI with a clean install. Looks great and solves the issue with the icon and font sizes.
Since I already a have a RPI running Extension Manager, I am wondering if there is any way for @Jan_Koudijs to integrate the updated version in the repository for Extension Manager.
@Jan_Koudijs, no, please don’t replace the original version. I have my own version which has dozens of modifications for my (and some friends) personal use. Mike’s last check-in should remain unless someone else has accepted responsibility to maintain it. Thanks for asking our opinion.
@Jan_Koudijs
Many thanks for your reply.
The main advantage of 1.2.13.1 for me is that it solves the issue of cut-off icons and fonts on newer iOS devices that others users have reported as well.
Since 1.2.13 is no longer maintained either, I don‘t see this as an issue.
But I respect if others have a different view and prefer the current version.
@Toscana thanks. I’d be fine with this change to your device inclusive changes. It would be terrific to have the proper css updates for devices I don’t have access to so I can include all my mouseover, colour (and other) changes (Artist, Album, Track etc).
hey folks,
brand newbie around here getting soaked all things roon…
i have used rpi4-based streamer with attached hdmi display and yesterday,
managed to use WebUI to show now-playing. but from the couch, i can hardly
see the album cover. before with jivelite, display was just fine.
first, will this Web Controller provide a better alternative?
hopefully so and if yes, do i install it on rpi4?
similar to WebUI, it is Web Controller is communicating to the Core, correct?
ok @Hong_Son for the next newbie trying to figure this thing out,
i will answer my own questions:
yes, Web Controller (WC) is much better looking than roon’s WebUI and can even do basic playback controls
yes, it can be installed on rpi4, but better to install it where roon core is running, just one
ip address to remember
yes, roon provides API which WC uses; WC itself is a Node.js app thus a web server which one can access from any browser via url: [ip-addr-WC]:[port#]
n.b. WC works fine on raspberry pi4 and ubuntu desktop, but NOT on my android phone or tablet. it shows the library just fine but not Now-playing. it stays completely blank.
).
