From 11c26555a4edc314c1a57999f032b1be2dd5454c Mon Sep 17 00:00:00 2001
From: omigamedev <omarator@gmail.com>
Date: Sun, 5 Nov 2017 22:54:04 +0000
Subject: [PATCH] implement cloud browser

---
 .gitmodules                  |   3 +
 data/layout.xml              |  35 +++++-
 engine.vcxproj               |   7 +-
 engine.vcxproj.filters       |   9 ++
 engine/app.cpp               |   9 +-
 engine/app.h                 |   4 +
 engine/app_cloud.cpp         |  93 ++++++++++++++++
 engine/app_dialogs.cpp       |   1 +
 engine/app_layout.cpp        |  59 ++--------
 engine/image.h               |   6 +-
 engine/log.cpp               |   9 +-
 engine/node.cpp              |   3 +
 engine/node.h                |   2 +
 engine/node_dialog_cloud.cpp | 210 +++++++++++++++++++++++++++++++++++
 engine/node_dialog_cloud.h   |  47 ++++++++
 engine/pch.h                 |   1 +
 engine/util.cpp              |   7 ++
 engine/util.h                |   1 +
 libs/base64                  |   1 +
 19 files changed, 434 insertions(+), 73 deletions(-)
 create mode 100644 engine/app_cloud.cpp
 create mode 100644 engine/node_dialog_cloud.cpp
 create mode 100644 engine/node_dialog_cloud.h
 create mode 160000 libs/base64

diff --git a/.gitmodules b/.gitmodules
index 712ff4f..4613c87 100644
--- a/.gitmodules
+++ b/.gitmodules
@@ -22,3 +22,6 @@
 [submodule "libs/poly2tri"]
 	path = libs/poly2tri
 	url = https://github.com/greenm01/poly2tri
+[submodule "libs/base64"]
+	path = libs/base64
+	url = https://github.com/tkislan/base64
diff --git a/data/layout.xml b/data/layout.xml
index dbff9cd..cd76871 100644
--- a/data/layout.xml
+++ b/data/layout.xml
@@ -285,6 +285,33 @@
     </border>
   </layout>
 
+  <!-- Cloud Browse Dialog Popup -->
+
+  <layout id="dialog-cloud-item">
+    <border dir="col" color=".4 .4 .4 .8" pad="4" height="120" width="100" margin="1 1 1 1" grow="1" align="center">
+      <image-texture id="thumb-tex" width="100%" grow="1" height="1" aspect-ratio="1"/>
+      <text id="title" text="File Name" margin="5 0 0 0" font-face="arial" font-size="11"/>
+    </border>
+  </layout>
+  <layout id="dialog-cloud">
+    <border id="background" positioning="absolute" position="0 0" color=".4 .4 .4 .8" width="100%" height="100%" align="center" justify="center">
+      <border id="form" thickness="1" border-color=".2" pad="3" width="90%" height="90%" dir="col">
+        <border id="title-bar" width="100%" height="30" color=".2 .2 .2 .9" dir="row" align="center" justify="center">
+          <text text="Browse PanoPainter Projects" font-face="arial" font-size="11"></text>
+        </border>
+        <border width="100%" height="100" color="0 0 0 .9" pad="10" dir="row" grow="1">
+          <scroll id="files-list" dir="row" wrap="1" flood-events="1" grow="1" height="100%" margin="0 0 0 0" pad="0 20 0 0" color=".2 .2 .2 1">
+          </scroll>
+        </border>
+        <node id="footer" height="40" dir="row" align="flex-end" justify="flex-end" pad="10">
+          <node grow="1"/>
+          <button id="btn-ok" text="Open Project" width="100" height="30" margin="0 10 0 0"/>
+          <button id="btn-cancel" text="Cancel" width="60" height="30" pad="10"/>
+        </node>
+      </border>
+    </border>
+  </layout>
+
   <!-- Open Dialog Popup -->
 
   <layout id="dialog-open-item">
@@ -472,9 +499,13 @@
         <icon icon="disk" width="20"/>
         <text text="Export JPG" margin="0 0 0 5" font-face="arial" font-size="11"/>
       </button-custom>
