Implementing a simple image viewer in Julia

[VarLad]

Trying to implement a simple Image-Viewer from https://github.com/ocornut/imgui/wiki/Image-Loading-and-Displaying-Examples

[Gnimuc]

I implemented a simple image viewer in the backend which you might be of interest to, please refer to:

• CImGui.jl/src/backend/OpenGL/impl.jl

  Lines 396 to 420 in b990620

  	function ImGui_ImplOpenGL3_CreateImageTexture(image_width, image_height; format=GL_RGBA, type=GL_UNSIGNED_BYTE)
  	id = GLuint(0)
  	@c glGenTextures(1, &id)
  	glBindTexture(GL_TEXTURE_2D, id)
  	glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR)
  	glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR)
  	glPixelStorei(GL_UNPACK_ROW_LENGTH, 0)
  	glTexImage2D(GL_TEXTURE_2D, 0, format, GLsizei(image_width), GLsizei(image_height), 0, format, type, C_NULL)
  	g_ImageTexture[id] = id
  	return Int(id)
  	end
  	function ImGui_ImplOpenGL3_UpdateImageTexture(id, image_data, image_width, image_height; format=GL_RGBA, type=GL_UNSIGNED_BYTE)
  	glBindTexture(GL_TEXTURE_2D, g_ImageTexture[id])
  	glTexSubImage2D(GL_TEXTURE_2D, 0, 0, 0, GLsizei(image_width), GLsizei(image_height), format, type, image_data)
  	end
  	function ImGui_ImplOpenGL3_DestroyImageTexture(id)
  	id = g_ImageTexture[id]
  	@c glDeleteTextures(1, &id)
  	delete!(g_ImageTexture, id)
  	return true
  	end

• CImGui.jl/examples/demo.jl

  Lines 65 to 67 in b990620

  	# creat texture for image drawing
  	img_width, img_height = 256, 256
  	image_id = ImGui_ImplOpenGL3_CreateImageTexture(img_width, img_height)

• CImGui.jl/examples/demo.jl

  Lines 86 to 90 in b990620

  	CImGui.Begin("Image Demo")
  	image = rand(GLubyte, 4, img_width, img_height)
  	ImGui_ImplOpenGL3_UpdateImageTexture(image_id, image, img_width, img_height)
  	CImGui.Image(Ptr{Cvoid}(image_id), (img_width, img_height))
  	CImGui.End()

[VarLad]

image_texture = GLuint(0)
glGenTextures(1, image_texture)

Is giving an issue..... Any idea?

[Gnimuc]

image_texture is a CLuint, the glGenTextures expects a pointer.

[Gnimuc]

@c glGenTextures(1, &id) actually expands to:

tmp = Ref(id)
glGenTextures(1, tmp)
id = tmp[]

[VarLad]

Thanks! I think I've successfully implemented the function

This part remains, for now....
So... the glewInit() equivalent here is...

setup Platform/Renderer bindings
ImGui_ImplGlfw_InitForOpenGL(window, true)
ImGui_ImplOpenGL3_Init(glsl_version)

??

[Gnimuc]

yes, glew is a C/C++? helper library, in Julia, one needs to use GLFW+ModernGL directly.

[VarLad]

Thanks! I was able to implement it, I think
One problem though...

A blank window comes up, with no image.....
Any idea why?

[VarLad]

The code looks like this

using CImGui
using CImGui.CSyntax
using CImGui.GLFWBackend
using CImGui.OpenGLBackend
using CImGui.GLFWBackend.GLFW
using CImGui.OpenGLBackend.ModernGL
using Printf
using ModernGL, Images, FileIO, GLFW

function LoadTextureFromFile(filename)
    image_data = load(filename)
    image_width = size(image_data)[1];
    image_height = size(image_data)[2];
    #unsigned char* image_data = stbi_load(filename, &image_width, &image_height, NULL, 4);
    #if (image_data == NULL)
    #    return false;

    # Create a OpenGL texture identifier
    image_texture = GLuint(0)
    tmp = Ref(image_texture)
    glGenTextures(1, tmp)
    image_texture = tmp[]
    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)
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE); # This is required on WebGL for non power-of-two textures
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE); # Same

    #Upload pixels into texture
#if defined(GL_UNPACK_ROW_LENGTH) && !defined(__EMSCRIPTEN__)
    glPixelStorei(GL_UNPACK_ROW_LENGTH, 0)
#endif
    glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, image_width, image_height, 0, GL_RGBA, GL_UNSIGNED_BYTE, image_data);
    #stbi_image_free(image_data);

    return image_texture, image_width, image_height;

    #return true;
end

