C

Qt Quick Ultralite camera Example

// Copyright (C) 2024 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial

import QtQuick 2.15
import QtQuick.Controls 2.15

Rectangle {
    id: root
    color: "black"
    state: "cameraStopped"

    Image {
        id: background
        anchors.centerIn: parent
        width: parent.width
        height: parent.height
        source: "bg_qt.png"
        Behavior on opacity { NumberAnimation { duration: 500 } }
    }

    Text {
        id: message
        color: "red"
        font.pixelSize: 14
    }

    Image {
        id: cameraView
        anchors.right: parent.right
        anchors.top: parent.top
        source: CameraInterface.image
        width: 0
        height: 0

        Behavior on width { NumberAnimation { duration: 500; easing.type: Easing.OutCubic } }
        Behavior on height { NumberAnimation { duration: 500; easing.type: Easing.OutCubic } }

        Component.onCompleted: {
            if (!CameraInterface.initCamera()) {
                console.log("Camera initialization failed");
                message.text =
                    "Camera initialization failed.\nConnect a camera and/or check the serial console output.";
            }
        }

        SequentialAnimation on opacity {
            id: shootAnimation
            PropertyAnimation { property: "opacity"; from: 1.0; to: 0.0; duration: 200}
            PropertyAnimation { property: "opacity"; from: 0.0; to: 1.0; duration: 200}
        }
    }

    Button {
        id: shootBtn
        text: "Shoot"
        width: 90
        height: 60
        opacity: 0.8
        anchors.right: parent.right
        anchors.bottom: parent.bottom
        visible: !openBtn.visible

        onClicked: {
            shootAnimation.running = true
            CameraInterface.stopCamera()
            shootBtn.visible = false
            root.state = "cameraStarted"
        }
    }

    Button {
        id: openBtn
        text: "Start Camera"
        opacity: 0.8
        anchors.right: parent.right
        anchors.rightMargin: 30
        anchors.verticalCenter: parent.verticalCenter

        onClicked: {
            CameraInterface.startCamera()
            openBtn.visible = false
            shootBtn.visible = !openBtn.visible
            root.state = "cameraStarted"
        }
    }

    Button {
        id: closeBtn
        text: "Close"
        width: 100
        height: 45
        opacity: 0.8
        anchors.top: parent.top
        anchors.right: parent.right
        visible: !shootBtn.visible && !openBtn.visible

        onClicked: {
            CameraInterface.startCamera()
            shootBtn.visible = true
        }
    }

    Button {
        id: backBtn
        text: "Stop"
        width: 100
        height: 45
        opacity: 0.8
        anchors.top: parent.top
        anchors.left: parent.left
        visible: shootBtn.visible

        onClicked: {
            CameraInterface.stopCamera()
            shootBtn.visible = false
            openBtn.visible = true
            root.state = "cameraStopped"
        }
    }

    Button {
        id: minimizeBtn
        width: 120
        height: 45
        anchors.left: parent.left
        anchors.bottom: parent.bottom
        opacity: 0.8
        visible: closeBtn.visible

        onClicked: {
            root.state = root.state == "cameraMinimized" ? "cameraStarted" : "cameraMinimized"
        }
    }

    states: [
        State {
            name: "cameraStopped"
            PropertyChanges { target: background; opacity: 1 }
            PropertyChanges { target: minimizeBtn; visible: false }
        },
        State {
            name: "cameraStarted"
            PropertyChanges { target: background; opacity: 0 }
            PropertyChanges { target: minimizeBtn; text: "Minimize" }
            PropertyChanges { target: cameraView; width: 480; height: 272 }
        },
        State {
            name: "cameraMinimized"
            PropertyChanges { target: background; opacity: 1 }
            PropertyChanges { target: minimizeBtn; text: "Maximize" }
            PropertyChanges { target: cameraView; width: 160; height: 91 }
        }
    ]
}