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#
Style Your UI#
Widgets can be styled to give your Extension window a unique look.