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.

../../_images/pr_widget_overview_ex.gif
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

Style Your UI

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