A small update. Tried to load and use p5.sound.js but I get the error mentioned in this and this issues. The Web Audio API AudioWorklet feature requires HTTPS to work and since bela.local is served over HTTP it would not be possible to run examples for this library.

That said, you can still make your project communicate with an external p5 application served externally over HTTPS, if you are interested in doing that and have issues getting it to work don't hesitate to get in touch.

Both issues are still open, ideally p5.sound.js should revert to the old scriptProcessor when context is not secure, but I also understand that would take some time to get rolled in.

That said, I have tested loading a couple p5 community libraries and managed to get them working, so it is only a matter of doing some more thorough testing and discuss what the best way to make this functionality available is.

I too encountered those same errors and was experimenting with trying to make the gui IDE server load over https with a self cert, I tried configuring the express server in IDE/dist/main.js but https would not load, may have been due to my inexperience.

I'll give it a shot with an external https server since that would be easier for me to figure out with my current experience level and get back to you.

So after researching the past few days it seems the most efficient way to use p5.js with bela hardware would be to use the bela cpp library as a node-add in in a manner such as <https://itnext.io/a-simple-guide-to-load-c-c-code-into-node-js-javascript-applications-3fcccf54fd32> so that the memory can be accessed directly by the server and p5 call rather than sending it through websockets to the server.

Bearing in mind I'm learning as I go, does that seem a viable option to persue or is it something that's already been done?

Hi Zeke,

I am not a Node developer myself so don't know how much you can do with Native Add-ons, but p5.js renders directly on your browser, and it is completely client-side. Since you are handling data on Bela, which is a different machine, you need to communicate with the browser on your local machine somehow, there is no shared memory between the two.

A WebSocket is probably the most efficient/straightforward way to do this in real-time (if you google around, you can find some suggested alternatives for client-server communication, but WebSockets are bidirectional, flexible and have low overheads)

Hi Adan,

Thanks that helps, was probably way over-thinking as usual.

13 days later

how can I access gui/index.html ?? Normally with P5 its just there in the editor tab. but where is it on Bela?

It is in Bela/IDE/public/gui/index.html. However, if you have a file called main.html in your project folder, that will also be loaded. I am not sure about the details of what happens there, though. @adanlbenito knows more.

2 years later

I copied all the js and css folders and the index.html file into my project folder. As soon, as I just rename the index.html in my project to main.html, the GUI doesn't seem to work as expected anymore. The page source looks exactly the same. Am I missing something?

After some research, the main.html is actually included in the gui's index.html, but none of the scripts or stylesheets are loaded: (Edit: found out, they have to be placed @ ~/Bela/IDE/public/gui)

Question: how can I see the original p5 controls?
My main.html looks like:

<!DOCTYPE html>
<html>
<body>
<script src="/projects/exampleTempProject/sketch.js"></script>

    <link rel="stylesheet" type="text/css" href="style.css" />
<canvas id="defaultCanvas0" class="p5Canvas" width="975" height="600" style="width: 975px; height: 600px;"></canvas>
<input type="range" min="0" max="255" style="position: absolute; left: 50px; top: 100px;">
<div id="header" color="white">
<h4>Bela Web GUI</h4>
</div>

</body>
</html>

I can the slider now, so somehow the scetch.js is not executed correctly.
Any insights?

    DragonSF : (Edit: found out, they have to be placed @ ~/Bela/IDE/public/gui)

    either there or use the /projects route so if you have a file in your project's folder, you can access it via /projects/PROJECT_NAME/style.css. It would be nice to have a meta-route /current-project/ so you don't have to hardcode the project name in there.

    I am not sure how main.html is supposed to work. But from what I see in GuiHandler.js, the project will either load your sketch.js or load your main.html. Note that the content of main.html is appended to the <body> (!!) of gui-template.html, so it may not all work as expected ... I think the intended use of this is that you can load an entirely different GUI from P5 one, using the same communication channels (which are set up by the wrapping gui-template.html). What I just noticed is that if a <script> tag in your main.html has type="module", then its content won't be executed ... I don't know why that's the case and I don't understand the whole thing well enough to know whether it's expected. I also did some experiments to try and load the sketch.js from within your main.html, but I don't seem to make that happen. Maybe an option if that's what you want is to disregard this built-in loading method and create an iframe from your P5 GUI where you load your desired html.

    @adanlbenito can you advise here?

      I've come to the same conclusion. My actual goal here is, to include my style sheet only, because I want for example vertical sliders. So I added this ：gui-template.html: <link rel="stylesheet" href="css/style.css">
      I'm aware, that this is a hack, but if there is a better way, please advise.
      Thanks anyway for the support.

      Using my css and some minimal changes in the sketch.js file, I can produce this:

      If anyone is interested in this, I'm happy to share.