EM_ASM Interacting with code

emscripten
#1

finally i had some success regarding interacting between c++ and java script. i can send and receive numbers with EM_ASM. i still wonder if (and how) it is possible to do that with strings, arrays or even audio and video files…

#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;
    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){

}


  here is a test:

http://emasm.handmadeproductions.de/

1 Like
#2

he @Jona, thanks for sharing this code.
I am just starting to test emscripten and i see things goes different here…
what things do you feel are being messy/different?
Did you made more testings, general tips or links to show?

#3

hey @moebiussurfing i answered in the other thread about the differences. There are mainly some input/output things that work different. Only key and mouse events seem to work the standard way. But perhaps I am wrong. I do not think it is messy, but I have problems with some things (mentioned above) that are easy with the native app. Here is an example from the forum for saving and image that I do not really understand: I want to save image would be happy to see more examples and learn. And, like I asked in another thread, it would be really great to use ofxMidi together with webMidi, i do not know if it is possible somehow. But you could easily control the values from my example with webMidi and a midi controller…

I made all examples except this with Ofelia(because I do not now how to integrate EM_ASM into Ofelia - actually what I want to do, but I am not sure if I am able to): https://github.com/cuinjune/Ofelia

http://puredata.handmadeproductions.de/
http://slitscan.handmadeproductions.de/
http://gles.handmadeproductions.de/ (change shader effect with x / y)

And here is an Enzien Heavy example that uses webMidi (without Open Frameworks and Emscripten just to show the possibilities of webMidi): https://libpd3.handmadeproductions.de/

1 Like
#4

thanks @Jona,

and why do you think it might be worth the effort of port some OF app to web browser besides to use js/webgl/threejs… directly?
I ask because I have some OF tools that I can remake from scratch and learn js/three… in case is too hard to port.

What are the benefits or better areas to worth to use OF with emscripten?

#5

It depends. With Ofelia Emscripten I can use Pure Data together with Open Frameworks in the browser.
And share patches with people that do not use those programs.
Some things are certainly smaller and more efficient with the languages you mentioned directly (you could recreate my EM_ASM example with java script alone easily and it would be much smaller).
I just got a bit into Java Script because of Emscripten, so I am quite new to it and do not now everything that is possible.
Here is an example that uses js, threejs and webgl, just put some technologies together without really understanding them: https://webmidi.handmadeproductions.de/ The examples with webMidi do only work with Chrome at the moment.
Would be interested in other opinions too.

1 Like
#6

I managed to include emscripten_run_script() into Ofelia and would like to know how to do that with EM_ASM. I had to bind emscripten_run_script() to Lua for that. Here are the steps in detail: https://forum.pdpatchrepo.info/topic/12392/sending-receiving-variables-with-emscripten-ofelia/5
I ask here again, because I think it is more an ofxLua question than a Pure Data / Ofelia question.

Basically I added:

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

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

And call a function like:

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

Used without Ofelia in Open Frameworks the function looks like:

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

My question is how to bind EM_ASM, EM_ASM_ and EM_ASM_INT to Lua (the same way as shown above). I tried it, but I get the error message:

SyntaxError: Unexpected token (1832:47)
var ASM_CONSTS = [function() { const_cast<char*>(str.c_str()) }];

Here are simple examples for the macros not bound to Lua:

EM_ASM(console.log('EM_ASM macro calling'));

EM_ASM_({
console.log('EM_ASM_ macro received the value: ' + $0);
 }, 10);

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

I think I found a solution (not sure if it is the best). Basically I had to make classes from the macros, and to pass strings to java script I had to use

pdEM_ASM(){};
    void consoleLogString(std::string str)
    {    
        EM_ASM(console.log("String: " + UTF8ToString($0)), str.c_str());
    }

because it is only possible to pass numbers to EM_ASM.
Here is an Example: http://gles2.handmadeproductions.de/