使用VS Code 将 Qt 项目导入到 Torizon

Posted 2021-06-24 toradexsh

简介

如果您正在阅读本文，您可能已经了解了 Torizon（易于使用的工业 Linux 软件平台）的基础知识。 您知道它使用容器来提供一个平台，您可以专注于编写自己的应用程序，而 Toradex 负责确保底层操作系统始终是最新的 - 这就是 Torizon OTA 发挥作用的地方。

图 1：Torizon，易于使用的工业 Linux 软件平台

 

图2 ：Torizon 远程更新和设备管理 Web 界面

如果您是 Torizon 的早期使用者，您可能已经从命令行开始开发并注意到，它也有一个学习曲线，即使它非常适合学习更多关于容器的知识。 我必须说，在我个人看来，它不像学习 Yocto 以及如何生成适合您的使用场景的 SDK，然后为您的应用程序编写 layer 和 recipes 那样困难。 不要误会我的意思，我知道比较 Yocto 和 Torizon 在很大程度上取决于您正在使用的用例，并且两者都有其优势。

 

图 3：Torizon 文档强调了 IDE 插件支持的功能

但回到在 Torizon 上仍有学习曲线这一点，考虑如何让我们的客户易于使用，我们已经开始为 Visual Studio 和 Visual Studio Code 开发 IDE 扩展。 请不要告诉我 R&D 的朋友，我将 VS Code 称为 IDE，他们喜欢将其称为文本编辑器。 我更多地将其视为具有无数插件的 DE，从而安装这些插件以使其成为您自定义 IDE。 当您决定投入一些时间阅读本文时，我假设您有兴趣尝试 VS Code。 如果您还想好，请查看这些优秀的资料：

• 网络视频会议：为什么容器不仅仅适合赶时髦的人！
• 网络视频会议：从入门到精通：用于嵌入式 Linux 开发的 Visual Studio Code
• 文档：用于 Torizon 的 Visual Studio Code 插件

由于 Qt 是嵌入式系统广泛使用的 GUI 框架，从现在开始我们将深入探讨本文的主旨，即指导您如何将 Qt 项目导入 Torizon。 这是一个非常有用的例程，因为使用它的同时，您还将了解有关 Torizon VS Code 插件的更多信息。

那么，我们选择什么项目呢？ 几周前，我在 Hackaday 上阅读了一篇关于 Serial Studio：轻松可视化和记录串行数据的帖子，我想，为什么不选它呢？ 它看起来不错，似乎并不及极其复杂，因此是一个快速移植的好项目。

 

