ADAM / AIAHTML5

Commit 7f908aa1c91087eff861727323a620dd505871e7

Authored by Nikita Kulshreshtha
2 parents 71c35d32 3374c186

Merge branch 'AAZoom5Merge' into Develop

Inline Side-by-side
Showing 2 changed files with 491 additions and 254 deletions
400-SOURCECODE/AIAHTML5.Web/app/controllers/TileViewListController.js
  View file @7f908aa
... ... @@ -26,7 +26,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
26 26 $rootScope.speechBubbleDimaensions = [];
27 27 $scope.runningSearchWorkers = [];
28 28 $scope.clickedPins = [];
29   -
  29 + $scope.sliderPercentValue = 1;
30 30 $scope.query = {
31 31 selectedbodyregion: '',
32 32 selectedbodysystem: '',
... ... @@ -76,6 +76,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
76 76 $rootScope.imageName = $rootScope.OpenedTileData[3];
77 77 $rootScope.bodySystemName = $rootScope.OpenedTileData[2];
78 78 $rootScope.OpenItemImagePath = "../../../content/images/aa/images/" + $rootScope.OpenedTileData[3];
  79 + $scope.OpenItemImagePath = "../../../content/images/aa/images/" + $rootScope.OpenedTileData[3];
79 80  
80 81 //3. set opened module item title
81 82 localStorage.setItem("currentViewTitle", $rootScope.OpenedTileData[6]);
... ... @@ -150,15 +151,29 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
150 151 $scope.currentTitleFromJson = localStorage.getItem("currentViewTitle");
151 152 $("#modItemImage").attr('src', $rootScope.OpenItemImagePath);
152 153  
  154 +
  155 + $rootScope.ViewImageWidth = $("#modItemImage").width();
  156 + $scope.ViewImageWidth = $("#modItemImage").width();
  157 + $scope.ViewImageHeight = $("#modItemImage").height();
  158 +
  159 + $scope.relativeDimesion = 0;
  160 + $("#modItemImage").css("width", $rootScope.ViewImageWidth + "px");
  161 +
  162 +
153 163 //0.5 create canvas on the top of image so that I can draw a line over the canvas.
154 164 var canvas = document.createElement('canvas');
155 165 canvas.id = 'aaDetailViewCanvas';
  166 + canvas.className = '.aaCanvas'
156 167 canvas.height = parseInt(($scope.imageHeight));
157 168 canvas.width = parseInt($scope.imageWidth);
158 169 canvas.style.left = '0px';
159 170 canvas.style.top = '0px';
160 171 canvas.style.position = "absolute";
161   -
  172 + //canvas.addEventListener('click', function () {
  173 + // alert('canvas clicked');
  174 + // var clickedPint = $scope.getMousePos(event);
  175 + // alert('x: ' + clickedPint.x + ', y:' + clickedPint.y);
  176 + //})
162 177 $("#canvasDiv").append(canvas);
163 178 $scope.context = canvas.getContext("2d")
164 179  
... ... @@ -196,7 +211,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
196 211 $scope.imageHeight = this.height;
197 212 }
198 213  
199   -
  214 +
200 215  
201 216  
202 217 angular.element(document).ready(function (e) {
... ... @@ -208,7 +223,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
208 223 })
209 224  
210 225 $scope.showAllPins = function () {
211   -
  226 +
212 227 var promise = ModuleService.getPinDataForImage($rootScope.imageName)
213 228  
214 229 .then(
... ... @@ -234,8 +249,8 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
234 249 $scope.drawStaticPinsOnImage('aaDetailViewCanvas', value._PinId, value._PinX, value._PinY, value._HeadX, value._HeadY)
235 250 })
236 251  
237   -
238   -
  252 +
  253 +
