Adding basic image support for desktop mode

packages/dear-imgui/assets/.gitignore

@@ -1 +0,0 @@
-*.png

packages/dear-imgui/cpp/app/CMakeLists.txt

@@ -38,6 +38,9 @@ file(GLOB YOGA_SRC CONFIGURE_DEPENDS
 set(REACT_IMGUI_BASE_PATH ${CMAKE_CURRENT_SOURCE_DIR}/../app)
 
 set(REACT_IMGUI_SRC
+ ${REACT_IMGUI_BASE_PATH}/src/reactimgui.cpp
+ ${REACT_IMGUI_BASE_PATH}/src/imgui_renderer.cpp
+ ${REACT_IMGUI_BASE_PATH}/src/implot_renderer.cpp
  ${REACT_IMGUI_BASE_PATH}/src/shared.cpp
  ${REACT_IMGUI_BASE_PATH}/src/color_helpers.cpp
  ${REACT_IMGUI_BASE_PATH}/src/imgui_helpers.cpp
@@ -53,7 +56,7 @@ set(REACT_IMGUI_SRC
  ${REACT_IMGUI_BASE_PATH}/src/widget/collapsing_header.cpp
  ${REACT_IMGUI_BASE_PATH}/src/widget/combo.cpp
  ${REACT_IMGUI_BASE_PATH}/src/widget/group.cpp
-# ${REACT_IMGUI_BASE_PATH}/src/widget/image.cpp
+ ${REACT_IMGUI_BASE_PATH}/src/widget/image.cpp
  ${REACT_IMGUI_BASE_PATH}/src/widget/input_text.cpp
  ${REACT_IMGUI_BASE_PATH}/src/widget/item_tooltip.cpp
 # ${REACT_IMGUI_BASE_PATH}/src/widget/map_view.cpp
@@ -69,9 +72,7 @@ set(REACT_IMGUI_SRC
  ${REACT_IMGUI_BASE_PATH}/src/widget/text_wrap.cpp
  ${REACT_IMGUI_BASE_PATH}/src/widget/tree_node.cpp
  ${REACT_IMGUI_BASE_PATH}/src/widget/window.cpp
- ${REACT_IMGUI_BASE_PATH}/src/reactimgui.cpp
- ${REACT_IMGUI_BASE_PATH}/src/imgui_renderer.cpp
- ${REACT_IMGUI_BASE_PATH}/src/implot_renderer.cpp
+
 )
 
 add_library(reactDearImgui

packages/dear-imgui/cpp/app/include/imgui_renderer.h

@@ -26,12 +26,12 @@ using json = nlohmann::json;
 
 class ImGuiRenderer {
  protected:
+ GLFWwindow* m_glfwWindow;
+
  std::string m_rawFontDefs;
 
  ReactImgui* m_reactImgui;
 
- GLFWwindow* m_glfwWindow;
-
  const char* m_glWindowTitle;
 
  int m_initial_window_width = 900;
@@ -79,8 +79,12 @@ class ImGuiRenderer {
 
  const char* m_windowId;
 
+#ifdef __EMSCRIPTEN__
  bool LoadTexture(const void* data, int numBytes, Texture* texture);
-
+#else
+ void HandleNextImageJob();
+ GLuint LoadTexture(const void* data, int numBytes);
+#endif
  // virtual void PrepareForRender() = 0;
  // virtual void Render(int window_width, int window_height) = 0;
 

packages/dear-imgui/cpp/app/include/reactimgui.h

@@ -1,3 +1,8 @@
+#ifndef __EMSCRIPTEN__
+#include <GLES3/gl3.h>
+#endif
+
+#include <queue>
 #include <string>
 #include <mutex>
 #include <rpp/rpp.hpp>
@@ -8,6 +13,7 @@
 
 #include "shared.h"
 #include "imgui_helpers.h"
+#include "texture_helpers.h"
 
 using json = nlohmann::json;
 
@@ -71,6 +77,12 @@ class ReactImgui {
  std::unordered_map<int, std::vector<int>> m_hierarchy;
  std::mutex m_hierarchy_mutex;
 
+#ifndef __EMSCRIPTEN__
+ std::unordered_map<int, GLuint> m_imageToTextureMap;
+#endif
+
+ std::queue<ImageJob> m_imageJobs;
+
  std::unordered_map<int, std::unique_ptr<char[]>> m_floatFormatChars;
 
  ImGuiStyle m_appStyle;

packages/dear-imgui/cpp/app/include/texture_helpers.h

@@ -17,4 +17,9 @@ struct Texture {
  int height;
 };
 
+struct ImageJob {
+ int widgetId;
+ std::string url;
+};
+
 #endif //TEXTURE_HELPERS_H

packages/dear-imgui/cpp/app/include/widget/image.h

@@ -1,8 +1,8 @@
 #include <optional>
 #include "ada.h"
-#include "mapgenerator.h"
 #include "styled_widget.h"
 #include "texture_helpers.h"
+#include <nlohmann/json.hpp>
 
 using fetchImageCallback = std::function<void(void*, size_t)>;
 
@@ -20,11 +20,13 @@ class Image final : public StyledWidget {
 
  auto id = widgetDef["id"].template get<int>();
  auto url = widgetDef["url"].template get<std::string>();
- auto parsedUrl = ada::parse<ada::url>(url);
 
+#ifdef __EMSCRIPTEN__
+ auto parsedUrl = ada::parse<ada::url>(url);
  if (!parsedUrl) {
  throw std::invalid_argument("Invalid url supplied");
  }
+#endif
 
  std::optional<ImVec2> size;
 
@@ -57,12 +59,12 @@ class Image final : public StyledWidget {
 
  void HandleInternalOp(const json& opDef) override;
 
- void FetchImage();
-
 #ifdef __EMSCRIPTEN__
+ void FetchImage();
  void HandleFetchImageSuccess(emscripten_fetch_t *fetch);
-
  void HandleFetchImageFailure(emscripten_fetch_t *fetch);
+#else
+ void QueueFetchImage();
 #endif
 
  void Init(const json& elementDef) override {
@@ -71,6 +73,10 @@ class Image final : public StyledWidget {
  YGNodeSetContext(m_layoutNode->m_node, this);
  YGNodeSetMeasureFunc(m_layoutNode->m_node, Measure);
 
+#ifdef __EMSCRIPTEN__
  FetchImage();
+#else
+ QueueFetchImage();
+#endif
  }
 };

packages/dear-imgui/cpp/app/src/imgui_renderer.cpp

@@ -1,3 +1,4 @@
+#define _CRT_SECURE_NO_WARNINGS
 #define STB_IMAGE_IMPLEMENTATION
 #include "stb_image.h"
 
@@ -7,6 +8,7 @@
 #include <webgpu/webgpu.h>
 #else
 #include "imgui_impl_opengl3.h"
+#include <GLES3/gl3.h>
 #endif
 
 #ifdef __EMSCRIPTEN__
@@ -201,9 +203,11 @@ void ImGuiRenderer::InitGlfw() {
  // This needs to be done explicitly later.
  glfwWindowHint(GLFW_CLIENT_API, GLFW_NO_API);
 #else
- const char* glsl_version = "#version 130";
+ const char* glsl_version = "#version 150";
+ glfwWindowHint(GLFW_OPENGL_PROFILE, GLFW_OPENGL_CORE_PROFILE); // 3.2+ only
+ glfwWindowHint(GLFW_OPENGL_FORWARD_COMPAT, GL_TRUE);
  glfwWindowHint(GLFW_CONTEXT_VERSION_MAJOR, 3);
- glfwWindowHint(GLFW_CONTEXT_VERSION_MINOR, 0);
+ glfwWindowHint(GLFW_CONTEXT_VERSION_MINOR, 2);
 #endif
 
  m_glfwWindow = glfwCreateWindow(m_window_width, m_window_height, m_glWindowTitle, nullptr, nullptr);
@@ -382,8 +386,44 @@ void ImGuiRenderer::SetCurrentContext() {
  ImGui::SetCurrentContext(m_imGuiCtx);
 }
 
+#ifndef __EMSCRIPTEN__
+void ImGuiRenderer::HandleNextImageJob() {
+ auto& [widgetId, url] = m_reactImgui->m_imageJobs.front();
+
+ auto pathToFile = std::format("{}/{}", m_assetsBasePath, url);
+
+ FILE* f = fopen(pathToFile.c_str(), "rb");
+ if (f == NULL) {
+ printf("Unable to open file\n");
+ return;
+ }
+
+ fseek(f, 0, SEEK_END);
+
+ size_t file_size = (size_t)ftell(f);
+
+ if (file_size == -1) {
+ printf("Unable to determine file size of image\n");
+ }
+
+ fseek(f, 0, SEEK_SET);
+
+ void* file_data = IM_ALLOC(file_size);
+
+ fread(file_data, 1, file_size, f);
+
+ fclose(f);
+
+ m_reactImgui->m_imageToTextureMap[widgetId] = LoadTexture(file_data, file_size);
+
+ IM_FREE(file_data);
+
+ m_reactImgui->m_imageJobs.pop();
+};
+#endif
+
 void ImGuiRenderer::BeginRenderLoop() {
-// SetCurrentContext();
+SetUp();
 
 #ifdef __EMSCRIPTEN__
  LoadFontsFromDefs();
@@ -399,8 +439,6 @@ void ImGuiRenderer::BeginRenderLoop() {
 
  m_reactImgui->Init(this);
 
- SetUp();
-
  // Main loop
 #ifdef __EMSCRIPTEN__
  EMSCRIPTEN_MAINLOOP_BEGIN
@@ -412,24 +450,27 @@ void ImGuiRenderer::BeginRenderLoop() {
 
  HandleScreenSizeChanged();
 
- // SetCurrentContext();
-
- #ifdef __EMSCRIPTEN__
+#ifdef __EMSCRIPTEN__
  ImGui_ImplWGPU_NewFrame();
-#else
+#else
  ImGui_ImplOpenGL3_NewFrame();
-#endif
+#endif
 
  ImGui_ImplGlfw_NewFrame();
 
+#ifndef __EMSCRIPTEN__
+ if (!m_reactImgui->m_imageJobs.empty()) {
+ HandleNextImageJob();
+ }
+#endif
+
  m_reactImgui->Render(m_window_width, m_window_height);
 
  PerformRendering();
 
-
- #ifndef __EMSCRIPTEN__
+#ifndef __EMSCRIPTEN__
  glfwSwapBuffers(m_glfwWindow);
-#endif
+#endif
  }
 #ifdef __EMSCRIPTEN__
  EMSCRIPTEN_MAINLOOP_END;
@@ -557,13 +598,41 @@ bool ImGuiRenderer::LoadTexture(const void* data, const int numBytes, Texture* t
  return true;
 }
 #else
-bool LoadTexture(const void* data, const int numBytes, Texture* texture) {
- return true;
+GLuint ImGuiRenderer::LoadTexture(const void* data, int numBytes) {
+ int image_width = 0;
+ int image_height = 0;
+ unsigned char* image_data = stbi_load_from_memory((const unsigned char*)data, (int)numBytes, &image_width, &image_height, NULL, 4);
+ if (image_data == NULL) {
+ printf("Unable to load image from memory\n");
+ return 0;
+ }
+
+ GLuint image_texture = 0;
+
+ glGenTextures(1, &image_texture);
+ glBindTexture(GL_TEXTURE_2D, image_texture);
+
+ // Setup filtering parameters for display
+ glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
+ glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
+
+ // Upload pixels into texture
+ glPixelStorei(GL_UNPACK_ROW_LENGTH, 0);
+ glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, image_width, image_height, 0, GL_RGBA, GL_UNSIGNED_BYTE, image_data);
+
+ GLenum error = glGetError();
+ if (error != GL_NO_ERROR) {
+ printf("OpenGL Error: %d\n", error);
+ return 0;
+ }
+
+ stbi_image_free(image_data);
+
+ return image_texture;
 }
 #endif
 
 json ImGuiRenderer::GetAvailableFonts() {
- // SetCurrentContext();
  ImGuiIO& io = m_imGuiCtx->IO;
  json fonts = json::array();
 

packages/dear-imgui/cpp/app/src/reactimgui.cpp

@@ -13,6 +13,7 @@
 #include <emscripten/bind.h>
 #include "imgui_impl_wgpu.h"
 #else
+#include <GLES3/gl3.h>
 #include "imgui_impl_opengl3.h"
 #endif
 
@@ -29,7 +30,6 @@
 #include "implot_renderer.h"
 
 #ifdef __EMSCRIPTEN__
-#include "widget/image.h"
 #include "widget/map_view.h"
 #endif
 
@@ -40,6 +40,7 @@
 #include "widget/collapsing_header.h"
 #include "widget/combo.h"
 #include "widget/group.h"
+#include "widget/image.h"
 #include "widget/input_text.h"
 #include "widget/item_tooltip.h"
 #include "widget/multi_slider.h"
@@ -134,8 +135,9 @@ void ReactImgui::SetUpElementCreatorFunctions() {
  m_element_init_fn["di-table"] = &makeWidget<Table>;
  m_element_init_fn["clipped-multi-line-text-renderer"] = &makeWidget<ClippedMultiLineTextRenderer>;
 
-#ifdef __EMSCRIPTEN__
  m_element_init_fn["di-image"] = &makeWidget<Image>;
+
+#ifdef __EMSCRIPTEN__
  m_element_init_fn["map-view"] = &makeWidget<MapView>;
 #endif
 

packages/dear-imgui/cpp/app/src/widget/checkbox.cpp

@@ -1,4 +1,5 @@
 #include <imgui.h>
+
 #include <nlohmann/json.hpp>
 
 #include "widget/checkbox.h"