Add plotting to common widget pose

include/ignition/gui/qml/GzPlot.qml

@@ -0,0 +1,69 @@
+/*
+ * Copyright (C) 2022 Open Source Robotics Foundation
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+*/
+import QtQuick 2.9
+
+/**
+ * Item for a draggable plotting icon
+ *
+ * User Example:
+ * Item {
+ *   Component {
+ *     id: gzplot
+ *     GzPlot {}
+ *   }
+ *
+ *   Rectangle {
+ *     Loader {
+ *       id: plotLoader
+ *       sourceComponent: gzplot
+ *     }
+ *     Component.onCompleted: {
+ *       plotLoader.item.gzMimeData = {"text/plain" : ""}
+ *     }
+ *   }
+ * }
+ *
+ */
+
+Image {
+  id: gzPlotIconRoot
+  property var gzMimeData
+  width: 20
+  height: 20
+  y: 10
+  source: "images/plottable_icon.svg"
+  anchors.top: parent.top
+  anchors.left: parent.left
+
+  Drag.mimeData: gzMimeData
+  Drag.dragType: Drag.Automatic
+  Drag.supportedActions : Qt.CopyAction
+  Drag.active: gzDragMouse.drag.active
+  // a point to drag from
+  Drag.hotSpot.x: 0
+  Drag.hotSpot.y: y
+  MouseArea {
+    id: gzDragMouse
+    anchors.fill: parent
+    drag.target: parent
+    onPressed: {
+      parent.grabToImage(function(result) {parent.Drag.imageSource = result.url })
+    }
+    onReleased: parent.Drag.drop();
+    cursorShape: Qt.DragCopyCursor
+  }
+}

include/ignition/gui/qml/GzPose.qml

@@ -37,6 +37,12 @@ import QtQuick.Controls.Styles 1.4
  *    rollValue: rollValueFromCPP
  *    pitchValue: pitchValueFromCPP
  *    yawValue: yawValueFromCPP
+ *    gzPlotMimeDataX: {"text/plain" : "text data for x plotting"} 
+ *    gzPlotMimeDataY: {"text/plain" : "text data for y plotting"} 
+ *    gzPlotMimeDataZ: {"text/plain" : "text data for z plotting"} 
+ *    gzPlotMimeDataRoll: {"text/plain" : "text data for roll plotting"} 
+ *    gzPlotMimeDataPitch: {"text/plain" : "text data for pitch plotting"} 
+ *    gzPlotMimeDataYaw: {"text/plain" : "text data for yaw plotting"} 
  *    onGzPoseSet: {
  *      myFunc(_x, _y, _z, _roll, _pitch, _yaw)
  *    }
