hello,

i still try to find a way to send and receive variables with emscripten ofelia for using webmidi.

in the meantime i tried the same with enzien heavy which uses emscripten too - it actually works (although i only managed to send/ receive one variable per send / receive @hv_param, but there seems to be a way to also use lists with __hv_notein / __hv_noteout for example - at least for midi values).

i initially thought naivly that i just need to connect ofxmidi to webmidi somehow, but perhaps the way heavy enzien sends / receives values is the way to go for emscripten ofelia too?
here are some methods for interacting with emscripten code: https://emscripten.org/docs/porting/connecting_cpp_and_javascript/Interacting-with-code.html

i think it would be really nice to get it working because then we perhaps would have something like js enzien heavy with all vanilla objects plus open frameworks graphics...

it seems that all the input / output methods except key and mouse events and print messages do not work with open frameworks emscripten.
i tried the midi objects, ofxOsc objects and netsend / netreceive.
and print, which somehow works, but the timing is not very accurate (the test sends midi notes to the outport): https://mtest.handmadeproductions.de
here a two other methods (besides heavy and webpd) to communicate between the pd and the browser,
but i think it does not help in the case of emscripten:
https://github.com/chr15m/pd-ws
https://github.com/colinbdclark/osc.js/

i managed to send and receive values (numbers) with EM_ASM between java script and c++
here is an example: http://emasm.handmadeproductions.de/
EMASM.zip
but it works only with regular open frameworks programs yet, not with ofelia...

#include "ofApp.h"
#include "emscripten.h"


//--------------------------------------------------------------
void ofApp::setup(){
    
}

//--------------------------------------------------------------
void ofApp::update(){

}

//--------------------------------------------------------------
void ofApp::draw(){

    EM_ASM_({
    console.log('I send: ' + $0);
    document.getElementById("display_time").textContent = Number($0).toFixed(2);
    }, ofGetElapsedTimef());

    int size = EM_ASM_INT({
    console.log('I received size: ' + document.getElementById("slider_size").value);
    return document.getElementById("slider_size").value;
    });

    int blue = EM_ASM_INT({
    console.log('I received blue: ' + document.getElementById("slider_blue").value);
    return document.getElementById("slider_blue").value;
    });

    int t = ofGetElapsedTimef();
    ofSetColor(t % 255, t % 255, blue);

    ofRectangle rect;
    rect.x = 10;
    rect.y = 10;
    rect.width = size * 1.344827586;
    rect.height = size;

    ofDrawRectangle(rect);

}

//--------------------------------------------------------------
void ofApp::keyPressed(int key){

}

//--------------------------------------------------------------
void ofApp::keyReleased(int key){

}

//--------------------------------------------------------------
void ofApp::mouseMoved(int x, int y ){

}

//--------------------------------------------------------------
void ofApp::mouseDragged(int x, int y, int button){

}

//--------------------------------------------------------------
void ofApp::mousePressed(int x, int y, int button){

}

//--------------------------------------------------------------
void ofApp::mouseReleased(int x, int y, int button){

}

//--------------------------------------------------------------
void ofApp::mouseEntered(int x, int y){

}

//--------------------------------------------------------------
void ofApp::mouseExited(int x, int y){

}

//--------------------------------------------------------------
void ofApp::windowResized(int w, int h){

}

//--------------------------------------------------------------
void ofApp::gotMessage(ofMessage msg){

}

//--------------------------------------------------------------
void ofApp::dragEvent(ofDragInfo dragInfo){

}

@Cuinjune i wonder if it is possible to access ofelia variables from ofApp.cpp,
or if it could be possible to use EM_ASM in an future update inside an ofelia script?
Or is it possible to already use EM_ASM inside an ofelia script and I just need to know how to use it with Lua?

Does anybody have an idea if and how it is possible to access the EM_ASM function with ofelia?
And if it is a simple task to implement it or very complicated and a lot of work.
I tried to bind the function to lua in ofelia, but without luck, a have to admit that I do not really know what I am doing...
I would appreciate any hints.

Actually I found a way to use emscripten_run_script() with Ofelia.
These are the steps:

I added

#include "/home/jonathan/emsdk/fastcomp/emscripten/system/include/emscripten/emscripten.h"

(not sure if I need the full path)
and

static void pdEmscriptenRunScript(std::string str)
{
    emscripten_run_script(const_cast<char*>(str.c_str()));
}

to ofxOfeliaPdBindings.h

Run updatePdBindings.sh in scripts/common

Add

{"ofEmscriptenRunScript",{{{4},{}},0}},

to ofxOfeliaMaps.cpp

and

mapper.addFunctionToRename({"pdEmscriptenRunScript", "ofEmscriptenRunScript"});

to updateMaps.cpp

4. Run updateMaps.sh from scripts/common

Thats it. Not sure if something is redundant, but it works.

5. Call the function from an Ofelia Lua script like:

ofEmscriptenRunScript(string.format("console.log('hello world')"))

in Open Frameworks it is written:

emscripten_run_script("console.log('hello world')");

or

ofEmscriptenRunScript(string.format("console.log(%f)", ofGetElapsedTimef()))

in Open Frameworks it is written:

emscripten_run_script("console.log($0)", ofGetElapsedTimef());

A bit easier to implement than EM_ASM, EM_ASM_ and EM_ASM_INT, but I think I am at the right track (hints are still very welcome)...

Below is a quote about the disadvantages of emscripten_run_script, because of that it would be great to bind EM_ASM to Lua instead:

"The emscripten_run_script series of macros will execute JavaScript code directly through the use of the JavaScript eval function. The eval function is a special JavaScript function that takes a string and turns it into JavaScript code. Using evals in JavaScript is generally frowned upon because it’s slower compared to alternatives but, more importantly because, if the string you pass in contains user supplied data, that data is being turned into code that can do anything and this poses a serious security risk. Another disadvantage of using the eval function is that, depending on the browser’s security settings, a browser may prevent eval from working altogether and your code may not work as expected.

It’s recommended that the emscripten_run_script series of macros never be used in production code and especially never with user supplied data. "
https://livebook.manning.com/book/webassembly-in-action/c-emscripten-macros/v-7/73

Finally it works, at least exchanging floats, integers and strings between Ofelia and Java Script with Emscripten.
For that I made a new Ofelia class/extension "ofEM_AMS".
It is not officialy included, but I am happy to share it.
Right now it is only possible to call Java Script functions from C++, I think about how to do it the other way around.
Would be nice if it becomes kind of a library for data interaction with Emscripten. Also it should be easy now to connect Ofelia to webMIDI.
Here is an example without MIDI, just controlling a shader with Java Script sliders: http://gles2.handmadeproductions.de/
The Java Script functions are called every draw cicle, so it is not very efficient.