omar/panopainter
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add javascript binding and file picker for web

Browse Source
This commit is contained in:
Omar
2019-10-08 23:16:04 +02:00
parent f2a73a905d
commit a669d1313b
7 changed files with 228 additions and 135 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
data/layout.xml
View File

@@ -96,7 +96,7 @@
<text text="Browse" grow="1" margin="0 0 0 5"/> <text text="Browse" grow="1" margin="0 0 0 5"/>
<text text="Ctrl-Shift-O" color=".4" justify="flex-end" margin="0 10 0 10"/> <text text="Ctrl-Shift-O" color=".4" justify="flex-end" margin="0 10 0 10"/>
</button-custom> </button-custom>
<button-custom id="file-open" os="osx,win" height="40" align="center" color=".2" pad="0 0 0 10" dir="row"> <button-custom id="file-open" os="osx,win,web" height="40" align="center" color=".2" pad="0 0 0 10" dir="row">
<icon icon="image" width="20"/> <icon icon="image" width="20"/>
<text text="Open Path" grow="1" margin="0 0 0 5"/> <text text="Open Path" grow="1" margin="0 0 0 5"/>
<text text="Ctrl-O" color=".4" justify="flex-end" margin="0 10 0 10"/> <text text="Ctrl-O" color=".4" justify="flex-end" margin="0 10 0 10"/>

12
src/app.cpp
View File

@@ -26,6 +26,8 @@ void destroy_window();
#elif __LINUX__ #elif __LINUX__
std::string linux_home_path(); std::string linux_home_path();
int mkpath(const std::string& dir, mode_t mode = DEFFILEMODE); int mkpath(const std::string& dir, mode_t mode = DEFFILEMODE);
#elif __WEB__
#include <unistd.h>
#endif #endif
App* App::I = nullptr; // singleton App* App::I = nullptr; // singleton
@@ -52,7 +54,7 @@ void App::create()
void App::open_document(std::string path) void App::open_document(std::string path)
{ {
std::regex r(R"((.*)[\\/]([^\\/]+)\.(\w+)$)"); std::regex r(R"((.*)[\\/]?([^\\/]+)\.(\w+)$)");
std::smatch m; std::smatch m;
if (!std::regex_search(path, m, r)) if (!std::regex_search(path, m, r))
return; return;
@@ -236,6 +238,14 @@ void App::initLog()
mkpath(data_path + "/patterns/thumbs"); mkpath(data_path + "/patterns/thumbs");
mkpath(data_path + "/settings"); mkpath(data_path + "/settings");
mkpath(data_path + "/frames"); mkpath(data_path + "/frames");
#elif __WEB__
data_path = "/";
mkdir("/brushes", 0777);
mkdir("/brushes/thumbs", 0777);
mkdir("/patterns", 0777);
mkdir("/patterns/thumbs", 0777);
mkdir("/settings", 0777);
mkdir("/frames", 0777);
#endif #endif
// TODO: save this path somewhere in the settings, don't overwrite every start // TODO: save this path somewhere in the settings, don't overwrite every start

11
src/app_events.cpp
View File

@@ -15,8 +15,10 @@ void win32_show_cursor(bool visible);
bool win32_clipboard_set_text(const std::string & s); bool win32_clipboard_set_text(const std::string & s);
std::string win32_clipboard_get_text(); std::string win32_clipboard_get_text();
#elif __APPLE__ #elif __APPLE__
#else #elif __LINUX__
#include <tinyfiledialogs.h> #include <tinyfiledialogs.h>
#elif __WEB__
void webgl_pick_file(std::function<void(std::string)> callback);
#endif #endif
@@ -149,6 +151,11 @@ void App::pick_image(std::function<void(std::string path)> callback)
std::string path = win32_open_file("Image Files (*.jpg, *.png)\0*.jpg;*.png"); std::string path = win32_open_file("Image Files (*.jpg, *.png)\0*.jpg;*.png");
if (!path.empty()) if (!path.empty())
callback(path); callback(path);
#elif __LINUX__
if (auto p = tinyfd_openFileDialog("Open File", "", 0, nullptr, nullptr, false))
callback(p);
#elif __WEB__
webgl_pick_file(callback);
#endif #endif
} }
@@ -196,6 +203,8 @@ void App::pick_file(std::vector<std::string> types, std::function<void (std::str
#elif __LINUX__ #elif __LINUX__
if (auto p = tinyfd_openFileDialog("Open File", "", 0, nullptr, nullptr, false)) if (auto p = tinyfd_openFileDialog("Open File", "", 0, nullptr, nullptr, false))
callback(p); callback(p);
#elif __WEB__
webgl_pick_file(callback);
#endif #endif
} }

