ADAM / AIAHTML5

Commit ef914dffbb602b05dc17f9fc13aa11da73956b24

Authored by Nikita Kulshreshtha
1 parent 15856b94

AA zoom in progress

Inline Side-by-side
Showing 2 changed files with 307 additions and 169 deletions
400-SOURCECODE/AIAHTML5.Web/app/controllers/TileViewListController.js
  View file @ef914df
... ... @@ -150,6 +150,24 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
150 150 $scope.currentTitleFromJson = localStorage.getItem("currentViewTitle");
151 151 $("#modItemImage").attr('src', $rootScope.OpenItemImagePath);
152 152  
  153 +
  154 + $rootScope.ViewImageWidth = $("#modItemImage").width();
  155 + $scope.ViewImageWidth = $("#modItemImage").width();
  156 + $scope.ViewImageHeight = $("#modItemImage").height();
  157 +
  158 + $scope.relativeDimesion = 0;
  159 + $("#modItemImage").css("width", $rootScope.ViewImageWidth + "px");
  160 + //imageViewAt100Percent = $rootScope.ViewImageWidth;
  161 + //imageViewAt25Percent = $rootScope.ViewImageWidth * 0.25;
  162 + //imageViewAt40Percent = $rootScope.ViewImageWidth * 0.40;
  163 + //imageViewAt55Percent = $rootScope.ViewImageWidth * 0.55;
  164 + //imageViewAt70Percent = $rootScope.ViewImageWidth * 0.70;
  165 + //imageViewAt85Percent = $rootScope.ViewImageWidth * 0.85;
  166 +
  167 +
  168 +
  169 +
  170 +
153 171 //0.5 create canvas on the top of image so that I can draw a line over the canvas.
154 172 var canvas = document.createElement('canvas');
155 173 canvas.id = 'aaDetailViewCanvas';
... ... @@ -196,7 +214,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
196 214 $scope.imageHeight = this.height;
197 215 }
198 216  
199   -
  217 +
200 218  
201 219  
202 220 angular.element(document).ready(function (e) {
... ... @@ -234,8 +252,8 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
234 252 $scope.drawStaticPinsOnImage('aaDetailViewCanvas', value._PinId, value._PinX, value._PinY, value._HeadX, value._HeadY)
235 253 })
236 254  
237   -
238   -
  255 +
  256 +
