C

Qt Quick ウルトラライト塗装例

Qt Quick Ultralite Application におけるPaintedItem の使用例を示す。

概要

painteditem の例では、PaintedItem Qml タイプを使ってフレームバッファに直接描画しています。これは、カーブしたランプ上の円形のブロブの振動運動をエミュレートするアニメーションを表示します。

この例では、OscillatorPaintedItemクラスを使用しており、paint() メソッドをオーバーライドして、カーブしたランプと円形のブロブを描画しています。paint() メソッドは、100msごとに更新されるangleプロパティの更新イベントごとに呼び出されます。

対象プラットフォーム

プロジェクトの構成

painteditem サンプルは以下のファイルで構成されています：

CMakeLists.txt
mcu_painteditem.qmlproject
oscillator.qml
main_baremetal.cpp
oscPaintedItem.cpp
oscPaintedItem.h

CMakeプロジェクト・ファイルには基本的なビルド・スクリプトが含まれています。oscillator.qml 、アプリケーションのUIを定義し、プロジェクト・コンフィギュレーションはmcu_painteditem.qmlprojectで定義されています。

main_baremetal.cpp には、ベアメタルプラットフォーム上でアプリケーションをセットアップするためのメイン関数が含まれています。

oscPaintedItem.h とoscPaintedItem.cpp ファイルには、PaintedItemDelegateクラスから派生したOscillatorPaintedItemクラスの定義が含まれています。

CMakeプロジェクトファイル

# Copyright (C) 2025 The Qt Company Ltd.
# SPDX-License-Identifier: LicenseRef-Qt-Commercial
cmake_minimum_required (VERSION 3.21.1)

project(painteditem VERSION 0.0.1 LANGUAGES C CXX ASM)
if (NOT TARGET Qul::Core)
    find_package(Qul)
endif()

string(TOLOWER ${QUL_PLATFORM} PLATFORM_LOWERCASE)

set (GENERATE_ENTRYPOINT_ARG "")
if (QUL_OS STREQUAL "FreeRTOS")
    set(GENERATE_ENTRYPOINT_ARG GENERATE_ENTRYPOINT)
endif()

qul_add_target(painteditem QML_PROJECT mcu_painteditem.qmlproject oscPaintedItem.cpp ${GENERATE_ENTRYPOINT_ARG})

if (PLATFORM_LOWERCASE MATCHES "^rh850" OR PLATFORM_LOWERCASE MATCHES "^tvii")
    target_compile_definitions(painteditem PRIVATE NO_TOUCH)
endif()

app_target_setup_os(painteditem)

if (NOT QUL_OS STREQUAL "FreeRTOS")
    target_sources(painteditem PRIVATE
                   main_baremetal.cpp
    )
endif()

Qmlプロジェクトファイル

import QmlProject 1.3

Project {
        mainFile: "oscillator.qml"

        InterfaceFiles {
                files: [
                        "oscPaintedItem.h"
                ]
        }

        ModuleFiles {
                MCU.qulModules: ["Controls"]
        }
}

PaintedItem

PaintedItem Qml型のdelegate_プロパティはOscillatorPaintedItemインスタンスを指します。

                    //PaintedItem Object
                    PaintedItem {
                        id: oscillator
                        anchors.right: parent.right
                        anchors.top: parent.top
                        anchors.fill: parent

                        delegate_: OscillatorPaintedItem {
                            id: delegate
                            angle: 0.0
                            initialAngle: 50
                            pivotLength: 50

                            onAngleChanged: {
                                delegate.update()
                            }
                        }
                    }

テキスト項目

振動の初期角度と固定減衰係数が左上に表示されます。

                    Text {
                        anchors.top: parent.top
                        anchors.topMargin: 8
                        anchors.left: parent.left
                        anchors.leftMargin: 8
                        text: "Angle: " + delegate.initialAngle + "\ndamping: " + app.dampingFactor
                        font.pixelSize: 13
                    }

リプレイボタン

振動の角度が0になると、円形の塊は静止状態になります。Replay ボタンを押すと、initialAngleが最大に戻り、アニメーションが再開します。

                    Button {
                        id: replay

                        //For platforms not supporting touch input, hide Replay button.
                        visible: !root.automaticAnimation

                        anchors.horizontalCenter: parent.horizontalCenter
                        anchors.bottom: parent.verticalCenter
                        height: 40
                        width: 70
                        font.pixelSize: 13
                        text: "Replay"

                        background: Rectangle {
                            color: replay.down ? "#A39D9C" : "#B8B3B2"
                            radius: 8
                        }

                        onClicked: {
                          /*Setting the initialAngle property to maximum value disturbs the equilibrium and
                          triggers the animation again.*/
                          delegate.initialAngle = 50
                        }

アニメーションタイマー

アニメーションはangleプロパティで行われ、100msごとに更新されます。angleプロパティが更新されるたびに、デリゲートの更新がトリガーされ、OscillatorPaintedItemのpaint() メソッドが呼び出されます。

                    Timer {
                        running: root.automaticAnimation
                        repeat: true
                        interval: 8000
                        onTriggered: delegate.initialAngle = 50
                    }

ファイル

詳細はこちら。