图 4： Serial Studio UI (source: https://hackaday.com/2021/01/31/serial-studio-easily-visualise-and-log-serial-data/)

但别担心，如果你在读完这篇文章后想进一步探索，我们有一个 Fuse 的应用程序移植例程，一个大约 10 万行代码的 Sinclair Zx-Spectrum 模拟器，这是一个在 80 年代非常受欢迎的家用计算机。我没有经历那时代，但我相信前几代人的说法。

 

图 5：Fuse (source: http://fuse-emulator.sourceforge.net/)

搭建环境

让我们列出大致的要求：

• 安装了 Torizon 的计算机模块
• Visual Studio Code
• Visual Studio Code Torizon 插件

对于初始的硬件设置，我们建议您阅读 Toradex 快速入门指南。 它通过分步流程解释了需要哪些外围设备以及如何组装硬件和安装 TorizonCore。

 

图 6：Toradex 快速入门指南

主机 PC 上的环境设置略有不同，具体取决于您使用的是 Windows 还是 Linux PC。 虽然快速入门也介绍了如何执行该操作，但还有一篇专门的文章介绍了如何为 Torizon Containers 配置构建环境。 总之，您必须安装 Docker，如果在 Windows 上，还需要安装 Windows Subsystem for Linux 2 (WSL2)。

安装 Visual Studio Code，Visual Studio Code Torizon 插件和来自 Microsoft 的 Remote Containers插件。设置 Torizon 插件后，将您的开发板添加为目标设备。通过创建一个新的 Qt5 项目，然后在目标上部署和调试来验证设置是否有效，这是很有趣过程。 它起作用了吗？ 你已准备好出发！

 

图 7：添加设备

使用 VS Code 将 Serial Studio 移植到 Torizon

使应用程序能够正确编译和运行需要几个步骤。 我们必须以使用符合我们插件要求的编译设置，然后我们必须解决编译和运行时的依赖关系，最后我们必须授予对我们将要使用的串口 (UART) 的访问权限。

在本节的末尾，有一个视频演示了整个过程，让您更容易理解。

下载源码和导入项目

Serial Studio 的源代码可以在 GitHub 上的 Serial-Studio repository 中找到。将此项目及其子模块下载到您的计算机中：

git clone https://github.com/Serial-Studio/Serial-Studio

cd Serial-Studio

git checkout 3ebe6b8c74dd0f07ba04a3e0fd55baa512b28b68

git submodule init

git submodule update

在我们的示例中，我们使用特定的提交版本来保证可重复性，因为该项目依赖于 Qt 5.15，并且较新版本的 Serial Studio 会使用在 Debian Bullseye Qt 版本上无法提供的功能。

打开 VS Code 并等待 Torizon 插件加载完成。打开命令面板并运行导入命令：

Torizon C/C++: Import existing C/C++ application

系统将提示您进行一系列选择来配置您即将导入的项目：

• 您下载的 Serial Studio 所在的目录
• Application name: 使用默认的即可
• Qt QML sample
• Target platform: 取决于您使用的是 32-bit 或者 64-bit 计算机模块
• Username: torizon
• Configuration: 两者都可以，我选的是 debug
• Name of the main executable: 您可以选择默认的，我们稍后会更改

 

图 8：导入一个现成的 C/C++ 应用

调整编译设置

文章 使用 Visual Studio Code在Torizon 上开发 Qt C++ 应用提供了一些关于导入现有 Qt5 项目的重要技巧。我们将开始编辑项目文件 Serial-Studio.pro 以确保项目二进制文件和资源安装到由环境变量 $$(QMAKE_DESTIDIR) 自动设置的目录中：

leonardo@leonardoveiga-pc:Serial-Studio$ git diff

diff --git a/Serial-Studio.pro b/Serial-Studio.pro

index 878e552..d9ca17c 100644

--- a/Serial-Studio.pro

+++ b/Serial-Studio.pro

@@ -92,9 +92,9 @@ macx* {

}

linux:!android {

-    target.path = /usr/bin

-    icon.path = /usr/share/pixmaps

-    desktop.path = /usr/share/applications

+    target.path = $$(QMAKE_DESTIDIR)/usr/bin

+    icon.path = $$(QMAKE_DESTIDIR)/usr/share/pixmaps

+    desktop.path = $$(QMAKE_DESTIDIR)/usr/share/applications

     icon.files += deploy/linux/serial-studio.png

     desktop.files += deploy/linux/serial-studio.desktop

@@ -158,3 +158,5 @@ TRANSLATIONS += \\

     assets/translations/es.ts \\

     assets/translations/zh.ts \\

     assets/translations/de.ts

+

+DESTDIR = $$(QMAKE_DESTIDIR)

\\ No newline at end of file

总之，我们添加了一行来设置 DESTDIR 并更新了目标文件、图标和桌面文件的安装路径。图标和桌面文件对我们来说并不重要，因为我们将在没有桌面环境的情况下直接运行应用程序。

 

图 9：将文件安装到 QMAKE_DESTDIR 目录

正如您在上面差异中看到的，目标二进制文件安装在相对于 QMAKE_DESTDIR 的 /usr/bin 下。 此外，二进制名称将是带有小写字母的 serial-studio。 因此，您需要将 Torizon 属性 exename 中的主要可执行文件的名称改为 usr/bin/serial-studio。

 

图 10：设置 exename 中二进制文件相对路径

解决编译和运行时的依赖关系

我们在 Torizon 5 上使用基于 Debian Bullseye 的容器，因此，您可以使用所有适用于 Arm 或 Arm64 的常规 Debian 软件包，具体取决于您的计算机模块类型。还有一个来自 Toradex 的 Debian 软件源，这是由于它们不是普遍通用的，或者是因为它们是针对特定平台需要使用硬件加速而编译的。您可以从我们的文章如何在 Torizon 上进行 C/C++ 开发了解有关如何查找 Debian 软件包的更多信息。

在 Serial Studio README 中，我们可以了解有关项目依赖关系的线索。您还可以阅读源代码并试着了解任何其他依赖关系，或者尝试运行该项目并对在编译或运行期间弹出的错误消息采取措施。在我所测试的这个项目中，您只需按 F5 即可开始部署和调试过程。

 

图 11：缺少依赖的开发软件而触发的编译错误

当您知道依赖关系时，您逐个将所需的软件添加到 SDK 容器中，我们将其命名为 devpackages（在编译时可以链接到这些头文件和库文件），在运行的容器中，我们将其命名为 extrapackages（动态链接到我们应用或者设备上可执行文件的库和其他组件）。这部分内容在关于如何配置 C/C++ 项目有更详细的介绍，因此我不再赘述。

 

图 12：缺少运行所需的依赖软件而触发的运行错误

以下是我目前该项目找到的依赖项，包括在项目导入期间由插件自动添加的依赖项。我的意思是到目前为止，因为我还没有完全探索该项目的所有功能：

# devpackages

qtdeclarative5-dev

libegl-dev

libgl-dev

libqt5serialport5-dev

libqt5charts5-dev

libqt5svg5-dev

qtquickcontrols2-5-dev

# extrapackages

qml-module-qtquick2

qml-module-qtquick-window2

qml-module-qtquick-controls

qml-module-qtquick-controls2

libqt5serialport5

libqt5widgets5

libqt5quickwidgets5

libqt5charts5

qml-module-qtcharts

libqt5svg5

libqt5quickcontrols2-5

qml-module-qt-labs-settings

qml-module-qtquick-dialogs

qml-module-qtpositioning

qml-module-qtlocation

qml-module-qt-labs-location

你必须通过为所有的依赖软件附加 :#%platform.debian-arch%#，在 devpackages 中明确地指定架构，例如 qtdeclarative5-dev:#%platform.debian-arch%#，因为它们安装在用于交叉编译的 x86  SDK 容器中。了解交叉编译和 Debian 的更多信息，以及添加 Debian Feeds 上可用库的 VS Code 实际步骤。

 

图 13：如何目标架构添加编译依赖项

启用对 UART 接口的硬件访问

使用容器时，必须明确允许它能够访问的硬件接口。这为您的系统增加了一层安全性，因为您可以使用多个容器来限制应用程序对关键部分的硬件访问。Torizon 最佳实践指南有一节专门介绍硬件访问，我在那里学习了如何授予对 UART 接口的访问权限。

简单地讲 TorizonCore 有一个名为 dialout 的组，您必须将 torizon 用户添加到该组中。可以通过编辑 buildcommands 属性包含 RUN usermod -a -G dialout torizon 来完成。

 

图 14：允许应用程序访问设备的 UART

这些是导入应用程序的最后一步。您可以按 F5，VS Code 将在调试模式下构建、部署和运行您的应用程序。

 

图 15：在配有 7” 800x480 显示器的 Colibri iMX8X 上运行 Serial Studio

Torizon 的 Qt Debian 容器依赖于 Torizon 的 Weston 容器，如文章 Qt Debian Container for Torizon 中所述。 Torizon 的 Visual Studio Code 插件通过 Docker Compose 文件来抽象化这功能，实现在应用程序之前启动 Weston 容器。您可以覆盖默认的 Docker Compose 以添加其他可能依赖于您的项目的容器，或调整现有的配置。其中的一个具体示例是使用 VNC 或 RDP 远程访问 TorizonCore GUI。

我首先在 Colibri iMX8X + Iris 载板 + 电阻式触摸 7" 显示器上运行了 Serial Studio，但后来我注意到该应用程序需要在至少 1040x620 分辨率运行。 好的，让我们尝试更大的屏幕，为此我使用了另一种带有 HDMI 的硬件组合，由 Apalis iMX8 + Ixora 载板组成。

 

图 16：在 Apalis iMX8 和 HDMI 显示器上运行 Serial Studio

有关使用 VS Code 将 Serial Studio 导入 Torizon 的整个过程的视频摘要，请观看以下视频：

https://player.youku.com/embed/XNTE1NjcxNTkzNg==

总结

在经历了整个过程之后，我们注意到解决依赖关系是最费力和最耗时的部分。总的来说，在 VS Code 插件的帮助下，导入变得很简单，因为我们不必做诸如编写和构建 Dockerfile 或一直关注容器之类的事情。相反，我们能够专注于配置应用程序。

鉴于随文章提供的各种参考资料，您可能已经注意到，学习和搜索相结合是更快实现目标的强大策略。虽然我希望链接的参考足够好，但我会将它们按逻辑组织在文章末尾的列表中，并鼓励您浏览 Torizon 文档中的一系列 Torizon 文章。最后，如果您没有找到您要找的内容，您可以随时在我们的社区中发布问题。

运行和维护嵌入式系统设计所特有的图形用户界面 (GUI) 应用程序还有其他一些步骤。它们由 Torizon 平台提供支持，最后我会给你一些关于在哪里查看的提示。您可以使用功能强大且灵活的 TorizonCore Builder Tool 来根据您的需要自定义基础 TorizonCore OS，包括配置和启用您选择的显示设备、添加启动画面、为量产编程预配置您的应用程序以及将您的自定义 OS 镜像推送到 Torizon OTA，实现在您的产品生命周期内进行长期、可扩展且安全的 OTA。VS Code 插件允许您将镜像推送到 container registry并导出 Docker Compose 文件，从而帮助您轻松地将应用程序连接到 TorizonCore Builder 和 Torizon OTA。

我希望您喜欢这篇文章，它可以帮助您了解 Torizon 平台的强大功能，它远远超出了基础操作系统 — TorizonCore。我们下期再见！

参考

总体的参考内容

 1. The Torizon Platform
 2. Toradex Embedded Linux - Yocto and Torizon
 3. Serial Studio: Easily Visualise And Log Serial Data
 4. Serial-Studio repository on GitHub
 5. Webinar: Why containers aren’t just for hipsters!
 6. Webinar: Zero to Hero: Visual Studio Code for Embedded Linux Development

来自 Torizon 文档列表的 Torizon 相关技术内容

 7. Toradex Quickstart Guide
 8. Configure Build Environment for Torizon Containers
 9. Visual Studio Code Extension for Torizon
10. How to do C/C++ Development on Torizon
11. C/C++ Development and Debugging on TorizonCore Using Visual Studio Code
12. Qt C++ Application Development on Torizon Using Visual Studio Code
13. Debian Containers for Torizon
14. Using Multiple Containers with TorizonCore
15. Torizon Best Practices Guide
16. How to Import a C/C++ Application to Torizon
17. Remote Access the TorizonCore GUI Using VNC or RDP

建议进一步阅读和学习

18. TorizonCore Builder Tool
19. Setting up Displays With Torizon
20. Splash Screen Customization on TorizonCore
21. Pre-provisioning Docker Containers Onto a TorizonCore Image
22. Torizon OTA
23. Signing and pushing TorizonCore images to Torizon OTA