Merge pull request #23 from LinkunGao/main

Function/UI optimise
ABI-CTT-Group · Oct 7, 2024 · ec8bf95 · ec8bf95
2 parents 1a48f87 + bfa9a94
commit ec8bf95
Show file tree

Hide file tree

Showing 22 changed files with 126 additions and 54 deletions.
diff --git a/frontend/assets/data/topics.json b/frontend/assets/data/topics.json
@@ -21,7 +21,7 @@
     "icon": "mdi-heart-broken",
     "subTopics": {
       "1": {
-        "title": "A",
+        "title": "1",
         "heading": "Almost entirely fat",
         "icon": "mdi-home-heart",
         "dataFile": "breast-main",
@@ -30,7 +30,7 @@
         "model": { "name": "normal" }
       },
       "2": {
-        "title": "B",
+        "title": "2",
         "heading": "Scattered fibroglandular densities",
         "icon": "mdi-home-heart",
         "dataFile": "breast-main",
@@ -39,7 +39,7 @@
         "model": { "name": "density_2" }
       },
       "3": {
-        "title": "C",
+        "title": "3",
         "heading": "Heterogeneously dense",
         "icon": "mdi-home-heart",
         "dataFile": "breast-main",
@@ -48,7 +48,7 @@
         "model": { "name": "density_3" }
       },
       "4": {
-        "title": "D",
+        "title": "4",
         "heading": "Extremely dense",
         "icon": "mdi-home-heart",
         "dataFile": "breast-main",
@@ -134,5 +134,10 @@
         "model": { "name": "ductal" }
       }
     }
+  },
+  "action": {
+    "title": "Action",
+    "heading": "Call to Action",
+    "subTopics": {}
   }
 }
diff --git a/frontend/assets/sass/components/left-panel.scss b/frontend/assets/sass/components/left-panel.scss
@@ -18,6 +18,7 @@
 
 .bg-pink-success {
   background: rgb(233, 125, 144);
+  // background-color: #f43f5e;
 }
 
 .left-pane {

diff --git a/frontend/components/model/LeftModel.vue b/frontend/components/model/LeftModel.vue
@@ -112,6 +112,7 @@ export default {
       if (this.scene === undefined) {
         this.scene = this.baseRenderer.createScene(model_name);
         this.scene.addLights();
+        this.scene.controls.rotateSpeed = 5.0;
         this.scene.controls.panSpeed = 0.2;
         this.baseRenderer.setCurrentScene(this.scene);
 
@@ -129,9 +130,11 @@ export default {
           });
         });
         this.scene.loadViewUrl(viewURL);
-        this.scene.updateBackground("#fab9c5", "#fab9c5");
+         
+        this.scene.updateBackground("#fda4af", "#fda4af");
         this.Copper.setHDRFilePath("environment/venice_sunset_1k.hdr");
         this.baseRenderer.updateEnvironment();
