Plotting Components Plugin (#270)

Signed-off-by: AmrElsersy <[email protected]> Signed-off-by: Louise Poubel <[email protected]> Co-authored-by: Louise Poubel <[email protected]> Co-authored-by: Claire Wang <[email protected]>
gazebosim · Sep 23, 2020 · 2676909 · 2676909
1 parent d364390
commit 2676909
Show file tree

Hide file tree

Showing 11 changed files with 939 additions and 50 deletions.
diff --git a/src/gui/plugins/CMakeLists.txt b/src/gui/plugins/CMakeLists.txt
@@ -85,6 +85,7 @@ add_subdirectory(align_tool)
 add_subdirectory(component_inspector)
 add_subdirectory(entity_tree)
 add_subdirectory(grid_config)
+add_subdirectory(plotting)
 add_subdirectory(resource_spawner)
 add_subdirectory(scene3d)
 add_subdirectory(shapes)

diff --git a/src/gui/plugins/component_inspector/ComponentInspector.cc b/src/gui/plugins/component_inspector/ComponentInspector.cc
@@ -256,7 +256,8 @@ QHash<int, QByteArray> ComponentsModel::RoleNames()
           std::pair(102, "shortName"),
           std::pair(103, "dataType"),
           std::pair(104, "unit"),
-          std::pair(105, "data")};
+          std::pair(105, "data"),
+          std::pair(106, "entity")};
 }
 
 /////////////////////////////////////////////////
@@ -383,6 +384,9 @@ void ComponentInspector::Update(const UpdateInfo &,
           Q_ARG(ignition::gazebo::ComponentTypeId, typeId));
     }
 
+    item->setData(QString::number(this->dataPtr->entity),
+                  ComponentsModel::RoleNames().key("entity"));
+
     if (nullptr == item)
     {
       ignerr << "Failed to get item for component type [" << typeId << "]"

diff --git a/src/gui/plugins/component_inspector/ComponentInspector.qrc b/src/gui/plugins/component_inspector/ComponentInspector.qrc
@@ -7,5 +7,6 @@
   <file>String.qml</file>
   <file>TypeHeader.qml</file>
   <file>Vector3d.qml</file>
+  <file>plottable_icon.svg</file>
 </qresource>
 </RCC>
diff --git a/src/gui/plugins/component_inspector/Pose3d.qml b/src/gui/plugins/component_inspector/Pose3d.qml
@@ -44,6 +44,9 @@ Rectangle {
     return !(isModel)
   }
 
+  property int iconWidth: 20
+  property int iconHeight: 20
+
   // Loaded item for X
   property var xItem: {}
 
@@ -177,6 +180,7 @@ Rectangle {
         }
       }
 
