Merge pull request #14 from LinkunGao/pwa

Pwa

frontend/components/about/Logo.vue

@@ -1,8 +1,9 @@
 <template>
   <div class="flex flex-col justify-end items-end">
-    <img class="w-32 h-auto my-1 mx-5" src="~assets/images/logo1.png" />
-    <img class="w-32 h-auto my-1 mx-5" src="~assets/images/logo2.png" />
-    <img class="w-48 h-auto my-1 mx-5" src="~assets/images/logo3.png" />
+    <img class="w-20 h-auto md:w-32 my-1 mx-5" src="~assets/images/logo1.png" />
+    <div class="hidden md:flex"><img class="w-32 h-auto my-1 mx-5" src="~assets/images/logo2.png" /></div>
+    <div class="hidden md:flex"><img class=" w-48 h-auto my-1 mx-5" src="~assets/images/logo3.png" /></div>
+
   </div>
 </template>
 

frontend/components/model/LeftModel.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="model_panel" ref="leftContainer" :style="panelStyle">
+  <div :class="model_panel" ref="leftContainer" :style="panelStyle" class="h-full">
     <div :class="model_title">
       <lazy-panel />
     </div>
@@ -35,6 +35,10 @@ export default {
         density_4:[
           "modelView/density-4/left/density100.glb",
           "modelView/density-4/left/left_breast_view.json",
+        ],
+        cyst: [
+          "modelView/density-4/left/density100.glb",
+          "modelView/density-4/left/left_breast_view.json",
         ]
       },
     };

frontend/components/model/Model.vue

@@ -65,6 +65,12 @@ export default {
           "modelView/density-4/middle/m3d.nrrd",
           "modelView/density-4/middle/m_view.json",
           "modelView/density-4/middle/m2d.nrrd"
+        ],
+        cyst: [
+          "modelView/benign-cyst/middle/m3d.nrrd",
+          "modelView/benign-cyst/middle/m_view.json",
+          "modelView/benign-cyst/middle/u2d.nrrd",
+          "modelView/benign-cyst/middle/u_view.json",
         ]
       },
     };
@@ -99,11 +105,12 @@ export default {
       this.tab2 = "2D Mammogram";
     }
 
