Git Product home page Git Product logo

fltk_wasm's Introduction

fltk_wasm demo

To build:

$ git clone https://github.com/MoAlyousef/fltk_wasm
$ cd fltk_wasm
$ git submodule update --init
$ cd fltk
$ git apply ../wasm.patch
$ cd ..
$ emcmake cmake -Bbin # run again if first one fails!
$ cmake --build bin --parallel 

emscripten_set_main_loop_arg() needs to be used to run the main loop:

#include <FL/Enumerations.H>
#include <FL/Fl.H>
#include <FL/Fl_Window.H>
#include <FL/Fl_Button.H>
#include <FL/Fl_Box.H>
#include <emscripten.h>
#include <time.h>

void main_loop(void *) {
    Fl::wait();
}

void cb(Fl_Widget *w, void *data) {
    auto box = (Fl_Box *)data;
    box->color((unsigned int)rand());
    box->redraw();
}

int main() {
    srand(time(0));
    auto win = new Fl_Window(600, 400);
    win->color(fl_rgb_color(240, 240, 240));
    auto box = new Fl_Box(40, 40, 520, 220, "Hello from FLTK 1.4");
    box->box(FL_SHADOW_BOX);
    box->labelsize(16);
    auto btn = new Fl_Button(260, 300, 80, 40, "Click me");
    btn->clear_visible_focus();
    btn->box(FL_FLAT_BOX);
    btn->labelcolor(FL_WHITE);
    btn->selection_color(fl_darker(fl_rgb_color(0x00, 0x78, 0xD7)));
    btn->color(fl_rgb_color(0x00, 0x78, 0xD7));
    win->end();
    win->show();
    btn->callback(cb, box);
    
    emscripten_set_main_loop_arg(main_loop, NULL, 0, true);
}

The resulting binary needs a server to be run, you can use emrun, python3 -m https.server ...etc.

The demo can be accessed here: https://moalyousef.github.io/fltk_wasm/

fltk_wasm's People

Contributors

moalyousef avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.