-      <button-custom id="file-upload" text="Menu" height="40" align="center" color=".2" pad="0 0 0 10" dir="row">
+      <button-custom id="file-cloud-upload" text="Menu" height="40" align="center" color=".2" pad="0 0 0 10" dir="row">
         <icon icon="weather_clouds" width="20"/>
-        <text text="Upload to Cloud" margin="0 0 0 5" font-face="arial" font-size="11"/>
+        <text text="Cloud Upload All" margin="0 0 0 5" font-face="arial" font-size="11"/>
+      </button-custom>
+      <button-custom id="file-cloud-browse" text="Menu" height="40" align="center" color=".2" pad="0 0 0 10" dir="row">
+        <icon icon="weather_clouds" width="20"/>
+        <text text="Cloud Browse" margin="0 0 0 5" font-face="arial" font-size="11"/>
       </button-custom>
       <button-custom text="Menu" height="40" align="center" color=".2" pad="0 0 0 10" dir="row">
         <icon width="20"/>
diff --git a/engine.vcxproj b/engine.vcxproj
index 79859e0..e8f836f 100644
--- a/engine.vcxproj
+++ b/engine.vcxproj
@@ -76,7 +76,7 @@
   </PropertyGroup>
   <PropertyGroup Condition="'$(Configuration)|$(Platform)'=='Debug|x64'">
     <LinkIncremental>true</LinkIncremental>
-    <IncludePath>libs\glm;libs\glew-2.0.0\include;libs\stb;libs\tinyxml2;libs\yoga;libs\curl-win\include;libs\jpeg;libs\wacom;C:\Users\omar\Downloads\BugTrap-master\BugTrap-master\source\Client;libs\poly2tri\poly2tri;$(IncludePath)</IncludePath>
+    <IncludePath>libs\glm;libs\glew-2.0.0\include;libs\stb;libs\tinyxml2;libs\yoga;libs\curl-win\include;libs\jpeg;libs\wacom;C:\Users\omar\Downloads\BugTrap-master\BugTrap-master\source\Client;libs\poly2tri\poly2tri;libs\base64;$(IncludePath)</IncludePath>
     <LibraryPath>libs\curl-win\lib\dll-$(Configuration)-$(PlatformShortName);libs\glew-2.0.0\lib\Release\$(Platform);C:\Users\omar\Downloads\BugTrap-master\BugTrap-master\bin;$(LibraryPath)</LibraryPath>
   </PropertyGroup>
   <PropertyGroup Condition="'$(Configuration)|$(Platform)'=='Release|Win32'">
@@ -86,7 +86,7 @@
   </PropertyGroup>
   <PropertyGroup Condition="'$(Configuration)|$(Platform)'=='Release|x64'">
     <LinkIncremental>false</LinkIncremental>
-    <IncludePath>libs\glm;libs\glew-2.0.0\include;libs\stb;libs\tinyxml2;libs\yoga;libs\curl-win\include;libs\jpeg;libs\wacom;C:\Users\omar\Downloads\BugTrap-master\BugTrap-master\source\Client;libs\poly2tri\poly2tri;$(IncludePath)</IncludePath>
+    <IncludePath>libs\glm;libs\glew-2.0.0\include;libs\stb;libs\tinyxml2;libs\yoga;libs\curl-win\include;libs\jpeg;libs\wacom;C:\Users\omar\Downloads\BugTrap-master\BugTrap-master\source\Client;libs\poly2tri\poly2tri;libs\base64;$(IncludePath)</IncludePath>
     <LibraryPath>libs\curl-win\lib\dll-$(Configuration)-$(PlatformShortName);libs\glew-2.0.0\lib\Release\$(Platform);C:\Users\omar\Downloads\BugTrap-master\BugTrap-master\bin;$(LibraryPath)</LibraryPath>
   </PropertyGroup>
   <ItemDefinitionGroup Condition="'$(Configuration)|$(Platform)'=='Debug|Win32'">
@@ -170,6 +170,7 @@
   <ItemGroup>
     <ClCompile Include="engine\action.cpp" />
     <ClCompile Include="engine\app.cpp" />