239 254 //load search/vocab data
240 255 $rootScope.loadSearchData();
241 256 }
... ... @@ -458,7 +473,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
458 473 $scope.selectedSystemName = null;
459 474 if ($scope.isHidePinBtnClicked) {
460 475  
461   - // $scope.showAllPinsAfterHide($scope.aaPinData);
  476 + // $scope.showAllPinsAfterHide($scope.aaPinData);
462 477 $scope.showAllPinsAfterHide();
463 478 }
464 479 else {
... ... @@ -469,56 +484,55 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
469 484  
470 485 $scope.selectedSystemName = event.currentTarget.title;
471 486  
472   -
473   - // get termText info
474   - var promise = ModuleService.getTermTextDataForPin($scope.moduleName)
475   - .then(
476   - function (response) {
477 487  
478   - $scope.TermInfo = response.data.Terms.Term;
  488 + // get termText info
  489 + var promise = ModuleService.getTermTextDataForPin($scope.moduleName)
  490 + .then(
  491 + function (response) {
479 492  
480   - //on gettng all required data, draw pins
481   - if ($scope.aaPinData != null && $scope.aaPinData.length > 0) {
  493 + $scope.TermInfo = response.data.Terms.Term;
482 494  
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();
  495 + //on gettng all required data, draw pins
  496 + if ($scope.aaPinData != null && $scope.aaPinData.length > 0) {
490 497  
491   - }
492   - else
493   - {
494   - //remove other system pins
495   - if ($scope.selectedSystemPinData != null && $scope.selectedSystemPinData.length > 0) {
  498 + $scope.selectedSystemPinData = new jinqJs()
  499 + .from($scope.aaPinData)
  500 + .where("_BodySystemName == " + $scope.selectedSystemName)
  501 + .select();
  502 + if ($scope.isHidePinBtnClicked) {
  503 + // $scope.showAllPinsAfterHide($scope.selectedSystemPinData);
  504 + $scope.showAllPinsAfterHide();
  505 +
  506 + }
  507 + else {
  508 + //remove other system pins
  509 + if ($scope.selectedSystemPinData != null && $scope.selectedSystemPinData.length > 0) {
496 510  
497   - angular.forEach($scope.aaPinData, function (aaPinDataValue, aaPinDataKey) {
  511 + angular.forEach($scope.aaPinData, function (aaPinDataValue, aaPinDataKey) {
498 512  
499   - if (aaPinDataValue._BodySystemName != $scope.selectedSystemName)
500   - $scope.removePin('aaDetailViewCanvas', aaPinDataValue._PinId);
501   - })
  513 + if (aaPinDataValue._BodySystemName != $scope.selectedSystemName)
  514 + $scope.removePin('aaDetailViewCanvas', aaPinDataValue._PinId);
  515 + })
502 516  
503   - angular.forEach($scope.selectedSystemPinData, function (value, key) {
  517 + angular.forEach($scope.selectedSystemPinData, function (value, key) {
504 518  
505 519  
506   - $scope.drawStaticPinsOnImage('aaDetailViewCanvas', value._PinId, value._PinX, value._PinY, value._HeadX, value._HeadY)
  520 + $scope.drawStaticPinsOnImage('aaDetailViewCanvas', value._PinId, value._PinX, value._PinY, value._HeadX, value._HeadY)
507 521  
508   - })
509   - //show annotation on first pin of the sysyem
510   - $scope.showAnnotation($scope.selectedSystemPinData, false, false, false);
511   - }
512   - }
  522 + })
  523 + //show annotation on first pin of the sysyem
  524 + $scope.showAnnotation($scope.selectedSystemPinData, false, false, false);
513 525 }
514   - },
515   - function (error) {
516   - // handle errors here
517   - console.log(' error: ' + error.statusText);
518   - }
519   - )
520   -
521   - }
  526 + }
  527 + }
  528 + },
  529 + function (error) {
  530 + // handle errors here
  531 + console.log(' error: ' + error.statusText);
  532 + }
  533 + )
  534 +
  535 + }
