371 lines
15 KiB
QML
371 lines
15 KiB
QML
import QtQuick
|
|
import QtQuick.Controls
|
|
import QtQuick.Layouts
|
|
import AntiClipSettings
|
|
|
|
Item {
|
|
id: root
|
|
property alias enabled: shieldedRow.enabled
|
|
property int dargWidth: 12
|
|
property color openDoorAreaColor: "green"
|
|
property var openDoorAreaPoints: []
|
|
property int openDoorAreaWay: 0
|
|
property color shieldedAreaColor: "yellow"
|
|
property var shieldedAreaPoints: []
|
|
property bool shieldedAreaEnabled: false
|
|
property color antiClipAreaColor: "blue"
|
|
property var antiClipAreaPoints: []
|
|
property bool antiClipAreaEnabled: false
|
|
Item {
|
|
anchors.left: parent.left
|
|
anchors.right: parent.right
|
|
anchors.top: parent.top
|
|
anchors.bottom: controlBar.top
|
|
Image {
|
|
id: image
|
|
anchors.centerIn: parent
|
|
cache: false
|
|
fillMode: Image.PreserveAspectFit
|
|
source: "image://videoframe/"
|
|
property real aspectRatio: 16 / 9
|
|
width: Math.min(parent.width, parent.height * aspectRatio)
|
|
height: width / aspectRatio
|
|
enabled: root.enabled
|
|
|
|
Canvas {
|
|
id: canvas
|
|
anchors.fill: parent
|
|
onPaint: {
|
|
|
|
var ctx = canvas.getContext("2d")
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height)
|
|
if(!root.enabled)return
|
|
if(openDoorAreaWay == DeviceConnection.FullArea){
|
|
ctx.strokeStyle = openDoorAreaColor
|
|
ctx.lineWidth = 8
|
|
ctx.strokeRect(0,0, canvas.width,
|
|
canvas.height)
|
|
|
|
} else if ((openDoorAreaWay>=DeviceConnection.Quadrangle) &&(openDoorAreaPoints.length > 0)) {
|
|
ctx.strokeStyle = openDoorAreaColor
|
|
ctx.lineWidth = 2
|
|
|
|
ctx.beginPath()
|
|
let point = scaledPoint(openDoorAreaPoints[0],
|
|
width, height)
|
|
ctx.moveTo(point.x, point.y)
|
|
for (var i = 1; i < openDoorAreaPoints.length; i++) {
|
|
point = scaledPoint(openDoorAreaPoints[i],
|
|
width, height)
|
|
ctx.lineTo(point.x, point.y)
|
|
}
|
|
ctx.closePath()
|
|
ctx.stroke()
|
|
}
|
|
if (antiClipAreaEnabled && (antiClipAreaPoints.length > 0)) {
|
|
ctx.strokeStyle = antiClipAreaColor
|
|
ctx.lineWidth = 2
|
|
|
|
ctx.beginPath()
|
|
let point = scaledPoint(antiClipAreaPoints[0],
|
|
width, height)
|
|
ctx.moveTo(point.x, point.y)
|
|
for (var i = 1; i < antiClipAreaPoints.length; i++) {
|
|
point = scaledPoint(antiClipAreaPoints[i],
|
|
width, height)
|
|
ctx.lineTo(point.x, point.y)
|
|
}
|
|
ctx.closePath()
|
|
ctx.stroke()
|
|
}
|
|
if (shieldedAreaEnabled &&(shieldedAreaPoints.length > 0)) {
|
|
ctx.lineWidth = 2
|
|
ctx.strokeStyle = shieldedAreaColor
|
|
let point0 = scaledPoint(shieldedAreaPoints[0],
|
|
width, height)
|
|
let point1 = scaledPoint(shieldedAreaPoints[1],
|
|
width, height)
|
|
let point2 = scaledPoint(shieldedAreaPoints[2],
|
|
width, height)
|
|
let point3 = scaledPoint(shieldedAreaPoints[3],
|
|
width, height)
|
|
ctx.strokeRect(point0.x, point0.y, point1.x - point0.x,
|
|
point1.y - point0.y)
|
|
ctx.strokeRect(point2.x, point2.y, point3.x - point2.x,
|
|
point3.y - point2.y)
|
|
}
|
|
}
|
|
}
|
|
|
|
Repeater {
|
|
id: repeater
|
|
visible: openDoorAreaWay>=DeviceConnection.Quadrangle
|
|
model: openDoorAreaPoints
|
|
delegate: Rectangle {
|
|
width: dargWidth
|
|
height: dargWidth
|
|
visible: root.enabled &&(openDoorAreaWay>=DeviceConnection.Quadrangle)
|
|
color: openDoorAreaColor
|
|
x: scaledPoint(modelData, canvas.width,
|
|
canvas.height).x - width / 2
|
|
y: scaledPoint(modelData, canvas.width,
|
|
canvas.height).y - height / 2
|
|
}
|
|
}
|
|
|
|
Repeater {
|
|
id: shieldedAreaRepeater
|
|
model: shieldedAreaPoints
|
|
visible: shieldedAreaEnabled
|
|
delegate: Rectangle {
|
|
width: dargWidth
|
|
height: dargWidth
|
|
visible: root.enabled && shieldedAreaEnabled
|
|
color: shieldedAreaColor
|
|
x: scaledPoint(modelData, canvas.width,
|
|
canvas.height).x - width / 2
|
|
y: scaledPoint(modelData, canvas.width,
|
|
canvas.height).y - height / 2
|
|
}
|
|
}
|
|
|
|
Repeater {
|
|
id: antiAreaRepeater
|
|
visible: antiClipAreaEnabled
|
|
model: antiClipAreaPoints
|
|
delegate: Rectangle {
|
|
visible: root.enabled && antiClipAreaEnabled
|
|
width: dargWidth
|
|
height: dargWidth
|
|
color: antiClipAreaColor
|
|
x: scaledPoint(modelData, canvas.width,
|
|
canvas.height).x - width / 2
|
|
y: scaledPoint(modelData, canvas.width,
|
|
canvas.height).y - height / 2
|
|
}
|
|
}
|
|
|
|
MouseArea {
|
|
anchors.fill: parent
|
|
enabled: root.enabled
|
|
property int draggedOpenDoorAreaPointIndex: -1
|
|
property int draggedShieldedAreaPointIndex: -1
|
|
property int draggedAntiAreaPointIndex: -1
|
|
onPressed: mouse => {
|
|
if(openDoorAreaWay == DeviceConnection.Quadrangle){
|
|
for (var i = 0; i < openDoorAreaPoints.length; i++) {
|
|
let point = scaledPoint(
|
|
openDoorAreaPoints[i], canvas.width,
|
|
canvas.height)
|
|
if (isInside(mouse.x, mouse.y, point)) {
|
|
draggedOpenDoorAreaPointIndex = i
|
|
break
|
|
}
|
|
}
|
|
}
|
|
if (draggedOpenDoorAreaPointIndex >= 0)
|
|
return
|
|
if(shieldedAreaEnabled){
|
|
for (let i = 0; i < shieldedAreaPoints.length; i++) {
|
|
let point = scaledPoint(
|
|
shieldedAreaPoints[i], canvas.width,
|
|
canvas.height)
|
|
if (isInside(mouse.x, mouse.y, point)) {
|
|
draggedShieldedAreaPointIndex = i
|
|
break
|
|
}
|
|
}
|
|
}
|
|
if (draggedShieldedAreaPointIndex >= 0)
|
|
return
|
|
if(antiClipAreaEnabled){
|
|
for (let i = 0; i < antiClipAreaPoints.length; i++) {
|
|
let point = scaledPoint(
|
|
antiClipAreaPoints[i], canvas.width,
|
|
canvas.height)
|
|
if (isInside(mouse.x, mouse.y, point)) {
|
|
draggedAntiAreaPointIndex = i
|
|
break
|
|
}
|
|
}
|
|
}
|
|
}
|
|
onReleased: {
|
|
if (draggedOpenDoorAreaPointIndex >= 0) {
|
|
App.updateOpenDoorAreaPoints(openDoorAreaPoints)
|
|
draggedOpenDoorAreaPointIndex = -1
|
|
}
|
|
if (draggedShieldedAreaPointIndex >= 0) {
|
|
App.updateShieldedAreaPoints(shieldedAreaPoints)
|
|
draggedShieldedAreaPointIndex = -1
|
|
}
|
|
if (draggedAntiAreaPointIndex >= 0) {
|
|
App.updateAntiClipAreaPoints(antiClipAreaPoints)
|
|
draggedAntiAreaPointIndex = -1
|
|
}
|
|
}
|
|
onPositionChanged: mouse => {
|
|
if ((mouse.x < 0) || (mouse.x > canvas.width) || (mouse.y < 0) || (mouse.y > canvas.height)) return
|
|
if (draggedOpenDoorAreaPointIndex >= 0) {
|
|
openDoorAreaPoints[draggedOpenDoorAreaPointIndex]
|
|
= standardPoint(Qt.point(mouse.x, mouse.y), canvas.width, canvas.height)
|
|
canvas.requestPaint()
|
|
repeater.model = openDoorAreaPoints
|
|
} else if (draggedShieldedAreaPointIndex >= 0) {
|
|
shieldedAreaPoints[draggedShieldedAreaPointIndex]
|
|
= standardPoint(Qt.point(mouse.x,
|
|
mouse.y),
|
|
canvas.width,
|
|
canvas.height)
|
|
canvas.requestPaint()
|
|
shieldedAreaRepeater.model = shieldedAreaPoints
|
|
} else if (draggedAntiAreaPointIndex >= 0) {
|
|
antiClipAreaPoints[draggedAntiAreaPointIndex]
|
|
= standardPoint(Qt.point(mouse.x,
|
|
mouse.y),
|
|
canvas.width,
|
|
canvas.height)
|
|
canvas.requestPaint()
|
|
antiAreaRepeater.model = antiClipAreaPoints
|
|
}
|
|
}
|
|
|
|
function isInside(x, y, point) {
|
|
let edge = dargWidth / 2
|
|
return x >= point.x - edge && x <= point.x + edge
|
|
&& y >= point.y - edge && y <= point.y + edge
|
|
}
|
|
}
|
|
}
|
|
}
|
|
Grid {
|
|
id: controlBar
|
|
anchors.left: parent.left
|
|
anchors.right: parent.right
|
|
anchors.bottom: parent.bottom
|
|
columns: 2
|
|
spacing: 10
|
|
verticalItemAlignment: Qt.AlignVCenter
|
|
Text {
|
|
|
|
text: qsTr("开门区域: ")
|
|
}
|
|
Row {
|
|
enabled: root.enabled
|
|
RadioButton {
|
|
text: "关闭"
|
|
checked: App.currentOpenDoorAreaWay ==DeviceConnection.Diabled
|
|
onToggled:{
|
|
App.currentOpenDoorAreaWay =DeviceConnection.Diabled
|
|
}
|
|
}
|
|
RadioButton {
|
|
text: "全区域"
|
|
checked: App.currentOpenDoorAreaWay ==DeviceConnection.FullArea
|
|
onToggled:{
|
|
App.currentOpenDoorAreaWay =DeviceConnection.FullArea
|
|
}
|
|
}
|
|
RadioButton {
|
|
text: "四边形"
|
|
checked: App.currentOpenDoorAreaWay ==DeviceConnection.Quadrangle
|
|
onToggled:{
|
|
App.currentOpenDoorAreaWay =DeviceConnection.Quadrangle
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
Text {text: qsTr("防夹区域: ")}
|
|
Row {
|
|
enabled: root.enabled
|
|
RadioButton {
|
|
text: "关闭"
|
|
checked: !App.currentAntiClipAreaEnabled
|
|
onToggled: {
|
|
App.currentAntiClipAreaEnabled=false
|
|
}
|
|
|
|
}
|
|
RadioButton {
|
|
text: "四边形"
|
|
checked: App.currentAntiClipAreaEnabled
|
|
onToggled: {
|
|
App.currentAntiClipAreaEnabled=true
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
Text {text: qsTr("屏蔽区域: ")}
|
|
Row {
|
|
id: shieldedRow
|
|
RadioButton {
|
|
checked: !shieldedAreaEnabled
|
|
text: "关闭"
|
|
onToggled: {
|
|
App.currentShieldedAreaEnabled = false
|
|
}
|
|
}
|
|
RadioButton {
|
|
checked: shieldedAreaEnabled
|
|
text: "开启"
|
|
onToggled: {
|
|
App.currentShieldedAreaEnabled = true
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
// 转换为显示画点
|
|
function scaledPoint(point, width, height) {
|
|
let x = point.x * width / App.DeviceWidth
|
|
let y = point.y * height / App.DeviceHeight
|
|
return Qt.point(x, y)
|
|
}
|
|
|
|
// 转换为设备画点(640x360)
|
|
function standardPoint(point, width, height) {
|
|
let x = point.x * App.DeviceWidth / width
|
|
let y = point.y * App.DeviceHeight / height
|
|
return Qt.point(x, y)
|
|
}
|
|
|
|
onEnabledChanged: {
|
|
canvas.requestPaint()
|
|
if(!enabled){
|
|
image.source = "image://videoframe/black"
|
|
}
|
|
}
|
|
|
|
Connections {
|
|
target: App
|
|
function onNewVideoFrame() {
|
|
image.source = ""
|
|
image.source = "image://videoframe/"
|
|
}
|
|
function onCurrentOpenDoorAreaPointsChanged() {
|
|
canvas.requestPaint()
|
|
repeater.model = openDoorAreaPoints
|
|
}
|
|
function onCurrentShieldedAreaPointsChanged() {
|
|
shieldedAreaRepeater.model = shieldedAreaPoints
|
|
canvas.requestPaint()
|
|
}
|
|
function onCurrentAntiClipAreaPointsChanged() {
|
|
antiAreaRepeater.model = antiClipAreaPoints
|
|
canvas.requestPaint()
|
|
}
|
|
function onCurrentOpenDoorAreaWayChanged(){
|
|
canvas.requestPaint()
|
|
}
|
|
function onCurrentShieldedAreaEnabledChanged(){
|
|
canvas.requestPaint()
|
|
}
|
|
function onCurrentAntiClipAreaEnabledChanged(){
|
|
canvas.requestPaint()
|
|
}
|
|
}
|
|
}
|