+    <ClCompile Include="engine\app_cloud.cpp" />
     <ClCompile Include="engine\app_commands.cpp" />
     <ClCompile Include="engine\app_dialogs.cpp" />
     <ClCompile Include="engine\app_events.cpp" />
@@ -194,6 +195,7 @@
     <ClCompile Include="engine\node_checkbox.cpp" />
     <ClCompile Include="engine\node_color_quad.cpp" />
     <ClCompile Include="engine\node_dialog_browse.cpp" />
+    <ClCompile Include="engine\node_dialog_cloud.cpp" />
     <ClCompile Include="engine\node_dialog_layer_rename.cpp" />
     <ClCompile Include="engine\node_dialog_open.cpp" />
     <ClCompile Include="engine\node_icon.cpp" />
@@ -304,6 +306,7 @@
     <ClInclude Include="engine\node_checkbox.h" />
     <ClInclude Include="engine\node_color_quad.h" />
     <ClInclude Include="engine\node_dialog_browse.h" />
+    <ClInclude Include="engine\node_dialog_cloud.h" />
     <ClInclude Include="engine\node_dialog_layer_rename.h" />
     <ClInclude Include="engine\node_dialog_open.h" />
     <ClInclude Include="engine\node_icon.h" />
diff --git a/engine.vcxproj.filters b/engine.vcxproj.filters
index 8e1b527..accbd16 100644
--- a/engine.vcxproj.filters
+++ b/engine.vcxproj.filters
@@ -228,6 +228,12 @@
     <ClCompile Include="engine\app_commands.cpp">
       <Filter>Source Files</Filter>
     </ClCompile>
+    <ClCompile Include="engine\node_dialog_cloud.cpp">
+      <Filter>Source Files\ui</Filter>
+    </ClCompile>
+    <ClCompile Include="engine\app_cloud.cpp">
+      <Filter>Source Files</Filter>
+    </ClCompile>
   </ItemGroup>
   <ItemGroup>
     <ClInclude Include="engine\app.h">
@@ -404,6 +410,9 @@
     <ClInclude Include="engine\node_dialog_browse.h">
       <Filter>Header Files\ui</Filter>
     </ClInclude>
+    <ClInclude Include="engine\node_dialog_cloud.h">
+      <Filter>Header Files\ui</Filter>
+    </ClInclude>
   </ItemGroup>
   <ItemGroup>
     <ResourceCompile Include="PanoPainter.rc">
diff --git a/engine/app.cpp b/engine/app.cpp
index 80c5ce9..7f67c2f 100644
--- a/engine/app.cpp
+++ b/engine/app.cpp
@@ -63,13 +63,6 @@ void App::initLog()
     LogRemote::I.file_init();
 }
 
-static size_t curl_data_handler(void *contents, size_t size, size_t nmemb, void *userp)
-{
-    auto buffer = reinterpret_cast<std::string*>(userp);
-    buffer->append((char*)contents, size * nmemb);
-    return size * nmemb;
-}
-
 void App::upload(std::string filename)
 {
     CURL *curl;
@@ -94,7 +87,7 @@ void App::upload(std::string filename)
         curl_easy_setopt(curl, CURLOPT_HTTPPOST, formpost);
         curl_easy_setopt(curl, CURLOPT_WRITEDATA, &res);
         curl_easy_setopt(curl, CURLOPT_WRITEFUNCTION, curl_data_handler);
-        auto err = curl_easy_perform(curl); //here it crashes
+        auto err = curl_easy_perform(curl);
         std::cout << "\n\nUPLOAD RESULT\n" << res << "\n\n\n";
         curl_easy_cleanup(curl);
     }
diff --git a/engine/app.h b/engine/app.h
index c455d4a..0ecacad 100644
--- a/engine/app.h
+++ b/engine/app.h
@@ -126,6 +126,10 @@ public:
     void dialog_browse();
     void dialog_export();
     void dialog_layer_rename();
+
+    void cloud_upload_all();
+    void cloud_browse();
+
     void brush_update();
 
     void cmd_convert(std::string pano_path, std::string out_path);
