Merge branch 'develop' into adding-loader

camicroscope · Mar 29, 2024 · a6a04c9 · a6a04c9
2 parents 0411b4d + 56978ba
commit a6a04c9
Show file tree

Hide file tree

Showing 36 changed files with 5,508 additions and 203 deletions.
diff --git a/apps/Info.html b/apps/Info.html
@@ -1,12 +1,12 @@
 <!DOCTYPE html>
-<html>
+<html  lang="en">
 
 <head>
 	<meta name="keywords" content="camicroscope, quip" />
 	<meta charset='utf-8'>
 	<meta http-equiv='X-UA-Compatible' content='IE=edge'>
 	<meta name='viewport'
-		content='width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no'>
+		content='width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=2.0'>
 	<!-- common -->
 	<!-- <link rel='stylesheet' type='text/css' media='all' href='../css/style.css'/> -->
 	<!-- Check If we're logged in ok, otherwise, log in for us -->
@@ -35,6 +35,8 @@
 		integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" 
 		crossorigin="anonymous">
 	<link rel="stylesheet" href="../common/stacktable.css">
+	<!-- common styling -->
+	<link rel="stylesheet" href="./common.css">
 	<style>
 		html,
 		body {
@@ -75,17 +77,14 @@
 							<li class="nav-item link" style="font-family: sans-serif;">
 								<a class="nav-link" href="./signup/signup.html"> <i class="fas fa-user-plus"></i> Signup</a>
 							</li>
-							<li class="nav-item link" style="font-family: sans-serif;">
-								<a class="nav-link" target="_blank" href="https://docs.google.com/forms/d/e/1FAIpQLScL91LxrpAZjU88GBZP9gmcdgdf8__uNUwhws2lzU6Lr4qNwA/viewform"> <i class="fas fa-comment"></i> Feedback</a>
-							</li>
 						</ul>
 					</div>
 			</div>
 		</nav>
 
 	<div class="header text-center text-white bg-info p-4">
 		<h1 class="h1">caMicroscope</h1>
-		<p>Digital pathology image viewer with support for human/machine generated annotations and markups.</p>
+		<p style="font-weight: bold; font-size: 14pt;">Digital pathology image viewer with support for human/machine generated annotations and markups.</p>
 		<div style="align-content: center;">
 			<div class="btn-group" role="group">
 			<a href="./table.html">	<button style="border-color: white; border-radius: 5px 0 0 5px;" type="button" class="btn btn-secondary bg-info text-light" title="Slides Table"><i class="fas fa-list-alt"></i>  Slides</button> </a>
@@ -166,10 +165,13 @@ <h3 class="text-center h3 mb-2" style="margin-top:8px;margin-bottom:10px;">Infor
 </div>
 </div>
 
-<footer class="text-center text-white bg-dark p-3 mt-2">
-	<p class="p">Copyright © 2021 caMicroscope</p>
-</footer>
+
+<!-- footer -->
+<footer id="footer-layout"></footer>
 </div>
+
+    <!-- script to call a footer(layout footer in the common > utils folder) function -->
+<script> insertFooterLayout(); </script>
 <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
 </body>
 <script>

diff --git a/apps/common.css b/apps/common.css
@@ -1,7 +1,54 @@
 .text-in-line {
-	margin: 0 auto;
-	white-space: nowrap;
-	overflow: hidden;
-	text-overflow: ellipsis;
+  margin: 0 auto;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
+/* layout footer styles */
+#footer-layout hr {
+  border-bottom-color: #ffffff;
+  padding: 0;
+  margin: 0;
+}
+
+#footer-layout hr {
+  border-bottom-color: #ffffff;
+  padding: 0;
+  margin: 0;
+}
+
+#footer-layout {
+  color: whitesmoke;
+  text-align: left;
+  padding: 2.5em 4.5em;
+  background-color: #343a40;
+}
+
+#footer-layout p {
+  color: whitesmoke;
+}
+
+.company-name {
+  color: #24a9f6;
+}
+
+.company-name a {
+  color: #24a9f6;
+  text-decoration: none;
+}
+
+.company-name:hover {
+  color: #4f5e66;
+  text-decoration: underline;
+}
+#footer-layout strong,
+#footer-layout b {
+  color: #ffffff;
+}
+
+@media (max-width: 768px) {
+  #footer-layout {
+    padding: 2em 2.5em;
+  }
+}
diff --git a/apps/dev-workbench/workbench.html b/apps/dev-workbench/workbench.html
@@ -121,6 +121,7 @@
               href="#"
               data-toggle="modal"
               data-target="#helpModal"