@static if Sys.isapple()
    # OpenGL 3.2 + GLSL 150
    const glsl_version = 150
    GLFW.WindowHint(GLFW.CONTEXT_VERSION_MAJOR, 3)
    GLFW.WindowHint(GLFW.CONTEXT_VERSION_MINOR, 2)
    GLFW.WindowHint(GLFW.OPENGL_PROFILE, GLFW.OPENGL_CORE_PROFILE) # 3.2+ only
    GLFW.WindowHint(GLFW.OPENGL_FORWARD_COMPAT, GL_TRUE) # required on Mac
else
    # OpenGL 3.0 + GLSL 130
    const glsl_version = 130
    GLFW.WindowHint(GLFW.CONTEXT_VERSION_MAJOR, 3)
    GLFW.WindowHint(GLFW.CONTEXT_VERSION_MINOR, 0)
    # GLFW.WindowHint(GLFW.OPENGL_PROFILE, GLFW.OPENGL_CORE_PROFILE) # 3.2+ only
    # GLFW.WindowHint(GLFW.OPENGL_FORWARD_COMPAT, GL_TRUE) # 3.0+ only
end
error_callback(err::GLFW.GLFWError) = @error "GLFW ERROR: code $(err.code) msg: $(err.description)"
GLFW.SetErrorCallback(error_callback)

# create window
window = GLFW.CreateWindow(1280, 720, "Demo")
@assert window != C_NULL
GLFW.MakeContextCurrent(window)
GLFW.SwapInterval(1)  # enable vsync

# setup Dear ImGui context
ctx = CImGui.CreateContext()

img_width, img_height = 256, 256
#image_id = ImGui_ImplOpenGL3_CreateImageTexture(img_width, img_height)

ImGui_ImplGlfw_InitForOpenGL(window, true)
ImGui_ImplOpenGL3_Init(glsl_version)

my_image_width = 0;
my_image_height = 0;
my_image_texture = GLuint(0);

my_image_texture, my_image_width, my_image_height = LoadTextureFromFile("/home/clad/Pictures/4706201.jpg")
try
    clear_color = Cfloat[0.45, 0.55, 0.60, 1.00]
    while !GLFW.WindowShouldClose(window)

        GLFW.PollEvents()
        # start the Dear ImGui frame
        ImGui_ImplOpenGL3_NewFrame()
        ImGui_ImplGlfw_NewFrame()
        CImGui.NewFrame()

        CImGui.Begin("OpenGL Texture Text");
        CImGui.Image(Ptr{Cvoid}(Int(my_image_texture)), CImGui.ImVec2(my_image_width, my_image_height));
        CImGui.End();
        CImGui.Render()
        GLFW.MakeContextCurrent(window)
        display_w, display_h = GLFW.GetFramebufferSize(window)
        glViewport(0, 0, display_w, display_h)
        glClearColor(clear_color...)
        glClear(GL_COLOR_BUFFER_BIT)
        ImGui_ImplOpenGL3_RenderDrawData(CImGui.GetDrawData())

        GLFW.MakeContextCurrent(window)
        GLFW.SwapBuffers(window)
    end
catch e
    @error "Error in renderloop!" exception=e
    Base.show_backtrace(stderr, catch_backtrace())
finally
    ImGui_ImplOpenGL3_Shutdown()
    ImGui_ImplGlfw_Shutdown()
    CImGui.DestroyContext(ctx)
    GLFW.HideWindow(window)
    GLFW.DestroyWindow(window)
end

If it helps

[Gnimuc]

looks like you mistakenly removed the following snippet between CImGui.End(); and catch e

# rendering
        CImGui.Render()
        GLFW.MakeContextCurrent(window)
        display_w, display_h = GLFW.GetFramebufferSize(window)
        glViewport(0, 0, display_w, display_h)
        glClearColor(clear_color...)
        glClear(GL_COLOR_BUFFER_BIT)
        ImGui_ImplOpenGL3_RenderDrawData(CImGui.GetDrawData())

        GLFW.MakeContextCurrent(window)
        GLFW.SwapBuffers(window)

[VarLad]

@Gnimuc THANKS!
It runs now, with a problem
I got my image, in a window within a window.... Cool but.... can I get my image in the main window somehow?

[VarLad]

Also, I've updated the above code

[Gnimuc]

Well, you could set the viewport size to be the same as your image size and use some window flags to hide the window.

flag = CImGui.ImGuiWindowFlags_NoTitleBar |
           CImGui.ImGuiWindowFlags_AlwaysAutoResize |
           CImGui.ImGuiWindowFlags_NoSavedSettings |
           CImGui.ImGuiWindowFlags_NoNav |
           CImGui.ImGuiWindowFlags_NoScrollbar