• SoftwareIDE

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

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?

2 years later

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.

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.

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

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>