Roon Extension: Roon Web Controller v1.2.0

Build instructions on Mac are reasonably straight forward.

Edit: previous link was building electron itself. For building an electron app, this page is more useful…

fixed my AHK stayontop/transparent script so that it will only have effect on Roon Web Controller window.

LWIN & LButton::
WinSet, Style, -0xC00000, Roon Web Controller
WinSet, Transparent, 150, Roon Web Controller
WinSet, Topmost, On, Roon Web Controller

LWIN & RButton::
WinSet, Style, +0xC00000, Roon Web Controller
WinSet, Transparent, off, Roon Web Controller
WinSet, Topmost, Off, Roon Web Controller

New Thread created for the RoonWeb companion App.

First Installer created for RoonWeb App.


I have a question to Mike_Plugge:
After extensive search in the app.js and nowplaying.js files, I’m searching for the code that reflects the current volume value of a zone. I would like to export it via serial.
Is this available,?
If I look at the code below, does ‘‘volume’’ hold it? My idea is that this ‘‘volume’’ section only gets updated by using the web controller, but is not the code that a Roon controller volume slider/button updates the zone volume…

function volumeButton(spanId, value, output_id) {
$("#" + spanId + “”).html(value);

var msg = JSON.parse(
‘{“output_id”: "’ + output_id + ‘", “volume”: "’ + value + ‘" }’
socket.emit(“changeVolume”, msg);

function volumeInput(spanId, value, output_id) {
inVolumeSlider = true;
$("#" + spanId + “”).html(value);

var msg = JSON.parse(
‘{“output_id”: "’ + output_id + ‘", “volume”: "’ + value + ‘" }’
socket.emit(“changeVolume”, msg);


In the output from the Roon API itself, the zone object contains the outputs array. Each entry in the outputs array can have a volume object. That volume object is where you want to look for the volume.value.

Zone documentation:
Output documentation:

Been a while since I have looked at the old code for v1.2.0…

In the code for v1.2.x, in nowplaying.js, look at line 678.

if (curZone.outputs[x].volume) {

curZone = the current selected zone
curZone.outputs is an array of output objects.

In nowplaying.js, line 678 checks if the volume object is in the output object. If the volume object contains a value, then it is in curZone.outputs[x].volume.value - see line 705.

Not all outputs have the volume object - for example zones with fixed volumes do not contain a volume object.

PLEASE note - you most likely will not be able to write to a serial port from the nowplaying.js since that runs in a web browser on the client side. And web browser sandboxing should prevent access to the serial ports.

If you are writing values to a serial port, then that should be done on the server side. The server side code on v1.2.x is a train wreck and you really should look at the server side code for the alpha version of Roon Web Controller:

The alpha server code is 95% complete - the only new code that it will need is the code for some things that have not yet been implemented on the client side…

In the alpha server code, if the volume object exists, the value would be in the global variable “state” at:

Thanks Mike,

I was a bit afraid already that only serversided it can be done.
Looked many times, but i don’t see a volume object or state.zone_list[zone_id].outputs[x].volume.value

Hi Mike,

Thanks for a great add-on.

Would it be possible to get this to look better on a 320 x 240 screen? I guess the css file needs modifying? Any pointers please?



I managed to fix this to run on a 320x240 screen.

The initial instructions are here

I just changed the last line in to

/usr/bin/chromium-browser --window-size=320,240 --app=“http:localhost:8080” --start-fullscreen

Is there a better way to delete this than dragging the folder to the trash?

I am on Manjaro Linux.

Evidently my search foo is severely lacking. Am using a RPI 4 along with the official 7" touchscreen. How do I enable a screensaver? Would like to see date/time if possible

That should be
usr/bin/chromium-browser --window-size=320,240 --app=http:localhost:8080 --start-fullscreen

Having a problem getting this installed - hopefully someone can point me.

All fine up until - ‘npm install’. When I run that command I get ‘-bash: npm: command not found’


Since upgrading to Big Sur I’ve had an issue with overlarge font size/control icons in the Web Controller. Increasing the size of the display window helps, but doesn’t eliminate the problem. This issue only arises with the Web Controller and no other apps. Below is a screen shot showing the issue.

I am running a retina display 27 inch iMac with the display resolution set to default for display.

I really just want to reduce the size of the control icons so they show up fully in the display. Please let me know how I can fix it.

Thanks in advance.

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

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:

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

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.

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