Regarding GUI: does main.html override index.html?

DragonSF

I'm trying to understand the GUI mechanism: I tried to create my own html, which shows fine, but the 'standard' index.html is not showing. Am I missing someting? I thought, that somehow the index.html will load main.html (in my project folder), but this didn't happen. Only my main.html is shoen.
What's up?

giuliomoro

see other posts. index.html loads but instead of loading sketch.js it loads main.html from your project in an <iframe> whose <head> (and some more) is set by gui-template.html.

DragonSF

How can I load sketch.js from main.html? I need to load a script before running the sketch. If I load the skript in gui-template.html. it works.

DragonSF

I got things running so far:

`
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/template.css">
<script src="../js/p5.min.js"></script>
<script src="/projects/brings/pepper.js"></script>
<script src="/projects/brings/sketch.js"></script>
</head>
<body scroll="no" style="margin: 0; overflow: hidden">
<link rel="stylesheet" href="css/dat-gui-bela-theme.css">
<div id="gui-container"></div>
<script>
window.data = "data"
window.Bela = window.parent.Bela;
window.utils = window.parent.utils;
window.GuiHandler = window.parent.GuiHandler;
window.addEventListener("message", function(event) {
$("body").append($(event.data));
window.parent.postMessage({ready: true});
});
</script>
</body>
</html>
'

Problem here is: Can I get at this level access to the project name and if yes, how?
PS: I tried to use 'insert code', but it doesn't seem to work.

giuliomoro

main.html's content is appended to iframe's <body>. The project name is in window.Bela.control.handler.project. For posterity, here is a minimal example where the default sketch is loaded alongside some extra html.

<style>
body {
    display: block;
};
</style>
<script>
        let guiHandler = window.Bela.control.handler;
        console.log("LOADED\n");
        guiHandler. loadSketch(guiHandler.project, 'head', document);
</script>
<div>My custom HTML</div>

the display: block is there to override the annoying default display: flex, which I have no idea why was there in the first place ...

DragonSF

Thanks a lot. I noticed, that loadSketch has an optional parameter 'resources', where I can put my pepper.js scipt.
My working result looks like this

<script>
        let guiHandler = window.Bela.control.handler;
        let resource=["pepper.js"]
        guiHandler.loadSketch(guiHandler.project, 'head', document,"sketch",resource);
        console.log("LOADED\n");
</script>