Roon Extension: Roon Web Controller v1.2.0

Tinkering Roon API
162

A lot of folks use the Roon Extension Manager to install Roon Web Controller.

So after working through a few things with @Jan_Koudijs, the Diet Pi Installation Guide for Roon Extension Manager is now ready!

Here it is and let us know if there are any issues: https://github.com/pluggemi/roon-web-controller/wiki/Diet-Pi-Installation-Extension-Manager

1 Like
163

Hi,
Iā€™m using 1.2.6 on RPI3 / DietPi v159 (node server and chromium client).
Seems quite stable and robust (daily use without reboot).

One las thing ā€¦ How to install chromium virtual keyboard extension to allow library search functions via touch screen ?

Thankā€™s

164

Please be aware that the Chromium virtual keyboard extension does not work reliably with the current implementation of Roon Web Controller due to the use of iframes. But if you wish to proceed anyway:

I believe you are using the Diet Pi instructions that I provided, so ssh to the system as the dietpi user.

Edit the .xsession file:
nano .xsession

Temporarily remove the --kiosk option from the chromium line. That should make the line look like this:
/usr/bin/chromium-browser http://localhost:8080

Save and exit.

Restart nodm
systemctl restart nodm

This will give you the full Chromium browser. Then you can install the extension you like from the standard Chromium menus. Once you install and configure the extension, simply reverse the steps above to put the --kiosk option back in the xsession file and restart nodm again.

165

Thankā€™s Mike.
I understand the iframe issue. Better if search function available obviously, but iā€™m happy with web controller as it is. Seems very stable now.

166

This is great! Thanks Mike!
I am coming from LMS and used a ā€œNow Playingā€ html file as a 10-foot UI.
Any pointers to where to look if one is interested in making tweaks to the layout (e.g., bigger font for the playing time).

167

Since you are coming from LMS, you probably see the influence from Jivelite on the layout of this web app!

Playing time is one of the only fonts in this app that have a fixed size. I tried to keep everything dynamic to keep things useful on a variety of display sizes.

You can play with the size by looking at the public/css/nowplaying.css - specifically this section:

#trackSeekValue span {
    position: absolute;
    bottom: -15px;
    width: 50%;
    margin: 0;
    line-height: 10px;
    font-size: 10px;
}

The line-height and font-size determine the size of that text. However, if you change the size, you will have to adjust the bottom parameter to align it properly.

I do have some things on my todo list to tweak this app to make it better for a 10ft display. This font-size setting as well as possibly keyboard shortcuts are things that are in the incubator. I just havenā€™t had the spare time to devote to it.

1 Like
168

Thatā€™s super helpful!
I may try to tweak the sizes for a 1920x1080 display. Does the API give you the year?

169

No worries

No, the API for does not give the year in now playing or the library. The now playing text is formatted by the server. For the main screen I am using the 3 line version of the now playing text.

Here is the API doc for the zone portion and I am using just about everything available. There are some things in the transport API that I am not using - mainly the zone grouping and transfer functions. But I always felt that was out of scope for the intent of this web app.
https://roonlabs.github.io/node-roon-api/Zone.html

170

Firstly, a big thanks to @Mike_Plugge for this extension! It has been a heady couple of days getting my head around this brave new world!

I have posted elsewhere that I would love to use this extension on a screen to convert a cassette player. The RPi touchscreen seems like the most plug-n-play option but I just remembered I have a 4th gen iPod touch. Whilst I have had just enough screen to get something to show, the hamburger menu falls outside the screen and I canā€™t seem to scroll across. Some of the play controls get squashed up as well. Wikipedia tells me that the screen resolution is 960x640, which is larger than the RPi screen. Is it a DPI issue? Any way to resolve it? Reading higher up I saw there was a previous issue with old versions of Safari/iOS. Is this still the same thing?

Thanks for the great work!

171

What version of IOS is running on the 4th gen iPod touch?

Old versions of mobile safari donā€™t play well with CSS Flexbox - which is extensively used for layout on this app.

I would love to use CSS Grid, but that would break a LOT of browsersā€¦

EDIT: Looks like a 4th gen iPod touch maxes out at IOS 6.1.6. That is too old. Mobile Safari 6.1 ā€œOnly supports the old flexbox specification and does not support wrapping.ā€ Roon Web Controller will have a lot of visual issues and likely will not work with IOS 6.1.6.

References:
IOS support by device: https://everyi.com/by-capability/maximum-supported-ios-version-for-ipod-iphone-ipad.html
CSS Flexbox support: https://caniuse.com/#search=flex

172

Thanks, thought I would be pushing my luck. I could barely remember how to navigate it. I got it 6 years ago but it looks properly ancient. I might see how much a 5th or 6th gen version is. Would be pretty much the perfect size I reckon. Thanks for all your efforts.

173

Hi,

Good job on this web controller.

Is it possible to edit playlists with it? Add and remove tracks from playlists?
Or. do anyone know if it is possible to do it with node-roon-api library?

Thanks in advance.

174

The version of the API that this is currently written against does not support adding/removing tracks from playlists. But it does list existing playlists in the library section.

There is a new version of the API outlined here Node-roon-api-transport update to version 2.0 which does not mention playlist management, but does mention play queue management.

Unfortunately, I have not had time to look into the updated API yet.

1 Like
175

Roon Web Controller v1.2.8 is now available.

New features
This is a maintenance release which updates dependencies to address security issues. It is strongly recommended to perform an update.

Updating
If you followed the Diet Pi installation guide, follow these update instructions

Otherwise, on the Node.js server:

  1. Stop the extension
  2. Run git pull
  3. Run npm install
  4. Run npm update
  5. Start the extension

See the CHANGELOG.md for complete list of changes

176

Edit: Fixed my own issue.
Sorry! :stuck_out_tongue:

177

Yes, play queue management would be great! This is a feature I use quite often in Roon. Jump a few tracks forward or delete some tracks or repeat a track I specifically liked. The play queue should be accessible from the main screen, e.g. when clicking on the image a pop-up list could appear instead. No clue how or even if this can be done, only some ideas. Thanks for the great extension and keeping it updated.

178

There are some updates to the API which include play queue management. But due to a series of family issues, I have not had time to look into the updates.

Things are starting to settle down, so I am hoping to be able to look into the API changes in the next month or soā€¦

1 Like
179

Thanks for this latest update.
I had some issues updating, as running git pull caused conflicts with files not being replaced with the new ones.
I had to run a series of git clean commands and only then could I download the latest version.
I believe running git clean can be a bit risky but it worked out well for me.

180

Since the 1.6 Roon update I need to clear all cookies on the web controller page to get it to load.

after clearing cookies, it will work fine, for a bit

181

If I block all cookies on the page it works fine. Hopefully a fix can be made. I run it on a couple tablets with fully kiosk and canā€™t seem to figure a way to block the cookies on those. On my other devices blocking all cookies allows for somewhat normal usage.