@@ -72,10 +78,14 @@ Item {
   // Expand/Collapse of this widget
   property bool expand: true
 
+  property var gzPlotMimeData
 
   /*** The following are private variables: ***/
   height: gzPoseContent.height
 
+  property int iconWidth: 20
+  property int iconHeight: 20
+
   // local variables to store spinbox values
   property var xItem: {}
   property var yItem: {}
@@ -84,6 +94,14 @@ Item {
   property var pitchItem: {}
   property var yawItem: {}
 
+  // text data map for plotting
+  property var gzPlotMimeDataX
+  property var gzPlotMimeDataY
+  property var gzPlotMimeDataZ
+  property var gzPlotMimeDataRoll
+  property var gzPlotMimeDataPitch
+  property var gzPlotMimeDataYaw
+
   // Dummy component to use its functions.
   IgnHelpers {
     id: gzHelper
@@ -124,6 +142,16 @@ Item {
     }
   }
 
+  /**
+   * Used to create a plotting icon
+   */
+  Component {
+    id: gzPlotPose
+    GzPlot {
+      gzMimeData: gzLoaderMimeData
+    }
+  }
+
   Rectangle {
     id: gzPoseContent
     width: parent.width
@@ -143,11 +171,27 @@ Item {
       width: parent.width
       columns: 4
 
-      Text {
-        text: 'X (m)'
-        leftPadding: 5
-        color: Material.theme == Material.Light ? "#444444" : "#bbbbbb"
-        font.pointSize: 12
+      Rectangle {
+        color: "transparent"
+        height: 40
+        Layout.preferredWidth: xText.width + 40
+        Loader {
+          id: xPlot
+          sourceComponent: gzPlotPose
+          width: iconWidth
+          height: iconHeight
+          y:10
+          property var gzLoaderMimeData: gzPlotMimeDataX
+        }
+
+        Text {
+          id: xText
+          text: 'X (m)'
+          leftPadding: 5
+          color: Material.theme == Material.Light ? "#444444" : "#bbbbbb"
+          font.pointSize: 12
+          anchors.centerIn: parent
+        }
       }
 
       Item {
@@ -164,11 +208,28 @@ Item {
         }
       }
 
-      Text {
-        text: 'Roll (rad)'
-        leftPadding: 5
-        color: Material.theme == Material.Light ? "#444444" : "#bbbbbb"
-        font.pointSize: 12
+      Rectangle {
+        color: "transparent"
+        height: 40
+        width: iconWidth
+        Layout.preferredWidth: rollText.width + 40
+        Loader {
+          id: rollPlot
+          sourceComponent: gzPlotPose
+          width: iconWidth
+          height: iconHeight
+          y:10
+          property var gzLoaderMimeData: gzPlotMimeDataRoll
+        }
+
+        Text {
+          id: rollText
+          text: 'Roll (rad)'
+          leftPadding: 5
+          color: Material.theme == Material.Light ? "#444444" : "#bbbbbb"
+          font.pointSize: 12
+          anchors.centerIn: parent
+        }
       }
 
       Item {
@@ -185,11 +246,27 @@ Item {
         }
       }
 
-      Text {
-        text: 'Y (m)'
-        leftPadding: 5
-        color: Material.theme == Material.Light ? "#444444" : "#bbbbbb"
-        font.pointSize: 12
+      Rectangle {
+        color: "transparent"
+        height: 40
+        Layout.preferredWidth: yText.width + 40
+        Loader {
+          id: yPlot
+          sourceComponent: gzPlotPose
+          width: iconWidth
+          height: iconHeight
+          y:10
+          property var gzLoaderMimeData: gzPlotMimeDataY
+        }
+
+        Text {
+          id: yText
+          text: 'Y (m)'
+          leftPadding: 5
+          color: Material.theme == Material.Light ? "#444444" : "#bbbbbb"
+          font.pointSize: 12
+          anchors.centerIn: parent
+        }
       }
 
       Item {
@@ -206,11 +283,27 @@ Item {
         }
       }
 
-      Text {
-        text: 'Pitch (rad)'
-        leftPadding: 5
-        color: Material.theme == Material.Light ? "#444444" : "#bbbbbb"
-        font.pointSize: 12
+       Rectangle {
+        color: "transparent"
+        height: 40
+        Layout.preferredWidth: pitchText.width + 40
+        Loader {
+          id: pitchPlot
+          sourceComponent: gzPlotPose
+          width: iconWidth
+          height: iconHeight
+          y:10
+          property var gzLoaderMimeData: gzPlotMimeDataPitch
+        }
+
+        Text {
+          id: pitchText
+          text: 'Pitch (rad)'
+          leftPadding: 5
+          color: Material.theme == Material.Light ? "#444444" : "#bbbbbb"
+          font.pointSize: 12
+          anchors.centerIn: parent
+        }
       }
 
       Item {
@@ -227,11 +320,27 @@ Item {
         }
       }
 
-      Text {
-        text: 'Z (m)'
-        leftPadding: 5
-        color: Material.theme == Material.Light ? "#444444" : "#bbbbbb"
-        font.pointSize: 12
+      Rectangle {
+        color: "transparent"
+        height: 40
+        Layout.preferredWidth: zText.width + 40
+        Loader {
+          id: zPlot
+          sourceComponent: gzPlotPose
+          width: iconWidth
+          height: iconHeight
+          y:10
+          property var gzLoaderMimeData: gzPlotMimeDataZ
+        }
+
+        Text {
+          id: zText
+          text: 'Z (m)'
+          leftPadding: 5
+          color: Material.theme == Material.Light ? "#444444" : "#bbbbbb"
+          font.pointSize: 12
+          anchors.centerIn: parent
+        }
       }
 
       Item {
@@ -248,11 +357,27 @@ Item {
         }
       }
 
-      Text {
-        text: 'Yaw (rad)'
-        leftPadding: 5
-        color: Material.theme == Material.Light ? "#444444" : "#bbbbbb"
-        font.pointSize: 12
+      Rectangle {
+        color: "transparent"
+        height: 40
+        Layout.preferredWidth: yawText.width + 40
+        Loader {
+          id: yawPlot
+          sourceComponent: gzPlotPose
+          width: iconWidth
+          height: iconHeight
+          y:10
+          property var gzLoaderMimeData: gzPlotMimeDataYaw
+        }
+
+        Text {
+          id: yawText
+          text: 'Yaw (rad)'
+          leftPadding: 5
+          color: Material.theme == Material.Light ? "#444444" : "#bbbbbb"
+          font.pointSize: 12
+          anchors.centerIn: parent
+        }
       }
 
       Item {