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)

On Saturday, December 12, 2020 at 2:08:35 AM UTC+3 Mo_Al_ wrote:

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