From d03acddb677c18b0bf5ad14a271c4fd6bad958e0 Mon Sep 17 00:00:00 2001
From: Tim Wundenberg <timwundenberg@outlook.de>
Date: Tue, 17 Aug 2021 21:48:19 +0200
Subject: [PATCH] add rotation and transformation of PointClouds in map-view

---
 .../public/Potree/examples/pcw.html           |  5 ++
 PointCloudWeb.Web/src/components/ScanItem.vue | 60 ++++++++++++++++---
 2 files changed, 57 insertions(+), 8 deletions(-)

diff --git a/PointCloudWeb.Web/public/Potree/examples/pcw.html b/PointCloudWeb.Web/public/Potree/examples/pcw.html
index 0e1bab0..fea6380 100644
--- a/PointCloudWeb.Web/public/Potree/examples/pcw.html
+++ b/PointCloudWeb.Web/public/Potree/examples/pcw.html
@@ -70,6 +70,9 @@
         // material.size = 1;
         // material.pointSizeType = Potree.PointSizeType.ADAPTIVE;
 
+        pc.rotation.set(pointCloud.rotation.x, pointCloud.rotation.y, pointCloud.rotation.z);
+        pc.position.set(pointCloud.transformation.x, pointCloud.transformation.y, pointCloud.transformation.z);
+
         loadedPointClouds.push({id: pointCloud.id, pointCloud: pc})
     }
 
@@ -84,6 +87,8 @@
                     entry.pointCloud.visible = !entry.pointCloud.visible;
                     entry.pointCloud.visible = !entry.pointCloud.visible;
                 }
+                entry.pointCloud.rotation.set(pointClouds[i].rotation.x, pointClouds[i].rotation.y, pointClouds[i].rotation.z);
+                entry.pointCloud.position.set(pointClouds[i].transformation.x, pointClouds[i].transformation.y, pointClouds[i].transformation.z);
             } else {
                 loadByPc(pointClouds[i])
             }
diff --git a/PointCloudWeb.Web/src/components/ScanItem.vue b/PointCloudWeb.Web/src/components/ScanItem.vue
index 250bfca..d605e4d 100644
--- a/PointCloudWeb.Web/src/components/ScanItem.vue
+++ b/PointCloudWeb.Web/src/components/ScanItem.vue
@@ -1,22 +1,33 @@
 <template>
   <div>
-    <font-awesome-icon class="icon" :icon="iconName" @click="onClickVisible" />
+    <font-awesome-icon class="icon" :icon="iconName" @click="onClickVisible"/>
     <p class="caption" @click="onClickEdit()">{{ item.name }}</p>
     <div id="settings" ref="settings" class="collapsed">
       <div id="settings-container" ref="settings-container">
         <div>
           <input
-            ref="focusElement"
-            type="text"
-            v-model="editPcName"
-            @keyup.enter="onEnter()"
+              ref="focusElement"
+              type="text"
+              v-model="editPcName"
+              @keyup.enter="onEnter()"
           />
-
           <button class="button-delete" @click="onClickDelete()">
             <font-awesome-icon class="icon" icon="trash"></font-awesome-icon>
             <span class="button-text">Delete</span>
           </button>
 
+          <p class="data-caption">Rotation</p>
+
+          <input class="input-num" type="number" v-model="editRotationX" @keyup.enter="onEnter()"/>
+          <input class="input-num" type="number" v-model="editRotationY" @keyup.enter="onEnter()"/>
+          <input class="input-num" type="number" v-model="editRotationZ" @keyup.enter="onEnter()"/>
+
+          <p class="data-caption">Transformation</p>
+          <input class="input-num" type="number" v-model="editTransformationX" @keyup.enter="onEnter()"/>
+          <input class="input-num" type="number" v-model="editTransformationY" @keyup.enter="onEnter()"/>
+          <input class="input-num" type="number" v-model="editTransformationZ" @keyup.enter="onEnter()"/>
+
+
           <button @click="onClickSave()">
             <font-awesome-icon class="icon" icon="edit"></font-awesome-icon>
             <span class="button-text">Save</span>
@@ -41,6 +52,12 @@ export default {
       isVisible: true,
       isCollapsed: true,
       editPcName: "",
+      editRotationX: 0,
+      editRotationY: 0,
+      editRotationZ: 0,
+      editTransformationX: 0,
+      editTransformationY: 0,
+      editTransformationZ: 0,
     };
   },
   methods: {
@@ -61,8 +78,14 @@ export default {
         this.$refs.settings.style.height = "0";
       } else {
         this.editPcName = this.item.name;
+        this.editRotationX = this.item.rotation.x;
+        this.editRotationY = this.item.rotation.y;
+        this.editRotationZ = this.item.rotation.z;
+        this.editTransformationX = this.item.transformation.x;
+        this.editTransformationY = this.item.transformation.y;
+        this.editTransformationZ = this.item.transformation.z;
         this.$refs.settings.style.height =
-          this.outerHeight(this.$refs["settings-container"]) + "px";
+            this.outerHeight(this.$refs["settings-container"]) + "px";
         setTimeout(() => this.$refs.focusElement.focus(), 100);
       }
     },
@@ -70,6 +93,16 @@ export default {
       this.$store.dispatch("pci/updatePointCloud", {
         id: this.item.id,
         name: this.editPcName,
+        rotation: {
+          x: parseFloat(this.editRotationX),
+          y: parseFloat(this.editRotationY),
+          z: parseFloat(this.editRotationZ)
+        },
+        transformation: {
+          x: parseFloat(this.editTransformationX),
+          y: parseFloat(this.editTransformationY),
+          z: parseFloat(this.editTransformationZ)
+        }
       });
       this.onClickEdit();
     },
@@ -112,7 +145,12 @@ export default {
 
 .button-delete {
   display: inline-block;
-  margin-left: 10px;
+  margin-left: 5px;
+}
+
+.input-num {
+  display: inline-block;
+  width: 60px;
 }
 
 .button-text {
@@ -136,4 +174,10 @@ export default {
   border-width: 1px;
   border-color: grey;
 }
+
+.data-caption {
+  font-size: 0.5em;
+  margin-bottom: 0px;
+
+}
 </style>