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

这篇具有很好参考价值的文章主要介绍了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)

Qt designer设计UI实例:双视图立体匹配与重建的可视化UI,科研经验,CV,qt,ui,开发语言,opencv


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 输入静态文本内容、修改期望的格式(字体、大小、布局等)。

Qt designer设计UI实例:双视图立体匹配与重建的可视化UI,科研经验,CV,qt,ui,开发语言,opencv

3.2.2 划定UI的主要区域

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

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

Qt designer设计UI实例:双视图立体匹配与重建的可视化UI,科研经验,CV,qt,ui,开发语言,opencv

3.2.3 功能区分块

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

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

Qt designer设计UI实例:双视图立体匹配与重建的可视化UI,科研经验,CV,qt,ui,开发语言,opencv

3.2.4 用户交互区

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

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

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

Qt designer设计UI实例:双视图立体匹配与重建的可视化UI,科研经验,CV,qt,ui,开发语言,opencv

3.2.5 结果可视化窗口

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

Qt designer设计UI实例:双视图立体匹配与重建的可视化UI,科研经验,CV,qt,ui,开发语言,opencv


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

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

开发一个完整的UI需要配合Python和PyQt5的包对组件进行自定义。这部分还在持续创作中,后续文章完成后会将链接放在本节。文章来源地址https://www.toymoban.com/news/detail-762077.html


创作不易,麻烦点点赞和关注咯!

到了这里,关于Qt designer设计UI实例:双视图立体匹配与重建的可视化UI的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 12-2_Qt 5.9 C++开发指南_自定义Qt Designer 插件(UI 设计器自定义界面组件的 Widget 插件,直接安装到 UI设计器组件面板里,如同 Qt 自带的界面设计组件一样)

    上篇使用提升法(promotion)来创建自定义组件,本篇为 UI 设计器设计自定义界面组件的 Widget 插件,直接安装到 UI设计器的组件面板里,如同 Qt 自带的界面设计组件一样使用,在设计时就能看到组件的实际显示效果,只是编译和运行时需要使用到插件的动态链接库 (Windows 平台上

    2024年02月05日
    浏览(51)
  • 【QtQuick3D学习】使用Qt Design Studio设计UI并导入Qt Creator项目中使用——基于C++和Cmake

    新版本中项目文件全部放在了一起,见 【QtQuick3D学习】使用Qt Creator创建Qt Design Studio项目测试运行——基于C++和Cmake 【QtQuick3D学习】使用Qt Design Studio创建项目并使用Qt Creator打开测试运行——基于C++和Cmake 这里测试前后端分离,即使用Qt Design Studio设计前端和交互逻辑,C++写后

    2024年02月01日
    浏览(36)
  • Qt5开发及实例V2.0-第七章-Qt图形视图框架

    7.1.1 Graphics View的特点 Graphics View框架结构的主要特点如下。 (1)Graphics View框架结构中,系统可以利用Qt绘图系统的反锯齿、OpenGL工具来改善绘图性能。 (2)Graphics View支持事件传播体系结构,可以使图元在场景(scene)中的交互能力提高1倍,图元能够处理键盘事件和鼠标事

    2024年02月07日
    浏览(48)
  • Qt教程 — 2.1 如何使用Qt Designer 开发UI程序

    目录 1 Qt Designer简介 2 编辑UI界面 2.1 在 UI 界面添加一个Label 2.2 在 UI 界面添加一个按钮 2.3 在 UI 文件里连接信号与槽 方法一:通过信号和槽编辑栏 方法二:通过导航区信号和槽编按钮 方法三:通过跳转编辑代码实现—通过按钮输出文字 Qt Designer 是属于 Qt Creator 的一个功能

    2024年03月22日
    浏览(52)
  • 界面开发框架Qt新手入门教程:Dir视图使用实例

    Qt 是目前最先进、最完整的跨平台C++开发工具。它不仅完全实现了一次编写,所有平台无差别运行,更提供了几乎所有开发过程中需要用到的工具。如今,Qt已被运用于超过70个行业、数千家企业,支持数百万设备及应用。 点击获取Qt Widget组件下载 本示例演示了树形视图的用

    2024年02月08日
    浏览(46)
  • VS打开Qt Designer(UI文件.ui)失败的解决方法

    VS打开Qt Designer失败的根本原因:VS中默认的Qt Designer路径是错误的。所以要正常使用需要重新设置 1、设置VS中打开Designer的路径 添加成功后,将其设置为默认值

    2024年04月11日
    浏览(42)
  • 将Qt Design Studio中创建的UI文件导入Qt Creator中

    从Qt Design Studio中创建了UI文件,我这里是跟着官方文档示例做的一个ui文件Loginui1。 在Qt Creator中创建新的项目: 我这里将项目取名为Import_UI 创建好后的项目结构: 右键main.qml 选择Remove 这里确定,也可以勾选彻底删除,之后不会用到这个文件。 接着还要弹窗,我们选择 否

    2024年02月15日
    浏览(56)
  • Qt Designer生成ui文件,如何转py文件,如何运行

    下面将逐步介绍ui文件如何转py文件,怎么运行的具体操作步骤 ui文件转py文件 1.使用Qt Designer生成ui文件,保存到本地 2.输入 cmd ,打开命令行窗口 3.进入ui文件的目录下,文件路径使用你本地存放ui文件的位置 4.在命令行中输入 pyuic5 -o py文件名 ui文件名 5.查看ui文件所在的位置

    2024年02月04日
    浏览(43)
  • QT Designer 生成的ui文件转化成py文件以及简单使用

    首先用QTdesigner 设计你的界面 然后保存成.ui文件 这一步大家应该都可以做到,就不细讲了 然后就是转换步骤 使用cmd进入ui所在目录 或者在pycharm项目里的终端进入ui所在目录 然后输入下列语句 这里的outputUI就可以替换成你想要的输出文件名 InputUI就是你想要转换的ui文件名 稍

    2023年04月08日
    浏览(49)
  • PySide6:Qt Designer UI文件的两种使用方式

    通过Qt Designer(PyQt6与PySide6对应的Designer设计的界面生成的UI文件有区别)设计的界面会生成对应的UI文件,一般会使用PyUIC工具将UI文件转换为对应的Py文件来使用,后面每次界面发生更新时都要重新转换一次,比较麻烦;另外,如果直接在UI文件中添加自己的代码,如信号与槽

    2024年02月11日
    浏览(45)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包