Qt – Androidアプリ開発 – exportとproperty alias問題解決

著者：津路高広

公開日：2020/03/03

最終更新日：2020/03/03

カテゴリー：技術情報

津路です。
Qt – Androidアプリ開発 – exportとproperty alias問題に続き、問題を解決します。
まず、メニューが良く分かっていませんでした。
プロジェクトビューと、デザインモードでは、ナビゲータービューと、ライブラリビューがあります。
ライブラリビューでは、エレメント・リソース・インポートの３つのタブがあります。
前回使った、bluebubble.svgは、フォルダに配置すると、リソースタブを開いたときに読み込まれます。

さて、プロジェクトの再作成をして、デザインモードでラベルを削除し、エレメントタブでRectangleを配置し、リソースタブに切り替えてsvgアイコンをmainWindow(Rectangle)に配置。svgのidはbubbleとします。
そして、デザインモードのナビゲータービューで、mainWindowとbubbleのExportボタンを押すと、Page1Form.ui.qmlにエイリアスができます。
qmlとは、言語のことで、qml言語でスクリプトを書いていきます。
今のままでは、Page1にすべてが定義されていて、バブルイメージに、デザインモードの機能で、加速度をつけて動かすことはできません。
そこで、別のファイルに定義を放り出し、手書きで動きをつけます。
ナビゲータービューでbubbleを右クリックして、Move Component into Separate Fileというボタンを選ぶと、ダイアログが出て、位置のチェックを外し、ui.qmlを作らないようにします。
Bubble.qmlファイルができたら、ID定義を外し、x,yを固定値でなく、またfillMode: Image.PreserveAspectFitも外します。以下のように編集します。

Image {
    source: "Bluebubble.svg"
    smooth: true             //見た目をよくする
    property real centerX　　//中央に配置
    property real centerY
    property real bubbleCenter
}

Image {

source: "Bluebubble.svg"

smooth: true //見た目をよくする

property real centerX　　//中央に配置

property real centerY

property real bubbleCenter

}

main.qmlの編集では、bubbleのIDと、位置を定義します。

    SwipeView {
        id: swipeView
        anchors.fill: parent
        currentIndex: tabBar.currentIndex

        Page1Form {
            bubble {
                id: bubble
                centerX: mainWindow.width / 2
                centerY: mainWindow.height / 2
                bubbleCenter: bubble.width / 2
                x: bubble.centerX - bubble.bubbleCenter
                y: bubble.centerY - bubble.bubbleCenter
        }
    }

SwipeView {

id: swipeView

anchors.fill: parent

currentIndex: tabBar.currentIndex

Page1Form {

bubble {

id: bubble

centerX: mainWindow.width / 2

centerY: mainWindow.height / 2

bubbleCenter: bubble.width / 2

x: bubble.centerX - bubble.bubbleCenter

y: bubble.centerY - bubble.bubbleCenter

}

前準備が終わったら、ビルドしておきます。
次に、バブルをどう動かすかの定義です。
import QtSensors 5.0にて、センサーをインポート

    Accelerometer {
       id: accel
       dataRate: 100
       active: true
    }
    function calcPitch(x, y, z) { //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);
    }
       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)

           if (isNaN(newX) || isNaN(newY))
               return;

           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
       }

Accelerometer {

id: accel

dataRate: 100

active: true

}

function calcPitch(x, y, z) { //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);

}

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)

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

return;

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

}

onReadingChangedは、Accelerometer のシグナルで、新しい位置を求めて、希望する範囲に補正します。
さてさて、これでビルドして、起動すると、エラーが出ます。
W libfirstsample-bubble.so: qrc:/main.qml:54: ReferenceError: mainWindow is not defined
前回と同じエラーです。Accelerometer 内では、mainWindowが見つかりません。これは、ApplicationWindowに定義すると、問題が解消されます。チュートリアルに抜け落ちていたのです。
次なるエラーは、svgファイルが見つかりませんというエラーです。
これは、プロジェクトビューで、qml.qrcに、既存ファイルとして、アイコンを追加します。
それでも、エラーが起きます。
W libfirstsample-bubble.so: qrc:/Page1Form.ui.qml:21:9: QML Bubble: Error decoding: qrc:/Bluebubble.svg: Unsupported image format
これは、プロジェクトがsvgを認識していないことを示します。
proファイルをエディタで開き、モジュールを読み込みます。
QT += quick sensors svg xml　の３つを追加します。
ビルドして、QTSVGがインクルードされ、リンクされるのを確認します。
さて、前回はPage1FormをmainWindowにしたので、バブルが２つになりましたが、今回はうまく動きました。