ADAM / AIAHTML5

Commit c7079db7e41b74096c29769f3d6b36f97f3a1e28

Authored by Amrita Vishnoi
2 parents 188612f5 6b5549ac

Merge branch 'AAAnnotation3' of http://52.6.196.163/ADAM/AIAHTML5 into AAAnnotation3Merge

Inline Side-by-side
Showing 3 changed files with 288 additions and 191 deletions
400-SOURCECODE/AIAHTML5.Web/AIAHTML5.Web.csproj
  View file @c7079db
... ... @@ -44581,7 +44581,6 @@
44581 44581 <Content Include="content\scripts\js\custom\main.js" />
44582 44582 <Content Include="content\data\json\da\vocab\Swedish\cm_dat_vocabterm_3.json" />
44583 44583 <None Include="content\data\json\le\qz_dat_ca.json" />
44584   - <Content Include="HtmlPage1.html" />
44585 44584 <Content Include="libs\angular-drag-and-drop-lists.js" />
44586 44585 <Content Include="libs\angular-ui\css\slider.css" />
44587 44586 <Content Include="libs\angular-ui\js\slider.js" />
... ...
400-SOURCECODE/AIAHTML5.Web/app/controllers/TileViewListController.js
  View file @c7079db
... ... @@ -22,6 +22,8 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
22 22 $scope.AllBodySystem = [];
23 23 $scope.AllOrientation = [];
24 24 $scope.AllImageType = [];
  25 + $rootScope.Globe1 = [];
  26 +
25 27 $scope.query = {
26 28 selectedbodyregion: '',
27 29 selectedbodysystem: '',
... ... @@ -188,6 +190,9 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
188 190 $scope.imageHeight = this.height;
189 191 }
190 192  
  193 +
  194 +
  195 +
