add javascript binding and file picker for web

webgl/CMakeLists.txt

@@ -1,136 +1,130 @@
 cmake_minimum_required(VERSION 3.4.1)
 project(panopainter)
-set(CMAKE_CXX_FLAGS "${CMAKE_CXX_FLAGS} \
-    -std=c++14 -O2                      \
-    -s USE_GLFW=3                       \
-    -s USE_WEBGL2=1                     \
-    -s FULL_ES3=1                       \
-    -s USE_PTHREADS=1                   \
-    -s ASSERTIONS=2                     \
-    -s TOTAL_MEMORY=64Mb                \
-    -s ALLOW_MEMORY_GROWTH=1            \
-    -s WASM_MEM_MAX=512MB               \
-")
 add_executable(panopainter 
     src/main.cpp
-	../libs/yoga/yoga/log.cpp
-	../libs/yoga/yoga/Utils.cpp
-	../libs/yoga/yoga/YGConfig.cpp
-	../libs/yoga/yoga/YGEnums.cpp
-	../libs/yoga/yoga/YGLayout.cpp
-	../libs/yoga/yoga/YGMarker.cpp
-	../libs/yoga/yoga/YGNode.cpp
-	../libs/yoga/yoga/YGNodePrint.cpp
-	../libs/yoga/yoga/YGStyle.cpp
-	../libs/yoga/yoga/YGValue.cpp
-	../libs/yoga/yoga/Yoga.cpp
-	../libs/tinyxml2/tinyxml2.cpp
-	../libs/jpeg/jpgd.cpp
-	../libs/jpeg/jpge.cpp
-	../libs/poly2tri/poly2tri/common/shapes.cc
-	../libs/poly2tri/poly2tri/sweep/advancing_front.cc
-	../libs/poly2tri/poly2tri/sweep/cdt.cc
-	../libs/poly2tri/poly2tri/sweep/sweep_context.cc
-	../libs/poly2tri/poly2tri/sweep/sweep.cc
-	../libs/fmt/src/format.cc
-	../src/pch.cpp
-	../src/util.cpp
-	../src/rtt.cpp
-	../src/bezier.cpp
-	../src/asset.cpp
-	../src/image.cpp
-	../src/texture.cpp
-	../src/font.cpp
-	../src/shader.cpp
-	../src/shape.cpp
-	../src/app.cpp
-	../src/app_cloud.cpp
-	../src/app_dialogs.cpp
-	../src/app_events.cpp
-	../src/app_layout.cpp
-	../src/app_shaders.cpp
+    ../libs/yoga/yoga/log.cpp
+    ../libs/yoga/yoga/Utils.cpp
+    ../libs/yoga/yoga/YGConfig.cpp
+    ../libs/yoga/yoga/YGEnums.cpp
+    ../libs/yoga/yoga/YGLayout.cpp
+    ../libs/yoga/yoga/YGMarker.cpp
+    ../libs/yoga/yoga/YGNode.cpp
+    ../libs/yoga/yoga/YGNodePrint.cpp
+    ../libs/yoga/yoga/YGStyle.cpp
+    ../libs/yoga/yoga/YGValue.cpp
+    ../libs/yoga/yoga/Yoga.cpp
+    ../libs/tinyxml2/tinyxml2.cpp
+    ../libs/jpeg/jpgd.cpp
+    ../libs/jpeg/jpge.cpp
+    ../libs/poly2tri/poly2tri/common/shapes.cc
+    ../libs/poly2tri/poly2tri/sweep/advancing_front.cc
+    ../libs/poly2tri/poly2tri/sweep/cdt.cc
+    ../libs/poly2tri/poly2tri/sweep/sweep_context.cc
+    ../libs/poly2tri/poly2tri/sweep/sweep.cc
+    ../libs/fmt/src/format.cc
+    ../src/pch.cpp
+    ../src/util.cpp
+    ../src/rtt.cpp
+    ../src/bezier.cpp
+    ../src/asset.cpp
+    ../src/image.cpp
+    ../src/texture.cpp
+    ../src/font.cpp
+    ../src/shader.cpp
+    ../src/shape.cpp
+    ../src/app.cpp
+    ../src/app_cloud.cpp
+    ../src/app_dialogs.cpp
+    ../src/app_events.cpp
+    ../src/app_layout.cpp
+    ../src/app_shaders.cpp
     ../src/app_vr.cpp
-	../src/brush.cpp
-	../src/canvas.cpp
-	../src/canvas_layer.cpp
-	../src/canvas_actions.cpp
-	../src/canvas_modes.cpp
-	../src/log.cpp
-	../src/action.cpp
-	../src/layout.cpp
-	../src/version.cpp
-	../src/node.cpp
-	../src/node_about.cpp
-	../src/node_border.cpp
-	../src/node_button.cpp
-	../src/node_button_custom.cpp
-	../src/node_canvas.cpp
-	../src/node_checkbox.cpp
-	../src/node_color_quad.cpp
-	../src/node_colorwheel.cpp
-	../src/node_combobox.cpp
-	../src/node_changelog.cpp
-	../src/node_dialog_browse.cpp
-	../src/node_dialog_cloud.cpp
-	../src/node_dialog_open.cpp
-	../src/node_dialog_picker.cpp
-	../src/node_dialog_layer_rename.cpp
-	../src/node_dialog_resize.cpp
-	../src/node_icon.cpp
-	../src/node_image.cpp
-	../src/node_image_texture.cpp
-	../src/node_message_box.cpp
-	../src/node_panel_brush.cpp
-	../src/node_panel_color.cpp
-	../src/node_panel_grid.cpp
+    ../src/brush.cpp
+    ../src/canvas.cpp
+    ../src/canvas_layer.cpp
+    ../src/canvas_actions.cpp
+    ../src/canvas_modes.cpp
+    ../src/log.cpp
+    ../src/action.cpp
+    ../src/layout.cpp
+    ../src/version.cpp
+    ../src/node.cpp
+    ../src/node_about.cpp
+    ../src/node_border.cpp
+    ../src/node_button.cpp
+    ../src/node_button_custom.cpp
+    ../src/node_canvas.cpp
+    ../src/node_checkbox.cpp
+    ../src/node_color_quad.cpp
+    ../src/node_colorwheel.cpp
+    ../src/node_combobox.cpp
+    ../src/node_changelog.cpp
+    ../src/node_dialog_browse.cpp
+    ../src/node_dialog_cloud.cpp
+    ../src/node_dialog_open.cpp
+    ../src/node_dialog_picker.cpp
+    ../src/node_dialog_layer_rename.cpp
+    ../src/node_dialog_resize.cpp
+    ../src/node_icon.cpp
+    ../src/node_image.cpp
+    ../src/node_image_texture.cpp
+    ../src/node_message_box.cpp
+    ../src/node_panel_brush.cpp
+    ../src/node_panel_color.cpp
+    ../src/node_panel_grid.cpp
     ../src/node_panel_floating.cpp
-	../src/node_panel_layer.cpp
-	../src/node_panel_stroke.cpp
+    ../src/node_panel_layer.cpp
+    ../src/node_panel_stroke.cpp
     ../src/node_panel_quick.cpp
-	../src/node_popup_menu.cpp
-	../src/node_progress_bar.cpp
-	../src/node_settings.cpp
-	../src/node_slider.cpp
-	../src/node_stroke_preview.cpp
-	../src/node_text.cpp
-	../src/node_text_input.cpp
+    ../src/node_popup_menu.cpp
+    ../src/node_progress_bar.cpp
+    ../src/node_settings.cpp
+    ../src/node_slider.cpp
+    ../src/node_stroke_preview.cpp
+    ../src/node_text.cpp
+    ../src/node_text_input.cpp
     ../src/node_tool_bucket.cpp
-	../src/node_usermanual.cpp
-	../src/node_viewport.cpp
-	../src/node_scroll.cpp
-	../src/abr.cpp
-	../src/binary_stream.cpp
-	../src/serializer.cpp
-	../src/settings.cpp
-	../src/node_input_box.cpp
-	../src/node_dialog_export_ppbr.cpp
+    ../src/node_usermanual.cpp
+    ../src/node_viewport.cpp
+    ../src/node_scroll.cpp
+    ../src/abr.cpp
+    ../src/binary_stream.cpp
+    ../src/serializer.cpp
+    ../src/settings.cpp
+    ../src/node_input_box.cpp
+    ../src/node_dialog_export_ppbr.cpp
+)
+target_compile_options(panopainter PRIVATE -std=c++14 -O2)
+set_target_properties(panopainter PROPERTIES 
+    SUFFIX ".html"
+    RUNTIME_OUTPUT_DIRECTORY "${CMAKE_BINARY_DIR}/html"
+    LINK_FLAGS "\
+        -s USE_GLFW=3\
+        -s USE_WEBGL2=1\
+        -s FULL_ES3=1\
+        -s USE_PTHREADS=1\
+        -s ASSERTIONS=2\
+        -s TOTAL_MEMORY=256Mb\
+        -s ALLOW_MEMORY_GROWTH=1\
+        -s WASM_MEM_MAX=512MB\
+        --embed-file data\
+        --js-library ../src/mylib.js\
+        --bind"
 )
