How to display a simple image in the ui?

is it possible to display an image within the blender UI interface ?

let say that i want to display a 500x500px image in the N panel in layout.box().column(), how to do that ?

blender can already do that when clicking on an enum with preview
so it must be possible within the api right ?
enter image description here

You can do it using the GPU Shader Module
For example like this :

import bpy
import gpu
import bgl
from gpu_extras.batch import batch_for_shader

IMAGE_NAME = "Untitled"
image = bpy.data.images[IMAGE_NAME]

shader = gpu.shader.from_builtin('2D_IMAGE')
batch = batch_for_shader(
    shader, 'TRI_FAN',
    {
        "pos": ((100, 100), (200, 100), (200, 200), (100, 200)),
        "texCoord": ((0, 0), (1, 0), (1, 1), (0, 1)),
    },
)

if image.gl_load():
    raise Exception()


def draw():
    bgl.glActiveTexture(bgl.GL_TEXTURE0)
    bgl.glBindTexture(bgl.GL_TEXTURE_2D, image.bindcode)

    shader.bind()
    shader.uniform_int("image", 0)
    batch.draw(shader)


bpy.types.SpaceView3D.draw_handler_add(draw, (), 'WINDOW', 'POST_PIXEL')

Here is the Documentation

See you :slight_smile: ++
Tricotou

2 Likes

Thanks a lot ! Very useful

related:

1 Like

This is pretty interesting, gotta try it out.
I wonder if there is some wrapper already that makes the gpu module more pythonic/simpler. Looks very close to its C part.

shader.bind()? reminds me of using Python’s stdlib socket module vs using requests.

edit: seems like there’s a module for higher level functions, and there’s one to draw a texture: https://docs.blender.org/api/blender2.8/gpu_extras.presets.html