+       
         this.modelToScenes[model_name] = this.scene;
       }else{
         this.baseRenderer.setCurrentScene(this.scene);

diff --git a/frontend/components/model/Model.vue b/frontend/components/model/Model.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="model">
+  <div class="model ">
       <v-tabs class="fixed flex justify-center tab-main" @change="tabsOnChange">
-        <v-tab class="tab-main">3D Mammogram</v-tab>
-        <v-tab class="tab-main">2D Mammogram</v-tab>
+        <v-tab class="tab-sub w-40">{{ tab1 }}</v-tab>
+        <v-tab class="tab-sub w-40">{{ tab2 }}</v-tab>
       </v-tabs>
 
     <div ref="baseDomObject" :class="mdAndUp ? 'baseDom-md' : 'baseDom-sm'" />
@@ -40,6 +40,8 @@ export default {
       nrrdSliceZ:null,
       nrrdMeshes: null,
       loadFirstTime: true,
+      tab1: "3D Mammogram",
+      tab2: "2D Mammogram",
       currentView: "3D Mammogram",
       mouseActions: null,
       modelToScenes:{},
@@ -91,6 +93,12 @@ export default {
     this.container = this.$refs.baseDomObject;
     this.modelName = this.$model().name;
 
+    if(this.modelName === "cyst"){
+      this.tab2 = "2D Ultrasound";
+    }else{
+      this.tab2 = "2D Mammogram";
+    }
+
     if(["cyst", "fibroadenoma", "calcifications", "fat_necrosis", "dcis", "lobular", "ductal"].includes(this.modelName)){
       this.modelName = "normal";
     }
@@ -145,8 +153,8 @@ export default {
       this.scene = this.baseRenderer.getSceneByName(modelName);
       if (this.scene === undefined) {
         this.scene = this.baseRenderer.createScene(modelName);
-        this.scene.controls.staticMoving = true;
-        // this.scene.controls.rotateSpeed = 3.0;
+        // this.scene.controls.staticMoving = true;
+        this.scene.controls.rotateSpeed = 5.0;
         this.scene.controls.panSpeed = 0.5;
         
         this.baseRenderer.setCurrentScene(this.scene);
@@ -164,6 +172,24 @@ export default {
             this.nrrdMaxIndex = nrrdSlices.z.MaxIndex;
             this.nrrdSliceZ = nrrdSlices.z;
 
+            // const nrrdOrigin = volume.header.space_origin.map((num) => Number(num));
+            const nrrdRas = volume.RASDimensions; 
+
+            const x_bias = -(nrrdRas[0]) / 2;
+            const y_bias = -(nrrdRas[1]) / 2;
+            const z_bias = -(nrrdRas[2]) / 2;
+
+            this.nrrdMaxIndex = nrrdSlices.z.MaxIndex;
+            this.nrrdSliceZ = nrrdSlices.z;
+
+            this.nrrdBias = new this.THREE.Vector3(x_bias, y_bias, z_bias);
+            // bunding box
+            const geometry = new this.THREE.BoxGeometry( nrrdRas[0], nrrdRas[1], nrrdRas[2] ); 
+            const material = new this.THREE.MeshBasicMaterial( {color: 0x00ff00} ); 
+            const cube = new this.THREE.Mesh( geometry, material ); 
+            const box = new this.THREE.BoxHelper( cube, 0xffffff );
+            this.scene.scene.add( box );
+
             if(this.currentView === "2D Mammogram"){
               this.scene.controls.noRotate = true;
               this.scene.controls.noPan = true;
@@ -186,9 +212,9 @@ export default {
         );
 
         this.scene.loadViewUrl(viewURL);
-        this.scene.updateBackground("#f8cdd6", "#f8cdd6");
-        this.Copper.setHDRFilePath("environment/venice_sunset_1k.hdr");
-        this.baseRenderer.updateEnvironment();
+        // this.scene.updateBackground("#f8cdd6", "#f8cdd6");
+      
+        // this.baseRenderer.updateEnvironment();
         this.modelToScenes[modelName] = this.scene;
       }else{
         loadingContainer.style.display = "none";
@@ -238,6 +264,10 @@ export default {
 </script>
 
 <style scoped lang="scss">
+.model {
+  background: rgb(251,113,133);
+  background: linear-gradient(90deg, rgba(251,113,133,1) 0%, rgba(253,164,175,1) 48%, rgba(251,113,133,1) 100%);
+}
 .baseModelControl {
   width: 100vw;
   height: 120px;
@@ -267,7 +297,14 @@ export default {
   height: 60px;
 }
 .tab-main{
-  background-color: #EF9BAA !important;
+  // background-color: #fb7185 !important;
+  // background: rgb(244,63,94) !important;
+  background: rgb(251,113,133);
+  background: linear-gradient(90deg, rgba(251,113,133,1) 0%, rgba(253,164,175,1) 48%, rgba(251,113,133,1) 100%);
+}
+.tab-sub{
   color: #000 !important;
+  background: #fda4af;
+  // background: linear-gradient(90deg, rgba(251,113,133,1) 0%, rgba(253,164,175,1) 48%, rgba(251,113,133,1) 100%);
 }
 </style>
diff --git a/frontend/components/model/PanelControls.vue b/frontend/components/model/PanelControls.vue
@@ -1,8 +1,9 @@
 <template>
-  <div class="w-full h-1/2">
-    <span style="color: rgb(244, 55, 149);" class="font-bold">
-      {{ modelControl }}
-    </span>
+  <!-- <div class="w-full h-full border-l border-rose-300 p-4"> -->
+  <div class="w-full h-full r_main">
+    <div class="absolute flex  justify-center items-center top-0 right-0 w-full h-11 p-1 my-2">
+      <span class="text-black text-base font-thin">{{ modelControl }}</span>
+    </div>
 
     <div ref="rightContainer" class="w-full h-full">
     </div>
@@ -85,6 +86,8 @@ export default {
         this.scene = this.baseRenderer.createScene(modelName);
         // this.scene.controls.staticMoving = true;
         // this.scene.controls.rotateSpeed = 3.0;
+        this.scene.controls.minDistance = 500;
+        this.scene.controls.maxDistance = 3000;
         this.scene.controls.panSpeed = 0.5;
         this.baseRenderer.setCurrentScene(this.scene);
 
@@ -96,9 +99,9 @@ export default {
 
             this.nrrdMeshes = nrrdMesh;
             this.scene.addObject(nrrdMesh.z);
+            
             const nrrdOrigin = volume.header.space_origin.map((num) => Number(num));
             const nrrdRas = volume.RASDimensions; 
-            
 
             const x_bias = -(nrrdOrigin[0] * 2 + nrrdRas[0]) / 2;
             const y_bias = -(nrrdOrigin[1] * 2 + nrrdRas[1]) / 2;
@@ -108,6 +111,12 @@ export default {
             this.nrrdSliceZ = nrrdSlices.z;
 
             this.nrrdBias = new this.THREE.Vector3(x_bias, y_bias, z_bias);
+            // bunding box
+            const geometry = new this.THREE.BoxGeometry( nrrdRas[0], nrrdRas[1], nrrdRas[2] ); 
+            const material = new this.THREE.MeshBasicMaterial( {color: 0x00ff00} ); 
+            const cube = new this.THREE.Mesh( geometry, material ); 
+            const box = new this.THREE.BoxHelper( cube, 0xffffff );
+            this.scene.scene.add( box );
 
             if(this.modelUrlsArray[this.modelName].length > 2)
               this.loadModel(this.modelUrlsArray[this.modelName][2]);
@@ -121,16 +130,18 @@ export default {
               this.modelData[this.modelName] = {};
             }
             this.modelData[this.modelName]["right"] = data;
+
             this.addContainerListener();
             this.scene.onWindowResize();
           },
           { openGui: false }
         );
 
         this.scene.loadViewUrl(viewURL);
-        this.scene.updateBackground("#f8cdd6", "#f8cdd6");
-        this.Copper.setHDRFilePath("environment/venice_sunset_1k.hdr");
-        this.baseRenderer.updateEnvironment();
+        // this.scene.updateBackground("#f8cdd6", "#f8cdd6");
+        // this.scene.updateBackground("#fab9c5", "#fab9c5");
+        // this.Copper.setHDRFilePath("");
+        // this.baseRenderer.updateEnvironment();
         this.modelToScenes[modelName] = this.scene;
       }else{
         this.baseRenderer.setCurrentScene(this.scene);
@@ -189,12 +200,27 @@ export default {
 </script>
 
 <style scoped lang="scss">
+.r_main{
+//   border-radius: 5px;
+// background: linear-gradient(145deg, #e26678, #ff798e);
+// box-shadow:  20px 20px 60px #d56071,
+//              -20px -20px 60px #ff8299;
+border-radius: 5px;
+// background: #fb718588;
+background: linear-gradient(81deg, rgba(254,205,211,0.8) 0%, rgba(253,164,175,0.8) 0%, rgba(251,113,133,0.8) 100%);
+box-shadow:  5px 5px 10px #e4949e,
+             -5px -5px 10px #ffb4c1;
+}
 .model-control {
   padding-top: 80px;
   span {
     font-size: 1rem;
-    font-weight: bold;
-    color: rgb(244, 55, 149);
+    // font-weight: bold;
+    width: 100%;
+    height: 50px;
+    text-align: center;
+    color: #000;
+
   }
   .mri {
     padding: 0;

diff --git a/frontend/layouts/default.vue b/frontend/layouts/default.vue
@@ -131,8 +131,8 @@ export default {
   align-items: center;
 }
 .outer-large {
-  min-width: 409px;
-  width: 30vw;
+  min-width: 499px;
+  width: 33vw;
   position: fixed;
   top: 0;
   left: 0;

diff --git a/frontend/package.json b/frontend/package.json
@@ -13,7 +13,7 @@
   },
   "dependencies": {
     "@nuxtjs/axios": "^5.13.6",
-    "copper3d": "^2.0.9",
+    "copper3d": "^2.1.1",
     "core-js": "^3.25.3",
     "marked": "4.0.11",
     "nuxt": "^2.15.8",

diff --git a/frontend/plugins/copper.js b/frontend/plugins/copper.js
@@ -14,7 +14,7 @@ const baseRenderer = new Copper.copperRenderer(container, {
   guiOpen,
   camera: true,
   performance: true,
-  alpha: false,
+  alpha: true,
   logarithmicDepthBuffer: true,
   light: false,
   controls: "copper3d",
@@ -44,7 +44,7 @@ rightContainer.style.height = "100%";
 
 const baseRightRenderer = new Copper.copperRenderer(rightContainer, {
   guiOpen: false,
-  alpha: false,
+  alpha: true,
   cameraGui: true,
   performance: true,
   logarithmicDepthBuffer: true,

diff --git a/frontend/static/modelView/density-1/left/density25.glb b/frontend/static/modelView/density-1/left/density25.glb
diff --git a/frontend/static/modelView/density-1/left/left_breast_view.json b/frontend/static/modelView/density-1/left/left_breast_view.json
@@ -1,7 +1,7 @@
 {
-  "farPlane": 1000,
+  "farPlane": 10000,
   "targetPosition": [0, 0, 0],
   "nearPlane": 0.01,
   "upVector": [0, 1, 0],
-  "eyePosition": [0, 0, 0.2]
+  "eyePosition": [0, 0, 0.3]
 }
diff --git a/frontend/static/modelView/density-1/middle/m_view.json b/frontend/static/modelView/density-1/middle/m_view.json
@@ -3,5 +3,5 @@
   "targetPosition": [0, 0, 0],
   "nearPlane": 0.01,
   "upVector": [0, -1, 0],
-  "eyePosition": [0, 0, 3000]
+  "eyePosition": [0, 0, 2500]
 }
diff --git a/frontend/static/modelView/density-1/right/mri_view.json b/frontend/static/modelView/density-1/right/mri_view.json
@@ -1,7 +1,7 @@
 {
-  "farPlane": 1000,
+  "farPlane": 100000,
   "targetPosition": [0, 0, 0],
   "nearPlane": 0.01,
-  "upVector": [0, -1, 0],
-  "eyePosition": [0, 0, 500]
+  "upVector": [0, 1, 0],
+  "eyePosition": [0, 0, 800]
 }
diff --git a/frontend/static/modelView/density-2/left/density50.glb b/frontend/static/modelView/density-2/left/density50.glb
diff --git a/frontend/static/modelView/density-2/left/left_breast_view.json b/frontend/static/modelView/density-2/left/left_breast_view.json
@@ -1,7 +1,7 @@
 {
-  "farPlane": 1000,
+  "farPlane": 10000,
   "targetPosition": [0, 0, 0],
   "nearPlane": 0.01,
   "upVector": [0, 1, 0],
-  "eyePosition": [0, 0, 0.2]
+  "eyePosition": [0, 0, 0.3]
 }
diff --git a/frontend/static/modelView/density-2/right/mri_view.json b/frontend/static/modelView/density-2/right/mri_view.json
@@ -1,7 +1,7 @@
 {
-  "farPlane": 1000,
+  "farPlane": 100000,
   "targetPosition": [0, 0, 0],
   "nearPlane": 0.01,
-  "upVector": [0, -1, 0],
-  "eyePosition": [0, 0, 500]
+  "upVector": [0, 1, 0],
+  "eyePosition": [0, 0, 1000]
 }
diff --git a/frontend/static/modelView/density-3/left/density75.glb b/frontend/static/modelView/density-3/left/density75.glb
diff --git a/frontend/static/modelView/density-3/left/left_breast_view.json b/frontend/static/modelView/density-3/left/left_breast_view.json
@@ -1,7 +1,7 @@
 {
-  "farPlane": 1000,
+  "farPlane": 10000,
   "targetPosition": [0, 0, 0],
   "nearPlane": 0.01,
   "upVector": [0, 1, 0],
-  "eyePosition": [0, 0, 0.2]
+  "eyePosition": [0, 0, 0.3]
 }
diff --git a/frontend/static/modelView/density-3/right/mri_view.json b/frontend/static/modelView/density-3/right/mri_view.json
@@ -1,7 +1,7 @@
 {
-  "farPlane": 1000,
+  "farPlane": 100000,
   "targetPosition": [0, 0, 0],
   "nearPlane": 0.01,
-  "upVector": [0, -1, 0],
-  "eyePosition": [0, 0, 500]
+  "upVector": [0, 1, 0],
+  "eyePosition": [0, 0, 1000]
 }
diff --git a/frontend/static/modelView/density-4/left/density100.glb b/frontend/static/modelView/density-4/left/density100.glb