add IRV card
This commit is contained in:
hofee
parent
eafda625ef
commit
84520ef566
@ -17,12 +17,12 @@
|
|||||||
|
|
||||||
<Col span="16" style="padding-left: 10px;">
|
<Col span="16" style="padding-left: 10px;">
|
||||||
|
|
||||||
<ViewDistributionCard
|
<ViewDistributionCard_IRV
|
||||||
:seqFrameData="seq_frame_data"
|
:seqFrameData="seq_frame_data"
|
||||||
:objInfo="obj_info"
|
:objInfo="obj_info"
|
||||||
@show-img="showImage"
|
@show-img="showImage"
|
||||||
/>
|
/>
|
||||||
<RecProcessCard
|
<RecProcessCard_IRV
|
||||||
:seqFrameData="seq_frame_data"
|
:seqFrameData="seq_frame_data"
|
||||||
:modelPts="model_pts"
|
:modelPts="model_pts"
|
||||||
@show-img="showImage"
|
@show-img="showImage"
|
||||||
@ -39,16 +39,16 @@
|
|||||||
<script>
|
<script>
|
||||||
|
|
||||||
import UploadInferenceCard from './cards/UploadInferenceCard.vue';
|
import UploadInferenceCard from './cards/UploadInferenceCard.vue';
|
||||||
import ViewDistributionCard from './cards/ViewDistributionCard.vue';
|
import ViewDistributionCard_IRV from './cards/ViewDistributionCard_IRV.vue';
|
||||||
import RecProcessCard from './cards/RecProcessCard.vue';
|
import RecProcessCard_IRV from './cards/RecProcessCard_IRV.vue';
|
||||||
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "SeqInferenceResultVisualize",
|
name: "SeqInferenceResultVisualize",
|
||||||
components: {
|
components: {
|
||||||
UploadInferenceCard,
|
UploadInferenceCard,
|
||||||
ViewDistributionCard,
|
ViewDistributionCard_IRV,
|
||||||
RecProcessCard,
|
RecProcessCard_IRV,
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
},
|
},
|
||||||
@ -60,7 +60,6 @@ export default {
|
|||||||
obj_info: null,
|
obj_info: null,
|
||||||
seq_frame_data: [],
|
seq_frame_data: [],
|
||||||
model_pts: null,
|
model_pts: null,
|
||||||
|
|
||||||
loading: false,
|
loading: false,
|
||||||
|
|
||||||
selectedImage: null,
|
selectedImage: null,
|
||||||
|
|||||||
@ -40,10 +40,10 @@
|
|||||||
<span style="color: green; font-size: 14px;font-weight: bold;">+{{ curr_frame_info["delta_CR"] }}%</span>
|
<span style="color: green; font-size: 14px;font-weight: bold;">+{{ curr_frame_info["delta_CR"] }}%</span>
|
||||||
</div>
|
</div>
|
||||||
</Card>
|
</Card>
|
||||||
<Divider/>
|
<Divider />
|
||||||
<p style="font-size: 14px; font-weight: bold; color: #464c5b;">
|
<p style="font-size: 14px; font-weight: bold; color: #464c5b;" >
|
||||||
Depth(L)
|
Depth(L)
|
||||||
</p>
|
</p >
|
||||||
<Card :style="{
|
<Card :style="{
|
||||||
marginTop: '5px',
|
marginTop: '5px',
|
||||||
marginBottom: '5px',
|
marginBottom: '5px',
|
||||||
|
|||||||
212
src/components/content/cards/RecProcessCard_IRV.vue
Normal file
212
src/components/content/cards/RecProcessCard_IRV.vue
Normal file
@ -0,0 +1,212 @@
|
|||||||
|
<template>
|
||||||
|
<Card style="width: 100%; margin-bottom: 10px">
|
||||||
|
|
||||||
|
<p slot="title" style="font-size: 18px; font-weight: bold; color: #464c5b;">
|
||||||
|
<Icon type="md-code-working" size="20" style="color: #464c5b;" />
|
||||||
|
Inference Reconstruction Process
|
||||||
|
</p>
|
||||||
|
<Row style="height: 100%;">
|
||||||
|
<Col span="18" style="height: 100%;">
|
||||||
|
<Card
|
||||||
|
style="position: relative; height: 100%; "
|
||||||
|
dis-hover>
|
||||||
|
<div style="width: 100%; height: 100%;">
|
||||||
|
<canvas ref="threeCanvas_pts" style="width: 100%; height: 600px;"></canvas>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
</Col>
|
||||||
|
<Col span="1" style="display: flex; align-items: center; justify-content: center;">
|
||||||
|
<Divider type="vertical" style="height: 100%;" />
|
||||||
|
</Col>
|
||||||
|
<Col span="5">
|
||||||
|
<p style="font-size: 14px; font-weight: bold; color: #464c5b;">
|
||||||
|
Current Frame Information
|
||||||
|
</p>
|
||||||
|
<Card style="margin-top: 5px; margin-bottom: 5px; width: 100%;">
|
||||||
|
<div >
|
||||||
|
Step:
|
||||||
|
<span style="color: green; font-size: 14px;font-weight: bold;">{{ curr_frame_info["step"] }}</span>
|
||||||
|
</div>
|
||||||
|
<div >
|
||||||
|
Coverage Rate(CR):
|
||||||
|
<span style="color: green; font-size: 14px;font-weight: bold;">{{ curr_frame_info["coverage_rate"] }}%</span>
|
||||||
|
</div>
|
||||||
|
<div >
|
||||||
|
Delta CR:
|
||||||
|
<span style="color: green; font-size: 14px;font-weight: bold;">+{{ curr_frame_info["delta_CR"] }}%</span>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
<Divider v-if="hasImg"/>
|
||||||
|
<p style="font-size: 14px; font-weight: bold; color: #464c5b;" v-if="hasImg">
|
||||||
|
Depth(L)
|
||||||
|
</p >
|
||||||
|
<Card :style="{
|
||||||
|
marginTop: '5px',
|
||||||
|
marginBottom: '5px',
|
||||||
|
paddingBottom: rpCurrDepth ? '0' : '62.5%'
|
||||||
|
}" v-if="hasImg">
|
||||||
|
<img :src="`data:image/png;base64,${rpCurrDepth}`" alt="Depth Image" style="width: 100%;" v-if="rpCurrDepth" @click="showImage(`data:image/png;base64,${rpCurrDepth}`)"/>
|
||||||
|
</Card>
|
||||||
|
<Divider v-if="hasImg" />
|
||||||
|
<p style="font-size: 14px; font-weight: bold; color: #464c5b;" v-if="hasImg">
|
||||||
|
Mask(L)
|
||||||
|
</p>
|
||||||
|
<Card :style="{
|
||||||
|
marginTop: '5px',
|
||||||
|
marginBottom: '5px',
|
||||||
|
paddingBottom: rpCurrMask ? '0' : '62.5%'
|
||||||
|
}" v-if="hasImg">
|
||||||
|
<img :src="`data:image/png;base64,${rpCurrMask}`" alt="Depth Image" style="width: 100%;" v-if="rpCurrMask" @click="showImage(`data:image/png;base64,${rpCurrMask}`)"/>
|
||||||
|
</Card>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
<Divider/>
|
||||||
|
<Row>
|
||||||
|
<p style="font-size: 14px; font-weight: bold; color: #464c5b;">
|
||||||
|
Reconstruction Process: [<span style="color: green;">{{ curr_step }}</span>/<span>{{ seqFrameData.length -1 }}</span>]
|
||||||
|
</p>
|
||||||
|
<Slider v-model="curr_step" :step="1" style="width: 100%;" :max="seqFrameData.length-1 >=0 ? seqFrameData.length-1:0"></Slider>
|
||||||
|
</Row>
|
||||||
|
</Card>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import * as THREE from 'three';
|
||||||
|
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
seqFrameData: Array,
|
||||||
|
modelPts: Array,
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
rpCurrDepth: null,
|
||||||
|
rpCurrMask: null,
|
||||||
|
|
||||||
|
pts_scene: null,
|
||||||
|
pts_camera: null,
|
||||||
|
pts_renderer: null,
|
||||||
|
pts_controls: null,
|
||||||
|
|
||||||
|
curr_step: 0,
|
||||||
|
|
||||||
|
model_pts: null,
|
||||||
|
|
||||||
|
combined_point_cloud: [],
|
||||||
|
new_point_cloud: [],
|
||||||
|
|
||||||
|
best_seq: null,
|
||||||
|
|
||||||
|
curr_frame_info: {
|
||||||
|
"step": 0,
|
||||||
|
"frame_id":0,
|
||||||
|
"coverage_rate": 0,
|
||||||
|
"delta_CR": 0,
|
||||||
|
"combined_points": [],
|
||||||
|
"new_points": [],
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
};
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
seqFrameData(val) {
|
||||||
|
if (val.length > 0) {
|
||||||
|
this.rpCurrDepth = val[0].data.depth;
|
||||||
|
this.rpCurrMask = val[0].data.mask;
|
||||||
|
this.curr_step = 0;
|
||||||
|
this.curr_frame_info["step"] = 0;
|
||||||
|
this.curr_frame_info["frame_id"] = val[0]["frame_id"];
|
||||||
|
this.curr_frame_info["coverage_rate"] = val[0]["data"]["coverage_rate"];
|
||||||
|
this.curr_frame_info["delta_CR"] = val[0]["data"]["delta_CR"];
|
||||||
|
this.curr_frame_info["combined_point_cloud"] = val[0]["data"]["combined_point_cloud"];
|
||||||
|
this.curr_frame_info["new_point_cloud"] = val[0]["data"]["new_point_cloud"];
|
||||||
|
this.updatePointCloud();
|
||||||
|
this.view_cam_pose_list = [];
|
||||||
|
for (let i = 0; i < val.length; i++) {
|
||||||
|
this.view_cam_pose_list.push(val[i].data.cam_to_world);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
},
|
||||||
|
curr_step (val) {
|
||||||
|
this.rpCurrDepth = this.seqFrameData[val]["data"]["depth"];
|
||||||
|
this.rpCurrMask = this.seqFrameData[val]["data"]["mask"];
|
||||||
|
this.curr_frame_info["step"] = val;
|
||||||
|
this.curr_frame_info["frame_id"] = this.seqFrameData[val]["frame_id"];
|
||||||
|
this.curr_frame_info["coverage_rate"] = this.seqFrameData[val]["data"]["coverage_rate"];
|
||||||
|
this.curr_frame_info["delta_CR"] = this.seqFrameData[val]["data"]["delta_CR"];
|
||||||
|
this.curr_frame_info["combined_point_cloud"] = this.seqFrameData[val]["data"]["combined_point_cloud"];
|
||||||
|
this.curr_frame_info["new_point_cloud"] = this.seqFrameData[val]["data"]["new_point_cloud"];
|
||||||
|
this.updatePointCloud();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.initThreeJS_pts();
|
||||||
|
this.animate_pts();
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
initThreeJS_pts() {
|
||||||
|
const width = this.$refs.threeCanvas_pts.clientWidth;
|
||||||
|
const height = this.$refs.threeCanvas_pts.clientHeight;
|
||||||
|
|
||||||
|
this.pts_scene = new THREE.Scene();
|
||||||
|
|
||||||
|
this.pts_camera = new THREE.PerspectiveCamera(75, width / height, 0.001, 1000);
|
||||||
|
this.pts_camera.position.z = 2;
|
||||||
|
|
||||||
|
this.pts_renderer = new THREE.WebGLRenderer({ canvas: this.$refs.threeCanvas_pts });
|
||||||
|
this.pts_renderer.setSize(width, height);
|
||||||
|
|
||||||
|
this.pts_controls = new OrbitControls(this.pts_camera, this.pts_renderer.domElement);
|
||||||
|
|
||||||
|
|
||||||
|
this.pts_scene.rotation.x = -Math.PI / 2;
|
||||||
|
const axesHelper = new THREE.AxesHelper(5);
|
||||||
|
this.pts_scene.add(axesHelper);
|
||||||
|
},
|
||||||
|
|
||||||
|
animate_pts() {
|
||||||
|
requestAnimationFrame(() => this.animate_pts());
|
||||||
|
this.pts_renderer.render(this.pts_scene, this.pts_camera);
|
||||||
|
},
|
||||||
|
|
||||||
|
updatePointCloud() {
|
||||||
|
|
||||||
|
if (this.combinedPointCloudMesh) {
|
||||||
|
this.pts_scene.remove(this.combinedPointCloudMesh);
|
||||||
|
}
|
||||||
|
if (this.newPointCloudMesh) {
|
||||||
|
this.pts_scene.remove(this.newPointCloudMesh);
|
||||||
|
}
|
||||||
|
this.combinedPointCloudMesh = this.createPointCloud(this.curr_frame_info["combined_point_cloud"], 0x0000ff);
|
||||||
|
this.newPointCloudMesh = this.createPointCloud(this.curr_frame_info["new_point_cloud"], 0xff0000);
|
||||||
|
|
||||||
|
this.pts_scene.add(this.combinedPointCloudMesh);
|
||||||
|
this.pts_scene.add(this.newPointCloudMesh);
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
createPointCloud(pointCloudData, color) {
|
||||||
|
const geometry = new THREE.BufferGeometry();
|
||||||
|
const vertices = new Float32Array(pointCloudData.flat());
|
||||||
|
|
||||||
|
geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3));
|
||||||
|
|
||||||
|
const material = new THREE.PointsMaterial({
|
||||||
|
size: 0.005,
|
||||||
|
color: color,
|
||||||
|
});
|
||||||
|
|
||||||
|
return new THREE.Points(geometry, material);
|
||||||
|
},
|
||||||
|
showImage(url){
|
||||||
|
this.$emit('show-img', url);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
</script>
|
||||||
@ -11,32 +11,37 @@
|
|||||||
|
|
||||||
<Row style="margin-bottom: 10px; margin-left: 10px; margin-right: 10px;">
|
<Row style="margin-bottom: 10px; margin-left: 10px; margin-right: 10px;">
|
||||||
<Col span="10">
|
<Col span="10">
|
||||||
<p style="font-size: 16px; color: #464c5b; font-weight: bold;">Input Root Directory:</p>
|
<p style="font-size: 16px; color: #464c5b; font-weight: bold;">Input Root Directory:</p>
|
||||||
</Col>
|
</Col>
|
||||||
<Col span="12">
|
<Col span="12">
|
||||||
<Input v-model="localDatasetName" style="width: 100%;" disabled />
|
<Input v-model="localDatasetName" style="width: 100%;" disabled />
|
||||||
</Col>
|
</Col>
|
||||||
</Row>
|
</Row>
|
||||||
|
|
||||||
<Row style="margin-bottom: 10px; margin-left: 10px; margin-right: 10px;">
|
<Row style="margin-bottom: 10px; margin-left: 10px; margin-right: 10px;">
|
||||||
<Col span="10">
|
<Col span="10">
|
||||||
<p style="font-size: 16px; color: #464c5b; font-weight: bold;">Select Inference Result:</p>
|
<p style="font-size: 16px; color: #464c5b; font-weight: bold;">Select Inference Result:</p>
|
||||||
</Col>
|
</Col>
|
||||||
<Col span="12">
|
<Col span="12">
|
||||||
<Select v-model="localSceneName" style="width: 100%;" @on-change="handleSceneChange" placeholder="please select..." :disabled="localDisableBtn">
|
<Select v-model="localSceneName" style="width: 100%;" @on-change="handleSceneChange"
|
||||||
<Option v-for="item in sceneNameList" :value="item" :key="item">{{ item }}</Option>
|
placeholder="please select..." :disabled="localDisableBtn" disabled>
|
||||||
</Select>
|
<Option v-for="item in sceneNameList" :value="item" :key="item">{{ item }}</Option>
|
||||||
|
</Select>
|
||||||
</Col>
|
</Col>
|
||||||
</Row>
|
</Row>
|
||||||
|
|
||||||
<Upload
|
<Upload multiple type="drag" action="" accept=".pkl" :before-upload="beforeUploadInferenceResultFile"
|
||||||
multiple
|
style="width: 100%; position: relative;">
|
||||||
type="drag"
|
<div style="padding: 20px 0">
|
||||||
action="//jsonplaceholder.typicode.com/posts/">
|
<Icon type="ios-cloud-upload" size="52" style="color: #3399ff" v-if="!loading">
|
||||||
<div style="padding: 20px 0">
|
</Icon>
|
||||||
<Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
|
<p v-if="!loading">Select or drag the inference result file(.pkl) here to upload
|
||||||
<p>Click or drag inference result here to upload</p>
|
</p>
|
||||||
|
<div class="demo-spin-container" v-if="loading">
|
||||||
|
<Spin fix size="large"></Spin>
|
||||||
</div>
|
</div>
|
||||||
|
<p v-if="loading">Waiting for server response...</p>
|
||||||
|
</div>
|
||||||
</Upload>
|
</Upload>
|
||||||
|
|
||||||
<Divider v-if="localSceneName" />
|
<Divider v-if="localSceneName" />
|
||||||
@ -47,25 +52,35 @@
|
|||||||
</p>
|
</p>
|
||||||
<Row style="width: 100%;">
|
<Row style="width: 100%;">
|
||||||
<Col style="margin-bottom: 10px; margin-left: 10px; margin-right: 10px; width: 100%;">
|
<Col style="margin-bottom: 10px; margin-left: 10px; margin-right: 10px; width: 100%;">
|
||||||
<p><Badge status="success" /><span style="font-weight: bold;">sequence length</span>: {{ localSeqLen }}</p>
|
<p>
|
||||||
<p><Badge status="success" /><span style="font-weight: bold;">max coverage rate</span>: {{ localMaxCoverageRate }}%</p>
|
<Badge status="success" /><span style="font-weight: bold;">sequence length</span>: {{ localSeqLen }}
|
||||||
<p><Badge status="success" /><span style="font-weight: bold;">best sequence length</span>: {{ localBestSeqLen }}</p>
|
</p>
|
||||||
<p><Badge status="success" /><span style="font-weight: bold;">best sequence</span>:</p>
|
<p>
|
||||||
|
<Badge status="success" /><span style="font-weight: bold;">max coverage rate</span>: {{ localMaxCoverageRate
|
||||||
|
}}%
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<Badge status="success" /><span style="font-weight: bold;">best sequence length</span>: {{ localBestSeqLen }}
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<Badge status="success" /><span style="font-weight: bold;">best sequence</span>:
|
||||||
|
</p>
|
||||||
|
|
||||||
<Card style="margin:10px;max-height: 200px; overflow-y: auto;">
|
<Card style="margin:10px;max-height: 200px; overflow-y: auto;">
|
||||||
<Row v-for="(item, index) in localBestSeq" :key="item['frame']" style="margin-left: 20px;">
|
<Row v-for="(item, index) in localBestSeq" :key="item['frame']" style="margin-left: 20px;">
|
||||||
<p style="width: 10%;">[<span style="color: red;">{{ index }}</span>]</p>
|
<p style="width: 10%;">[<span style="color: red;">{{ index }}</span>]</p>
|
||||||
<p style="width: 30%;">frame id: <span style="color: green;">{{ item['frame'] }}</span></p>
|
<p style="width: 30%;">frame id: <span style="color: green;">{{ item['frame'] }}</span></p>
|
||||||
<p style="width: 40%;">coverage rate: <span style="color: blue;">{{ item['coverage_rate'] }}%</span></p>
|
<p style="width: 40%;">coverage rate: <span style="color: blue;">{{ item['coverage_rate'] }}%</span></p>
|
||||||
</Row>
|
</Row>
|
||||||
</Card>
|
</Card>
|
||||||
</Col>
|
</Col>
|
||||||
</Row>
|
</Row>
|
||||||
</Card>
|
</Card>
|
||||||
|
|
||||||
<Divider />
|
<Divider />
|
||||||
<Row type="flex" justify="center">
|
<Row type="flex" justify="center">
|
||||||
<Button type="success" style="width:60%" :disabled="!localSceneName || localDisableBtn" @click="handleLoadSeq" :loading="localDisableBtn">
|
<Button type="success" style="width:60%" :disabled="!localSceneName || localDisableBtn" @click="handleLoadSeq"
|
||||||
|
:loading="localDisableBtn">
|
||||||
Load Sequence
|
Load Sequence
|
||||||
</Button>
|
</Button>
|
||||||
</Row>
|
</Row>
|
||||||
@ -86,6 +101,8 @@ export default {
|
|||||||
localBestSeq: null,
|
localBestSeq: null,
|
||||||
localDisableBtn: false,
|
localDisableBtn: false,
|
||||||
sceneNameList: null,
|
sceneNameList: null,
|
||||||
|
loading: false,
|
||||||
|
|
||||||
seqFrameData: []
|
seqFrameData: []
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
@ -96,48 +113,82 @@ export default {
|
|||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
getSceneList() {
|
getSceneList() {
|
||||||
const params = {dataset_name: this.localDatasetName};
|
const params = { dataset_name: this.localDatasetName };
|
||||||
this.$ajax.postjson('/get_scene_list', params)
|
this.$ajax.postjson('/get_scene_list', params)
|
||||||
.then((data) => {
|
.then((data) => {
|
||||||
if (data.success == true) {
|
if (data.success == true) {
|
||||||
this.sceneNameList = data.scene_list;
|
this.sceneNameList = data.scene_list;
|
||||||
} else {
|
} else {
|
||||||
this.$Message.error("error");
|
this.$Message.error("error");
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
handleSceneChange(val) {
|
handleSceneChange(val) {
|
||||||
this.localSceneName = val;
|
this.localSceneName = val;
|
||||||
const params = {dataset_name: this.localDatasetName, scene_name: val};
|
const params = { dataset_name: this.localDatasetName, scene_name: val };
|
||||||
this.$ajax.postjson('/get_scene_info', params)
|
this.$ajax.postjson('/get_scene_info', params)
|
||||||
.then((data) => {
|
.then((data) => {
|
||||||
if (data.success == true) {
|
if (data.success == true) {
|
||||||
this.localSeqLen = data.sequence_length;
|
this.localSeqLen = data.sequence_length;
|
||||||
this.localMaxCoverageRate = data.max_coverage_rate;
|
this.localMaxCoverageRate = data.max_coverage_rate;
|
||||||
this.localBestSeqLen = data.best_sequence_length;
|
this.localBestSeqLen = data.best_sequence_length;
|
||||||
this.localBestSeq = data.best_sequence;
|
this.localBestSeq = data.best_sequence;
|
||||||
} else {
|
} else {
|
||||||
this.$Message.error("error");
|
this.$Message.error("error");
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
handleLoadSeq() {
|
handleLoadSeq() {
|
||||||
const params = {dataset_name: this.localDatasetName, scene_name: this.localSceneName, sequence: this.localBestSeq};
|
const params = { dataset_name: this.localDatasetName, scene_name: this.localSceneName, sequence: this.localBestSeq };
|
||||||
this.localDisableBtn = true;
|
this.localDisableBtn = true;
|
||||||
this.$emit('set-loading', true);
|
this.$emit('set-loading', true);
|
||||||
this.$ajax.postjson('/get_frame_data', params)
|
this.$ajax.postjson('/get_frame_data', params)
|
||||||
.then((data) => {
|
.then((data) => {
|
||||||
if (data.success == true) {
|
if (data.success == true) {
|
||||||
this.seqFrameData = data.seq_frame_data;
|
this.seqFrameData = data.seq_frame_data;
|
||||||
} else {
|
} else {
|
||||||
this.$Message.error("error");
|
this.$Message.error("error");
|
||||||
}
|
}
|
||||||
this.localDisableBtn = false;
|
this.localDisableBtn = false;
|
||||||
this.$emit('update-seq', data);
|
this.$emit('update-seq', data);
|
||||||
this.$emit('set-loading', false);
|
this.$emit('set-loading', false);
|
||||||
});
|
});
|
||||||
|
|
||||||
},
|
},
|
||||||
|
beforeUploadInferenceResultFile(file) {
|
||||||
|
this.loading = true;
|
||||||
|
const isPkl = file.name.endsWith('.pkl');
|
||||||
|
if (!isPkl) {
|
||||||
|
this.$Notice.warning({
|
||||||
|
title: 'File format error',
|
||||||
|
desc: 'You can only upload a .pkl file'
|
||||||
|
});
|
||||||
|
this.loading = false;
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
const formData = new FormData();
|
||||||
|
formData.append('file', file);
|
||||||
|
this.$ajax.postfile('/analysis_inference_result', formData)
|
||||||
|
.then((data) => {
|
||||||
|
if (data.success == true) {
|
||||||
|
|
||||||
|
this.$Notice.success({
|
||||||
|
title: 'Successfully parsed the file',
|
||||||
|
desc: 'inference results are found in the uploaded file.'
|
||||||
|
});
|
||||||
|
this.loading = false;
|
||||||
|
} else {
|
||||||
|
console.log(data.success, data.message)
|
||||||
|
this.$Notice.error({
|
||||||
|
title: 'Failed to parse the file',
|
||||||
|
desc: 'Error message: ' + data.message
|
||||||
|
});
|
||||||
|
this.loading = false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
return false;
|
||||||
|
},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
349
src/components/content/cards/ViewDistributionCard_IRV.vue
Normal file
349
src/components/content/cards/ViewDistributionCard_IRV.vue
Normal file
@ -0,0 +1,349 @@
|
|||||||
|
<template>
|
||||||
|
<Card style="width: 100%; margin-bottom: 10px">
|
||||||
|
|
||||||
|
<p slot="title" style="font-size: 18px; font-weight: bold; color: #464c5b;">
|
||||||
|
<Icon type="ios-image" size="20" style="color: #464c5b;"/>
|
||||||
|
View Distribution
|
||||||
|
</p>
|
||||||
|
<Row>
|
||||||
|
<Col span="18">
|
||||||
|
<Card
|
||||||
|
style="position: relative; padding-bottom: 62.5%; min-height: 100px; height: 0; overflow: hidden;"
|
||||||
|
dis-hover>
|
||||||
|
<canvas ref="threeCanvas_view" style="width: 100%; height:100%"></canvas>
|
||||||
|
</Card>
|
||||||
|
</Col>
|
||||||
|
<Col span="1" style="display: flex; align-items: center; justify-content: center;">
|
||||||
|
<Divider type="vertical" style="height: 100%;" />
|
||||||
|
</Col>
|
||||||
|
<Col span="5">
|
||||||
|
<p style="font-size: 14px; font-weight: bold; color: #464c5b;">
|
||||||
|
Current Frame ID:
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div style="text-align: center;">
|
||||||
|
<span style="color: red; font-size: 16px;font-weight: bold;">{{ chosen_frame_id == null?"no camera is selected": chosen_frame_id }}</span>
|
||||||
|
</div>
|
||||||
|
<Divider/>
|
||||||
|
<p style="font-size: 14px; font-weight: bold; color: #464c5b;" v-if="hasImg">
|
||||||
|
Depth(L)
|
||||||
|
</p>
|
||||||
|
<Card :style="{
|
||||||
|
marginTop: '5px',
|
||||||
|
marginBottom: '5px',
|
||||||
|
minHeight: '30%'
|
||||||
|
}" v-if="hasImg">
|
||||||
|
<img :src="`data:image/png;base64,${vdCurrDepth}`" alt="Depth Image" style="width: 100%;" v-if="vdCurrDepth" @click="showImage(`data:image/png;base64,${vdCurrDepth}`)"/>
|
||||||
|
</Card>
|
||||||
|
<Divider v-if="hasImg"/>
|
||||||
|
<p style="font-size: 14px; font-weight: bold; color: #464c5b;" v-if="hasImg">
|
||||||
|
Mask(L)
|
||||||
|
</p>
|
||||||
|
<Card :style="{
|
||||||
|
marginTop: '5px',
|
||||||
|
marginBottom: '5px',
|
||||||
|
minHeight: '30%'
|
||||||
|
}" v-if="hasImg">
|
||||||
|
<img :src="`data:image/png;base64,${vdCurrMask}`" alt="Mask Image" style="width: 100%;" v-if="vdCurrMask" @click="showImage(`data:image/png;base64,${vdCurrMask}`)"/>
|
||||||
|
</Card>
|
||||||
|
</Col>
|
||||||
|
|
||||||
|
</Row>
|
||||||
|
<Divider/>
|
||||||
|
<Row>
|
||||||
|
<p style="font-size: 14px; font-weight: bold; color: #464c5b;">
|
||||||
|
NBV Sequence: [<span style="color: green;">{{ selected_idx }}</span>/<span>{{ seqFrameData.length -1 }}</span>]
|
||||||
|
</p>
|
||||||
|
<Slider v-model="selected_idx" :step="1" style="width: 100%;" :max="seqFrameData.length-1 >=0 ? seqFrameData.length-1:0"></Slider>
|
||||||
|
</Row>
|
||||||
|
</Card>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
|
||||||
|
<script>
|
||||||
|
|
||||||
|
import * as THREE from 'three';
|
||||||
|
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
|
||||||
|
import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader.js';
|
||||||
|
import { MTLLoader } from 'three/examples/jsm/loaders/MTLLoader.js';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
seqFrameData: Array,
|
||||||
|
objInfo: Object
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
vdCurrDepth: null,
|
||||||
|
vdCurrMask: null,
|
||||||
|
chosen_frame_id: null,
|
||||||
|
selected_idx: 0,
|
||||||
|
|
||||||
|
scene: null,
|
||||||
|
camera: null,
|
||||||
|
renderer: null,
|
||||||
|
controls: null,
|
||||||
|
raycaster: new THREE.Raycaster(),
|
||||||
|
mouse: new THREE.Vector2(),
|
||||||
|
selectedFrustum: null,
|
||||||
|
hoveredFrustum: null,
|
||||||
|
target: new THREE.Vector3(0, 0, 0.85),
|
||||||
|
view_cam_pose_list: [],
|
||||||
|
view_cam_pose_matrix_list: [],
|
||||||
|
frustums: [],
|
||||||
|
loadedObject: null,
|
||||||
|
|
||||||
|
|
||||||
|
};
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
seqFrameData(val) {
|
||||||
|
if (val.length > 0) {
|
||||||
|
this.vdCurrDepth = val[0].data.depth;
|
||||||
|
this.vdCurrMask = val[0].data.mask;
|
||||||
|
for (let i = 0; i < this.frustums.length; i++) {
|
||||||
|
this.scene.remove(this.frustums[i]);
|
||||||
|
}
|
||||||
|
this.view_cam_pose_list = [];
|
||||||
|
this.view_cam_pose_matrix_list = [];
|
||||||
|
this.frustums = [];
|
||||||
|
this.selectedFrustum = null;
|
||||||
|
this.selected_idx = 0;
|
||||||
|
for (let i = 0; i < val.length; i++) {
|
||||||
|
this.view_cam_pose_list.push(val[i].data.cam_to_world);
|
||||||
|
}
|
||||||
|
this.getCameras();
|
||||||
|
this.selectCamera(this.selected_idx);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
objInfo(val) {
|
||||||
|
if (val) {
|
||||||
|
const objURL = val.obj_path;
|
||||||
|
const mtlURL = val.mtl_path;
|
||||||
|
|
||||||
|
this.loadMesh(objURL, mtlURL);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
selected_idx(val) {
|
||||||
|
if (val != null) {
|
||||||
|
this.selectCamera(val);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.initThreeJS_view();
|
||||||
|
|
||||||
|
this.animate();
|
||||||
|
window.addEventListener('mousemove', this.onMouseMove, false);
|
||||||
|
window.addEventListener('click', this.onMouseClick, false);
|
||||||
|
},
|
||||||
|
beforeDestroy() {
|
||||||
|
window.removeEventListener('mousemove', this.onMouseMove);
|
||||||
|
window.removeEventListener('click', this.onMouseClick);
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
initThreeJS_view() {
|
||||||
|
|
||||||
|
this.scene = new THREE.Scene();
|
||||||
|
|
||||||
|
const width = this.$refs.threeCanvas_view.clientWidth;
|
||||||
|
const height = this.$refs.threeCanvas_view.clientHeight;
|
||||||
|
|
||||||
|
this.camera = new THREE.PerspectiveCamera(75, width / height, 0.09, 1000);
|
||||||
|
|
||||||
|
this.renderer = new THREE.WebGLRenderer({ canvas: this.$refs.threeCanvas_view });
|
||||||
|
this.renderer.setSize(width, height);
|
||||||
|
this.scene.rotation.x = -Math.PI / 2;
|
||||||
|
this.controls = new OrbitControls(this.camera, this.renderer.domElement);
|
||||||
|
const axesHelper = new THREE.AxesHelper(5);
|
||||||
|
this.scene.add(axesHelper);
|
||||||
|
const light = new THREE.AmbientLight(0xffffff, 1);
|
||||||
|
this.scene.add(light);
|
||||||
|
const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
|
||||||
|
directionalLight.position.set(5, 5, 5).normalize();
|
||||||
|
this.scene.add(directionalLight);
|
||||||
|
this.camera.position.set(0.5, 1.5, 0);
|
||||||
|
this.camera.lookAt(this.target);
|
||||||
|
|
||||||
|
},
|
||||||
|
selectCamera(index) {
|
||||||
|
if (index >= 0 && index < this.frustums.length) {
|
||||||
|
const frustum = this.frustums[index];
|
||||||
|
if (this.selectedFrustum) {
|
||||||
|
this.selectedFrustum.material.color.set(0xff0000); // 恢复之前选中四棱锥的颜色
|
||||||
|
}
|
||||||
|
frustum.material.color.set(0x00ff00); // 选中的四棱锥颜色
|
||||||
|
this.selectedFrustum = frustum;
|
||||||
|
|
||||||
|
// 更新 chosen_frame_id 和其他相关信息
|
||||||
|
this.chosen_frame_id = this.seqFrameData[index].frame_id;
|
||||||
|
this.vdCurrDepth = this.seqFrameData[index].data.depth;
|
||||||
|
this.vdCurrMask = this.seqFrameData[index].data.mask;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
clearLoadedObject() {
|
||||||
|
if (this.loadedObject) {
|
||||||
|
this.scene.remove(this.loadedObject);
|
||||||
|
this.loadedObject.traverse(child => {
|
||||||
|
if (child.material) child.material.dispose();
|
||||||
|
if (child.geometry) child.geometry.dispose();
|
||||||
|
});
|
||||||
|
this.loadedObject = null;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
loadMesh(objURL, mtlURL) {
|
||||||
|
this.clearLoadedObject();
|
||||||
|
const objLoader = new OBJLoader();
|
||||||
|
const mtlLoader = new MTLLoader();
|
||||||
|
|
||||||
|
mtlLoader.load(mtlURL, materials => {
|
||||||
|
materials.preload();
|
||||||
|
objLoader.setMaterials(materials);
|
||||||
|
objLoader.load(objURL, object => {
|
||||||
|
this.loadedObject = object;
|
||||||
|
this.scene.add(object);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
getCameras() {
|
||||||
|
for (let i = 0; i < this.view_cam_pose_list.length; i++) {
|
||||||
|
const view_cam_pose = this.view_cam_pose_list[i];
|
||||||
|
const camera = new THREE.PerspectiveCamera(45, 1280 / 800, 0.1, 1000);
|
||||||
|
|
||||||
|
const camMatrix = new THREE.Matrix4().fromArray([
|
||||||
|
view_cam_pose[0][0], view_cam_pose[1][0], view_cam_pose[2][0], view_cam_pose[3][0],
|
||||||
|
view_cam_pose[0][1], view_cam_pose[1][1], view_cam_pose[2][1], view_cam_pose[3][1],
|
||||||
|
view_cam_pose[0][2], view_cam_pose[1][2], view_cam_pose[2][2], view_cam_pose[3][2],
|
||||||
|
view_cam_pose[0][3], view_cam_pose[1][3], view_cam_pose[2][3], view_cam_pose[3][3]
|
||||||
|
]);
|
||||||
|
camera.matrixWorld.copy(camMatrix);
|
||||||
|
//camera.matrixWorldInverse.copy(camMatrix).invert();
|
||||||
|
camera.position.setFromMatrixPosition(camMatrix);
|
||||||
|
camera.rotation.setFromRotationMatrix(camMatrix);
|
||||||
|
|
||||||
|
this.view_cam_pose_matrix_list.push(camera.matrixWorld);
|
||||||
|
camera.updateProjectionMatrix();
|
||||||
|
const frustum = this.createFrustum(camera);
|
||||||
|
this.frustums.push(frustum);
|
||||||
|
}
|
||||||
|
|
||||||
|
},
|
||||||
|
createFrustum(camera) {
|
||||||
|
const frustumGeometry = new THREE.BufferGeometry();
|
||||||
|
const near = camera.near;
|
||||||
|
const far = camera.far;
|
||||||
|
const aspect = camera.aspect;
|
||||||
|
const fov = camera.fov * (Math.PI / 180); // 角度转弧度
|
||||||
|
|
||||||
|
// 计算近平面的高度和宽度
|
||||||
|
const hNear = 2 * Math.tan(fov / 2) * near;
|
||||||
|
const wNear = hNear * aspect;
|
||||||
|
|
||||||
|
// 获取相机的世界矩阵和相机方向
|
||||||
|
const worldMatrix = new THREE.Matrix4().makeRotationFromEuler(camera.rotation);
|
||||||
|
const camPos = new THREE.Vector3().copy(camera.position);
|
||||||
|
const camDir = new THREE.Vector3(0, 0, 1).applyMatrix4(worldMatrix).normalize();
|
||||||
|
const camUp = new THREE.Vector3(0, -1, 0).applyMatrix4(worldMatrix).normalize();
|
||||||
|
const camRight = new THREE.Vector3(1, 0, 0).applyMatrix4(worldMatrix).normalize();
|
||||||
|
|
||||||
|
// 计算近平面中心
|
||||||
|
const nearCenter = camPos.clone().add(camDir.clone().multiplyScalar(near));
|
||||||
|
|
||||||
|
// 计算近平面四个角的顶点
|
||||||
|
const nearTopLeft = nearCenter.clone().add(camUp.clone().multiplyScalar(hNear / 2)).sub(camRight.clone().multiplyScalar(wNear / 2));
|
||||||
|
const nearTopRight = nearCenter.clone().add(camUp.clone().multiplyScalar(hNear / 2)).add(camRight.clone().multiplyScalar(wNear / 2));
|
||||||
|
const nearBottomLeft = nearCenter.clone().sub(camUp.clone().multiplyScalar(hNear / 2)).sub(camRight.clone().multiplyScalar(wNear / 2));
|
||||||
|
const nearBottomRight = nearCenter.clone().sub(camUp.clone().multiplyScalar(hNear / 2)).add(camRight.clone().multiplyScalar(wNear / 2));
|
||||||
|
|
||||||
|
const vertices = new Float32Array([
|
||||||
|
// 近平面四个角
|
||||||
|
...nearTopLeft.toArray(),
|
||||||
|
...nearTopRight.toArray(),
|
||||||
|
...nearBottomRight.toArray(),
|
||||||
|
...nearBottomLeft.toArray(),
|
||||||
|
// 相机位置（四个重复的点）
|
||||||
|
...camPos.toArray(),
|
||||||
|
...camPos.toArray(),
|
||||||
|
...camPos.toArray(),
|
||||||
|
...camPos.toArray()
|
||||||
|
]);
|
||||||
|
|
||||||
|
const index = [
|
||||||
|
// 近平面
|
||||||
|
0, 1, 2, 0, 2, 3,
|
||||||
|
// 侧面
|
||||||
|
0, 1, 4,
|
||||||
|
1, 2, 4,
|
||||||
|
2, 3, 4,
|
||||||
|
3, 0, 4
|
||||||
|
];
|
||||||
|
|
||||||
|
frustumGeometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3));
|
||||||
|
frustumGeometry.setIndex(index);
|
||||||
|
|
||||||
|
const frustumMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000, wireframe: true });
|
||||||
|
const frustum = new THREE.Mesh(frustumGeometry, frustumMaterial);
|
||||||
|
this.scene.add(frustum);
|
||||||
|
|
||||||
|
return frustum;
|
||||||
|
},
|
||||||
|
onMouseMove(event) {
|
||||||
|
const rect = this.$refs.threeCanvas_view.getBoundingClientRect();
|
||||||
|
this.mouse.x = ((event.clientX - rect.left) / rect.width) * 2 - 1;
|
||||||
|
this.mouse.y = -((event.clientY - rect.top) / rect.height) * 2 + 1;
|
||||||
|
|
||||||
|
this.raycaster.setFromCamera(this.mouse, this.camera);
|
||||||
|
const intersects = this.raycaster.intersectObjects(this.frustums);
|
||||||
|
|
||||||
|
if (intersects.length > 0) {
|
||||||
|
const frustum = intersects[0].object;
|
||||||
|
|
||||||
|
|
||||||
|
if (this.hoveredFrustum !== frustum) {
|
||||||
|
if (this.hoveredFrustum) {
|
||||||
|
|
||||||
|
if (this.hoveredFrustum !== this.selectedFrustum) {
|
||||||
|
this.hoveredFrustum.material.color.set(0xff0000);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (frustum !== this.selectedFrustum) {
|
||||||
|
frustum.material.color.set(0xffff00);
|
||||||
|
}
|
||||||
|
this.hoveredFrustum = frustum;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
|
||||||
|
if (this.hoveredFrustum && this.hoveredFrustum !== this.selectedFrustum) {
|
||||||
|
this.hoveredFrustum.material.color.set(0xff0000);
|
||||||
|
this.hoveredFrustum = null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onMouseClick() {
|
||||||
|
|
||||||
|
this.raycaster.setFromCamera(this.mouse, this.camera);
|
||||||
|
const intersects = this.raycaster.intersectObjects(this.frustums);
|
||||||
|
|
||||||
|
if (intersects.length > 0) {
|
||||||
|
const frustum = intersects[0].object;
|
||||||
|
const index = this.frustums.indexOf(frustum);
|
||||||
|
if (index !== -1) {
|
||||||
|
this.selected_idx = index;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
animate() {
|
||||||
|
requestAnimationFrame(this.animate);
|
||||||
|
this.controls.update();
|
||||||
|
this.renderer.render(this.scene, this.camera);
|
||||||
|
},
|
||||||
|
|
||||||
|
showImage(url){
|
||||||
|
this.$emit('show-img', url);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
@ -51,6 +51,7 @@ import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
|
|||||||
export default {
|
export default {
|
||||||
props: {
|
props: {
|
||||||
seqFrameData: Array,
|
seqFrameData: Array,
|
||||||
|
hasImg: Boolean,
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
Loading…
x
Reference in New Issue
Block a user