Add custom CSS for RNBOOSCQuery runner browser interface

Jan M's icon

Has anyone figured out if it is possible to add a custom style sheet to the browser interface of a Raspberry Pi running RNBO?

I'd like to make a few changes to be able to see more parameters at one glance without scrolling.

Currently I do it by manipulating the CSS styles inside the browser after loading the page. But that means re-doing it after every reload, so not really ideal even though it's just two classes I have do modify.

Here is an example of what I'd like to achieve:

Screenshot of browser interface with modified CSS

Florian Demmer's icon

Hi Jan,

the code for the browser interface is actually available on GitHub - https://github.com/Cycling74/rnbo-runner-panel

If you need to customize it, want to tailor it to your needs or are just looking for an example on how to interact with the WebSocket endpoint that is exposed by the OSCQueryRunner from a browser context the repo is probably a good starting point.

There are probably some improvements and features we could add to the browser interface. Please feel free to contribute by creating issues or pull requests on GitHub if some of the things you have in mind might be valuable for a more general use-case.

Thanks

Jan M's icon

Thanks Florian,
I took a quick look. As I haven't worked with next.js yet it would take a little while to dive into the code. Currently I am in the middle of the production, so it'll be probably not before the end of the year.
What I have in mind to add maybe a dropdown menu, that allows to select different layouts, 1 column, 2 columns 3 columns....

Probably an easy addition to someone familiar with code. I just added to the wrapper element of the parameters:

ParameterList__ParamWrapper-sc-jgotn6-0 {
display: flex;
flex-flow: row wrap;
}

and to the parameter class:

parameter {
max-width: 30%;
}

Maybe someone wants to join in on that?

Florian Demmer's icon

Hi Jan,

following up on this relatively old thread to see if the revived interface, released with RNBO 1.3.0, addresses your needs. Does it automatically do what you were originally describing for better overview and control of long parameter lists or does it leave more control for the display to be desired?

Thanks,
Florian

Jan M's icon

Hi Florian

i finally found the time to upgrade my setup to the latest RNBORunner. The new interface it very nice! for me it works perfectly.

One thing would be a nice- to-have eventually:

  • It would be great if the parameters could be ordered in the browser interface e.g. by the restore order attribute or a meta value in the patcher inspector. So related parameters could be displayed next to each other.

On a different note I realised that currently when using the keyboard to play MIDI notes in the MIDI tab of a patcher holding down a key send the note repeatedly like a MIDI-roll.

It's truly wonderful how RNBO is progressing. It already became may preferred way of building and playing patches with Max!

Florian Demmer's icon

Hi Jan,

thanks for getting back on this. Noted your parameter sorting FR here:

Wrt MIDI note retriggering - I wonder if that is a browser / device specific thing as we couldn't reproduce. Would you mind to provide a bit more detail incl. the browser version you are using? Feel free to create an issue on the above mentioned GitHub repo as well.

Thanks
Florian

Jan M's icon

Hi Florian,

thanks for logging my proposal. I'll investigate the MIDI re-trigger issue a bit more and come back with more specifics.

Cheers,

Jan