ADAM / AIAHTML5

Commit 51c20a933f84c4d6d35a62e9c9dbba57ebdc2bd0

Authored by Amrita Vishnoi
1 parent f02adb91

Refs: #4403 

Highlight body region on users click is implemented but having issues like annotations are not showing and also need to work on un highlight on next click.
Inline Side-by-side
Showing 1 changed file with 414 additions and 51 deletions
400-SOURCECODE/AIAHTML5.Web/app/controllers/DAController.js
  View file @51c20a9
@@ -26,8 +26,8 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo @@ -26,8 +26,8 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
26 $scope.TBDrawStartX; 26 $scope.TBDrawStartX;
27 $scope.TBDrawStartY; 27 $scope.TBDrawStartY;
28 28
29 - $scope.isHighLight = false;  
30 - $scope.coloredImageCanvasList = []; 29 + $rootScope.isHighLight = false;
  30 + $rootScope.coloredImageCanvasList = [];
31 31
32 $scope.zoomInOut = 75; 32 $scope.zoomInOut = 75;
33 33
@@ -839,7 +839,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo @@ -839,7 +839,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
839 839
840 var maskCanvasId = (canvasId.replace('_MR', '')) + '_mci'; 840 var maskCanvasId = (canvasId.replace('_MR', '')) + '_mci';
841 var maskCanvas = document.getElementById(maskCanvasId); 841 var maskCanvas = document.getElementById(maskCanvasId);
842 - var canvasContextForRGB = maskCanvas.getContext("2d"); 842 + var maskCanvasContext = maskCanvas.getContext("2d");
843 843
844 844
845 var canvasDiv = document.getElementById('canvasDiv'); 845 var canvasDiv = document.getElementById('canvasDiv');
@@ -848,15 +848,13 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo @@ -848,15 +848,13 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
848 848
849 var distanceXOnMirrorImage = (parseInt(mirrorCanvasX) + parseInt(mirrorCanvasWidth)) - (parseInt(mousePos.x) + horizontlScrollPosition);// - 135); 849 var distanceXOnMirrorImage = (parseInt(mirrorCanvasX) + parseInt(mirrorCanvasWidth)) - (parseInt(mousePos.x) + horizontlScrollPosition);// - 135);
850 850
851 - var mirrorXOnNormalImage = parseInt(canvasContextForRGB.canvas.offsetLeft) + parseInt(distanceXOnMirrorImage); 851 + var mirrorXOnNormalImage = parseInt(maskCanvasContext.canvas.offsetLeft) + parseInt(distanceXOnMirrorImage);
852 852
853 var actulalX = mirrorXOnNormalImage 853 var actulalX = mirrorXOnNormalImage
854 var actualY = mousePos.y + verticalScrollPosition 854 var actualY = mousePos.y + verticalScrollPosition
855 855
856 -  
857 -  
858 -  
859 - var pixelData = canvasContextForRGB.getImageData(Math.round(actulalX - parseInt(canvasContextForRGB.canvas.offsetLeft)), Math.round(actualY - y), 1, 1); 856 +
  857 + var pixelData = maskCanvasContext.getImageData(Math.round(actulalX - parseInt(maskCanvasContext.canvas.offsetLeft)), Math.round(actualY - y), 1, 1);
