sketch.js GUI files not working on new boards with Supercollider

grahamsw

I've got the new Stereo & Multi boards. I work in Supercollider, and they're sounding great, but I can't get any GUI to work.

Seems good in C++, and scope works in SuperCollider, but I've been trying to get any sketch.js to be recognized.

Is there a step to include the GUI library that I'm missing? I thought that was built in?

giuliomoro

I think most guis worked just fine: most of the provided examples are fine. One issue is with files loading images, where the path has changed: https://forum.bela.io/d/7683-issues-loading-gui-images-on-bela-gem
and another one I've seen is when accessing some global variables like windowWidth and more from within setup(), which I think is no longer permitted. Can you show an example of a file that doesn't work?

grahamsw

did this ever work with SuperCollider?
It looks as if the GUI sketch.js mechanism is supported in C++ and puredata. But not in SuperCollider.

this sketch, and every other I've tried, just doesn't show up

// sketch.js — p5.js GUI, opens via "GUI" button in the Bela IDE
// Runs in the browser; communicates with _main.scd via Bela's websocket bridge

let freqSlider, ampSlider, panSlider;
let playBtn;
let isPlaying = false;

function setup() {
    createCanvas(400, 320);
    background(30);

    // Declare the buffers we'll send to Bela
    // Buffer 0: [freq, amp, pan]  → OSC /Bela/data/buffer
    // Buffer 1: [gate]            → OSC /Bela/data/buffer1
    Bela.data.setBuffer('f', 3);  // buffer 0: 3 floats
    Bela.data.setBuffer('f', 1);  // buffer 1: 1 float

    // --- sliders ---
    freqSlider = createSlider(80, 1600, 220, 1);
    freqSlider.position(120, 60);
    freqSlider.size(200);

    ampSlider = createSlider(0, 100, 30, 1);
    ampSlider.position(120, 120);
    ampSlider.size(200);

    panSlider = createSlider(-100, 100, 0, 1);
    panSlider.position(120, 180);
    panSlider.size(200);

    // --- play button ---
    playBtn = createButton('▶ Play');
    playBtn.position(160, 240);
    playBtn.size(80, 36);
    playBtn.mousePressed(togglePlay);
}

function draw() {
    background(30);
    fill(200);
    noStroke();
    textSize(14);

    text('Freq: ' + freqSlider.value() + ' Hz', 30, 70);
    text('Amp:  ' + (ampSlider.value() / 100).toFixed(2), 30, 130);
    text('Pan:  ' + (panSlider.value() / 100).toFixed(2), 30, 190);

    // Send params to Bela every frame (throttled by p5 frameRate)
    let freq = freqSlider.value();
    let amp  = ampSlider.value() / 100.0;
    let pan  = panSlider.value() / 100.0;

    Bela.data.sendBuffer(0, 'float', [freq, amp, pan]);
}

function togglePlay() {
    isPlaying = !isPlaying;
    playBtn.html(isPlaying ? '■ Stop' : '▶ Play');
    Bela.data.sendBuffer(1, 'float', [isPlaying ? 1.0 : 0.0]);
}

I'm going with a locally (laptop) hosted gui to send OSC to the bela - works for now

Let me know if I'm missing something.

giuliomoro

I see, no it never worked with supercollider. I think there's a workaround possible to load the GUI, but then I am not sure how you'd send stuff to it from Supercollider. You'd need to establish a websocket and send binary or json data through that. Is that something that you think would be possible on the Supercollider side?

grahamsw

right, as far as I can see there's no documented way of connecting to the WebSocketServer from SCLang.

It would be possible to run a separate bridge web socket server on the bela, but at that point you might as well bypass it altogether and send the OSC directly to SCLang. You're giving up whatever goodness the built in GUI gives you, but you gain the flexibility of being able to run the GUI anywhere. On the bela if you want, but also on another machine - you could have one GUI connected to multiple boards.

Since my main interest is sonification and soundscapes - responding to "environmental" signals, everything is explicitlly set up to react to OSC messages - mostly I just use a python repl to send OSC to the bela, but don't tell anyone.