Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

FlightMap: PhotoVideoControl: Allow to take photos and record from any camera #10540

Closed
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
72 changes: 57 additions & 15 deletions src/FlightMap/Widgets/PhotoVideoControl.qml
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,6 @@ Rectangle {
property bool _switchToPhotoModeAllowed: !_modeIndicatorPhotoMode && (_mavlinkCamera ? !_mavlinkCameraIsShooting : true)
property bool _switchToVideoModeAllowed: _modeIndicatorPhotoMode && (_mavlinkCamera ? !_mavlinkCameraIsShooting : true)
property bool _videoIsRecording: _mavlinkCamera ? _mavlinkCameraIsShooting : _videoStreamRecording
property bool _canShootInCurrentMode: _mavlinkCamera ? _mavlinkCameraCanShoot : _videoStreamCanShoot || _simpleCameraAvailable
property bool _isShootingInCurrentMode: _mavlinkCamera ? _mavlinkCameraIsShooting : _videoStreamIsShootingInCurrentMode || _simpleCameraIsShootingInCurrentMode

function setCameraMode(photoMode) {
Expand Down Expand Up @@ -168,23 +167,23 @@ Rectangle {
// IMPORTANT: This control supports both mavlink cameras and simple video streams. Do no reference anything here which is not
// using the unified properties/functions.
Rectangle {
id: modeSelector
Layout.alignment: Qt.AlignHCenter
width: ScreenTools.defaultFontPixelWidth * 10
height: width / 2
color: qgcPal.windowShadeLight
radius: height * 0.5
visible: _showModeIndicator

//-- Video Mode
Rectangle {
anchors.verticalCenter: parent.verticalCenter
width: parent.height
height: parent.height
color: _modeIndicatorPhotoMode ? qgcPal.windowShadeLight : qgcPal.window
color: _videoStreamInPhotoMode ? qgcPal.windowShadeLight : qgcPal.window
radius: height * 0.5
anchors.left: parent.left
border.color: qgcPal.text
border.width: _modeIndicatorPhotoMode ? 0 : 1
border.width: _videoStreamInPhotoMode ? 0 : 1

QGCColoredImage {
height: parent.height * 0.5
Expand All @@ -193,35 +192,34 @@ Rectangle {
source: "/qmlimages/camera_video.svg"
fillMode: Image.PreserveAspectFit
sourceSize.height: height
color: _modeIndicatorPhotoMode ? qgcPal.text : qgcPal.colorGreen
color: _videoStreamInPhotoMode ? qgcPal.text : qgcPal.colorGreen
MouseArea {
anchors.fill: parent
enabled: _switchToVideoModeAllowed
onClicked: setCameraMode(false)
}
}
}

//-- Photo Mode
Rectangle {
anchors.verticalCenter: parent.verticalCenter
width: parent.height
height: parent.height
color: _modeIndicatorPhotoMode ? qgcPal.window : qgcPal.windowShadeLight
color: _videoStreamInPhotoMode ? qgcPal.window : qgcPal.windowShadeLight
radius: height * 0.5
anchors.right: parent.right
border.color: qgcPal.text
border.width: _modeIndicatorPhotoMode ? 1 : 0
border.width: _videoStreamInPhotoMode ? 1 : 0
QGCColoredImage {
height: parent.height * 0.5
width: height
anchors.centerIn: parent
source: "/qmlimages/camera_photo.svg"
fillMode: Image.PreserveAspectFit
sourceSize.height: height
color: _modeIndicatorPhotoMode ? qgcPal.colorGreen : qgcPal.text
color: _videoStreamInPhotoMode ? qgcPal.colorGreen : qgcPal.text
MouseArea {
anchors.fill: parent
enabled: _switchToPhotoModeAllowed
onClicked: setCameraMode(true)
}
}
Expand All @@ -245,33 +243,77 @@ Rectangle {
}
}

// Take Photo, Start/Stop Video button
// Start/Stop Video button
// IMPORTANT: This control supports both mavlink cameras and simple video streams. Do no reference anything here which is not
// using the unified properties/functions.
Rectangle {
id: videoRecordbutton
Layout.alignment: Qt.AlignHCenter
color: Qt.rgba(0,0,0,0)
width: ScreenTools.defaultFontPixelWidth * 6
height: width
radius: width * 0.5
border.color: qgcPal.buttonText
border.width: 3
visible: !_videoStreamInPhotoMode

Rectangle {
anchors.centerIn: parent
width: parent.width * (_isShootingInCurrentMode ? 0.5 : 0.75)
width: parent.width * (_videoIsRecording ? 0.5 : 0.75)
height: width
radius: _isShootingInCurrentMode ? 0 : width * 0.5
color: _canShootInCurrentMode ? qgcPal.colorRed : qgcPal.colorGrey
radius: _videoIsRecording ? 0 : width * 0.5
color: qgcPal.colorRed
}

MouseArea {
anchors.fill: parent
enabled: _canShootInCurrentMode
onClicked: toggleShooting()
}
}

// Take Photo
// IMPORTANT: This control supports both mavlink cameras and simple video streams. Do no reference anything here which is not
// using the unified properties/functions.
Rectangle {
id: photoCaptureButton
Layout.alignment: Qt.AlignHCenter
color: Qt.rgba(0,0,0,0)
width: ScreenTools.defaultFontPixelWidth * 6
height: width
radius: width * 0.5
border.color: qgcPal.buttonText
border.width: 3
visible: _videoStreamInPhotoMode

Rectangle {
id: trigger
anchors.centerIn: parent
width: parent.width * 0.75
height: width
radius: width * 0.5
color: qgcPal.colorRed
}

Timer {
id: colorTimer
running: false; repeat: false; interval: 150
onTriggered: trigger.color = qgcPal.colorRed
}

function shoot() {
trigger.color = qgcPal.text
colorTimer.start()
}

MouseArea {
anchors.fill: parent
onClicked: {
parent.shoot()
toggleShooting()
}
}
}

//-- Status Information
ColumnLayout {
Layout.alignment: Qt.AlignHCenter
Expand Down
Loading