如何在Visual Studio中创建嵌入式Qt quick应用程序(下)

在前文中我们展示了如何在Visual Studio中针对Windows和嵌入式Linux创建多平台Qt Quick应用程序项目。现在,我们将展示如何在嵌入式设备上运行该应用程序。然后,我们将继续将该项目开发为我们打算创建的完整嵌入式应用程序。最后,我们将使用VS调试器对应用程序的C ++和QML代码进行远程调试。

Qt是一个跨平台框架,通常用作图形工具包,它不仅创建CLI应用程序中非常有用。而且它也可以在三种主要的台式机操作系统以及移动操作系统(如Symbian,Nokia Belle,Meego Harmattan,MeeGo或BB10)以及嵌入式设备,Android(Necessitas)和iOS的端口上运行。现在我们为你提供了免费的试用版。赶快点击下载Qt最新试用版>>

点击获取更多文章教程

Qtitan组件集

  • QtitanRibbon| 下载试用: 遵循Microsoft Ribbon UI Paradigm for Qt技术的Ribbon UI组件,致力于为Windows、Linux和Mac OS X提供功能完整的Ribbon组件。
  • QtitanChart | 下载试用 : 是一个C ++库,代表一组控件,这些控件使您可以快速地为应用程序提供漂亮而丰富的图表。并且支持所有主要的桌面操作系统。
  • QtitanDataGrid| 下载试用 : 适用于Qt的商业化DataGrid 组件,使得表格数据可以直接面向终端用户完全集成了QtDesigner,极易适应其他相似开发环境,保证100%兼容Qt GUI。

在本文的第1部分中,我们展示了如何在Visual Studio中针对Windows和嵌入式Linux创建多平台Qt Quick应用程序项目。现在,我们将展示如何在嵌入式设备上运行该应用程序。然后,我们将继续将该项目开发为我们打算创建的完整嵌入式应用程序。最后,我们将使用VS调试器对应用程序的C ++和QML代码进行远程调试。

在嵌入式设备上运行

我们已经展示了如何交叉编译在Visual Studio中创建的“ hello world” Qt Quick应用程序。现在,我们将看到如何在Raspberry Pi上运行该应用程序。由于我们将以全屏模式运行,因此我们必须首先向应用程序窗口中添加一些内容。

Window {    visible: true    title: qsTr("Hello World")    Text {        id: clock        font.pointSize: 72        Timer {            interval: 1000; running: true; repeat: true            onTriggered: clock.text = (new Date).toLocaleTimeString(Qt.locale("de_DE"), "hh:mm:ss");        }    }}

和以前一样,选择Linux项目配置,然后按F7键开始交叉编译。

1>------ Build started: Project: QuickMirror, Configuration: Debug_RPi x64 ------1>rcc qml.qrc1>Invoking 'mkdir -p $(dirname qml.qrc); mkdir -p $(dirname /mnt/c/Users/user/Source/Repos/QuickMirror/main.qml); mkdir -p $(dirname /mnt/c/Users/user/Source/Repos/QuickMirror/obj/x64/Debug_RPi/rcc/qrc_qml.cpp); (/home/user/raspi/qt5/bin/rcc /mnt/c/Users/user/Source/Repos/QuickMirror/qml.qrc --name qml -o /mnt/c/Users/user/Source/Repos/QuickMirror/obj/x64/Debug_RPi/rcc/qrc_qml.cpp)', working directory: '/mnt/c/Users/user/Source/Repos/QuickMirror'1>Starting remote build1>Compiling sources:1>qrc_qml.cpp1>Linking objects1>QuickMirror.vcxproj -> C:UsersuserSourceReposQuickMirrorbinx64Debug_RPiQuickMirror.out========== Build: 1 succeeded, 0 failed, 0 up-to-date, 0 skipped ==========

要在每次构建结束时自动复制应用程序文件,可以在“ WSL构建后事件”属性页中设置以下命令(ATTN: 这将以明文形式保存设备密码)。

C:Usersuser> scp C:UsersuserSourceReposQuickMirrorbinx64Debug_RPiQuickMirror.out pi@192.168.1.98:/home/pi/pi@192.168.1.98's password:QuickMirror.out 100% 465KB 1.6MB/s 00:00C:Usersuser>

在启动Qt Quick应用程序之前,我们需要设置一些必需的环境变量:

  • LD_LIBRARY_PATH
    Qt二进制文件安装目录的路径。
  • QT_QPA_PLATFORM
    平台插件。
  • QT_QPA_PLATFORM_PLUGIN_PATH
    平台插件安装目录的路径。
  • QT_QPA_EGLFS_PHYSICAL_WIDTH
    QT_QPA_EGLFS_PHYSICAL_HEIGHT

    物理屏幕的宽度和高度,以毫米为单位。
  • QML2_IMPORT_PATH
    安装的QML模块的路径。