-set_target_properties(panopainter PROPERTIES SUFFIX ".html")
-set_target_properties(panopainter PROPERTIES LINK_FLAGS "\
-    --embed-file data                   \
-    -s USE_GLFW=3                       \
-    -s USE_WEBGL2=1                     \
-    -s FULL_ES3=1                       \
-    -s USE_PTHREADS=1                   \
-    -s ASSERTIONS=2                     \
-    -s TOTAL_MEMORY=64Mb                \
-    -s ALLOW_MEMORY_GROWTH=1            \
-    -s WASM_MEM_MAX=512MB               \
-")
 target_include_directories(panopainter PRIVATE
     src
-	../src
-	../libs/glm
-	../libs/tinyxml2
-	../libs/yoga
-	../libs/stb
-	../libs/jpeg
-	../libs/poly2tri/poly2tri
-	../libs/base64
-	../libs/sqlite3
-	../libs/nanort
-	../libs/hash-library
-	../libs/fmt/include
-	../libs/glad/include
-	../libs/tinyfiledialogs
+    ../src
+    ../libs/glm
+    ../libs/tinyxml2
+    ../libs/yoga
+    ../libs/stb
+    ../libs/jpeg
+    ../libs/poly2tri/poly2tri
+    ../libs/base64
+    ../libs/sqlite3
+    ../libs/nanort
+    ../libs/hash-library
+    ../libs/fmt/include
+    ../libs/glad/include
+    ../libs/tinyfiledialogs
 )

