From aa28330878e8384164edcb89e24f3103c9409bb4 Mon Sep 17 00:00:00 2001 From: nikita Date: Thu, 2 Jun 2016 18:15:50 +0530 Subject: [PATCH] Transparency box resize and layer change is working now. Annotations are also working but having an issue, when we click on transaprency box, its changes the transparncy of box and shows annotation. Transparency should not be changed and also annotations are working with debugger. --- 400-SOURCECODE/AIAHTML5.Web/app/controllers/DAController.js | 643 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- 400-SOURCECODE/AIAHTML5.Web/app/views/da/da-view.html | 15 +++++++++++---- 2 files changed, 460 insertions(+), 198 deletions(-) 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")); + }); }, }) -- libgit2 0.21.4