Jan M

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 2022-11-18 at 15.38.28.png

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.

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

add-custom-css-for-rnbooscquery-runner-browser-interface

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.

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

In the United Arab Emirates, Desert Safari Dubai offers an exclusive selection of Desert Safari Deals and Tour Packages. It has a dune drive and many more things. Explore Dubai’s most scenic desert destinations with Desert Safari Dubai Deals. 

 Take off on a camel ride through rugged terrain dotted with thorny cacti plants, cross tranquil oases at sunset time when deer graze lazily near palm trees, marvel at sunsets over vast dunes of sand; it’s all possible with Desert Safari Dubai Deals!

In the United Arab Emirates, Desert Safari Dubai offers an exclusive selection of Desert Safari Deals and Tour Packages. It has a dune drive and many more things. Explore Dubai’s most scenic desert destinations with Desert Safari Dubai Deals. Desert Night Take off on a camel ride through rugged terrain dotted with thorny cacti plants, cross tranquil oases at sunset time when deer graze lazily near palm trees, marvel at sunsets over vast dunes of sand; it’s all possible with Desert Safari Dubai Deals!

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 {

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

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


and to the parameter class: 

parameter {
   max-width: 30%;
}

Add custom CSS for RNBOOSCQuery runner browser interface