diff --git a/engine/app_cloud.cpp b/engine/app_cloud.cpp
new file mode 100644
index 0000000..208b017
--- /dev/null
+++ b/engine/app_cloud.cpp
@@ -0,0 +1,93 @@
+#include "pch.h"
+#include "app.h"
+#include "util.h"
+#include "node_progress_bar.h"
+#include "node_dialog_cloud.h"
+
+using namespace ui;
+
+void App::cloud_upload_all()
+{
+    std::thread([] {
+        auto names = Asset::list_files(App::I.data_path, false, ".*\\.pano");
+
+        gl_state gl;
+        std::shared_ptr<NodeProgressBar> pb;
+        if (App::I.layout.m_loaded)
+        {
+            App::I.async_start();
+            pb = std::make_shared<NodeProgressBar>();
+            pb->m_manager = &App::I.layout;
+            pb->init();
+            pb->create();
+            pb->loaded();
+            pb->m_progress->SetWidthP(0);
+            pb->m_title->set_text("Export Pano Image");
+            App::I.layout[App::I.main_id]->add_child(pb);
+            App::I.async_update();
+            App::I.async_end();
+        }
+
+        int progress = 0;
+        int total = names.size();
+
+        for (const auto& n : names)
+        {
+            std::string path = App::I.data_path + "/" + n;
+            App::I.upload(path);
+
+            progress++;
+            float p = (float)progress / total * 100.f;
+            LOG("progress: %f", p);
+
+            if (App::I.layout.m_loaded)
+            {
+                App::I.async_start();
+                pb->m_progress->SetWidthP(p);
+                gl.save();
+                App::I.async_update();
+                gl.restore();
+                App::I.async_end();
+            }
+        }
+
+        if (App::I.layout.m_loaded)
+        {
+            App::I.async_start();
+            pb->destroy();
+            App::I.async_update();
+            App::I.async_end();
+        }
+    }).detach();
+}
+
+void App::cloud_browse()
+{
+    if (!canvas)
+        return;
+
+    // load thumbnail test
+    auto dialog = std::make_shared<NodeDialogCloud>();
+    dialog->m_manager = &layout;
+    dialog->data_path = data_path;
+    dialog->init();
+    dialog->create();
+    dialog->loaded();
+
+    layout[main_id]->add_child(dialog);
+    layout[main_id]->update();
+
+    dialog->btn_ok->on_click = [this, dialog](Node*)
+    {
+//         canvas->reset_camera();
+//         layers->clear();
+//         canvas->m_canvas->project_open(dialog->selected_path);
+//         doc_name = dialog->selected_name;
+//         if (auto docname = layout[main_id]->find<NodeText>("txt-docname"))
+//             docname->set_text(("Panodoc: " + doc_name).c_str());
+//         for (auto& i : canvas->m_canvas->m_order)
+//             layers->add_layer(canvas->m_canvas->m_layers[i].m_name.c_str());
+        dialog->destroy();
+        ActionManager::clear();
+    };
+}
\ No newline at end of file
diff --git a/engine/app_dialogs.cpp b/engine/app_dialogs.cpp
index 787602d..ffae787 100644
--- a/engine/app_dialogs.cpp
+++ b/engine/app_dialogs.cpp
@@ -2,6 +2,7 @@
 #include "app.h"
 #include "node_dialog_open.h"
 #include "node_dialog_browse.h"
+#include "node_dialog_cloud.h"
 
 void App::dialog_newdoc()
 {
diff --git a/engine/app_layout.cpp b/engine/app_layout.cpp
index bb932d6..f24869d 100644
--- a/engine/app_layout.cpp
+++ b/engine/app_layout.cpp
@@ -424,60 +424,15 @@ void App::init_menu_file()
                 popup->mouse_release();
                 popup->destroy();
             };
