Create a Custom UI

This document aims to enable you to make your own modifications to the Pixyz UI in order to develop a personalized application.

Read time 3 minutes

Last updated a day ago

Once the initial setup of the Pixyz UI and its virtual environment is complete, launching it will automatically open a default UI from

default_ui.py

. It contains many useful windows that you might know from other applications, like a scene hierarchy, an inspector, a list of all materials or a uv viewer. However, as the sources of Pixyz UI are included in the sdk, you can modify and extend them as you wish. Moreover, creating a personalized viewer with a custom UI is extremely simple and can be a useful step in pipeline validation.

Create a simple viewer

As you can see in

pxzui/__init__.py

, the default UI is opened and run after importing the sdk. This will automatically create all the windows in imgui and add them to Pixyz UI. It also defines a default layout and instructs Pixyz UI to store the modifications on closure in a specific location. In essence, it is forming another layer on top of Pixyz UI, which we don't need to create a simple viewer. Let's modify

__init__.py

to open a window with just the Pixyz Viewer and a few gizmos. Instead of importing, instantiating and executing DefaultUI, we will use the Pixyz UI class:


# We don't need this anymore:# from pxzui.default_ui import DefaultUI# default_ui = DefaultUI()# default_ui.run()from pxzui.pixyz_ui import PixyzUIpixyz_ui = PixyzUI()pixyz_ui.run()

This will open a simple window containing nothing but a viewer, gizmos and some basic functionality. Try importing a file via io.importScene before opening the UI to inspect the model. It also supports importing a model via drag&drop.

Add existing windows from the default UI

Most of the time, it won't be necessary to have all the windows that come with the default UI. As we have seen above, we can create a minimalistic viewer with

pxzui.pixyz_ui

. Let's imagine that our current project still needs to have some overview of the hierarchy in the scene. In the default UI, there is a window called SceneTree (

ui/scene_tree.py

) that contains a hierarchical, searchable list of all occurrences in the scene. If we would like to include this window in our minimalistic Pixyz UI, we can just add the following lines to the previous example:


# We don't need this anymore:# from pxzui.default_ui import DefaultUI# default_ui = DefaultUI()# default_ui.run()from pxzui.pixyz_ui import PixyzUIfrom pxzui.ui.scene_tree import SceneTreefrom pxzui.window import Windowpixyz_ui = PixyzUI()# Create and add the scene tree windowscene_tree = SceneTree(pixyz_ui)scene_tree_window = Window("Scene Tree")scene_tree_window.gui_function = scene_tree.drawpixyz_ui.add_window(scene_tree_window)pixyz_ui.run()

A new window called Scene Tree will be visible in the UI (it's initial size might be very small, as there is no layout file for it yet). It has exactly the same functionality as the scene tree from the default UI.

Note

This can be done with many other windows of the default UI (Inspector, Material Browser, History, Output, ...) to create a fully customized solution.

Extend Pixyz UI with your own widgets

To create your own imgui windows, you need to attach them to the Pixyz UI before executing it. Pixyz UI uses imgui-bundle, enabling the creation of complex user interfaces with just a few lines of code. Here's an example on how to create a window with a background viewer and a few buttons to reduce its triangle count via decimation. It extends the simple viewer from the first example (Create a Simple Viewer) with a few lines to draw a customized window.


from imgui_bundle import imguifrom pxzui.ui.pixyz_ui_events import PixyzUIEventfrom pxzui.window import Windowfrom pxzui.pixyz_ui import PixyzUIpixyz_ui = PixyzUI()pixyz_ui.emit(PixyzUIEvent.FIT_VIEWERS_EVENT)# Prevent idlingpixyz_ui.idle_flags.add_flag("camera_rotation")pixyz_ui.idle_flags.set_flag("camera_rotation", True)# Custom window definitioncustom_window = Window("My Window")custom_window.flags = imgui.WindowFlags_.always_auto_resize | imgui.WindowFlags_.no_resize | imgui.WindowFlags_.no_collapse | imgui.WindowFlags_.no_title_barcustom_window.enabled = True# Window functionturntable_speed = 20show_edges = Falsepoly_count = pxz.scene.getPolygonCount([pxz.scene.getRoot()])def custom_window_function():    # Will be executed every frame    global turntable_speed, show_edges, poly_count    # Show mesh edges to see the decimation effect    show_edges_changed, show_edges = imgui.checkbox("Show Edges", show_edges)    if show_edges_changed:        pxz.view.setViewerProperty("ShowEdges", str(show_edges), pixyz_ui.background_viewer.viewer_id)    # Center the camera to the model    if imgui.button("Fit Camera", imgui.ImVec2(imgui.get_content_region_avail().x, 0)):        pixyz_ui.emit(PixyzUIEvent.FIT_VIEWERS_EVENT)    # Change the turntable speed    _, turntable_speed = imgui.slider_int("Turntable Speed", turntable_speed, 0, 100)    pixyz_ui.background_viewer.camera.rotate(turntable_speed/10000, 0.0)    pixyz_ui.emit(PixyzUIEvent.VIEWER_FORCE_UPDATE_EVENT)    imgui.separator()    # Decimate the model to the given ratio when the button is clicked    ratio = 70.0    def decimate():        global poly_count        pxz.algo.decimateTarget(occurrences=[pxz.scene.getRoot()], targetStrategy=['ratio', ratio])        poly_count = pxz.scene.getPolygonCount([pxz.scene.getRoot()])    if imgui.button("Decimate to " + str(ratio) + "%", imgui.ImVec2(imgui.get_content_region_avail().x, 0)):        pixyz_ui.process_queue.enqueue(decimate)    # Display the polygon count    imgui.text("Polygon Count: " + str(poly_count))custom_window.gui_function = custom_window_function# Add custom window to Pixyz UIpixyz_ui.add_window(custom_window)pixyz_ui.run()

Here's the final result:

Documentation

Development

User Acquisition

Monetization

Industry

Documentation

Development

User Acquisition

Monetization

Industry

Asset Transformer SDK

User Manual

Python API

C# API

Changelog

Asset Transformer SDK

Create a Custom UI

Create a simple viewer

Add existing windows from the default UI

Extend Pixyz UI with your own widgets