ADAM / AIAHTML5

Commit aa28330878e8384164edcb89e24f3103c9409bb4

Authored by Nikita Kulshreshtha
1 parent 88e5a0cd

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.
Inline Side-by-side
Showing 2 changed files with 460 additions and 198 deletions
400-SOURCECODE/AIAHTML5.Web/app/controllers/DAController.js
  View file @aa28330
... ... @@ -21,21 +21,6 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
21 21 $scope.daCounter = 1;
22 22 $scope.bagartDetails;
23 23  
24   - $scope.genderId = "";
25   - $scope.BodyViewData;
26   - $scope.selectedGenderBodyViewData;
27   - $scope.imagePath = "";
28   - $scope.BodyRegionData;
29   - $scope.BodyRegionCordinatesData;
30   - $scope.isTransparencyActivated;
31   - $scope.BodyLayerData;
32   - $scope.VocabTermData;
33   - $scope.TermNumberData;
34   - $scope.bodyViewId = 0;
35   - //view specific constants
36   - $scope.voId;
37   - $scope.layerNumber;
38   - $scope.daCounter = 1;
39 24  
40 25 $scope.isBodylayerdataLoaded = false;
41 26 $scope.isBodyRegionDataLoaded = false;
... ... @@ -1156,11 +1141,80 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
1156 1141 $scope.imageVerticalScrollPosition = canvasDiv.scrollTop;
1157 1142 $scope.imageHorizontlScrollPosition = canvasDiv.scrollLeft;
1158 1143  
1159   - // debugger;
1160   - // $('#daLoaderLabel').css('visibility', 'visible');
1161   - $rootScope.isLoading = true;
1162   - $('#spinner').css('visibility', 'visible');
  1144 + // debugger;
  1145 + // $('#daLoaderLabel').css('visibility', 'visible');
  1146 +
  1147 +
  1148 +
  1149 + if ($scope.isTransparencyActivated) {
  1150 + //crete temp canavs to store the original data which will be used to chnange the transparency
  1151 + if (document.getElementById('tempCanvas') != null) {
  1152 + $('#tempCanvas').remove();
  1153 + }
  1154 +
  1155 + if ($('#speechBubbleTrns').length > 0) {
  1156 + $('#speechBubbleTrns').remove();
  1157 + }
  1158 + var tempCanvas = document.createElement('canvas');
  1159 + tempCanvas.id = 'tempCanvas';
  1160 + $scope.tempCanvas = tempCanvas.id;
  1161 + tempCanvas.height = $scope.transparencyCanvasHeight;
  1162 + tempCanvas.width = $scope.transparencyCanvasWidth;
  1163 + tempCanvas.style.position = "absolute";
  1164 + tempCanvas.style.left = 200 + 'px';
  1165 + tempCanvas.style.backgroundColor = "transparent";
  1166 + tempCanvas.style.visibility = 'hidden';
  1167 + document.getElementById('canvasDiv').appendChild(tempCanvas);
  1168 +
  1169 + // //debugger;
  1170 +
  1171 + var tCanvas = document.getElementById('transparencyCanvas');
  1172 + var tCanvasContext = tCanvas.getContext('2d');
  1173 +
  1174 + var tCanvasHeight = parseInt((tCanvas.style.height).replace('px', ''));
  1175 +
  1176 + var tCanvasWidth = parseInt((tCanvas.style.width).replace('px', ''));
  1177 +
  1178 +
  1179 + // var tCanvas = document.getElementById('transparencyCanvas');
  1180 + if (tCanvas != null) {
  1181 + clearTransCanvas();
  1182 + }
  1183 + var TransparencyBoxStartX = parseInt((tCanvas.style.left).replace('px', ''));
  1184 + var TransparencyEndX = parseInt((tCanvas.style.left).replace('px', '')) + parseInt((tCanvas.style.width.replace('px', '')));
  1185 + var TransparencyBoxStartY = parseInt((tCanvas.style.top).replace('px', ''));
  1186 + var TransparencyBoxEndY = parseInt((tCanvas.style.top).replace('px', '')) + parseInt((tCanvas.style.height).replace('px', ''));
  1187 + var transparencyBoxBottom = parseInt(TransparencyBoxStartY) + parseInt(tCanvasHeight);
  1188 + var transparencyBoxRight = parseInt(TransparencyBoxStartX) + parseInt(tCanvasWidth);
  1189 +
  1190 + var BodyRegionDictionary = $scope.BodyRegionCordinatesData;
  1191 +
  1192 + $.each(BodyRegionDictionary, function (index, value) {
  1193 + //debugger;
  1194 + // alert(' $.each(BodyRegionDictionary1')
  1195 +
  1196 + var bodyRegionRight = parseInt(value.X) + parseInt(value.Width);
  1197 + var bodyRegionBottom = parseInt(value.Y) + parseInt(value.Height);
  1198 +
1163 1199  
  1200 + // alert(' $.each(BodyRegionDictionary3. bodyRegionRight: ' + bodyRegionRight + ', bodyRegionBottom: ' + bodyRegionBottom)
  1201 + if (TransparencyBoxStartX <= bodyRegionRight && value.X <= transparencyBoxRight && TransparencyBoxStartY <= bodyRegionBottom && value.Y <= transparencyBoxBottom) {
  1202 + //var transNumber = parseInt(document.getElementById("txtTransparencyChange").value);
  1203 + $scope.layerNumber = parseInt(txtlayerNumber.value);
  1204 +
  1205 +
  1206 + $scope.loadTransparencyImage(value.bodyRegionId, value.Height, value.Width, value.X, value.Y, value.IsMirror, TransparencyBoxStartX, transparencyBoxRight, TransparencyBoxStartY, transparencyBoxBottom, $scope, true, false);
  1207 + }
  1208 +
  1209 +
  1210 + })
  1211 +
  1212 + }
  1213 +
  1214 + else {
  1215 +
  1216 + $rootScope.isLoading = true;
  1217 + $('#spinner').css('visibility', 'visible');
1164 1218 var canDiv = document.getElementById('canvasDiv');
1165 1219 var canDivChildCount = canDiv.childElementCount;
1166 1220 if (canDivChildCount > 0) {
... ... @@ -1173,7 +1227,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
1173 1227 $('#canvasDiv').scrollTop($scope.imageVerticalScrollPosition)
1174 1228  
1175 1229 $timeout(function () { $scope.DisableProgressBar() }, 1000);
1176   -
  1230 + }
1177 1231  
1178 1232 }
1179 1233  
... ... @@ -1320,7 +1374,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
1320 1374 $selection.appendTo($container);
1321 1375 }
1322 1376  
1323   - this.removeEventListener('mousedown', arguments.callee);
  1377 + // this.removeEventListener('mousedown', arguments.callee);