+              onClick="displayUserGuide()"
             >
               <i class="fas fa-question-circle"></i>
               &nbsp;&nbsp;Help/User Guide</a
@@ -239,74 +240,72 @@
         "
       >
         <!-- Cards -->
-        <div class="card" style="max-width: 20em; margin-left:2cm; auto;">
-          <!-- Card content -->
-          <div class="card-body">
-            <!-- Title -->
-            <h4 class="card-title">Select your dataset</h4>
-            <!-- Text -->
-            <p style="text-align: justify;" class="card-text">
-              Select the dataset (.zip) having three files; spritesheet
-              (data.jpg), a binary labels (labels.bin) and the classes
-              (labelnames.csv) from your local storage.
-            </p>
-            <div class="input-group">
-              <div class="custom-file">
-                <input
-                  type="file"
-                  id="spriteInput"
-                  accept=".zip"
-                  style="max-width: 98%;"
-                />
-                <label
-                  style="overflow: hidden;"
-                  class="custom-file-label spriteInputLabel"
-                  for="spriteInput"
-                  >Choose file
-                </label>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div style="height: 1em; margin-left:5cm; padding: 2em 0; font-size: large;">
-          <b> OR</b>
-        </div>
-        <div class="card" style="max-width: 20em; margin-left:2cm; auto;">
-          <!-- Card content -->
-          <div class="card-body">
-            <!-- Title -->
-            <h4 class="card-title">Create your own</h4>
-            <!-- Text -->
-            <p class="card-text" style="text-align: justify;">
-              Build your own spritesheet using labeling from the caMicroscope
-              instance or browsing your own dataset.
-            </p>
-            <!-- Buttons -->
-            <div style="text-align: center;">
-              <button
-                data-toggle="modal"
-                data-target="#labelsUploadModal"
-                style="border-radius: 5px; font-size: 0.9em;"
-                class="btn btn-primary px-2"
-                onclick="resetLabelsModal()"
-              >
-                caM Labels
-              </button>
-              <button
-                style="border-radius: 5px; font-size: 0.9em;"
-                class="btn btn-primary px-2"
-                data-toggle="modal"
-                data-target="#labelsUploadModal"
-                onclick="resetLabelsModal(true)"
-              >
-                Custom Data
-              </button>
-            </div>
-          </div>
-        </div>
-        <!-- Cards -->
-      </div>
-    </div>
+   <div class="container">
+     <div class="row ">
+       <div class="col-12 col-lg-5 ">
+         <div class="card" style="max-width: 20em; margin:auto;">
+           <div class="card-body">
+             <h4 class="card-title">Select your dataset</h4>
+             <p style="text-align: justify" class="card-text">
+               Select the dataset (.zip) having three files; spritesheet (data.jpg),
+               a binary labels (labels.bin) and the classes (labelnames.csv)
+               from your local storage.
+             </p>
+             <div class="input-group">
+               <div class="custom-file">
+                 <input
+                   type="file"
+                   id="spriteInput"
+                   accept=".zip"
+                   style="max-width: 98%;"
+                 />
+                 <label
+                   style="overflow: hidden;"
+                   class="custom-file-label spriteInputLabel"
+                   for="spriteInput"
+                   > Choose file
+                 </label>
+               </div>
+             </div>
+           </div>
+         </div>
+       </div>
+       <div class="col-12 col-lg-2 d-flex align-items-center justify-content-center">
+           <b>OR</b>
+       </div>
+       <div class="col-12 col-lg-5 ">
+         <div class="card" style="max-width: 20em; margin:auto;">
+           <div class="card-body">
+             <h4 class="card-title">Create your own</h4>
+             <p class="card-text" style="text-align: justify;">
+               Build your own spritesheet using labeling from the caMicroscope
+               instance or browsing your own dataset.
+             </p>
+             <div style="text-align: center;">
+               <button
+                 data-toggle="modal"
+                 data-target="#labelsUploadModal"
+                 style="border-radius: 5px; font-size: 0.9em;"
+                 class="btn btn-primary px-2"
+                 onclick="resetLabelsModal()"
+               >
+                 caM Labels
+               </button>
+               <button
+                 style="border-radius: 5px; font-size: 0.9em;"
+                 class="btn btn-primary px-2"
+                 data-toggle="modal"
+                 data-target="#labelsUploadModal"
+                 onclick="resetLabelsModal(true)"
+               >
+                 Custom Data
+               </button>
+             </div>
+           </div>
+         </div>
+       </div>
+     </div>
+   </div>
 
     <!-- Labels/customData Upload Modal -->
     <div

