[Help] Create a responsive image that is dependent on its window

[ghost]

I am new to this and been messing with the demo for hours now. I want to know if it's possible to display an image from a file to a window that auto resizes itself (same aspect ratio) when its window is resized.

Also I want to know how to add texture from PIL.Image.

[bandit-masked]

Hi welcome!

An example of displaying and resizing an image can be seen with the following app. Even though it's not shown in the GIF, the image resizes when the app is resized as well.

https://github.com/hoffstadt/DearPyGui/wiki/Dear-PyGui-Showcase#raviewer-parsing-and-displaying-binary-data-acquired-straight-from-camera

I believe the following app uses PIL to create e-book covers and displays them in Dear PyGui afterwards.
https://github.com/hoffstadt/DearPyGui/wiki/Dear-PyGui-Showcase#youtube-captions-to-e-book

Check out the rest of the showcase gallery as well. There are some useful ideas in there!

[maticahacic]

Here is how you resize image in texture_registry. Code is setup with square image loaded. But you can change that with changing size parameters to width, height that is pulled from get_item_rect_size.

import dearpygui.dearpygui as dpg

dpg.create_context()

def resize_img():
    print(dpg.get_item_rect_size("Window"))
    height, width = dpg.get_item_rect_size("Window")
    size = height
    dpg.set_item_height("drawlist", size)
    dpg.set_item_width("drawlist", size)
    if dpg.does_alias_exist:
        dpg.delete_item("drawlist", children_only=True)
    dpg.draw_image("image_id", (0, 0), (size, size), uv_min=(0, 0), uv_max=(1, 1), parent="drawlist")


width, height, channels, data = dpg.load_image('image.png')
with dpg.texture_registry():
    dpg.add_static_texture(width, height, data, tag="image_id")

with dpg.item_handler_registry(tag="window_handler"):
    dpg.add_item_resize_handler(callback=resize_img)

with dpg.window(tag="Window"):
    with dpg.drawlist(tag="drawlist", width=200, height=200, parent="Window"):
        height, width = dpg.get_item_rect_size("Window")
        print(dpg.get_item_rect_size("drawlist"))
        print(height)
        dpg.draw_image("image_id", (0, 0), (height, width), uv_min=(0, 0), uv_max=(1, 1))

dpg.bind_item_handler_registry("Window", "window_handler")

dpg.create_viewport(title='Custom Title', width=800, height=600)
dpg.setup_dearpygui()
dpg.show_viewport()
dpg.start_dearpygui()
dpg.destroy_context()

Using img from PIL library is basically just saving an image in PIL and loading it in DPG.

[Antonio-Par]

I know this is a quite late reply but there is a chance it will help someone )))
jhjhhjk
import dearpygui.dearpygui as dpg

dpg.create_context()

width, height, channels, data = dpg.load_image("joystick.png")
with dpg.texture_registry():
texture_id = dpg.add_static_texture(width, height, data)
with dpg.window(label='image', tag='image_tag'):
dpg.add_image(texture_id, tag='texture_tag')

dpg.create_viewport(title='Custom Title', width=700, height=400, resizable=True)
dpg.setup_dearpygui()
dpg.show_viewport()
dpg.set_primary_window("image_tag", True)

while dpg.is_dearpygui_running():
dpg.delete_item('texture_tag')
dpg.add_image(texture_id, parent='image_tag', tag='texture_tag', width=dpg.get_viewport_width(), height=dpg.get_viewport_height())
dpg.render_dearpygui_frame()
dpg.destroy_context()