1324 1378 }, false);
1325 1379  
1326 1380  
... ... @@ -1435,193 +1489,29 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
1435 1489 $scope.transparencyCanvasWidth = transparencyCanvas.width;
1436 1490  
1437 1491 //bind click listener
1438   - transparencyCanvas.addEventListener('click', function (evt) {
1439   - var pixelData;
1440   - var pixelDataTrans;
1441   - var mousePos = $scope.getMousePos(evt);
1442   - // alert(mousePos.x + ',' + mousePos.y);
1443   -
1444   - var canvasDiv = document.getElementById('canvasDiv');
1445   - var verticalScrollPosition = canvasDiv.scrollTop;
1446   - var horizontlScrollPosition = canvasDiv.scrollLeft;
1447   -
1448   -
1449   - //We substracted 135, as the difference between flex and html coordinates for same organ is 135
1450   - var actulalX = mousePos.x + horizontlScrollPosition;
1451   - var actualY = mousePos.y + verticalScrollPosition //- 135; //+ tomenuBarheight + titleBarheight + searchComboheight;
1452   - var clickedBodyRegion;
1453   - var x;
1454   - var y;
1455   - var isMirror;
1456   - var width;
1457   - $.each(BodyRegionDictionary, function (index, value) {
1458   -
1459   - var bodyRegionRight = parseInt(value.X) + parseInt(value.Width);
1460   - var bodyRegionBottom = parseInt(value.Y) + parseInt(value.Height);
1461   - if (actulalX <= bodyRegionRight && value.X <= actulalX && actualY <= bodyRegionBottom && value.Y <= actualY) {
1462   -
1463   - clickedBodyRegion = value.bodyRegionId;
1464   - x = value.X;
1465   - y = value.Y;
1466   - width = value.Width;
1467   - isMirror = value.IsMirror;
1468   - return false;
1469   - }
1470   - })
1471   -
1472   - if (isMirror == "Yes") {
1473   -
1474   - var mirrorCanvasX = x;
1475   - var mirrorCanvasWidth = width;
1476   -
1477   - var clickedCanvasMaskId = 'imageCanvas' + clickedBodyRegion + '_mci';
1478   - var clickedCanavs = document.getElementById(clickedCanvasMaskId);
1479   -
1480   - //if non mirrored canvas does not exist for this irror Body region then draw non mirrored image to get annotation
1481   - var clickedBodyRegionData = new jinqJs()
1482   - .from(BodyRegionDictionary)
1483   - .where('bodyRegionId == ' + clickedBodyRegion)
1484   - .select();
1485   -
1486   - var nomMirroredBodyRegion = new jinqJs()
1487   - .from(clickedBodyRegionData)
1488   - .where('IsMirror == No')
1489   - .select();
1490   -
1491   -
1492   - //debugger;
1493   - var oldMirrorMaskId = 'transparencyTempCanvasMask_' + clickedBodyRegion + '_mci';
1494   - var oldMirrorMask = document.getElementById(oldMirrorMaskId);
1495   - if (oldMirrorMask != null) {
1496   - document.getElementById('canvasDiv').removeChild(oldMirrorMask);
1497   - }
1498   - var transparencyTempcanavsMask = document.createElement('canvas');
1499   - transparencyTempcanavsMask.id = 'transparencyTempCanvasMask_' + clickedBodyRegion + '_mci';
1500   - transparencyTempcanavsMask.height = nomMirroredBodyRegion[0].Height;
1501   - transparencyTempcanavsMask.width = nomMirroredBodyRegion[0].Width;
1502   - transparencyTempcanavsMask.style.position = "absolute";
1503   - transparencyTempcanavsMask.style.left = nomMirroredBodyRegion[0].X + 'px' // x + "px";
1504   - transparencyTempcanavsMask.style.top = nomMirroredBodyRegion[0].Y + "px"//y + "px";
1505   - transparencyTempcanavsMask.style.visibility = 'hidden';
1506   -
1507   - document.getElementById('canvasDiv').appendChild(transparencyTempcanavsMask);
1508   -
1509   - var tranparencyImgSrc = $scope.GetImageSource(clickedBodyRegion);
1510   - var tempMaskImg = new Image();
1511   - var tranparencyMaskImgSrc = $scope.GetMaskImageSource(tranparencyImgSrc);
1512   - tempMaskImg.onload = function () {
1513   - var tempmaskCtx = transparencyTempcanavsMask.getContext('2d');
1514   - tempmaskCtx.drawImage(tempMaskImg, 0, 0);
1515   -
1516   - //get x,y of non mirrored canvas for this body region
1517   - x = transparencyTempcanavsMask.style.left;
1518   - y = transparencyTempcanavsMask.style.top;
1519   -
1520   - var maskCanvasTransId = 'transparencyTempCanvasMask_' + clickedBodyRegion + '_mci';
1521   - var maskCanvastrans = document.getElementById(maskCanvasTransId);
1522   - var maskCanvasContexttrans = maskCanvastrans.getContext("2d");
1523   -
1524   -
1525   -
1526   -
1527   - var canvasDiv = document.getElementById('canvasDiv');
1528   - var verticalScrollPosition = canvasDiv.scrollTop;
1529   - var horizontlScrollPosition = canvasDiv.scrollLeft;
1530   -
1531   - var distanceXOnMirrorImage = (parseInt(mirrorCanvasX) + parseInt(mirrorCanvasWidth)) - (parseInt(mousePos.x) + horizontlScrollPosition);// - 135);
1532   -
1533   - var mirrorXOnNormalImage = parseInt(maskCanvasContexttrans.canvas.offsetLeft) + parseInt(distanceXOnMirrorImage);
1534   -
1535   - var actulalX = mirrorXOnNormalImage
1536   - var actualY = mousePos.y + verticalScrollPosition
1537   -
  1492 + transparencyCanvas.addEventListener('click', TransparencyCanvasClickListener);
1538 1493  
  1494 + $(".ui-wrapper").css("z-index", "6000");
1539 1495  
1540   - var clickedCanvasMaskId = 'imageCanvas' + clickedBodyRegion + '_mci';
1541   - var maskCanvas = document.getElementById(clickedCanvasMaskId);
1542   - var canvasContextForRGB = maskCanvas.getContext("2d");
1543   - var imgX = Math.round(actulalX - parseInt(x.replace('px', '')));
1544   - var imgY = Math.round(actualY - parseInt(y.replace('px', '')));
1545   - pixelData = canvasContextForRGB.getImageData(imgX, imgY, 1, 1);
1546   -
1547   -
1548   - //trans layer image data
1549   - pixelDataTrans = maskCanvasContexttrans.getImageData(imgX, imgY, 1, 1);
1550   - // console.log('at the time' + pixelData.data[0])
1551   -
1552   - var annotations = getAnnotationForTransparencyBox(pixelData, pixelDataTrans, $scope);
1553   -
1554   - if ($('#speechBubbleTrns').length > 0) {
1555   - $('#speechBubbleTrns').remove();
1556   -
1557   - createSpeechBubbleOnTransparencyBox(evt, annotations.annotationT1, annotations.annotationT2, evt.pageX + horizontlScrollPosition - $('#canvasDiv').offset().left + 5, evt.pageY + verticalScrollPosition - $('#canvasDiv').offset().top - 50)
1558   -
1559   - }
1560   - else
1561   - createSpeechBubbleOnTransparencyBox(evt, annotations.annotationT1, annotations.annotationT2, evt.pageX + horizontlScrollPosition - $('#canvasDiv').offset().left + 5, evt.pageY + verticalScrollPosition - $('#canvasDiv').offset().top - 50)
1562   -
1563   - }
1564   - tempMaskImg.src = tranparencyMaskImgSrc;//"http://localhost/AIAHtml/" + tranparencyMaskImgSrc;
1565   - // tempMaskImg.src = "http://localhost/AIAHtml/" + tranparencyMaskImgSrc;
1566   -
1567   -
1568   -
1569   -
1570   - }
1571   - else {
1572   -
1573   - var clickedCanvasMaskId = 'imageCanvas' + clickedBodyRegion + '_mci';
1574   - var maskCanvas = document.getElementById(clickedCanvasMaskId);
1575   - var canvasContextForRGB = maskCanvas.getContext("2d");
1576   -
1577   - //transparecncy canvas
1578   - var maskCanvasTransId = 'transparencyTempCanvasMask_' + clickedBodyRegion + '_mci';
1579   - var maskCanvastrans = document.getElementById(maskCanvasTransId);
1580   - var maskCanvasContexttrans = maskCanvastrans.getContext("2d");
1581   -
1582   - pixelData = canvasContextForRGB.getImageData(Math.round(actulalX - x), Math.round(actualY - y), 1, 1);
1583   -
1584   - pixelDataTrans = maskCanvasContexttrans.getImageData(Math.round(actulalX - x), Math.round(actualY - y), 1, 1);
1585   - var annotations = getAnnotationForTransparencyBox(pixelData, pixelDataTrans, $scope);
1586   -
1587   - if ($('#speechBubbleTrns').length > 0) {
1588   - $('#speechBubbleTrns').remove();
1589   -
1590   - createSpeechBubbleOnTransparencyBox(evt, annotations.annotationT1, annotations.annotationT2, evt.pageX + horizontlScrollPosition - $('#canvasDiv').offset().left + 5, evt.pageY + verticalScrollPosition - $('#canvasDiv').offset().top - 50)
1591   -
1592   - }
1593   - else
1594   - createSpeechBubbleOnTransparencyBox(evt, annotations.annotationT1, annotations.annotationT2, evt.pageX + horizontlScrollPosition - $('#canvasDiv').offset().left + 5, evt.pageY + verticalScrollPosition - $('#canvasDiv').offset().top - 50)
1595   -
1596   - }
1597   - //debugger;
1598   -
1599   - });
1600   -
  1496 + // $('#transparencyScale').modal('show');
  1497 + // this.removeEventListener('mouseup', arguments.callee);
  1498 + // this.removeEventListener('mousedown', arguments.callee);
  1499 + // this.removeEventListener('mousemove', arguments.callee);
