Tour of viewer tools (#334)

* Added tour of viewer tools

* removed errors

* Changes implemented and lint errors removed

* Improved opacity

* Error resolve

.eslintignore

@@ -11,3 +11,4 @@ apps/landing/jquery.dropotron.min.js
 apps/landing/jquery.min.js
 apps/landing/jquery.scrollex.min.js
 apps/segment/opencv.js
+common/bootstrap-tour-standalone/bootstrap-tour-standalone.min.js

apps/viewer/init.js

@@ -832,7 +832,17 @@ async function initUIcomponents() {
       window.open('https://goo.gl/forms/mgyhx4ADH0UuEQJ53', '_blank').focus();
     },
   });
-
+  subToolsOpt.push({
+    name: 'tutorial',
+    icon: 'help',
+    title: 'Tutorial',
+    value: 'tutorial',
+    type: 'btn',
+    callback: function() {
+      tour.init();
+      tour.start(true);
+    },
+  });
   // create the tool bar
   $UI.toolbar = new CaToolbar({
     /* opts that need to think of*/

apps/viewer/tut.js

@@ -0,0 +1,134 @@
+var tour = new Tour({
+  name: 'Tour',
+  steps: [{
+    element: 'label[title=\'Applications\']',
+    title: 'Annotations',
+    content: 'Opens the Annotation panel,'+
+    ' where you can select which annotation set to view,'+
+    ' name that annotation set, add optional notes about'+
+    ' the annotation set, save the annotation set, and reset the panel to its original state.',
+    placement: 'auto bottom',
+    smartPlacement: true,
+  },
+  {
+    element: 'label[title=\'Layers\']',
+    title: 'Layer Manager',
+    content: 'Opens the Layers Manager panel,'+
+    ' where you can select which layers to view.',
+    placement: 'auto bottom',
+    smartPlacement: true,
+  },
+  {
+    element: 'i[title=\'Home\']',
+    title: 'Home',
+    content: 'Return to the data table so that'+
+    ' you can open another slide.',
+    placement: 'auto bottom',
+    smartPlacement: true,
+  },
+  {
+    element: 'label[title=\'Draw\']',
+    title: 'Draw',
+    content: 'Draw thin lines, thick lines, or polygons on the image.'+
+    ' To maintain the integrity of measurements, avoid drawing shapes that overlap or intersect one another.',
+    placement: 'auto bottom',
+    smartPlacement: true,
+  },
+  {
+    element: 'label[title=\'Magnifier\']',
+    title: 'Magnifier',
+    content: 'The Magnifier works like a magnifying glass and allows'+
+    ' you to see the slide at normal magnification (1.0), low magnification (0.5),'+
+    ' or high magnification (2.0). Click a magnification level and place the'+
+    ' bounding box on the area of the slide you want to magnify.',
+    placement: 'auto bottom',
+    smartPlacement: true,
+  },
+  {
+    element: 'label[title=\'Measurement\']',
+    title: 'Measurement',
+    content: 'Drag this tool on the slide to learn the measurement in micrometers.',
+    placement: 'auto bottom',
+    smartPlacement: true,
+  },
+  {
+    element: 'i[title=\'Share View\']',
+    title: 'Share View',
+    content: 'Opens a window with a URL to the current presentation state of the'+
+    ' slide including the magnification level, layers that are currently open, and your position on the image.',
+    placement: 'auto bottom',
+    smartPlacement: true,
+  },
+  {
+    element: 'label[title=\'Side By Side Viewer\']',
+    title: 'Side By Side Viewer',
+    content: 'Shows the Layer Manager panel, the left and right'+
+    ' layers, and inset window. For the right and left layer, select which layer you want to view.',
+    placement: 'auto bottom',
+    smartPlacement: true,
+  },
+  {
+    element: 'i[title=\'Heat Map\']',
+    title: 'Heat Map',
+    content: 'For a slide with heatmap data, opens the choices of heatmaps available,'+
+    ' as well as ways of displaying the heatmaps.'+
+    ' The gradient shows all of the values on the selected spectrum for the field you selected.'+
+    ' Contains a heatmap edit pen function.',
+    placement: 'auto bottom',
+    smartPlacement: true,
+  },
+  {
+    element: 'i[title=\'Labeling\']',
+    title: 'Labeling',
+    content: 'Use this tool to draw a circle or rectangle around a tumor region,'+
+    ' measure an area on the slide, download labels, and submit a bug report.'+
+    ' The Labeling tool has its own toolbar with tools in the following order from left to right:'+
+    ' return to the previous slide, place a square on the slide, place a circle on the slide,'+
+    ' measure an area, download labels, and submit a bug report.'+
+    ' Click the left arrow at the far right of the toolbar to hide it,'+
+    ' then click the right arrow to show it.',
+    placement: 'auto bottom',
+    smartPlacement: true,
+  },
+  {
+    element: 'i[title=\'Segment\']',
+    title: 'Segment',
+    content: 'This tool allows you to display, count, and export nuclear segmentations on the image.'+
+    ' Clicking this tool opens the following custom toolbar.',
+    placement: 'auto bottom',
+    smartPlacement: true,
+  },
+  {
+    element: 'i[title=\'Predict\']',
+    title: 'Model',
+    content: 'Show results from a pre-trained tensorflow compatible model on a ROI of the slide.',
+    placement: 'auto bottom',
+    smartPlacement: true,
+  },
+  {
+    element: 'i[title=\'Bug Report\']',
+    title: 'Bug Report',
+    content: 'Report a bug or give feedback.',
+    placement: 'auto bottom',
+    smartPlacement: true,
+  },
+  {
+    element: 'i[title=\'Tutorial\']',
+    title: 'Tutorial',
+    content: 'Click here to start viewer Tour.',
+    placement: 'auto bottom',
+    smartPlacement: true,
+  }],
+  template: '<div class=\'popover tour\'><div class=\'arrow\' style=\'border-bottom-color:rgb(54, 95, 156);\'>'+
+  '</div><h3 class=\'popover-title\' '+
+  'style=\'color:white;background:rgb(54, 95, 156);font-family: sans-serif;text-align: center;\'>'+
+  '</h3><div class=\'popover-content\' style=\'color: black;font-family: sans-serif;text-align: justify;\'>'+
+  '</div><div class=\'popover-navigation\' style=\'display:flex\'>'+
+  '<div style=\'margin:auto;\'><button class=\'btn btn-default\' data-role=\'prev\'>'+
+  '« Prev</button><span data-role=\'separator\'>|</span>'+
+  '<button class=\'btn btn-default\' data-role=\'next\'>Next »</button></div>'+
+  '</div><div style=\'width:100%;display: flex;margin-bottom: 5px;\'>'+
+  '<button class=\'btn btn-default\' data-role=\'end\' style=\'margin:auto;\'>End tour</button></div></div>',
+  backdrop: true,
+});
+tour.init();

apps/viewer/viewer.html

@@ -160,7 +160,7 @@
       media="all"
       href="../../css/popup.css"
     />
-
+    <link href="../../common/bootstrap-tour-standalone/bootstrap-tour-standalone.min.css" rel="stylesheet">
     <!--  common js START -->
     <!-- util.js -->
     <script type="text/javascript" src="../../common/util.js"></script>
@@ -324,6 +324,8 @@
     <script src="./uicallbacks.js"></script>
     <script src="./dataloaders.js"></script>
     <script src="./init.js"></script>
+    <script src="../../common/bootstrap-tour-standalone/bootstrap-tour-standalone.min.js"></script>
+    <script src="./tut.js"></script>
   </head>
   <body>
     <!-- message-->
@@ -360,7 +362,6 @@
 
     <!-- popup--->
     <div id="popup-container"></div>
-
   </body>
   <script type="text/javascript">
     if (detectIE()) {
@@ -422,5 +423,6 @@
     if ($D.params.states) {
       $D.params.states = StatesHelper.decodeStates($D.params.states);
     }
+
   </script>
 </html>

css/style.css

@@ -246,3 +246,7 @@ table.data_table tr:hover td {
   border-left: 1px solid #365f9c;
   border-radius: 0 0.3rem 0.3rem 0;
 }
+.tour-step-background {
+background: #71daec !important;
+opacity: 0.3 !important;
+}