860 858
861 pixelData.data[0] = pixelData.data[0] - 9; 859 pixelData.data[0] = pixelData.data[0] - 9;
862 pixelData.data[1] = pixelData.data[1] - 9; 860 pixelData.data[1] = pixelData.data[1] - 9;
@@ -993,8 +991,8 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo @@ -993,8 +991,8 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
993 } 991 }
994 imgCanvas.addEventListener('click', function (evt) { 992 imgCanvas.addEventListener('click', function (evt) {
995 993
996 -  
997 - 994 + // debugger;
  995 + var annotationText;
998 var context = imgCanvas.getContext("2d"); 996 var context = imgCanvas.getContext("2d");
999 997
1000 998
@@ -1008,7 +1006,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo @@ -1008,7 +1006,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
1008 maskCanvasId = canvasId + '_mci'; 1006 maskCanvasId = canvasId + '_mci';
1009 } 1007 }
1010 var maskCanvas = document.getElementById(maskCanvasId); 1008 var maskCanvas = document.getElementById(maskCanvasId);
1011 - var canvasContextForRGB = maskCanvas.getContext("2d"); 1009 + var maskCanvasContext = maskCanvas.getContext("2d");
1012 1010
1013 1011
1014 var mousePos = $scope.getMousePos(evt); 1012 var mousePos = $scope.getMousePos(evt);
@@ -1024,33 +1022,62 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo @@ -1024,33 +1022,62 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
1024 var actualY = mousePos.y + verticalScrollPosition; 1022 var actualY = mousePos.y + verticalScrollPosition;
1025 1023
1026 //debugger; 1024 //debugger;
1027 - var RGBColor = $scope.GetRGBColor(canvasContextForRGB, actulalX, actualY, x, y);  
1028 - var annotationText; 1025 + var RGBColor = $scope.GetRGBColor(maskCanvasContext, actulalX, actualY, x, y);
  1026 +
1029 1027
1030 - if (maskCanvasId.match('modestyImg') && RGBColor != '000000') {  
1031 - RGBColor = DA[0].figLeafTermId;  
1032 - annotationText = $scope.GetAnnotationBasedOnActualTermNo(RGBColor);  
1033 - }  
1034 - else if (maskCanvasId.match('modestyImg') && RGBColor == '000000') {  
1035 - //if ($scope.voId == 11) {  
1036 - // maskCanvasId = 'imageCanvas6_mci';  
1037 - // x = $('#imageCanvas6_mci').left;  
1038 - // y = $('#imageCanvas6_mci').top;  
1039 - //}  
1040 - //else {  
1041 - bodyRegionId = maskCanvasId.slice(-1);  
1042 - maskCanvasId = 'imageCanvas' + bodyRegionId + '_mci';  
1043 - // }  
1044 - var maskCanvas = document.getElementById(maskCanvasId);  
1045 - var canvasContextForRGB = maskCanvas.getContext("2d");  
1046 - RGBColor = $scope.GetRGBColor(canvasContextForRGB, actulalX, actualY, x, y);  
1047 - annotationText = $scope.GetAnnotationText(parseInt(RGBColor));  
1048 - }  
1049 - else {  
1050 - RGBColor = $scope.GetRGBColor(canvasContextForRGB, actulalX, actualY, x, y);  
1051 - annotationText = $scope.GetAnnotationText(parseInt(RGBColor)); 1028 + if ($rootScope.isHighLight)
  1029 + {
  1030 + //2. Find Actul Term No Based on Icolor.
  1031 + var ActualTermNo = $scope.getActualTermNumber(RGBColor);
  1032 + //alert('actual term no: ' + ActualTermNo);
  1033 +
  1034 + //3. Find Term No List Based on ActualTermNo
  1035 + var TermList = $scope.getTermNumberList(ActualTermNo);
  1036 + // alert('termList.count: ' + TermList.length);
  1037 +
  1038 + //4.
  1039 +
  1040 + $scope.machedTermNoLocation = [];
  1041 + for (var i = 0; i < TermList.length; i++) {
  1042 +
  1043 + var termNumber = parseInt(TermList[i]._TermNumber);
1052 1044
  1045 + //Match Term No List in each bodyRegion
  1046 + $scope.getLocationsForMatchedTermsInWholeBody(termNumber, x, y);
  1047 + }
1053 } 1048 }
  1049 +
  1050 +
  1051 +
  1052 + //Modesty ON
  1053 + if (maskCanvasId.match('modestyImg') && RGBColor != '000000') {
  1054 + RGBColor = DA[0].figLeafTermId;
  1055 + annotationText = $scope.GetAnnotationBasedOnActualTermNo(RGBColor);
  1056 + }
  1057 + //Modesty On but clicked somewhre else, we did modesty check because the modesty image covers whole body region so if user will click to
  1058 + //see the annotation apart from leaf then the actual click will be on modesty canvas, but for annotation er
  1059 + //
  1060 + else if (maskCanvasId.match('modestyImg') && RGBColor == '000000') {
  1061 + //if ($scope.voId == 11) {
  1062 + // maskCanvasId = 'imageCanvas6_mci';
  1063 + // x = $('#imageCanvas6_mci').left;
  1064 + // y = $('#imageCanvas6_mci').top;
  1065 + //}
  1066 + //else {
  1067 + bodyRegionId = maskCanvasId.slice(-1);
  1068 + maskCanvasId = 'imageCanvas' + bodyRegionId + '_mci';
  1069 + // }
  1070 + var maskCanvas = document.getElementById(maskCanvasId);
  1071 + var maskCanvasContext = maskCanvas.getContext("2d");
  1072 + RGBColor = $scope.GetRGBColor(maskCanvasContext, actulalX, actualY, x, y);
  1073 + annotationText = $scope.GetAnnotationText(parseInt(RGBColor));
  1074 + }
  1075 + else {
  1076 + RGBColor = $scope.GetRGBColor(maskCanvasContext, actulalX, actualY, x, y);
  1077 + annotationText = $scope.GetAnnotationText(parseInt(RGBColor));
  1078 +
  1079 + }
  1080 +
1054 1081
1055 if ($('#speechBubbleTrns').length > 0) 1082 if ($('#speechBubbleTrns').length > 0)
1056 $('#speechBubbleTrns').remove(); 1083 $('#speechBubbleTrns').remove();
@@ -1067,9 +1094,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo @@ -1067,9 +1094,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
1067 1094
1068 }, false); 1095 }, false);
1069 1096
1070 -  
1071 -  
1072 - 1097 +
1073 var PI = Math.PI; 1098 var PI = Math.PI;
1074 var PI2 = PI * 2; 1099 var PI2 = PI * 2;
1075 var cw, ch, imgW, imgH, mouseX, mouseY; 1100 var cw, ch, imgW, imgH, mouseX, mouseY;
@@ -1099,9 +1124,309 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo @@ -1099,9 +1124,309 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
1099 1124
1100 } 1125 }
1101 1126
1102 - $scope.GetRGBColor = function (canvasContextForRGB, actulalX, actualY, x, y) { 1127 + $scope.getLocationsForMatchedTermsInWholeBody = function (termNo, x, y) {
  1128 +
  1129 + for (var x = 0; x < $scope.ColoredImageSRC.length; x++) {
  1130 + // alert('called for bodyRegionId: ' + $scope.MaskImageSRC[x].bodyRegionId);
  1131 + var bodyRegionId = $scope.ColoredImageSRC[x].bodyRegionId;
  1132 +
  1133 + {
  1134 + var scaledWidth = $scope.ColoredImageSRC[x].Width;
  1135 + var scaledHeight = $scope.ColoredImageSRC[x].Height;
  1136 + //var maskImg = $scope.ColoredImageSRC[x].SRC;
  1137 +
  1138 +
  1139 + var coloredImg = $scope.ColoredImageSRC[x].SRC;
  1140 +
  1141 + var maskImg = $scope.GetMaskImageSource(coloredImg);
  1142 +
  1143 +
  1144 + var scledX = $scope.ColoredImageSRC[x].x;
  1145 + var scledY = $scope.ColoredImageSRC[x].y;
  1146 +
  1147 +
  1148 + // 1. get mask canvas for this body region.
  1149 + var maskCanvasID = 'imageCanvas' + bodyRegionId + '_mci';
  1150 + var maskCanvas = document.getElementById(maskCanvasID);
  1151 + var maskCanvasContext = maskCanvas.getContext("2d");
  1152 + var maskImgData = maskCanvasContext.getImageData(0, 0, scaledWidth, scaledHeight);
  1153 +
  1154 + //// 2. get coloured canvas for this body region.
  1155 +
  1156 + var coloredImageDataVar = $rootScope.coloredImageCanvasList[parseInt(bodyRegionId - 1)];
  1157 +
  1158 +
  1159 + //var coloredCanvasContext = coloredCanvas.getContext("2d");
  1160 + //var coloredImageData = coloredCanvasContext.getImageData(0, 0, scaledWidth, scaledHeight);
  1161 + //var coloredImageDataVar = coloredImageData.data;
  1162 +
  1163 + //var coloredCanvasID = 'imageCanvas' + bodyRegionId;
  1164 + //var coloredCanvas = document.getElementById(coloredCanvasID);
  1165 + //var coloredCanvasContext = coloredCanvas.getContext("2d");
  1166 + //var coloredImageData = coloredCanvasContext.getImageData(0, 0, scaledWidth, scaledHeight);
  1167 + //var coloredImageDataVar = coloredImageData.data;
  1168 +
  1169 + //// 3. get mask canvas for this body region._MR
  1170 + var grayCanvasID = 'imageCanvas' + bodyRegionId;
  1171 + var grayCanvas = document.getElementById(grayCanvasID);
  1172 + var grayCanvasContext = grayCanvas.getContext("2d");
  1173 + var grayImageData = grayCanvasContext.getImageData(0, 0, scaledWidth, scaledHeight);
  1174 + var grayImageDataVar = grayImageData.data;
  1175 +
  1176 +
  1177 + //var grayImageDataVarMR;
  1178 + // var grayImageDataMR;
  1179 + var coloredImageDataVarMR;
  1180 + var coloredImageDataMR
  1181 +
  1182 + if (bodyRegionId == 6 || bodyRegionId == 5 || bodyRegionId == 4) {
  1183 + //var grayCanvasMRID = 'GrayImageCanvas' + bodyRegionId + '_MR';
  1184 + //var grayCanvasMR = document.getElementById(grayCanvasMRID);
  1185 + //var grayCanvasContextMR = grayCanvasMR.getContext("2d");
  1186 + //grayImageDataMR = grayCanvasContextMR.getImageData(0, 0, scaledWidth, scaledHeight);
  1187 + //grayImageDataVarMR = grayImageDataMR.data;
  1188 +
  1189 +
  1190 +
  1191 + var coloredCanvasMRID = 'imageCanvas' + bodyRegionId + '_MR';
  1192 + var coloredCanvasMR = document.getElementById(coloredCanvasMRID);
  1193 + var coloredCanvasContextMR = coloredCanvasMR.getContext("2d");
  1194 + coloredImageDataMR = coloredCanvasContextMR.getImageData(0, 0, scaledWidth, scaledHeight);
  1195 + coloredImageDataVarMR = coloredImageDataMR.data;
  1196 + }
  1197 +
  1198 + var counter = 0;
  1199 +
  1200 + var imageDataVar = maskImgData.data;
  1201 +
  1202 + // var previousBRID;
  1203 + var n = maskImgData.data.length;
  1204 + var counter = 0;
  1205 +
  1206 +
  1207 + for (var i = 0; i < n; i += 4) {
  1208 +
  1209 +
  1210 + var RED = imageDataVar[i] - 9;
  1211 + var GREEN = imageDataVar[i + 1] - 9;
  1212 + var BLUE = imageDataVar[i + 2] - 9;
  1213 +
  1214 + var Red;
  1215 + var Green;
  1216 + var Blue;
  1217 + var zero = "0";
  1218 +
  1219 + if ((RED).toString().length != 2) {
  1220 + Red = zero.concat((RED).toString())
  1221 + }
  1222 + else {
  1223 + Red = (RED).toString()
  1224 + }
  1225 + if ((GREEN).toString().length != 2) {
  1226 + Green = zero.concat((GREEN).toString())
  1227 + }
  1228 + else {
  1229 + Green = (GREEN).toString()
  1230 +
  1231 + }
  1232 + if ((BLUE).toString().length != 2) {
  1233 + Blue = zero.concat((BLUE).toString())
  1234 + }
  1235 + else {
  1236 + Blue = (BLUE).toString()
  1237 +
  1238 + }
  1239 +
  1240 + var Icolor = (Red + Green + Blue);
  1241 +
  1242 +
  1243 + if (parseInt(termNo) == parseInt(Icolor)) {
  1244 + counter++;
  1245 +
  1246 +
  1247 + // var DAData = new BitmapData($scope.MaskImageSRC[x].Width, $scope.MaskImageSRC[x].Height);
  1248 + // DAData.draw($scope.grayCanvasList[x].SRC);
  1249 + // var RED = 0.3086; // luminance contrast value for red
  1250 + // var GREEN = 0.694; // luminance contrast value for green
  1251 + // var BLUE = 0.0820; // luminance contrast value for blue
  1252 +
  1253 + // var RGB = [RED, GREEN, BLUE, 0, 0];
  1254 + // var RGB2 = [RED, GREEN, BLUE, 0, 0];
  1255 + // var RGB3 = [RED, GREEN, BLUE, 0, 0];
  1256 + // var ALPHA = [0, 0, 0, 1, 0];
  1257 +
  1258 + // var rgbPx = RGB.concat(RGB2);
  1259 + // var rgbPx2 = rgbPx.concat(RGB3);
  1260 + // var matrix = rgbPx2.concat(ALPHA);
  1261 +
  1262 + // var zeroPoint = new Point();
  1263 + // var grayScale = new ColorMatrixFilter(matrix);
  1264 + // DAData.applyFilter(DAData, DAData.rect, zeroPoint, grayScale);
  1265 +
  1266 + // grayCanvasContext.putImageData(DAData.data, 0, 0)
  1267 + // }
  1268 + //}
  1269 +
  1270 +
  1271 + //if (!isHighLighted) {
  1272 + //alert('icolor matched with term no ' +termNo);
  1273 + var RED_coloredImage = coloredImageDataVar[i];
  1274 + grayImageDataVar[i] = RED_coloredImage;
  1275 +
  1276 +
  1277 + var GREEN_coloredImage = coloredImageDataVar[i + 1];
  1278 + grayImageDataVar[i + 1] = GREEN_coloredImage;
  1279 +
  1280 + var BLUE_coloredImage = coloredImageDataVar[i + 2];
  1281 + grayImageDataVar[i + 2] = BLUE_coloredImage;
  1282 +
  1283 +
  1284 + var ALPHA_coloredImage = coloredImageDataVar[i + 3];
  1285 + grayImageDataVar[i + 3] = ALPHA_coloredImage;
  1286 +
  1287 + //}
  1288 + }
  1289 +
  1290 +
  1291 + }
  1292 +
  1293 + //grayImageData.data = grayImageDataVar;
  1294 + grayCanvasContext.putImageData(grayImageData, 0, 0);
  1295 +
  1296 + //if (!isHighLighted) {
  1297 + // grayImageData.data = grayImageDataVar;
  1298 +
  1299 + // grayCanvasContext.putImageData(grayImageData, 0, 0);
  1300 + // isHighLighted = true;
  1301 + //}
  1302 + //else {
  1303 + //grayImageData.data = grayImageDataVar;
  1304 + //grayCanvasContext.putImageData(grayImageData, 0, 0);
  1305 + //}
  1306 +
  1307 + if (bodyRegionId == 6 || bodyRegionId == 5 || bodyRegionId == 4) {
  1308 +
  1309 + var grayCanvasMRID = 'GrayImageCanvas' + bodyRegionId + '_MR';
  1310 + var grayCanvasMR = document.getElementById(grayCanvasMRID);
  1311 + document.getElementById('canvasDiv').removeChild(grayCanvasMR);
  1312 +
  1313 + var tempCanvasMR = document.createElement('canvas');
  1314 + tempCanvasMR.id = 'GrayImageCanvas' + bodyRegionId + '_MR';
  1315 + tempCanvasMR.style.position = "absolute";
  1316 + tempCanvasMR.style.left = scledX + 'px';
  1317 + tempCanvasMR.style.top = scledY + 'px';
  1318 + //tempCanvas.style.border = 'black 1px solid';
  1319 + tempCanvasMR.height = scaledHeight;
  1320 + tempCanvasMR.width = scaledWidth;
  1321 +
  1322 +
  1323 + var tempCtx = tempCanvasMR.getContext('2d');
  1324 + tempCtx.save();
  1325 + tempCtx.translate(scaledWidth, 0);
  1326 + tempCtx.scale(-1, 1);
  1327 + tempCtx.drawImage(grayCanvas, 0, 0);
  1328 +
  1329 + document.getElementById('canvasDiv').appendChild(tempCanvasMR);
  1330 +
  1331 + //cleaned up the old canvas
  1332 +
  1333 +
  1334 + //tempCanvas.addEventListener()
  1335 +
  1336 + tempCanvasMR.addEventListener('click', function (evt) {
  1337 +
  1338 + //get mouse coordinate of mirror image click
  1339 + var mousePos = getMousePos(evt);
  1340 + //alert(mousePos.x + ',' + mousePos.y);
  1341 +
  1342 + var tempCanvasMR_context = tempCanvasMR.getContext("2d");
  1343 + var canvasId = tempCanvasMR_context.canvas.getAttribute('id');
  1344 +
  1345 + var mirrorCanvasX = tempCanvasMR_context.canvas.offsetLeft;
  1346 + var mirrorCanvasWidth = tempCanvasMR_context.canvas.clientWidth;
  1347 +
  1348 + // get mask canvas for it.
  1349 + //var maskCanvasID = 'imageCanvas' + bodyRegionId + '_mci';
  1350 + //var maskCanvas = document.getElementById(maskCanvasID);
  1351 + //var maskCanvasContext = maskCanvas.getContext("2d");
  1352 +
  1353 +
  1354 + // var canvasDiv = document.getElementById('canvasDiv');
  1355 + var verticalScrollPosition = canvasDiv.scrollTop;
  1356 + var horizontlScrollPosition = canvasDiv.scrollLeft;
  1357 +
  1358 + var distanceXOnMirrorImage = (parseInt(mirrorCanvasX) + parseInt(mirrorCanvasWidth)) - (parseInt(mousePos.x) + horizontlScrollPosition);// - 135);
  1359 +
  1360 + var mirrorXOnNormalImage = parseInt(maskCanvasContext.canvas.offsetLeft) + parseInt(distanceXOnMirrorImage);
  1361 +
  1362 + var actulalX = mirrorXOnNormalImage
  1363 + var actualY = mousePos.y + verticalScrollPosition
  1364 +
  1365 +
  1366 +
  1367 + var Icolor = $scope.getIcolorOnUserClick(maskCanvasContext, Math.round(actulalX - parseInt(maskCanvasContext.canvas.offsetLeft)), Math.round(actualY - y));
  1368 +
  1369 + //2. Find Actul Term No Based on Icolor.
  1370 + var ActualTermNo = $scope.getActualTermNumber(Icolor);
  1371 + //alert('actual term no: ' + ActualTermNo);
  1372 +
  1373 + //3. Find Term No List Based on ActualTermNo
  1374 + var TermList = $scope.getTermNumberList(ActualTermNo);
  1375 + // alert('termList.count: ' + TermList.length);
  1376 +
  1377 + //4.
  1378 +
  1379 + $scope.machedTermNoLocation = [];
  1380 + for (var i = 0; i < TermList.length; i++) {
  1381 +
  1382 + var termNumber = parseInt(TermList[i]._TermNumber);
  1383 +
  1384 + //Match Term No List in each bodyRegion
  1385 + //$scope.getLocationsForMatchedTermsInWholeBody(termNumber, 'Y');
  1386 +
  1387 + $scope.getLocationsForMatchedTermsInWholeBody(termNumber, x, y);
  1388 + }
  1389 +
  1390 + var annotationText = $scope.GetAnnotationText(parseInt(Icolor));
  1391 +
  1392 + if ($('#speechBubble').length > 0) {
  1393 + $('#speechBubble').remove();
  1394 +
  1395 + createSpeechBubble(evt, annotationText, evt.pageX + horizontlScrollPosition - $('#canvasDiv').offset().left + 5, evt.pageY + verticalScrollPosition - $('#canvasDiv').offset().top - 50)
  1396 +
  1397 + }
  1398 + else
  1399 + createSpeechBubble(evt, annotationText, evt.pageX + horizontlScrollPosition - $('#canvasDiv').offset().left + 5, evt.pageY + verticalScrollPosition - $('#canvasDiv').offset().top - 50)
  1400 +
  1401 +
  1402 +
  1403 + }, false);
  1404 +
  1405 + tempCanvasMR.addEventListener('mousedown', function (evt) {
  1406 +
  1407 + //alert('mousedown')
  1408 + }, false);
  1409 +
  1410 +
  1411 + tempCanvasMR.addEventListener('mouseup', function (evt) {
  1412 + //alert('mouseup')
  1413 +
  1414 +
  1415 + }, false);
  1416 +
  1417 +
  1418 +
  1419 +
  1420 + }
  1421 + }
  1422 + }
  1423 +
  1424 +
  1425 + }
  1426 +
  1427 + $scope.GetRGBColor = function (maskCanvasContext, actulalX, actualY, x, y) {
1103 1428
1104 - var pixelData = canvasContextForRGB.getImageData(Math.round(actulalX - x), Math.round(actualY - y), 1, 1); 1429 + var pixelData = maskCanvasContext.getImageData(Math.round(actulalX - x), Math.round(actualY - y), 1, 1);
1105 1430
1106 pixelData.data[0] = pixelData.data[0] - 9; 1431 pixelData.data[0] = pixelData.data[0] - 9;
1107 pixelData.data[1] = pixelData.data[1] - 9; 1432 pixelData.data[1] = pixelData.data[1] - 9;
@@ -1286,7 +1611,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo @@ -1286,7 +1611,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
1286 1611
1287 $('#btnHighLight').removeClass('btn btn-black'); 1612 $('#btnHighLight').removeClass('btn btn-black');
1288 $('#btnHighLight').addClass('btn-primary'); 1613 $('#btnHighLight').addClass('btn-primary');
1289 - 1614 +
1290 $timeout(function () { $scope.highLightBody() }, 350); 1615 $timeout(function () { $scope.highLightBody() }, 350);
1291 1616
1292 } 1617 }
@@ -2024,10 +2349,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo @@ -2024,10 +2349,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
2024 2349
2025 } 2350 }
2026 2351
2027 -  
2028 -  
2029 -  
2030 - 2352 +
2031 function resizeCanvas() { 2353 function resizeCanvas() {
2032 //debugger; 2354 //debugger;
2033 // alert('reload') 2355 // alert('reload')
@@ -2241,10 +2563,10 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo @@ -2241,10 +2563,10 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
2241 2563
2242 var clickedCanvasMaskId = 'imageCanvas' + clickedBodyRegion + '_mci'; 2564 var clickedCanvasMaskId = 'imageCanvas' + clickedBodyRegion + '_mci';
2243 var maskCanvas = document.getElementById(clickedCanvasMaskId); 2565 var maskCanvas = document.getElementById(clickedCanvasMaskId);
2244 - var canvasContextForRGB = maskCanvas.getContext("2d"); 2566 + var maskCanvasContext = maskCanvas.getContext("2d");
2245 var imgX = Math.round(actulalX - parseInt(x.replace('px', ''))); 2567 var imgX = Math.round(actulalX - parseInt(x.replace('px', '')));
2246 var imgY = Math.round(actualY - parseInt(y.replace('px', ''))); 2568 var imgY = Math.round(actualY - parseInt(y.replace('px', '')));
2247 - pixelData = canvasContextForRGB.getImageData(imgX, imgY, 1, 1); 2569 + pixelData = maskCanvasContext.getImageData(imgX, imgY, 1, 1);
2248 2570
2249 2571
2250 //trans layer image data 2572 //trans layer image data
@@ -2276,14 +2598,14 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo @@ -2276,14 +2598,14 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
2276 2598
2277 var clickedCanvasMaskId = 'imageCanvas' + clickedBodyRegion + '_mci'; 2599 var clickedCanvasMaskId = 'imageCanvas' + clickedBodyRegion + '_mci';
2278 var maskCanvas = document.getElementById(clickedCanvasMaskId); 2600 var maskCanvas = document.getElementById(clickedCanvasMaskId);
2279 - var canvasContextForRGB = maskCanvas.getContext("2d"); 2601 + var maskCanvasContext = maskCanvas.getContext("2d");
2280 2602
2281 //transparecncy canvas 2603 //transparecncy canvas
2282 var maskCanvasTransId = 'transparencyTempCanvasMask_' + clickedBodyRegion + '_mci'; 2604 var maskCanvasTransId = 'transparencyTempCanvasMask_' + clickedBodyRegion + '_mci';
2283 var maskCanvastrans = document.getElementById(maskCanvasTransId); 2605 var maskCanvastrans = document.getElementById(maskCanvasTransId);
2284 var maskCanvasContexttrans = maskCanvastrans.getContext("2d"); 2606 var maskCanvasContexttrans = maskCanvastrans.getContext("2d");
2285 2607
2286 - pixelData = canvasContextForRGB.getImageData(Math.round(actulalX - x), Math.round(actualY - y), 1, 1); 2608 + pixelData = maskCanvasContext.getImageData(Math.round(actulalX - x), Math.round(actualY - y), 1, 1);
2287 2609
2288 pixelDataTrans = maskCanvasContexttrans.getImageData(Math.round(actulalX - x), Math.round(actualY - y), 1, 1); 2610 pixelDataTrans = maskCanvasContexttrans.getImageData(Math.round(actulalX - x), Math.round(actualY - y), 1, 1);
2289 var annotations = $scope.getAnnotationForTransparencyBox(pixelData, pixelDataTrans, $scope); 2611 var annotations = $scope.getAnnotationForTransparencyBox(pixelData, pixelDataTrans, $scope);
@@ -2606,16 +2928,18 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo @@ -2606,16 +2928,18 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
2606 } 2928 }
2607 2929
2608 $scope.enableHighlight = function () { 2930 $scope.enableHighlight = function () {
2609 - $scope.isHighLight = true; 2931 + $rootScope.isHighLight = true;
2610 2932
2611 // alert('enableHighlight is called'); 2933 // alert('enableHighlight is called');
2612 2934
2613 $scope.highLightBody(); 2935 $scope.highLightBody();
2614 } 2936 }
2615 2937
  2938 +
  2939 +