-            popup->find<NodeButtonCustom>("file-upload")->on_click = [this](Node*) {
+            popup->find<NodeButtonCustom>("file-cloud-upload")->on_click = [this](Node*) {
+                cloud_upload_all();
+                popup->mouse_release();
+                popup->destroy();
+            };
+            popup->find<NodeButtonCustom>("file-cloud-browse")->on_click = [this](Node*) {
+                cloud_browse();
                 popup->mouse_release();
                 popup->destroy();
-                std::thread([] {
-                    auto names = Asset::list_files(App::I.data_path, false, ".*\\.pano");
-
-                    gl_state gl;
-                    std::shared_ptr<NodeProgressBar> pb;
-                    if (App::I.layout.m_loaded)
-                    {
-                        App::I.async_start();
-                        pb = std::make_shared<NodeProgressBar>();
-                        pb->m_manager = &App::I.layout;
-                        pb->init();
-                        pb->create();
-                        pb->loaded();
-                        pb->m_progress->SetWidthP(0);
-                        pb->m_title->set_text("Export Pano Image");
-                        App::I.layout[App::I.main_id]->add_child(pb);
-                        App::I.async_update();
-                        App::I.async_end();
-                    }
-
-                    int progress = 0;
-                    int total = names.size();
-
-                    for (const auto& n : names)
-                    {
-                        std::string path = App::I.data_path + "/" + n;
-                        App::I.upload(path);
-
-                        progress++;
-                        float p = (float)progress / total * 100.f;
-                        LOG("progress: %f", p);
-
-                        if (App::I.layout.m_loaded)
-                        {
-                            App::I.async_start();
-                            pb->m_progress->SetWidthP(p);
-                            gl.save();
-                            App::I.async_update();
-                            gl.restore();
-                            App::I.async_end();
-                        }
-                    }
-
-                    if (App::I.layout.m_loaded)
-                    {
-                        App::I.async_start();
-                        pb->destroy();
-                        App::I.async_update();
-                        App::I.async_end();
-                    }
-                }).detach();
             };
         };
     }
diff --git a/engine/image.h b/engine/image.h
index 7781500..1a414fb 100644
--- a/engine/image.h
+++ b/engine/image.h
@@ -4,8 +4,8 @@ namespace ui {
 
 class Image
 {
-    std::unique_ptr<uint8_t[]> m_data;
 public:
+    std::unique_ptr<uint8_t[]> m_data;
     int width = 0;
     int height = 0;
     int comp = 4;
@@ -19,6 +19,10 @@ public:
         comp = 4;
         m_data = std::make_unique<uint8_t[]>(size());
     }
+    void copy_from(const uint8_t* data)
+    {
+        std::copy(data, data + size(), m_data.get());
+    }
     void flip();
     void create() { m_data = std::make_unique<uint8_t[]>(size()); }
 };
diff --git a/engine/log.cpp b/engine/log.cpp
index cedb8dc..9412997 100644
--- a/engine/log.cpp
+++ b/engine/log.cpp
@@ -4,13 +4,6 @@
 
 LogRemote LogRemote::I;
 
-static size_t data_handler(void *contents, size_t size, size_t nmemb, void *userp)
-{
-    auto buffer = reinterpret_cast<std::string*>(userp);
-    buffer->append((char*)contents, size * nmemb);
-    return size * nmemb;
-}
-
 void LogRemote::start()
 {
     if (m_running || m_error)
@@ -43,7 +36,7 @@ void LogRemote::net_init()
         return;
     curl_easy_setopt(curl, CURLOPT_WRITEDATA, &this->readBuffer);
     //curl_easy_setopt(curl, CURLOPT_FOLLOWLOCATION, 1L);
-    curl_easy_setopt(curl, CURLOPT_WRITEFUNCTION, data_handler);
+    curl_easy_setopt(curl, CURLOPT_WRITEFUNCTION, curl_data_handler);
     curl_easy_setopt(curl, CURLOPT_TIMEOUT, 5L);
 }
 std::string LogRemote::net_request(std::string cmd, std::string data /*= ""*/)
diff --git a/engine/node.cpp b/engine/node.cpp
index 4efe034..d92d45b 100644
--- a/engine/node.cpp
+++ b/engine/node.cpp
@@ -25,6 +25,7 @@
 #include "node_canvas.h"
 #include "node_scroll.h"
 #include "node_dialog_browse.h"
