add javascript binding and file picker for web

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,
+});