Implementing Zoom functionality for Atlas Anatomy

unknown
1 parent 7c05a26c
Showing 2 changed files with 60 additions and 21 deletions
400-SOURCECODE/AIAHTML5.Web/app/controllers/TileViewListController.js
400-SOURCECODE/AIAHTML5.Web/app/views/aa/atlas-anatomy-detail.html
@@ -81,6 +81,8 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
         $location.url('/module-item-view');
     }
+  
+
     $scope.openModuleItem = function () {
         var jsContentURL;
         var moduleItemViewDivId;
@@ -143,6 +145,16 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
                 $scope.currentTitleFromJson = localStorage.getItem("currentViewTitle");
                 $("#modItemImage").attr('src', $rootScope.OpenItemImagePath);
+              
+                $rootScope.ViewImageWidth = $("#modItemImage").width();
+                $("#modItemImage").css("width", $rootScope.ViewImageWidth + "px");
+                imageViewAt100Percent = $rootScope.ViewImageWidth;
+                imageViewAt25Percent = $rootScope.ViewImageWidth * 0.25;
+                imageViewAt40Percent = $rootScope.ViewImageWidth * 0.40;
+                imageViewAt55Percent = $rootScope.ViewImageWidth * 0.55;
+                imageViewAt70Percent = $rootScope.ViewImageWidth * 0.70;
+                imageViewAt85Percent = $rootScope.ViewImageWidth * 0.85;
+
                 //0.5 create canvas on the top of image so that I can draw a line over the canvas.
                 var canvas = document.createElement('canvas');
@@ -152,16 +164,18 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
                 canvas.style.left = '0px';
                 canvas.style.top = '0px';
                 canvas.style.position = "absolute";
-
+                canvas.style.width = $rootScope.ViewImageWidth+ "px";
                 $("#imageDiv").append(canvas);
                 $scope.context = canvas.getContext("2d")
-
                 //6. Show all pins on AA opened item
+                //  $("#aaDetailViewCanvas").<img id="modItemImage" alt="" title=""  style="left:0px;top:0px;position:absolute">
                 $scope.showAllPins();
+
             }
         }, 1050);
     }
+
     function loadFailure() {
         console.log('unable to load opened module ietem');
         return true;
@@ -885,9 +899,6 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
         else {
             $("#bord_annotation").css({ 'display': 'block', 'width': d + 'px', 'top': e + 'px', 'left': f + 'px', 'transform': 'rotate(' + theta + 'deg)', '-moz-transform': 'rotate(' + theta + 'deg)', '-webkit-transform': 'rotate(' + theta + 'deg)', 'transform-origin': '0% 0%' });
         }
-
-
-
     }
@@ -922,6 +933,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
             click: function (clickedPin) {
+             
                 //change the head color to green
                 var radialAfterClick = $('#aaDetailViewCanvas').createGradient({
                     x1: 50, y1: 50,
@@ -131,28 +131,55 @@
         $('[data-toggle="tooltip"]').tooltip();
     });
 </script>
-<script src="js/jquery-ui-slider-pips.js"></script>
-<script>
-    $(".slider")
-
-    .slider({
-        min: 25,
-        max: 100,
-        value: 100,
-        range: "min",
-        orientation: "vertical"
-    })
-    .slider("pips", {
-        rest: "label",
-        step: "15"
+<script src="libs/jquery/jquery_plugin/slider-pips/jquery-ui-slider-pips.js"></script>
+<script>
+    var imageViewAt25Percent = 0.0;
+    var imageViewAt40Percent = 0.0;
+    var imageViewAt55Percent = 0.0;
+    var imageViewAt70Percent = 0.0;
+    var imageViewAt70Percent = 0.0;
+    var imageViewAt85Percent = 0.0;
+    var imageViewAt100Percent = 0.0;
+    $(document).ready(function () {
+        $(".slider").slider({
+            min: 25,
+            max: 100,
+            value: 100,
+            range: "min",
+            orientation: "vertical",
+            slide: function (event, ui) {
+                if (ui.value == 100) {
+                    $("#modItemImage").css("width", imageViewAt100Percent + "px");
+                    $("#aaDetailViewCanvas").css("width", imageViewAt100Percent + "px");
+                }
+                else if (ui.value == 85) {
+                    $("#modItemImage").css("width", (imageViewAt85Percent) + "px");
+                    $("#aaDetailViewCanvas").css("width", (imageViewAt85Percent) + "px");
+                } else if (ui.value == 70) {
+                    $("#modItemImage").css("width", imageViewAt70Percent + "px");
+                    $("#aaDetailViewCanvas").css("width", imageViewAt70Percent + "px");
+                } else if (ui.value == 55) {
+                    $("#modItemImage").css("width", imageViewAt55Percent + "px");
+                    $("#aaDetailViewCanvas").css("width", imageViewAt55Percent + "px");
+                } else if (ui.value == 40) {
+                    $("#modItemImage").css("width", imageViewAt40Percent + "px");
+                    $("#aaDetailViewCanvas").css("width", imageViewAt40Percent + "px");
+                } else if (ui.value == 25) {
+                    $("#modItemImage").css("width", imageViewAt25Percent + "px");
+                    $("#aaDetailViewCanvas").css("width", imageViewAt25Percent + "px");
+                }
+            }
+        })
+     .slider("pips", {
+         rest: "label",
+         step: "15"
+     });
     });
 </script>
-
 <script>
     $(function () {
         $("#draggable").draggable();
     });
 </script>
-
 <script src="app/controllers/TileViewListController.js"></script>