Roon Extension: Roon Web Controller v1.2.0

Mike, I added the clock above the “line1, line2 and line3”, which I rearranged to make more sense to me (Artist, Album, Track). The clock feature can be toggled on/off, and is a nice convenience in some rooms in the house.

I changed the color of the Track so I could tell what was playing easily. Often the Artist, Album and/or Track will have the same name, and I decided to solve it. The fun part was leveraging the library you use for light/dark color changes when the background is changed. It does the same as you do, and reverses the Track color if the threshold is exceeded. But having the ability to change the Track color to whatever you wanted was fun too. Gold is the default.

I also added the ability to pause/play with a progress bar click event, changed colors on Shuffle, Repeat and Radio when paused. There are a number of other… enhancements… I made (this is what happens when you have time on your hands). Mouseover display of the device/dac for the zone, display of time remaining on the progress bar, display of total tracks and time remaining on the thumbnail etc.

Personally, I have no use for key commands. I bought a remote to use with the mail HP Stream laptop we use for the features we need: play/pause/skip (etc). The only change I have yet to tackle is Searching across all sources, if possible. A brief look, and it appears easier said than done. Display on my old Kindle’s is perect in landscape or portrait, however the refresh on iPhone’s isn’t quite right. There’a a bunch of minor changes I added like refreshing the screen when you go back from “Library” to “Now Playing” so line1 - 3 will display. Naturally, by now, you have realized I disabled nightly updates. :slight_smile:

Screenshots attached; thanks for your interest. Really looking forward to your next version.

1 Like

VERY cool that you were able to figure out that spaghetti code enough to tweak it to your liking!

For the song info lines - yes you are correct that line1 = track, line2 = artist, and line3 = album, but only when you are playing music from your local library. When you are streaming from an internet radio source, line1 = stream name, line2 usually is the song, line3 usually is the artist, but sometime it is artist/album. It was for that reason that I did not label the lines and I kept the lines in the 1, 2, 3 order. It is up to you if you want to keep your tweaks, but with the new version, I am keeping the 1, 2, 3 order. Although with the new version it will be much easier for you to tweak it, too!

For the clock - even with the original version, I had toyed with putting a clock in the UI. Now that I am using Vue, it would be even easier. The new now playing screen looks very similar to the one you are using, so I could easily put a locale localized formatted clock in one of the corners, with a setting to show it or not. To keep it clean looking, I would use the format “LT” described in the “Localized Formats” table here [1]. I would want to use the localized format because I know there are Roon Web Controller users in France, Japan, and Korea, and the time/date format varies for different regions.

[1] https://momentjs.com/docs/#/displaying/format/

For the play pause on the progress bar - in the new version, this bar is already replaced with a functional track seek control. The UI element is in place now, but I need to do the back end code to actually support the track seek. That is a 2.0.0 feature, so I would not want to duplicate the play/pause behavior on that element.

For the color differences - neat idea! Though in the new version, I am eliminating the use of color to show if something is active or not. I work with a few folks who are color blind and they were not able to tell if (for example) radio was on or off. So with the new version, I am using different icons for on/off, or in the case of loop, loop off, loop all, loop 1.

For the light/dark detection code - that was there to support the “dominant color” theme. Neat use of the code, but I am not planning on having a “dominant color” theme this time - at least not for 2.0.0. If enough folks want it, I might be able to bring it back.

For the weirdness of the no display when switching from library to now playing - that is annoying isn’t it!!! That is one the main drivers for the architecture change with the new version. Vue uses a product called Vuex to store state centrally. When used properly, all of the data goes into the state, then the display elements just display the state. It is a shift in thinking, but once done, it makes creating UIs MUCH simpler. By doing this, I no longer have that weirdness with switching from library to now playing to queue. It just works!

For the progress time - I forgot about that! A year ago I had toyed with having a setting to have that time be either “Current Position” or “Time Left”, but I never implemented it in the old version. I just added it to my todo list for version 2.0.0.

Good stuff! Thanks for the info and I hope you will have just as much fun tweaking the next version!

3 Likes

A minority request here: include a screen display geared to classical music. My mental model is to create a few (2-3) screen templates for different types of music. The two obvious ones are “Rock” and “Classical”. The primary difference between these screen templates is the amount and type of track data displayed. The Classical template, for example, would include the composer, and would extend the amount of space allocated to a track’s WORK and PART descriptions. Space for these additions would be borrowed from something, perhaps smaller album covers, smaller fonts, etc.

The user could access any template but is likely to just pick one and leave it alone. A really cool way to program templates is have the extension choose the best template based upon the track’s genre.

Anyway, just food for thought.

Not as minority a request as you would think. I listen to a LOT of classical as well and feel your pain.

