Add plotting to common widget pose (#439)

* add common widget plot icons

* add plot icons to common widget pose

* make plot icons optional for common widget pose

Signed-off-by: youhy <haoyuan2019@outlook.com>

Co-authored-by: Jenn Nguyen <jenn@openrobotics.org>

include/ignition/gui/qml/GzPlotIcon.qml

@@ -0,0 +1,79 @@
+/*
+ * 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: gzploticon
+ *     GzPlotIcon {}
+ *   }
+ *
+ *   Rectangle {
+ *     Loader {
+ *       id: plotLoader
+ *       sourceComponent: gzploticon
+ *     }
+ *     Component.onCompleted: {
+ *       plotLoader.item.gzMimeData = {"text/plain" : "Component," + entityFromCpp + "," + typeIdFromCpp + ",x," + typeNameFromCpp} 
+ *     }
+ *   }
+ * }
+ *
+ */
+Rectangle {
+  /**
+   * Used to transfer data, where data is separated by ','.
+   * For components, the syntax needs to be:
+   *   `{"text/plain" : "Component," + <entity> + "," + <typeId> + "," + <attribute> + "," + <typeName>}`.
+   * For transport topics: `{"text/plain" : <topic> + "," + <fieldPath>}`.
+   * See, Chart.qml and PlottingInterface.hh/.cc for more details.
+  **/
+  property var gzMimeData
+  y: 10
+  height: 40
+  width: 20
+  color: "transparent"
+
+  Image {
+    source: "images/plottable_icon.svg"
+    anchors.top: parent.top
+    anchors.left: parent.left
+    width: 20
+    height: 20
+    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

@@ -27,6 +27,9 @@ import QtQuick.Controls.Styles 1.4
  *  If readOnly == False,
  *  users can read from signal parameters of gzPoseSet: _x, _y, etc.
  *
+ *  To enable plotting, set gzPlotEnabled = true.
+ *  If true, gzPlotMimeData* is required.
+ *
  *  Usage example:
  *  GzPose {
  *    id: gzPose
@@ -37,6 +40,13 @@ import QtQuick.Controls.Styles 1.4
  *    rollValue: rollValueFromCPP
  *    pitchValue: pitchValueFromCPP
  *    yawValue: yawValueFromCPP
+ *    gzPlotEnabled: true
+ *    gzPlotMimeDataX: {"text/plain" : "Component," + entityFromCpp + "," + typeIdFromCpp + ",x," + typeNameFromCpp}
+ *    gzPlotMimeDataY: {"text/plain" : "Component," + entityFromCpp + "," + typeIdFromCpp + ",y," + typeNameFromCpp}
+ *    gzPlotMimeDataZ: {"text/plain" : "Component," + entityFromCpp + "," + typeIdFromCpp + ",z," + typeNameFromCpp}
+ *    gzPlotMimeDataRoll: {"text/plain" : "Component," + entityFromCpp + "," + typeIdFromCpp + ",roll," + typeNameFromCpp}
+ *    gzPlotMimeDataPitch:{"text/plain" : "Component," + entityFromCpp + "," + typeIdFromCpp + ",pitch," + typeNameFromCpp}
+ *    gzPlotMimeDataYaw: {"text/plain" : "Component," + entityFromCpp + "," + typeIdFromCpp + ",yaw," + typeNameFromCpp}
  *    onGzPoseSet: {
  *      myFunc(_x, _y, _z, _roll, _pitch, _yaw)
  *    }
@@ -72,6 +82,16 @@ Item {
   // Expand/Collapse of this widget
   property bool expand: true
 
+  // Display/Hide plotting icons
+  property bool gzPlotEnabled: false
+
+  // Data for plotting, see GzPlotIcon.qml for more details
+  property var gzPlotMimeDataX: {"text/plain" : ""}
+  property var gzPlotMimeDataY: {"text/plain" : ""}
+  property var gzPlotMimeDataZ: {"text/plain" : ""}
+  property var gzPlotMimeDataRoll: {"text/plain" : ""}
+  property var gzPlotMimeDataPitch: {"text/plain" : ""}
+  property var gzPlotMimeDataYaw: {"text/plain" : ""}
 
   /*** The following are private variables: ***/
   height: gzPoseContent.height
@@ -102,7 +122,8 @@ Item {
       maximumValue: spinMax
       decimals: gzHelper.getDecimals(writableSpin.width)
       onEditingFinished: {
-        gzPoseRoot.gzPoseSet(xItem.value, yItem.value, zItem.value, rollItem.value, pitchItem.value, yawItem.value)
+        gzPoseRoot.gzPoseSet(xItem.value, yItem.value, zItem.value,
+                             rollItem.value, pitchItem.value, yawItem.value)
       }
     }
   }
@@ -124,6 +145,16 @@ Item {
     }
   }
 
+  /**
+   * Used to create a plotting icon
+   */
+  Component {
+    id: gzPlotIcon
+    GzPlotIcon {
+      gzMimeData: gzLoaderMimeData
+    }
+  }
+
   Rectangle {
     id: gzPoseContent
     width: parent.width
@@ -143,11 +174,25 @@ 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
+          active: gzPlotEnabled
+          sourceComponent: gzPlotIcon
+          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 +209,25 @@ Item {
         }
       }
 
-      Text {
-        text: 'Roll (rad)'
-        leftPadding: 5
-        color: Material.theme == Material.Light ? "#444444" : "#bbbbbb"
-        font.pointSize: 12
+      Rectangle {
+        color: "transparent"
+        height: 40
+        Layout.preferredWidth: rollText.width + 40
+        Loader {
+          id: rollPlot
+          active: gzPlotEnabled
+          sourceComponent: gzPlotIcon
+          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 +244,25 @@ 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
+          active: gzPlotEnabled
+          sourceComponent: gzPlotIcon
+          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 +279,25 @@ 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
+          active: gzPlotEnabled
+          sourceComponent: gzPlotIcon
+          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 +314,25 @@ 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
+          active: gzPlotEnabled
+          sourceComponent: gzPlotIcon
+          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 +349,25 @@ 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
+          active: gzPlotEnabled
+          sourceComponent: gzPlotIcon
+          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 {