Custom widgets showcase about pyimgui

[Willy-JL]

Simple File Picker

Image Preview (default):

Gif Preview (with Material Design Icons and rounding):

Windows support with drive selection:

Functionality

• Single click = highlight item
• Double click = open folder / choose file
• Also directory picker
• Editable location bar
• Auto refresh
• Manual refresh and parent folder button
• Linux and windows support with drive letter selection for windows

Usage

• You create an instance of the FilePicker class when you need to open the file picker
• You keep reusing that same instance over multiple frames (this is for persistence of selected items and to preserve on system resources)
• Each frame you must call FilePicker.tick() to render the file picker and process events
• You can check FilePicker.active to know if it is still open or not (bool)
• FilePicker.selected tells you what file was chosen (absolute path string), if the user clicked cancel or the filepicker is still open it will be None

You can find a code snippet in the gist I linked below.

Options

• You can instead launch a directory picker with the DirPicker() class or by passing the dir_picker=True argument to FilePicker()
• Icons can be customized at the top of the file
• You can (and should) provide a custom title when creating each filepicker, this acts like any other imgui label / id
• You can provide a custom starting dir to each filepicker with start_dir (can be both str and pathlib.Path, both relative and absolute); otherwise the default is the current working directory
• You can provide a callback function to run when the filepicker is closed; it will run even when the user clicked cancel; it gets passed the value of FilePicker.selected, so an absolute path string or None if the filepicker was canceled
• You can provide custom popup flags with custom_popup_flags if you want

Source

You can find the code for this widget along with a usage example in this gist.

Btw thanks for this widget showcase thread, hope gists are fine too :D

Changelog:

• 22-05-2022: implemented directory picker support
• 19-11-2022: added filtering / searching, icons can be changed at top of file, cleaner code
• 04-01-2023: fixed crash with permission errors on windows drive letters

[Willy-JL]

Image Helper

Example:

Functionality

• Load images easily
• Lazy loading (initialize whenever, load when first shown)
• Animated images support (including GIFs)
• Rendering optimizations (doesn't render if not visible)
• Glob support (specify a path and a glob pattern to search in the path; the first result is used)
• Effortless rounded corners support

Attributes and methods:

• .width and .height: size values in pixels, set to 1 until the image is loaded (and loading is lazy so don't cache these values!)
• .missing: whether the file doesn't exist, or the glob pattern didn't match anything
• .texture_id: the opengl texture id to use with imgui.image(). this is actually a property, it wraps ._texture_id handling all the loading, texture and animation stuff, so don't use ._texture_id directly!
• .reload(): reset current texture to blank and load the image again from disk. useful if the file changed or if you're using a glob pattern
• .render(...): wrapper around imgui.image() but with a good reason - it also handles rounded corners and off screen optimizations
• .crop_to_ratio(ratio): imgui.image() and similars take a uv0 and uv1 to crop the image and only show parts of it. this helper method crops to a certain ratio keeping the image centered and returns uv0 and uv1. look at the examples in the gist below for more info

Usage

• You create an instance of the ImageHelper class when and however you want, this does not consume many resources because the actual image loading is done lazily
• You can show the image with image.render(width, height)
• This takes more parameters, in particular rounding=123 for rounded corners
• All other arguments are passed to imgui.image() or the rounded equivalent
• If you specify a rounding value but don't pass a flags value, flags defaults to rounding all corners

I highly suggest you check out some examples at the bottom of the gist below. Make sure to read the comments throughout the class, they are useful!

Source

You can find the code for this widget along with some usage examples in this gist.

Changelog:

• 19-11-2022: fixed huge memory leaks (pixel buffers duplicated in dram and vram) and big performance improvements

[Willy-JL]

Simple Rating Widget

Example:

Functionality

• Familiar star rating design
• Custom star count
• Click on current value to reset to 0

Usage

• Very similar to any other standard imgui widget:
• Every frame call ratingwidget(...)
• First argument is a label / id; it is not visible but it is used to identify the buttons, just like most other imgui widgets
• Second argument is the current value
• Third argument is the amount of stars that the widget has, it defaults to 5
• You can add additional arguments, they will be passed to the underlying imgui.small_button() call

Note: you will need material design icons or another icon font configured!

Source

You can find the code for this widget along with a few usage examples in this gist.

Changelog:

• 24-05-2022: fixed for frame border users
• 19-11-2022: moved icons to top of file for easy customization

[Willy-JL]

Smooth scrolling and scroll multiplier

Example:

ezgif.com-gif-maker.mp4

Functionality

• Enabled globally
• Scroll multiplier
• Smooth scrolling
• Customizable smooth scrolling speed
• Framerate independent

Usage

• Scroll modifiers need to be applied before new_frame()
• Just read the code below for the usage, it is quite straightforward!

Source

You can find the code for these modifiers in this gist.