239 257 //load search/vocab data
240 258 $rootScope.loadSearchData();
241 259 }
... ... @@ -458,7 +476,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
458 476 $scope.selectedSystemName = null;
459 477 if ($scope.isHidePinBtnClicked) {
460 478  
461   - // $scope.showAllPinsAfterHide($scope.aaPinData);
  479 + // $scope.showAllPinsAfterHide($scope.aaPinData);
462 480 $scope.showAllPinsAfterHide();
463 481 }
464 482 else {
... ... @@ -469,56 +487,55 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
469 487  
470 488 $scope.selectedSystemName = event.currentTarget.title;
471 489  
472   -
473   - // get termText info
474   - var promise = ModuleService.getTermTextDataForPin($scope.moduleName)
475   - .then(
476   - function (response) {
477 490  
478   - $scope.TermInfo = response.data.Terms.Term;
  491 + // get termText info
  492 + var promise = ModuleService.getTermTextDataForPin($scope.moduleName)
  493 + .then(
  494 + function (response) {
479 495  
480   - //on gettng all required data, draw pins
481   - if ($scope.aaPinData != null && $scope.aaPinData.length > 0) {
  496 + $scope.TermInfo = response.data.Terms.Term;
482 497  
483   - $scope.selectedSystemPinData = new jinqJs()
484   - .from($scope.aaPinData)
485   - .where("_BodySystemName == " + $scope.selectedSystemName)
486   - .select();
487   - if ($scope.isHidePinBtnClicked) {
488   - // $scope.showAllPinsAfterHide($scope.selectedSystemPinData);
489   - $scope.showAllPinsAfterHide();
  498 + //on gettng all required data, draw pins
  499 + if ($scope.aaPinData != null && $scope.aaPinData.length > 0) {
  500 +
  501 + $scope.selectedSystemPinData = new jinqJs()
  502 + .from($scope.aaPinData)
  503 + .where("_BodySystemName == " + $scope.selectedSystemName)
  504 + .select();
  505 + if ($scope.isHidePinBtnClicked) {
  506 + // $scope.showAllPinsAfterHide($scope.selectedSystemPinData);
  507 + $scope.showAllPinsAfterHide();
490 508  
491   - }
492   - else
493   - {
494   - //remove other system pins
495   - if ($scope.selectedSystemPinData != null && $scope.selectedSystemPinData.length > 0) {
  509 + }
  510 + else {
  511 + //remove other system pins
  512 + if ($scope.selectedSystemPinData != null && $scope.selectedSystemPinData.length > 0) {
496 513  
497   - angular.forEach($scope.aaPinData, function (aaPinDataValue, aaPinDataKey) {
  514 + angular.forEach($scope.aaPinData, function (aaPinDataValue, aaPinDataKey) {
498 515  
499   - if (aaPinDataValue._BodySystemName != $scope.selectedSystemName)
500   - $scope.removePin('aaDetailViewCanvas', aaPinDataValue._PinId);
501   - })
  516 + if (aaPinDataValue._BodySystemName != $scope.selectedSystemName)
  517 + $scope.removePin('aaDetailViewCanvas', aaPinDataValue._PinId);
  518 + })
502 519  
503   - angular.forEach($scope.selectedSystemPinData, function (value, key) {
  520 + angular.forEach($scope.selectedSystemPinData, function (value, key) {
504 521  
505 522  
506   - $scope.drawStaticPinsOnImage('aaDetailViewCanvas', value._PinId, value._PinX, value._PinY, value._HeadX, value._HeadY)
  523 + $scope.drawStaticPinsOnImage('aaDetailViewCanvas', value._PinId, value._PinX, value._PinY, value._HeadX, value._HeadY)
507 524  
508   - })
509   - //show annotation on first pin of the sysyem
510   - $scope.showAnnotation($scope.selectedSystemPinData, false, false, false);
511   - }
512   - }
  525 + })
  526 + //show annotation on first pin of the sysyem
  527 + $scope.showAnnotation($scope.selectedSystemPinData, false, false, false);
513 528 }
514   - },
515   - function (error) {
516   - // handle errors here
517   - console.log(' error: ' + error.statusText);
518   - }
519   - )
520   -
521   - }
  529 + }
  530 + }
  531 + },
  532 + function (error) {
  533 + // handle errors here
  534 + console.log(' error: ' + error.statusText);
  535 + }
  536 + )
  537 +
  538 + }
