Recommended way to display an image

[dkrikun]

Hi,

What is the recommended way to display an image buffer in a widget? For example, I have a buffer obtained from my webcam, how can I display a widget with it?

[ocornut]

Your rendering function RenderDrawListsFn needs to handle the 'texture_id' flield of ImDrawCmd. texture_id is a void* that you can use to store your own texture identifier / pointer.

For example the render loop in the OpenGL2 example store the GL texture identifier (GLuint) into the texture_id field.

    for (size_t cmd_i = 0; cmd_i < cmd_list->commands.size(); cmd_i++)
    {
        const ImDrawCmd* pcmd = &cmd_list->commands[cmd_i];
        glBindTexture(GL_TEXTURE_2D, (GLuint)(intptr_t)pcmd->texture_id);
        glScissor((int)pcmd->clip_rect.x, (int)(height - pcmd->clip_rect.w), (int)(pcmd->clip_rect.z - pcmd->clip_rect.x), (int)(pcmd->clip_rect.w - pcmd->clip_rect.y));
        glDrawArrays(GL_TRIANGLES, vtx_offset, pcmd->vtx_count);
        vtx_offset += pcmd->vtx_count;
    }

DirectX9 render loop:

    for (size_t cmd_i = 0; cmd_i < cmd_list->commands.size(); cmd_i++)
    {
        const ImDrawCmd* pcmd = &cmd_list->commands[cmd_i];
        const RECT r = { (LONG)pcmd->clip_rect.x, (LONG)pcmd->clip_rect.y, (LONG)pcmd->clip_rect.z, (LONG)pcmd->clip_rect.w };
        g_pd3dDevice->SetTexture( 0, (LPDIRECT3DTEXTURE9)pcmd->texture_id );
        g_pd3dDevice->SetScissorRect(&r);
        g_pd3dDevice->DrawPrimitive(D3DPT_TRIANGLELIST, vtx_offset, pcmd->vtx_count/3);
        vtx_offset += pcmd->vtx_count;
    }

From this point on in user code you can call ImGui::Image() and pass your texture identifier casted to a void*. To render

ImGui::Image(my_texture_id, ImVec2(128,128));

If you do that very frequently you may want to create your own function that takes your own texture type to avoid passing size:

namespace ImGui
{
    ImGui::Image(MyTextureType* tex);
}
ImGui::Image(MyTextureType* tex)
{
   ImGui::Image((void*)tex, ImVec2(tex->GetWidth(), tex->GetHeight());
}

[ocornut]

I'll close that for now.