- PyQt5和Qt designer的详细安装教程:https://blog.csdn.net/qq_43811536/article/details/135185233?spm=1001.2014.3001.5501
- Qt designer界面和所有组件功能的详细介绍:https://blog.csdn.net/qq_43811536/article/details/135186862?spm=1001.2014.3001.5501
1. 实例:双视图立体匹配与重建的可视化UI
- 输入:一对左右眼视图的图像。
- 任务:对输入的一对带相机参数的左右眼图像数据,实现SAD、NCC 两种局部的立体匹配方法进行重建。
-
输出:
- 基本的交互界面供用户选择立体匹配算法以及输入的图片。
- 将每种立体匹配方法所用的时间以及图片大小信息显示出来。
- 可视化重建的结果,如点云,深度图,视差图等,可以使用Meshlab 软件
或者Open3D 进行可视化
2. 一个简单的UI展示
针对上述实例要求,设计了一个简单的符合要求的UI如下图所示。界面包含图片选择(Picture)、匹配算法选择(Matching algorithm)、成本函数选择(Matching cost)、运行按钮(Run)、图片显示窗口(Picture visualization)、结果显示窗口(Results display)和输出信息窗口(Output information)。
3. 设计流程
3.1 设计大纲
- 根据实例要求,一个最简单的UI包括“功能展示”、“用户交互区”以及“结果可视化窗口”。
- 功能展示:可以通过一个醒目的标题以及有序的操作步骤来告诉用户这个UI界面的主要功能是什么,还可以引导用户在没有任何先验知识的情况下按步骤操作。
-
用户交互区:这部分类似于软件UI的导航栏,不过为了简单期间不需要设计过于复杂,按照一般的操作习惯,我们可以把用户交互区放在UI的左边,然后将有序的操作步骤依次分块呈现即可。功能区分块可以通过
Containers
里的Group Box
实现。 - 结果可视化窗口:结果可视化区域应该占绝对主要的面积,可以放在UI右半边。分三部分——当前双视图可视化、重建结果可视化以及文本信息输出。
3.2 UI 设计
3.2.1 静态文本
UI中的静态文本可以使用Display Widgets
中的Label
组件:
- 1:将
Label
小组件单击拖动到设计窗口Form
中; - 2:右键当前的组件 → \rightarrow →选择 改变多信息文本 → \rightarrow →输入静态文本内容、修改期望的格式(字体、大小、布局等)。
3.2.2 划定UI的主要区域
可以使用Containers
中的Scroll Area
组件,好处是如果内容超出区域会自动在边界生成滑动条:
- 手动拉伸边界调节区域大小。
3.2.3 功能区分块
可以使用Containers
中的Group Box
组件:
- 1:将
Group Box
小组件单击拖动到设计窗口Form
中,双击左上角的文本修改功能区命名; - 2:右键当前的组件 → \rightarrow →选择 改变样式表;
- 3:点击添加字体修改功能区命名期望的格式(字体、大小等)。
3.2.4 用户交互区
可以使用Input Widgets
中的Combo Box
组件提供用户选择交互,使用Buttons
中的Push Button
组件提供用户按钮操作:
- 1:将
Combo Box
小组件单击拖动到设计窗口Form
中; - 2:双击当前的组件 → \rightarrow →编辑 添加/删除选项;
- 3:将
Push Button
小组件单击拖动到设计窗口Form
中,双击组件修改命名。
有序的步骤文本设置参考3.2.1 静态文本。
3.2.5 结果可视化窗口
可以使用Display Widgets
中的Graphics View
组件可视化图片,使用Text Browser
组件输出文本信息。完整的UI如下图所示:
4. 自定义UI中组件的功能
Qt designer只是一个供我们设计UI的图形化编程的软件平台,它并不能帮我们完全实现所有组件的自定义功能。比如我们可以修改所有组件的文本内容和格式,甚至修改Combo Box
组件中的选项,但这些选项并未被定义,运行时无法执行特定的功能。文章来源:https://www.toymoban.com/news/detail-762077.html
开发一个完整的UI需要配合Python和PyQt5的包对组件进行自定义。这部分还在持续创作中,后续文章完成后会将链接放在本节。文章来源地址https://www.toymoban.com/news/detail-762077.html
到了这里,关于Qt designer设计UI实例:双视图立体匹配与重建的可视化UI的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!