522 539 }
523 540  
524 541 $scope.showAnnotation = function (selectedPinData, isCtrlPressed, isPinClicked, isItemSearched) {
... ... @@ -540,53 +557,53 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
540 557  
541 558 $scope.GetAnnotationBasedOnActualTermNo(pinTermNumber);
542 559  
543   - if (isCtrlPressed) {
  560 + if (isCtrlPressed) {
544 561  
  562 + }
  563 + else {
  564 + if (isPinClicked || isItemSearched) {
  565 + var existingSpeechBubble = $("div[id*='speechBubble']");
  566 + for (var i = 0; i < existingSpeechBubble.length; i++) {
  567 + existingSpeechBubble[i].parentNode.removeChild(existingSpeechBubble[i]);
  568 +
  569 + //make all pin heads grey
  570 + var radial = $('#aaDetailViewCanvas').createGradient({
  571 + x1: 50, y1: 50,
  572 + x2: 50, y2: 50,
  573 + r1: 10, r2: 30,
  574 + c1: 'rgba(100, 50, 0,0)',
  575 + c2: 'rgb(216, 216, 216)'
  576 + });
  577 +
  578 +
  579 + $('#aaDetailViewCanvas').setLayers({
  580 + fillStyle: radial,
  581 + }).drawLayers();
545 582 }
546   - else {
547   - if (isPinClicked || isItemSearched) {
548   - var existingSpeechBubble = $("div[id*='speechBubble']");
549   - for (var i = 0; i < existingSpeechBubble.length; i++) {
550   - existingSpeechBubble[i].parentNode.removeChild(existingSpeechBubble[i]);
551   -
552   - //make all pin heads grey
553   - var radial = $('#aaDetailViewCanvas').createGradient({
554   - x1: 50, y1: 50,
555   - x2: 50, y2: 50,
556   - r1: 10, r2: 30,
557   - c1: 'rgba(100, 50, 0,0)',
558   - c2: 'rgb(216, 216, 216)'
559   - });
560   -
561   -
562   - $('#aaDetailViewCanvas').setLayers({
563   - fillStyle: radial,
564   - }).drawLayers();
565   - }
566   -
567   - var existingSpeechBubbleLine = $("div[id*='speechBubbleLine']");
568   - for (var i = 0; i < existingSpeechBubbleLine.length; i++) {
569   - existingSpeechBubbleLine[i].parentNode.removeChild(existingSpeechBubbleLine[i]);
570   - }
571   - var speechBubbleDraggedLine = $("div[id*='speechBubbleDraggedLine']");
572   - for (var i = 0; i < speechBubbleDraggedLine.length; i++) {
573   - speechBubbleDraggedLine[i].parentNode.removeChild(speechBubbleDraggedLine[i]);
574   - }
575   - }
  583 +
  584 + var existingSpeechBubbleLine = $("div[id*='speechBubbleLine']");
  585 + for (var i = 0; i < existingSpeechBubbleLine.length; i++) {
  586 + existingSpeechBubbleLine[i].parentNode.removeChild(existingSpeechBubbleLine[i]);
576 587 }
577   - if (pinDataWithFirstTermNumber.length > 1) {
578   - isSameTermWithMultiPin = true;
  588 + var speechBubbleDraggedLine = $("div[id*='speechBubbleDraggedLine']");
  589 + for (var i = 0; i < speechBubbleDraggedLine.length; i++) {
  590 + speechBubbleDraggedLine[i].parentNode.removeChild(speechBubbleDraggedLine[i]);
579 591 }
  592 + }
  593 + }
  594 + if (pinDataWithFirstTermNumber.length > 1) {
  595 + isSameTermWithMultiPin = true;
  596 + }
  597 +
  598 + angular.forEach(pinDataWithFirstTermNumber, function (value, key) {
  599 + $scope.selectedPin.push(value._PinId);
  600 + var headX = (parseInt(value._HeadX));
  601 + var headY = (parseInt(value._HeadY));
  602 + $scope.createSpeechBubble(parseInt(headX) + 10, parseInt(headY) + 10, value._PinId, isCtrlPressed, isPinClicked, isSameTermWithMultiPin);
  603 + })
  604 +
  605 +
580 606  
581   - angular.forEach(pinDataWithFirstTermNumber, function (value, key) {
582   - $scope.selectedPin.push(value._PinId);
583   - var headX = (parseInt(value._HeadX));
584   - var headY = (parseInt(value._HeadY));
585   - $scope.createSpeechBubble(parseInt(headX) + 10, parseInt(headY) + 10, value._PinId, isCtrlPressed, isPinClicked, isSameTermWithMultiPin);
586   - })
587   -
588   -
589   -
590 607 }
591 608  
592 609 $rootScope.isLoading = false;
... ... @@ -596,7 +613,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
596 613  
597 614 $scope.removeSpeechBubble = function () {
598 615  
599   -
  616 +
600 617 //clear speech bubbles
601 618 var speechBubbles = $("div[id*='speechBubble']");
602 619 if (speechBubbles != null || speechBubbles != undefined && speechBubbles.length > 0) {
... ... @@ -652,7 +669,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
652 669  
653 670 $scope.hideSpeechBubble = function () {
654 671  
655   -
  672 +
656 673 //clear speech bubbles
657 674 var speechBubbles = $("div[id*='speechBubble']");
658 675 if (speechBubbles != null || speechBubbles != undefined && speechBubbles.length > 0) {
... ... @@ -787,9 +804,9 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
787 804  
788 805 $('.common-drag').draggable(
789 806 {
790   -
  807 +
791 808 drag: function (evt) {
792   -
  809 +
793 810 var verticalScrollPosition = document.getElementById('canvasDiv').scrollTop;
794 811 var horizontlScrollPosition = document.getElementById('canvasDiv').scrollLeft;
795 812 var clickedSpeechBubbleId = $(this).attr("id");
... ... @@ -850,7 +867,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
850 867  
851 868  
852 869 $scope.angle = function (id, cx, cy, ex, ey, BoolValues) {
853   -
  870 +
854 871 var dy = ey - cy;
855 872 var dx = ex - cx;
856 873 var theta = 0;
... ... @@ -871,7 +888,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
871 888 var d = Math.sqrt((cx - ex) * (cx - ex) + (cy - ey) * (cy - ey));
872 889 var e = cy;
873 890 var f = cx;
874   -
  891 +
875 892 if (BoolValues == true) {
876 893 $("#speechBubbleDraggedLine" + id).css({ 'display': 'block', 'width': d + 'px', 'top': (e - 10) + 'px', 'left': (f - 5) + 'px', 'transform': 'rotate(' + theta + 'deg)', '-moz-transform': 'rotate(' + theta + 'deg)', '-webkit-transform': 'rotate(' + theta + 'deg)', 'transform-origin': '0% 0%' });
877 894 }
... ... @@ -936,25 +953,25 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
936 953 .from($scope.aaPinData)
937 954 .where("_PinId == " + pinID)
938 955 .select();
939   -
940   -
  956 +
  957 +
941 958 var pinTermNumber = pinData[0]._TermId;
942   -
  959 +
943 960 var pinWithSameTerm = new jinqJs()
944   -
  961 +
945 962 .from($scope.aaPinData)
946 963 .where("_TermId == " + pinTermNumber)
947 964 .select();
948   -
949   -
950   - if (pinWithSameTerm != undefined && pinWithSameTerm != null && pinWithSameTerm.length > 0) {
951   -
952   - for (var i = 0; i < pinWithSameTerm.length; i++) {
953   -
954   - $scope.clickedPins.push({ 'id': pinWithSameTerm[i]._PinId })
955   - }
956   -
957   - }
  965 +
  966 +
  967 + if (pinWithSameTerm != undefined && pinWithSameTerm != null && pinWithSameTerm.length > 0) {
  968 +
  969 + for (var i = 0; i < pinWithSameTerm.length; i++) {
  970 +
  971 + $scope.clickedPins.push({ 'id': pinWithSameTerm[i]._PinId })
  972 + }
  973 +
  974 + }
958 975  
959 976 var selectedPinData = new jinqJs()
960 977 .from($scope.aaPinData)
... ... @@ -977,14 +994,17 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
977 994 }
978 995  
979 996  
980   - $scope.removePin = function (canvasId,pinId) {
  997 + $scope.removePin = function (canvasId, pinId) {
981 998  
982   - var pinName = 'Pin_' + pinId;
983   - var pinArcName = 'PinArc_' + pinId;
984   - $('#' + canvasId).removeLayer(pinName).drawLayers();
985   - $('#' + canvasId).removeLayer(pinArcName).drawLayers();
  999 + // var pinName = 'Pin_' + pinId;
  1000 + // var pinArcName = 'PinArc_' + pinId;
  1001 + // $('#' + canvasId).removeLayer(pinName).drawLayers();
  1002 + // $('#' + canvasId).removeLayer(pinArcName).drawLayers();
986 1003  
987   - $scope.removeSpeechBubble();
  1004 + // $scope.removeSpeechBubble();
  1005 +
  1006 + $rootScope.isSliderChanged = true;
  1007 + $('#aaDetailViewCanvas').removeLayers();
988 1008 }
989 1009  
990 1010 $rootScope.$on('annotationToolEvent', function (event, data) {
... ... @@ -1045,13 +1065,13 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
1045 1065 console.log(' error: ' + error.statusText);
1046 1066 }
1047 1067 )
1048   -
  1068 +
1049 1069 }
1050 1070  
1051 1071  
1052 1072 $scope.GetAnnotationBasedOnActualTermNo = function (actualTermNo) {
1053 1073  
1054   -
  1074 +
1055 1075 var languageArray = $rootScope.lexiconLanguageArray;
1056 1076  
1057 1077 if ($scope.AAPinTermData != null || $scope.AAPinTermData != undefined) {
... ... @@ -1062,30 +1082,30 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
1062 1082 .select();
1063 1083  
1064 1084 if ($scope.matchedTermNoData != null || $scope.matchedTermNoData != undefined) {
1065   -
  1085 +
1066 1086 for (var j = 0; j <= languageArray.length - 1; j++) {
1067   -
  1087 +
1068 1088 $scope.matchedLanguageTermNoData = new jinqJs()
1069 1089 .from($scope.matchedTermNoData)
1070 1090 .where('_LanguageId == ' + languageArray[j].id)
1071 1091 .select();
1072 1092  
1073   - var termText = $scope.matchedLanguageTermNoData[0]._TermText;
  1093 + var termText = $scope.matchedLanguageTermNoData[0]._TermText;
1074 1094  
1075 1095 $scope.MultiLanguageAnnationArray.push(termText);
1076   -
  1096 +
1077 1097  
1078 1098 };
1079 1099  
1080   -
1081 1100  
1082   - }
1083   -
  1101 +
1084 1102 }
  1103 +
1085 1104 }
  1105 + }
  1106 +
  1107 +
1086 1108  
1087   -
1088   -
1089 1109  
1090 1110  
1091 1111 $scope.hidePins = function () {
... ... @@ -1102,14 +1122,14 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
1102 1122 var pinArcName = 'PinArc_' + aaPinDataValue._PinId;
1103 1123  
1104 1124 $('#aaDetailViewCanvas').setLayer(pinName, {
1105   - visible: false // set to true instead to show the layer again
  1125 + visible: false // set to true instead to show the layer again
1106 1126 }).drawLayers();
1107 1127  
1108 1128 $('#aaDetailViewCanvas').setLayer(pinArcName, {
1109 1129 visible: false // set to true instead to show the layer again
1110 1130 }).drawLayers();
1111 1131 })
1112   -
  1132 +
1113 1133 $rootScope.isLoading = false;
1114 1134 $('#spinner').css('visibility', 'hidden');
1115 1135 }
... ... @@ -1153,7 +1173,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
1153 1173 $scope.showSpeechBubble();
1154 1174 };
1155 1175  
1156   -
  1176 +
1157 1177 $scope.showSystemPins = function (seletedSystemPinData, isShowSelectedPins) {
1158 1178  
1159 1179 if (isShowSelectedPins) {
... ... @@ -1165,23 +1185,23 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
1165 1185 .where('_PinId != ' + value.id)
1166 1186 .select();
1167 1187 })
1168   - angular.forEach(seletedSystemPinData, function (aaPinDataValue, aaPinDataKey) {
  1188 + angular.forEach(seletedSystemPinData, function (aaPinDataValue, aaPinDataKey) {
1169 1189  
1170   - // if (aaPinDataValue._PinId != value.id) {
1171   - var pinName = 'Pin_' + aaPinDataValue._PinId;
1172   - var pinArcName = 'PinArc_' + aaPinDataValue._PinId;
  1190 + // if (aaPinDataValue._PinId != value.id) {
  1191 + var pinName = 'Pin_' + aaPinDataValue._PinId;
  1192 + var pinArcName = 'PinArc_' + aaPinDataValue._PinId;
1173 1193  
1174   - $('#aaDetailViewCanvas').setLayer(pinName, {
1175   - visible: false // set to true instead to show the layer again
1176   - }).drawLayers();
  1194 + $('#aaDetailViewCanvas').setLayer(pinName, {
  1195 + visible: false // set to true instead to show the layer again
  1196 + }).drawLayers();
1177 1197  
1178   - $('#aaDetailViewCanvas').setLayer(pinArcName, {
1179   - visible: false // set to true instead to show the layer again
1180   - }).drawLayers();
1181   - // }
1182   - })
  1198 + $('#aaDetailViewCanvas').setLayer(pinArcName, {
  1199 + visible: false // set to true instead to show the layer again
  1200 + }).drawLayers();
  1201 + // }
  1202 + })
1183 1203  
1184   - // })
  1204 + // })
1185 1205 $scope.clickedPins = [];
1186 1206 }
1187 1207  
... ... @@ -1210,7 +1230,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
1210 1230 $scope.showItemsForSearch = function () {
1211 1231 console.log('showItemsForSearch is called');
1212 1232 //this check is for log only because we are writing length so need to check if its not null or undefined
1213   -
  1233 +
1214 1234  
1215 1235 $timeout(function () {
1216 1236 if (($scope.AAPinTermData != null || $scope.AAPinTermData != undefined) && ($scope.AAPinTermData.length > 0)) {
... ... @@ -1297,8 +1317,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
1297 1317 $("#" + $rootScope.annotationArray[i].speechBubbleLineId).css("display", "none");
1298 1318 }
1299 1319 }
1300   - else
1301   - {
  1320 + else {
1302 1321 $rootScope.isShowHideButtonClicked = true;
1303 1322 for (var i = 0; i <= $rootScope.annotationArray.length - 1; i++) {
1304 1323 $("#" + $rootScope.annotationArray[i].speechBuubleId).css("display", "block");
... ... @@ -1365,10 +1384,145 @@ function showHideAnnotation(event) {
1365 1384 }
1366 1385  
1367 1386 function showSelectedPins(event) {
1368   -
  1387 +
1369 1388 console.log('showSelectedPins is called')
1370 1389 var scope = angular.element(document.getElementById("aaDetailPageDiv")).scope();
1371 1390 scope.$apply(function () {
1372 1391 scope.showSelectedPins(event);
1373 1392 });
1374   -}
1375 1393 \ No newline at end of file
  1394 +}
  1395 +
  1396 +function removePinOnZoom(scope) {
  1397 + debugger;
  1398 + $(".common-drag").remove();
  1399 + $(".commonDot").remove();
  1400 + $(".commonDraggedLine").remove();
  1401 + var radial = $('#aaDetailViewCanvas').createGradient({
  1402 + x1: 50, y1: 50,
  1403 + x2: 50, y2: 50,
  1404 + r1: 10, r2: 30,
  1405 + c1: 'rgba(100, 50, 0,0)',
  1406 + c2: 'rgb(216, 216, 216)'
  1407 + });
  1408 + $('#aaDetailViewCanvas').setLayers({
  1409 + fillStyle: radial,
  1410 + }).drawLayers();
  1411 + // var scope = angular.element(document.getElementById("aaDetailPageDiv")).scope();
  1412 + //scope.$apply(function () {
  1413 + scope.removePin();
  1414 + scope.showAllPins();
  1415 + //});
  1416 +}
  1417 +
  1418 +//var imageViewAt25Percent = 0.0;
  1419 +//var imageViewAt40Percent = 0.0;
  1420 +//var imageViewAt55Percent = 0.0;
  1421 +//var imageViewAt70Percent = 0.0;
  1422 +//var imageViewAt70Percent = 0.0;
  1423 +//var imageViewAt85Percent = 0.0;
  1424 +//var imageViewAt100Percent = 0.0;
  1425 +var sliderVal = 0.0;
  1426 +$(document).ready(function () {
  1427 + $(".slider").slider({
  1428 + min: 25,
  1429 + max: 100,
  1430 + value: 100,
  1431 + range: "min",
  1432 + orientation: "vertical",
  1433 + slide: function (event, ui) {
  1434 +
  1435 + sliderVal = ui.value;
  1436 +
  1437 + var scope = angular.element(document.getElementById("aaDetailPageDiv")).scope();
  1438 + scope.$apply(function () {
  1439 + // scope.showSelectedSystemPins(event);
  1440 + var relativeWidth = 0;
  1441 + var relativeHeight = 0;
  1442 + if (ui.value == 100) {
  1443 + relativeWidth = scope.ViewImageWidth;
  1444 + relativeHeight = scope.ViewImageHeight
  1445 +
  1446 + }
  1447 + else if (ui.value == 85) {
  1448 + relativeWidth = scope.ViewImageWidth * 0.85;
  1449 + relativeHeight = scope.ViewImageHeight * 0.85;
  1450 +
  1451 + } else if (ui.value == 70) {
  1452 + relativeWidth = scope.ViewImageWidth * 0.70;
  1453 + relativeHeight = scope.ViewImageHeight * 0.70;
  1454 +
  1455 + } else if (ui.value == 55) {
  1456 +
  1457 + relativeWidth = scope.ViewImageWidth * 0.55;
  1458 + relativeHeight = scope.ViewImageHeight * 0.55;
  1459 +
  1460 +
  1461 + } else if (ui.value == 40) {
  1462 +
  1463 + relativeWidth = scope.ViewImageWidth * 0.40;
  1464 + relativeHeight = scope.ViewImageHeight * 0.40;
  1465 +
  1466 + } else if (ui.value == 25) {
  1467 +
  1468 + relativeWidth = scope.ViewImageWidth * 0.25;
  1469 + relativeHeight = scope.ViewImageHeight * 0.25;
  1470 +
  1471 +
  1472 + }
  1473 +
  1474 + console.log('ui.value= '+ui.value+' ,relativeWidth= ' + relativeWidth + ',relativeHeight= ' + relativeHeight)
  1475 + if (ui.value == 25 || ui.value == 40 || ui.value == 55 || ui.value == 70 || ui.value == 85 || ui.value == 100) {
  1476 + $("#modItemImage").css("width", relativeWidth + "px");
  1477 + $("#modItemImage").css("height", relativeHeight + "px");
  1478 + $("#aaDetailViewCanvas").css("width", relativeWidth + "px");
  1479 + $("#modItemImage").css("height", relativeHeight + "px");
  1480 + removePinOnZoom(scope);
  1481 + }
  1482 + //if (ui.value == 100) {
  1483 +
  1484 + // $("#modItemImage").css("width", imageViewAt100Percent + "px");
  1485 + // $("#modItemImage").css("height", imageViewAt100Percent + "px");
  1486 + // $("#aaDetailViewCanvas").css("width", imageViewAt100Percent + "px");
  1487 + // $("#modItemImage").css("height", imageViewAt100Percent + "px");
  1488 + //}
  1489 + //else if (ui.value == 85) {
  1490 +
  1491 + // $("#modItemImage").css("width", imageViewAt85Percent + "px");
  1492 + // $("#modItemImage").css("height", imageViewAt85Percent + "px");
  1493 + // $("#aaDetailViewCanvas").css("width", imageViewAt85Percent + "px");
  1494 + // $("#modItemImage").css("height", imageViewAt85Percent + "px");
  1495 + //} else if (ui.value == 70) {
  1496 +
  1497 + // $("#modItemImage").css("width", imageViewAt70Percent + "px");
  1498 + // $("#modItemImage").css("height", imageViewAt70Percent + "px");
  1499 + // $("#aaDetailViewCanvas").css("width", imageViewAt70Percent + "px");
  1500 + // $("#modItemImage").css("height", imageViewAt70Percent + "px");
  1501 + //} else if (ui.value == 55) {
  1502 +
  1503 + // $("#modItemImage").css("width", imageViewAt55Percent + "px");
  1504 + // $("#modItemImage").css("height", imageViewAt55Percent + "px");
  1505 + // $("#aaDetailViewCanvas").css("width", imageViewAt100Percent + "px");
  1506 + // $("#modItemImage").css("height", imageViewAt100Percent + "px");
  1507 +
  1508 + //} else if (ui.value == 40) {
  1509 +
  1510 + // $("#modItemImage").css("width", imageViewAt100Percent + "px");
  1511 + // $("#modItemImage").css("height", imageViewAt100Percent + "px");
  1512 + // $("#aaDetailViewCanvas").css("width", imageViewAt100Percent + "px");
  1513 + // $("#modItemImage").css("height", imageViewAt100Percent + "px");
  1514 +
  1515 + //} else if (ui.value == 25) {
  1516 +
  1517 + // $("#modItemImage").css("width", imageViewAt100Percent + "px");
  1518 + // $("#modItemImage").css("height", imageViewAt100Percent + "px");
  1519 + // $("#aaDetailViewCanvas").css("width", imageViewAt100Percent + "px");
  1520 + // $("#modItemImage").css("height", imageViewAt100Percent + "px");
  1521 + //}
  1522 + });
  1523 + }
  1524 + })
  1525 + .slider("pips", {
  1526 + rest: "label",
  1527 + step: "15"
  1528 + });
  1529 +});
1376 1530 \ No newline at end of file
... ...
400-SOURCECODE/AIAHTML5.Web/app/views/aa/atlas-anatomy-detail.html
  View file @ef914df
... ... @@ -29,7 +29,7 @@
29 29 <div class="tools pull-left" style="top:44px;">
30 30 <div class="toggle-icon toggleBar toggleHeadingButton" data-toggle="tooltip" data-placement="top" title="Show/Hide Sidebar"></div>
31 31 <div class="">
32   - <div class="col-sm-6" title="Hide Pins"><button onclick="hidePins(event)" class="btn btn-black btn-sm" > <img src="../../../content/images/aa/LeftMenu/hide-pin.png" alt="" title=""></button> </div>
  32 + <div class="col-sm-6" title="Hide Pins"><button onclick="hidePins(event)" class="btn btn-black btn-sm"> <img src="../../../content/images/aa/LeftMenu/hide-pin.png" alt="" title=""></button> </div>
33 33 <div class="col-sm-6" title="Show Selected Pins"><button class="btn btn-black btn-sm pull-right" onclick="showSelectedPins(event)"><img src="../../../content/images/aa/LeftMenu/draw-pin.png" alt="" title=""></button></div>
34 34 <div class="col-sm-6" title="Show All Pins in System(s)"><button class="btn btn-primary btn-sm marginTop5" onclick="showAllPins(event)"><img src="../../../content/images/aa/LeftMenu/all-pin.png" alt="" title=""></button></div>
35 35 <div class="col-sm-6" title="Select System">
... ... @@ -107,7 +107,7 @@
107 107  
108 108  
109 109 <div class="btn-group open" id="da-body-nav">
110   - <button id="navigatorBtn" type="button" style="padding:0px 0px 10px 1px !important;background-color:rgba(255,255,255,0.0); border:none;" class="btn btn-primary dropdown-toggle btn-sm" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
  110 + <button id="navigatorBtn" type="button" style="padding:0px 0px 10px 1px !important;background-color:rgba(255,255,255,0.0); border:none;" class="btn btn-primary dropdown-toggle btn-sm" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
111 111 <img src="~/../content/images/DA/navigator-view.png" style="height:30px; width:50px" />
112 112 </button>
113 113  
... ... @@ -131,17 +131,17 @@
131 131 <div class="container-fluid">
132 132 <div class="row">
133 133  
134   - <div class=" col-sm-12 img-thumbnail" id="canvasDiv" style="height: 478px; overflow: scroll;">
  134 + <div class=" col-sm-12 img-thumbnail" id="canvasDiv" style="height: 478px; overflow: scroll;">
135 135 <canvas id="canvasPaint" ng-click="FreeStylePaint($event)" width="2277" height="3248" class="canvas-annotationStyle1"></canvas>
136 136 <canvas id="canvas" ng-click="onDrawingCanvasClick($event)" width="2277" height="3248" class="canvas-annotationStyle"></canvas>
137 137  
138   - <img id="modItemImage" alt="" title="" style="left:0px;top:0px;position:absolute">
139   - <!--<div class="clearfix">
  138 + <img id="modItemImage" alt="" title="" style="left:0px;top:0px;position:absolute">
  139 + <!--<div class="clearfix">
140 140  
141   - <img id="modItemImage" ng-init="alert('hi')" alt="" title="" class="img-responsive">
142   - </div>
143   - <!--<div class="col-sm-1 img-thumbnail pull-right" align="center"><img src="../../content/images/1000x600.jpg" alt="" title="" class="img-responsive"></div>
144   - <div class="clearfix"></div>-->
  141 + <img id="modItemImage" ng-init="alert('hi')" alt="" title="" class="img-responsive">
  142 + </div>
  143 + <!--<div class="col-sm-1 img-thumbnail pull-right" align="center"><img src="../../content/images/1000x600.jpg" alt="" title="" class="img-responsive"></div>
  144 + <div class="clearfix"></div>-->
145 145 </div>
146 146 </div>
147 147 </div>
... ... @@ -163,23 +163,7 @@
163 163 $('[data-toggle="tooltip"]').tooltip();
164 164 });
165 165 </script>
166   -<script src="js/jquery-ui-slider-pips.js"></script>
167   -<script>
168   - $(".slider")
169   -
170   - .slider({
171   - min: 25,
172   - max: 100,
173   - value: 100,
174   - range: "min",
175   - orientation: "vertical"
176   - })
177   -
178   - .slider("pips", {
179   - rest: "label",
180   - step: "15"
181   - });
182   -</script>
  166 +<script src="libs/jquery/jquery_plugin/slider-pips/jquery-ui-slider-pips.js"></script>
183 167  
184 168 <script>
185 169 $(function () {
... ...