Widgets

Widgets are the visual representation of UI elements. Some widgets, such as a StringField have user interactions and need to employ data models, while others are purely visual.

Widgets Example

Note

For brevity, many of the widget examples omit some imports and use self in the context of an extension or class.

Show Code...

import omni.ui as ui

def create_example_ui(self):
    self.widgets_example_window = ui.Window("Widget Examples Window", width=550, height=675)
    with self.widgets_example_window.frame:
        self.string_model_text = ui.SimpleStringModel()

        with ui.VStack(  alignment=ui.Alignment.TOP):

            #######  Image : Omniverse logo ########
            with ui.HStack():
                ui.Spacer()
                ext_manager = omni.kit.app.get_app().get_extension_manager()
                ext_path = ext_manager.get_extension_path(self.ext_id)
                img = ui.Image(width=233, height=52,alignment=ui.Alignment.CENTER)
                img.source_url = ext_path + "/data/main_omniverse.png"
                ui.Spacer()
            ui.Spacer( height=10)

            #######  StringField  ########
            with ui.HStack():
                ui.Spacer( )
                with ui.VStack(width=250):
                    ui.Spacer()
                    ui.Label("StringField")
                    ui.Spacer(height=5)
                    ui.StringField(model=self.string_model_text,alignment=ui.Alignment.H_CENTER)
                    self.val_changed_id = self.string_model_text.subscribe_end_edit_fn(self.on_end_edit_stringfield)
                    ui.Spacer(height=10)
                    with ui.HStack(height=10):
                        ui.Label("Characters in StringField: ")
                        self.chars_string_label = ui.Label("0")

                ui.Spacer()
            ui.Spacer(height=20)
            ui.Separator()

            #######  FloatField, FloatSlider, ProgressBar  ########
            with ui.HStack(height=10):
                ui.Spacer( width=30)
                with ui.VStack(width=250):
                    ui.Spacer()
                    self.float_model = ui.SimpleFloatModel(0, min=0,max=1)
                    ui.Label("Floatfield")
                    ui.Spacer(height=5)
                    ui.FloatField(self.float_model, width=50)
                    ui.Spacer(height=10)
                    ui.Label("FloatSlider")
                    ui.Spacer(height=5)
                    ui.FloatSlider(self.float_model, width=200 ,min=0,max=1,step=0.01)

                with ui.VStack(width=250):
                    ui.Spacer()
                    ui.Label("ProgressBar")
                    ui.Spacer(height=10)
                    self.example_progress = ui.ProgressBar(model=self.float_model, width=200, height=30, alignment=ui.Alignment.CENTER)
                    new_style = {"color" : 0xFF00b976}
                    self.example_progress.set_style(new_style)
                    ui.Spacer()
            ui.Spacer(height=20)
            ui.Separator()

            with ui.HStack( ):
                ui.Spacer(width=30 )
                with ui.VStack(width=250):
                    MAX_FONT_SIZE = 72
                    self.int_model = ui.SimpleIntModel(16, min=9, max=MAX_FONT_SIZE)
                    ui.Label("Intfield")
                    ui.Spacer(height=5)
                    ui.IntField(self.int_model, width=50, alignment=ui.Alignment.H_CENTER )
                    ui.Spacer(height=10)
                    ui.Label("IntSlider")
                    ui.Spacer(height=5)
                    ui.IntSlider(self.int_model,min=9,max=MAX_FONT_SIZE,step=1, width=200)

                    self.int_changed_sub = self.int_model.subscribe_value_changed_fn(self.on_int_model_changed)

                with ui.VStack(width=250):
                    self.val_label = ui.Label(str(self.int_model.as_int), alignment=ui.Alignment.CENTER )
                    self.val_label.set_style({"font_size" : self.int_model.as_int, "color" : 0xFF00b976  })
            ui.Spacer(height=50)
            ui.Separator()

            with ui.HStack():
                ui.Spacer()
                ui.Button("Reset", clicked_fn=self.on_click_reset, width=100, height=20)
                ui.Spacer()

def on_end_edit_stringfield(self, model):
    self.chars_string_label.text = str(len(model.as_string))

def on_click_reset(self):
    self.float_model.as_float = 0
    self.int_model.as_float = 16

def on_int_model_changed(self, model):
    self.val_label.text = f"{model.as_int}"
    self.val_label.alignment = alignment=ui.Alignment.CENTER
    new_style = {"font_size" :  model.as_int,
                 "color"     :  0xFF00b976 }
    self.val_label.set_style(new_style)

Common UI Widgets with example code

Interactive Widgets

Interactive Widgets (with DataModels)

Style Your UI

Widgets can be styled to give your Extension window a unique look.

UI Widget Arguments (kwargs)