1601 1500 }
1602   - // alert(' $.each(BodyRegionDictionary3. bodyRegionRight: ' + bodyRegionRight + ', bodyRegionBottom: ' + bodyRegionBottom)
1603 1501 if ($scope.TransparencyBoxStartX <= bodyRegionRight && value.X <= transparencyBoxRight && $scope.TransparencyBoxStartY <= bodyRegionBottom && value.Y <= transparencyBoxBottom) {
1604 1502  
1605 1503  
1606 1504 $scope.loadTransparencyImage(value.bodyRegionId, value.Height, value.Width, value.X, value.Y, value.IsMirror, $scope.TransparencyBoxStartX, TransparencyEndX, $scope.TransparencyBoxStartY, TransparencyBoxEndY, $scope, false, false);
1607 1505  
1608 1506 }
1609   -
1610   - });
1611   -
1612   - $(".ui-wrapper").css("z-index", "6000");
1613   -
1614   - $('#transparencyScale').modal('show');
1615   - this.removeEventListener('mouseup', arguments.callee);
1616   - this.removeEventListener('mousedown', arguments.callee);
1617   - this.removeEventListener('mousemove', arguments.callee);
  1507 + })
1618 1508 }, false);
1619 1509  
1620 1510 }
1621 1511  
1622 1512  
1623 1513 $scope.loadTransparencyImage = function(bodyRegionId, Height, Width, X, Y, IsMirror, TransparencyBoxStartX, TransparencyEndX, TransparencyBoxStartY, TransparencyBoxEndY, scope, isLayerChanged, isTransparencyChanged) {
1624   - //debugger;
  1514 +
1625 1515 var scope1 = angular.element(document.getElementById("DAView")).scope();
1626 1516 var transparencyCanvas = document.getElementById('transparencyCanvas');
1627 1517  
... ... @@ -1921,6 +1811,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
1921 1811  
1922 1812 // imageD.data = imageData;
1923 1813 // and put the imagedata back to the canvas
  1814 + debugger
1924 1815 tempCtx.putImageData(imageD, 0, 0);
1925 1816  
1926 1817 }
... ... @@ -1991,10 +1882,374 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
1991 1882 }
1992 1883  
1993 1884  
  1885 +
  1886 +
  1887 +
  1888 + function resizeCanvas() {
  1889 + //debugger;
  1890 + // alert('reload')
  1891 + clearTransCanvas();
  1892 + if ($('#speechBubbleTrns').length > 0) {
  1893 + $('#speechBubbleTrns').remove();
  1894 + }
  1895 + var tCanvas = document.getElementById('transparencyCanvas');
  1896 + var tCanvasContext = tCanvas.getContext('2d');
  1897 +
  1898 + var tCanvasHeight = parseInt((tCanvas.style.height).replace('px', ''));
  1899 +
  1900 + var tCanvasWidth = parseInt((tCanvas.style.width).replace('px', ''));
  1901 +
  1902 + var tBoxStartX = parseInt((tCanvas.style.left).replace('px', ''));
  1903 + var tBoxEndX = parseInt((tCanvas.style.left).replace('px', '')) + parseInt((tCanvas.style.width.replace('px', '')));
  1904 + var tBoxStartY = parseInt((tCanvas.style.top).replace('px', ''));
  1905 + var tBoxEndY = parseInt((tCanvas.style.top).replace('px', '')) + parseInt((tCanvas.style.height).replace('px', ''));
  1906 + var transparencyBoxBottom = parseInt(tBoxStartY) + parseInt(tCanvasHeight);
  1907 + var transparencyBoxRight = parseInt(tBoxStartX) + parseInt(tCanvasWidth);
  1908 +
  1909 + if (tCanvas != null) {
  1910 + $('#transparencyCanvas').remove();
  1911 + }
  1912 +
  1913 +
  1914 + $scope.isResized = true;
  1915 +
  1916 +
  1917 + if (tCanvasHeight != $scope.transparencyCanvasHeight || tCanvasWidth != $scope.transparencyCanvasWidth) {
  1918 +
  1919 +
  1920 + var transparencyCanvas = document.createElement('canvas');
  1921 + transparencyCanvas.id = 'transparencyCanvas';
  1922 + $scope.transparencyCanvas = tCanvas.id;
  1923 + transparencyCanvas.height = tCanvasHeight;
  1924 + transparencyCanvas.width = tCanvasWidth;
  1925 + transparencyCanvas.style.position = "absolute";
  1926 + transparencyCanvas.style.left = tCanvas.style.left; // x + "px";
  1927 + transparencyCanvas.style.top = tCanvas.style.top//y + "px";
  1928 + transparencyCanvas.style.border = "black 1px solid";
  1929 + document.getElementById('canvasDiv').appendChild(transparencyCanvas);
  1930 +
  1931 + $('#transparencyCanvas').resizable({ handles: "e,s,se,w,n,ne,nw,sw", stop: function (event, ui) { resizeCanvas(); }, start: function (event, ui) { clearTransCanvas(); } });
  1932 +
  1933 + }
  1934 + $scope.transparencyCanvasHeight = tCanvasHeight;
  1935 + $scope.transparencyCanvasWidth = tCanvasWidth;
  1936 +
  1937 + // debugger;
  1938 + //create temp cavas to retain the original anavs data for use in transparency change as
  1939 + //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
  1940 + if (document.getElementById('tempCanvas') != null) {
  1941 + $('#tempCanvas').remove();
  1942 + }
  1943 + var tempCanvas = document.createElement('canvas');
  1944 + tempCanvas.id = 'tempCanvas';
  1945 + $scope.tempCanvas = tempCanvas.id;
  1946 + tempCanvas.height = $scope.transparencyCanvasHeight;
  1947 + tempCanvas.width = $scope.transparencyCanvasWidth;
  1948 + tempCanvas.style.position = "absolute";
  1949 + tempCanvas.style.left = 200 + 'px';
  1950 + tempCanvas.style.backgroundColor = "transparent";
  1951 + tempCanvas.style.visibility = 'hidden';
  1952 + // tempCanvas.style.border = "black 1px solid";
  1953 +
  1954 + document.getElementById('canvasDiv').appendChild(tempCanvas);
  1955 +
  1956 +
  1957 + var BodyRegionDictionary = $scope.BodyRegionCordinatesData;
  1958 +
  1959 + $scope.IncludedBodyRegions = [];
  1960 + // $scope.layerNo = parseInt(document.getElementById(''))
  1961 + var counter = 0;
  1962 + $.each(BodyRegionDictionary, function (index, value) {
  1963 +
  1964 + var bodyRegionRight = parseInt(value.X) + parseInt(value.Width);
  1965 + var bodyRegionBottom = parseInt(value.Y) + parseInt(value.Height);
  1966 + var TBRight = parseInt((document.getElementById('transparencyCanvas').style.left).replace('px', '')) + parseInt((document.getElementById('transparencyCanvas').style.width).replace('px', ''));
  1967 + var TBBottom = parseInt((document.getElementById('transparencyCanvas').style.top).replace('px', '')) + parseInt((document.getElementById('transparencyCanvas').style.height).replace('px', ''));
  1968 + var TBStartX = parseInt((document.getElementById('transparencyCanvas').style.left).replace('px', ''));
  1969 + var TBStartY = parseInt((document.getElementById('transparencyCanvas').style.top).replace('px', ''));
  1970 +
  1971 +
  1972 +
  1973 +
  1974 + if (TBStartX <= bodyRegionRight && value.X <= TBRight && TBStartY <= bodyRegionBottom && value.Y <= TBBottom) {
  1975 +
  1976 +
  1977 + $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);
  1978 +
  1979 + }
  1980 +
  1981 +
  1982 + })
  1983 + //bind click listener
  1984 + //bind click listener
  1985 + transparencyCanvas.addEventListener('click', TransparencyCanvasClickListener);
  1986 +
  1987 +
  1988 +
  1989 + // });
  1990 + $(".ui-wrapper").css("z-index", "6000");
  1991 + $scope.isResized = false;
  1992 + }
  1993 +
  1994 + function TransparencyCanvasClickListener(evt) {
  1995 + //alert('tb clicked')
  1996 + debugger;
  1997 + var pixelData;
  1998 + var pixelDataTrans;
  1999 + var mousePos = $scope.getMousePos(evt);
  2000 + // alert(mousePos.x + ',' + mousePos.y);
  2001 +
  2002 + var canvasDiv = document.getElementById('canvasDiv');
  2003 + var verticalScrollPosition = canvasDiv.scrollTop;
  2004 + var horizontlScrollPosition = canvasDiv.scrollLeft;
  2005 +
  2006 +
  2007 + //We substracted 135, as the difference between flex and html coordinates for same organ is 135
  2008 + var actulalX = mousePos.x + horizontlScrollPosition;
  2009 + var actualY = mousePos.y + verticalScrollPosition //- 135; //+ tomenuBarheight + titleBarheight + searchComboheight;
  2010 + var clickedBodyRegion;
  2011 + var x;
  2012 + var y;
  2013 + var isMirror;
  2014 + var width;
  2015 + var BodyRegionDictionary = $scope.BodyRegionCordinatesData;
  2016 + $.each(BodyRegionDictionary, function (index, value) {
  2017 +
  2018 + var bodyRegionRight = parseInt(value.X) + parseInt(value.Width);
  2019 + var bodyRegionBottom = parseInt(value.Y) + parseInt(value.Height);
  2020 + if (actulalX <= bodyRegionRight && value.X <= actulalX && actualY <= bodyRegionBottom && value.Y <= actualY) {
  2021 +
  2022 + clickedBodyRegion = value.bodyRegionId;
  2023 + x = value.X;
  2024 + y = value.Y;
  2025 + width = value.Width;
  2026 + isMirror = value.IsMirror;
  2027 + return false;
  2028 + }
  2029 + })
  2030 +
  2031 + if (isMirror == "Yes") {
  2032 +
  2033 + var mirrorCanvasX = x;
  2034 + var mirrorCanvasWidth = width;
  2035 +
  2036 + var clickedCanvasMaskId = 'imageCanvas' + clickedBodyRegion + '_mci';
  2037 + var clickedCanavs = document.getElementById(clickedCanvasMaskId);
  2038 +
  2039 + //if non mirrored canvas does not exist for this irror Body region then draw non mirrored image to get annotation
  2040 + var clickedBodyRegionData = new jinqJs()
  2041 + .from(BodyRegionDictionary)
  2042 + .where('bodyRegionId == ' + clickedBodyRegion)
  2043 + .select();
  2044 +
  2045 + var nomMirroredBodyRegion = new jinqJs()
  2046 + .from(clickedBodyRegionData)
  2047 + .where('IsMirror == No')
  2048 + .select();
  2049 +
  2050 +
  2051 + //debugger;
  2052 + var oldMirrorMaskId = 'transparencyTempCanvasMask_' + clickedBodyRegion + '_mci';
  2053 + var oldMirrorMask = document.getElementById(oldMirrorMaskId);
  2054 + if (oldMirrorMask != null) {
  2055 + document.getElementById('canvasDiv').removeChild(oldMirrorMask);
  2056 + }
  2057 + var transparencyTempcanavsMask = document.createElement('canvas');
  2058 + transparencyTempcanavsMask.id = 'transparencyTempCanvasMask_' + clickedBodyRegion + '_mci';
  2059 + transparencyTempcanavsMask.height = nomMirroredBodyRegion[0].Height;
  2060 + transparencyTempcanavsMask.width = nomMirroredBodyRegion[0].Width;
  2061 + transparencyTempcanavsMask.style.position = "absolute";
  2062 + transparencyTempcanavsMask.style.left = nomMirroredBodyRegion[0].X + 'px' // x + "px";
  2063 + transparencyTempcanavsMask.style.top = nomMirroredBodyRegion[0].Y + "px"//y + "px";
  2064 + transparencyTempcanavsMask.style.visibility = 'hidden';
  2065 +
  2066 + document.getElementById('canvasDiv').appendChild(transparencyTempcanavsMask);
  2067 +
  2068 + var tranparencyImgSrc = $scope.GetImageSource(clickedBodyRegion);
  2069 + var tempMaskImg = new Image();
  2070 + var tranparencyMaskImgSrc = $scope.GetMaskImageSource(tranparencyImgSrc);
  2071 + tempMaskImg.onload = function () {
  2072 + var tempmaskCtx = transparencyTempcanavsMask.getContext('2d');
  2073 + tempmaskCtx.drawImage(tempMaskImg, 0, 0);
  2074 +
  2075 + //get x,y of non mirrored canvas for this body region
  2076 + x = transparencyTempcanavsMask.style.left;
  2077 + y = transparencyTempcanavsMask.style.top;
  2078 +
  2079 + var maskCanvasTransId = 'transparencyTempCanvasMask_' + clickedBodyRegion + '_mci';
  2080 + var maskCanvastrans = document.getElementById(maskCanvasTransId);
  2081 + var maskCanvasContexttrans = maskCanvastrans.getContext("2d");
  2082 +
  2083 +
  2084 +
  2085 +
  2086 + var canvasDiv = document.getElementById('canvasDiv');
  2087 + var verticalScrollPosition = canvasDiv.scrollTop;
  2088 + var horizontlScrollPosition = canvasDiv.scrollLeft;
  2089 +
  2090 + var distanceXOnMirrorImage = (parseInt(mirrorCanvasX) + parseInt(mirrorCanvasWidth)) - (parseInt(mousePos.x) + horizontlScrollPosition);// - 135);
  2091 +
  2092 + var mirrorXOnNormalImage = parseInt(maskCanvasContexttrans.canvas.offsetLeft) + parseInt(distanceXOnMirrorImage);
  2093 +
  2094 + var actulalX = mirrorXOnNormalImage
  2095 + var actualY = mousePos.y + verticalScrollPosition
  2096 +
  2097 +
  2098 +
  2099 + var clickedCanvasMaskId = 'imageCanvas' + clickedBodyRegion + '_mci';
  2100 + var maskCanvas = document.getElementById(clickedCanvasMaskId);
  2101 + var canvasContextForRGB = maskCanvas.getContext("2d");
  2102 + var imgX = Math.round(actulalX - parseInt(x.replace('px', '')));
  2103 + var imgY = Math.round(actualY - parseInt(y.replace('px', '')));
  2104 + pixelData = canvasContextForRGB.getImageData(imgX, imgY, 1, 1);
  2105 +
  2106 +
  2107 + //trans layer image data
  2108 + pixelDataTrans = maskCanvasContexttrans.getImageData(imgX, imgY, 1, 1);
  2109 + // console.log('at the time' + pixelData.data[0])
  2110 +
  2111 + var annotations = $scope.getAnnotationForTransparencyBox(pixelData, pixelDataTrans, $scope);
  2112 +
  2113 + if ($('#speechBubbleTrns').length > 0) {
  2114 + $('#speechBubbleTrns').remove();
  2115 +
  2116 + createSpeechBubbleOnTransparencyBox(evt, annotations.annotationT1, annotations.annotationT2, evt.pageX + horizontlScrollPosition - $('#canvasDiv').offset().left + 5, evt.pageY + verticalScrollPosition - $('#canvasDiv').offset().top - 50)
  2117 +
  2118 + }
  2119 + else
  2120 + createSpeechBubbleOnTransparencyBox(evt, annotations.annotationT1, annotations.annotationT2, evt.pageX + horizontlScrollPosition - $('#canvasDiv').offset().left + 5, evt.pageY + verticalScrollPosition - $('#canvasDiv').offset().top - 50)
  2121 +
  2122 + }
  2123 + tempMaskImg.src = "http://localhost/AIAHtml/" + tranparencyMaskImgSrc;
  2124 +
  2125 +
  2126 +
  2127 +
  2128 + }
  2129 + else {
  2130 +
  2131 + var clickedCanvasMaskId = 'imageCanvas' + clickedBodyRegion + '_mci';
  2132 + var maskCanvas = document.getElementById(clickedCanvasMaskId);
  2133 + var canvasContextForRGB = maskCanvas.getContext("2d");
  2134 +
  2135 + //transparecncy canvas
  2136 + var maskCanvasTransId = 'transparencyTempCanvasMask_' + clickedBodyRegion + '_mci';
  2137 + var maskCanvastrans = document.getElementById(maskCanvasTransId);
  2138 + var maskCanvasContexttrans = maskCanvastrans.getContext("2d");
  2139 +
  2140 + pixelData = canvasContextForRGB.getImageData(Math.round(actulalX - x), Math.round(actualY - y), 1, 1);
  2141 +
  2142 + pixelDataTrans = maskCanvasContexttrans.getImageData(Math.round(actulalX - x), Math.round(actualY - y), 1, 1);
  2143 + var annotations = $scope.getAnnotationForTransparencyBox(pixelData, pixelDataTrans, $scope);
  2144 +
  2145 + if ($('#speechBubbleTrns').length > 0) {
  2146 + $('#speechBubbleTrns').remove();
  2147 +
  2148 + $scope.createSpeechBubbleOnTransparencyBox(evt, annotations.annotationT1, annotations.annotationT2, evt.pageX + horizontlScrollPosition - $('#canvasDiv').offset().left + 5, evt.pageY + verticalScrollPosition - $('#canvasDiv').offset().top - 50)
  2149 +
  2150 + }
  2151 + else
  2152 + $scope.createSpeechBubbleOnTransparencyBox(evt, annotations.annotationT1, annotations.annotationT2, evt.pageX + horizontlScrollPosition - $('#canvasDiv').offset().left + 5, evt.pageY + verticalScrollPosition - $('#canvasDiv').offset().top - 50)
  2153 +
  2154 + }
  2155 + //debugger;
  2156 + }
  2157 + function clearTransCanvas() {
  2158 +
  2159 + var tCanvas = document.getElementById('transparencyCanvas');
  2160 + if (tCanvas != null) {
  2161 + var tCanvasContext = tCanvas.getContext('2d');
  2162 + tCanvasContext.clearRect(0, 0, parseInt(tCanvas.style.width), parseInt(tCanvas.style.height));
  2163 + }
  2164 +
  2165 + }
  2166 +
  2167 +
  2168 + $scope.getAnnotationForTransparencyBox = function (pixelData, pixelDataTrans, scope) {
  2169 +
  2170 +
  2171 + console.log('hkhkdfhkhi' + pixelData.data[0])
  2172 + pixelData.data[0] = pixelData.data[0] - 9;
  2173 + pixelData.data[1] = pixelData.data[1] - 9;
  2174 + pixelData.data[2] = pixelData.data[2] - 9;
  2175 +
  2176 + //trans pixel data
  2177 + pixelDataTrans.data[0] = pixelDataTrans.data[0] - 9;
  2178 + pixelDataTrans.data[1] = pixelDataTrans.data[1] - 9;
  2179 + pixelDataTrans.data[2] = pixelDataTrans.data[2] - 9;
  2180 +
  2181 + var Red;
  2182 + var Green;
  2183 + var Blue;
  2184 + var zero = "0";
  2185 +
  2186 + if ((pixelData.data[0]).toString().length != 2) {
  2187 + Red = zero.concat((pixelData.data[0]).toString())
  2188 + }
  2189 + else {
  2190 + Red = (pixelData.data[0]).toString()
  2191 + }
  2192 + if ((pixelData.data[1]).toString().length != 2) {
  2193 + Green = zero.concat((pixelData.data[1]).toString())
  2194 + }
  2195 + else {
  2196 + Green = (pixelData.data[1]).toString()
  2197 +
  2198 + }
  2199 + if ((pixelData.data[2]).toString().length != 2) {
  2200 + Blue = zero.concat((pixelData.data[2]).toString())
  2201 + }
  2202 + else {
  2203 + Blue = (pixelData.data[2]).toString()
  2204 +
  2205 + }
  2206 + var RGBColor = (Red + Green + Blue);
  2207 +
  2208 +
  2209 + var annotationText1 = $scope.GetAnnotationText(parseInt(RGBColor));
  2210 +
  2211 + //get annotation for trans canavs
  2212 + var RedTrans;
  2213 + var GreenTrans;
  2214 + var BlueTrans;
  2215 + var zero = "0";
  2216 +
  2217 + if ((pixelDataTrans.data[0]).toString().length != 2) {
  2218 + RedTrans = zero.concat((pixelDataTrans.data[0]).toString())
  2219 + }
  2220 + else {
  2221 + RedTrans = (pixelDataTrans.data[0]).toString()
  2222 + }
  2223 + if ((pixelDataTrans.data[1]).toString().length != 2) {
  2224 + GreenTrans = zero.concat((pixelDataTrans.data[1]).toString())
  2225 + }
  2226 + else {
  2227 + GreenTrans = (pixelDataTrans.data[1]).toString()
  2228 +
  2229 + }
  2230 + if ((pixelDataTrans.data[2]).toString().length != 2) {
  2231 + BlueTrans = zero.concat((pixelDataTrans.data[2]).toString())
  2232 + }
  2233 + else {
  2234 + BlueTrans = (pixelDataTrans.data[2]).toString()
  2235 +
  2236 + }
  2237 + var RGBColorTrans = (RedTrans + GreenTrans + BlueTrans);
  2238 +
  2239 +
  2240 + var annotationText2 = $scope.GetAnnotationText(parseInt(RGBColorTrans));
  2241 +
  2242 + return {
  2243 + annotationT1: annotationText1,
  2244 + annotationT2: annotationText2
  2245 + }
  2246 + }
  2247 +
  2248 +
