diff --git a/400-SOURCECODE/AIAHTML5.Web/app/controllers/DAController.js b/400-SOURCECODE/AIAHTML5.Web/app/controllers/DAController.js index b760ff6..af5b282 100644 --- a/400-SOURCECODE/AIAHTML5.Web/app/controllers/DAController.js +++ b/400-SOURCECODE/AIAHTML5.Web/app/controllers/DAController.js @@ -21,21 +21,6 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo $scope.daCounter = 1; $scope.bagartDetails; - $scope.genderId = ""; - $scope.BodyViewData; - $scope.selectedGenderBodyViewData; - $scope.imagePath = ""; - $scope.BodyRegionData; - $scope.BodyRegionCordinatesData; - $scope.isTransparencyActivated; - $scope.BodyLayerData; - $scope.VocabTermData; - $scope.TermNumberData; - $scope.bodyViewId = 0; - //view specific constants - $scope.voId; - $scope.layerNumber; - $scope.daCounter = 1; $scope.isBodylayerdataLoaded = false; $scope.isBodyRegionDataLoaded = false; @@ -1156,11 +1141,80 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo $scope.imageVerticalScrollPosition = canvasDiv.scrollTop; $scope.imageHorizontlScrollPosition = canvasDiv.scrollLeft; - // debugger; - // $('#daLoaderLabel').css('visibility', 'visible'); - $rootScope.isLoading = true; - $('#spinner').css('visibility', 'visible'); + // debugger; + // $('#daLoaderLabel').css('visibility', 'visible'); + + + + 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(); + } + + if ($('#speechBubbleTrns').length > 0) { + $('#speechBubbleTrns').remove(); + } + var tempCanvas = document.createElement('canvas'); + tempCanvas.id = 'tempCanvas'; + $scope.tempCanvas = tempCanvas.id; + tempCanvas.height = $scope.transparencyCanvasHeight; + tempCanvas.width = $scope.transparencyCanvasWidth; + tempCanvas.style.position = "absolute"; + tempCanvas.style.left = 200 + 'px'; + tempCanvas.style.backgroundColor = "transparent"; + tempCanvas.style.visibility = 'hidden'; + document.getElementById('canvasDiv').appendChild(tempCanvas); + + // //debugger; + + var tCanvas = document.getElementById('transparencyCanvas'); + var tCanvasContext = tCanvas.getContext('2d'); + + var tCanvasHeight = parseInt((tCanvas.style.height).replace('px', '')); + + var tCanvasWidth = parseInt((tCanvas.style.width).replace('px', '')); + + + // var tCanvas = document.getElementById('transparencyCanvas'); + if (tCanvas != null) { + clearTransCanvas(); + } + var TransparencyBoxStartX = parseInt((tCanvas.style.left).replace('px', '')); + var TransparencyEndX = parseInt((tCanvas.style.left).replace('px', '')) + parseInt((tCanvas.style.width.replace('px', ''))); + var TransparencyBoxStartY = parseInt((tCanvas.style.top).replace('px', '')); + var TransparencyBoxEndY = parseInt((tCanvas.style.top).replace('px', '')) + parseInt((tCanvas.style.height).replace('px', '')); + var transparencyBoxBottom = parseInt(TransparencyBoxStartY) + parseInt(tCanvasHeight); + var transparencyBoxRight = parseInt(TransparencyBoxStartX) + parseInt(tCanvasWidth); + + var BodyRegionDictionary = $scope.BodyRegionCordinatesData; + + $.each(BodyRegionDictionary, function (index, value) { + //debugger; + // alert(' $.each(BodyRegionDictionary1') + + var bodyRegionRight = parseInt(value.X) + parseInt(value.Width); + var bodyRegionBottom = parseInt(value.Y) + parseInt(value.Height); + + // 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); + $scope.layerNumber = parseInt(txtlayerNumber.value); + + + $scope.loadTransparencyImage(value.bodyRegionId, value.Height, value.Width, value.X, value.Y, value.IsMirror, TransparencyBoxStartX, transparencyBoxRight, TransparencyBoxStartY, transparencyBoxBottom, $scope, true, false); + } + + + }) + + } + + else { + + $rootScope.isLoading = true; + $('#spinner').css('visibility', 'visible'); var canDiv = document.getElementById('canvasDiv'); var canDivChildCount = canDiv.childElementCount; if (canDivChildCount > 0) { @@ -1173,7 +1227,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo $('#canvasDiv').scrollTop($scope.imageVerticalScrollPosition) $timeout(function () { $scope.DisableProgressBar() }, 1000); - + } } @@ -1320,7 +1374,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo $selection.appendTo($container); } - this.removeEventListener('mousedown', arguments.callee); + // this.removeEventListener('mousedown', arguments.callee); }, false); @@ -1435,193 +1489,29 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo $scope.transparencyCanvasWidth = transparencyCanvas.width; //bind click listener - transparencyCanvas.addEventListener('click', function (evt) { - var pixelData; - var pixelDataTrans; - var mousePos = $scope.getMousePos(evt); - // alert(mousePos.x + ',' + mousePos.y); - - var canvasDiv = document.getElementById('canvasDiv'); - var verticalScrollPosition = canvasDiv.scrollTop; - var horizontlScrollPosition = canvasDiv.scrollLeft; - - - //We substracted 135, as the difference between flex and html coordinates for same organ is 135 - var actulalX = mousePos.x + horizontlScrollPosition; - var actualY = mousePos.y + verticalScrollPosition //- 135; //+ tomenuBarheight + titleBarheight + searchComboheight; - var clickedBodyRegion; - var x; - var y; - var isMirror; - var width; - $.each(BodyRegionDictionary, function (index, value) { - - var bodyRegionRight = parseInt(value.X) + parseInt(value.Width); - var bodyRegionBottom = parseInt(value.Y) + parseInt(value.Height); - if (actulalX <= bodyRegionRight && value.X <= actulalX && actualY <= bodyRegionBottom && value.Y <= actualY) { - - clickedBodyRegion = value.bodyRegionId; - x = value.X; - y = value.Y; - width = value.Width; - isMirror = value.IsMirror; - return false; - } - }) - - if (isMirror == "Yes") { - - var mirrorCanvasX = x; - var mirrorCanvasWidth = width; - - var clickedCanvasMaskId = 'imageCanvas' + clickedBodyRegion + '_mci'; - var clickedCanavs = document.getElementById(clickedCanvasMaskId); - - //if non mirrored canvas does not exist for this irror Body region then draw non mirrored image to get annotation - var clickedBodyRegionData = new jinqJs() - .from(BodyRegionDictionary) - .where('bodyRegionId == ' + clickedBodyRegion) - .select(); - - var nomMirroredBodyRegion = new jinqJs() - .from(clickedBodyRegionData) - .where('IsMirror == No') - .select(); - - - //debugger; - var oldMirrorMaskId = 'transparencyTempCanvasMask_' + clickedBodyRegion + '_mci'; - var oldMirrorMask = document.getElementById(oldMirrorMaskId); - if (oldMirrorMask != null) { - document.getElementById('canvasDiv').removeChild(oldMirrorMask); - } - var transparencyTempcanavsMask = document.createElement('canvas'); - transparencyTempcanavsMask.id = 'transparencyTempCanvasMask_' + clickedBodyRegion + '_mci'; - transparencyTempcanavsMask.height = nomMirroredBodyRegion[0].Height; - transparencyTempcanavsMask.width = nomMirroredBodyRegion[0].Width; - transparencyTempcanavsMask.style.position = "absolute"; - transparencyTempcanavsMask.style.left = nomMirroredBodyRegion[0].X + 'px' // x + "px"; - transparencyTempcanavsMask.style.top = nomMirroredBodyRegion[0].Y + "px"//y + "px"; - transparencyTempcanavsMask.style.visibility = 'hidden'; - - document.getElementById('canvasDiv').appendChild(transparencyTempcanavsMask); - - var tranparencyImgSrc = $scope.GetImageSource(clickedBodyRegion); - var tempMaskImg = new Image(); - var tranparencyMaskImgSrc = $scope.GetMaskImageSource(tranparencyImgSrc); - tempMaskImg.onload = function () { - var tempmaskCtx = transparencyTempcanavsMask.getContext('2d'); - tempmaskCtx.drawImage(tempMaskImg, 0, 0); - - //get x,y of non mirrored canvas for this body region - x = transparencyTempcanavsMask.style.left; - y = transparencyTempcanavsMask.style.top; - - var maskCanvasTransId = 'transparencyTempCanvasMask_' + clickedBodyRegion + '_mci'; - var maskCanvastrans = document.getElementById(maskCanvasTransId); - var maskCanvasContexttrans = maskCanvastrans.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(maskCanvasContexttrans.canvas.offsetLeft) + parseInt(distanceXOnMirrorImage); - - var actulalX = mirrorXOnNormalImage - var actualY = mousePos.y + verticalScrollPosition - + transparencyCanvas.addEventListener('click', TransparencyCanvasClickListener); + $(".ui-wrapper").css("z-index", "6000"); - var clickedCanvasMaskId = 'imageCanvas' + clickedBodyRegion + '_mci'; - var maskCanvas = document.getElementById(clickedCanvasMaskId); - var canvasContextForRGB = 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); - - - //trans layer image data - pixelDataTrans = maskCanvasContexttrans.getImageData(imgX, imgY, 1, 1); - // console.log('at the time' + pixelData.data[0]) - - var annotations = getAnnotationForTransparencyBox(pixelData, pixelDataTrans, $scope); - - if ($('#speechBubbleTrns').length > 0) { - $('#speechBubbleTrns').remove(); - - createSpeechBubbleOnTransparencyBox(evt, annotations.annotationT1, annotations.annotationT2, evt.pageX + horizontlScrollPosition - $('#canvasDiv').offset().left + 5, evt.pageY + verticalScrollPosition - $('#canvasDiv').offset().top - 50) - - } - else - createSpeechBubbleOnTransparencyBox(evt, annotations.annotationT1, annotations.annotationT2, evt.pageX + horizontlScrollPosition - $('#canvasDiv').offset().left + 5, evt.pageY + verticalScrollPosition - $('#canvasDiv').offset().top - 50) - - } - tempMaskImg.src = tranparencyMaskImgSrc;//"http://localhost/AIAHtml/" + tranparencyMaskImgSrc; - // tempMaskImg.src = "http://localhost/AIAHtml/" + tranparencyMaskImgSrc; - - - - - } - else { - - var clickedCanvasMaskId = 'imageCanvas' + clickedBodyRegion + '_mci'; - var maskCanvas = document.getElementById(clickedCanvasMaskId); - var canvasContextForRGB = 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); - - pixelDataTrans = maskCanvasContexttrans.getImageData(Math.round(actulalX - x), Math.round(actualY - y), 1, 1); - var annotations = getAnnotationForTransparencyBox(pixelData, pixelDataTrans, $scope); - - if ($('#speechBubbleTrns').length > 0) { - $('#speechBubbleTrns').remove(); - - createSpeechBubbleOnTransparencyBox(evt, annotations.annotationT1, annotations.annotationT2, evt.pageX + horizontlScrollPosition - $('#canvasDiv').offset().left + 5, evt.pageY + verticalScrollPosition - $('#canvasDiv').offset().top - 50) - - } - else - createSpeechBubbleOnTransparencyBox(evt, annotations.annotationT1, annotations.annotationT2, evt.pageX + horizontlScrollPosition - $('#canvasDiv').offset().left + 5, evt.pageY + verticalScrollPosition - $('#canvasDiv').offset().top - 50) - - } - //debugger; - - }); - + // $('#transparencyScale').modal('show'); + // this.removeEventListener('mouseup', arguments.callee); + // this.removeEventListener('mousedown', arguments.callee); + // this.removeEventListener('mousemove', arguments.callee); } - // alert(' $.each(BodyRegionDictionary3. bodyRegionRight: ' + bodyRegionRight + ', bodyRegionBottom: ' + bodyRegionBottom) if ($scope.TransparencyBoxStartX <= bodyRegionRight && value.X <= transparencyBoxRight && $scope.TransparencyBoxStartY <= bodyRegionBottom && value.Y <= transparencyBoxBottom) { $scope.loadTransparencyImage(value.bodyRegionId, value.Height, value.Width, value.X, value.Y, value.IsMirror, $scope.TransparencyBoxStartX, TransparencyEndX, $scope.TransparencyBoxStartY, TransparencyBoxEndY, $scope, false, false); } - - }); - - $(".ui-wrapper").css("z-index", "6000"); - - $('#transparencyScale').modal('show'); - this.removeEventListener('mouseup', arguments.callee); - this.removeEventListener('mousedown', arguments.callee); - this.removeEventListener('mousemove', arguments.callee); + }) }, false); } $scope.loadTransparencyImage = function(bodyRegionId, Height, Width, X, Y, IsMirror, TransparencyBoxStartX, TransparencyEndX, TransparencyBoxStartY, TransparencyBoxEndY, scope, isLayerChanged, isTransparencyChanged) { - //debugger; + var scope1 = angular.element(document.getElementById("DAView")).scope(); var transparencyCanvas = document.getElementById('transparencyCanvas'); @@ -1921,6 +1811,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo // imageD.data = imageData; // and put the imagedata back to the canvas + debugger tempCtx.putImageData(imageD, 0, 0); } @@ -1991,10 +1882,374 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo } + + + + function resizeCanvas() { + //debugger; + // alert('reload') + clearTransCanvas(); + if ($('#speechBubbleTrns').length > 0) { + $('#speechBubbleTrns').remove(); + } + var tCanvas = document.getElementById('transparencyCanvas'); + var tCanvasContext = tCanvas.getContext('2d'); + + var tCanvasHeight = parseInt((tCanvas.style.height).replace('px', '')); + + var tCanvasWidth = parseInt((tCanvas.style.width).replace('px', '')); + + var tBoxStartX = parseInt((tCanvas.style.left).replace('px', '')); + var tBoxEndX = parseInt((tCanvas.style.left).replace('px', '')) + parseInt((tCanvas.style.width.replace('px', ''))); + var tBoxStartY = parseInt((tCanvas.style.top).replace('px', '')); + var tBoxEndY = parseInt((tCanvas.style.top).replace('px', '')) + parseInt((tCanvas.style.height).replace('px', '')); + var transparencyBoxBottom = parseInt(tBoxStartY) + parseInt(tCanvasHeight); + var transparencyBoxRight = parseInt(tBoxStartX) + parseInt(tCanvasWidth); + + if (tCanvas != null) { + $('#transparencyCanvas').remove(); + } + + + $scope.isResized = true; + + + if (tCanvasHeight != $scope.transparencyCanvasHeight || tCanvasWidth != $scope.transparencyCanvasWidth) { + + + var transparencyCanvas = document.createElement('canvas'); + transparencyCanvas.id = 'transparencyCanvas'; + $scope.transparencyCanvas = tCanvas.id; + transparencyCanvas.height = tCanvasHeight; + transparencyCanvas.width = tCanvasWidth; + transparencyCanvas.style.position = "absolute"; + transparencyCanvas.style.left = tCanvas.style.left; // x + "px"; + transparencyCanvas.style.top = tCanvas.style.top//y + "px"; + transparencyCanvas.style.border = "black 1px solid"; + document.getElementById('canvasDiv').appendChild(transparencyCanvas); + + $('#transparencyCanvas').resizable({ handles: "e,s,se,w,n,ne,nw,sw", stop: function (event, ui) { resizeCanvas(); }, start: function (event, ui) { clearTransCanvas(); } }); + + } + $scope.transparencyCanvasHeight = tCanvasHeight; + $scope.transparencyCanvasWidth = tCanvasWidth; + + // debugger; + //create temp cavas to retain the original anavs data for use in transparency change as + //if u use original canvas data for transprency change then at 0 transparency all data will become transparent and if u increase transparency with this data then the canavs will be blank + if (document.getElementById('tempCanvas') != null) { + $('#tempCanvas').remove(); + } + var tempCanvas = document.createElement('canvas'); + tempCanvas.id = 'tempCanvas'; + $scope.tempCanvas = tempCanvas.id; + tempCanvas.height = $scope.transparencyCanvasHeight; + tempCanvas.width = $scope.transparencyCanvasWidth; + tempCanvas.style.position = "absolute"; + tempCanvas.style.left = 200 + 'px'; + tempCanvas.style.backgroundColor = "transparent"; + tempCanvas.style.visibility = 'hidden'; + // tempCanvas.style.border = "black 1px solid"; + + document.getElementById('canvasDiv').appendChild(tempCanvas); + + + var BodyRegionDictionary = $scope.BodyRegionCordinatesData; + + $scope.IncludedBodyRegions = []; + // $scope.layerNo = parseInt(document.getElementById('')) + var counter = 0; + $.each(BodyRegionDictionary, function (index, value) { + + var bodyRegionRight = parseInt(value.X) + parseInt(value.Width); + var bodyRegionBottom = parseInt(value.Y) + parseInt(value.Height); + var TBRight = parseInt((document.getElementById('transparencyCanvas').style.left).replace('px', '')) + parseInt((document.getElementById('transparencyCanvas').style.width).replace('px', '')); + var TBBottom = parseInt((document.getElementById('transparencyCanvas').style.top).replace('px', '')) + parseInt((document.getElementById('transparencyCanvas').style.height).replace('px', '')); + var TBStartX = parseInt((document.getElementById('transparencyCanvas').style.left).replace('px', '')); + var TBStartY = parseInt((document.getElementById('transparencyCanvas').style.top).replace('px', '')); + + + + + if (TBStartX <= bodyRegionRight && value.X <= TBRight && TBStartY <= bodyRegionBottom && value.Y <= TBBottom) { + + + $scope.loadTransparencyImage(value.bodyRegionId, value.Height, value.Width, value.X, value.Y, value.IsMirror, $scope.TransparencyBoxStartX, $scope.TransparencyEndX, $scope.TransparencyBoxStartY, $scope.TransparencyBoxEndY, $scope, false, false); + + } + + + }) + //bind click listener + //bind click listener + transparencyCanvas.addEventListener('click', TransparencyCanvasClickListener); + + + + // }); + $(".ui-wrapper").css("z-index", "6000"); + $scope.isResized = false; + } + + function TransparencyCanvasClickListener(evt) { + //alert('tb clicked') + debugger; + var pixelData; + var pixelDataTrans; + var mousePos = $scope.getMousePos(evt); + // alert(mousePos.x + ',' + mousePos.y); + + var canvasDiv = document.getElementById('canvasDiv'); + var verticalScrollPosition = canvasDiv.scrollTop; + var horizontlScrollPosition = canvasDiv.scrollLeft; + + + //We substracted 135, as the difference between flex and html coordinates for same organ is 135 + var actulalX = mousePos.x + horizontlScrollPosition; + var actualY = mousePos.y + verticalScrollPosition //- 135; //+ tomenuBarheight + titleBarheight + searchComboheight; + var clickedBodyRegion; + var x; + var y; + var isMirror; + var width; + var BodyRegionDictionary = $scope.BodyRegionCordinatesData; + $.each(BodyRegionDictionary, function (index, value) { + + var bodyRegionRight = parseInt(value.X) + parseInt(value.Width); + var bodyRegionBottom = parseInt(value.Y) + parseInt(value.Height); + if (actulalX <= bodyRegionRight && value.X <= actulalX && actualY <= bodyRegionBottom && value.Y <= actualY) { + + clickedBodyRegion = value.bodyRegionId; + x = value.X; + y = value.Y; + width = value.Width; + isMirror = value.IsMirror; + return false; + } + }) + + if (isMirror == "Yes") { + + var mirrorCanvasX = x; + var mirrorCanvasWidth = width; + + var clickedCanvasMaskId = 'imageCanvas' + clickedBodyRegion + '_mci'; + var clickedCanavs = document.getElementById(clickedCanvasMaskId); + + //if non mirrored canvas does not exist for this irror Body region then draw non mirrored image to get annotation + var clickedBodyRegionData = new jinqJs() + .from(BodyRegionDictionary) + .where('bodyRegionId == ' + clickedBodyRegion) + .select(); + + var nomMirroredBodyRegion = new jinqJs() + .from(clickedBodyRegionData) + .where('IsMirror == No') + .select(); + + + //debugger; + var oldMirrorMaskId = 'transparencyTempCanvasMask_' + clickedBodyRegion + '_mci'; + var oldMirrorMask = document.getElementById(oldMirrorMaskId); + if (oldMirrorMask != null) { + document.getElementById('canvasDiv').removeChild(oldMirrorMask); + } + var transparencyTempcanavsMask = document.createElement('canvas'); + transparencyTempcanavsMask.id = 'transparencyTempCanvasMask_' + clickedBodyRegion + '_mci'; + transparencyTempcanavsMask.height = nomMirroredBodyRegion[0].Height; + transparencyTempcanavsMask.width = nomMirroredBodyRegion[0].Width; + transparencyTempcanavsMask.style.position = "absolute"; + transparencyTempcanavsMask.style.left = nomMirroredBodyRegion[0].X + 'px' // x + "px"; + transparencyTempcanavsMask.style.top = nomMirroredBodyRegion[0].Y + "px"//y + "px"; + transparencyTempcanavsMask.style.visibility = 'hidden'; + + document.getElementById('canvasDiv').appendChild(transparencyTempcanavsMask); + + var tranparencyImgSrc = $scope.GetImageSource(clickedBodyRegion); + var tempMaskImg = new Image(); + var tranparencyMaskImgSrc = $scope.GetMaskImageSource(tranparencyImgSrc); + tempMaskImg.onload = function () { + var tempmaskCtx = transparencyTempcanavsMask.getContext('2d'); + tempmaskCtx.drawImage(tempMaskImg, 0, 0); + + //get x,y of non mirrored canvas for this body region + x = transparencyTempcanavsMask.style.left; + y = transparencyTempcanavsMask.style.top; + + var maskCanvasTransId = 'transparencyTempCanvasMask_' + clickedBodyRegion + '_mci'; + var maskCanvastrans = document.getElementById(maskCanvasTransId); + var maskCanvasContexttrans = maskCanvastrans.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(maskCanvasContexttrans.canvas.offsetLeft) + parseInt(distanceXOnMirrorImage); + + var actulalX = mirrorXOnNormalImage + var actualY = mousePos.y + verticalScrollPosition + + + + var clickedCanvasMaskId = 'imageCanvas' + clickedBodyRegion + '_mci'; + var maskCanvas = document.getElementById(clickedCanvasMaskId); + var canvasContextForRGB = 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); + + + //trans layer image data + pixelDataTrans = maskCanvasContexttrans.getImageData(imgX, imgY, 1, 1); + // console.log('at the time' + pixelData.data[0]) + + var annotations = $scope.getAnnotationForTransparencyBox(pixelData, pixelDataTrans, $scope); + + if ($('#speechBubbleTrns').length > 0) { + $('#speechBubbleTrns').remove(); + + createSpeechBubbleOnTransparencyBox(evt, annotations.annotationT1, annotations.annotationT2, evt.pageX + horizontlScrollPosition - $('#canvasDiv').offset().left + 5, evt.pageY + verticalScrollPosition - $('#canvasDiv').offset().top - 50) + + } + else + createSpeechBubbleOnTransparencyBox(evt, annotations.annotationT1, annotations.annotationT2, evt.pageX + horizontlScrollPosition - $('#canvasDiv').offset().left + 5, evt.pageY + verticalScrollPosition - $('#canvasDiv').offset().top - 50) + + } + tempMaskImg.src = "http://localhost/AIAHtml/" + tranparencyMaskImgSrc; + + + + + } + else { + + var clickedCanvasMaskId = 'imageCanvas' + clickedBodyRegion + '_mci'; + var maskCanvas = document.getElementById(clickedCanvasMaskId); + var canvasContextForRGB = 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); + + pixelDataTrans = maskCanvasContexttrans.getImageData(Math.round(actulalX - x), Math.round(actualY - y), 1, 1); + var annotations = $scope.getAnnotationForTransparencyBox(pixelData, pixelDataTrans, $scope); + + if ($('#speechBubbleTrns').length > 0) { + $('#speechBubbleTrns').remove(); + + $scope.createSpeechBubbleOnTransparencyBox(evt, annotations.annotationT1, annotations.annotationT2, evt.pageX + horizontlScrollPosition - $('#canvasDiv').offset().left + 5, evt.pageY + verticalScrollPosition - $('#canvasDiv').offset().top - 50) + + } + else + $scope.createSpeechBubbleOnTransparencyBox(evt, annotations.annotationT1, annotations.annotationT2, evt.pageX + horizontlScrollPosition - $('#canvasDiv').offset().left + 5, evt.pageY + verticalScrollPosition - $('#canvasDiv').offset().top - 50) + + } + //debugger; + } + function clearTransCanvas() { + + var tCanvas = document.getElementById('transparencyCanvas'); + if (tCanvas != null) { + var tCanvasContext = tCanvas.getContext('2d'); + tCanvasContext.clearRect(0, 0, parseInt(tCanvas.style.width), parseInt(tCanvas.style.height)); + } + + } + + + $scope.getAnnotationForTransparencyBox = function (pixelData, pixelDataTrans, scope) { + + + console.log('hkhkdfhkhi' + pixelData.data[0]) + pixelData.data[0] = pixelData.data[0] - 9; + pixelData.data[1] = pixelData.data[1] - 9; + pixelData.data[2] = pixelData.data[2] - 9; + + //trans pixel data + pixelDataTrans.data[0] = pixelDataTrans.data[0] - 9; + pixelDataTrans.data[1] = pixelDataTrans.data[1] - 9; + pixelDataTrans.data[2] = pixelDataTrans.data[2] - 9; + + var Red; + var Green; + var Blue; + var zero = "0"; + + if ((pixelData.data[0]).toString().length != 2) { + Red = zero.concat((pixelData.data[0]).toString()) + } + else { + Red = (pixelData.data[0]).toString() + } + if ((pixelData.data[1]).toString().length != 2) { + Green = zero.concat((pixelData.data[1]).toString()) + } + else { + Green = (pixelData.data[1]).toString() + + } + if ((pixelData.data[2]).toString().length != 2) { + Blue = zero.concat((pixelData.data[2]).toString()) + } + else { + Blue = (pixelData.data[2]).toString() + + } + var RGBColor = (Red + Green + Blue); + + + var annotationText1 = $scope.GetAnnotationText(parseInt(RGBColor)); + + //get annotation for trans canavs + var RedTrans; + var GreenTrans; + var BlueTrans; + var zero = "0"; + + if ((pixelDataTrans.data[0]).toString().length != 2) { + RedTrans = zero.concat((pixelDataTrans.data[0]).toString()) + } + else { + RedTrans = (pixelDataTrans.data[0]).toString() + } + if ((pixelDataTrans.data[1]).toString().length != 2) { + GreenTrans = zero.concat((pixelDataTrans.data[1]).toString()) + } + else { + GreenTrans = (pixelDataTrans.data[1]).toString() + + } + if ((pixelDataTrans.data[2]).toString().length != 2) { + BlueTrans = zero.concat((pixelDataTrans.data[2]).toString()) + } + else { + BlueTrans = (pixelDataTrans.data[2]).toString() + + } + var RGBColorTrans = (RedTrans + GreenTrans + BlueTrans); + + + var annotationText2 = $scope.GetAnnotationText(parseInt(RGBColorTrans)); + + return { + annotationT1: annotationText1, + annotationT2: annotationText2 + } + } + + $scope.createSpeechBubbleOnTransparencyBox = function (event, text1, text2, x, y) { $('#canvasDiv').css('cursor', 'pointer'); - $('
' + $('
' + '
' + '
' + text1 + '
' + text2 + '
' //+'
diff --git a/400-SOURCECODE/AIAHTML5.Web/app/views/da/da-view.html b/400-SOURCECODE/AIAHTML5.Web/app/views/da/da-view.html index 6188ed1..9d6ea02 100644 --- a/400-SOURCECODE/AIAHTML5.Web/app/views/da/da-view.html +++ b/400-SOURCECODE/AIAHTML5.Web/app/views/da/da-view.html @@ -150,14 +150,23 @@ $(window).load(function () { slide: function (event, ui) { // $("#txtlayerNumber").val(100 - ui.value); // basic math operation.. + + // $("#txtlayerNumber").val($("#layerChangeSlider").slider("value")); + + }, + stop: function (event, ui) { var la; + var rootScope = angular.element(document.getElementById("bo")).scope(); rootScope.$apply(function () { - rootScope.isLoading = true; + rootScope.isLoading = true; }) var scope = angular.element(document.getElementById("daView")).scope(); scope.$apply(function () { + if (scope.isTransparencyActivated) { + rootScope.isLoading = false; + } la = parseInt(scope.totalLayers) //- parseInt(scope.layerNumber); @@ -167,10 +176,8 @@ $(window).load(function () { scope.layerNumber = slideVal; scope.LayerChange(); - - }); - // $("#txtlayerNumber").val($("#layerChangeSlider").slider("value")); + }); }, })