However, I can only show what is in the API itself. And the API does not separate out WORK, SECTION, PART, COMPOSER, CONDUCTOR, ENSEMBLE or the many other useful tags for classical music. It shows lines of text only, the format of which cannot be changed. What the app shows is what the API presents.

That said, one things that really bugs me with the current version of the app is the length of the song lines. Scrolling through a long line like “Das Rheingold: Scene1. Der Welt Erbe gewänn’ ich zu eigen durch dich?” is downright painful. The new version does not do any scrolling and displays the entire line, which makes things much easier to read.

Here is an example screenshot of the Now Playing page in the new version - the first screenshot to be made public by the way! :slight_smile:

3 Likes

Definite improvement methinks. I yearn for a classical-friendly display.

Roon, pretty please??

1 Like

Roon Web Controller 2.0.0 ALPHA-0 has been made publicly available.

Please keep ALPHA comments in the other thread so that I can keep an eye on them.

See this post:

2 Likes

Please hint how to change the listening port (8080) for the Web controller installed on QNAP NAS Server?
Best Regards Robert

For version 1.2.x:
Not sure on a QNAP since I don’t have one. The Gitlab page for Roon Web Controller has information about both command line options and a config file. Looks like @BlackJack gave a good answer here: How to: Install Roon Extension Manager on QNAP

For 2.0.0:
You can’t yet. I will be implementing environmental settings to configure the port though. This is mainly for docker/kubernetes support but should also be useful in other setups.

Can the QNAP set/use environmental variables? If not, I will also investigate a file based way to set the port.

I think most (all?) QNAP users use Docker (and the Roon Extension Manager?) to run your extension. docker run has the -e option to set environment variables for the container and Docker Compose has its ways too.

Update:

If you mean environment variables for QTS then no, not over the GUI AFAIK.

Thank You for information where to find the Web Controller configuration file in the Qnap server. I understand that I need to copy it and change its name to “local.json” and edit it to enter the correct port for RWC. It looks like a fairly simple operation, but I’m still holding back because I want to be absolutely sure that I’ll do it right.
Thank you Robert for help

Mike, as I understand after reading the read me file, the layout for the screenreader is not ready yet. I think it will be better if I hold install the 2.0 version of RWCtil it come to beta stage.
I’m afraid that if it works unstable, I won’t be able to control Roon.
Regards Roberr

Good plan.

I have not started the screen reader layout and many of the buttons on the touchscreen layout at not properly labeled yet for screen readers. So yes, I would recommend you hold off for now.

1 Like

Thank you Mike for the hint. It is as I thought. I think I will only be useful when the screenreader friendly layout will be ready. I will gladly share my insights.
Thank you for the great program Robert

Can QNAP use Docker compose files? If so it would simple to add a sample compose file pointing to where the port can be changed…

Yes and that’s also the way I installed the Roon Extension Manager and other Docker Containers on my NAS. This allows to make use of Docker options beyond what the limited QNAP GUI allows and it’s also easy to save a copy of the compose file’s content on the PC for later use (to have a backup/copy is always a good thing).

See this post and my following answers:

Thanks for the screenshots - that helps a lot!

The “Advanced Settings => Environment” is what I had hoped QNAP supported, so thanks for that!

The Kubernetes management front end I use (Rancher 2) has similar options for environmental settings.

I think we just need a way to provide the port for users of the Roon Extension Manager. Yes it’s possible to add that option to its configuration but what about users that just install the REM to discover available extensions? If they later on decide to try out the RWC they might end up with a non-accessible extension. They might give up before they figure out that they have to add the option for RWC to the REM.

1 Like

You raise an excellent point. Especially since I suspect that most installs of RWC are installed via REM…

The easiest solution is to change the port that RWC listens on while de-conflicting with Roon itself…

1 Like

Maybe there are better options? There is the possibility that REM can take the port as option and do something useful with it (like the TZ option for the Alarm Clock)? @Jan_Koudijs

I had a command line option for port on the previous version, but I am not sure if it was used with REM. And honestly, I would rather to environment settings than command line options. The previous implementation used two additional packages - “command-line-args” and “command-line-usage” - that I was hoping to remove from this version.

That combined with the desire to use environmental settings for docker/kubernetes support means that the easiest solution is to just change the default listening port on the server. For dev, the backend listens on port 10000 so that I can use the Vue development tools on 8080. So it would actually simplify things to use port 10000, or another high port.

On the flip side, it would break existing user’s bookmarks or wrapper apps. For example, I use a QT Webengine front end for my day to day usage of RWC. Others use Electron based wrapper apps through various means. Sure, it is easy for me to change my wrapper app, but I am not exactly thrilled about the user experience of asking other folks to change their apps/bookmarks.

So I am on the fence about changing the listening port…