help for design application

[Alessio Mochi]

I would like port my opengl application on web with emscripten.

It's possible use a css web gui with emscripten and to do the opengl rendering is in the c++ side? I have seen some examples and that there is an html5 library but I don't understand how I can capture events like html button clicked and connect this event to the main loop in the c ++ side.

Thanks in advance

[Floh]

Yes, that's essentially what I've done here:

https://floooh.github.io/virtualkc/

The emulator is written in C++ and the emulator framebuffer is rendered via OpenGL calls through emscripten's GL-to-WebGL wrapper.

The buttons on the left border are done via regular handwritten HTML5+CSS, and there's also file drag'n'drop implemented in Javascript via the HTML5 drag'n'drop API. The C++ emulator code exposes a few C functions to the Javascript side to "remote-control" the C++ side from the JS side.

For instance: you can open the browser's devtools JS console and type "yakc_toggle_crt()", this is a C function which is made visible to JS via EMSCRIPTEN_KEEPALIVE, and which toggles the CRT shader effect on and off (all implemented on the C/C++ side), and the HTML5 "CRT" button in the bottom calls this function in its onclick handler.

The starting points in the emscripten docs for this type of stuff are:

- EMSCRIPTEN_KEEPALIVE (make a C function visible from the Javascript side)

- EM_JS and EM_ASM ("magic" C macros to embed Javascript code into C code)

- https://emscripten.org/docs/porting/connecting_cpp_and_javascript/Interacting-with-code.html

- emscripten also has C wrapper functions around some (but not all) HTML5 APIs (for getting input events etc...): https://emscripten.org/docs/api_reference/html5.h.html

...but in general, all of this is also possible to do yourself via EMSCRIPTEN_KEEPALIVE and EM_JS, the emscripten-provided functions just also handle a lot more edge cases. But understanding the low-level "do-it-yourself" approach is important for HTML5 APIs that are not covered by emscripten (for instance drag'n'drop).

Cheers,

-Floh.

[Floh]

PS: if you're just looking for a quick way to render *any* sort of UI in your WebGL canvas and don't want to mess too much with web technologies, Dear ImGui works perfectly fine via emscripten (https://github.com/ocornut/imgui).

For instance the debugging windows in my newer emulators are done with Dear ImGui:

https://floooh.github.io/tiny8bit/cpc-ui.html

...as well as the *entire* rendering here:

https://floooh.github.io/tiny8bit/lc80.html

...and in this demo, the UI is rendered with Dear ImGui while the chip visualization is rendered directly through WebGL (albeit wrapped via sokol_gfx.h so that it also works as native cross-platform code on top of D3D11 and Metal https://github.com/floooh/sokol)

https://floooh.github.io/visual6502remix/

Dear ImGui lets you more quickly bang out user interfaces, but they are sort-of locked away in the WebGL canvas, while doing the UI in HTML+CSS allows to create more "robust" traditional browser UIs. Both have different trade-offs.