10
src/node_panel_brush.cpp
View File

@@ -80,7 +80,7 @@ void NodePanelBrush::init()
m_btn_add->on_click = [this](Node*) { m_btn_add->on_click = [this](Node*) {
App::I->pick_file({ "JPG", "PNG" }, [this](std::string path) { App::I->pick_file({ "JPG", "PNG" }, [this](std::string path) {
std::string name, base, ext; std::string name, base, ext;
std::regex r(R"((.*)[\\/]([^\\/]+)\.(\w+)$)"); std::regex r(R"((.*)[\\/]?([^\\/]+)\.(\w+)$)");
std::smatch m; std::smatch m;
if (!std::regex_search(path, m, r)) if (!std::regex_search(path, m, r))
return; return;
@@ -546,7 +546,7 @@ void NodePanelBrushPreset::init()
}); });
}; };
m_btn_download = find<NodeButton>("download"); m_btn_download = find<NodeButton>("download");
m_btn_download->on_click = [] (Node*) { m_btn_download->on_click = [this] (Node*) {
App::I->dialog_preset_download(); App::I->dialog_preset_download();
}; };
m_notification = find("notification"); m_notification = find("notification");
@@ -701,7 +701,7 @@ bool NodePanelBrushPreset::export_ppbr(const std::string& path_in, const PPBRInf
path += ".ppbr"; path += ".ppbr";
LOG("export ppbr to: %s", path.c_str()); LOG("export ppbr to: %s", path.c_str());
std::regex r(R"((.*)[\\/]([^\\/]+)\.(\w+)?$)"); std::regex r(R"((.*)[\\/]?([^\\/]+)\.(\w+)?$)");
std::smatch m; std::smatch m;
if (!std::regex_search(path, m, r)) if (!std::regex_search(path, m, r))
return false; return false;
@@ -965,7 +965,7 @@ bool NodePanelBrushPreset::import_abr(const std::string& path)
LOG("ABR detected"); LOG("ABR detected");
std::string name, base, ext; std::string name, base, ext;
std::regex r(R"((.*)[\\/]([^\\/]+)\.(\w+)$)"); std::regex r(R"((.*)[\\/]?([^\\/]+)\.(\w+)$)");
std::smatch m; std::smatch m;
if (!std::regex_search(path, m, r)) if (!std::regex_search(path, m, r))
return false; return false;
@@ -1035,7 +1035,7 @@ bool NodePanelBrushPreset::import_abr(const std::string& path)
bool NodePanelBrushPreset::import_brush(const std::string& path) bool NodePanelBrushPreset::import_brush(const std::string& path)
{ {
std::regex r(R"((.*)[\\/]([^\\/]+)\.(\w+)$)"); std::regex r(R"((.*)[\\/]?([^\\/]+)\.(\w+)$)");
std::smatch m; std::smatch m;
if (!std::regex_search(path, m, r)) if (!std::regex_search(path, m, r))
return false; return false;

242
webgl/CMakeLists.txt
View File

@@ -1,136 +1,130 @@
cmake_minimum_required(VERSION 3.4.1) cmake_minimum_required(VERSION 3.4.1)
project(panopainter) 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 add_executable(panopainter
src/main.cpp src/main.cpp
../libs/yoga/yoga/log.cpp ../libs/yoga/yoga/log.cpp
../libs/yoga/yoga/Utils.cpp ../libs/yoga/yoga/Utils.cpp
../libs/yoga/yoga/YGConfig.cpp ../libs/yoga/yoga/YGConfig.cpp
../libs/yoga/yoga/YGEnums.cpp ../libs/yoga/yoga/YGEnums.cpp
../libs/yoga/yoga/YGLayout.cpp ../libs/yoga/yoga/YGLayout.cpp
../libs/yoga/yoga/YGMarker.cpp ../libs/yoga/yoga/YGMarker.cpp
../libs/yoga/yoga/YGNode.cpp ../libs/yoga/yoga/YGNode.cpp
../libs/yoga/yoga/YGNodePrint.cpp ../libs/yoga/yoga/YGNodePrint.cpp
../libs/yoga/yoga/YGStyle.cpp ../libs/yoga/yoga/YGStyle.cpp
../libs/yoga/yoga/YGValue.cpp ../libs/yoga/yoga/YGValue.cpp
../libs/yoga/yoga/Yoga.cpp ../libs/yoga/yoga/Yoga.cpp
../libs/tinyxml2/tinyxml2.cpp ../libs/tinyxml2/tinyxml2.cpp
../libs/jpeg/jpgd.cpp ../libs/jpeg/jpgd.cpp
../libs/jpeg/jpge.cpp ../libs/jpeg/jpge.cpp
../libs/poly2tri/poly2tri/common/shapes.cc ../libs/poly2tri/poly2tri/common/shapes.cc
../libs/poly2tri/poly2tri/sweep/advancing_front.cc ../libs/poly2tri/poly2tri/sweep/advancing_front.cc
../libs/poly2tri/poly2tri/sweep/cdt.cc ../libs/poly2tri/poly2tri/sweep/cdt.cc
../libs/poly2tri/poly2tri/sweep/sweep_context.cc ../libs/poly2tri/poly2tri/sweep/sweep_context.cc
../libs/poly2tri/poly2tri/sweep/sweep.cc ../libs/poly2tri/poly2tri/sweep/sweep.cc
../libs/fmt/src/format.cc ../libs/fmt/src/format.cc
../src/pch.cpp ../src/pch.cpp
../src/util.cpp ../src/util.cpp
../src/rtt.cpp ../src/rtt.cpp
../src/bezier.cpp ../src/bezier.cpp
../src/asset.cpp ../src/asset.cpp
../src/image.cpp ../src/image.cpp
../src/texture.cpp ../src/texture.cpp
../src/font.cpp ../src/font.cpp
../src/shader.cpp ../src/shader.cpp
../src/shape.cpp ../src/shape.cpp
../src/app.cpp ../src/app.cpp
../src/app_cloud.cpp ../src/app_cloud.cpp
../src/app_dialogs.cpp ../src/app_dialogs.cpp
../src/app_events.cpp ../src/app_events.cpp
../src/app_layout.cpp ../src/app_layout.cpp
../src/app_shaders.cpp ../src/app_shaders.cpp
../src/app_vr.cpp ../src/app_vr.cpp
../src/brush.cpp ../src/brush.cpp
../src/canvas.cpp ../src/canvas.cpp
../src/canvas_layer.cpp ../src/canvas_layer.cpp
../src/canvas_actions.cpp ../src/canvas_actions.cpp
../src/canvas_modes.cpp ../src/canvas_modes.cpp
../src/log.cpp ../src/log.cpp
../src/action.cpp ../src/action.cpp
../src/layout.cpp ../src/layout.cpp
../src/version.cpp ../src/version.cpp
../src/node.cpp ../src/node.cpp
../src/node_about.cpp ../src/node_about.cpp
../src/node_border.cpp ../src/node_border.cpp
../src/node_button.cpp ../src/node_button.cpp
../src/node_button_custom.cpp ../src/node_button_custom.cpp
../src/node_canvas.cpp ../src/node_canvas.cpp
../src/node_checkbox.cpp ../src/node_checkbox.cpp
../src/node_color_quad.cpp ../src/node_color_quad.cpp
../src/node_colorwheel.cpp ../src/node_colorwheel.cpp
../src/node_combobox.cpp ../src/node_combobox.cpp
../src/node_changelog.cpp ../src/node_changelog.cpp
../src/node_dialog_browse.cpp ../src/node_dialog_browse.cpp
../src/node_dialog_cloud.cpp ../src/node_dialog_cloud.cpp
../src/node_dialog_open.cpp ../src/node_dialog_open.cpp
../src/node_dialog_picker.cpp ../src/node_dialog_picker.cpp
../src/node_dialog_layer_rename.cpp ../src/node_dialog_layer_rename.cpp
../src/node_dialog_resize.cpp ../src/node_dialog_resize.cpp
../src/node_icon.cpp ../src/node_icon.cpp
../src/node_image.cpp ../src/node_image.cpp
../src/node_image_texture.cpp ../src/node_image_texture.cpp
../src/node_message_box.cpp ../src/node_message_box.cpp
../src/node_panel_brush.cpp ../src/node_panel_brush.cpp
../src/node_panel_color.cpp ../src/node_panel_color.cpp
../src/node_panel_grid.cpp ../src/node_panel_grid.cpp
../src/node_panel_floating.cpp ../src/node_panel_floating.cpp
../src/node_panel_layer.cpp ../src/node_panel_layer.cpp
../src/node_panel_stroke.cpp ../src/node_panel_stroke.cpp
../src/node_panel_quick.cpp ../src/node_panel_quick.cpp
../src/node_popup_menu.cpp ../src/node_popup_menu.cpp
../src/node_progress_bar.cpp ../src/node_progress_bar.cpp
../src/node_settings.cpp ../src/node_settings.cpp
../src/node_slider.cpp ../src/node_slider.cpp
../src/node_stroke_preview.cpp ../src/node_stroke_preview.cpp
../src/node_text.cpp ../src/node_text.cpp
../src/node_text_input.cpp ../src/node_text_input.cpp
../src/node_tool_bucket.cpp ../src/node_tool_bucket.cpp
../src/node_usermanual.cpp ../src/node_usermanual.cpp
../src/node_viewport.cpp ../src/node_viewport.cpp
../src/node_scroll.cpp ../src/node_scroll.cpp
../src/abr.cpp ../src/abr.cpp
../src/binary_stream.cpp ../src/binary_stream.cpp
../src/serializer.cpp ../src/serializer.cpp
../src/settings.cpp ../src/settings.cpp
../src/node_input_box.cpp ../src/node_input_box.cpp
../src/node_dialog_export_ppbr.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 target_include_directories(panopainter PRIVATE
src src
../src ../src
../libs/glm ../libs/glm
../libs/tinyxml2 ../libs/tinyxml2
../libs/yoga ../libs/yoga
../libs/stb ../libs/stb
../libs/jpeg ../libs/jpeg
../libs/poly2tri/poly2tri ../libs/poly2tri/poly2tri
../libs/base64 ../libs/base64
../libs/sqlite3 ../libs/sqlite3
../libs/nanort ../libs/nanort
../libs/hash-library ../libs/hash-library
../libs/fmt/include ../libs/fmt/include
../libs/glad/include ../libs/glad/include
../libs/tinyfiledialogs ../libs/tinyfiledialogs
) )

58
webgl/src/main.cpp
View File

@@ -1,16 +1,68 @@
#include <pch.h> #include <pch.h>
#include <stdio.h> #include <stdio.h>
#include <emscripten.h> #include <emscripten.h>
#include <emscripten/bind.h>
#include <thread> #include <thread>
#include <chrono> #include <chrono>
#include <app.h> #include <app.h>
#include <fstream> #include <fstream>
using namespace emscripten;
App app; App app;
GLFWwindow* wnd; GLFWwindow* wnd;
float theta = 0; float theta = 0;
glm::vec2 g_cursor_pos; 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() void main_loop()
{ {
app.render_thread_tick(); app.render_thread_tick();
@@ -30,7 +82,7 @@ int main()
{ {
if (glfwInit() != GL_TRUE) if (glfwInit() != GL_TRUE)
printf("Failed to init GLFW"); printf("Failed to init GLFW");
wnd = glfwCreateWindow(800, 600, "hello", nullptr, nullptr); wnd = glfwCreateWindow(1024, 768, "PanoPainter", nullptr, nullptr);
glfwMakeContextCurrent(wnd); glfwMakeContextCurrent(wnd);
glfwSetCursorPosCallback(wnd, [](GLFWwindow* wnd, double x, double y){ glfwSetCursorPosCallback(wnd, [](GLFWwindow* wnd, double x, double y){
@@ -72,8 +124,8 @@ int main()
App::I = &app; App::I = &app;
app.initLog(); app.initLog();
app.create(); app.create();
app.width = 800; app.width = 1024;
app.height = 600; app.height = 768;
app.glfw_window = wnd; app.glfw_window = wnd;
// app.render_thread_tick(); // app.render_thread_tick();

28
webgl/src/mylib.js Normal file
View File

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