pi@raspberry-pi:~$ export LD_LIBRARY_PATH="/usr/local/qt5pi/lib"pi@raspberry-pi:~$ export QT_QPA_PLATFORM="eglfs"pi@raspberry-pi:~$ export QT_QPA_PLATFORM_PLUGIN_PATH="/usr/local/qt5pi/plugins/platforms"pi@raspberry-pi:~$ export QT_QPA_EGLFS_PHYSICAL_WIDTH="326"pi@raspberry-pi:~$ export QT_QPA_EGLFS_PHYSICAL_HEIGHT="520"pi@raspberry-pi:~$ export QML2_IMPORT_PATH="/usr/local/qt5pi/qml"pi@raspberry-pi:~$ ./QuickMirror.out

树莓派显示器

如何在Visual Studio中创建嵌入式Qt quick应用程序(下)

在Raspberry Pi中运行“ Hello World”应用程序

开发应用程序

我们的应用程序的要求包括显示以下信息:

  • 当前时间
  • 当前日期
  • 周年纪念
  • 天气预报
  • 下次出发的公共交通工具
  • 新闻

我们将把每个项目封装为专用的QML类型。为此,我们必须首先将QML模块定义(qmldir)文件添加到项目中:

  • 选择“项目>添加新项。。> Qt> QML模块定义”。
  • 在位置字段中,指示将包含QML文件的文件夹的路径。

如何在Visual Studio中创建嵌入式Qt quick应用程序(下)

向项目添加新的QML模块定义

按下“添加”后,qmldir 文件将在项目树中可用。我们将使用此文件来定义每种QML类型到其对应源文件的映射。

ApiCall         1.0 QuickMirror.ApiCall.qmlCalendar        1.0 QuickMirror.Calendar.qmlClock           1.0 QuickMirror.Clock.qmlNewsTicker      1.0 QuickMirror.NewsTicker.qmlOnThisDay       1.0 QuickMirror.OnThisDay.qmlPublicTransport 1.0 QuickMirror.PublicTransport.qmlWeather         1.0 QuickMirror.Weather.qml

要将新的QML源文件添加到项目中:

  • 选择“项目>添加新项…> Qt> QML文件”。
  • 将位置设置qmldir为创建文件的相同目录。
  • 设置QML文件名。
  • 按“添加”。

如何在Visual Studio中创建嵌入式Qt quick应用程序(下)

我们将首先添加QML类型以显示当前时间,当前日期和重要的周年纪念日。该Clock类型将显示当前时间,每秒刷新一次。

QuickMirror.Clock.qml

  function refresh() {        text = (new Date).toLocaleTimeString(Qt.locale("de_DE"), "hh:mm");    }    Component.onCompleted : refresh();    Timer {        interval: 1000; running: true; repeat: true onTriggered: parent.refresh();    }} 

Calendar类型将显示当前日期,并在不同语言环境之间循环。

QuickMirror.Calendar.qml

Text {    renderType: Text.NativeRendering    id: calendar    color: "white"    font.family: FontFamily_Bold    font.styleName: FontStyle_Bold    font.pointSize: 72    property var locales: ["en_US", "de_DE", "pt_PT"]    property var localeIdx: 0    function capitalize(s) {        return s.replace(/(-)./g, function(c) { return c.toUpperCase(); });    }    function setNextLocale() {        localeIdx = (localeIdx + 1) % locales.length;    }    function getCurrentText() {        var date = new Date;        var locale = Qt.locale(locales[localeIdx]);        var calendarText = capitalize(date.toLocaleDateString(locale, "dddd, dd"));        var monthShort = date.toLocaleDateString(locale, "MMM");        var monthLong = date.toLocaleDateString(locale, "MMMM");        if (monthLong.length <= 5) { calendarText += capitalize(monthLong); } else { calendarText += capitalize(monthShort); if (!monthShort.endsWith(".")) calendarText += "."; } calendarText += date.toLocaleDateString(locale, " yyyy"); return calendarText; } Component.onCompleted: { text = getCurrentText(); } Timer { interval: 15000; running: true; repeat: true onTriggered: { setNextLocale(); text = getCurrentText(); } } Behavior on text { SequentialAnimation { NumberAnimation { target: calendar; property: "opacity"; to: 0.0; duration: 1000 } PropertyAction { target: calendar; property: "text" } NumberAnimation { target: calendar; property: "opacity"; to: 1.0; duration: 500 } } } }

除了日期/时间,我们的应用程序还将依靠Web API来检索信息。我们将curl在一个单独的过程中运行以连接到Web API。流程创建将由名为的C ++类处理Process。然后,QML类型ApiCall将使用一个Process对象以curl必要的参数开始并收集其输出。

QuickMirror.ApiCall.qml

Item {    property var url: ""    property var path: []    property var query: []    signal response(var response)    signal error(var error)    Process {        id: curl        property var path: Q_OS_WIN "C:\Windows\System32\curl.exe" : "/usr/bin/curl"        property var request: ""        command: path + " -s "" + request + """"""    }    function sendRequest() {        curl.request = url;        if (path.length > 0)            curl.request += ""/"" + path.join(""/"");         if (query.length > 0)            curl.request += "" + query.join(""&"");        curl.start();    }    Connections {        target: curl        onExit /*(int exitCode

来源:慧都

声明:本站部分文章及图片转载于互联网,内容版权归原作者所有,如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢!

上一篇 2020年9月9日
下一篇 2020年9月9日

相关推荐

发表回复

登录后才能评论