diff --git a/400-SOURCECODE/AIAHTML5.Web/app/controllers/DAController.js b/400-SOURCECODE/AIAHTML5.Web/app/controllers/DAController.js index c4aa342..e595313 100644 --- a/400-SOURCECODE/AIAHTML5.Web/app/controllers/DAController.js +++ b/400-SOURCECODE/AIAHTML5.Web/app/controllers/DAController.js @@ -46,8 +46,8 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo $scope.previousSelectedTermList = []; - - $scope.machedBodyRegion = []; + // This variable is used for unhighlight previously highlighted body portion, if multiAnnotation is false. + $scope.machedIcolorInBodyRegion = []; //array for bodyviewid correspoing to male female(used for gender change) $scope.correspondingBodyViewIds = { @@ -860,6 +860,12 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo FlipedImgCanvas.addEventListener('click', function (evt) { + if (evt.ctrlKey) { + $scope.multiAnnotationIsON = true; + } + else { + $scope.multiAnnotationIsON = false; + } //get mouse coordinate of mirror image click var mousePos = $scope.getMousePos(evt); @@ -922,24 +928,57 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo var RGBColor = (Red + Green + Blue); if ($rootScope.isHighLight) { - //2. Find Actul Term No Based on Icolor. - var ActualTermNo = $scope.getActualTermNumber(RGBColor); - //alert('actual term no: ' + ActualTermNo); + ////2. Find Actul Term No Based on Icolor. + //var ActualTermNo = $scope.getActualTermNumber(RGBColor); + ////alert('actual term no: ' + ActualTermNo); + + ////3. Find Term No List Based on ActualTermNo + //var TermList = $scope.getTermNumberList(ActualTermNo); + //// alert('termList.count: ' + TermList.length); + + ////4. - //3. Find Term No List Based on ActualTermNo - var TermList = $scope.getTermNumberList(ActualTermNo); - // alert('termList.count: ' + TermList.length); + //$scope.machedTermNoLocation = []; + //for (var i = 0; i < TermList.length; i++) { + + // var termNumber = parseInt(TermList[i]._TermNumber); - //4. + // //Match Term No List in each bodyRegion + // $scope.getLocationsForMatchedTermsInWholeBody(termNumber); + //} - $scope.machedTermNoLocation = []; - for (var i = 0; i < TermList.length; i++) { + if ($scope.machedIcolorInBodyRegion.length > 0) { + if ($scope.multiAnnotationIsON == false) { + for (var i = 0; i < $scope.machedIcolorInBodyRegion.length; i++) { + var bodyRegionId = $scope.machedIcolorInBodyRegion[i]; - var termNumber = parseInt(TermList[i]._TermNumber); + var grayCanvasID = 'imageCanvas' + bodyRegionId; + var grayCanvas = document.getElementById(grayCanvasID); + + var grayCanvasContext = grayCanvas.getContext("2d"); + + var grayImageData = $rootScope.grayImageDataList[bodyRegionId - 1]; + + grayCanvasContext.putImageData(grayImageData, 0, 0) - //Match Term No List in each bodyRegion - $scope.getLocationsForMatchedTermsInWholeBody(termNumber); + // for mirrored canvas + + if (bodyRegionId == 4 || bodyRegionId == 5 || bodyRegionId == 6) { + var grayCanvasID = 'imageCanvas' + bodyRegionId + '_MR'; + var grayCanvasMR = document.getElementById(grayCanvasID); + + var grayCanvasContextMR = grayCanvasMR.getContext("2d"); + + var grayImageDataMR = $rootScope.grayImageMRDataList[bodyRegionId]; + + grayCanvasContextMR.putImageData(grayImageDataMR, 0, 0) + } + + } + } } + + $scope.highLightBodyBasedOnIcolor(RGBColor); } @@ -954,8 +993,13 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo } else { - if ($('#speechBubble').length > 0) { - $('#speechBubble').remove(); + + if ($('#dot').length > 0) { + $('#dot').remove(); + } + + if ($('#sppeachBubble').length > 0) { + $('#sppeachBubble').remove(); $scope.createDynamicSpeechBubble(evt, annotationText, evt.pageX + horizontlScrollPosition - $('#canvasDiv').offset().left, evt.pageY + verticalScrollPosition - $('#canvasDiv').offset().top); @@ -1051,6 +1095,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo imgCanvas.style.zIndex = "500"; } } + imgCanvas.addEventListener('click', function (evt) { if (evt.ctrlKey) { @@ -1097,10 +1142,14 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo var RGBColor = $scope.GetRGBColor(maskCanvasContext, actulalX, actualY, x, y); if ($rootScope.isHighLight) { - if ($scope.machedBodyRegion.length > 0) { - if ($scope.multiAnnotationIsON == false) { - for (var i = 0; i < $scope.machedBodyRegion.length; i++) { - var bodyRegionId = $scope.machedBodyRegion[i]; + + if ($scope.machedIcolorInBodyRegion.length > 0) + { + if ($scope.multiAnnotationIsON == false) + { + for (var i = 0; i < $scope.machedIcolorInBodyRegion.length; i++) + { + var bodyRegionId = $scope.machedIcolorInBodyRegion[i]; var grayCanvasID = 'imageCanvas' + bodyRegionId; var grayCanvas = document.getElementById(grayCanvasID); @@ -1111,6 +1160,18 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo grayCanvasContext.putImageData(grayImageData, 0, 0) + // for unhighlight the mirrored body region + if (bodyRegionId == 4 || bodyRegionId == 5 || bodyRegionId == 6) { + var grayCanvasID = 'imageCanvas' + bodyRegionId + '_MR'; + var grayCanvasMR = document.getElementById(grayCanvasID); + + var grayCanvasContextMR = grayCanvasMR.getContext("2d"); + + var grayImageDataMR = $rootScope.grayImageMRDataList[bodyRegionId]; + + grayCanvasContextMR.putImageData(grayImageDataMR, 0, 0) + } + } } } @@ -1147,7 +1208,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo } else { - $scope.highLightBodyBasedOnIcolor(RGBColor); + // $scope.highLightBodyBasedOnIcolor(RGBColor); ////2. Find Actul Term No Based on Icolor. //var ActualTermNo = $scope.getActualTermNumber(RGBColor); @@ -1210,8 +1271,13 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo } else { - if ($('#speechBubble').length > 0) { - $('#speechBubble').remove(); + if ($('#dot').length > 0) { + $('#dot').remove(); + + if ($('#sppeachBubble').length > 0) { + $('#sppeachBubble').remove(); + } + $scope.createDynamicSpeechBubble(evt, annotationText, evt.pageX + horizontlScrollPosition - $('#canvasDiv').offset().left, evt.pageY + verticalScrollPosition - $('#canvasDiv').offset().top); @@ -1245,7 +1311,8 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo } - $scope.highLightBodyBasedOnIcolor = function (RGBColor) { + $scope.highLightBodyBasedOnIcolor = function (RGBColor) + { //2. Find Actul Term No Based on Icolor. var ActualTermNo = $scope.getActualTermNumber(RGBColor); @@ -1298,7 +1365,6 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo } var maskCanvas = document.getElementById(maskCanvasID); var maskCanvasContext = maskCanvas.getContext("2d"); - debugger; var maskImgData = maskCanvasContext.getImageData(0, 0, scaledWidth, scaledHeight); // 2. get coloured canvas for this body region. @@ -1388,11 +1454,11 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo if (parseInt(termNo) == parseInt(Icolor)) { counter++; - var have = $scope.machedBodyRegion.indexOf(bodyRegionId); + var have = $scope.machedIcolorInBodyRegion.indexOf(bodyRegionId); if (have == -1) { - $scope.machedBodyRegion.push(bodyRegionId); + $scope.machedIcolorInBodyRegion.push(bodyRegionId); } else { @@ -1720,7 +1786,8 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo $(".com").css("display", "none"); $("#bord").css({ "width": "0px", "display": "none" }); - $('' + + $('' + '' @@ -3157,6 +3224,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo img.src = dataURL; + img.onload = function () { console.log(Math.max(img.width) + ', ' + Math.max(img.height)) @@ -3192,13 +3260,14 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo $rootScope.grayImageDataList[parseInt(value.bodyRegionId - 1)] = grayImageData; } - } + } + }) - }); + } // alert('length: '+ $scope.coloredImageCanvasList.length); - } + if ($scope.previousSelectedTermList.length > 0) { for (var i = 0; i < $scope.previousSelectedTermList.length; i++) { diff --git a/400-SOURCECODE/AIAHTML5.Web/app/controllers/DAController.js.orig b/400-SOURCECODE/AIAHTML5.Web/app/controllers/DAController.js.orig index d78c959..b7ace8f 100644 --- a/400-SOURCECODE/AIAHTML5.Web/app/controllers/DAController.js.orig +++ b/400-SOURCECODE/AIAHTML5.Web/app/controllers/DAController.js.orig @@ -13,7 +13,9 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo $scope.isTransparencyActivated; $scope.BodyLayerData; $scope.VocabTermData; + $scope.CommonData $scope.TermNumberData; + $rootScope.BodySystemData $scope.bodyViewId = 0; $scope.bgartData; //view specific constants @@ -27,10 +29,31 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo $scope.TBDrawStartX; $scope.TBDrawStartY; - $scope.isHighLight = false; - $scope.coloredImageCanvasList = []; + $rootScope.isHighLight = false; + $rootScope.coloredImageCanvasList = []; + $rootScope.coloredImageMRCanvasList = []; + + $rootScope.grayImageDataList = []; + $rootScope.grayImageMRDataList = []; $scope.zoomInOut = 75; + $scope.i = 0; + $scope.speachBubbleArray = []; + $scope.multiAnnotationIsON = true; + $scope.previousGrayImageDataVar; + $scope.previousGrayCanvas; + + $scope.previousSelectedTermList = []; + +<<<<<<< HEAD + + + $scope.machedBodyRegion = []; +======= + + // This variable is used for unhighlight previously highlighted body portion, if multiAnnotation is false. + $scope.machedIcolorInBodyRegion = []; +>>>>>>> 06cddfd0f16578a9c42e80367bb28ee0cede2c3e //array for bodyviewid correspoing to male female(used for gender change) $scope.correspondingBodyViewIds = { @@ -136,7 +159,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo } - $scope.imagePath = "~/../content/images/DA/"+$scope.zoomInOut +"/body-views/" + value._id + '/skintone/' + userEthnicity + '/' + thumbnailImage; + $scope.imagePath = "~/../content/images/DA/" + $scope.zoomInOut + "/body-views/" + value._id + '/skintone/' + userEthnicity + '/' + thumbnailImage; // debugger; var $el = $('
' @@ -176,45 +199,43 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo $rootScope.ClearIframe(); -<<<<<<< HEAD - //load body-views data -======= - //load body-view data ->>>>>>> f02adb91be9d04918a612b7ac16241017c20e360 - $http({ method: 'GET', url: '~/../content/data/json/da/da_dat_contentlist.json' }).success(function (data) { + //load common data + var commondataJsonPath = '~/../content/data/json/da/da_dat_common.json'; - $scope.BodyViewData = data; - //load default body view list for male - $scope.getDAViewList(); + DataService.getAnotherJson(commondataJsonPath) + .then( + function (result) { - }) + $rootScope.CommonData = result; + $http({ method: 'GET', url: '~/../content/data/json/da/da_dat_contentlist.json' }).success(function (data) { + + $scope.BodyViewData = data; + //load default body view list for male + $scope.getDAViewList(); + + }) .error(function (data, status, headers, config) { console.log(data); }); + }, + function (error) { + console.log(error.statusText) + } + ) + //load body-views data + + // $('#daLoaderLabel').css('visibility', 'hidden') $rootScope.isLoading = false; - $http({ method: 'GET', url: '~/../content/data/json/da_dat_tm_sg_1.json' }).success(function (data) { - $scope.TermNumberData = data; - - }) - .error(function (data, status, headers, config) { - console.log(data); - }); - //load vocabterm data - $http({ method: 'GET', url: '~/../content/data/json/cm_dat_vocabterm_1.json' }).success(function (data) { - $scope.VocabTermData = data; - }) - .error(function (data, status, headers, config) { - console.log(data); - }); - //push the details of open module in array $rootScope.openModules $rootScope.openModules.push({ "ModuleId": 1 }); + + } @@ -310,7 +331,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo selector: '.daBodyView', theme: 'success', currentController: 'DAController', - parentSlug:'da-view-list', + parentSlug: 'da-view-list', ajax: { url: 'app/views/da/da-view.html' }, @@ -327,7 +348,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo // $rootScope.openViewsDA.push({ "ViewId": 1 }); - $rootScope.currentSlug = 'da-body-views'; + $rootScope.currentSlug = 'da-body-view'; //hide scrollbar @@ -377,9 +398,6 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo }) - - - $scope.LoadDefaultLayerImage = function () { // debugger; @@ -622,7 +640,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo //multiple conditions are not working in where clause of JinQ so need multiple filtered variables if (dtlOfSktn.length > 0) { - if ((parseInt(dtlOfSktn[0]._lns) <= parseInt($scope.layerNumber)) && (parseInt(dtlOfSktn[0]._lne) >= parseInt($scope.layerNumber)) && (dtlOfSktn[0]._isfr == 'Y')) { + if ((parseInt(dtlOfSktn[0]._lns) <= parseInt($scope.layerNumber)) && (parseInt(dtlOfSktn[0]._lne) > parseInt($scope.layerNumber)) && (dtlOfSktn[0]._isfr == 'Y')) { $scope.figLaefImageName = dtlOfSktn[0]._ImageId; //$scope.figLaefX = filtereddata[0]._X; //$scope.figLaefY = filtereddata[0]._Y; @@ -630,11 +648,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo var rectangle = scaleRectangle(value._X, value._Y, value._Height, value._Width, value._MirrorValue); -<<<<<<< HEAD - var src = "content/images/DA/body-views/" + $scope.voId + "/layers/0/" + value._BodyRegionId + "/" + $scope.figLaefImageName; -======= - var src = "content/images/da/body-views/" + $scope.voId + "/layers/0/" + value._BodyRegionId + "/" + $scope.figLaefImageName; ->>>>>>> f02adb91be9d04918a612b7ac16241017c20e360 + var src = "content/images/DA/" + $scope.zoomInOut + "/body-views/" + $scope.voId + "/layers/0/" + value._BodyRegionId + "/" + $scope.figLaefImageName; $scope.DrawImage(rectangle.scaledHeight, rectangle.scaledWidth, rectangle.scaledX, rectangle.scaledY, src, 'modestyImg' + value._BodyRegionId, 'N') @@ -673,11 +687,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo // $('#canvasDiv').scrollLeft($scope.imageHorizontlScrollPosition) $('#canvasDiv').scrollTop(50) var abc = $scope.BodyRegionCordinatesData; -<<<<<<< HEAD //debugger; -======= - // debugger; ->>>>>>> f02adb91be9d04918a612b7ac16241017c20e360 $('#layerChangeSlider').slider("option", "value", parseInt($scope.totalLayers) - parseInt($scope.layerNumber)); // $('#spinner').css('visibility', 'hidden'); $rootScope.isLoading = false; @@ -740,11 +750,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo //set max for LayerNumber input $scope.totalLayers = dataLength - 1; -<<<<<<< HEAD // debugger -======= - // debugger ->>>>>>> f02adb91be9d04918a612b7ac16241017c20e360 $('#txtLayerNumber').attr('max', $scope.totalLayers); $('#layerChangeSlider').slider("option", "max", $scope.totalLayers); // $('#layerChangeSlider').slider("option", "value",parseInt($scope.totalLayers)-parseInt($scope.layerNumber)); @@ -764,7 +770,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo if (bodyRegion == bodyRegionId && bodyRegionSkinTone == $scope.skinTone) { - return "content/images/DA/"+$scope.zoomInOut +"/body-views/" + $scope.voId + "/layers/" + $scope.layerNumber + "/" + bodyRegionId + "/" + $scope.skinTone + "/" + SelectedLayerData.BodyRegion[z].Image._ImageName; + return "content/images/DA/" + $scope.zoomInOut + "/body-views/" + $scope.voId + "/layers/" + $scope.layerNumber + "/" + bodyRegionId + "/" + $scope.skinTone + "/" + SelectedLayerData.BodyRegion[z].Image._ImageName; } } } @@ -786,7 +792,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo if (bodyRegion == bodyRegionId) { return "content/images/DA/" + $scope.zoomInOut + "/body-views/" + $scope.voId + "/layers/" + $scope.layerNumber + "/" + bodyRegionId + "/" + SelectedLayerData.BodyRegion[z].Image._ImageName; - + } } @@ -822,7 +828,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo for (var z = 0; z <= $scope.bagartDetailsOnSktn.length; z++) { var gender = $scope.bagartDetailsOnSktn[z]._Gender; if (gender == selectedGender) { - return "content/images/DA/"+$scope.zoomInOut+"/body-views/" + $scope.voId + "/layers/0/" + bodyRegionId + "/" + $scope.skinTone + "/" + $scope.bagartDetailsOnSktn[z]._ImageId; + return "content/images/DA/" + $scope.zoomInOut + "/body-views/" + $scope.voId + "/layers/0/" + bodyRegionId + "/" + $scope.skinTone + "/" + $scope.bagartDetailsOnSktn[z]._ImageId; } } } @@ -843,6 +849,8 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo FlipedImgCanvas.style.left = x + "px"; FlipedImgCanvas.style.top = y + "px"; + + if (isMaskImage == 'Y') { FlipedImgCanvas.id = 'imageCanvas' + bodyRegionId + '_MR_mci'; FlipedImgCanvas.style.visibility = 'hidden' @@ -853,21 +861,35 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo FlipedImgCanvas.style.visibility = 'visible' } + + + FlipedImgCanvas.addEventListener('click', function (evt) { +<<<<<<< HEAD + +======= + if (evt.ctrlKey) { + $scope.multiAnnotationIsON = true; + } + else { + $scope.multiAnnotationIsON = false; + } + +>>>>>>> 06cddfd0f16578a9c42e80367bb28ee0cede2c3e //get mouse coordinate of mirror image click var mousePos = $scope.getMousePos(evt); - //alert(mousePos.x + ',' + mousePos.y); var context = FlipedImgCanvas.getContext("2d"); var canvasId = context.canvas.getAttribute('id'); + var mirrorCanvasX = context.canvas.offsetLeft; var mirrorCanvasWidth = context.canvas.clientWidth; var maskCanvasId = (canvasId.replace('_MR', '')) + '_mci'; var maskCanvas = document.getElementById(maskCanvasId); - var canvasContextForRGB = maskCanvas.getContext("2d"); + var maskCanvasContext = maskCanvas.getContext("2d"); var canvasDiv = document.getElementById('canvasDiv'); @@ -876,15 +898,13 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo var distanceXOnMirrorImage = (parseInt(mirrorCanvasX) + parseInt(mirrorCanvasWidth)) - (parseInt(mousePos.x) + horizontlScrollPosition);// - 135); - var mirrorXOnNormalImage = parseInt(canvasContextForRGB.canvas.offsetLeft) + parseInt(distanceXOnMirrorImage); + var mirrorXOnNormalImage = parseInt(maskCanvasContext.canvas.offsetLeft) + parseInt(distanceXOnMirrorImage); var actulalX = mirrorXOnNormalImage var actualY = mousePos.y + verticalScrollPosition - - - var pixelData = canvasContextForRGB.getImageData(Math.round(actulalX - parseInt(canvasContextForRGB.canvas.offsetLeft)), Math.round(actualY - y), 1, 1); + var pixelData = maskCanvasContext.getImageData(Math.round(actulalX - parseInt(maskCanvasContext.canvas.offsetLeft)), Math.round(actualY - y), 1, 1); pixelData.data[0] = pixelData.data[0] - 9; pixelData.data[1] = pixelData.data[1] - 9; @@ -917,23 +937,90 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo } var RGBColor = (Red + Green + Blue); + if ($rootScope.isHighLight) { + ////2. Find Actul Term No Based on Icolor. + //var ActualTermNo = $scope.getActualTermNumber(RGBColor); + ////alert('actual term no: ' + ActualTermNo); + + ////3. Find Term No List Based on ActualTermNo + //var TermList = $scope.getTermNumberList(ActualTermNo); + //// alert('termList.count: ' + TermList.length); + + ////4. + + //$scope.machedTermNoLocation = []; + //for (var i = 0; i < TermList.length; i++) { + + // var termNumber = parseInt(TermList[i]._TermNumber); + + // //Match Term No List in each bodyRegion + // $scope.getLocationsForMatchedTermsInWholeBody(termNumber); + //} + + if ($scope.machedIcolorInBodyRegion.length > 0) { + if ($scope.multiAnnotationIsON == false) { + for (var i = 0; i < $scope.machedIcolorInBodyRegion.length; i++) { + var bodyRegionId = $scope.machedIcolorInBodyRegion[i]; + + var grayCanvasID = 'imageCanvas' + bodyRegionId; + var grayCanvas = document.getElementById(grayCanvasID); + + var grayCanvasContext = grayCanvas.getContext("2d"); + + var grayImageData = $rootScope.grayImageDataList[bodyRegionId - 1]; + + grayCanvasContext.putImageData(grayImageData, 0, 0) + + // for mirrored canvas + + if (bodyRegionId == 4 || bodyRegionId == 5 || bodyRegionId == 6) { + var grayCanvasID = 'imageCanvas' + bodyRegionId + '_MR'; + var grayCanvasMR = document.getElementById(grayCanvasID); + + var grayCanvasContextMR = grayCanvasMR.getContext("2d"); + + var grayImageDataMR = $rootScope.grayImageMRDataList[bodyRegionId]; + + grayCanvasContextMR.putImageData(grayImageDataMR, 0, 0) + } + + } + } + } + + $scope.highLightBodyBasedOnIcolor(RGBColor); + } + var annotationText = $scope.GetAnnotationText(parseInt(RGBColor)); if ($('#speechBubbleTrns').length > 0) $('#speechBubbleTrns').remove(); - if ($('#speechBubble').length > 0) { - $('#speechBubble').remove(); + if ($scope.multiAnnotationIsON == true) { - $scope.createSpeechBubble(evt, annotationText, evt.pageX + horizontlScrollPosition - $('#canvasDiv').offset().left + 5, evt.pageY + verticalScrollPosition - $('#canvasDiv').offset().top - 50) + $scope.createDynamicSpeechBubble(evt, annotationText, evt.pageX + horizontlScrollPosition - $('#canvasDiv').offset().left, evt.pageY + verticalScrollPosition - $('#canvasDiv').offset().top); } - else - $scope.createSpeechBubble(evt, annotationText, evt.pageX + horizontlScrollPosition - $('#canvasDiv').offset().left + 5, evt.pageY + verticalScrollPosition - $('#canvasDiv').offset().top - 50) + else { + + if ($('#dot').length > 0) { + $('#dot').remove(); + } + + if ($('#sppeachBubble').length > 0) { + $('#sppeachBubble').remove(); + + $scope.createDynamicSpeechBubble(evt, annotationText, evt.pageX + horizontlScrollPosition - $('#canvasDiv').offset().left, evt.pageY + verticalScrollPosition - $('#canvasDiv').offset().top); + } + else { + + $scope.createDynamicSpeechBubble(evt, annotationText, evt.pageX + horizontlScrollPosition - $('#canvasDiv').offset().left, evt.pageY + verticalScrollPosition - $('#canvasDiv').offset().top); + } + } }, false); FlipedImgCanvas.addEventListener('mousedown', function (evt) { @@ -983,7 +1070,6 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo $scope.DrawImage = function (h, w, x, y, src, bodyRegionId, isMaskImage) { - // debugger; var imgCanvas = document.createElement('canvas'); // imgCanvas.style.backgroundColor = 'red'; imgCanvas.height = h; @@ -1015,14 +1101,21 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo //set z index to make leaf canvas on top of hip canavs imgCanvas.style.zIndex = "200"; } - if ($scope.voId == 11 && bodyRegionId == 6) { + if (($scope.voId == 11 || $scope.voId == 9) && bodyRegionId == 6) { imgCanvas.style.zIndex = "500"; } } - imgCanvas.addEventListener('click', function (evt) { + imgCanvas.addEventListener('click', function (evt) { + if (evt.ctrlKey) { + $scope.multiAnnotationIsON = true; + } + else { + $scope.multiAnnotationIsON = false; + } + var annotationText; var context = imgCanvas.getContext("2d"); @@ -1036,9 +1129,12 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo maskCanvasId = canvasId + '_mci'; } var maskCanvas = document.getElementById(maskCanvasId); - var canvasContextForRGB = maskCanvas.getContext("2d"); - + var maskCanvasContext = maskCanvas.getContext("2d"); + //if ($scope.zoomInOut == 25) { + // var mousePos = $scope.getMousePos1(evt); + //} + //else var mousePos = $scope.getMousePos(evt); // alert(mousePos.x + ',' + mousePos.y); @@ -1051,14 +1147,123 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo var actulalX = mousePos.x + horizontlScrollPosition; var actualY = mousePos.y + verticalScrollPosition; - //debugger; - var RGBColor = $scope.GetRGBColor(canvasContextForRGB, actulalX, actualY, x, y); - var annotationText; + + var RGBColor = $scope.GetRGBColor(maskCanvasContext, actulalX, actualY, x, y); + +<<<<<<< HEAD + if ($rootScope.isHighLight) { + if ($scope.machedBodyRegion.length > 0) { + if ($scope.multiAnnotationIsON == false) { + for (var i = 0; i < $scope.machedBodyRegion.length; i++) { + var bodyRegionId = $scope.machedBodyRegion[i]; +======= + if ($rootScope.isHighLight) + { + if ($scope.machedIcolorInBodyRegion.length > 0) + { + if ($scope.multiAnnotationIsON == false) + { + for (var i = 0; i < $scope.machedIcolorInBodyRegion.length; i++) + { + var bodyRegionId = $scope.machedIcolorInBodyRegion[i]; +>>>>>>> 06cddfd0f16578a9c42e80367bb28ee0cede2c3e + + var grayCanvasID = 'imageCanvas' + bodyRegionId; + var grayCanvas = document.getElementById(grayCanvasID); + + var grayCanvasContext = grayCanvas.getContext("2d"); + + var grayImageData = $rootScope.grayImageDataList[bodyRegionId - 1]; + + grayCanvasContext.putImageData(grayImageData, 0, 0) + + // for unhighlight the mirrored body region + if (bodyRegionId == 4 || bodyRegionId == 5 || bodyRegionId == 6) { + var grayCanvasID = 'imageCanvas' + bodyRegionId + '_MR'; + var grayCanvasMR = document.getElementById(grayCanvasID); + + var grayCanvasContextMR = grayCanvasMR.getContext("2d"); + + var grayImageDataMR = $rootScope.grayImageMRDataList[bodyRegionId]; + + grayCanvasContextMR.putImageData(grayImageDataMR, 0, 0) + } + + } + } + } + + // var IcolorWithCordinate = new Object; + var previousIcolor = RGBColor; + //var previousX; + // var previousY; + + //IcolorWithCordinate.previousIcolor= RGBColor; + // IcolorWithCordinate.previousX = x; + // IcolorWithCordinate.previousY = y; + + $scope.previousSelectedTermList.push(previousIcolor); + + $scope.highLightBodyBasedOnIcolor(RGBColor); + + //var ActualTermNo = $scope.getActualTermNumber(RGBColor); + ////3. Find Term No List Based on ActualTermNo + //var TermList = $scope.getTermNumberList(ActualTermNo); + //// alert('termList.count: ' + TermList.length); + + ////4. + + //$scope.machedTermNoLocation = []; + //for (var i = 0; i < TermList.length; i++) { + + // var termNumber = parseInt(TermList[i]._TermNumber); + + // //Match Term No List in each bodyRegion + // $scope.getLocationsForMatchedTermsInWholeBody(termNumber, x, y); + //} + + } + + else { + $scope.highLightBodyBasedOnIcolor(RGBColor); + +<<<<<<< HEAD + ////2. Find Actul Term No Based on Icolor. + //var ActualTermNo = $scope.getActualTermNumber(RGBColor); +======= + else + { + // $scope.highLightBodyBasedOnIcolor(RGBColor); +>>>>>>> 06cddfd0f16578a9c42e80367bb28ee0cede2c3e + + ////3. Find Term No List Based on ActualTermNo + //var TermList = $scope.getTermNumberList(ActualTermNo); + + + ////4. + + //$scope.machedTermNoLocation = []; + //for (var i = 0; i < TermList.length; i++) { + + // var termNumber = parseInt(TermList[i]._TermNumber); + + // //Match Term No List in each bodyRegion + // $scope.getLocationsForMatchedTermsInWholeBody(termNumber, x, y); + //} + } + + + + + //Modesty ON if (maskCanvasId.match('modestyImg') && RGBColor != '000000') { RGBColor = DA[0].figLeafTermId; annotationText = $scope.GetAnnotationBasedOnActualTermNo(RGBColor); } + //Modesty On but clicked somewhre else, we did modesty check because the modesty image covers whole body region so if user will click to + //see the annotation apart from leaf then the actual click will be on modesty canvas, but for annotation er + // else if (maskCanvasId.match('modestyImg') && RGBColor == '000000') { //if ($scope.voId == 11) { // maskCanvasId = 'imageCanvas6_mci'; @@ -1070,66 +1275,263 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo maskCanvasId = 'imageCanvas' + bodyRegionId + '_mci'; // } var maskCanvas = document.getElementById(maskCanvasId); - var canvasContextForRGB = maskCanvas.getContext("2d"); - RGBColor = $scope.GetRGBColor(canvasContextForRGB, actulalX, actualY, x, y); + var maskCanvasContext = maskCanvas.getContext("2d"); + RGBColor = $scope.GetRGBColor(maskCanvasContext, actulalX, actualY, x, y); annotationText = $scope.GetAnnotationText(parseInt(RGBColor)); } else { - RGBColor = $scope.GetRGBColor(canvasContextForRGB, actulalX, actualY, x, y); + RGBColor = $scope.GetRGBColor(maskCanvasContext, actulalX, actualY, x, y); annotationText = $scope.GetAnnotationText(parseInt(RGBColor)); } + if ($('#speechBubbleTrns').length > 0) $('#speechBubbleTrns').remove(); - if ($('#speechBubble').length > 0) { - $('#speechBubble').remove(); + if ($scope.multiAnnotationIsON == true) { - $scope.createSpeechBubble(evt, annotationText, evt.pageX + horizontlScrollPosition - $('#canvasDiv').offset().left + 5, evt.pageY + verticalScrollPosition - $('#canvasDiv').offset().top - 50) + $scope.createDynamicSpeechBubble(evt, annotationText, evt.pageX + horizontlScrollPosition - $('#canvasDiv').offset().left, evt.pageY + verticalScrollPosition - $('#canvasDiv').offset().top); } - else - $scope.createSpeechBubble(evt, annotationText, evt.pageX + horizontlScrollPosition - $('#canvasDiv').offset().left + 5, evt.pageY + verticalScrollPosition - $('#canvasDiv').offset().top - 50) + else { + if ($('#dot').length > 0) { + $('#dot').remove(); + if ($('#sppeachBubble').length > 0) { + $('#sppeachBubble').remove(); + } + - }, false); + $scope.createDynamicSpeechBubble(evt, annotationText, evt.pageX + horizontlScrollPosition - $('#canvasDiv').offset().left, evt.pageY + verticalScrollPosition - $('#canvasDiv').offset().top); + } + else { + $scope.createDynamicSpeechBubble(evt, annotationText, evt.pageX + horizontlScrollPosition - $('#canvasDiv').offset().left, evt.pageY + verticalScrollPosition - $('#canvasDiv').offset().top); + } + } + }, false); + var PI = Math.PI; var PI2 = PI * 2; var cw, ch, imgW, imgH, mouseX, mouseY; var scaleFactor = 1.00; - //$scaler = $("#scaler"); - //$scaler.val(scaleFactor); - //$scaler.hide(); - var context = imgCanvas.getContext('2d'); var img = new Image(); img.onload = start; img.src = src; - // img.src = img.src = "~/../content/images/" + src; - function start() { // debugger; context.drawImage(img, 0, 0); }; - // $('#daLoaderLabel').css('visibility', 'visible') - - // $rootScope.isLoading = true; document.getElementById('canvasDiv').appendChild(imgCanvas); } - $scope.GetRGBColor = function (canvasContextForRGB, actulalX, actualY, x, y) { + $scope.highLightBodyBasedOnIcolor = function (RGBColor) { + + //2. Find Actul Term No Based on Icolor. + var ActualTermNo = $scope.getActualTermNumber(RGBColor); + + //3. Find Term No List Based on ActualTermNo + var TermList = $scope.getTermNumberList(ActualTermNo); + + + //4. + + $scope.machedTermNoLocation = []; + for (var i = 0; i < TermList.length; i++) { + + var termNumber = parseInt(TermList[i]._TermNumber); + + //Match Term No List in each bodyRegion + $scope.getLocationsForMatchedTermsInWholeBody(termNumber); + } + } + + $scope.getLocationsForMatchedTermsInWholeBody = function (termNo) { + + for (var x = 0; x < $scope.ColoredImageSRC.length; x++) { + // alert('called for bodyRegionId: ' + $scope.MaskImageSRC[x].bodyRegionId); + var bodyRegionId = $scope.ColoredImageSRC[x].bodyRegionId; + + { + var scaledWidth = $scope.ColoredImageSRC[x].Width; + var scaledHeight = $scope.ColoredImageSRC[x].Height; + //var maskImg = $scope.ColoredImageSRC[x].SRC; + + + var coloredImg = $scope.ColoredImageSRC[x].SRC; + + var maskImg = $scope.GetMaskImageSource(coloredImg); + + + var scledX = $scope.ColoredImageSRC[x].x; + var scledY = $scope.ColoredImageSRC[x].y; + + + // 1. get mask canvas for this body region. + var maskCanvasID; + if ($scope.ColoredImageSRC[x].haveMirror == 'true') { + maskCanvasID = 'imageCanvas' + bodyRegionId + '_MR_mci'; + } + else { + maskCanvasID = 'imageCanvas' + bodyRegionId + '_mci'; + + } + var maskCanvas = document.getElementById(maskCanvasID); + var maskCanvasContext = maskCanvas.getContext("2d"); + debugger; + var maskImgData = maskCanvasContext.getImageData(0, 0, scaledWidth, scaledHeight); + + // 2. get coloured canvas for this body region. + + + var coloredImageDataVar; + var coloredImageDataMRVar + + if ($scope.ColoredImageSRC[x].haveMirror == 'true') { + + coloredImageDataVar = $rootScope.coloredImageMRCanvasList[parseInt(bodyRegionId)]; + } + else { + coloredImageDataVar = $rootScope.coloredImageCanvasList[parseInt(bodyRegionId - 1)]; + } + var grayImageDataVar; + var grayCanvas; + if ($scope.ColoredImageSRC[x].haveMirror == 'true') { + + //// 3. get mask canvas for this body region._MR + var grayCanvasID = 'imageCanvas' + bodyRegionId + '_MR'; + grayCanvas = document.getElementById(grayCanvasID); + var grayCanvasContext = grayCanvas.getContext("2d"); + var grayImageData = grayCanvasContext.getImageData(0, 0, scaledWidth, scaledHeight); + grayImageDataVar = grayImageData.data; + } + + else { + var grayCanvasID = 'imageCanvas' + bodyRegionId; + grayCanvas = document.getElementById(grayCanvasID); + var grayCanvasContext = grayCanvas.getContext("2d"); + var grayImageData = grayCanvasContext.getImageData(0, 0, scaledWidth, scaledHeight); + grayImageDataVar = grayImageData.data; + } + + var coloredImageDataVarMR; + var coloredImageDataMR + + + var counter = 0; + + var imageDataVar = maskImgData.data; + + // var previousBRID; + + var counter = 0; + + + var n = maskImgData.data.length; + + for (var i = 0; i < n; i += 4) { + + + var RED = imageDataVar[i] - 9; + var GREEN = imageDataVar[i + 1] - 9; + var BLUE = imageDataVar[i + 2] - 9; + + var Red; + var Green; + var Blue; + var zero = "0"; + + if ((RED).toString().length != 2) { + Red = zero.concat((RED).toString()) + } + else { + Red = (RED).toString() + } + if ((GREEN).toString().length != 2) { + Green = zero.concat((GREEN).toString()) + } + else { + Green = (GREEN).toString() + + } + if ((BLUE).toString().length != 2) { + Blue = zero.concat((BLUE).toString()) + } + else { + Blue = (BLUE).toString() + + } + + var Icolor = (Red + Green + Blue); + // alert('Icolor: ' + Icolor) + + if (parseInt(termNo) == parseInt(Icolor)) { + + counter++; + var have = $scope.machedIcolorInBodyRegion.indexOf(bodyRegionId); + + +<<<<<<< HEAD + if (have == -1) { + $scope.machedBodyRegion.push(bodyRegionId); +======= + if (have == -1) + { + $scope.machedIcolorInBodyRegion.push(bodyRegionId); +>>>>>>> 06cddfd0f16578a9c42e80367bb28ee0cede2c3e + } + else { + + } + + + //previousGrayColoredData = i; + if (coloredImageDataVar != null) { + + + var RED_coloredImage = coloredImageDataVar[i]; + + grayImageDataVar[i] = RED_coloredImage; + + + var GREEN_coloredImage = coloredImageDataVar[i + 1]; + grayImageDataVar[i + 1] = GREEN_coloredImage; + + var BLUE_coloredImage = coloredImageDataVar[i + 2]; + grayImageDataVar[i + 2] = BLUE_coloredImage; + + + var ALPHA_coloredImage = coloredImageDataVar[i + 3]; + grayImageDataVar[i + 3] = ALPHA_coloredImage; + + + } + + } + + + } + + grayCanvasContext.putImageData(grayImageData, 0, 0); + } + } + + + } + + $scope.GetRGBColor = function (maskCanvasContext, actulalX, actualY, x, y) { - var pixelData = canvasContextForRGB.getImageData(Math.round(actulalX - x), Math.round(actualY - y), 1, 1); + var pixelData = maskCanvasContext.getImageData(Math.round(actulalX - x), Math.round(actualY - y), 1, 1); pixelData.data[0] = pixelData.data[0] - 9; pixelData.data[1] = pixelData.data[1] - 9; @@ -1218,6 +1620,8 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo //layer change function $scope.LayerChange = function () { + // alert('layer chnage') + var canvasDiv = document.getElementById('canvasDiv'); $scope.imageVerticalScrollPosition = canvasDiv.scrollTop; $scope.imageHorizontlScrollPosition = canvasDiv.scrollLeft; @@ -1228,6 +1632,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo if ($scope.isTransparencyActivated) { + //crete temp canavs to store the original data which will be used to chnange the transparency if (document.getElementById('tempCanvas') != null) { $('#tempCanvas').remove(); @@ -1281,6 +1686,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo // alert(' $.each(BodyRegionDictionary3. bodyRegionRight: ' + bodyRegionRight + ', bodyRegionBottom: ' + bodyRegionBottom) if (TransparencyBoxStartX <= bodyRegionRight && value.X <= transparencyBoxRight && TransparencyBoxStartY <= bodyRegionBottom && value.Y <= transparencyBoxBottom) { //var transNumber = parseInt(document.getElementById("txtTransparencyChange").value); + // debugger; $scope.layerNumber = parseInt(txtlayerNumber.value); @@ -1292,6 +1698,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo } else { + $scope.currentLayerNumber = parseInt($('#txtlayerNumber').val()); $rootScope.isLoading = true; $('#spinner').css('visibility', 'visible'); @@ -1317,6 +1724,8 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo $timeout(function () { $scope.highLightBody() }, 350); + + } } @@ -1330,7 +1739,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo //alert('Disabled wait cursor is done.See val :' + $rootScope.isLoading); } - + $scope.changeLayer = function () { console.log('changeLayer'); // alert('slide') @@ -1353,6 +1762,175 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo } } + $scope.createDynamicSpeechBubble = function (event, text, x, y) { + + if (event.ctrlKey) { + + $scope.multiAnnotationIsON = true; + + $scope.i = $scope.i + 1; + // var a = $("#sppeachBubble").find('span').html(); + // alert(a); + var sub_id = "black" + $scope.i; + $("#canvasDiv").append("
" + text + "
"); + + + $scope.speachBubbleArray.push({ xaxis: x, yaxis: y, ids: sub_id }); + + $('.appendDragg').draggable({ + drag: function (evt) { + $(this).prev('div').css("display", "none"); + var bor_id = $(this).next('div').attr('id'); + var sub_id1 = $(this).attr('id'); + var verticalScrollPosition = canvasDiv.scrollTop; + var horizontlScrollPosition = canvasDiv.scrollLeft; + for (var m = 0; m <= $scope.speachBubbleArray.length - 1; m++) { + if ($scope.speachBubbleArray[m].ids == sub_id1) { + + $scope.angle1($scope.speachBubbleArray[m].xaxis, $scope.speachBubbleArray[m].yaxis, evt.pageX + horizontlScrollPosition - $('#canvasDiv').offset().left, evt.pageY + verticalScrollPosition - $('#canvasDiv').offset().top, bor_id); + break; + + } + } + + }, + }); + + + + $('.dynCross').on('click', function (evt) { + $(this).parent().parent().parent().css('display', 'none'); + + // $("#bord").css("display", "none"); + // $("#dot").css("display", "none"); + + + }); + + + } + + + else { + $scope.multiAnnotationIsON = false; + + $(".com").css("display", "none"); + $("#bord").css({ "width": "0px", "display": "none" }); +<<<<<<< HEAD + $('' + + '
').appendTo('#canvasDiv'); - $('#speechBubble').on('click', '.BubbleCloseBtn', function (e) { + $('#speechBubble').on('click', '.BubbleCloseBtn', function (evt) { $('#speechBubble').css('display', 'none'); }); @@ -1374,6 +1952,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo $scope.createTransparencyBox = function () { + // debugger // alert('transparency clcked') @@ -1471,6 +2050,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo // $selection.remove(); // debugger; + $scope.currentLayerNumber = parseInt($('#txtlayerNumber').val()); $('.rectangle').remove(); var currentMousePosition = $scope.getMousePos(e); @@ -1608,6 +2188,8 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo $('#btnTranparency').removeClass('btn-black'); $('#btnTranparency').addClass('tButtonActive'); + //debugger; + $('#txtlayerNumber').val((parseInt($scope.currentLayerNumber)) + 1); } $scope.loadTransparencyImage = function (bodyRegionId, Height, Width, X, Y, IsMirror, TransparencyBoxStartX, TransparencyEndX, TransparencyBoxStartY, TransparencyBoxEndY, scope, isLayerChanged, isTransparencyChanged) { @@ -1751,7 +2333,9 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo //do nothing } else if (isLayerChanged) { + // debugger $scope.layerNumber = parseInt($('#txtlayerNumber').val()); + } else { var currentLayer = parseInt($('#txtlayerNumber').val()); @@ -2004,7 +2588,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo PreviousBodyRegionX = XforTransImage; previousBodyRegionId = bodyRegionId; - $scope.layerNumber = parseInt($scope.layerNumber - 1); + // $scope.layerNumber = parseInt($scope.layerNumber - 1); } @@ -2014,6 +2598,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo + function resizeCanvas() { //debugger; // alert('reload') @@ -2227,10 +2812,10 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo var clickedCanvasMaskId = 'imageCanvas' + clickedBodyRegion + '_mci'; var maskCanvas = document.getElementById(clickedCanvasMaskId); - var canvasContextForRGB = maskCanvas.getContext("2d"); + var maskCanvasContext = maskCanvas.getContext("2d"); var imgX = Math.round(actulalX - parseInt(x.replace('px', ''))); var imgY = Math.round(actualY - parseInt(y.replace('px', ''))); - pixelData = canvasContextForRGB.getImageData(imgX, imgY, 1, 1); + pixelData = maskCanvasContext.getImageData(imgX, imgY, 1, 1); //trans layer image data @@ -2262,14 +2847,14 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo var clickedCanvasMaskId = 'imageCanvas' + clickedBodyRegion + '_mci'; var maskCanvas = document.getElementById(clickedCanvasMaskId); - var canvasContextForRGB = maskCanvas.getContext("2d"); + var maskCanvasContext = maskCanvas.getContext("2d"); //transparecncy canvas var maskCanvasTransId = 'transparencyTempCanvasMask_' + clickedBodyRegion + '_mci'; var maskCanvastrans = document.getElementById(maskCanvasTransId); var maskCanvasContexttrans = maskCanvastrans.getContext("2d"); - pixelData = canvasContextForRGB.getImageData(Math.round(actulalX - x), Math.round(actualY - y), 1, 1); + pixelData = maskCanvasContext.getImageData(Math.round(actulalX - x), Math.round(actualY - y), 1, 1); pixelDataTrans = maskCanvasContexttrans.getImageData(Math.round(actulalX - x), Math.round(actualY - y), 1, 1); var annotations = $scope.getAnnotationForTransparencyBox(pixelData, pixelDataTrans, $scope); @@ -2442,11 +3027,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo $scope.CloseTransparencyBox = function () { var tBox = document.getElementById('transparencyCanvas'); -<<<<<<< HEAD // debugger; -======= - // debugger; ->>>>>>> f02adb91be9d04918a612b7ac16241017c20e360 // alert('mouseDown is called'); if (tBox != null) { tBox.parentNode.removeChild(tBox) @@ -2457,10 +3038,11 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo //var txtTransparencyChange = document.getElementById("txtTransparencyChange"); //txtTransparencyChange.value = 0; // document.getElementById('txtLayerNumber').value = 0; - $("#txtlayerNumber").val(parseInt($scope.layerNumber)); + // debugger; - $('#layerChangeSlider').slider("option", "value", parseInt($scope.totalLayers) - parseInt($scope.layerNumber)); + $('#layerChangeSlider').slider("option", "value", parseInt($scope.totalLayers) - parseInt($scope.currentLayerNumber)); + $("#txtlayerNumber").val(parseInt($scope.currentLayerNumber)); if (document.getElementById('tempCanvas') != null) { @@ -2485,6 +3067,9 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo //$("canvas[name*='transparencyTempCanvas']").nextUntil($("canvas[name*='transparencyTempCanvas']")) //.remove(); + $scope.layerNumber = $scope.currentLayerNumber; + $scope.transNumber = 50; + $('.slider').value = 50; } $('#transparencyScale').css('visibility', 'hidden'); @@ -2562,20 +3147,28 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo } } - + $scope.Zoom = function () { $scope.flushCanvas(); if ($scope.zoomInOut == 25) { $scope.zoomInOut = 75; - + } else { $scope.zoomInOut = 25; } $scope.CalculateImageCordinates($scope.viewOrientationId); + if ($scope.zoomInOut == 25) + $('#canvasDiv').scrollLeft(0) + else + $('#canvasDiv').scrollLeft($('#canvasDiv').width() / 2) + //remove annotation speech bubble + if ($('#speechBubble').length > 0) { + $('#speechBubble').remove(); + } } $scope.flushCanvas = function () { @@ -2583,86 +3176,227 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo var id; + var maskId; if (value.haveMirror == 'true') { id = 'imageCanvas' + value.bodyRegionId + '_MR'; + maskId = 'imageCanvas' + value.bodyRegionId + '_MR_mci' } else { id = 'imageCanvas' + value.bodyRegionId; + maskId = 'imageCanvas' + value.bodyRegionId + '_mci'; } var canvas = document.getElementById(id); document.getElementById('canvasDiv').removeChild(canvas); + + var maskcanvas = document.getElementById(maskId); + document.getElementById('canvasDiv').removeChild(maskcanvas); + + var modestyCanvases = $("canvas[id*='imageCanvasmodestyImg']"); + for (var i = 0; i < modestyCanvases.length; i++) { + modestyCanvases[i].remove(); + } }); } $scope.enableHighlight = function () { - $scope.isHighLight = true; + $rootScope.isHighLight = true; // alert('enableHighlight is called'); $scope.highLightBody(); } + $scope.highLightBody = function () { - // alert('highlight body is called'); - angular.forEach($scope.ColoredImageSRC, function (value, key) { + if ($rootScope.isHighLight == true) { - var id; - if (value.haveMirror == 'true') { - id = 'imageCanvas' + value.bodyRegionId + '_MR'; - } - else { - id = 'imageCanvas' + value.bodyRegionId; - } + angular.forEach($scope.ColoredImageSRC, function (value, key) { + var id; + if (value.haveMirror == 'true') { + id = 'imageCanvas' + value.bodyRegionId + '_MR'; + } + else { + id = 'imageCanvas' + value.bodyRegionId; + } + + var imageCanvas = document.getElementById(id); + + //var coloredCanvasID = 'imageCanvas' + bodyRegionId; + //var coloredCanvas = document.getElementById(coloredCanvasID); + + var width = value.Width; + var ht = value.Height; - var imageCanvas = document.getElementById(id); + var coloredCanvasContext = imageCanvas.getContext("2d"); + var coloredImageData = coloredCanvasContext.getImageData(0, 0, width, ht); + var coloredImageDataVar = coloredImageData.data; - var context_gray = imageCanvas.getContext('2d'); - var dataURL = imageCanvas.toDataURL(); + if (value.haveMirror == 'true') { + $rootScope.coloredImageMRCanvasList[parseInt(value.bodyRegionId)] = coloredImageDataVar; + } + else { + //$rootScope.coloredImageMRCanvasList[parseInt(value.bodyRegionId - 1)] = 1; + $rootScope.coloredImageCanvasList[parseInt(value.bodyRegionId - 1)] = coloredImageDataVar; + } - var img = new Image(); - img.src = dataURL; + //$rootScope.coloredImageCanvasList.push(parts); - var DAData = new BitmapData(img.width, img.height); - DAData.draw(img); - var RED = 0.3086; // luminance contrast value for red - var GREEN = 0.694; // luminance contrast value for green - var BLUE = 0.0820; // luminance contrast value for blue - var RGB = [RED, GREEN, BLUE, 0, 0]; - var RGB2 = [RED, GREEN, BLUE, 0, 0]; - var RGB3 = [RED, GREEN, BLUE, 0, 0]; - var ALPHA = [0, 0, 0, 1, 0]; + var context_gray = imageCanvas.getContext('2d'); - var rgbPx = RGB.concat(RGB2); - var rgbPx2 = rgbPx.concat(RGB3); - var matrix = rgbPx2.concat(ALPHA); - var zeroPoint = new Point(); - var grayScale = new ColorMatrixFilter(matrix); - DAData.applyFilter(DAData, DAData.rect, zeroPoint, grayScale); + var dataURL = imageCanvas.toDataURL(); - context_gray.putImageData(DAData.data, 0, 0) - }); + var img = new Image(); + img.src = dataURL; + + +<<<<<<< HEAD + img.onload = function () { + console.log(Math.max(img.width) + ', ' + Math.max(img.height)) + + var DAData = new BitmapData(Math.max(img.width), Math.max(img.height)); + DAData.draw(img); + var RED = 0.3086; // luminance contrast value for red + var GREEN = 0.694; // luminance contrast value for green + var BLUE = 0.0820; // luminance contrast value for blue + + var RGB = [RED, GREEN, BLUE, 0, 0]; + var RGB2 = [RED, GREEN, BLUE, 0, 0]; + var RGB3 = [RED, GREEN, BLUE, 0, 0]; + var ALPHA = [0, 0, 0, 1, 0]; + + var rgbPx = RGB.concat(RGB2); + var rgbPx2 = rgbPx.concat(RGB3); + var matrix = rgbPx2.concat(ALPHA); + + var zeroPoint = new Point(); + var grayScale = new ColorMatrixFilter(matrix); + DAData.applyFilter(DAData, DAData.rect, zeroPoint, grayScale); + + context_gray.putImageData(DAData.data, 0, 0) + +======= + + img.onload = function () { + console.log(Math.max(img.width) + ', ' + Math.max(img.height)) + var DAData = new BitmapData(Math.max(img.width), Math.max(img.height)); + DAData.draw(img); + var RED = 0.3086; // luminance contrast value for red + var GREEN = 0.694; // luminance contrast value for green + var BLUE = 0.0820; // luminance contrast value for blue + + var RGB = [RED, GREEN, BLUE, 0, 0]; + var RGB2 = [RED, GREEN, BLUE, 0, 0]; + var RGB3 = [RED, GREEN, BLUE, 0, 0]; + var ALPHA = [0, 0, 0, 1, 0]; + + var rgbPx = RGB.concat(RGB2); + var rgbPx2 = rgbPx.concat(RGB3); + var matrix = rgbPx2.concat(ALPHA); + + var zeroPoint = new Point(); + var grayScale = new ColorMatrixFilter(matrix); + DAData.applyFilter(DAData, DAData.rect, zeroPoint, grayScale); + + context_gray.putImageData(DAData.data, 0, 0) + +>>>>>>> 06cddfd0f16578a9c42e80367bb28ee0cede2c3e + var grayImageData = context_gray.getImageData(0, 0, width, ht); + var grayImageImageDataVar = grayImageData.data; + + if (value.haveMirror == 'true') { + $rootScope.grayImageMRDataList[parseInt(value.bodyRegionId)] = grayImageData; + } + else { + //$rootScope.coloredImageMRCanvasList[parseInt(value.bodyRegionId - 1)] = 1; +<<<<<<< HEAD +======= + + $rootScope.grayImageDataList[parseInt(value.bodyRegionId - 1)] = grayImageData; + } + } +>>>>>>> 06cddfd0f16578a9c42e80367bb28ee0cede2c3e + + $rootScope.grayImageDataList[parseInt(value.bodyRegionId - 1)] = grayImageData; + } + } + + }); + + // alert('length: '+ $scope.coloredImageCanvasList.length); + + } + + if ($scope.previousSelectedTermList.length > 0) { + for (var i = 0; i < $scope.previousSelectedTermList.length; i++) { + $scope.highLightBodyBasedOnIcolor($scope.previousSelectedTermList[i]); + + } + } } + $scope.applyGrayMatrix = function (img, context_gray) { + var DAData = new BitmapData(img.width, img.height); + DAData.draw(img); + var RED = 0.3086; // luminance contrast value for red + var GREEN = 0.694; // luminance contrast value for green + var BLUE = 0.0820; // luminance contrast value for blue + + var RGB = [RED, GREEN, BLUE, 0, 0]; + var RGB2 = [RED, GREEN, BLUE, 0, 0]; + var RGB3 = [RED, GREEN, BLUE, 0, 0]; + var ALPHA = [0, 0, 0, 1, 0]; + + var rgbPx = RGB.concat(RGB2); + var rgbPx2 = rgbPx.concat(RGB3); + var matrix = rgbPx2.concat(ALPHA); + + var zeroPoint = new Point(); + var grayScale = new ColorMatrixFilter(matrix); + DAData.applyFilter(DAData, DAData.rect, zeroPoint, grayScale); + + context_gray.putImageData(DAData.data, 0, 0) + + var grayImageData = context_gray.getImageData(0, 0, width, ht); + var grayImageImageDataVar = grayImageData.data; + + } + + $scope.getActualTermNumber = function (iColor) { + $scope.actualTermNo = new jinqJs() + .from($scope.TermNumberData.TermData.Term) + .where('_TermNumber == ' + iColor) + .select('_ActualTermNumber'); + return $scope.actualTermNo[0]._ActualTermNumber; + } + + $scope.getTermNumberList = function (actualTermNo) { + $scope.termList = new jinqJs() + .from($scope.TermNumberData.TermData.Term) + .where('_ActualTermNumber == ' + actualTermNo) + .select(); + return $scope.termList; + } + $scope.OnGenderChange = function (event) { - // debugger; + //use $scope.correspondingBodyViewIds for getting correspnding viewid // alert('gender changed= ' + event.currentTarget.attributes[1].value) // $(".enableGender li").removeClass("active"); // $(event.currentTarget.attributes[2].value).parent().addClass("active"); - + var viewname = localStorage.getItem("currentViewTitle") var currentBodyViewId = $scope.correspondingBodyViewIds[$scope.voId]; if ((event.currentTarget.attributes[1].value == 'Male') && (localStorage.getItem("genderId") == 'Female')) { @@ -2672,6 +3406,9 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo $scope.loadSelectedBodyView(currentBodyViewId); + $('#daImagePanel')[0].childNodes[0].childNodes[0].innerHTML = localStorage.getItem("currentViewTitle").replace('Female', 'Male'); + $rootScope.isLoading = true; + } else if ((event.currentTarget.attributes[1].value == 'Female') && (localStorage.getItem("genderId") == 'Male')) { @@ -2680,7 +3417,9 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo $scope.loadSelectedBodyView(currentBodyViewId) + $('#daImagePanel')[0].childNodes[0].childNodes[0].innerHTML = localStorage.getItem("currentViewTitle").replace('Male', 'Female'); + $rootScope.isLoading = true; } @@ -2690,6 +3429,13 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo $scope.loadSelectedBodyView = function (currentBodyViewId) { + //remove transaprency scale + if ($('#transparencyScale') != null) { + + $('#transparencyScale').css('visibility', 'hidden'); + } + + $scope.voId = currentBodyViewId; var layerJsonPath = '~/../content/data/json/da/body-views/' + currentBodyViewId + '/da_dat_layer_' + currentBodyViewId + '.json'; @@ -2732,7 +3478,10 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo } $scope.OnViewChange = function (event) { + + $scope.layerNumber = 0; + // debugger; var selectedViewId = $scope.bodyViews[event.currentTarget.attributes[1].value]; $scope.viewOrientationId = selectedViewId; if (localStorage.getItem("genderId") == 'Male') { @@ -2745,10 +3494,15 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo } else $scope.voId = selectedViewId; + $rootScope.isLoading = true; -<<<<<<< HEAD $scope.loadSelectedBodyView($scope.voId); }; + + + //set selected view name as the title of jspanel + // $('#daImagePanel')[0].childNodes[0].childNodes[0].innerHTML = localStorage.getItem("genderId") +" "+ event.currentTarget.attributes[1].value; + } else { if (selectedViewId == 5) { @@ -2761,12 +3515,17 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo selectedViewId = $scope.correspondingBodyViewIds[selectedViewId];; if ($scope.voId != selectedViewId) { $scope.voId = selectedViewId; + $rootScope.isLoading = true; + $scope.loadSelectedBodyView($scope.voId); }; -======= ->>>>>>> f02adb91be9d04918a612b7ac16241017c20e360 - } + + // $('#daImagePanel')[0].childNodes[0].childNodes[0].innerHTML = localStorage.getItem("genderId") + " " + $scope.bodyViews[event.currentTarget.attributes[1].value; + + } + $('#daImagePanel')[0].childNodes[0].childNodes[0].innerHTML = localStorage.getItem("genderId") + " " + event.currentTarget.attributes[1].value; + localStorage.setItem("currentViewTitle", localStorage.getItem("genderId") + " " + event.currentTarget.attributes[1].value); } @@ -2784,7 +3543,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo paintCanvas.style.left = 0 + 'px'; paintCanvas.style.top = 0 + 'px'; // paintCanvas.className = 'col-lg-12'; - paintCanvas.style.backgroundColor = 'yellow'; + paintCanvas.style.backgroundColor = 'yellow'; paintCanvas.style.zIndex = '1100' //this is to get annoatation while annotation window is open paintCanvas.addEventListener('click', OnPaintCanvasClick); @@ -2803,10 +3562,6 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo // alert('show annotation') } -<<<<<<< HEAD -======= - var layerJsonPath = '~/../content/data/json/da/body-views/' + currentBodyViewId + '/da_dat_layer_' + currentBodyViewId + '.json'; ->>>>>>> f02adb91be9d04918a612b7ac16241017c20e360 } @@ -2814,19 +3569,9 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo $scope.lastX; $scope.lastY; var ctx; -<<<<<<< HEAD function OnPaintCanvasMouseDown(event) { - + if ($rootScope.isDrawingToolSelected == true) { -======= - //load json for annotations - // $http({ method: 'GET', url: '~/../content/data/json/da_dat_tm_sg_1.json' }).success(function (data) { - var termJsonPath = '~/../content/data/json/da/body-views/' + currentBodyViewId + '/da_dat_tm_sg_' + currentBodyViewId + '.json' ; - DataService.getAnotherJson(termJsonPath) - .then( - function (result) { - $scope.TermNumberData = result; ->>>>>>> f02adb91be9d04918a612b7ac16241017c20e360 //var mousePos = $scope.getMousePos(event) @@ -2844,7 +3589,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo } else - document.getElementById('paintCanvas').addEventListener('mousemove', OnPaintCanvasMouseMove, false) + document.getElementById('paintCanvas').addEventListener('mousemove', OnPaintCanvasMouseMove, false) } //ctx.moveTo(50, 50); @@ -2876,7 +3621,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo if ($scope.mousePressed) { var mousePos = $scope.getMousePos(event) - $rootScope.Draw(mousePos.x, mousePos.y, true,$scope.paintCanvasContext); + $rootScope.Draw(mousePos.x, mousePos.y, true, $scope.paintCanvasContext); } } } @@ -2884,21 +3629,73 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo -// $scope.Draw=function(x, y, isDown) { -// if (isDown) { -// $scope.paintCanvasContext.beginPath(); -// $scope.paintCanvasContext.strokeStyle = '#000000'; -// $scope.paintCanvasContext.lineWidth = 1//$('#selWidth').val(); -// $scope.paintCanvasContext.lineJoin = "round"; -// $scope.paintCanvasContext.moveTo($scope.lastX, $scope.lastY); -// $scope.paintCanvasContext.lineTo(x, y); -// $scope.paintCanvasContext.closePath(); -// $scope.paintCanvasContext.stroke(); -// } -// $scope.lastX = x; $scope.lastY = y; -//} + // $scope.Draw=function(x, y, isDown) { + // if (isDown) { + // $scope.paintCanvasContext.beginPath(); + // $scope.paintCanvasContext.strokeStyle = '#000000'; + // $scope.paintCanvasContext.lineWidth = 1//$('#selWidth').val(); + // $scope.paintCanvasContext.lineJoin = "round"; + // $scope.paintCanvasContext.moveTo($scope.lastX, $scope.lastY); + // $scope.paintCanvasContext.lineTo(x, y); + // $scope.paintCanvasContext.closePath(); + // $scope.paintCanvasContext.stroke(); + // } + // $scope.lastX = x; $scope.lastY = y; + //} + + //body highlight options functinality + $scope.LoadBodySystemList = function () { + + var currentBodyViewId = $scope.voId; + var systemListHtml = ''; + $('#bodySystem').append(systemListHtml); + var bodySystemDataPath = '~/../content/data/json/da/body-views/' + currentBodyViewId + '/da_dat_body_system_term_' + currentBodyViewId + '.json'; + DataService.getJson(bodySystemDataPath) + .then( + function (result) { + + $rootScope.BodySystemData = result; + + }, + function (error) { + console.log(error.statusText) + } + ) + + } + + $scope.HighlightBodysystem = function (event) { + var systemMatchedTermList = new jinqJs() + .from($rootScope.BodySystemData.BodySystem.BodySystemTerm) + .where('_SystemNumber == ' + event.currentTarget.id) + .select(); + + //color the body gray + $rootScope.isHighLight =true + $scope.highLightBody(); + //now highlight the selected body system in whole body + + var termNumber = parseInt(systemMatchedTermList[0]._TermNumber); + + //Match Term No List in each bodyRegion + $scope.getLocationsForMatchedTermsInWholeBody(termNumber, 0, 0); + //for (var i = 0; i < systemMatchedTermList.length; i++) { + + // var termNumber = parseInt(systemMatchedTermList[i]._TermNumber); + + // //Match Term No List in each bodyRegion + // $scope.getLocationsForMatchedTermsInWholeBody(termNumber, 0, 0); + //} + } }]