2616 $scope.highLightBody = function () { 2940 $scope.highLightBody = function () {
2617 2941
2618 - // alert('highlight body is called'); 2942 + //alert('highlight body is called');
2619 angular.forEach($scope.ColoredImageSRC, function (value, key) { 2943 angular.forEach($scope.ColoredImageSRC, function (value, key) {
2620 2944
2621 2945
@@ -2629,8 +2953,27 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo @@ -2629,8 +2953,27 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
2629 2953
2630 var imageCanvas = document.getElementById(id); 2954 var imageCanvas = document.getElementById(id);
2631 2955
  2956 + //var coloredCanvasID = 'imageCanvas' + bodyRegionId;
  2957 + //var coloredCanvas = document.getElementById(coloredCanvasID);
  2958 +
  2959 + var width = value.Width;
  2960 + var ht = value.Height;
  2961 +
  2962 + var coloredCanvasContext = imageCanvas.getContext("2d");
  2963 + var coloredImageData = coloredCanvasContext.getImageData(0, 0, width, ht);
  2964 + var coloredImageDataVar = coloredImageData.data;
  2965 +
  2966 +
  2967 +
  2968 + $rootScope.coloredImageCanvasList[parseInt (value.bodyRegionId -1)] = coloredImageDataVar;
  2969 +
  2970 + //$rootScope.coloredImageCanvasList.push(parts);
  2971 +
  2972 +
  2973 +
2632 var context_gray = imageCanvas.getContext('2d'); 2974 var context_gray = imageCanvas.getContext('2d');
2633 2975
  2976 +
2634 var dataURL = imageCanvas.toDataURL(); 2977 var dataURL = imageCanvas.toDataURL();
2635 2978
2636 2979
@@ -2662,8 +3005,28 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo @@ -2662,8 +3005,28 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
2662 3005
2663 }); 3006 });
2664 3007
  3008 + // alert('length: '+ $scope.coloredImageCanvasList.length);
  3009 +
2665 } 3010 }
2666 3011
  3012 +
  3013 + $scope.getActualTermNumber = function (iColor) {
  3014 + $scope.actualTermNo = new jinqJs()
  3015 + .from($scope.TermNumberData.TermData.Term)
  3016 + .where('_TermNumber == ' + iColor)
  3017 + .select('_ActualTermNumber');
  3018 + return $scope.actualTermNo[0]._ActualTermNumber;
  3019 + }
  3020 +
  3021 + $scope.getTermNumberList = function (actualTermNo) {
  3022 + $scope.termList = new jinqJs()
  3023 + .from($scope.TermNumberData.TermData.Term)
  3024 + .where('_ActualTermNumber == ' + actualTermNo)
  3025 + .select();
  3026 + return $scope.termList;
  3027 + }
  3028 +
  3029 +
2667 $scope.OnGenderChange = function (event) { 3030 $scope.OnGenderChange = function (event) {
2668 // debugger; 3031 // debugger;
2669 //use $scope.correspondingBodyViewIds for getting correspnding viewid 3032 //use $scope.correspondingBodyViewIds for getting correspnding viewid