创建一个QT for Android的传感器应用应用程序(摘自笔者2015年将出的《QT5权威指南》,本文为试读篇)-阿里云开发者社区

开发者社区> 涂作权> 正文

创建一个QT for Android的传感器应用应用程序(摘自笔者2015年将出的《QT5权威指南》,本文为试读篇)

简介:  这个手册描述了使用Qt Quick面访的方式在Android和ios设备上开发QtQuick应用程序的方法。我们使用Qt Creator实现一个QtQuick应用程序,这个应用程序基于加速器的值来加速一个SVG(可伸缩矢量图形)。 设置开发环境: 要想能够在移动设备上构建和运行一个应用程序,您必须为设备平台设置开发环境,配置Qt Creator和
+关注继续查看


这个手册描述了使用Qt Quick面访的方式在Androidios设备上开发QtQuick应用程序的方法。我们使用Qt Creator实现一个QtQuick应用程序,这个应用程序基于加速器的值来加速一个SVG(可伸缩矢量图形)。

设置开发环境:

要想能够在移动设备上构建和运行一个应用程序,您必须为设备平台设置开发环境,配置Qt Creator和手机设备之间的连接。

要想部署到Android设备,您必须下载和安装最新的Android NDKSDK.更新SDK去获取为开发所需的API和工具。除此之外,您必须安装JavaJDKApache Ant.当您已经安装所有的这些工具以后,您必须在Qt Creator中指定它们的位置。如果想了解更多关于这方面的信息,请查看Qt for Android(http://doc.qt.io/qt-5/android-support.html)和连接Android设备(http://doc.qt.io/qtcreator/creator-developing-android.html).

       IOS设备上开发,您必须安装Xcode,使用它去配置一个设备。对于这个来说,您需要从苹果收到一个苹果开发者的账号和ISO开发应用认证。如果想了解更多的详情信息,请查看连接IOS设备(http://doc.qt.io/qtcreator/creator-developing-ios.html)

创建项目:

1 选择File(文件) > 新建文件或项目 > 应用程序 > QtQuick Application > Choose.

       2 在名称文本框中,输入accelbubble.

       3在创建路径中输入项目文件存储的路径,例如E:\Examples    ,接着点击下一步(或在OSX平台上点击Continue.

       4Qt Quick component set下拉选中,选择Qt Quick Controls 1.1.

       5选择针对AndroiddiPhone OS的构建套件,然后点击下一步”.

       注意:如果在工具” > “选项” > “构建和运行” > “构建套件里指定了构建套件设置,那么构建套件将会被显示出来。笔者的设置如下:

关于Android配置,在配置它之前需要先安装JDK,下载好了SDKNDKAnt工具:

       6在这个dialog窗口后选择下一步”,使用默认的设置。

       7查看项目设置,点击完成(或在OS X平台上点击完成)

       QtCreator生成一个默认的QML文件,在这个文件中可以创建应用程序的主窗口视图。

创建主窗口视图:

在应用程序的主窗口正中央显示一个SVG(主窗口视图图形)气泡的图片。

在您的项目中使用被Qt Sensors例子使用的BlueBubble.svg,Accel Bubble,您必须从Qt安装路径下将它拷贝到项目路径下(和QML文件相同的子目录下)。例如:D:\Installed\QT\Examples\Qt-5.4\sensors\accelbubble\content。图片在Resources中有,您也可以使用其它任何类型的图片或者一个QML类型的图片代替(本案例中使用图片bubble.png代替)。

1 在编辑视图,鼠标右击qml.qrc,选择右键菜单中添加现有文件,将项目中的bubble.png资源添加进去。添加后的效果图如下:

在编辑视图里面,双击main.qml文件,在代码编辑视图中打开它。

       2修改ApplicationWindow类型的属性,指定应用程序的名称,给定ApplicationWindowid,设置可见,插入的代码片段如下:

import QtQuick 2.2
import QtQuick.Controls 1.1
 
ApplicationWindow {
    title:qsTr("Accelerate Bubble")
    id:mainWindow
    width: 640
    height: 480
    visible:true
 
}

       3在导航区域,选中Label,按键盘上的delete键删除它。

 

       4在“库” > “QML Type”,选择Image,并将它拖动到画布上。并在右侧的属性面板里source部分添加图片。

   注意:您也可以在” > “资源里看到已经添加进去的资源:

       5选中上图中的图片,在属性面板里,Id域中键入bubble,使图片能够在其它地方引用它。

       6在代码编辑区域,给以下的Image添加以下的新的属性,通过这些属性来让将图片定位在应用程序的正中央。

       7设置图片位置的xy的位置,并手动添加图片宽高属性。

       67步骤后在qml中插入的代码片段如下:

Image {

    id: bubble

    source: "bubble.png"

    smooth: true

    property real centerX: mainWindow.width / 2

    property real centerY: mainWindow.height / 2

    property real bubbleCenter:bubble.width / 2

    x: centerX - bubbleCenter        //图片显示的x坐标

    y: centerY - bubbleCenter        //图片显示的y坐标

    width: 100                       //图片的宽度     

    height: 100                      //图片的高度

}

如下是您在做出改变后accelbubble.qml文件的样子。

import QtQuick 2.2

import QtQuick.Controls 1.1

 

ApplicationWindow {

    title: qsTr("Accelerate Bubble")

    id:mainWindow

    width: 640

    height: 480

    visible: true

 

    Image {

        id: bubble

        source: "bubble.png"

        smooth: true

        property real centerX: mainWindow.width / 2

        property real centerY: mainWindow.height / 2

        property real bubbleCenter:bubble.width / 2

        x: centerX - bubbleCenter        //图片显示的x坐标  

        y: centerY - bubbleCenter        //图片显示的y坐标  

        width: 100                       //图片的宽度     

        height: 100                      //图片的高度     

    }

}

到此步运行的结果如下:

       既然可视的元素已经在指定位置了,我们可以通过改变加速传感器的值来改变的bubble的位置

       1添加以下import声明到main.qml中。

import QtSensors 5.3

       2添加一个含有必要属性的Accelerometer类型的元素到main.qml中。

Accelerometer{

    id:accel

    dataRate: 100

    active:true

}

       3添加以下的JavaScript方法,实现基于当前Accelerometer的值来计算这个bubble的位置。

function calcPitch(x,y,z) {

        return -(Math.atan(y / Math.sqrt(x * x + z * z)) * 57.2957795);

    }

   

    function calcRoll(x,y,z)

    {

        return -(Math.atan(x / Math.sqrt(y * y + z * z)) * 57.2957795);

    }

       4Accelerometer类型的onReadingChanged信号添加以下的JavaScript代码,让bubble随着Accelerometer的值变化而移动位置。

Accelerometer{

        id:accel

        dataRate: 100

        active:true

       

        onReadingChanged: {

            var newX = (bubble.x + calcRoll(accel.reading.x, accel.reading.y, accel.reading.z) * 0.1)

            var newY = (bubble.y - calcPitch(accel.reading.x, accel.reading.y, accel.reading.z) * 0.1)

           

            //如果newXnewY都是空的,直接返回

            if (isNaN(newX) || isNaN(newY))

                return;

           

            //如果newX小于0,让newX = 0

            if (newX < 0)

                newX = 0

           

            if (newX > mainWindow.width - bubble.width)

                newX = mainWindow.width - bubble.width

           

            if (newY < 18)

                newY = 18

           

            if (newY > mainWindow.height - bubble.height)

                newY = mainWindow.height - bubble.height

            

            bubble.x = newX

            bubble.y = newY

        }

}

       要想确保bubble的位置总是在屏幕边界内部。如果Accelerometer返回的不是一个数值(NaN),值将会被忽略,bubble的位置将不产生更新。

       bubblexy属性上添加SmoothedAnimation行为,让它移动的时候看起来是平滑的。

import QtQuick 2.2

import QtQuick.Controls 1.1

import QtSensors 5.3

 

ApplicationWindow {

    title: qsTr("Accelerate Bubble")

    id:mainWindow

    width: 640

    height: 480

    visible: true

   

    function calcPitch(x,y,z) {

        return -(Math.atan(y / Math.sqrt(x * x + z * z)) * 57.2957795);

    }

   

    function calcRoll(x,y,z)

    {

        return -(Math.atan(x / Math.sqrt(y * y + z * z)) * 57.2957795);

    }

   

    Image {

        id: bubble

        source: "bubble.png"

        smooth: true

        property real centerX: mainWindow.width / 2

        property real centerY: mainWindow.height / 2

        property real bubbleCenter:bubble.width / 2

        x: centerX - bubbleCenter        //图片显示的x坐标  

        y: centerY - bubbleCenter        //图片显示的y坐标  

        width: 100                       //图片的宽度     

        height: 100                      //图片的高度  

        

        Behavior on y {

            SmoothedAnimation {

                easing.type: Easing.Linear

                duration: 100

            }

        }

       

        Behavior on x {

            SmoothedAnimation {

                easing.type: Easing.Linear

                duration: 100

            }

        }

    }

   

    Accelerometer{

        id:accel

        dataRate: 100

        active:true

       

        onReadingChanged: {

            var newX = (bubble.x + calcRoll(accel.reading.x, accel.reading.y,

                                            accel.reading.z) * 0.1)

            var newY = (bubble.y - calcPitch(accel.reading.x, accel.reading.y,

                                             accel.reading.z) * 0.1)

           

            //如果newXnewY都是空的,直接返回

            if (isNaN(newX) || isNaN(newY))

                return;

           

            //如果newX小于0,让newX = 0

            if (newX < 0)

                newX = 0

           

            if (newX > mainWindow.width - bubble.width)

                newX = mainWindow.width - bubble.width

           

            if (newY < 18)

                newY = 18

           

            if (newY > mainWindow.height - bubble.height)

                newY = mainWindow.height - bubble.height

            

            bubble.x = newX

            bubble.y = newY

        }

       

    }

}

锁定设备方向:

默认情况下当设备的方向改变的时候,屏幕默认是跟着旋转的。如果屏幕的旋转方向固定,那么现实的效果会更加好。

       Android手机中的旋转属性进行固定住。Qt Creator中生成的AndroidManifest.xml中可以指定它。如果想了解更多关于这方面的信息,请查看编辑Manifest文件”(http://doc.qt.io/qtcreator/creator-deploying-android.html#editing-manifest-files).

       IOS平台上,您可以在一个Info.plist文件锁定设备的方向,这个plist文件在.pro文件中作为QMAKEINFO PLIST参数来指定。

添加依赖信息

添加依赖:

更新accelbubble.pro文件,跟上以下库依赖信息:

QT += quick sensors svg xml

       IOS平台上,您必须静态链接上面的库,通过添加插件的名称,明确指定插件QTPLUGIN参数的各各值。为ios构建指定一个qmake范围(在这个qmake里面也包含QMAKE INFO PLIST参数信息)。

ios {

QTPLUGIN += qsvg qsvgicon qtsensors_ios

QMAKE_INFO_PLIST = Info.plist

}

       添加完了依赖以后,选择构建” > “执行qmake”,将改变应用到项目的Makefile文件中去。

添加资源:

您需要添加Bluebubble.svg图片文件到要部署到手机设备上的应用程序资源文件夹里去。

选中项目中的qml.qrc文件,右击这个qrc文件,选择添加现有文件Bluebubble.svg文件添加进去。

运行应用程序:

应用程序被编译并且将部署到设备上:

       1启动Android设备上的USB调试功能,或者启动ios设备上的开发者模式。

       2将设备连接到开发电脑上。

       如果您正在运行的是Androidv4.2.2,手机上将弹出一个对话框让您去确定使用允许USB调试模式连接到PC机上。要避免每次连接设备的时候弹出一个对话框,点击总是允许电脑”,并选择OK.

       3在设备上运行应用程序,按Ctrl+R

示例代码:

       当您一步步完成之后,main.qml文件看起来应该像下面的样子:

import QtQuick 2.2

import QtQuick.Controls 1.1

import QtSensors 5.3

 

ApplicationWindow {

    title: qsTr("Accelerate Bubble")

    id:mainWindow

    width: 640

    height: 480

    visible: true

 

    function calcPitch(x,y,z) {

        return -(Math.atan(y / Math.sqrt(x * x + z * z)) * 57.2957795);

    }

 

    function calcRoll(x,y,z)

    {

        return -(Math.atan(x / Math.sqrt(y * y + z * z)) * 57.2957795);

    }

 

    Image {

        id: bubble

        source: "bubble.png"

        smooth: true

        property real centerX: mainWindow.width / 2

        property real centerY: mainWindow.height / 2

        property real bubbleCenter:bubble.width / 2

        x: centerX - bubbleCenter        //图片显示的x坐标

        y: centerY - bubbleCenter        //图片显示的y坐标

        width: 100                       //图片的宽度

        height: 100                      //图片的高度

 

        Behavior on y {

            SmoothedAnimation {

                easing.type: Easing.Linear

                duration: 100

            }

        }

 

        Behavior on x {

            SmoothedAnimation {

                easing.type: Easing.Linear

                duration: 100

            }

        }

    }

 

    Image {

        id: blueubble

        source: "Bluebubble.svg" //注意要让svg图显示在手机上,要在pro文件中添加Qt += svg

        smooth: true

        property real centerX: mainWindow.width / 4

        property real centerY: mainWindow.height / 4

        property real blueubbleCenter:blueubble.width / 2

        x: centerX - blueubbleCenter     //图片显示的x坐标

        y: centerY - blueubbleCenter     //图片显示的y坐标

        width: 100                       //图片的宽度

        height: 100                      //图片的高度

    }

 

    Accelerometer{

        id:accel

        dataRate: 100

        active:true

 

        onReadingChanged: {

            var newX = (bubble.x + calcRoll(accel.reading.x, accel.reading.y,

                                            accel.reading.z) * 0.1)

            var newY = (bubble.y - calcPitch(accel.reading.x, accel.reading.y,

                                             accel.reading.z) * 0.1)

 

            //如果newXnewY都是空的,直接返回

            if (isNaN(newX) || isNaN(newY))

                return;

 

            //如果newX小于0,让newX = 0

            if (newX < 0)

                newX = 0

 

            if (newX > mainWindow.width - bubble.width)

                newX = mainWindow.width - bubble.width

 

            if (newY < 18)

                newY = 18

 

            if (newY > mainWindow.height - bubble.height)

                newY = mainWindow.height - bubble.height

 

            bubble.x = newX

            bubble.y = newY

        }

    }

 

    menuBar:MenuBar {

        Menu{

            title:qsTr("File")

            MenuItem{

                text:qsTr("&Open")

                onTriggered: console.log("Open action triggered");

            }

            MenuItem{

                text:qsTr("Exit")

                onTriggered:Qt.quit();

            }

        }

    }

}

上面的例子在华为手机上运行的效果图如下:

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
HaaS轻应用(Python): si7006温湿度传感器案例
HaaS轻应用(Python): si7006温湿度传感器案例
125 0
Docker 为 ASP.NET Core Web 应用程序生成 Docker 映像,创建并运行多个容器
1.为 ASP.NET Core 应用程序生成 Docker 映像 下载这个事例项目:https://github.com/dotnet/dotnet-docker/tree/master/samples/aspnetapp 下载完成后给这项目生成一个镜像名为aspnetapp镜像 docker build -t aspnetapp .
865 0
带你读《传感器系统:基础及应用》之二:组件互连
本书包括传感器相关的数学、物理、电路等基础理论,介绍了相关的性能指标、性能选择以及集成到工程系统所需的软硬件,讲述了先进的传感器技术、分析建模、实际应用和设计研究实例。全书共12章,前面7章是传感器的基础知识,第8~11章分别讨论了不同种类传感器的结构及实际应用,第12章涉及先进的传感器技术。 本书可以作为高等学校测控技术与仪器、自动化、机电一体化、电气工程等专业高年级本科生和研究生教材,也可供相关科研和工程技术人员学习参考。
689 0
创建第一个ArcGIS API for Silverlight应用
      在完成前面的开发环境搭建以后,接下来实现我们的第一个ArcGIS API forSilverlight应用程序。
469 0
创建支持多种屏幕尺寸的Android应用
Android涉及各种各样的支持不同屏幕尺寸和密度的设备。对于应用程序,Android系统通过设备和句柄提供了统一的开发环境,大部分工作是校正每一个应用程序的用户界面到它显示的屏上。与此同时,系统提供APIs允许你控制应用界面为特定的屏幕尺寸和密度,为不同屏幕的配置提供最优化的用户界面设计。
741 0
带你读《传感器系统:基础及应用》之一:工程中的传感器系统
本书包括传感器相关的数学、物理、电路等基础理论,介绍了相关的性能指标、性能选择以及集成到工程系统所需的软硬件,讲述了先进的传感器技术、分析建模、实际应用和设计研究实例。全书共12章,前面7章是传感器的基础知识,第8~11章分别讨论了不同种类传感器的结构及实际应用,第12章涉及先进的传感器技术。 本书可以作为高等学校测控技术与仪器、自动化、机电一体化、电气工程等专业高年级本科生和研究生教材,也可供相关科研和工程技术人员学习参考。
927 0
+关注
涂作权
java,架构,编程语言相关专家
1234
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载