+#include "node_dialog_cloud.h"
 
 void Node::watch(std::function<void(Node*)> observer)
 {
@@ -797,6 +798,8 @@ void Node::load_internal(const tinyxml2::XMLElement* x_node)
             CASE(kWidget::Scroll, NodeScroll);
             CASE(kWidget::DialogBrowse, NodeDialogBrowse);
             CASE(kWidget::DialogBrowseItem, NodeDialogBrowseItem);
+            CASE(kWidget::DialogCloud, NodeDialogCloud);
+            CASE(kWidget::DialogCloudItem, NodeDialogCloudItem);
 #undef  CASE
         case kWidget::Ref:
         {
diff --git a/engine/node.h b/engine/node.h
index 5d702e2..93f271d 100644
--- a/engine/node.h
+++ b/engine/node.h
@@ -71,6 +71,8 @@ enum class kWidget : uint16_t
     Scroll = const_hash("scroll"),
     DialogBrowse = const_hash("dialog-browse"),
     DialogBrowseItem = const_hash("dialog-browse-item"),
+    DialogCloud = const_hash("dialog-cloud"),
+    DialogCloudItem = const_hash("dialog-cloud-item"),
 };
 
 class Node
diff --git a/engine/node_dialog_cloud.cpp b/engine/node_dialog_cloud.cpp
new file mode 100644
index 0000000..54a1803
--- /dev/null
+++ b/engine/node_dialog_cloud.cpp
@@ -0,0 +1,210 @@
+#include "pch.h"
+#include "log.h"
+#include "node_dialog_cloud.h"
+#include "canvas.h"
+#include "node_image_texture.h"
+#include "asset.h"
+#include "node_message_box.h"
+#include "app.h"
+#include "image.h"
+
+Node* NodeDialogCloud::clone_instantiate() const
+{
+    return new NodeDialogCloud();
+}
+
+void NodeDialogCloud::clone_finalize(Node* dest) const
+{
+    NodeDialogCloud* n = static_cast<NodeDialogCloud*>(dest);
+    n->init_controls();
+}
+
+void NodeDialogCloud::init()
+{
+    auto tpl = static_cast<const NodeBorder*>(init_template("dialog-cloud"));
+    m_color = tpl->m_color;
+    m_border_color = tpl->m_border_color;;
+    m_thinkness = tpl->m_thinkness;;
+    init_controls();
+}
+
+void NodeDialogCloud::init_controls()
+{
+    btn_ok = find<NodeButton>("btn-ok");
+    btn_cancel = find<NodeButton>("btn-cancel");
+    btn_cancel->on_click = [this](Node*) {
+        destroy();
+    };
+    container = find<Node>("files-list");
+    std::thread(&NodeDialogCloud::load_thumbs_thread, this).detach();
+/*
+    auto names = Asset::list_files(data_path, false, ".*\\.pano");
+    for (const auto& n : names)
+    {
+        auto node = new NodeDialogCloudItem;
+        node->m_manager = m_manager;
+        node->init();
+        node->m_text->set_text(n.c_str());
+        node->m_path = data_path + "/" + n;
+        node->m_file_name = n;
+        node->on_selected = [&](NodeDialogCloudItem* target) {
+            if (target == current)
+                return;
+            selected_path = target->m_path;
+            selected_file = target->m_file_name;
+            selected_name = selected_file.substr(0, selected_file.length() - 5);
+            if (current)
+                current->m_selected = false;
+            current = target;
+        };
+
+        // load thumb
+        ui::Image thumb = ui::Canvas::I->thumbnail_read(node->m_path);
+        auto image_tex = node->find<NodeImageTexture>("thumb-tex");
+        image_tex->tex.destroy();
+        image_tex->tex.create(thumb);
+
+        container->add_child(node);
+    }
+*/
+}
+
+void NodeDialogCloud::loaded()
+{
+}
+
+std::vector<std::string> split(const std::string& subject, char d) 
+{
+    std::vector<std::string> ret;
+    int start = 0;
+    int n = subject.find_first_of(d);
+    while (n != std::string::npos)
+    {
+        ret.push_back(subject.substr(start, n - start));
+        start = n + 1;
+        n = subject.find_first_of(d, start);
+    }
+    ret.push_back(subject.substr(start));
+    return ret;
+}
+
+void NodeDialogCloud::load_thumbs_thread()
+{
+    CURL *curl = curl_easy_init();
+    std::string res;
+    if (curl)
+    {
+        curl_easy_setopt(curl, CURLOPT_WRITEDATA, &res);
+        curl_easy_setopt(curl, CURLOPT_WRITEFUNCTION, curl_data_handler);
+        curl_easy_setopt(curl, CURLOPT_URL, "http://omigamedev.ddns.net:8080/panoview/cloud-list.php");
+        auto err = curl_easy_perform(curl);
+        LOG("CLOUD LIST: %s", res.c_str());
+
+        auto names = split(res, ',');
+        for (const auto& n : names)
+        {
+            res.clear();
+            std::string url = "http://omigamedev.ddns.net:8080/panoview/cloud-info.php?file=" + n;
+            curl_easy_setopt(curl, CURLOPT_URL, url.c_str());
+            auto err = curl_easy_perform(curl);
+            auto info = split(res, ',');
+            int width = atoi(info[0].c_str());
+            int height = atoi(info[1].c_str());
+            int comp = atoi(info[2].c_str());
+            assert(comp == 4);
+            std::string rgb;
+            rgb.resize(Base64::DecodedLength(info[3]));
+            Base64::Decode(info[3], &rgb);
+            ui::Image thumb;
+            thumb.create(width, height);
+            thumb.copy_from((uint8_t*)rgb.data());
+
+
+            App::I.async_start();
+            auto node = new NodeDialogCloudItem;
+            node->m_manager = m_manager;
+            node->init();
+            node->m_text->set_text(n.c_str());
+            node->m_path = data_path + "/" + n;
+            node->m_file_name = n;
+            auto image_tex = node->find<NodeImageTexture>("thumb-tex");
+            image_tex->tex.destroy();
+            image_tex->tex.create(thumb);
+            container->add_child(node);
+            App::I.async_end();
+
+//             node->on_selected = [&](NodeDialogCloudItem* target) {
+//                 if (target == current)
+//                     return;
+//                 selected_path = target->m_path;
+//                 selected_file = target->m_file_name;
+//                 selected_name = selected_file.substr(0, selected_file.length() - 5);
+//                 if (current)
+//                     current->m_selected = false;
+//                 current = target;
+//             };
+
+            // load thumb
+//             ui::Image thumb = ui::Canvas::I->thumbnail_read(node->m_path);
+
+        }
+        curl_easy_cleanup(curl);
+    }
+}
+
+//////////////////////////////////////////////////////////////////
+
+Node* NodeDialogCloudItem::clone_instantiate() const
+{
+    return new NodeDialogCloudItem;
+}
+void NodeDialogCloudItem::clone_finalize(Node* dest) const
+{
+    NodeDialogCloudItem* n = static_cast<NodeDialogCloudItem*>(dest);
+    n->init_controls();
+}
+void NodeDialogCloudItem::init()
+{
+    auto tpl = static_cast<const NodeBorder*>(init_template("dialog-cloud-item"));
+    m_color = tpl->m_color;
+    m_border_color = tpl->m_border_color;
+    m_thinkness = tpl->m_thinkness;
+    init_controls();
+}
+void NodeDialogCloudItem::init_controls()
+{
+    m_text = find<NodeText>("title");
+}
+void NodeDialogCloudItem::loaded()
+{
+
+}
+void NodeDialogCloudItem::draw()
+{
+    auto c = m_selected ? m_color_selected : m_color_normal;
+    m_thinkness = m_selected ? 1.f : 0.f;
+    m_color = m_mouse_inside ? m_color_hover : c;
+    NodeBorder::draw();
+}
+kEventResult NodeDialogCloudItem::handle_event(Event* e)
+{
+    NodeBorder::handle_event(e);
+    switch (e->m_type)
+    {
+    case kEventType::MouseEnter:
+        break;
+    case kEventType::MouseLeave:
+        break;
+    case kEventType::MouseDownL:
+        m_selected = true;
+        if (on_selected)
+            on_selected(this);
+        break;
+    case kEventType::MouseUpL:
+        break;
+    default:
+        return kEventResult::Available;
+        break;
+    }
+    return kEventResult::Consumed;
+}
diff --git a/engine/node_dialog_cloud.h b/engine/node_dialog_cloud.h
new file mode 100644
index 0000000..46d9357
--- /dev/null
+++ b/engine/node_dialog_cloud.h
@@ -0,0 +1,47 @@
+#pragma once
+#include "node_border.h"
+#include "node_button.h"
+#include "node_image_texture.h"
+#include "node_text.h"
+#include "node_text_input.h"
+
+class NodeDialogCloudItem : public NodeBorder
+{
+public:
+    NodeText* m_text;
+    NodeImageTexture* m_thumb;
+    glm::vec4 m_color_normal = glm::vec4(.4, .4, .4, 1);
+    glm::vec4 m_color_selected = glm::vec4(.3, .3, .3, 1);
+    glm::vec4 m_color_hover = glm::vec4(.5, .5, .5, 1);
+    bool m_selected = false;
+    std::string m_path;
+    std::string m_file_name;
+    std::function<void(NodeDialogCloudItem* target)> on_selected;
+    virtual Node* clone_instantiate() const override;
+    virtual void clone_finalize(Node* dest) const override;
+    virtual void init() override;
+    void init_controls();
+    virtual void loaded() override;
+    virtual void draw() override;
+    virtual kEventResult handle_event(Event* e) override;
+};
+
+class NodeDialogCloud : public NodeBorder
+{
+public:
+    NodeButton* btn_cancel;
+    NodeButton* btn_ok;
+    NodeButton* btn_delete;
+    NodeDialogCloudItem* current = nullptr;
+    Node* container;
+    std::string selected_path;
+    std::string selected_file;
+    std::string selected_name;
+    std::string data_path;
+    virtual Node* clone_instantiate() const override;
+    virtual void clone_finalize(Node* dest) const override;
+    virtual void init() override;
+    void init_controls();
+    virtual void loaded() override;
+    void load_thumbs_thread();
+};
diff --git a/engine/pch.h b/engine/pch.h
index 6aa8331..0a61143 100644
--- a/engine/pch.h
+++ b/engine/pch.h
@@ -105,6 +105,7 @@
 #include <tinyxml2.h>
 #include <jpge.h>
 #include <jpgd.h>
+#include <base64.h>
 #endif
 
 #include <yoga/Yoga.h>
diff --git a/engine/util.cpp b/engine/util.cpp
index 48ad39e..4ba3805 100644
--- a/engine/util.cpp
+++ b/engine/util.cpp
@@ -125,6 +125,13 @@ void check_OpenGLError(const char* stmt, const char* fname, int line)
     }
 }
 
+size_t curl_data_handler(void *contents, size_t size, size_t nmemb, void *userp)
+{
+    auto buffer = reinterpret_cast<std::string*>(userp);
+    buffer->append((char*)contents, size * nmemb);
+    return size * nmemb;
+}
+
 #ifdef _DEBUG
 #define GL(stmt) stmt; CheckOpenGLError(#stmt, __FILE__, __LINE__);
 #else
diff --git a/engine/util.h b/engine/util.h
index 90e6f65..1901088 100644
--- a/engine/util.h
+++ b/engine/util.h
@@ -16,6 +16,7 @@ glm::vec4 rand_color();
 glm::vec3 convert_hsv2rgb(const glm::vec3 c);
 glm::vec3 convert_rgb2hsv(const glm::vec3 c);
 
+size_t curl_data_handler(void *contents, size_t size, size_t nmemb, void *userp);
 void check_OpenGLError(const char* stmt, const char* fname, int line);
 
 template<typename T, int N> struct cbuffer
diff --git a/libs/base64 b/libs/base64
new file mode 160000
index 0000000..4d1fdf9
--- /dev/null
+++ b/libs/base64
@@ -0,0 +1 @@
+Subproject commit 4d1fdf97c94fa46eaee11cf4d561f8406217dc78