Roon Extension: RoonWeb App v1.0 for Roon Web Controller v1.2

Hilton_Kelly · November 9, 2020, 3:25am

I’ve made a companion electron app (called roonweb) to have the web controller run in a frameless window with hidden titlebar and made still dragable by the album art. I’ve compiled it to an electron exe with all dependencies.

This is version 1.0 working fully with Roon Web Controller v1.2.

It also works with Roon Web Controller v2 Alpha but does not yet allow you to drag the window around.

The included AHK script allows you toggle the app to semi-transparent and keep ontop.

Standard and semi-transparent modes side by side.
roonweb by Hilton, on Flickr

Full Desktop view
roonweb-desktop by Hilton, on Flickr

Stay on Top
roonweb-ontop by Hilton, on Flickr

Using as game overlay in cloudpunk (stayontop semi-transparent)
All controls still work of course.
roonweb-gameoverlay-ontop by Hilton, on Flickr

github.com

Hiltondk/RoonWeb/blob/main/README.md

# RoonWeb App 1.0 for Roon Web Controller

RoonWeb [Electron](http://electron.atom.io) application that loads Roon Web Controller into a frameless window with hidden titlebar.
Supports Semi-transparent and stay ontop with included AHK script.

Drag the window around via the album art and resize it from the edges of the window.
Double click the Album art to go full screen and double click again to restore window.

Install AHK to use the included AHK script.
With the AHK script running you can hold left windows key and left click to make the window semi-tranparent and force it to stay ontop.
To return the window to normal, hold left windows key and rick click on the window.

You need to install the Roon Extension Manager and Roon Web Controller to use this.

At the moment it’s hard coded to run on the roon core server (localhost:8080) but you can manually change the address in line 26 of Roonweb.js

Change the line between the single quote to whatever address and port you want to point it at (you only need to change this if if running it on a remote PC/device to point it at your Roon Core Server)

line 26: window.loadURL(‘http://localhost:8080’)

This file has been truncated. show original

At the moment it’s hard coded to run on the roon core server (localhost:8080) but you can manually change the address in line 26 of Roonweb.js

Change the line between the single quote to whatever address and port you want to point it at (you only need to change this if if running it on a remote PC/device to point it at your Roon Core Server)
window.loadURL(‘http://localhost:8080’)

You’ll need to drop an updated nowplaying.css file into your user appdata under C:\Users\AppData\Roaming\RoonExtensions\node_modules\roon-web-controller\public\css\nowplaying.css

github.com

Hiltondk/RoonWeb/blob/main/RoonWeb-win32-x64/resources/Roon-Web-Controller-CSS/nowplaying.css

.buttonZoneName {
    background-color: rgba(0,0,0,0);
    width: auto;

}
.buttonAvailable {
    fill-opacity: 1;
}

.buttonActive {
    color: #3daee9;
    fill-opacity: 1;
}

.buttonInactive {
    fill-opacity: 0.33;
}

.itemImage {
    border-radius: 10px;

This file has been truncated. show original

Hilton_Kelly · November 9, 2020, 2:33pm

I’ve created the first windows installer for RoonWeb App. You will still need to manually copy the nowplaying.css file as per the readme.

You still need to install Roon Extension Manager and Roon Web Controller and follow their relevant instructions before RoonWeb will work.

Hilton_Kelly · November 12, 2020, 5:30am

If anyone else has tried this out can you let me know how it went with install and if it’s working.

Cheers.

Jason_Carle2 · November 13, 2020, 12:59am

Perhaps I am having a moment of complete brain lapse, but how the heck do I install this in Manjaro Linux?

tby · November 15, 2020, 2:53pm

To just get it to run you can do:
$ git clone https://github.com/Hiltondk/RoonWeb.git
$ cd RoonWeb
$ rm package-lock.json
$ yarn install
$ vim Roonweb.js # replace the value for window.loadURL if you like me do not run roon on localhost
$ yarn run electron Roonweb.js

Jason_Carle2 · November 15, 2020, 3:52pm

Thank you, I am using it now. I had to install Yarn and Vim, but other than that the install went fine. I of course am on 2.0 Alpha of the web controller, so the window isn’t moving but it’s a great first step!

Tecko71 · December 7, 2022, 10:14pm

really do not understand how to run this app. Tried with node Roonweb.js but that is not working. I installed it by using npm install on archlinux system.