diff --git a/400-SOURCECODE/AIAHTML5.Web/app/controllers/DAController.js b/400-SOURCECODE/AIAHTML5.Web/app/controllers/DAController.js index dcdefae..8b278ba 100644 --- a/400-SOURCECODE/AIAHTML5.Web/app/controllers/DAController.js +++ b/400-SOURCECODE/AIAHTML5.Web/app/controllers/DAController.js @@ -26,8 +26,8 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo $scope.TBDrawStartX; $scope.TBDrawStartY; - $scope.isHighLight = false; - $scope.coloredImageCanvasList = []; + $rootScope.isHighLight = false; + $rootScope.coloredImageCanvasList = []; $scope.zoomInOut = 75; @@ -839,7 +839,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo 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'); @@ -848,15 +848,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; @@ -993,8 +991,8 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo } imgCanvas.addEventListener('click', function (evt) { - - + // debugger; + var annotationText; var context = imgCanvas.getContext("2d"); @@ -1008,7 +1006,7 @@ 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"); var mousePos = $scope.getMousePos(evt); @@ -1024,33 +1022,62 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo 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); + - if (maskCanvasId.match('modestyImg') && RGBColor != '000000') { - RGBColor = DA[0].figLeafTermId; - annotationText = $scope.GetAnnotationBasedOnActualTermNo(RGBColor); - } - else if (maskCanvasId.match('modestyImg') && RGBColor == '000000') { - //if ($scope.voId == 11) { - // maskCanvasId = 'imageCanvas6_mci'; - // x = $('#imageCanvas6_mci').left; - // y = $('#imageCanvas6_mci').top; - //} - //else { - bodyRegionId = maskCanvasId.slice(-1); - maskCanvasId = 'imageCanvas' + bodyRegionId + '_mci'; - // } - var maskCanvas = document.getElementById(maskCanvasId); - var canvasContextForRGB = maskCanvas.getContext("2d"); - RGBColor = $scope.GetRGBColor(canvasContextForRGB, actulalX, actualY, x, y); - annotationText = $scope.GetAnnotationText(parseInt(RGBColor)); - } - else { - RGBColor = $scope.GetRGBColor(canvasContextForRGB, actulalX, actualY, x, y); - annotationText = $scope.GetAnnotationText(parseInt(RGBColor)); + 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, 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'; + // x = $('#imageCanvas6_mci').left; + // y = $('#imageCanvas6_mci').top; + //} + //else { + bodyRegionId = maskCanvasId.slice(-1); + maskCanvasId = 'imageCanvas' + bodyRegionId + '_mci'; + // } + var maskCanvas = document.getElementById(maskCanvasId); + var maskCanvasContext = maskCanvas.getContext("2d"); + RGBColor = $scope.GetRGBColor(maskCanvasContext, actulalX, actualY, x, y); + annotationText = $scope.GetAnnotationText(parseInt(RGBColor)); + } + else { + RGBColor = $scope.GetRGBColor(maskCanvasContext, actulalX, actualY, x, y); + annotationText = $scope.GetAnnotationText(parseInt(RGBColor)); + + } + if ($('#speechBubbleTrns').length > 0) $('#speechBubbleTrns').remove(); @@ -1067,9 +1094,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo }, false); - - - + var PI = Math.PI; var PI2 = PI * 2; var cw, ch, imgW, imgH, mouseX, mouseY; @@ -1099,9 +1124,309 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo } - $scope.GetRGBColor = function (canvasContextForRGB, actulalX, actualY, x, y) { + $scope.getLocationsForMatchedTermsInWholeBody = function (termNo, x, y) { + + 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 = 'imageCanvas' + bodyRegionId + '_mci'; + var maskCanvas = document.getElementById(maskCanvasID); + var maskCanvasContext = maskCanvas.getContext("2d"); + var maskImgData = maskCanvasContext.getImageData(0, 0, scaledWidth, scaledHeight); + + //// 2. get coloured canvas for this body region. + + var coloredImageDataVar = $rootScope.coloredImageCanvasList[parseInt(bodyRegionId - 1)]; + + + //var coloredCanvasContext = coloredCanvas.getContext("2d"); + //var coloredImageData = coloredCanvasContext.getImageData(0, 0, scaledWidth, scaledHeight); + //var coloredImageDataVar = coloredImageData.data; + + //var coloredCanvasID = 'imageCanvas' + bodyRegionId; + //var coloredCanvas = document.getElementById(coloredCanvasID); + //var coloredCanvasContext = coloredCanvas.getContext("2d"); + //var coloredImageData = coloredCanvasContext.getImageData(0, 0, scaledWidth, scaledHeight); + //var coloredImageDataVar = coloredImageData.data; + + //// 3. get mask canvas for this body region._MR + var grayCanvasID = 'imageCanvas' + bodyRegionId; + var grayCanvas = document.getElementById(grayCanvasID); + var grayCanvasContext = grayCanvas.getContext("2d"); + var grayImageData = grayCanvasContext.getImageData(0, 0, scaledWidth, scaledHeight); + var grayImageDataVar = grayImageData.data; + + + //var grayImageDataVarMR; + // var grayImageDataMR; + var coloredImageDataVarMR; + var coloredImageDataMR + + if (bodyRegionId == 6 || bodyRegionId == 5 || bodyRegionId == 4) { + //var grayCanvasMRID = 'GrayImageCanvas' + bodyRegionId + '_MR'; + //var grayCanvasMR = document.getElementById(grayCanvasMRID); + //var grayCanvasContextMR = grayCanvasMR.getContext("2d"); + //grayImageDataMR = grayCanvasContextMR.getImageData(0, 0, scaledWidth, scaledHeight); + //grayImageDataVarMR = grayImageDataMR.data; + + + + var coloredCanvasMRID = 'imageCanvas' + bodyRegionId + '_MR'; + var coloredCanvasMR = document.getElementById(coloredCanvasMRID); + var coloredCanvasContextMR = coloredCanvasMR.getContext("2d"); + coloredImageDataMR = coloredCanvasContextMR.getImageData(0, 0, scaledWidth, scaledHeight); + coloredImageDataVarMR = coloredImageDataMR.data; + } + + var counter = 0; + + var imageDataVar = maskImgData.data; + + // var previousBRID; + var n = maskImgData.data.length; + var counter = 0; + + + 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); + + + if (parseInt(termNo) == parseInt(Icolor)) { + counter++; + + + // var DAData = new BitmapData($scope.MaskImageSRC[x].Width, $scope.MaskImageSRC[x].Height); + // DAData.draw($scope.grayCanvasList[x].SRC); + // 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); + + // grayCanvasContext.putImageData(DAData.data, 0, 0) + // } + //} + + + //if (!isHighLighted) { + //alert('icolor matched with term no ' +termNo); + 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; + + //} + } + + + } + + //grayImageData.data = grayImageDataVar; + grayCanvasContext.putImageData(grayImageData, 0, 0); + + //if (!isHighLighted) { + // grayImageData.data = grayImageDataVar; + + // grayCanvasContext.putImageData(grayImageData, 0, 0); + // isHighLighted = true; + //} + //else { + //grayImageData.data = grayImageDataVar; + //grayCanvasContext.putImageData(grayImageData, 0, 0); + //} + + if (bodyRegionId == 6 || bodyRegionId == 5 || bodyRegionId == 4) { + + var grayCanvasMRID = 'GrayImageCanvas' + bodyRegionId + '_MR'; + var grayCanvasMR = document.getElementById(grayCanvasMRID); + document.getElementById('canvasDiv').removeChild(grayCanvasMR); + + var tempCanvasMR = document.createElement('canvas'); + tempCanvasMR.id = 'GrayImageCanvas' + bodyRegionId + '_MR'; + tempCanvasMR.style.position = "absolute"; + tempCanvasMR.style.left = scledX + 'px'; + tempCanvasMR.style.top = scledY + 'px'; + //tempCanvas.style.border = 'black 1px solid'; + tempCanvasMR.height = scaledHeight; + tempCanvasMR.width = scaledWidth; + + + var tempCtx = tempCanvasMR.getContext('2d'); + tempCtx.save(); + tempCtx.translate(scaledWidth, 0); + tempCtx.scale(-1, 1); + tempCtx.drawImage(grayCanvas, 0, 0); + + document.getElementById('canvasDiv').appendChild(tempCanvasMR); + + //cleaned up the old canvas + + + //tempCanvas.addEventListener() + + tempCanvasMR.addEventListener('click', function (evt) { + + //get mouse coordinate of mirror image click + var mousePos = getMousePos(evt); + //alert(mousePos.x + ',' + mousePos.y); + + var tempCanvasMR_context = tempCanvasMR.getContext("2d"); + var canvasId = tempCanvasMR_context.canvas.getAttribute('id'); + + var mirrorCanvasX = tempCanvasMR_context.canvas.offsetLeft; + var mirrorCanvasWidth = tempCanvasMR_context.canvas.clientWidth; + + // get mask canvas for it. + //var maskCanvasID = 'imageCanvas' + bodyRegionId + '_mci'; + //var maskCanvas = document.getElementById(maskCanvasID); + //var maskCanvasContext = maskCanvas.getContext("2d"); + + + // var canvasDiv = document.getElementById('canvasDiv'); + var verticalScrollPosition = canvasDiv.scrollTop; + var horizontlScrollPosition = canvasDiv.scrollLeft; + + var distanceXOnMirrorImage = (parseInt(mirrorCanvasX) + parseInt(mirrorCanvasWidth)) - (parseInt(mousePos.x) + horizontlScrollPosition);// - 135); + + var mirrorXOnNormalImage = parseInt(maskCanvasContext.canvas.offsetLeft) + parseInt(distanceXOnMirrorImage); + + var actulalX = mirrorXOnNormalImage + var actualY = mousePos.y + verticalScrollPosition + + + + var Icolor = $scope.getIcolorOnUserClick(maskCanvasContext, Math.round(actulalX - parseInt(maskCanvasContext.canvas.offsetLeft)), Math.round(actualY - y)); + + //2. Find Actul Term No Based on Icolor. + var ActualTermNo = $scope.getActualTermNumber(Icolor); + //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, 'Y'); + + $scope.getLocationsForMatchedTermsInWholeBody(termNumber, x, y); + } + + var annotationText = $scope.GetAnnotationText(parseInt(Icolor)); + + if ($('#speechBubble').length > 0) { + $('#speechBubble').remove(); + + createSpeechBubble(evt, annotationText, evt.pageX + horizontlScrollPosition - $('#canvasDiv').offset().left + 5, evt.pageY + verticalScrollPosition - $('#canvasDiv').offset().top - 50) + + } + else + createSpeechBubble(evt, annotationText, evt.pageX + horizontlScrollPosition - $('#canvasDiv').offset().left + 5, evt.pageY + verticalScrollPosition - $('#canvasDiv').offset().top - 50) + + + + }, false); + + tempCanvasMR.addEventListener('mousedown', function (evt) { + + //alert('mousedown') + }, false); + + + tempCanvasMR.addEventListener('mouseup', function (evt) { + //alert('mouseup') + + + }, false); + + + + + } + } + } + + + } + + $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; @@ -1286,7 +1611,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo $('#btnHighLight').removeClass('btn btn-black'); $('#btnHighLight').addClass('btn-primary'); - + $timeout(function () { $scope.highLightBody() }, 350); } @@ -2024,10 +2349,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo } - - - - + function resizeCanvas() { //debugger; // alert('reload') @@ -2241,10 +2563,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 @@ -2276,14 +2598,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); @@ -2606,16 +2928,18 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo } $scope.enableHighlight = function () { - $scope.isHighLight = true; + $rootScope.isHighLight = true; // alert('enableHighlight is called'); $scope.highLightBody(); } + + $scope.highLightBody = function () { - // alert('highlight body is called'); + //alert('highlight body is called'); angular.forEach($scope.ColoredImageSRC, function (value, key) { @@ -2629,8 +2953,27 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo var imageCanvas = document.getElementById(id); + //var coloredCanvasID = 'imageCanvas' + bodyRegionId; + //var coloredCanvas = document.getElementById(coloredCanvasID); + + var width = value.Width; + var ht = value.Height; + + var coloredCanvasContext = imageCanvas.getContext("2d"); + var coloredImageData = coloredCanvasContext.getImageData(0, 0, width, ht); + var coloredImageDataVar = coloredImageData.data; + + + + $rootScope.coloredImageCanvasList[parseInt (value.bodyRegionId -1)] = coloredImageDataVar; + + //$rootScope.coloredImageCanvasList.push(parts); + + + var context_gray = imageCanvas.getContext('2d'); + var dataURL = imageCanvas.toDataURL(); @@ -2662,8 +3005,28 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo }); + // alert('length: '+ $scope.coloredImageCanvasList.length); + } + + $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