191 196 angular.element(document).ready(function (e) {
192 197 $("#ImagePanel").resize(function () {
193 198 $("#imageDiv").scrollLeft($rootScope.CanvasDivLeftPosition);
... ... @@ -204,28 +209,14 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
204 209 function (result) {
205 210 $scope.aaPinData = result.data.Root.Item;
206 211 angular.forEach($scope.aaPinData, function (value, key) {
207   -
208   - $scope.context.beginPath();
209   - $scope.context.moveTo(value._PinX, value._PinY);
210   - $scope.context.lineTo(value._HeadX, value._HeadY);
211   - $scope.context.stroke();
212   -
213   - var headX = (parseInt(value._HeadX)) - 20;
214   - var headY = (parseInt(value._HeadY)) - 15;
215   -
216   - var img = new Image();
217   - img.src = "~/../../../content/images/noraml-pin.png";
218   - img.onload = function () {
219   - $scope.context.drawImage(img, headX, headY);
220   - }
221 212  
  213 + $scope.DrawStaticPinsOnImage('aaDetailViewCanvas', value._PinId, value._PinX, value._PinY, value._HeadX, value._HeadY)
222 214 })
223 215  
224   - console.log(JSON.stringify(result, null, 4));
225 216 },
226 217 function (error) {
227   - // handle errors here
228   - console.log(' error: ' + error.statusText);
  218 +
  219 + console.log(' error in showAllPins: ' + error.statusText);
229 220 }
230 221 )
231 222 }
... ... @@ -345,7 +336,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
345 336  
346 337 if (selectimg === true && count >= filtercount) {
347 338  
348   -
  339 +
349 340 $scope.imagePath = "../content/images/aa/thumbnails/" + value._TileImageName;
350 341  
351 342 var $el = $('<div id="' + value._id + '" class="col-sm-3 col-md-3" title = "' + value._Title + '" data-ng-click="openModuleItemView($event)">'
... ... @@ -434,23 +425,6 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
434 425  
435 426 //1.Remove all the pins first
436 427 $scope.ClearAllPins();
437   -
438   - //clear speech bubble
439   - var speechBubbles = $("div[id*='sppeachBubble']");
440   - if (speechBubbles != null || speechBubbles != undefined && speechBubbles.length > 0) {
441   - for (var j = 0; j < speechBubbles.length; j++) {
442   -
443   - speechBubbles[j].parentNode.removeChild(speechBubbles[j]);
444   - }
445   - }
446   - var speechBubbleLines = $("div[id*='sppeachBubbleLine']");
447   - if (speechBubbleLines != null || speechBubbleLines != undefined && speechBubbleLines.length > 0) {
448   - for (var j = 0; j < speechBubbleLines.length; j++) {
449   -
450   - speechBubbleLines[j].parentNode.removeChild(speechBubbleLines[j]);
451   - }
452   - }
453   -
454 428  
455 429 var selectedSystemName = event.currentTarget.title;
456 430 //2. get pinData
... ... @@ -467,39 +441,27 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
467 441  
468 442 $scope.TermInfo = response.data.Terms.Term;
469 443  
470   - //on gettng all required data, draw pins
471   - var selectedSystemPinData = new jinqJs()
472   - .from($scope.aaPinData)
473   - .where("_BodySystemName == " + selectedSystemName)
474   - .select();
475   - angular.forEach(selectedSystemPinData, function (value, key) {
476   -
477   - $scope.context.beginPath();
478   - $scope.context.moveTo(value._PinX, value._PinY);
479   - $scope.context.lineTo(value._HeadX, value._HeadY);
480   - $scope.context.stroke();
481   -
482   - var headX = (parseInt(value._HeadX)) - 20;
483   - var headY = (parseInt(value._HeadY)) - 15;
484   -
485   - var img = new Image();
486   - img.src = "~/../../../content/images/noraml-pin.png";
487   - img.onload = function () {
488   - $scope.context.drawImage(img, headX, headY);
489   -
490   -
491   - }
492   - })
  444 + //on gettng all required data, draw pins
  445 + var selectedSystemPinData = new jinqJs()
  446 + .from($scope.aaPinData)
  447 + .where("_BodySystemName == " + selectedSystemName)
  448 + .select();
  449 + angular.forEach(selectedSystemPinData, function (value, key) {
  450 +
  451 +
  452 + $scope.DrawStaticPinsOnImage('aaDetailViewCanvas', value._PinId, value._PinX, value._PinY, value._HeadX, value._HeadY)
  453 +
  454 + })
493 455 //show annotation on first pin of the sysyem
494   - $scope.showAnnotation(selectedSystemPinData);
495   - },
  456 + $scope.showAnnotation(selectedSystemPinData, false, false);
  457 + },
496 458 function (error) {
497 459 // handle errors here
498 460 console.log(' error: ' + error.statusText);
499 461 }
500 462 )
501 463  
502   -
  464 +
503 465  
504 466 console.log(JSON.stringify(result, null, 4));
505 467 },
... ... @@ -510,9 +472,10 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
510 472 )
511 473 }
512 474  
513   - $scope.showAnnotation = function (selectedSystemPinData)
514   - {
  475 + $scope.showAnnotation = function (selectedSystemPinData, isCtrlPressed, isPinClicked) {
515 476  
  477 + $scope.selectedPin = [];
  478 + var isSameTermWithMultiPin = false;
516 479 var firstPinId = selectedSystemPinData[0]._PinId;
517 480 var pinTermNumber = selectedSystemPinData[0]._TermId;
518 481  
... ... @@ -521,38 +484,119 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
521 484 .from($scope.aaPinData)
522 485 .where("_TermId == " + pinTermNumber)
523 486 .select();
524   - var termTextdata = new jinqJs()
525   - .from($scope.TermInfo)
526   - .where("__ActualTermNumber == " + pinTermNumber)
527   - .select();
528   - var termText = termTextdata[0].__TermText;
529   - $scope.MultiLanguageAnnationArray = [];
530   - $scope.MultiLanguageAnnationArray.push(termText);
531   - angular.forEach(pinDataWithFirstTermNumber, function (value, key) {
532   -
533   - var headX = (parseInt(value._HeadX));
534   - var headY = (parseInt(value._HeadY));
535   - $scope.createSpeechBubble(headX, parseInt(headY),value._PinId);
536   - // alert('headX: ' + headX + ', headY: ' + headY + ',termText: ' + termText);
537   - })
  487 +
  488 +
  489 +
  490 + //3. get termText info
  491 + var promise = ModuleService.getTermTextForPin($scope.moduleName)
  492 + .then(
  493 + function (response) {
  494 +
  495 + $scope.TermInfo = response.data.Terms.Term;
  496 +
  497 +
  498 + var termTextdata = new jinqJs()
  499 + .from($scope.TermInfo)
  500 + .where("__ActualTermNumber == " + pinTermNumber)
  501 + .select();
  502 +
  503 + var termText = termTextdata[0].__TermText;
  504 + $scope.MultiLanguageAnnationArray = [];
  505 + $scope.MultiLanguageAnnationArray.push(termText);
  506 +
  507 + if (isCtrlPressed) {
  508 +
  509 + }
  510 + else {
  511 + if (isPinClicked) {
  512 + var existingSpeechBubble = $("div[id*='sppeachBubble']");
  513 + for (var i = 0; i < existingSpeechBubble.length; i++) {
  514 + existingSpeechBubble[i].parentNode.removeChild(existingSpeechBubble[i]);
  515 +
  516 + //make all pin heads grey
  517 + var radial = $('#aaDetailViewCanvas').createGradient({
  518 + x1: 50, y1: 50,
  519 + x2: 50, y2: 50,
  520 + r1: 10, r2: 30,
  521 + c1: 'rgba(100, 50, 0,0)',
  522 + c2: 'rgb(216, 216, 216)'
  523 + });
  524 +
  525 +
  526 + $('#aaDetailViewCanvas').setLayers({
  527 + fillStyle: radial,
  528 + }).drawLayers();
  529 + }
  530 +
  531 + var existingSpeechBubbleLine = $("div[id*='speechBubbleLine']");
  532 + for (var i = 0; i < existingSpeechBubbleLine.length; i++) {
  533 + existingSpeechBubbleLine[i].parentNode.removeChild(existingSpeechBubbleLine[i]);
  534 + }
  535 + var speechBubbleDraggedLine = $("div[id*='speechBubbleDraggedLine']");
  536 + for (var i = 0; i < speechBubbleDraggedLine.length; i++) {
  537 + speechBubbleDraggedLine[i].parentNode.removeChild(speechBubbleDraggedLine[i]);
  538 + }
  539 + }
  540 + }
  541 + if (pinDataWithFirstTermNumber.length > 1) {
  542 + isSameTermWithMultiPin = true;
  543 + }
  544 +
  545 + angular.forEach(pinDataWithFirstTermNumber, function (value, key) {
  546 + $scope.selectedPin.push(value._PinId);
  547 + var headX = (parseInt(value._HeadX));
  548 + var headY = (parseInt(value._HeadY));
  549 + $scope.createSpeechBubble(parseInt(headX) + 10, parseInt(headY) + 10, value._PinId, isCtrlPressed, isPinClicked, isSameTermWithMultiPin);
  550 + })
  551 +
  552 + },
  553 + function (error) { })
538 554 }
539 555  
540 556 $scope.ClearAllPins = function () {
541 557  
542   - var canvasHeight = document.getElementById('aaDetailViewCanvas').height;
543   - var canvasWidth = document.getElementById('aaDetailViewCanvas').width;
  558 + //var canvasHeight = document.getElementById('aaDetailViewCanvas').height;
  559 + //var canvasWidth = document.getElementById('aaDetailViewCanvas').width;
  560 +
  561 + //$scope.context.clearRect(0, 0, canvasWidth, canvasHeight);
  562 +
  563 + $('#aaDetailViewCanvas').clearCanvas();
  564 +
  565 + //clear speech bubbles
  566 + var speechBubbles = $("div[id*='sppeachBubble']");
  567 + if (speechBubbles != null || speechBubbles != undefined && speechBubbles.length > 0) {
  568 + for (var j = 0; j < speechBubbles.length; j++) {
  569 +
  570 + speechBubbles[j].parentNode.removeChild(speechBubbles[j]);
  571 + }
  572 + }
  573 + var speechBubbleLines = $("div[id*='sppeachBubbleLine']");
  574 + if (speechBubbleLines != null || speechBubbleLines != undefined && speechBubbleLines.length > 0) {
  575 + for (var j = 0; j < speechBubbleLines.length; j++) {
544 576  
545   - $scope.context.clearRect(0, 0, canvasWidth, canvasHeight);
  577 + speechBubbleLines[j].parentNode.removeChild(speechBubbleLines[j]);
  578 + }
  579 + }
546 580 };
547 581  
548   - $scope.createSpeechBubble = function (x, y, PinId) {
549 582  
550   - //1. In transparency box we shows two annotation at a time, so we need to decide the max length of annotation in btween two annotation because based on that
551   - // we decide the size of speech bubble
  583 +
  584 + $scope.createSpeechBubble = function (x, y, PinId, isCtrlPressed, isPinClicked, isSameTermWithMultiPin) {
  585 +
552 586 $scope.longestAnnotation = $scope.MultiLanguageAnnationArray.reduce(function (firstAnnotation, seconAnnotation) { return firstAnnotation.length > seconAnnotation.length ? firstAnnotation : seconAnnotation; });
553   - $scope.createSpeechBubbleBasedOnAnnotationLengthwithoutCtrl(x, y,PinId);
554   -
555   -
  587 +
  588 + $scope.createSpeechBubbleBasedOnAnnotationLength(x, y, PinId);
  589 +
  590 + $('#sppeachBubble').draggable(
  591 + {
  592 + drag: function (evt) {
  593 + $("#dot").css("visibility", "hidden");
  594 + var verticalScrollPosition = canvasDiv.scrollTop;
  595 + var horizontlScrollPosition = canvasDiv.scrollLeft;
  596 + $scope.angle(x, y, evt.pageX + horizontlScrollPosition - $('#imageDiv').offset().left, evt.pageY + verticalScrollPosition - $('#imageDiv').offset().top, true);
  597 + },
  598 + });
  599 +
556 600 }
557 601  
558 602 $scope.GetAnnotationBasedOnActualTermNo = function (actualTermNo, language) {
... ... @@ -632,64 +676,13 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
632 676 }
633 677  
634 678  
635   - $scope.createSpeechBubbleBasedOnAnnotationLength = function (pointClicked, x, y, id) {
636   - var sppechBubbleHTML = "<div id ='" + pointClicked + "' class='com'><div style='z-index:60000;position:absolute;border-top:2px solid #000;transform:rotate(40deg);-moz-transform:rotate(40deg);-o-transform:rotate(40deg);-ms-transform:rotate(40deg);-webkit-transform:rotate(40deg);height:15px;width:35px;left:" + (x - 10) + "px;top:" + (y + 10) + "px;'' id='bubble" + $scope.speechBubbleCounter + "'></div><div data=" + $scope.speechBubbleCounter + " id=" + id + " class='appendDragg' style='z-index:60000;margin-left:25px;border:1px solid #000;padding:5px 10px;position:absolute;color:#fff;text-align:left;font-size: 12px;font-weight:bold;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;left:" + x + "px;top:" + y + "px;'><div style='z-index:7000;position:absolute;right:-3px;top:-4px;color:#ffffff;cursor:pointer;'><img id=" + $scope.speechBubbleCounter + " class='dynCross' style='width:18px' src=" + $rootScope.closeBtnImgPath + "></div></div><div style='position:absolute;border:1px solid #000;display:none;z-index:9000;' id='bord" + $scope.speechBubbleCounter + "'></div></div>";
637   - //Issue #7286 :Undefined annotation should not appear
638   - for (var i = 0; i <= $scope.MultiLanguageAnnationArray.length - 1; i++) {
639   - var annotation = $scope.MultiLanguageAnnationArray[i];
640   - }
641   -
642   - if (annotation == undefined) {
643   - console.log("No text found");
644   - } else {
645   -
646   - $("#canvasDiv").append(sppechBubbleHTML);
647   -
648   - for (var i = 0; i <= $scope.MultiLanguageAnnationArray.length - 1; i++) {
649   - var annotation = $scope.MultiLanguageAnnationArray[i];
650   -
651   - $("#" + id).append("<p style='margin-bottom:2px;'>" + annotation + "</p>");
652   - }
653   -
654   - if ($scope.longestAnnotation.length <= 10) {
655   - $("#" + id).css("width", "100px");
656   - }
657   -
658   - else if ($scope.longestAnnotation.length > 10 && $scope.longestAnnotation.length <= 17) {
659   - $("#" + id).css("width", "140px");
660   - }
661   - else if ($scope.longestAnnotation.length > 17 && $scope.longestAnnotation.length <= 26) {
662   - $("#" + id).css("width", "195px");
663   -
664   - }
665   - else if ($scope.longestAnnotation.length > 26 && $scope.longestAnnotation.length <= 34) {
666   - $("#" + id).css("width", "248px");
667   - }
668   - else if ($scope.longestAnnotation.length > 34 && $scope.longestAnnotation.length <= 44) {
669   - $("#" + id).css("width", "300px");
670   - }
671 679  
672   - else if ($scope.longestAnnotation.length > 44 && $scope.longestAnnotation.length <= 54) {
673   - $("#" + id).css("width", "370px");
674   - }
675   - else if ($scope.longestAnnotation.length > 54 && $scope.longestAnnotation.length <= 69) {
676   - $("#" + id).css("width", "450px");
677   - }
678   - else if ($scope.longestAnnotation.length > 69 && $scope.longestAnnotation.length <= 75) {
679   - $("#" + id).css("width", "510px");
  680 + $scope.createSpeechBubbleBasedOnAnnotationLength = function (x, y, PinId) {
680 681  
681   - }
682   - else {
683   - $("#" + id).css("width", ($scope.longestAnnotation.length) + "%");
684   - }
685   - }
686   - }
687   - $rootScope.Globe1 = [];
688   - $scope.createSpeechBubbleBasedOnAnnotationLengthwithoutCtrl = function (x, y, PinId) {
689   - var sppechBubbleDotHTML = '<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>'
  682 + 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>'
690 683 + '<div id="sppeachBubble' + 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;">'
691 684 + '<span style="position:absolute;right:-3px;top:-4px;color:#ffffff;cursor:pointer;">'
692   - + '<img id="closeBtn'+PinId+'"class="crossDiv_temp" style="width:18px" src=' + $rootScope.closeBtnImgPath + '></span></div>'
  685 + + '<img id="closeBtn' + PinId + ' " class="crossDiv_temp" style="width:18px" src=' + $rootScope.closeBtnImgPath + '></span></div>'
693 686  
694 687 + '<div style="position:absolute;border:1px solid #000;display:none;z-index:9000;" id="speechBubbleDraggedLine' + PinId + '">'
695 688 + '</div>';
... ... @@ -702,12 +695,12 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
702 695 if (MultipleLanguage == undefined) {
703 696 console.log("No text is found");
704 697 } else {
705   - $('#imageDiv').append(sppechBubbleDotHTML);
  698 + $('#imageDiv').append(speechBubbleHTML);
706 699  
707 700 if ($scope.MultiLanguageAnnationArray.length > 0) {
708 701 for (var i = 0; i <= $scope.MultiLanguageAnnationArray.length - 1; i++) {
709 702 var MultipleLanguage = $scope.MultiLanguageAnnationArray[i];
710   - $("#sppeachBubble"+PinId).append("<p style='margin-bottom:2px;'>" + MultipleLanguage + "</p>");
  703 + $("#sppeachBubble" + PinId).append("<p style='margin-bottom:2px;'>" + MultipleLanguage + "</p>");
711 704 }
712 705 }
713 706 else {
... ... @@ -762,89 +755,191 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
762 755 }
763 756 }
764 757 var Globe = [];
765   -
  758 +
766 759 $rootScope.Globe1.push({ "currentX": x, "currentY": y, "id": PinId });
767   - Globe.push({ currentX: x, currentY: y});
  760 + Globe.push({ currentX: x, currentY: y });
768 761 document.getElementById('speechBubbleLine' + PinId + '').style.display = 'block';
769 762 document.getElementById('speechBubbleLine' + PinId + '').style.left = ((Globe[0].currentX - 45)) + 'px';
770 763 document.getElementById('speechBubbleLine' + PinId + '').style.top = ((Globe[0].currentY) - 20) + 'px';
771 764 document.getElementById('sppeachBubble' + PinId + '').style.display = 'block';
772 765 document.getElementById('sppeachBubble' + PinId + '').style.left = (Globe[0].currentX - 70) + 'px';
773 766 document.getElementById('sppeachBubble' + PinId + '').style.top = (Globe[0].currentY - 58) + 'px';
774   -
  767 +
775 768 $('.common-drag').draggable(
776 769 {
777 770 drag: function (evt) {
778   - // $("#dot").css("visibility", "hidden");
  771 +
779 772 var verticalScrollPosition = document.getElementById('imageDiv').scrollTop;
780 773 var horizontlScrollPosition = document.getElementById('imageDiv').scrollLeft;
781 774 var a = $(this).attr("id");
782   -
  775 +
783 776 var res = a.substring(13, a.length);
784 777 $("#speechBubbleLine" + res).css("visibility", "hidden");
785   -
786   - // var c = ($("#sppeachBubble" + res).css("left")).toString().replace("px", "");
787   - // alert(c);
788   - //var d = ($("#sppeachBubble" + res).css("top")).toString().replace("px", "");
789   - // alert(d);
790   - console.log("res= " + res + "x= " + x + ",y= " + y + ",evt.pageY= " + evt.page + ",evt.pageX= " + evt.pageX + ",horizontlScrollPosition= " + horizontlScrollPosition + ",verticalScrollPosition= " + verticalScrollPosition);
791   -
792   - // alert(evt.pageX + "X" + evt.pageY + "horizontlScrollPosition" + horizontlScrollPosition + "verticalScrollPosition" + verticalScrollPosition);
793   - for (var i = 0; i <= $rootScope.Globe1.length - 1; i++) {
794   - if ($rootScope.Globe1[i].id == res) {
795   - // alert($rootScope.Globe1[i].currentX);
796   - $scope.angle(res, $rootScope.Globe1[i].currentX, $rootScope.Globe1[i].currentY, evt.pageX + horizontlScrollPosition - $('#imageDiv').offset().left, evt.pageY + verticalScrollPosition - $('#imageDiv').offset().top, true);
797   - }
798   - }
  778 +
  779 +
  780 + console.log("res= " + res + "x= " + x + ",y= " + y + ",evt.pageY= " + evt.page + ",evt.pageX= " + evt.pageX + ",horizontlScrollPosition= " + horizontlScrollPosition + ",verticalScrollPosition= " + verticalScrollPosition);
  781 +
799 782  
  783 + for (var i = 0; i <= $rootScope.Globe1.length - 1; i++) {
  784 + if ($rootScope.Globe1[i].id == res) {
  785 +
  786 + $scope.angle(res, $rootScope.Globe1[i].currentX, $rootScope.Globe1[i].currentY, evt.pageX + horizontlScrollPosition - $('#imageDiv').offset().left, evt.pageY + verticalScrollPosition - $('#imageDiv').offset().top, true);
  787 + }
  788 + }
  789 +
800 790 },
801 791 });
802 792 $('.crossDiv_temp').on('click', function (evt) {
  793 +
803 794 var imgId = $(this).attr("id");
804 795 var pinId = imgId.substring(8, imgId.length);
805 796 $('#sppeachBubble' + pinId).remove();
806 797 $("#speechBubbleDraggedLine" + pinId).remove();
807 798 $("#speechBubbleLine" + pinId).remove();
  799 +
  800 + //make all pin heads grey
  801 + var pinHeadName = 'PinArc_' + pinId;
  802 + var radial = $('#aaDetailViewCanvas').createGradient({
  803 + x1: 50, y1: 50,
  804 + x2: 50, y2: 50,
  805 + r1: 10, r2: 30,
  806 + c1: 'rgba(100, 50, 0,0)',
  807 + c2: 'rgb(216, 216, 216)'
  808 + });
  809 +
  810 +
  811 + $('#aaDetailViewCanvas').setLayer(pinHeadName, {
  812 + fillStyle: radial,
  813 + }).drawLayers();
808 814 });
  815 +
  816 + //make the head green
  817 + var radialAfterClick = $('#aaDetailViewCanvas').createGradient({
  818 + x1: 50, y1: 50,
  819 + x2: 50, y2: 50,
  820 + r1: 10, r2: 30,
  821 + c1: 'rgba(100, 50, 0,0)',
  822 + c2: 'rgb(126, 187, 83)'
  823 + });
  824 + var pinHeadName = 'PinArc_' + PinId;
  825 + var pin = $('#aaDetailViewCanvas').getLayer(pinHeadName);
  826 + // pin.fillStyle = radialAfterClick;
  827 +
  828 + $('#aaDetailViewCanvas').setLayer(pinHeadName, {
  829 + fillStyle: radialAfterClick,
  830 + }).drawLayers();
809 831 }
  832 +
  833 +
  834 + $scope.angle = function (id, cx, cy, ex, ey, BoolValues) {
810 835  
  836 + var dy = ey - cy;
  837 + var dx = ex - cx;
  838 + var theta = 0;
  839 + if (dx < 0) {
  840 + theta = Math.atan(dy / dx) * (180 / Math.PI);
  841 + theta = theta + 180;
  842 +
  843 + }
  844 + else if (dy < 0) {
  845 + theta = Math.atan(dy / dx) * (180 / Math.PI);
  846 + theta = theta + 360;
  847 +
  848 + }
  849 + else {
  850 + theta = Math.atan(dy / dx) * (180 / Math.PI);
  851 + }
  852 +
  853 + var d = Math.sqrt((cx - ex) * (cx - ex) + (cy - ey) * (cy - ey));
  854 + var e = cy;
  855 + var f = cx;
811 856  
812   - $scope.angle = function (id, cx, cy, ex, ey, BoolValues) {
813   - // debugger;
814   - // alert(ex + " " + ey);
815   - var dy = ey - cy;
816   - var dx = ex - cx;
817   - var theta = 0;
818   - if (dx < 0) {
819   - theta = Math.atan(dy / dx) * (180 / Math.PI);
820   - theta = theta + 180;
  857 + if (BoolValues == true) {
  858 + $("#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%' });
  859 + }
  860 + else {
  861 + $("#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%' });
  862 + }
821 863  
822   - }
823   - else if (dy < 0) {
824   - theta = Math.atan(dy / dx) * (180 / Math.PI);
825   - theta = theta + 360;
826 864  
827   - }
828   - else {
829   - theta = Math.atan(dy / dx) * (180 / Math.PI);
830   - }
831 865  
832   - var d = Math.sqrt((cx - ex) * (cx - ex) + (cy - ey) * (cy - ey));
833   - var e = cy;
834   - var f = cx;
835   - // alert(d);
836   - if (BoolValues == true) {
837   - $("#speechBubbleDraggedLine"+id).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%' });
838   - }
839   - else {
840   - $("#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%' });
  866 + }
  867 +
  868 +
  869 + $scope.DrawStaticPinsOnImage = function (canvasId, PinId, offsetX1, offsetY1, x, y) {
  870 +
  871 + var radial = $('#' + canvasId).createGradient({
  872 + x1: 50, y1: 50,
  873 + x2: 50, y2: 50,
  874 + r1: 10, r2: 30,
  875 + c1: 'rgba(100, 50, 0,0)',
  876 + c2: 'rgb(216, 216, 216)'
  877 + });
  878 + $('#' + canvasId).drawLine({
  879 +
  880 + layer: true,
  881 + name: "Pin_" + PinId,
  882 + groups: ["Pin_" + PinId],
  883 + strokeStyle: 'black',
  884 + strokeWidth: 2,
  885 + x1: offsetX1, y1: offsetY1,
  886 + x2: x, y2: y,
  887 +
  888 + }).drawArc({
  889 + name: "PinArc_" + PinId,
  890 + layer: true,
  891 + groups: ["Pin_" + PinId],
  892 + strokeStyle: 'grey',
  893 + strokeWidth: 2,
  894 + fillStyle: radial,
  895 + x: x, y: y,
  896 + radius: 5,
  897 +
  898 + click: function (clickedPin) {
  899 +
  900 + //change the head color to green
  901 + var radialAfterClick = $('#aaDetailViewCanvas').createGradient({
  902 + x1: 50, y1: 50,
  903 + x2: 50, y2: 50,
  904 + r1: 10, r2: 30,
  905 + c1: 'rgba(100, 50, 0,0)',
  906 + c2: 'rgb(126, 187, 83)'
  907 + });
  908 +
  909 + clickedPin.fillStyle = radialAfterClick;
  910 +
  911 + var pinID = (clickedPin.name).substring(7, (clickedPin.name).length);
  912 + // alert('pinId: ' + pinID);
  913 + //showAnnotation();
  914 + var pinID = (clickedPin.name).substring(7, (clickedPin.name).length);
  915 + var selectedPinData = new jinqJs()
  916 + .from($scope.aaPinData)
  917 + .where("_PinId == " + pinID)
  918 + .select();
  919 + if (clickedPin.event.ctrlKey == true) {
  920 + $scope.showAnnotation(selectedPinData, true, true);
  921 +
  922 + }
  923 + else {
  924 + $scope.showAnnotation(selectedPinData, false, true);
  925 +
  926 + }
  927 +
  928 +
841 929 }
842 930  
  931 + }).drawLayers();
843 932  
  933 + }
844 934  
845   - }
846 935  
847   -
  936 + $scope.onCloseBtnClick = function (event) {
  937 + alert('closed')
  938 + }
  939 +
  940 + $("#closeBtn").click(function () {
  941 + alert('closed')
  942 + });
848 943 }]);
849 944  
850 945 function showSelectedSystemPins(event) {
... ... @@ -853,4 +948,7 @@ function showSelectedSystemPins(event) {
853 948 scope.$apply(function () {
854 949 scope.showSelectedSystemPins(event);
855 950 });
  951 +}
  952 +onCloseBtnClick = function (event) {
  953 + alert('closed')
856 954 }
857 955 \ No newline at end of file
... ...
400-SOURCECODE/AIAHTML5.Web/app/views/aa/atlas-anatomy-detail.html
  View file @c7079db
... ... @@ -11,7 +11,7 @@
11 11 <div class="tools pull-left" style="top:44px;">
12 12 <div class="toggle-icon toggleBar toggleHeadingButton" data-toggle="tooltip" data-placement="top" title="Show/Hide Sidebar"></div>
13 13 <div class="">
14   - <div class="col-sm-6" title="Hide Pins"><button class="btn btn-black btn-sm" ng-click="alert('hi pin')"> <img src="../../../content/images/aa/LeftMenu/hide-pin.png" alt="" title=""></button> </div>
  14 + <div class="col-sm-6" title="Hide Pins"><button class="btn btn-black btn-sm" > <img src="../../../content/images/aa/LeftMenu/hide-pin.png" alt="" title=""></button> </div>
15 15 <div class="col-sm-6" title="Show Selected Pins"><button class="btn btn-black btn-sm pull-right"><img src="../../../content/images/aa/LeftMenu/draw-pin.png" alt="" title=""></button></div>
16 16 <div class="col-sm-6" title="Show All Pins in System(s)"><button class="btn btn-primary btn-sm marginTop5"><img src="../../../content/images/aa/LeftMenu/all-pin.png" alt="" title=""></button></div>
17 17 <div class="col-sm-6" title="Select System">
... ...