PDA

View Full Version : ChartView MouseArea and QScatterSeries OnClick



rhb327
31st July 2020, 15:05
Struggling to get both the ChartView MouseArea and a QScatterSeries events working at the same time. Depending on z-order I can easily get one or the other working but not both! I've had the MouseArea as a child to the ChartView and as a sibling. Generally my approach is to have the MouseArea higher z-order than the ChartView and try to pass the signal along to the QScatterSeries but no joy. I've experimented with propagateComposedEvents = true in the MouseArea and adding an onClicked (mouse.accepted = fales). My MouseArea has onReleased and onPressed handler as well. Here's my current code:


Rectangle{
id: chartDataRect
anchors{left: parent.left; leftMargin: 30; right: metaDataRect.left; rightMargin: 10; top: headerSeparator.bottom; topMargin: 40}
radius: 6
height: 340
color: "#ECEEEE"

ChartView {
id: chartView
clip: true
anchors.fill: parent
margins.left: 0
margins.right: 0
margins.top: 0
margins.bottom: 0
legend.visible: false
backgroundColor: "transparent"
antialiasing: true
legend.alignment: Qt.AlignBottom
theme: ChartView.ChartThemeDark
width: 2.0
property bool pressed: false

property var alarmTimeData: []
property var alarmNameData: []
property var stepData: []

property var alarmIconsList: [
"qrc:/assets/Images/AlarmIcons/bell-Alarm.png",
"qrc:/assets/Images/AlarmIcons/power-Alarm.png",
"qrc:/assets/Images/AlarmIcons/service-Alarm.png",
"qrc:/assets/Images/AlarmIcons/temperature-Alarm.png",
"qrc:/assets/Images/AlarmIcons/warm-Alarm.png",
]

onSeriesRemoved: {
console.log("Series Removed.")
}

ValueAxis {
id: timeAxis
color: "#344550"
min: 0
max: 1
labelFormat:"%.1f"
labelsColor: "#FFFFFF"
}

ValueAxis {
id: tempAxis
min: -195
max: 40
color: "#344550"
labelFormat:"%.1f"
labelsColor: "#FFFFFF"
}

ScatterSeries {
id: scatterSeries
axisX: timeAxis
axisY: tempAxis
color: "red"
visible: true

// TODO: Not working? Hovered does work Event propagation issue.
onClicked: {
toolTipAlarm.visible=true
var pnt = chartView.mapToPosition(point, scatterSeries)
toolTipAlarm.x = pnt.x
toolTipAlarm.y = pnt.y

var stepCount=0
for(var i=0 ;i<stepDataArray.length; ++i) {
if(parseFloat(stepDataArray[i]).toFixed(3)===point.x.toFixed(3)) {
stepCount = i
break
}
}
console.log("SDA:", stepDataArray, point.x.toFixed(3), stepCount)
toolTipAlarm.text = qsTrId("Step: ") + parseInt(stepCount+1) + " | " + point.x.toFixed(3)
}
}

// For Displaying Images on Icon Overlay
Repeater {
id: rep_iconOverLay

Image {
id: alarmImage
source: chartView.alarmIconsList[almImage(index)]
width: 15
height: 15
fillMode: Image.PreserveAspectFit
visible: (x>0)
x: showAlmIcon(index)
y: checkNearby(index)

MouseArea {
anchors.fill: parent
propagateComposedEvents: true
onClicked: {
toolTipAlarm.text="Alarm: " + chartView.alarmTimeData[index] + ", " + chartView.alarmNameData[index]
toolTipAlarm.visible=true
toolTipAlarm.x=alarmImage.x
toolTipAlarm.y=alarmImage.y
}
}

function almImage(idx) {
if ((almSymbol[idx] === "N2") || (almSymbol[idx] === "HM")) {
return EnumShared.REDBELL - 2
}
else if ((almSymbol[idx] === "TH") || (almSymbol[idx] === "TL")
|| (almSymbol[idx] === "CL") || (almSymbol[idx] === "SL")) {
return EnumShared.TEMP - 2
}
else if ((almSymbol[idx] === "CF") || (almSymbol[idx] === "SF")) {
return EnumShared.SERVICE - 2
}
else if (almSymbol[idx] === "PF") {
return EnumShared.PWRFAIL - 2
}
else if (almSymbol[idx] === "SD") {
return EnumShared.REDBELL - 2
}
else {
// Error
return -1
}
}

function showAlmIcon(idx) {
if ((chartView.alarmTimeData[idx] > timeAxis.min) && (chartView.alarmTimeData[idx] < timeAxis.max)) {
return chartView.mapToPosition(Qt.point(chartView.alarmTi meData[idx],0),lSeries3).x
}
else {
return(-1)
}
}

function checkNearby(idx) {
var newPt = chartView.mapToPosition(Qt.point(chartView.alarmTi meData[idx],0),lSeries3).x
var priorPt = chartView.mapToPosition(Qt.point(chartView.alarmTi meData[idx-1],0),lSeries3).x
if (newPt - priorPt < 15) {
return 280
}
else {
return 260
}
}
}
}

ToolTip{
id: toolTipAlarm
timeout: 1500
}

Rectangle{
id: zoomRect
color: "#FFFFFF"
opacity: 0.4
visible: false
}
}

MouseArea {
anchors.fill: chartView
propagateComposedEvents: true
property int lastX: 0
property int lastY: 0
acceptedButtons: Qt.AllButtons

onClicked: {
mouse.accepted = false
}
onReleased: {
if (mouse.button === Qt.LeftButton) {
rep_iconOverLay.model=0
if (lastX !== mouse.x) {
chartView.scrollRight(lastX - mouse.x);
lastX = mouse.x;
}
if (lastY !== mouse.y) {
chartView.scrollDown(lastY - mouse.y);
lastY = mouse.y;
}
rep_iconOverLay.model=chartView.alarmTimeData
}
else if (mouse.button === Qt.RightButton) {
rep_iconOverLay.model=0
chartView.zoomIn(Qt.rect(zoomRect.x, zoomRect.y, zoomRect.width, zoomRect.height));
zoomRect.visible = false
chartView.pressed=false
rep_iconOverLay.model=chartView.alarmTimeData
}
}
onDoubleClicked: {
rep_iconOverLay.model=0
chartView.zoomReset()
timeAxis.min = xMinn
timeAxis.max = xMaxx
tempAxis.min = yMinn
tempAxis.max = yMaxx
rep_iconOverLay.model=chartView.alarmTimeData
}
onPressed: {
if (mouse.button === Qt.LeftButton) {
lastX = mouse.x;
lastY = mouse.y;
}
else if (mouse.button === Qt.RightButton){
chartView.pressed = false
zoomRect.x = mouse.x
zoomRect.y = mouse.y
zoomRect.visible = true
}
}
onMouseXChanged: {
zoomRect.width = mouse.x - zoomRect.x;
}
onMouseYChanged: {
zoomRect.height = mouse.y - zoomRect.y;
}
}
}