整體效果如上. 下面一步一步添加部件來實(shí)現(xiàn).
目錄
1. 菜單欄
2. 文件選擇部件
3. 垂直可折疊部件
3.1? label部件
3.2 復(fù)選框checkbox
3.3 色板
3.4 下拉框combobox
3.5 撥動(dòng)開關(guān)toggleSwitch
3.6 部件代理WidgetProxy
3.7 WidgetStack
3.8 列表
3.9 樹形視圖
3.10 數(shù)字編輯器NumberEdit
3.11 進(jìn)度條 ProgressBar
3.12 滾動(dòng)條Slider
3.13 文本框
3.14 顯示3D數(shù)組VectorEdit
3.15 網(wǎng)格布局
3.16 選項(xiàng)卡TabControl
3.17 終止程序
4. 完整程序
1. 菜單欄
首先是菜單欄.?
class ExampleWindow:
MENU_CHECKABLE = 1
MENU_DISABLED = 2
MENU_QUIT = 3
def __init__(self):
self.window = gui.Application.instance.create_window("Test", 400, 768)
# self.window = gui.Application.instance.create_window("Test", 400, 768,
# x=50, y=100)
w = self.window # for more concise code
# Rather than specifying sizes in pixels, which may vary in size based
# on the monitor, especially on macOS which has 220 dpi monitors, use
# the em-size. This way sizings will be proportional to the font size,
# which will create a more visually consistent size across platforms.
em = w.theme.font_size
# Widgets are laid out in layouts: gui.Horiz, gui.Vert,
# gui.CollapsableVert, and gui.VGrid. By nesting the layouts we can
# achieve complex designs. Usually we use a vertical layout as the
# topmost widget, since widgets tend to be organized from top to bottom.
# Within that, we usually have a series of horizontal layouts for each
# row.
# 整個(gè)部件界面是垂直布局,然后部件內(nèi)部是行布局.
layout = gui.Vert(0, gui.Margins(0.5 * em, 0.5 * em, 0.5 * em,
0.5 * em)) # 這里選垂直布局Vert. em=w.theme.font_size
# 1, Create the menu. The menu is global (because the macOS menu is global),
# so only create it once.
if gui.Application.instance.menubar is None:
menubar = gui.Menu() # 菜單欄
test_menu = gui.Menu() # 添加第一個(gè)菜單
test_menu.add_item("An option", ExampleWindow.MENU_CHECKABLE) # 關(guān)聯(lián)數(shù)字1 MENU_CHECKABLE
test_menu.set_checked(ExampleWindow.MENU_CHECKABLE, True) # 關(guān)聯(lián)數(shù)字1 是否選中
test_menu.add_item("Unavailable feature", ExampleWindow.MENU_DISABLED) # 關(guān)聯(lián)數(shù)字2 MENU_DISABLED
test_menu.set_enabled(ExampleWindow.MENU_DISABLED, False) # 關(guān)聯(lián)數(shù)字2 是否開啟該item.
test_menu.add_separator()
test_menu.add_item("Quit", ExampleWindow.MENU_QUIT)
# On macOS the first menu item is the application menu item and will
# always be the name of the application (probably "Python"),
# regardless of what you pass in here. The application menu is
# typically where About..., Preferences..., and Quit go.
menubar.add_menu("Test", test_menu)
gui.Application.instance.menubar = menubar
# Each window needs to know what to do with the menu items, so we need
# to tell the window how to handle menu items.
# item關(guān)聯(lián)回調(diào)函數(shù)
w.set_on_menu_item_activated(ExampleWindow.MENU_CHECKABLE, # menubar.set_checked
self._on_menu_checkable)
w.set_on_menu_item_activated(ExampleWindow.MENU_QUIT, # 關(guān)停整個(gè)app
self._on_menu_quit)
def _on_menu_checkable(self):
gui.Application.instance.menubar.set_checked(
ExampleWindow.MENU_CHECKABLE,
not gui.Application.instance.menubar.is_checked(
ExampleWindow.MENU_CHECKABLE))
def _on_menu_quit(self):
gui.Application.instance.quit()2. 文件選擇部件
# 2, Create a file-chooser widget. One part will be a text edit widget for
# the filename and clicking on the button will let the user choose using
# the file dialog.
# 文件選擇部件. 選中按鈕將會(huì)展示目錄
self._fileedit = gui.TextEdit() # 生成文本框
filedlgbutton = gui.Button("...") # 生成選擇文件按鈕
filedlgbutton.horizontal_padding_em = 0.5 # em是相對(duì)度量單位. 以em為單位的水平填充
filedlgbutton.vertical_padding_em = 0
filedlgbutton.set_on_clicked(self._on_filedlg_button) # 按鈕關(guān)聯(lián)回調(diào)函數(shù)
# (Create the horizontal widget for the row. This will make sure the
# text editor takes up as much space as it can.)
fileedit_layout = gui.Horiz() # 水平布局
fileedit_layout.add_child(gui.Label("Model file")) # 水平布局內(nèi)先添加一個(gè)Label
fileedit_layout.add_child(self._fileedit) # 添加一個(gè)文本框
fileedit_layout.add_fixed(0.25 * em) # 在布局中添加固定數(shù)量的空白空間. em=w.theme.font_size
fileedit_layout.add_child(filedlgbutton) # 再添加按鈕
# add to the top-level (vertical) layout
layout.add_child(fileedit_layout)
def _on_filedlg_button(self): # 選擇文件按鈕
filedlg = gui.FileDialog(gui.FileDialog.OPEN, "Select file",
self.window.theme)
filedlg.add_filter(".obj .ply .stl", "Triangle mesh (.obj, .ply, .stl)") # 過濾條件, 提示說明文本.
filedlg.add_filter("", "All files") # 過濾條件為空,即不過濾.
filedlg.set_on_cancel(self._on_filedlg_cancel)
filedlg.set_on_done(self._on_filedlg_done)
self.window.show_dialog(filedlg)
3. 垂直可折疊部件
# 3, Create a collapsible vertical widget, which takes up enough vertical
# space for all its children when open, but only enough for text when
# closed. This is useful for property pages, so the user can hide sets
# of properties they rarely use. All layouts take a spacing parameter,
# which is the spacinging between items in the widget, and a margins
# parameter, which specifies the spacing of the left, top, right,
# bottom margins. (This acts like the 'padding' property in CSS.)
collapse = gui.CollapsableVert("Widgets", 0.33 * em,
gui.Margins(em, 0, 0, 0)) # 生成一個(gè)可折疊的垂直部件.3.1? label部件
# 3.1 label
self._label = gui.Label("this is a Label") # 生成一個(gè)label
self._label.text_color = gui.Color(1.0, 0.5, 0.0) # 設(shè)置label顏色
collapse.add_child(self._label)3.2 復(fù)選框checkbox
# 3.2 Create a checkbox. Checking or unchecking would usually be used to set
# a binary property, but in this case it will show a simple message box,
# which illustrates how to create simple dialogs.
cb = gui.Checkbox("Enable some really cool effect")
cb.set_on_checked(self._on_cb) # set the callback function: 可實(shí)現(xiàn)一些回調(diào)功能
collapse.add_child(cb)
def _on_cb(self, is_checked):
if is_checked:
text = "Sorry, effects are unimplemented"
else:
text = "Good choice"
self.show_message_dialog("There might be a problem...", text)3.3 色板
# 3.3 Create a color editor. We will change the color of the orange label
# above when the color changes. 色板
color = gui.ColorEdit()
color.color_value = self._label.text_color # 設(shè)置初值顏色
color.set_on_value_changed(self._on_color) # 選中后關(guān)聯(lián)回調(diào)功能, 這里的回調(diào)功能是修改_label顏色
collapse.add_child(color)
def _on_color(self, new_color):
self._label.text_color = new_color3.4 下拉框combobox
# 3.4 This is a combobox, nothing fancy here, just set a simple function to
# handle the user selecting an item. 下拉框
combo = gui.Combobox() # 下拉框
combo.add_item("Show point labels")
combo.add_item("Show point velocity")
combo.add_item("Show bounding boxes")
combo.set_on_selection_changed(self._on_combo) # 選中后關(guān)聯(lián)回調(diào): 打印信息
collapse.add_child(combo)
def _on_combo(self, new_val, new_idx):
print(new_idx, new_val) # 0 Show point labels3.5 撥動(dòng)開關(guān)toggleSwitch
# 3.5 This is a toggle switch, which is similar to a checkbox. To my way of
# thinking the difference is subtle: a checkbox toggles properties
# (for example, purely visual changes like enabling lighting) while a
# toggle switch is better for changing the behavior of the app (for
# example, turning on processing from the camera).
switch = gui.ToggleSwitch("Continuously update from camera") # 撥動(dòng)開關(guān)
switch.set_on_clicked(self._on_switch) # 選中后關(guān)聯(lián)回調(diào): 打印信息
collapse.add_child(switch)
def _on_switch(self, is_on):
if is_on:
print("Camera would now be running")
else:
print("Camera would now be off")3.6 部件代理WidgetProxy
?
??
# 3.6 部件代理. 通過按鈕控制部件代理顯示不同的圖片或者文字.
self.logo_idx = 0
proxy = gui.WidgetProxy() # 部件代理
def switch_proxy():
self.logo_idx += 1 # 每次點(diǎn)擊會(huì)遞增
if self.logo_idx % 3 == 0:
proxy.set_widget(None)
elif self.logo_idx % 3 == 1:
# Add a simple image
logo = gui.ImageWidget(basedir + "/icon-32.png")
proxy.set_widget(logo) # 顯示不同的圖片
else:
label = gui.Label(
'Open3D: A Modern Library for 3D Data Processing')
proxy.set_widget(label) # 顯示不同的文字.
w.set_needs_layout()
logo_btn = gui.Button('Switch Logo By WidgetProxy') # 按鈕
logo_btn.vertical_padding_em = 0
logo_btn.background_color = gui.Color(r=0, b=0.5, g=0)
logo_btn.set_on_clicked(switch_proxy) # 每次點(diǎn)擊會(huì)調(diào)用一次
collapse.add_child(logo_btn) # 先添加按鈕
collapse.add_child(proxy) # 再在按鈕下添加部件代理,該部件代理其實(shí)就是顯示圖片或者文字.3.7 WidgetStack
# 3.7 Widget stack demo: push_widget(). 動(dòng)態(tài)生成和減少多個(gè)部件
self._widget_idx = 0
hz = gui.Horiz(spacing=5) # 水平部件
push_widget_btn = gui.Button('Push widget') # 添加部件
push_widget_btn.vertical_padding_em = 0
pop_widget_btn = gui.Button('Pop widget') # 減少部件
pop_widget_btn.vertical_padding_em = 0
stack = gui.WidgetStack() # 生成多個(gè)部件
stack.set_on_top(lambda w: print(f'New widget is: {w.text}'))
hz.add_child(gui.Label('WidgetStack ')) # 先添加label
hz.add_child(push_widget_btn) # 再添加bn
hz.add_child(pop_widget_btn) # 再添加bn
hz.add_child(stack) # 再添加stack集
collapse.add_child(hz)
def push_widget(): # 自定義的,也可以用stack.push_widget()
self._widget_idx += 1
stack.push_widget(gui.Label(f'Widget {self._widget_idx}')) # 壓入部件.
push_widget_btn.set_on_clicked(push_widget) # 關(guān)聯(lián)生成部件函數(shù),也可以用stack.push_widget()
pop_widget_btn.set_on_clicked(stack.pop_widget) # 關(guān)聯(lián)減少部件函數(shù)3.8 列表
# 3.8 Add a list of items. 列表
lv = gui.ListView()
lv.set_items(["Ground", "Trees", "Buildings", "Cars", "People", "Cats"])
lv.selected_index = lv.selected_index + 2 # initially is -1, so now 1
lv.set_max_visible_items(4)
lv.set_on_selection_changed(self._on_list) # 當(dāng)改變選中時(shí)觸發(fā)回調(diào)函數(shù). 這里只是打印信息
collapse.add_child(lv)
def _on_list(self, new_val, is_dbl_click):
print(new_val)3.9 樹形視圖
# 3.9 Add a tree view. 樹形視圖
tree = gui.TreeView()
tree.add_text_item(tree.get_root_item(), "Camera") # 根部添加
geo_id = tree.add_text_item(tree.get_root_item(), "Geometries") # 根部添加
mesh_id = tree.add_text_item(geo_id, "Mesh") # "Geometries"下再添加
tree.add_text_item(mesh_id, "Triangles") # "Mesh"下再添加
tree.add_text_item(mesh_id, "Albedo texture")
tree.add_text_item(mesh_id, "Normal map")
points_id = tree.add_text_item(geo_id, "Points")
tree.can_select_items_with_children = True
tree.set_on_selection_changed(self._on_tree) # 選中時(shí)觸發(fā)回調(diào)函數(shù). 這里只是打印信息.
# does not call on_selection_changed: user did not change selection
tree.selected_item = points_id # 默認(rèn)選中此
collapse.add_child(tree)
def _on_tree(self, new_item_id):
print(new_item_id)3.10 數(shù)字編輯器NumberEdit
# 3.10 Add two number editors, one for integers and one for floating point
# Number editor can clamp numbers to a range, although this is more
# useful for integers than for floating point.
intedit = gui.NumberEdit(gui.NumberEdit.INT) # 整數(shù)編輯器
intedit.int_value = 0
intedit.set_limits(1, 19) # value coerced to 1
intedit.int_value = intedit.int_value + 2 # value should be 3
doubleedit = gui.NumberEdit(gui.NumberEdit.DOUBLE) # 雙精度編輯器
numlayout = gui.Horiz()
numlayout.add_child(gui.Label("int"))
numlayout.add_child(intedit)
numlayout.add_fixed(em) # manual spacing (could set it in Horiz() ctor)
numlayout.add_child(gui.Label("double"))
numlayout.add_child(doubleedit)
collapse.add_child(numlayout)3.11 進(jìn)度條 ProgressBar
# 3.11 Create a progress bar. It ranges from 0.0 to 1.0. 進(jìn)度條
self._progress = gui.ProgressBar()
self._progress.value = 0.25 # 25% complete
self._progress.value = self._progress.value + 0.08 # 0.25 + 0.08 = 33%
prog_layout = gui.Horiz(em)
prog_layout.add_child(gui.Label("Progress..."))
prog_layout.add_child(self._progress)
collapse.add_child(prog_layout)3.12 滾動(dòng)條Slider
# 3.12 Create a slider. It acts very similar to NumberEdit except that the. 滾動(dòng)條
# user moves a slider and cannot type the number.
slider = gui.Slider(gui.Slider.INT)
slider.set_limits(5, 13)
slider.set_on_value_changed(self._on_slider) # 觸發(fā)回調(diào)函數(shù),這里是改變上面的進(jìn)度條值.
collapse.add_child(slider)
def _on_slider(self, new_val):
self._progress.value = new_val / 20.03.13 文本框
# 3.13 Create a text editor. The placeholder text (if not empty) will be
# displayed when there is no text, as concise help, or visible tooltip. 文本框
tedit = gui.TextEdit()
tedit.placeholder_text = "Edit me some text here"
# on_text_changed fires whenever the user changes the text (but not if
# the text_value property is assigned to).
tedit.set_on_text_changed(self._on_text_changed) # 文本框內(nèi)內(nèi)容改變時(shí)觸發(fā)回調(diào). 這里是打印文本內(nèi)容.
# on_value_changed fires whenever the user signals that they are finished
# editing the text, either by pressing return or by clicking outside of
# the text editor, thus losing text focus.
tedit.set_on_value_changed(self._on_value_changed)
collapse.add_child(tedit)
def _on_text_changed(self, new_text):
print("edit:", new_text)
def _on_value_changed(self, new_text):
print("value:", new_text)
3.14 顯示3D數(shù)組VectorEdit
# 3.14 Create a widget for showing/editing a 3D vector. 顯示3D數(shù)組
vedit = gui.VectorEdit()
vedit.vector_value = [1, 2, 3]
vedit.set_on_value_changed(self._on_vedit) # 內(nèi)容改變時(shí)觸發(fā)回調(diào). 這里是打印文本內(nèi)容.
collapse.add_child(vedit)
def _on_vedit(self, new_val):
print(new_val)3.15 網(wǎng)格布局
# 3.15 網(wǎng)格布局. Create a VGrid layout. This layout specifies the number of columns
# (two, in this case), and will place the first child in the first
# column, the second in the second, the third in the first, the fourth
# in the second, etc.
# So:
# 2 cols 3 cols 4 cols
# | 1 | 2 | | 1 | 2 | 3 | | 1 | 2 | 3 | 4 |
# | 3 | 4 | | 4 | 5 | 6 | | 5 | 6 | 7 | 8 |
# | 5 | 6 | | 7 | 8 | 9 | | 9 | 10 | 11 | 12 |
# | ... | | ... | | ... |
vgrid = gui.VGrid(2) # 兩列
vgrid.add_child(gui.Label("Trees")) # 一行一行添加
vgrid.add_child(gui.Label("12 items"))
vgrid.add_child(gui.Label("People"))
vgrid.add_child(gui.Label("2 (93% certainty)"))
vgrid.add_child(gui.Label("Cars"))
vgrid.add_child(gui.Label("5 (87% certainty)"))
collapse.add_child(vgrid)3.16 選項(xiàng)卡TabControl
文章來源：http://www.zghlxwxcb.cn/news/detail-459511.html
# 3.16 選項(xiàng)卡控件. Create a tab control. This is really a set of N layouts on top of each
# other, but with only one selected.
tabs = gui.TabControl() # 下面會(huì)依次創(chuàng)建4個(gè)選項(xiàng)
tab1 = gui.Vert() # 第一個(gè)選項(xiàng)管理的是一個(gè)垂直布局.
tab1.add_child(gui.Checkbox("Enable option 1")) # 每一個(gè)都是Checkbox
tab1.add_child(gui.Checkbox("Enable option 2"))
tab1.add_child(gui.Checkbox("Enable option 3"))
tabs.add_tab("Options", tab1)
tab2 = gui.Vert() # 一個(gè)垂直布局.
tab2.add_child(gui.Label("No plugins detected"))
tab2.add_stretch()
tabs.add_tab("Plugins", tab2)
tab3 = gui.RadioButton(gui.RadioButton.VERT) # 創(chuàng)建單選按鈕, 按鈕按垂直排列VERT
tab3.set_items(["Apple", "Orange"])
def vt_changed(idx):
print(f"current cargo: {tab3.selected_value}")
tab3.set_on_selection_changed(vt_changed) # 內(nèi)容改變時(shí)觸發(fā)回調(diào). 這里是打印文本
tabs.add_tab("Cargo", tab3)
tab4 = gui.RadioButton(gui.RadioButton.HORIZ) # 創(chuàng)建單選按鈕, 按鈕按水平排列HORIZ
tab4.set_items(["Air plane", "Train", "Bus"])
def hz_changed(idx):
print(f"current traffic plan: {tab4.selected_value}")
tab4.set_on_selection_changed(hz_changed) # 內(nèi)容改變時(shí)觸發(fā)回調(diào). 這里是打印文本
tabs.add_tab("Traffic", tab4)
collapse.add_child(tabs)3.17 終止程序
文章來源地址http://www.zghlxwxcb.cn/news/detail-459511.html
gui.Application.instance.quit()
# 3.17 Quit button. (Typically this is a menu item) 關(guān)閉應(yīng)用按鈕
button_layout = gui.Horiz()
ok_button = gui.Button("Ok")
ok_button.set_on_clicked(self._on_ok) # 觸發(fā)回調(diào),關(guān)閉
button_layout.add_stretch() # 添加一個(gè)拉伸空白空間
button_layout.add_child(ok_button) #
layout.add_child(button_layout)
# We're done, set the window's layout
w.add_child(layout)
def _on_ok(self):
gui.Application.instance.quit()4. 完整程序
import open3d.visualization.gui as gui
import os.path
basedir = os.path.dirname(os.path.realpath(__file__))
class ExampleWindow:
MENU_CHECKABLE = 1
MENU_DISABLED = 2
MENU_QUIT = 3
def __init__(self):
self.window = gui.Application.instance.create_window("Test", 400, 768)
# self.window = gui.Application.instance.create_window("Test", 400, 768,
# x=50, y=100)
w = self.window # for more concise code
# Rather than specifying sizes in pixels, which may vary in size based
# on the monitor, especially on macOS which has 220 dpi monitors, use
# the em-size. This way sizings will be proportional to the font size,
# which will create a more visually consistent size across platforms.
em = w.theme.font_size
# Widgets are laid out in layouts: gui.Horiz, gui.Vert,
# gui.CollapsableVert, and gui.VGrid. By nesting the layouts we can
# achieve complex designs. Usually we use a vertical layout as the
# topmost widget, since widgets tend to be organized from top to bottom.
# Within that, we usually have a series of horizontal layouts for each
# row.
# 部件通常是垂直布局,然后部件內(nèi)部是行布局.
layout = gui.Vert(0, gui.Margins(0.5 * em, 0.5 * em, 0.5 * em,
0.5 * em)) # 這里選垂直布局Vert. em=w.theme.font_size
# 1, Create the menu. The menu is global (because the macOS menu is global),
# so only create it once.
if gui.Application.instance.menubar is None:
menubar = gui.Menu() # 菜單欄
test_menu = gui.Menu() # 添加第一個(gè)菜單
test_menu.add_item("An option", ExampleWindow.MENU_CHECKABLE) # 關(guān)聯(lián)數(shù)字1 MENU_CHECKABLE
test_menu.set_checked(ExampleWindow.MENU_CHECKABLE, True) # 關(guān)聯(lián)數(shù)字1 是否選中
test_menu.add_item("Unavailable feature", ExampleWindow.MENU_DISABLED) # 關(guān)聯(lián)數(shù)字2 MENU_DISABLED
test_menu.set_enabled(ExampleWindow.MENU_DISABLED, False) # 關(guān)聯(lián)數(shù)字2 是否開啟該item.
test_menu.add_separator()
test_menu.add_item("Quit", ExampleWindow.MENU_QUIT)
# On macOS the first menu item is the application menu item and will
# always be the name of the application (probably "Python"),
# regardless of what you pass in here. The application menu is
# typically where About..., Preferences..., and Quit go.
menubar.add_menu("Test", test_menu)
gui.Application.instance.menubar = menubar
# Each window needs to know what to do with the menu items, so we need
# to tell the window how to handle menu items.
# item關(guān)聯(lián)回調(diào)函數(shù)
w.set_on_menu_item_activated(ExampleWindow.MENU_CHECKABLE, # menubar.set_checked
self._on_menu_checkable)
w.set_on_menu_item_activated(ExampleWindow.MENU_QUIT, # 關(guān)停整個(gè)app
self._on_menu_quit)
# 2, Create a file-chooser widget. One part will be a text edit widget for
# the filename and clicking on the button will let the user choose using
# the file dialog.
# 文件選擇部件. 選中按鈕將會(huì)展示目錄
self._fileedit = gui.TextEdit() # 生成文本框
filedlgbutton = gui.Button("...") # 生成選擇文件按鈕
filedlgbutton.horizontal_padding_em = 0.5 # em是相對(duì)度量單位. 以em為單位的水平填充
filedlgbutton.vertical_padding_em = 0
filedlgbutton.set_on_clicked(self._on_filedlg_button) # 按鈕關(guān)聯(lián)回調(diào)函數(shù)
# (Create the horizontal widget for the row. This will make sure the
# text editor takes up as much space as it can.)
fileedit_layout = gui.Horiz() # 水平布局
fileedit_layout.add_child(gui.Label("Model file")) # 水平布局內(nèi)先添加一個(gè)Label
fileedit_layout.add_child(self._fileedit) # 添加一個(gè)文本框
fileedit_layout.add_fixed(0.25 * em) # 在布局中添加固定數(shù)量的空白空間. em=w.theme.font_size
fileedit_layout.add_child(filedlgbutton) # 再添加按鈕
# add to the top-level (vertical) layout
layout.add_child(fileedit_layout)
# 3, Create a collapsible vertical widget, which takes up enough vertical
# space for all its children when open, but only enough for text when
# closed. This is useful for property pages, so the user can hide sets
# of properties they rarely use. All layouts take a spacing parameter,
# which is the spacinging between items in the widget, and a margins
# parameter, which specifies the spacing of the left, top, right,
# bottom margins. (This acts like the 'padding' property in CSS.)
collapse = gui.CollapsableVert("Widgets", 0.33 * em,
gui.Margins(em, 0, 0, 0)) # 生成一個(gè)可折疊的垂直部件.
# 3.1 label
self._label = gui.Label("this is a Label") # 生成一個(gè)label
self._label.text_color = gui.Color(1.0, 0.5, 0.0) # 設(shè)置label顏色
collapse.add_child(self._label)
# 3.2 Create a checkbox. Checking or unchecking would usually be used to set
# a binary property, but in this case it will show a simple message box,
# which illustrates how to create simple dialogs.
cb = gui.Checkbox("Enable some really cool effect")
cb.set_on_checked(self._on_cb) # set the callback function: 可實(shí)現(xiàn)一些回調(diào)功能
collapse.add_child(cb)
# 3.3 Create a color editor. We will change the color of the orange label
# above when the color changes. 色板
color = gui.ColorEdit()
color.color_value = self._label.text_color # 設(shè)置初值顏色
color.set_on_value_changed(self._on_color) # 選中后關(guān)聯(lián)回調(diào)功能, 這里的回調(diào)功能是修改_label顏色
collapse.add_child(color)
# 3.4 This is a combobox, nothing fancy here, just set a simple function to
# handle the user selecting an item. 下拉框
combo = gui.Combobox() # 下拉框
combo.add_item("Show point labels")
combo.add_item("Show point velocity")
combo.add_item("Show bounding boxes")
combo.set_on_selection_changed(self._on_combo) # 選中后關(guān)聯(lián)回調(diào): 打印信息
collapse.add_child(combo)
# 3.5 This is a toggle switch, which is similar to a checkbox. To my way of
# thinking the difference is subtle: a checkbox toggles properties
# (for example, purely visual changes like enabling lighting) while a
# toggle switch is better for changing the behavior of the app (for
# example, turning on processing from the camera).
switch = gui.ToggleSwitch("Continuously update from camera") # 撥動(dòng)開關(guān)
switch.set_on_clicked(self._on_switch) # 選中后關(guān)聯(lián)回調(diào): 打印信息
collapse.add_child(switch)
# 3.6 部件代理. 通過按鈕控制部件代理顯示不同的圖片或者文字.
self.logo_idx = 0
proxy = gui.WidgetProxy() # 部件代理
def switch_proxy():
self.logo_idx += 1 # 每次點(diǎn)擊會(huì)遞增
if self.logo_idx % 3 == 0:
proxy.set_widget(None)
elif self.logo_idx % 3 == 1:
# Add a simple image
logo = gui.ImageWidget(basedir + "/icon-32.png")
proxy.set_widget(logo) # 顯示不同的圖片
else:
label = gui.Label(
'Open3D: A Modern Library for 3D Data Processing')
proxy.set_widget(label) # 顯示不同的文字.
w.set_needs_layout()
logo_btn = gui.Button('Switch Logo By WidgetProxy') # 按鈕
logo_btn.vertical_padding_em = 0
logo_btn.background_color = gui.Color(r=0, b=0.5, g=0)
logo_btn.set_on_clicked(switch_proxy) # 每次點(diǎn)擊會(huì)調(diào)用一次
collapse.add_child(logo_btn) # 先添加按鈕
collapse.add_child(proxy) # 再在按鈕下添加部件代理,該部件代理其實(shí)就是顯示圖片或者文字.
# 3.7 Widget stack demo: push_widget(). 動(dòng)態(tài)生成和減少多個(gè)部件
self._widget_idx = 0
hz = gui.Horiz(spacing=5) # 水平部件
push_widget_btn = gui.Button('Push widget') # 添加部件
push_widget_btn.vertical_padding_em = 0
pop_widget_btn = gui.Button('Pop widget') # 減少部件
pop_widget_btn.vertical_padding_em = 0
stack = gui.WidgetStack() # 生成多個(gè)部件
stack.set_on_top(lambda w: print(f'New widget is: {w.text}'))
hz.add_child(gui.Label('WidgetStack ')) # 先添加label
hz.add_child(push_widget_btn) # 再添加bn
hz.add_child(pop_widget_btn) # 再添加bn
hz.add_child(stack) # 再添加stack集
collapse.add_child(hz)
def push_widget(): # 自定義的,也可以用stack.push_widget()
self._widget_idx += 1
stack.push_widget(gui.Label(f'Widget {self._widget_idx}')) # 壓入部件.
push_widget_btn.set_on_clicked(push_widget) # 關(guān)聯(lián)生成部件函數(shù),也可以用stack.push_widget()
pop_widget_btn.set_on_clicked(stack.pop_widget) # 關(guān)聯(lián)減少部件函數(shù)
# 3.8 Add a list of items. 列表
lv = gui.ListView()
lv.set_items(["Ground", "Trees", "Buildings", "Cars", "People", "Cats"])
lv.selected_index = lv.selected_index + 2 # initially is -1, so now 1
lv.set_max_visible_items(4)
lv.set_on_selection_changed(self._on_list) # 當(dāng)改變選中時(shí)觸發(fā)回調(diào)函數(shù). 這里只是打印信息
collapse.add_child(lv)
# 3.9 Add a tree view. 樹形視圖
tree = gui.TreeView()
tree.add_text_item(tree.get_root_item(), "Camera") # 根部添加
geo_id = tree.add_text_item(tree.get_root_item(), "Geometries") # 根部添加
mesh_id = tree.add_text_item(geo_id, "Mesh") # "Geometries"下再添加
tree.add_text_item(mesh_id, "Triangles") # "Mesh"下再添加
tree.add_text_item(mesh_id, "Albedo texture")
tree.add_text_item(mesh_id, "Normal map")
points_id = tree.add_text_item(geo_id, "Points")
tree.can_select_items_with_children = True
tree.set_on_selection_changed(self._on_tree) # 選中時(shí)觸發(fā)回調(diào)函數(shù). 這里只是打印信息.
# does not call on_selection_changed: user did not change selection
tree.selected_item = points_id # 默認(rèn)選中此
collapse.add_child(tree)
# 3.10 Add two number editors, one for integers and one for floating point
# Number editor can clamp numbers to a range, although this is more
# useful for integers than for floating point.
intedit = gui.NumberEdit(gui.NumberEdit.INT) # 整數(shù)編輯器
intedit.int_value = 0
intedit.set_limits(1, 19) # value coerced to 1
intedit.int_value = intedit.int_value + 2 # value should be 3
doubleedit = gui.NumberEdit(gui.NumberEdit.DOUBLE) # 雙精度編輯器
numlayout = gui.Horiz()
numlayout.add_child(gui.Label("int"))
numlayout.add_child(intedit)
numlayout.add_fixed(em) # manual spacing (could set it in Horiz() ctor)
numlayout.add_child(gui.Label("double"))
numlayout.add_child(doubleedit)
collapse.add_child(numlayout)
# 3.11 Create a progress bar. It ranges from 0.0 to 1.0. 進(jìn)度條
self._progress = gui.ProgressBar()
self._progress.value = 0.25 # 25% complete
self._progress.value = self._progress.value + 0.08 # 0.25 + 0.08 = 33%
prog_layout = gui.Horiz(em)
prog_layout.add_child(gui.Label("Progress..."))
prog_layout.add_child(self._progress)
collapse.add_child(prog_layout)
# 3.12 Create a slider. It acts very similar to NumberEdit except that the. 滾動(dòng)條
# user moves a slider and cannot type the number.
slider = gui.Slider(gui.Slider.INT)
slider.set_limits(5, 13)
slider.set_on_value_changed(self._on_slider) # 觸發(fā)回調(diào)函數(shù),這里是改變上面的進(jìn)度條值.
collapse.add_child(slider)
# 3.13 Create a text editor. The placeholder text (if not empty) will be
# displayed when there is no text, as concise help, or visible tooltip. 文本框
tedit = gui.TextEdit()
tedit.placeholder_text = "Edit me some text here"
# on_text_changed fires whenever the user changes the text (but not if
# the text_value property is assigned to).
tedit.set_on_text_changed(self._on_text_changed) # 文本框內(nèi)內(nèi)容改變時(shí)觸發(fā)回調(diào). 這里是打印文本內(nèi)容.
# on_value_changed fires whenever the user signals that they are finished
# editing the text, either by pressing return or by clicking outside of
# the text editor, thus losing text focus.
tedit.set_on_value_changed(self._on_value_changed)
collapse.add_child(tedit)
# 3.14 Create a widget for showing/editing a 3D vector. 顯示3D數(shù)組
vedit = gui.VectorEdit()
vedit.vector_value = [1, 2, 3]
vedit.set_on_value_changed(self._on_vedit) # 內(nèi)容改變時(shí)觸發(fā)回調(diào). 這里是打印文本內(nèi)容.
collapse.add_child(vedit)
# 3.15 網(wǎng)格布局. Create a VGrid layout. This layout specifies the number of columns
# (two, in this case), and will place the first child in the first
# column, the second in the second, the third in the first, the fourth
# in the second, etc.
# So:
# 2 cols 3 cols 4 cols
# | 1 | 2 | | 1 | 2 | 3 | | 1 | 2 | 3 | 4 |
# | 3 | 4 | | 4 | 5 | 6 | | 5 | 6 | 7 | 8 |
# | 5 | 6 | | 7 | 8 | 9 | | 9 | 10 | 11 | 12 |
# | ... | | ... | | ... |
vgrid = gui.VGrid(2) # 兩列
vgrid.add_child(gui.Label("Trees")) # 一行一行添加
vgrid.add_child(gui.Label("12 items"))
vgrid.add_child(gui.Label("People"))
vgrid.add_child(gui.Label("2 (93% certainty)"))
vgrid.add_child(gui.Label("Cars"))
vgrid.add_child(gui.Label("5 (87% certainty)"))
collapse.add_child(vgrid)
# 3.16 選項(xiàng)卡控件. Create a tab control. This is really a set of N layouts on top of each
# other, but with only one selected.
tabs = gui.TabControl() # 下面會(huì)依次創(chuàng)建4個(gè)選項(xiàng)
tab1 = gui.Vert() # 第一個(gè)選項(xiàng)管理的是一個(gè)垂直布局.
tab1.add_child(gui.Checkbox("Enable option 1")) # 每一個(gè)都是Checkbox
tab1.add_child(gui.Checkbox("Enable option 2"))
tab1.add_child(gui.Checkbox("Enable option 3"))
tabs.add_tab("Options", tab1)
tab2 = gui.Vert() # 一個(gè)垂直布局.
tab2.add_child(gui.Label("No plugins detected"))
tab2.add_stretch()
tabs.add_tab("Plugins", tab2)
tab3 = gui.RadioButton(gui.RadioButton.VERT) # 創(chuàng)建單選按鈕, 按鈕按垂直排列VERT
tab3.set_items(["Apple", "Orange"])
def vt_changed(idx):
print(f"current cargo: {tab3.selected_value}")
tab3.set_on_selection_changed(vt_changed) # 內(nèi)容改變時(shí)觸發(fā)回調(diào). 這里是打印文本
tabs.add_tab("Cargo", tab3)
tab4 = gui.RadioButton(gui.RadioButton.HORIZ) # 創(chuàng)建單選按鈕, 按鈕按水平排列HORIZ
tab4.set_items(["Air plane", "Train", "Bus"])
def hz_changed(idx):
print(f"current traffic plan: {tab4.selected_value}")
tab4.set_on_selection_changed(hz_changed) # 內(nèi)容改變時(shí)觸發(fā)回調(diào). 這里是打印文本
tabs.add_tab("Traffic", tab4)
collapse.add_child(tabs)
layout.add_child(collapse)
# 3.17 Quit button. (Typically this is a menu item) 關(guān)閉應(yīng)用按鈕
button_layout = gui.Horiz()
ok_button = gui.Button("Ok")
ok_button.set_on_clicked(self._on_ok) # 觸發(fā)回調(diào),關(guān)閉
button_layout.add_stretch() # 添加一個(gè)拉伸空白空間
button_layout.add_child(ok_button) #
layout.add_child(button_layout)
# We're done, set the window's layout
w.add_child(layout)
def _on_filedlg_button(self): # 選擇文件按鈕
filedlg = gui.FileDialog(gui.FileDialog.OPEN, "Select file",
self.window.theme)
filedlg.add_filter(".obj .ply .stl", "Triangle mesh (.obj, .ply, .stl)") # 過濾條件, 提示說明文本.
filedlg.add_filter("", "All files") # 過濾條件為空,即不過濾.
filedlg.set_on_cancel(self._on_filedlg_cancel)
filedlg.set_on_done(self._on_filedlg_done)
self.window.show_dialog(filedlg)
def _on_filedlg_cancel(self):
self.window.close_dialog()
def _on_filedlg_done(self, path):
self._fileedit.text_value = path
self.window.close_dialog()
def _on_cb(self, is_checked):
if is_checked:
text = "Sorry, effects are unimplemented"
else:
text = "Good choice"
self.show_message_dialog("There might be a problem...", text)
def _on_switch(self, is_on):
if is_on:
print("Camera would now be running")
else:
print("Camera would now be off")
# This function is essentially the same as window.show_message_box(),
# so for something this simple just use that, but it illustrates making a
# dialog.
def show_message_dialog(self, title, message):
# A Dialog is just a widget, so you make its child a layout just like
# a Window.
dlg = gui.Dialog(title)
# Add the message text
em = self.window.theme.font_size
dlg_layout = gui.Vert(em, gui.Margins(em, em, em, em))
dlg_layout.add_child(gui.Label(message))
# Add the Ok button. We need to define a callback function to handle
# the click.
ok_button = gui.Button("Ok")
ok_button.set_on_clicked(self._on_dialog_ok)
# We want the Ok button to be an the right side, so we need to add
# a stretch item to the layout, otherwise the button will be the size
# of the entire row. A stretch item takes up as much space as it can,
# which forces the button to be its minimum size.
button_layout = gui.Horiz()
button_layout.add_stretch()
button_layout.add_child(ok_button)
# Add the button layout,
dlg_layout.add_child(button_layout)
# ... then add the layout as the child of the Dialog
dlg.add_child(dlg_layout)
# ... and now we can show the dialog
self.window.show_dialog(dlg)
def _on_dialog_ok(self):
self.window.close_dialog()
def _on_color(self, new_color):
self._label.text_color = new_color
def _on_combo(self, new_val, new_idx):
print(new_idx, new_val)
def _on_list(self, new_val, is_dbl_click):
print(new_val)
def _on_tree(self, new_item_id):
print(new_item_id)
def _on_slider(self, new_val):
self._progress.value = new_val / 20.0
def _on_text_changed(self, new_text):
print("edit:", new_text)
def _on_value_changed(self, new_text):
print("value:", new_text)
def _on_vedit(self, new_val):
print(new_val)
def _on_ok(self):
gui.Application.instance.quit()
def _on_menu_checkable(self):
gui.Application.instance.menubar.set_checked(
ExampleWindow.MENU_CHECKABLE,
not gui.Application.instance.menubar.is_checked(
ExampleWindow.MENU_CHECKABLE))
def _on_menu_quit(self):
gui.Application.instance.quit()
# This class is essentially the same as window.show_message_box(),
# so for something this simple just use that, but it illustrates making a
# dialog.
class MessageBox:
def __init__(self, title, message):
self._window = None
# A Dialog is just a widget, so you make its child a layout just like
# a Window.
dlg = gui.Dialog(title)
# Add the message text
em = self.window.theme.font_size
dlg_layout = gui.Vert(em, gui.Margins(em, em, em, em))
dlg_layout.add_child(gui.Label(message))
# Add the Ok button. We need to define a callback function to handle
# the click.
ok_button = gui.Button("Ok")
ok_button.set_on_clicked(self._on_ok)
# We want the Ok button to be an the right side, so we need to add
# a stretch item to the layout, otherwise the button will be the size
# of the entire row. A stretch item takes up as much space as it can,
# which forces the button to be its minimum size.
button_layout = gui.Horiz()
button_layout.add_stretch()
button_layout.add_child(ok_button)
# Add the button layout,
dlg_layout.add_child(button_layout)
# ... then add the layout as the child of the Dialog
dlg.add_child(dlg_layout)
def show(self, window):
self._window = window
def _on_ok(self):
self._window.close_dialog()
def main():
# We need to initialize the application, which finds the necessary shaders for
# rendering and prepares the cross-platform window abstraction.
gui.Application.instance.initialize()
w = ExampleWindow()
# Run the event loop. This will not return until the last window is closed.
gui.Application.instance.run()
if __name__ == "__main__":
main()到了這里，關(guān)于open3d-gui 所有不同種類的部件的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