webgl/src/main.cpp

@@ -1,16 +1,68 @@
 #include <pch.h>
 #include <stdio.h>
 #include <emscripten.h>
+#include <emscripten/bind.h>
 #include <thread>
 #include <chrono>
 #include <app.h>
 #include <fstream>
 
+using namespace emscripten;
+
 App app;
 GLFWwindow* wnd;
 float theta = 0;
 glm::vec2 g_cursor_pos;
 
+class TaskCallback
+{
+    std::function<void(std::string)> fn;
+public:
+    template<typename T> TaskCallback(T callback) : fn(callback) {}
+    void call(const std::string& tmp_file_path)
+    {
+        fn(tmp_file_path);
+    }
+    TaskCallback()
+    {
+        printf("callback created\n");
+    }
+    ~TaskCallback()
+    {
+        printf("callback destroyed\n");
+    }
+};
+
+void TaskCallback_call(uintptr_t tc, std::string tmp_file_path)
+{
+    auto x = reinterpret_cast<TaskCallback*>(tc);
+    x->call(tmp_file_path);
+}
+
+void TaskCallback_delete(uintptr_t tc)
+{
+    auto x = reinterpret_cast<TaskCallback*>(tc);
+    delete x;
+}
+
+EMSCRIPTEN_BINDINGS(TaskCallback_bind) {
+    class_<TaskCallback>("TaskCallback");
+    function("TaskCallback_call", &TaskCallback_call);
+    function("TaskCallback_delete", &TaskCallback_delete);
+}
+
+extern "C" {
+extern void js_pick_file(TaskCallback* tc);
+}
+
+void webgl_pick_file(std::function<void(std::string)> callback)
+{
+    js_pick_file(new TaskCallback([callback](std::string tmp_file_path){ 
+        printf("callback called: %s\n", tmp_file_path.c_str());
+        callback(tmp_file_path);
+    }));
+}
+
 void main_loop()
 {
     app.render_thread_tick();
@@ -30,7 +82,7 @@ int main()
 {
     if (glfwInit() != GL_TRUE)
         printf("Failed to init GLFW");
-    wnd = glfwCreateWindow(800, 600, "hello", nullptr, nullptr);
+    wnd = glfwCreateWindow(1024, 768, "PanoPainter", nullptr, nullptr);
     glfwMakeContextCurrent(wnd);
 
     glfwSetCursorPosCallback(wnd, [](GLFWwindow* wnd, double x, double y){
@@ -72,8 +124,8 @@ int main()
     App::I = &app;
     app.initLog();
     app.create();
-    app.width = 800;
-    app.height = 600;
+    app.width = 1024;
+    app.height = 768;
     app.glfw_window = wnd;
 
     // app.render_thread_tick();

webgl/src/mylib.js

@@ -0,0 +1,28 @@
+function js_pick_file(fn) {
+    var input = document.createElement('input');
+    input.type = 'file';
+    
+    input.onchange = function(e) { 
+      // getting a hold of the file reference
+      var file = e.target.files[0]; 
+  
+      // setting up the reader
+      var reader = new FileReader();
+      reader.readAsArrayBuffer(file);
+      //reader.readAsText(file,'UTF-8');
+      // here we tell the reader what to do when it's done reading...
+      reader.onload = function(readerEvent) {
+        console.log("reader.onload " + file.name);
+        var content = new Uint8Array(readerEvent.target.result); // this is the content!
+        console.log( content );
+        FS.writeFile(file.name, content);
+        Module.TaskCallback_call(fn, file.name);
+        Module.TaskCallback_delete(fn);
+      }
+    }
+    
+    input.click();
+}
+mergeInto(LibraryManager.library, {
+  js_pick_file: js_pick_file,
+});