+
       GridLayout {
         id: grid
         width: parent.width
@@ -188,12 +192,58 @@ Rectangle {
           width: margin + indentation
         }
 
-        Text {
-          text: 'X (m)'
-          leftPadding: 5
-          color: Material.theme == Material.Light ? "#444444" : "#bbbbbb"
-          font.pointSize: 12
+
+        Component {
+          id: plotIcon
+          Image {
+            property string componentInfo: ""
+            source: "plottable_icon.svg"
+            anchors.top: parent.top
+            anchors.left: parent.left
+
+            Drag.mimeData: { "text/plain" : (model === null) ? "" :
+            "Component," + model.entity + "," + model.typeId + "," +
+                           model.dataType + "," + componentInfo + "," + model.shortName
+            }
+            Drag.dragType: Drag.Automatic
+            Drag.supportedActions : Qt.CopyAction
+            Drag.active: dragMouse.drag.active
+            // a point to drag from
+            Drag.hotSpot.x: 0
+            Drag.hotSpot.y: y
+            MouseArea {
+              id: dragMouse
+              anchors.fill: parent
+              drag.target: (model === null) ? null : parent
+              onPressed: parent.grabToImage(function(result) {parent.Drag.imageSource = result.url })
+              onReleased: parent.Drag.drop();
+              cursorShape: Qt.DragCopyCursor
+            }
         }
+      }
+
+        Rectangle {
+          color: "transparent"
+          height: 40
+          Layout.preferredWidth: xText.width + indentation*3
+          Loader {
+            id: loaderX
+            width: iconWidth
+            height: iconHeight
+            y:10
+            sourceComponent: plotIcon
+          }
+          Component.onCompleted: loaderX.item.componentInfo = "x"
+
+          Text {
+            id : xText
+            text: ' X (m)'
+            leftPadding: 5
+            color: Material.theme == Material.Light ? "#444444" : "#bbbbbb"
+            font.pointSize: 12
+            anchors.centerIn: parent
+          }
+      }
 
         Item {
           Layout.fillWidth: true
@@ -209,11 +259,27 @@ Rectangle {
           }
         }
 
-        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 + indentation*3
+          Loader {
+            id: loaderRoll
+            width: iconWidth
+            height: iconHeight
+            y:10
+            sourceComponent: plotIcon
+          }
+          Component.onCompleted: loaderRoll.item.componentInfo = "roll"
+
+          Text {
+            id: rollText
+            text: ' Roll (rad)'
+            leftPadding: 5
+            color: Material.theme == Material.Light ? "#444444" : "#bbbbbb"
+            font.pointSize: 12
+            anchors.centerIn: parent
+          }
         }
 
         Item {
@@ -233,14 +299,30 @@ Rectangle {
         // Right spacer
         Item {
           Layout.rowSpan: 3
-          width: margin
+          width: margin + indentation
         }
 
-        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 + indentation*3
+          Loader {
+            id: loaderY
+            width: iconWidth
+            height: iconHeight
+            y:10
+            sourceComponent: plotIcon
+          }
+          Component.onCompleted: loaderY.item.componentInfo = "y"
+          Text {
+            id: yText
+            text: ' Y (m)'
+            leftPadding: 5
+            color: Material.theme == Material.Light ? "#444444" : "#bbbbbb"
+            font.pointSize: 12
+            anchors.centerIn: parent
+          }
         }
 
         Item {
@@ -257,11 +339,26 @@ Rectangle {
           }
         }
 
-        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 + indentation*3
+          Loader {
+            id: loaderPitch
+            width: iconWidth
+            height: iconHeight
+            y:10
+            sourceComponent: plotIcon
+          }
+          Component.onCompleted: loaderPitch.item.componentInfo = "pitch";
+          Text {
+            id: pitchText
+            text: ' Pitch (rad)'
+            leftPadding: 5
+            color: Material.theme == Material.Light ? "#444444" : "#bbbbbb"
+            font.pointSize: 12
+            anchors.centerIn: parent
+          }
         }
 
         Item {
@@ -278,11 +375,26 @@ Rectangle {
           }
         }
 
-        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 + indentation*3
+          Loader {
+            id: loaderZ
+            width: iconWidth
+            height: iconHeight
+            y:10
+            sourceComponent: plotIcon
+          }
+          Component.onCompleted: loaderZ.item.componentInfo = "z";
+          Text {
+            id: zText
+            text: ' Z (m)'
+            leftPadding: 5
+            color: Material.theme == Material.Light ? "#444444" : "#bbbbbb"
+            font.pointSize: 12
+            anchors.centerIn: parent
+          }
         }
 
         Item {
@@ -299,11 +411,26 @@ Rectangle {
           }
         }
 
-        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 + indentation*3
+          Loader {
+            id: loaderYaw
+            width: iconWidth
+            height: iconHeight
+            y:10
+            sourceComponent: plotIcon
+          }
+          Component.onCompleted: loaderYaw.item.componentInfo = "yaw";
+          Text {
+            id: yawText
+            text: ' Yaw (rad)'
+            leftPadding: 5
+            color: Material.theme == Material.Light ? "#444444" : "#bbbbbb"
+            font.pointSize: 12
+            anchors.centerIn: parent
+          }
         }
 
         Item {