Changing projects from the Gui (and not IDE)

DDragonSF · Sep 5, 2022

Is it feasible to select an existing project (for example from the sketch.js via an option list), stop the current project and start the new one? In my understanding, that has to be done outdide the gui, but can trigger it in render.cpp or otherwise. Any ideas?

giuliomoro · Sep 6, 2022

To start a project you need to run make -C /root/Bela PROJECT=ProjectName run *. If you have your own backend on the node side, you can execute that in response to a message from your frontend. Otherwise, you can "pretend" to be an IDE tab and use the existing functionalities to send that. Look at Bela/IDE/frontent-dev/src/IDE-browser.js.

This is an untested (and perhaps not working) minimal subset of what you need from it:

// run the project: call this function in response to clicking on the dropdown
function runProject(projectName) {
    socket.emit('process-event', {
        event: 'run',
        currentProject: projectName.
    });
}

// received once when the websocket connection is established
socket.on('init', (data) => {
   console.log(data.projects);  // this is the list of projects that you can use to fill in a dropdown
}

// received periodically to inform the frontend of any new projects.
// You may not need this unless you are planning to create new projects while running
socket.on('project-list', (project, list) =>  {
    // `project` (if defined) would be the current or new project. Ignore that
    console.log(list); // this is the list of projects that you can use to fill in a dropdown
})

// setup socket
var _socket = io('/IDE');
// sub- minimal wrapper for socket.io to inject clientId
// NOTE: you can probably skip this and just use the plain `io()` object.
var socket = {
    on: (what, cb) => _socket.on(what, cb),
    io: _socket.io,
    emit: (what, data) => {
        socket.id = _socket.id;
        if("object" === typeof(data) && !Array.isArray(data))
            data.clientId = socket.id;
        _socket.emit(what, data);
    },
}

*:

the IDE actually calls make -C /root/Bela PROJECT=ProjectName to build the project followed (if successful) by make -C /root/Bela PROJECT=ProjectName runide, which is the same but slightly less verbose than run
the IDE also passes the command line options as specified in the project's settings.json. If you are using the default options, you don't need to do anything with it, otherwise you'll have to parse it and add append the command line options to the make command as the CL= variable. E.g.:
if your settings.json looks like this:
```
{
  "fileName": "render.cpp",
  "CLArgs": {
    "-p": "16",
    "-C": "8",
    "-B": "16",
...
  }
}
```
you should get the CLArgs field and pass its key-value pairs as space-separated to make, e.g.:
make -C /root/Bela PROJECT=ProjectName run CL="-p 16 -C 8 -B 16 ..."

DDragonSF · Sep 6, 2022

Thanks as always for the insight. That looks promising.

DDragonSF · Sep 8, 2022

Besides some syntax-errors in your example code, I've got it running after adding this to the gui-template.html:

                </script>
                <script src="js/socket.io.js"></script>
                <script   var socket = io();   </script>

To run the selected project:

function runProject(projectName) {
    socket.emit('process-event', {
        event: 'run',
        currentProject: projectName
    });
}
function mySelectEvent() {
  let item = sel.value();
 runProject(item);
}

To fill the select button:

socket.on('init', (data) => {
   console.log(data.projects);  // this is the list of projects that you can use to fill in a dropdown
       for(var i=0;i<data.projects.length;i++)
    {
    	if(data.projects[i]!=="undefined")
    	  sel.option(data.projects[i]);
    }
})

The updated project function creates a lot of 'undefined'. I'm not sure, where this comes from.
Otherwise, as a proof on concept, it works like a charm. Thanks.

alt text

DDragonSF · Sep 8, 2022

Besides some syntax-errors in your example code, I've got it running after adding this to the gui-template.html:

                </script>
                <script src="js/socket.io.js"></script>
                <script   var socket = io();   </script>

To run the selected project:

function runProject(projectName) {
    socket.emit('process-event', {
        event: 'run',
        currentProject: projectName
    });
}
function mySelectEvent() {
  let item = sel.value();
 runProject(item);
}

To fill the select button:

socket.on('init', (data) => {
   console.log(data.projects);  // this is the list of projects that you can use to fill in a dropdown
       for(var i=0;i<data.projects.length;i++)
    {
    	if(data.projects[i]!=="undefined")
    	  sel.option(data.projects[i]);
    }
})

The updated project function creates a lot of 'undefined'. I'm not sure, where this comes from.
Otherwise, as a proof on concept, it works like a charm. Thanks.

giuliomoro · Sep 8, 2022

you need to enclose your code in triple backticks (``` ) for it to display correctly on the forum. I edited your posts above.

DragonSF The updated project function creates a lot of 'undefined'. I'm not sure, where this comes from.

Could it be that you called runProject(someUndefinedVariable) at some point? Not sure, but that may end up creating an empty project called undefined. You can check via the IDE if you have one project called "undefined".

DDragonSF · Sep 8, 2022

Thanks for the info about 3 backquotes. Didn't know that. Tomorrow I'll have the code ready for rotary Knobs (from jKnobMan) not less.
The problem with 'undefined' actually happens here

socket.on('project-list', (project, list)=>  {
    // `project` (if defined) would be the current or new project. Ignore that
    console.log(list); // this is the list of projects that you can use to fill in a dropdown

}	)

The list itself seems to have 'undefined' elements.

giuliomoro · Sep 8, 2022

DragonSF The list itself seems to have 'undefined' elements.

oh I see. I will have to look into that. Can you send me the output of ls -a /root/Bela/projects on your board?

DDragonSF · Sep 8, 2022

giuliomoro ls -a /root/Bela/projects

.
..
basic
exampleTempProject
guitest

I guess something's wrong in the sent list.

giuliomoro · Sep 8, 2022

how many undefined entries do you get?

DDragonSF · Sep 8, 2022

For each round, I'm, getting 3 undefined, But they are not coming from the list, these entries are all OK.
My select element looks like this:

<select style="position: absolute; left: 610px; top: 100px;">
<option value="undefined">undefined</option>
<option value="undefined">undefined</option>
<option value="undefined">undefined</option>
<option value="basic">basic</option>
<option value="exampleTempProject">exampleTempProject</option>
<option value="guitest">guitest</option>
<option value="undefined">undefined</option>
<option value="undefined">undefined</option>
<option value="undefined">undefined</option>
<option value="undefined">undefined</option>
<option value="undefined">undefined</option>
<option value="undefined">undefined</option>
<option value="0basic">0basic</option>
<option value="1exampleTempProject">1exampleTempProject</option>
<option value="2guitest">2guitest</option></select>

The options without numbers come from the initial callback, all others are created at the update callback. Where the undefined come from: no idea, but the are created in the update.