1994 2249 $scope.createSpeechBubbleOnTransparencyBox = function (event, text1, text2, x, y) {
1995 2250  
1996 2251 $('#canvasDiv').css('cursor', 'pointer');
1997   - $('<div id="speechBubbleTrns" class="BubbleDiv" style="display:visible; top:' + y + 'px; left:' + x + 'px;"> <div class="">'
  2252 + $('<div id="speechBubbleTrns" class="BubbleDiv" style="display:visible; top:' + y + 'px; left:' + x + 'px;z-index:7000"> <div class="">'
1998 2253 + '<div class="Bubble">'
1999 2254 + '<div class="BubbleCloseBtn"></div><div class="BubbleContent">' + text1 + '</div><div class="BubbleContent">' + text2 + '</div><div class="bottomLeftArrow"></div>'
2000 2255 //+'<div class="bottomRightArrow"></div><div class="topLeftArrow"></div><div class="topRightArrow"></div>
... ...
400-SOURCECODE/AIAHTML5.Web/app/views/da/da-view.html
  View file @aa28330
... ... @@ -150,14 +150,23 @@ $(window).load(function () {
150 150 slide: function (event, ui) {
151 151  
152 152 // $("#txtlayerNumber").val(100 - ui.value); // basic math operation..
  153 +
  154 + // $("#txtlayerNumber").val($("#layerChangeSlider").slider("value"));
  155 +
  156 + },
  157 + stop: function (event, ui) {
153 158 var la;
  159 +
154 160 var rootScope = angular.element(document.getElementById("bo")).scope();
155 161 rootScope.$apply(function () {
156   - rootScope.isLoading = true;
  162 + rootScope.isLoading = true;
157 163 })
158 164  
159 165 var scope = angular.element(document.getElementById("daView")).scope();
160 166 scope.$apply(function () {
  167 + if (scope.isTransparencyActivated) {
  168 + rootScope.isLoading = false;
  169 + }
161 170  
162 171  
163 172 la = parseInt(scope.totalLayers) //- parseInt(scope.layerNumber);
... ... @@ -167,10 +176,8 @@ $(window).load(function () {
167 176 scope.layerNumber = slideVal;
168 177 scope.LayerChange();
169 178  
170   -
171   - });
172   - // $("#txtlayerNumber").val($("#layerChangeSlider").slider("value"));
173 179  
  180 + });
174 181 },
175 182  
176 183 })
... ...