-    if(["cyst", "fibroadenoma", "calcifications", "fat_necrosis", "dcis", "lobular", "ductal"].includes(this.modelName)){
+    this.$nuxt.$emit("onNavChange", this.modelName);
+    if(["fibroadenoma", "calcifications", "fat_necrosis", "dcis", "lobular", "ductal"].includes(this.modelName)){
       this.modelName = "normal";
     }
 
-    this.$nuxt.$emit("onNavChange", this.modelName);
+    
     this.container.appendChild(this.baseContainer);
     this.start();
 
@@ -130,13 +137,13 @@ export default {
         this.currentView = "3D Mammogram";
         this.loadNrrd(modelUrl, this.modelName+"middle_3d");
       } else {
-        this.currentView = "2D Mammogram";
+        this.currentView = this.modelName === "cyst" ? "2D Ultrasound" : "2D Mammogram";
         this.loadNrrd(this.modelUrlsArray[this.modelName][2], this.modelName+"middle_2d");
       }
     },
 
     loadNrrd(nrrdUrl, modelName) {
-      const viewURL = this.modelUrlsArray[this.modelName][1];
+      const viewURL = this.currentView === "2D Ultrasound" ? this.modelUrlsArray[this.modelName][3] : this.modelUrlsArray[this.modelName][1];
       const loadBar1 = this.Copper.loading(loadingSvg);
       const loadBar2 = this.Copper.loading(loadingSvg);
       
@@ -159,57 +166,59 @@ export default {
         
         this.baseRenderer.setCurrentScene(this.scene);
 
-        this.scene.loadNrrd(
-          nrrdUrl,
-          loadBar2,
-          true,
-          (volume, nrrdMesh, nrrdSlices, gui) => {
-            this.nrrdMeshes = nrrdMesh;
-            this.nrrdMeshes.x.name = "x";
-            this.nrrdMeshes.y.name = "y";
-            this.nrrdMeshes.z.name = "z";
-            this.scene.addObject(nrrdMesh.z);
-            this.nrrdMaxIndex = nrrdSlices.z.MaxIndex;
-            this.nrrdSliceZ = nrrdSlices.z;
+          this.scene.loadNrrd(
+            nrrdUrl,
+            loadBar2,
+            true,
+            (volume, nrrdMesh, nrrdSlices, gui) => {
+              this.nrrdMeshes = nrrdMesh;
+              this.nrrdMeshes.x.name = "x";
+              this.nrrdMeshes.y.name = "y";
+              this.nrrdMeshes.z.name = "z";
+              this.scene.addObject(nrrdMesh.z);
+              this.nrrdMaxIndex = nrrdSlices.z.MaxIndex;
+              this.nrrdSliceZ = nrrdSlices.z;
 
-            // const nrrdOrigin = volume.header.space_origin.map((num) => Number(num));
-            const nrrdRas = volume.RASDimensions; 
+              // 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;
+              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.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 );
+              this.nrrdBias = new this.THREE.Vector3(x_bias, y_bias, z_bias);
+              
 
-            if(this.currentView === "2D Mammogram"){
-              this.scene.controls.noRotate = true;
-              this.scene.controls.noPan = true;
-              this.removeContainerListener();
-            }else{
-              const data = {
-                nrrdSliceZ: this.nrrdSliceZ, 
-                nrrdMesh: this.nrrdMeshes.z, 
-                nrrdMaxIndex: this.nrrdMaxIndex
-              };
-              if(this.modelData[this.modelName] === undefined){
-                this.modelData[this.modelName] = {};
+              if(this.currentView === "2D Mammogram" || this.currentView === "2D Ultrasound"){
+                this.scene.controls.noRotate = true;
+                this.scene.controls.noPan = true;
+                this.removeContainerListener();
+              }else{
+                // 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 );
+                const data = {
+                  nrrdSliceZ: this.nrrdSliceZ, 
+                  nrrdMesh: this.nrrdMeshes.z, 
+                  nrrdMaxIndex: this.nrrdMaxIndex
+                };
+                if(this.modelData[this.modelName] === undefined){
+                  this.modelData[this.modelName] = {};
+                }
+                this.modelData[this.modelName]["middle"] = data;
+                this.addContainerListener();
               }
-              this.modelData[this.modelName]["middle"] = data;
-              this.addContainerListener();
-            }
-            loadingContainer.style.display = "none";
-          },
-          { openGui: false }
-        );
+              loadingContainer.style.display = "none";
+            },
+            { openGui: false }
+          );
+        
 
         this.scene.loadViewUrl(viewURL);
         // this.scene.updateBackground("#f8cdd6", "#f8cdd6");

frontend/components/model/PanelControls.vue

@@ -43,6 +43,10 @@ export default {
           "modelView/density-4/right/mri.nrrd",
           "modelView/density-4/right/mri_view.json",
         ],
+        cyst: [
+        "modelView/density-4/right/mri.nrrd",
+        "modelView/density-4/right/mri_view.json",
+        ]
       },
     };
   },
@@ -85,7 +89,7 @@ export default {
       if (this.scene === undefined) {
         this.scene = this.baseRenderer.createScene(modelName);
         // this.scene.controls.staticMoving = true;
-        // this.scene.controls.rotateSpeed = 3.0;
+        this.scene.controls.rotateSpeed = 0.5;
         this.scene.controls.minDistance = 500;
         this.scene.controls.maxDistance = 3000;
         this.scene.controls.panSpeed = 0.5;

frontend/components/navigation/LeftPane.vue

@@ -5,7 +5,7 @@
     </div>
     <div v-if="$route.name == 'slug'">
       <!-- currentBg  -->
-      <div :class="currentBg" tile :style="panelHeightStyle">
+      <div :class="currentBg" :style="panelHeightStyle">
         <LeftModel />
       </div>
     </div>
@@ -38,7 +38,7 @@ export default {
         return {
           "min-height": this.panelHeight - 2 + "px",
         };
-      } else return { height: "auto" };
+      } else return { height: "24rem" };
     },
   },
 };

frontend/components/navigation/Navigation.vue

