ADAM / AIAHTML5

Commit 1ba58f4028ea04848de8df259c6f9486f0d1de44

Authored by unknown
1 parent 7c05a26c

Implementing Zoom functionality for Atlas Anatomy

Inline Side-by-side
Showing 2 changed files with 60 additions and 21 deletions
400-SOURCECODE/AIAHTML5.Web/app/controllers/TileViewListController.js
  View file @1ba58f4
... ... @@ -81,6 +81,8 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
81 81 $location.url('/module-item-view');
82 82 }
83 83  
  84 +
  85 +
84 86 $scope.openModuleItem = function () {
85 87 var jsContentURL;
86 88 var moduleItemViewDivId;
... ... @@ -143,6 +145,16 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
143 145  
144 146 $scope.currentTitleFromJson = localStorage.getItem("currentViewTitle");
145 147 $("#modItemImage").attr('src', $rootScope.OpenItemImagePath);
  148 +
  149 + $rootScope.ViewImageWidth = $("#modItemImage").width();
  150 + $("#modItemImage").css("width", $rootScope.ViewImageWidth + "px");
  151 + imageViewAt100Percent = $rootScope.ViewImageWidth;
  152 + imageViewAt25Percent = $rootScope.ViewImageWidth * 0.25;
  153 + imageViewAt40Percent = $rootScope.ViewImageWidth * 0.40;
  154 + imageViewAt55Percent = $rootScope.ViewImageWidth * 0.55;
  155 + imageViewAt70Percent = $rootScope.ViewImageWidth * 0.70;
  156 + imageViewAt85Percent = $rootScope.ViewImageWidth * 0.85;
  157 +
146 158  
147 159 //0.5 create canvas on the top of image so that I can draw a line over the canvas.
148 160 var canvas = document.createElement('canvas');
... ... @@ -152,16 +164,18 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
152 164 canvas.style.left = '0px';
153 165 canvas.style.top = '0px';
154 166 canvas.style.position = "absolute";
155   -
  167 + canvas.style.width = $rootScope.ViewImageWidth+ "px";
156 168 $("#imageDiv").append(canvas);
157 169 $scope.context = canvas.getContext("2d")
158   -
159 170 //6. Show all pins on AA opened item
  171 + // $("#aaDetailViewCanvas").<img id="modItemImage" alt="" title="" style="left:0px;top:0px;position:absolute">
160 172 $scope.showAllPins();
  173 +
161 174 }
162 175 }, 1050);
163 176 }
164 177  
  178 +
165 179 function loadFailure() {
166 180 console.log('unable to load opened module ietem');
167 181 return true;
... ... @@ -885,9 +899,6 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
885 899 else {
886 900 $("#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%' });
887 901 }
888   -
889   -
890   -
891 902 }
892 903  
893 904  
... ... @@ -922,6 +933,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
922 933  
923 934 click: function (clickedPin) {
924 935  
  936 +
925 937 //change the head color to green
926 938 var radialAfterClick = $('#aaDetailViewCanvas').createGradient({
927 939 x1: 50, y1: 50,
... ...
400-SOURCECODE/AIAHTML5.Web/app/views/aa/atlas-anatomy-detail.html
  View file @1ba58f4
... ... @@ -131,28 +131,55 @@
131 131 $('[data-toggle="tooltip"]').tooltip();
132 132 });
133 133 </script>
134   -<script src="js/jquery-ui-slider-pips.js"></script>
135   -<script>
136   - $(".slider")
137   -
138   - .slider({
139   - min: 25,
140   - max: 100,
141   - value: 100,
142   - range: "min",
143   - orientation: "vertical"
144   - })
145 134  
146   - .slider("pips", {
147   - rest: "label",
148   - step: "15"
  135 +<script src="libs/jquery/jquery_plugin/slider-pips/jquery-ui-slider-pips.js"></script>
  136 +<script>
  137 + var imageViewAt25Percent = 0.0;
  138 + var imageViewAt40Percent = 0.0;
  139 + var imageViewAt55Percent = 0.0;
  140 + var imageViewAt70Percent = 0.0;
  141 + var imageViewAt70Percent = 0.0;
  142 + var imageViewAt85Percent = 0.0;
  143 + var imageViewAt100Percent = 0.0;
  144 + $(document).ready(function () {
  145 + $(".slider").slider({
  146 + min: 25,
  147 + max: 100,
  148 + value: 100,
  149 + range: "min",
  150 + orientation: "vertical",
  151 + slide: function (event, ui) {
  152 + if (ui.value == 100) {
  153 + $("#modItemImage").css("width", imageViewAt100Percent + "px");
  154 + $("#aaDetailViewCanvas").css("width", imageViewAt100Percent + "px");
  155 + }
  156 + else if (ui.value == 85) {
  157 + $("#modItemImage").css("width", (imageViewAt85Percent) + "px");
  158 + $("#aaDetailViewCanvas").css("width", (imageViewAt85Percent) + "px");
  159 + } else if (ui.value == 70) {
  160 + $("#modItemImage").css("width", imageViewAt70Percent + "px");
  161 + $("#aaDetailViewCanvas").css("width", imageViewAt70Percent + "px");
  162 + } else if (ui.value == 55) {
  163 + $("#modItemImage").css("width", imageViewAt55Percent + "px");
  164 + $("#aaDetailViewCanvas").css("width", imageViewAt55Percent + "px");
  165 + } else if (ui.value == 40) {
  166 + $("#modItemImage").css("width", imageViewAt40Percent + "px");
  167 + $("#aaDetailViewCanvas").css("width", imageViewAt40Percent + "px");
  168 + } else if (ui.value == 25) {
  169 + $("#modItemImage").css("width", imageViewAt25Percent + "px");
  170 + $("#aaDetailViewCanvas").css("width", imageViewAt25Percent + "px");
  171 + }
  172 + }
  173 + })
  174 + .slider("pips", {
  175 + rest: "label",
  176 + step: "15"
  177 + });
149 178 });
150 179 </script>
151   -
152 180 <script>
153 181 $(function () {
154 182 $("#draggable").draggable();
155 183 });
156 184 </script>
157   -
158 185 <script src="app/controllers/TileViewListController.js"></script>
... ...