Wasm again

[Mo_Al_]

Hello

I was able to get the PicoSDL driver to target wasm:

(small demo) http://mohammed-alyousef.com/fltk.html

The changes I had to do are attached in the patch. Some are quite intrusive, like adding the Fl_PicoSDL_Window_Driver as a friend class to Fl_Window.

Keyboards events aren't handled, it's missing the mapping between SDL and FLTK keys.

To build wasm fltk app:

- Install emscripten

- git clone https://github.com/fltk/fltk

- cd fltk

- git apply /path/to/wasm.patch

- emcmake cmake -Bbin -DFLTK_BUILD_TEST=OFF && cmake --build bin --parallel

- cp bin/libs/libfltk* $EMSDK/upstream/emscripten/cache/wasm/

- mkdir $EMSDK/upstream/emscripten/system/include/FL

- cp bin/FL/* $EMSDK/upstream/emscripten/system/include/FL/

- cp FL/* $EMSDK/upstream/emscripten/system/include/FL/

Now you can build with em++ or emcmake whatever.

The emscripten_set_main_loop_arg() needs to be called. The sample program is something like:

#include <FL/Fl.H>

#include <FL/Fl_Window.H>

#include <FL/Fl_Button.H>

#include <FL/Fl_Box.H>

#include <emscripten.h>

void main_loop(void *) {

    Fl::wait();

}

void cb(Fl_Widget *w, void *data) {

    ((Fl_Box*)data)->color(FL_RED);

    Fl::redraw();

}

int main() {

    auto win = new Fl_Window(600, 400);

    auto box = new Fl_Box(40, 40, 520, 220, "Hello from FLTK 1.4");

    box->box(FL_SHADOW_BOX);

    box->labelsize(16);

    auto but = new Fl_Button(260, 300, 80, 40, "Click me");

    win->end();

    win->show();

    but->callback(cb, box);

    emscripten_set_main_loop_arg(main_loop, NULL, 0, true);

}

Using em++, this can be built:

em++ -o fltk.html main.cpp -s WASM=1 -s USE_SDL=2 -s USE_FREETYPE=1 -lfltk --shell-file shell_minimal.html

[Mo_Al_]

updated patch

The previous didn't track the Fl_PicoSDL_Image_Surface_Driver.cxx

The generated .html file can be run using:

emrun fltk.html

Or through any server application.

Using cmake, you would have to pass " -s WASM=1 -s USE_SDL=2 -s USE_FREETYPE=1" as CMAKE_CXX_FLAGS and  "--shell-file shell_minimal.html" as CMAKE_EXE_LINKER_FLAGS. Then:

target_link_libraries(myapp PRIVATE fltk)

set_target_properties(myapp PROPERTIES SUFFIX .html)

[Daniel G.]

Hi,

did you try this aswell: https://github.com/ghaerr/microwindows

it can be used as drop in replacement for libX11 and understands many backends.

I used this for android some time ago, but there seems to be webasm support aswell.

BR

Giri

[Mo_Al_]

Hi

I was able to use microwindows (libNX11 and libnano-X) with older versions of fltk (pre 1.34), however with 1.4 the JS runtime throws an exception on some X11 stubs and function signature mismatch. 

This also needed some changes in the fltk/src/CMakeLists.txt (make passing the X11 driver sources the default instead of win32). Also changing the -lX11 in the options.cmake LDFLAGS to -lNX11.

Checking the faq in the microwindows repo, it says currently fltk doesn't run using emscripten.

https://github.com/ghaerr/microwindows/blob/c1c3595674a1e64d5e26ff4ef25a557c7452d546/doc/html/faq2.html#L353

[Daniel G.]

When I did my experiments i was using fltk-1.3.4-1 and fltk-1.3.4. Make sure to #undef XRANDR as described in the article shared by Ian MacArthur.

I am not sure if that FAQ is a trustworthy source of information. When I tried the android stuff it was horribly out of date (and it has not changed much since then).

[Daniel G.]

Hi,

FYI I just managed to get wasm to work with microwindows:  Adjust the signatures of some stubs by nwrkbiz · Pull Request #72 · ghaerr/microwindows (github.com)

What is the source version of your patch? May it be applied to the 1.3.8. version?

BR,
Giri

may64...@gmail.com schrieb am Donnerstag, 24. Dezember 2020 um 14:13:09 UTC+1:

[melcher....@googlemail.com]

This is very cool! I wish I wasn't so busy with core and fluid so I could get Pico to run again... . 

[Mo_Al_]

Hi
At the time it was done on 1.4, when the experimental drivers were still there. So that would make it revision: https://github.com/fltk/fltk/commit/b275ff07158e80d1744ddb2f6c51094a87cf079a