@@ -30,6 +30,7 @@
       <v-btn
         v-for="(topic, index) in topics"
         class="button-default"
+        :class="mdAndUp ? '' : 'btn-sm'"
         :key="index"
         :value="index"
         :disabled="$isTopicDisabled(topic)"
@@ -44,6 +45,7 @@
       </v-btn>
       <v-btn
         class="button-default"
+        :class="mdAndUp ? '' : 'btn-sm'"
         :to="{ name: 'about' }"
         @click="updateAbout()"
         :value="'about'"
@@ -88,8 +90,12 @@ export default {
     menuCaption() {
       return this.$route.name === "slug" ? this.$parentTopic().slug : "about";
     },
+    mdAndUp() {
+      return this.$vuetify.breakpoint.mdAndUp;
+    },
   },
 
+
   watch: {
     selectedTopic: function (currentTopic) {
       this.subMenuActive =
@@ -122,7 +128,7 @@ export default {
   width: 100%;
 }
 
-.v-btn.button-default {
+.button-default {
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -150,4 +156,9 @@ export default {
   ); /* Standard syntax */
   border-left: 2px rgb(5, 5, 5) solid;
 }
+.btn-sm{
+  width: 100px !important;
+  min-width: 0 !important;
+}
+
 </style>

frontend/components/navigation/RightPane.vue

@@ -8,7 +8,7 @@
     >
       <PanelControls />
       <div
-        class="fixed md:bottom-0 md:right-0 "
+        class="hidden md:flex md:fixed md:bottom-0 md:right-0 "
       >
          <logo/>
       </div>

frontend/layouts/default.vue

@@ -6,6 +6,7 @@
     <div class="rightPanel">
       <div>
         <div class="pa-0 black">
+
           <Nuxt />
         </div>
       </div>
@@ -18,7 +19,7 @@
       <div class="pa-0">
         <v-row class="d-flex" no-gutters>
           <v-col>
-            <div class="pa-0" :class="mdAndUp ? 'full-height' : 'auto-height'">
+            <div class="pa-0" :class="mdAndUp ? 'full-height' : 'h-96'">
               <v-row class="d-flex flex-column" no-gutters>
                 <v-col ref="panel" class="out-card">
                   <v-card

frontend/nuxt.config.js

@@ -24,13 +24,13 @@ export default {
     htmlAttrs: {
       lang: "en",
     },
-    link: [
-      {
-        rel: "icon",
-        type: "image/x-icon",
-        href: "/breast-educational-resource/favicon2.ico",
-      },
-    ],
+    // link: [
+    //   {
+    //     rel: "icon",
+    //     type: "image/x-icon",
+    //     href: "/breast-educational-resource/favicon2.ico",
+    //   },
+    // ],
     meta: [
       { charset: "utf-8" },
       { name: "viewport", content: "width=device-width, initial-scale=1" },

frontend/static/modelView/benign-cyst/left/left_breast_view.json

@@ -0,0 +1,7 @@
+{
+  "farPlane": 10000,
+  "targetPosition": [0, 0, 0],
+  "nearPlane": 0.01,
+  "upVector": [0, 1, 0],
+  "eyePosition": [0, 0, 0.3]
+}

frontend/static/modelView/benign-cyst/middle/m_view.json

@@ -0,0 +1,7 @@
+{
+  "farPlane": 1000000,
+  "targetPosition": [0, 0, 0],
+  "nearPlane": 0.01,
+  "upVector": [0, -1, 0],
+  "eyePosition": [0, 0, 3000]
+}

frontend/static/modelView/benign-cyst/middle/u_view.json

@@ -0,0 +1,7 @@
+{
+  "farPlane": 1000000,
+  "targetPosition": [0, 0, 0],
+  "nearPlane": 0.01,
+  "upVector": [0, -1, 0],
+  "eyePosition": [0, 0, 800]
+}

frontend/static/modelView/benign-cyst/right/mri_view.json

@@ -0,0 +1,7 @@
+{
+  "farPlane": 100000,
+  "targetPosition": [0, 0, 0],
+  "nearPlane": 0.01,
+  "upVector": [0, 1, 0],
+  "eyePosition": [0, 0, 1000]
+}