diff --git a/apps/dev-workbench/workbench.js b/apps/dev-workbench/workbench.js
@@ -494,14 +494,14 @@ function importWork() {
 }
 
 // getting markdown from readme.md and parsing/displaying it as user-guide
-$('.helpButton').click(function() {
+function displayUserGuide() {
   fetch('./readme.md').then((res) => res.blob()).then((blob) => {
     let f = new FileReader();
     f.onload = function(e) {
-      $('#helpModal .modal-body').html(marked(e.target.result));
+      $('#helpModal .modal-body').html(marked.marked(e.target.result));
       $('#helpModal .modal-body td, #helpModal .modal-body th')
           .css('border', '2px solid #dddddd').css('padding', '5px');
     };
     f.readAsText(blob);
   });
-});
+}
diff --git a/apps/heatmap/heatmap.html b/apps/heatmap/heatmap.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html  lang="en">
 
 <head>
 	<meta name="keywords" content="camicroscope, quip" />

diff --git a/apps/heatmap/init.js b/apps/heatmap/init.js
@@ -60,6 +60,10 @@ function initCore() {
 
   $CAMIC.loadImg(async function(e) {
     Loading.open(document.body, `Loading Data ...`);
+    $CAMIC.viewer.addHandler('open-failed', function(e) {
+      console.error(e.message, e);
+      redirect($D.pages.table, e.message, 5);
+    });
     // image loaded
     if (e.hasError) {
       $UI.message.addError(e.message);
@@ -355,7 +359,7 @@ function initUIcomponents() {
         value: 'bugs',
         type: 'btn',
         callback: ()=>{
-          window.open('https://goo.gl/forms/mgyhx4ADH0UuEQJ53', '_blank').focus();
+          window.open('https://github.com/camicroscope/caMicroscope/issues', '_blank').focus();
         },
       },
 

diff --git a/apps/labeling/labeling.html b/apps/labeling/labeling.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html  lang="en">
 
 <head>
 	<meta name="keywords" content="camicroscope, quip" />

diff --git a/apps/labeling/labeling.js b/apps/labeling/labeling.js
@@ -77,6 +77,10 @@ function initCore() {
         defaultText: `Slide: ${$D.params.data.name}`,
       });
     }
+    $CAMIC.viewer.addHandler('open-failed', function(e) {
+      console.error(e.message, e);
+      redirect($D.pages.table, e.message, 5);
+    });
   });
 
   $CAMIC.viewer.addHandler('open', function() {
@@ -146,7 +150,7 @@ function initCore() {
       value: 'bugs',
       type: 'btn',
       callback: ()=>{
-        window.open('https://goo.gl/forms/mgyhx4ADH0UuEQJ53', '_blank').focus();
+        window.open('https://github.com/camicroscope/caMicroscope/issues', '_blank').focus();
       },
     },
     ],