web page bare minimum

admant

Hello there,
would it make sense to make a tutorial on how to encapsulate a rnbo patch in a html page at a very basic level? Something like a "bare minimum" with a single JS onclick event. I know there is the JavaScript Webpage Template but it is not clear to me how to connect - i.e. - a single toggle (play/pause) button to an oscillator without using the template sliders. There are too many functions in the template to get oriented, at least for me, and modifying the index or the app.js by deleting lines of code many often gives me JS errors.

Thanks a lot for any hint!

Antonio

Wil

upvote ^10

Eric Sheffield

I recently made something like that: https://github.com/ersheff/simple-rnbo-web-template
Feel free to use and/or offer suggestions.

admant

hey, thank you so much Eric!
Very handy.

Antonio

Florian Demmer

Thanks Eric for sharing that.

No pressure of course, but I'd be interested in gaining a bit more insight into what parts were unclear or seemed too complex in the existing template in order to see if we can further simplify or split things up in a way that reduces the complexity and hurdle of getting started with the template or if an additional walk through / tutorial would be helpful.

Thanks again for sharing, appreciated!
Florian

admant

Hello Florian,
it's the link between the index.html file and the js that is a bit obscure to me. But let's take it "as is", and skip the javascript question.

Simply adding a toggle button along with the sliders would be useful (the sliders shows a float range 0. to 1. and not 0/1)

And, if I only have a single on/off interaction, is the resume() function the right way to play/stop?

For an even simpler bare minimum, an example with a single parameter that I directly assign to a html IU object would be useful for beginners, I think.

(I hope I explained myself...).

Antonio

Wil

This template works great - bare minimum!

However:

I added a parameter to the cycle~.
But this does not work??
I added param @name freq @min 20 @max 20000 @value 400 to RNBO (then export and replace files in "export" folder)

In the app.js I added getElementById=slider, parametersById = freq
In the html I added id="slider" + min, max, value etc

When I export and open in localhost, volume slider works, and if I change @value of the freq param to a different number (400 -> 45 or anything) this updates to the new freq.
***But the frequency slider that I made doesn't do anything??
Can anyone see what is wrong in these screen shots??

(also, I tried using different names for the parameter in RNBO and the corresponding app.js and html-- nothing :(

Also... It would be great if there was a link to all the different UI input types available. (On c74 and Ableton sites they are using pictsliders).

Also, it would great to see an example of {outport} converted to an html number box (or float) so I can see the numbers change on the website (for testing and cute aesthetics!)

Wil

Ok. This works.
Moving the "vol-slider" to control the frequency works on web page.
So something must be wrong when adding a second param and connecting everything in js and html.

Eric Sheffield

Hi, Wil.
I updated the GitHub template to add a second slider to control the frequency.
Both frequency and volume sliders seem to work fine for me.
I don't see any specific errors in the code or patch that you posted, but maybe the updated repo will help identify the issue?

admant

But which are the lines of code that connect the jsavascript UI object to the rnbo parameter? Is it around here?

slider.addEventListener("pointerup", () => {
            isDraggingSlider = false;
            slider.value = param.value;
        });
        slider.addEventListener("input", () => {
            let value = Number.parseFloat(slider.value);
            param.value = value;
        });