Qt designer设计UI实例：双视图立体匹配与重建的可视化UI

• 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：右键当前的组件$\to$选择 改变多信息文本$\to$输入静态文本内容、修改期望的格式（字体、大小、布局等）。

3.2.2 划定UI的主要区域

可以使用Containers中的Scroll Area组件，好处是如果内容超出区域会自动在边界生成滑动条：

• 手动拉伸边界调节区域大小。

3.2.3 功能区分块

可以使用Containers中的Group Box组件：

• 1：将Group Box小组件单击拖动到设计窗口Form中，双击左上角的文本修改功能区命名；
• 2：右键当前的组件$\to$选择 改变样式表；
• 3：点击添加字体修改功能区命名期望的格式（字体、大小等）。

3.2.4 用户交互区

可以使用Input Widgets中的Combo Box组件提供用户选择交互，使用Buttons中的Push Button组件提供用户按钮操作：

• 1：将Combo Box小组件单击拖动到设计窗口Form中；
• 2：双击当前的组件$\to$编辑 添加/删除选项；
• 3：将Push Button小组件单击拖动到设计窗口Form中，双击组件修改命名。

有序的步骤文本设置参考3.2.1 静态文本。

3.2.5 结果可视化窗口

可以使用Display Widgets中的Graphics View组件可视化图片，使用Text Browser组件输出文本信息。完整的UI如下图所示：

---

4. 自定义UI中组件的功能

Qt designer只是一个供我们设计UI的图形化编程的软件平台，它并不能帮我们完全实现所有组件的自定义功能。比如我们可以修改所有组件的文本内容和格式，甚至修改Combo Box组件中的选项，但这些选项并未被定义，运行时无法执行特定的功能。

开发一个完整的UI需要配合Python和PyQt5的包对组件进行自定义。这部分还在持续创作中，后续文章完成后会将链接放在本节。

---

创作不易，麻烦点点赞和关注咯！