Roon Extension: Roon Web Controller v1.2.0

Same issue here,
but only with Safari, display is OK when using chrome of firefox
On iphone and ipad with latest os i also have the same issue, with safaria, chrome and firefox, with old ipad all is fine
Strange

Hello,
I’ve just installed the extension. At first it was working properly. After the first song, the playing was going on, but the screen remained on the previous track. I can load the same page from every of my devices (PC, Tablet, Phone) I always have the same screen. It is never updated.
If I stop (disable) the pluging and start it again (enable), till the first play, it is ok…than everything the same :frowning:

What did I wrong?

Thanks any help :slight_smile:

Hello,
it seems the roon update solved my problem :slight_smile:
Now it works as excepted!!!
SUPER!!!

Hi, I am brand new to Roon; I have been trying without success to install the Dietpi setup as set out in Diet Pi Installation Extension Manager · pluggemi/roon-web-controller Wiki · GitHub

Everything seems fine with all of the installs; however when I boot up the RPi it times out before the Roon Extension Manager and Web controller load up in Roon, and the Rpi returns to shell mode and asks me to login. I have zero knowledge of code; could someone help or point me in the right direction.

Everything does appear as loaded in Roon Extensions after about 90 seconds or so, but the Rpi display does not seem to want to load the Web controller / Kiosk

Help very much appreciated.
Thanks
Kevin

@Kevin_Robertson Not sure if you’ve found a solution, but I’ve tried DietPi in the past and always had similar problems with various packages; it’s just too much IMO for pretty straight-forward use cases. If you want everything under the sun then DietPi might be a good way to go, but for single-purpose use cases I’ve always found it easier to go with straight Raspbian. To get web controller up and running you only need a few things:

  • Rasbian (I’m running Buster GUI w/o all the bells, it has everything you need) with SSH or keyboard/monitor, updated via raspi-config
  • Roon Bridge (armv7)
  • Get it up and running as a Roon endpoint
  • Install Roon Extensions
  • Install Extension Snapshots from w/in Roon (Settings → Extensions → System → Snapshot)
  • Install Web Controller from w/in Snapshots
  • probably the same “chromium-browser --kiosk” you’re using above

YMMV depending on what screen you’re using, if you’re using a HAT, etc, but those are the basics.

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!)





8 Likes

@mnp75 , did you fix the bug for Zone names with a single quote? :slight_smile:

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!

1 Like

Glad you were able to figure out the spaghetti code and add value to this!

5 Likes

Well I’ve worked past 10 years on early stage startups so figuring out spaghetti code comes naturally to me! :stuck_out_tongue_winking_eye:

1 Like

This has been my most used extension ever in room, along with DJ. Thanks for all your work @Mike_Plugge

1 Like

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)


1 Like

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.

Thanks for your quick reply. I will have a look at clean new install.

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.

2 Likes

Glad to hear you were able to get it running!

Technically it can be done but there are a few things that kept me from doing it:

So my question is if this fork is a better option for the majority of Web Controller users, as it has to replace the original Web Controller.

It would have been different if the project found a new maintainer but @mnp75 made clear that that is not the case.

@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.

I will not touch Mike’s commits (don’t have access :slight_smile: ).

I meant to say that it will replace the Web Controller entry in the repository of the Extension Manager.

1 Like

@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.

1 Like