522 536 }
523 537  
524 538 $scope.showAnnotation = function (selectedPinData, isCtrlPressed, isPinClicked, isItemSearched) {
... ... @@ -540,53 +554,53 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
540 554  
541 555 $scope.GetAnnotationBasedOnActualTermNo(pinTermNumber);
542 556  
543   - if (isCtrlPressed) {
  557 + if (isCtrlPressed) {
544 558  
  559 + }
  560 + else {
  561 + if (isPinClicked || isItemSearched) {
  562 + var existingSpeechBubble = $("div[id*='speechBubble']");
  563 + for (var i = 0; i < existingSpeechBubble.length; i++) {
  564 + existingSpeechBubble[i].parentNode.removeChild(existingSpeechBubble[i]);
  565 +
  566 + //make all pin heads grey
  567 + var radial = $('#aaDetailViewCanvas').createGradient({
  568 + x1: 50, y1: 50,
  569 + x2: 50, y2: 50,
  570 + r1: 10, r2: 30,
  571 + c1: 'rgba(100, 50, 0,0)',
  572 + c2: 'rgb(216, 216, 216)'
  573 + });
  574 +
  575 +
  576 + $('#aaDetailViewCanvas').setLayers({
  577 + fillStyle: radial,
  578 + }).drawLayers();
545 579 }
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   - }
  580 +
  581 + var existingSpeechBubbleLine = $("div[id*='speechBubbleLine']");
  582 + for (var i = 0; i < existingSpeechBubbleLine.length; i++) {
  583 + existingSpeechBubbleLine[i].parentNode.removeChild(existingSpeechBubbleLine[i]);
576 584 }
577   - if (pinDataWithFirstTermNumber.length > 1) {
578   - isSameTermWithMultiPin = true;
  585 + var speechBubbleDraggedLine = $("div[id*='speechBubbleDraggedLine']");
  586 + for (var i = 0; i < speechBubbleDraggedLine.length; i++) {
  587 + speechBubbleDraggedLine[i].parentNode.removeChild(speechBubbleDraggedLine[i]);
579 588 }
  589 + }
  590 + }
  591 + if (pinDataWithFirstTermNumber.length > 1) {
  592 + isSameTermWithMultiPin = true;
  593 + }
  594 +
  595 + angular.forEach(pinDataWithFirstTermNumber, function (value, key) {
  596 + $scope.selectedPin.push(value._PinId);
  597 + var headX = (parseInt(value._HeadX));
  598 + var headY = (parseInt(value._HeadY));
  599 + $scope.createSpeechBubble(parseInt(headX) + 10, parseInt(headY) + 10, value._PinId, isCtrlPressed, isPinClicked, isSameTermWithMultiPin);
  600 + })
  601 +
  602 +
580 603  
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 604 }
591 605  
592 606 $rootScope.isLoading = false;
... ... @@ -596,7 +610,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
596 610  
597 611 $scope.removeSpeechBubble = function () {
598 612  
599   -
  613 +
600 614 //clear speech bubbles
601 615 var speechBubbles = $("div[id*='speechBubble']");
602 616 if (speechBubbles != null || speechBubbles != undefined && speechBubbles.length > 0) {
... ... @@ -652,7 +666,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
652 666  
653 667 $scope.hideSpeechBubble = function () {
654 668  
655   -
  669 +
656 670 //clear speech bubbles
657 671 var speechBubbles = $("div[id*='speechBubble']");
658 672 if (speechBubbles != null || speechBubbles != undefined && speechBubbles.length > 0) {
... ... @@ -691,14 +705,17 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
691 705 $("#dot").css("visibility", "hidden");
692 706 var verticalScrollPosition = canvasDiv.scrollTop;
693 707 var horizontlScrollPosition = canvasDiv.scrollLeft;
694   - $scope.angle(x, y, evt.pageX + horizontlScrollPosition - $('#canvasDiv').offset().left, evt.pageY + verticalScrollPosition - $('#canvasDiv').offset().top, true);
  708 + $scope.angle(x * $scope.sliderPercentValue, y * $scope.sliderPercentValue, evt.pageX + horizontlScrollPosition - $('#canvasDiv').offset().left, evt.pageY + verticalScrollPosition - $('#canvasDiv').offset().top, true);
695 709 },
696 710 });
697 711  
698 712 }
699   -
  713 + $scope.sliderVal = 100;
700 714 $scope.createSpeechBubbleBasedOnAnnotationLength = function (x, y, PinId) {
701 715  
  716 + x = x * $scope.sliderPercentValue;
  717 + y = y * $scope.sliderPercentValue;
  718 +
702 719 var speechBubbleHTML = '<div id="speechBubbleLine' + PinId + '" style="position:absolute;height:15px;width:35px;display:none;z-index:10000;border-top:2px solid #000;transform:rotate(40deg);-moz-transform:rotate(40deg);-o-transform:rotate(40deg);-ms-transform:rotate(40deg);-webkit-transform:rotate(40deg);"></div>'
703 720 + '<div id="speechBubble' + PinId + '" class="common-drag" style="height:auto!important;z-index:10000;margin-left:25px;border:1px solid #000;padding:5px 10px;position:absolute;color:#fff;text-align:left;font-size:12px;background-color:#19100e;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;-o-border-radius:5px;-ms-border-radius:5px;font-weight:bold;">'
704 721 + '<span style="position:absolute;right:-3px;top:-4px;color:#ffffff;cursor:pointer;">'
... ... @@ -779,17 +796,22 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
779 796 $rootScope.speechBubbleDimaensions.push({ "currentX": x, "currentY": y, "id": PinId });
780 797 speechBubbleDims.push({ currentX: x, currentY: y });
781 798 document.getElementById('speechBubbleLine' + PinId + '').style.display = 'block';
782   - document.getElementById('speechBubbleLine' + PinId + '').style.left = ((speechBubbleDims[0].currentX - 45)) + 'px';
783   - document.getElementById('speechBubbleLine' + PinId + '').style.top = ((speechBubbleDims[0].currentY) - 20) + 'px';
  799 + document.getElementById('speechBubbleLine' + PinId + '').style.left = ((speechBubbleDims[0].currentX - 12)) + 'px';
  800 + if ($scope.sliderVal == 25) {
  801 + document.getElementById('speechBubbleLine' + PinId + '').style.top = ((speechBubbleDims[0].currentY + 5)) + 'px';
  802 + }
  803 + else
  804 + {
  805 + document.getElementById('speechBubbleLine' + PinId + '').style.top = ((speechBubbleDims[0].currentY)) + 'px';
  806 + }
784 807 document.getElementById('speechBubble' + PinId + '').style.display = 'block';
785   - document.getElementById('speechBubble' + PinId + '').style.left = (speechBubbleDims[0].currentX - 70) + 'px';
786   - document.getElementById('speechBubble' + PinId + '').style.top = (speechBubbleDims[0].currentY - 58) + 'px';
787   -
  808 + document.getElementById('speechBubble' + PinId + '').style.left = (speechBubbleDims[0].currentX - 4) + 'px';
  809 + document.getElementById('speechBubble' + PinId + '').style.top = (speechBubbleDims[0].currentY) + 'px';
788 810 $('.common-drag').draggable(
789 811 {
790   -
  812 +
791 813 drag: function (evt) {
792   -
  814 +
793 815 var verticalScrollPosition = document.getElementById('canvasDiv').scrollTop;
794 816 var horizontlScrollPosition = document.getElementById('canvasDiv').scrollLeft;
795 817 var clickedSpeechBubbleId = $(this).attr("id");
... ... @@ -850,7 +872,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
850 872  
851 873  
852 874 $scope.angle = function (id, cx, cy, ex, ey, BoolValues) {
853   -
  875 +
854 876 var dy = ey - cy;
855 877 var dx = ex - cx;
856 878 var theta = 0;
... ... @@ -871,9 +893,18 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
871 893 var d = Math.sqrt((cx - ex) * (cx - ex) + (cy - ey) * (cy - ey));
872 894 var e = cy;
873 895 var f = cx;
874   -
  896 +
875 897 if (BoolValues == true) {
876   - $("#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%' });
  898 + if ($scope.sliderVal == 40) {
  899 + $("#speechBubbleDraggedLine" + id).css({ 'display': 'block', 'width': d + 'px', 'top': (e - 5) + 'px', 'left': (f - 5) + 'px', 'transform': 'rotate(' + theta + 'deg)', '-moz-transform': 'rotate(' + theta + 'deg)', '-webkit-transform': 'rotate(' + theta + 'deg)', 'transform-origin': '0% 0%' });
  900 + }
  901 + else if ($scope.sliderVal == 25) {
  902 + $("#speechBubbleDraggedLine" + id).css({ 'display': 'block', 'width': d + 'px', 'top': (e - 2) + 'px', 'left': (f - 2) + 'px', 'transform': 'rotate(' + theta + 'deg)', '-moz-transform': 'rotate(' + theta + 'deg)', '-webkit-transform': 'rotate(' + theta + 'deg)', 'transform-origin': '0% 0%' });
  903 + }
  904 + else {
  905 + $("#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%' });
  906 + }
  907 +
877 908 }
878 909 else {
879 910 $("#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%' });
... ... @@ -886,105 +917,209 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
886 917  
887 918 $scope.drawStaticPinsOnImage = function (canvasId, PinId, offsetX1, offsetY1, x, y) {
888 919 $scope.clickedPins = [];
889   - var radial = $('#' + canvasId).createGradient({
890   - x1: 50, y1: 50,
891   - x2: 50, y2: 50,
892   - r1: 10, r2: 30,
893   - c1: 'rgba(100, 50, 0,0)',
894   - c2: 'rgb(216, 216, 216)'
895   - });
896   - $('#' + canvasId).drawLine({
897   -
898   - layer: true,
899   - name: "Pin_" + PinId,
900   - groups: ["Pin_" + PinId],
901   - strokeStyle: 'black',
902   - strokeWidth: 2,
903   - visible: true,
904   - x1: offsetX1, y1: offsetY1,
905   - x2: x, y2: y,
906   -
907   - }).drawArc({
908   - name: "PinArc_" + PinId,
909   - layer: true,
910   - groups: ["Pin_" + PinId],
911   - strokeStyle: 'grey',
912   - strokeWidth: 2,
913   - visible: true,
914   - fillStyle: radial,
915   - x: x, y: y,
916   - radius: 5,
917   -
918   - click: function (clickedPin) {
919   -
920   - //change the head color to green
921   - var radialAfterClick = $('#aaDetailViewCanvas').createGradient({
922   - x1: 50, y1: 50,
923   - x2: 50, y2: 50,
924   - r1: 10, r2: 30,
925   - c1: 'rgba(100, 50, 0,0)',
926   - c2: 'rgb(126, 187, 83)'
927   - });
  920 + // if ($scope.isSliderChange == true) {
  921 + console.log('isSliderrChange')
  922 + var radial = $('#' + canvasId).createGradient({
  923 + x1: 50, y1: 50,
  924 + x2: 50, y2: 50,
  925 + r1: 10, r2: 30,
  926 + c1: 'rgba(100, 50, 0,0)',
  927 + c2: 'rgb(216, 216, 216)'
  928 + });
  929 + $('#' + canvasId).drawLine({
  930 +
  931 + layer: true,
  932 + name: "Pin_" + PinId,
  933 + groups: ["Pin_" + PinId],
  934 + strokeStyle: '#565656',
  935 + strokeWidth: 2,
  936 + visible: true,
  937 + x1: offsetX1 * $scope.sliderPercentValue, y1: offsetY1 * $scope.sliderPercentValue,
  938 + x2: x * $scope.sliderPercentValue, y2: y * $scope.sliderPercentValue,
  939 +
928 940  
929   - clickedPin.fillStyle = radialAfterClick;
  941 + }).drawArc({
  942 + name: "PinArc_" + PinId,
  943 + layer: true,
  944 + groups: ["Pin_" + PinId],
  945 + strokeStyle: 'grey',
  946 + strokeWidth: 2,
  947 + visible: true,
  948 + fillStyle: radial,
  949 + x: x * $scope.sliderPercentValue, y: y * $scope.sliderPercentValue,
  950 + radius: 5 * $scope.sliderPercentValue,
930 951  
931   - var pinID = (clickedPin.name).substring(7, (clickedPin.name).length);
932   - // alert('pinId: ' + pinID);
933   - //showAnnotation();
  952 + click: function (clickedPin) {
  953 + // alert('pin clciked = ' + clickedPin.name)
  954 + //change the head color to green
  955 + var radialAfterClick = $('#aaDetailViewCanvas').createGradient({
  956 + x1: 50, y1: 50,
  957 + x2: 50, y2: 50,
  958 + r1: 10, r2: 30,
  959 + c1: 'rgba(100, 50, 0,0)',
  960 + c2: 'rgb(126, 187, 83)'
  961 + });
  962 +
  963 + clickedPin.fillStyle = radialAfterClick;
  964 +
  965 + var pinID = (clickedPin.name).substring(7, (clickedPin.name).length);
  966 + // alert('pinId: ' + pinID);
  967 + //showAnnotation();
  968 +
  969 + var pinData = new jinqJs()
  970 + .from($scope.aaPinData)
  971 + .where("_PinId == " + pinID)
  972 + .select();
  973 +
  974 +
  975 + var pinTermNumber = pinData[0]._TermId;
  976 +
  977 + var pinWithSameTerm = new jinqJs()
  978 +
  979 + .from($scope.aaPinData)
  980 + .where("_TermId == " + pinTermNumber)
  981 + .select();
  982 +
  983 +
  984 + if (pinWithSameTerm != undefined && pinWithSameTerm != null && pinWithSameTerm.length > 0) {
934 985  
935   - var pinData = new jinqJs()
936   - .from($scope.aaPinData)
937   - .where("_PinId == " + pinID)
938   - .select();
939   -
940   -
941   - var pinTermNumber = pinData[0]._TermId;
942   -
943   - var pinWithSameTerm = new jinqJs()
944   -
945   - .from($scope.aaPinData)
946   - .where("_TermId == " + pinTermNumber)
947   - .select();
948   -
949   -
950   - if (pinWithSameTerm != undefined && pinWithSameTerm != null && pinWithSameTerm.length > 0) {
951   -
952 986 for (var i = 0; i < pinWithSameTerm.length; i++) {
953   -
954   - $scope.clickedPins.push({ 'id': pinWithSameTerm[i]._PinId })
955   - }
956   -
957   - }
958 987  
959   - var selectedPinData = new jinqJs()
960   - .from($scope.aaPinData)
961   - .where("_PinId == " + pinID)
962   - .select();
963   - if (clickedPin.event.ctrlKey == true) {
964   - $scope.showAnnotation(selectedPinData, true, true, false);
  988 + $scope.clickedPins.push({ 'id': pinWithSameTerm[i]._PinId })
  989 + }
  990 +
  991 + }
  992 +
  993 + var selectedPinData = new jinqJs()
  994 + .from($scope.aaPinData)
  995 + .where("_PinId == " + pinID)
  996 + .select();
  997 + if (clickedPin.event.ctrlKey == true) {
  998 + $scope.showAnnotation(selectedPinData, true, true, false);
  999 +
  1000 + }
  1001 + else {
  1002 + $scope.showAnnotation(selectedPinData, false, true, false);
  1003 +
  1004 + }
965 1005  
966   - }
967   - else {
968   - $scope.showAnnotation(selectedPinData, false, true, false);
969 1006  
970 1007 }
971 1008  
  1009 + }).drawLayers();
  1010 + //}
  1011 + // else
  1012 + // {
  1013 + // var radial = $('#' + canvasId).createGradient({
  1014 + // x1: 50, y1: 50,
  1015 + // x2: 50, y2: 50,
  1016 + // r1: 10, r2: 30,
  1017 + // c1: 'rgba(100, 50, 0,0)',
  1018 + // c2: 'rgb(216, 216, 216)'
  1019 + // });
  1020 + // $('#' + canvasId).drawLine({
972 1021  
973   - }
  1022 + // layer: true,
  1023 + // name: "Pin_" + PinId,
  1024 + // groups: ["Pin_" + PinId],
  1025 + // strokeStyle: 'black',
  1026 + // strokeWidth: 2,
  1027 + // visible: true,
  1028 + // x1: offsetX1, y1: offsetY1,
  1029 + // x2: x, y2: y,
974 1030  
975   - }).drawLayers();
  1031 + // }).drawArc({
  1032 + // name: "PinArc_" + PinId,
  1033 + // layer: true,
  1034 + // groups: ["Pin_" + PinId],
  1035 + // strokeStyle: 'grey',
  1036 + // strokeWidth: 2,
  1037 + // visible: true,
  1038 + // fillStyle: radial,
  1039 + // x: x, y: y,
  1040 + // radius: 5,
  1041 +
  1042 + // click: function (clickedPin) {
  1043 + // alert('pin clciked = ' + clickedPin.name) //change the head color to green
  1044 + // var radialAfterClick = $('#aaDetailViewCanvas').createGradient({
  1045 + // x1: 50, y1: 50,
  1046 + // x2: 50, y2: 50,
  1047 + // r1: 10, r2: 30,
  1048 + // c1: 'rgba(100, 50, 0,0)',
  1049 + // c2: 'rgb(126, 187, 83)'
  1050 + // });
  1051 +
  1052 + // clickedPin.fillStyle = radialAfterClick;
  1053 +
  1054 + // var pinID = (clickedPin.name).substring(7, (clickedPin.name).length);
  1055 + // // alert('pinId: ' + pinID);
  1056 + // //showAnnotation();
  1057 +
  1058 + // var pinData = new jinqJs()
  1059 + // .from($scope.aaPinData)
  1060 + // .where("_PinId == " + pinID)
  1061 + // .select();
  1062 +
  1063 +
  1064 + // var pinTermNumber = pinData[0]._TermId;
  1065 +
  1066 + // var pinWithSameTerm = new jinqJs()
976 1067  
  1068 + // .from($scope.aaPinData)
  1069 + // .where("_TermId == " + pinTermNumber)
  1070 + // .select();
  1071 +
  1072 +
  1073 + // if (pinWithSameTerm != undefined && pinWithSameTerm != null && pinWithSameTerm.length > 0) {
  1074 +
  1075 + // for (var i = 0; i < pinWithSameTerm.length; i++) {
  1076 +
  1077 + // $scope.clickedPins.push({ 'id': pinWithSameTerm[i]._PinId })
  1078 + // }
  1079 +
  1080 + // }
  1081 +
  1082 + // var selectedPinData = new jinqJs()
  1083 + // .from($scope.aaPinData)
  1084 + // .where("_PinId == " + pinID)
  1085 + // .select();
  1086 + // if (clickedPin.event.ctrlKey == true) {
  1087 + // $scope.showAnnotation(selectedPinData, true, true, false);
  1088 +
  1089 + // }
  1090 + // else {
  1091 + // $scope.showAnnotation(selectedPinData, false, true, false);
  1092 +
  1093 + // }
  1094 +
  1095 +
  1096 + // }
  1097 +
  1098 + // }).drawLayers();
  1099 + //}
  1100 +
  1101 + }
  1102 +
  1103 +
  1104 + $scope.getMousePos = function (evt) {
  1105 +
  1106 + return {
  1107 + x: Math.round(evt.pageX - $('#canvasDiv').offset().left),
  1108 + y: Math.round(evt.pageY - $('#canvasDiv').offset().top)
  1109 + }
977 1110 }
978 1111  
  1112 + $scope.removePin = function (canvasId, pinId) {
979 1113  
980   - $scope.removePin = function (canvasId,pinId) {
  1114 + var pinName = 'Pin_' + pinId;
  1115 + var pinArcName = 'PinArc_' + pinId;
  1116 + $('#' + canvasId).removeLayer(pinName).drawLayers();
  1117 + $('#' + canvasId).removeLayer(pinArcName).drawLayers();
981 1118  
982   - var pinName = 'Pin_' + pinId;
983   - var pinArcName = 'PinArc_' + pinId;
984   - $('#' + canvasId).removeLayer(pinName).drawLayers();
985   - $('#' + canvasId).removeLayer(pinArcName).drawLayers();
  1119 + $scope.removeSpeechBubble();
986 1120  
987   - $scope.removeSpeechBubble();
  1121 + //$rootScope.isSliderChanged = true;
  1122 + //$('#aaDetailViewCanvas').removeLayers();
988 1123 }
989 1124  
990 1125 $rootScope.$on('annotationToolEvent', function (event, data) {
... ... @@ -1045,13 +1180,13 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
1045 1180 console.log(' error: ' + error.statusText);
1046 1181 }
1047 1182 )
1048   -
  1183 +
1049 1184 }
1050 1185  
1051 1186  
1052 1187 $scope.GetAnnotationBasedOnActualTermNo = function (actualTermNo) {
1053 1188  
1054   -
  1189 +
1055 1190 var languageArray = $rootScope.lexiconLanguageArray;
1056 1191  
1057 1192 if ($scope.AAPinTermData != null || $scope.AAPinTermData != undefined) {
... ... @@ -1062,30 +1197,30 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
1062 1197 .select();
1063 1198  
1064 1199 if ($scope.matchedTermNoData != null || $scope.matchedTermNoData != undefined) {
1065   -
  1200 +
1066 1201 for (var j = 0; j <= languageArray.length - 1; j++) {
1067   -
  1202 +
1068 1203 $scope.matchedLanguageTermNoData = new jinqJs()
1069 1204 .from($scope.matchedTermNoData)
1070 1205 .where('_LanguageId == ' + languageArray[j].id)
1071 1206 .select();
1072 1207  
1073   - var termText = $scope.matchedLanguageTermNoData[0]._TermText;
  1208 + var termText = $scope.matchedLanguageTermNoData[0]._TermText;
1074 1209  
1075 1210 $scope.MultiLanguageAnnationArray.push(termText);
1076   -
  1211 +
1077 1212  
1078 1213 };
1079 1214  
1080   -
1081 1215  
1082   - }
1083   -
  1216 +
1084 1217 }
  1218 +
1085 1219 }
  1220 + }
  1221 +
  1222 +
1086 1223  
1087   -
1088   -
1089 1224  
1090 1225  
1091 1226 $scope.hidePins = function () {
... ... @@ -1102,20 +1237,21 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
1102 1237 var pinArcName = 'PinArc_' + aaPinDataValue._PinId;
1103 1238  
1104 1239 $('#aaDetailViewCanvas').setLayer(pinName, {
1105   - visible: false // set to true instead to show the layer again
  1240 + visible: false // set to true instead to show the layer again
1106 1241 }).drawLayers();
1107 1242  
1108 1243 $('#aaDetailViewCanvas').setLayer(pinArcName, {
1109 1244 visible: false // set to true instead to show the layer again
1110 1245 }).drawLayers();
1111 1246 })
1112   -
  1247 +
1113 1248 $rootScope.isLoading = false;
1114 1249 $('#spinner').css('visibility', 'hidden');
1115 1250 }
1116 1251  
1117 1252 $scope.showAllPinsAfterHide = function (event) {
1118 1253  
  1254 +
1119 1255 $rootScope.isLoading = true;
1120 1256 $('#spinner').css('visibility', 'visible');
1121 1257  
... ... @@ -1133,27 +1269,28 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
1133 1269 $scope.showSpeechBubble();
1134 1270 };
1135 1271  
1136   -
  1272 +
1137 1273 $scope.showSelectedPins = function () {
  1274 +
  1275 + $rootScope.isLoading = true;
  1276 + $('#spinner').css('visibility', 'visible');
1138 1277  
1139   - $rootScope.isLoading = true;
1140   - $('#spinner').css('visibility', 'visible');
  1278 + $scope.isHidePinBtnClicked = false;
1141 1279  
1142   - $scope.isHidePinBtnClicked = false;
  1280 + if ($scope.selectedSystemName != null && $scope.selectedSystemName != undefined) {
1143 1281  
1144   - if ($scope.selectedSystemName != null && $scope.selectedSystemName != undefined) {
  1282 + $scope.showSystemPins($scope.selectedSystemPinData, true);
1145 1283  
1146   - $scope.showSystemPins($scope.selectedSystemPinData, true);
  1284 + }
  1285 + else {
  1286 + $scope.showSystemPins($scope.aaPinData, true);
1147 1287  
1148   - }
1149   - else {
1150   - $scope.showSystemPins($scope.aaPinData, true);
  1288 + }
  1289 + $scope.showSpeechBubble();
1151 1290  
1152   - }
1153   - $scope.showSpeechBubble();
1154 1291 };
1155 1292  
1156   -
  1293 +
1157 1294 $scope.showSystemPins = function (seletedSystemPinData, isShowSelectedPins) {
1158 1295  
1159 1296 if (isShowSelectedPins) {
... ... @@ -1181,23 +1318,23 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
1181 1318 // }
1182 1319 })
1183 1320  
1184   - angular.forEach(seletedSystemPinData, function (aaPinDataValue, aaPinDataKey) {
  1321 + angular.forEach(seletedSystemPinData, function (aaPinDataValue, aaPinDataKey) {
1185 1322  
1186   - // if (aaPinDataValue._PinId != value.id) {
1187   - var pinName = 'Pin_' + aaPinDataValue._PinId;
1188   - var pinArcName = 'PinArc_' + aaPinDataValue._PinId;
  1323 + // if (aaPinDataValue._PinId != value.id) {
  1324 + var pinName = 'Pin_' + aaPinDataValue._PinId;
  1325 + var pinArcName = 'PinArc_' + aaPinDataValue._PinId;
1189 1326  
1190   - $('#aaDetailViewCanvas').setLayer(pinName, {
1191   - visible: false // set to true instead to show the layer again
1192   - }).drawLayers();
  1327 + $('#aaDetailViewCanvas').setLayer(pinName, {
  1328 + visible: false // set to true instead to show the layer again
  1329 + }).drawLayers();
1193 1330  
1194   - $('#aaDetailViewCanvas').setLayer(pinArcName, {
1195   - visible: false // set to true instead to show the layer again
1196   - }).drawLayers();
1197   - // }
1198   - })
  1331 + $('#aaDetailViewCanvas').setLayer(pinArcName, {
  1332 + visible: false // set to true instead to show the layer again
  1333 + }).drawLayers();
  1334 + // }
  1335 + })
1199 1336  
1200   - // })
  1337 + // })
1201 1338 // $scope.clickedPins = [];
1202 1339 }
1203 1340  
... ... @@ -1226,7 +1363,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
1226 1363 $scope.showItemsForSearch = function () {
1227 1364 console.log('showItemsForSearch is called');
1228 1365 //this check is for log only because we are writing length so need to check if its not null or undefined
1229   -
  1366 +
1230 1367  
1231 1368 $timeout(function () {
1232 1369 if (($scope.AAPinTermData != null || $scope.AAPinTermData != undefined) && ($scope.AAPinTermData.length > 0)) {
... ... @@ -1289,6 +1426,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
1289 1426  
1290 1427 $scope.IsSearchVisible = false;
1291 1428 }
  1429 +
1292 1430 $rootScope.isShowHideButtonClicked = true;
1293 1431 $scope.ShowHideAnnotation = function () {
1294 1432 if ($rootScope.isShowHideButtonClicked == true) {
... ... @@ -1313,8 +1451,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
1313 1451 $("#" + $rootScope.annotationArray[i].speechBubbleLineId).css("display", "none");
1314 1452 }
1315 1453 }
1316   - else
1317   - {
  1454 + else {
1318 1455 $rootScope.isShowHideButtonClicked = true;
1319 1456 for (var i = 0; i <= $rootScope.annotationArray.length - 1; i++) {
1320 1457 $("#" + $rootScope.annotationArray[i].speechBuubleId).css("display", "block");
... ... @@ -1381,10 +1518,126 @@ function showHideAnnotation(event) {
1381 1518 }
1382 1519  
1383 1520 function showSelectedPins(event) {
1384   -
  1521 +
1385 1522 console.log('showSelectedPins is called')
1386 1523 var scope = angular.element(document.getElementById("aaDetailPageDiv")).scope();
1387 1524 scope.$apply(function () {
1388 1525 scope.showSelectedPins(event);
1389 1526 });
1390   -}
1391 1527 \ No newline at end of file
  1528 +}
  1529 +
  1530 +function onZoom(scope) {
  1531 +
  1532 + //$(".common-drag").remove();
  1533 + //$(".commonDot").remove();
  1534 + //$(".commonDraggedLine").remove();
  1535 + //var radial = $('#aaDetailViewCanvas').createGradient({
  1536 + // x1: 50, y1: 50,
  1537 + // x2: 50, y2: 50,
  1538 + // r1: 10, r2: 30,
  1539 + // c1: 'rgba(100, 50, 0,0)',
  1540 + // c2: 'rgb(216, 216, 216)'
  1541 + //});
  1542 + //$('#aaDetailViewCanvas').setLayers({
  1543 + // fillStyle: radial,
  1544 + //}).drawLayers();
  1545 + // scope.removePin();
  1546 + // scope.showAllPins();
  1547 +
  1548 +
  1549 + //6. Show all pins on AA opened item
  1550 +}
  1551 +
  1552 +
  1553 +$(document).ready(function () {
  1554 + $(".slider").slider({
  1555 + min: 25,
  1556 + max: 100,
  1557 + value: 100,
  1558 + range: "min",
  1559 + orientation: "vertical",
  1560 + slide: function (event, ui) {
  1561 +
  1562 +
  1563 +
  1564 + var scope = angular.element(document.getElementById("aaDetailPageDiv")).scope();
  1565 + scope.$apply(function () {
  1566 + scope.sliderVal = ui.value;
  1567 + scope.removeSpeechBubble();
  1568 + var relativeWidth = 0;
  1569 + var relativeHeight = 0;
  1570 + if (ui.value == 25 || ui.value == 40 || ui.value == 55 || ui.value == 70 || ui.value == 85 || ui.value == 100) {
  1571 + if (ui.value == 100) {
  1572 + relativeWidth = scope.ViewImageWidth;
  1573 + relativeHeight = scope.ViewImageHeight
  1574 + scope.sliderPercentValue = 1.0;
  1575 + }
  1576 + else if (ui.value == 85) {
  1577 + relativeWidth = scope.ViewImageWidth * 0.85;
  1578 + relativeHeight = scope.ViewImageHeight * 0.85;
  1579 + scope.sliderPercentValue = 0.85;
  1580 +
  1581 + } else if (ui.value == 70) {
  1582 + relativeWidth = scope.ViewImageWidth * 0.70;
  1583 + relativeHeight = scope.ViewImageHeight * 0.70;
  1584 + scope.sliderPercentValue = 0.70;
  1585 + } else if (ui.value == 55) {
  1586 +
  1587 + relativeWidth = scope.ViewImageWidth * 0.55;
  1588 + relativeHeight = scope.ViewImageHeight * 0.55;
  1589 + scope.sliderPercentValue = 0.55;
  1590 +
  1591 + } else if (ui.value == 40) {
  1592 +
  1593 + relativeWidth = scope.ViewImageWidth * 0.40;
  1594 + relativeHeight = scope.ViewImageHeight * 0.40;
  1595 + scope.sliderPercentValue = 0.40;
  1596 +
  1597 + } else if (ui.value == 25) {
  1598 +
  1599 + relativeWidth = scope.ViewImageWidth * 0.25;
  1600 + relativeHeight = scope.ViewImageHeight * 0.25;
  1601 + scope.sliderPercentValue = 0.25;
  1602 +
  1603 + }
  1604 + }
  1605 +
  1606 + console.log('ui.value= '+ui.value+' ,relativeWidth= ' + relativeWidth + ',relativeHeight= ' + relativeHeight)
  1607 + if (ui.value == 25 || ui.value == 40 || ui.value == 55 || ui.value == 70 || ui.value == 85 || ui.value == 100) {
  1608 + $("#modItemImage").css("width", relativeWidth + "px");
  1609 + $("#modItemImage").css("height", relativeHeight + "px");
  1610 + $("#aaDetailViewCanvas").css("width", relativeWidth + "px");
  1611 + $("#modItemImage").css("height", relativeHeight + "px");
  1612 +
  1613 + $("#modItemImage").attr('src', '');
  1614 +
  1615 +
  1616 + $("#aaDetailViewCanvas").remove();
  1617 + //0.5 create canvas on the top of image so that I can draw a line over the canvas.
  1618 + var canvas = document.createElement('canvas');
  1619 + canvas.id = 'aaDetailViewCanvas';
  1620 + canvas.className = 'aaCanvas';
  1621 + canvas.height = relativeHeight;
  1622 + canvas.width = relativeWidth;
  1623 + canvas.style.left = '0px';
  1624 + canvas.style.top = '0px';
  1625 + canvas.style.position = "absolute";
  1626 +
  1627 + $("#canvasDiv").append(canvas);
  1628 + scope.context = canvas.getContext("2d")
  1629 + $("#modItemImage").attr('src', scope.OpenItemImagePath);
  1630 + scope.isSliderChange = true;
  1631 + scope.showAllPins();
  1632 + }
  1633 +
  1634 +
  1635 +
  1636 +
  1637 + });
  1638 + }
  1639 + })
  1640 + .slider("pips", {
  1641 + rest: "label",
  1642 + step: "15"
  1643 + });
  1644 +});
1392 1645 \ No newline at end of file
... ...
400-SOURCECODE/AIAHTML5.Web/app/views/aa/atlas-anatomy-detail.html
  View file @7f908aa
... ... @@ -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">
... ... @@ -86,7 +86,7 @@
86 86 </div>
87 87 &nbsp;
88 88 <!-- Single button -->
89   - <div class="btn-group">
  89 + <div class="btn-group" style="vertical-align:top;">
90 90 <button type="button" class="btn btn-success dropdown-toggle btn-sm" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
91 91 <i class="fa fa-arrow-circle-right"></i>
92 92 </button>
... ... @@ -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 () {
... ...