Commit f3ab4ddd4ddfc05d875005f8b59ccff9c15891d8
Merge branch 'HighlightBSPOC' into Develop
Showing
1 changed file
with
127 additions
and
50 deletions
400-SOURCECODE/AIAHTML5.Web/app/controllers/DAController.js
| @@ -2804,7 +2804,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo | @@ -2804,7 +2804,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo | ||
| 2804 | false; | 2804 | false; |
| 2805 | } | 2805 | } |
| 2806 | 2806 | ||
| 2807 | - console.log('HighlightBodyByTermList is called'); | 2807 | + console.log('HighlightBodyByTermListForBodySystem is called'); |
| 2808 | 2808 | ||
| 2809 | $scope.highlightedBR = []; | 2809 | $scope.highlightedBR = []; |
| 2810 | 2810 | ||
| @@ -2816,12 +2816,14 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo | @@ -2816,12 +2816,14 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo | ||
| 2816 | DataService.getJson(matchedTermListPath) | 2816 | DataService.getJson(matchedTermListPath) |
| 2817 | .then( | 2817 | .then( |
| 2818 | function (result) { | 2818 | function (result) { |
| 2819 | + console.log('1. HighlightBodyByTermListForBodySystem is called'); | ||
| 2819 | $rootScope.macthedTermList = result; | 2820 | $rootScope.macthedTermList = result; |
| 2820 | var termNo = 0; | 2821 | var termNo = 0; |
| 2821 | var pixcelLocation = 0; | 2822 | var pixcelLocation = 0; |
| 2822 | var prevBRID = 0; | 2823 | var prevBRID = 0; |
| 2823 | if ($rootScope.macthedTermList.length > 0) { | 2824 | if ($rootScope.macthedTermList.length > 0) { |
| 2824 | - | 2825 | + console.log('2. HighlightBodyByTermListForBodySystem is called'); |
| 2826 | + //remove existing data and draw fresh data | ||
| 2825 | for(var i=0; i<$rootScope.grayImageDataList.length;i++){ | 2827 | for(var i=0; i<$rootScope.grayImageDataList.length;i++){ |
| 2826 | var grayCanvasID = 'imageCanvas' + parseInt(i+1); | 2828 | var grayCanvasID = 'imageCanvas' + parseInt(i+1); |
| 2827 | var grayCanvas = document.getElementById(grayCanvasID); | 2829 | var grayCanvas = document.getElementById(grayCanvasID); |
| @@ -2853,78 +2855,153 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo | @@ -2853,78 +2855,153 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo | ||
| 2853 | 2855 | ||
| 2854 | 2856 | ||
| 2855 | var TermExistInBodyRegionId = value.bodyRegionId; | 2857 | var TermExistInBodyRegionId = value.bodyRegionId; |
| 2858 | + console.log('3. HighlightBodyByTermListForBodySystem is called TermExistInBodyRegionId=' + TermExistInBodyRegionId); | ||
| 2859 | + if (TermExistInBodyRegionId != undefined) { | ||
| 2860 | + if (prevBRID != TermExistInBodyRegionId) { | ||
| 2856 | 2861 | ||
| 2857 | - if (prevBRID != TermExistInBodyRegionId) { | ||
| 2858 | - var grayCanvasID = 'imageCanvas' + TermExistInBodyRegionId; | ||
| 2859 | - var grayCanvas = document.getElementById(grayCanvasID); | ||
| 2860 | - | ||
| 2861 | - if (grayCanvas != null) { | ||
| 2862 | - var grayCanvasContext = grayCanvas.getContext("2d"); | ||
| 2863 | 2862 | ||
| 2864 | - var canvasHeight = grayCanvas.height; | ||
| 2865 | - var canvasWidth = grayCanvas.width; | ||
| 2866 | - grayCanvasContext.clearRect(0, 0, canvasHeight, canvasWidth) | ||
| 2867 | - grayCanvasContext.putImageData($rootScope.grayImageDataList[parseInt(TermExistInBodyRegionId) - 1], 0, 0); | 2863 | + var grayCanvasID = 'imageCanvas' + TermExistInBodyRegionId; |
| 2864 | + var grayCanvas = document.getElementById(grayCanvasID); | ||
| 2868 | 2865 | ||
| 2869 | - var gData = grayCanvasContext.getImageData(0, 0, canvasWidth,canvasHeight ) | 2866 | + if (grayCanvas != null) { |
| 2870 | 2867 | ||
| 2871 | - grayImageDataVar = null; | ||
| 2872 | - var macthedData = new jinqJs() | ||
| 2873 | - .from($rootScope.macthedTermList) | ||
| 2874 | - .where('bodyRegionId == ' + TermExistInBodyRegionId) | ||
| 2875 | - .select(); | 2868 | + var grayCanvasContext = grayCanvas.getContext("2d"); |
| 2876 | 2869 | ||
| 2877 | - //grayImageDataVar = $rootScope.grayImageDataList[parseInt(TermExistInBodyRegionId) - 1] | ||
| 2878 | - | ||
| 2879 | - | ||
| 2880 | - var coloredImageDataVar = $rootScope.coloredImageCanvasList[parseInt(TermExistInBodyRegionId) - 1]; | 2870 | + var canvasHeight = grayCanvas.height; |
| 2871 | + var canvasWidth = grayCanvas.width; | ||
| 2872 | + var canvasX = grayCanvas.style.left; | ||
| 2873 | + var canvasY = grayCanvas.style.top; | ||
| 2881 | 2874 | ||
| 2882 | - var grayImageDataValue = gData.data; | ||
| 2883 | - var coloredImageDataValue = coloredImageDataVar.data; | ||
| 2884 | 2875 | ||
| 2885 | - // $rootScope.termListWithLocation = value.terms; | 2876 | + grayCanvasContext.clearRect(0, 0, canvasHeight, canvasWidth) |
| 2877 | + grayCanvasContext.putImageData($rootScope.grayImageDataList[parseInt(TermExistInBodyRegionId) - 1], 0, 0); | ||
| 2886 | 2878 | ||
| 2887 | - angular.forEach(macthedData, function (value2, key) { | ||
| 2888 | - $rootScope.termListWithLocation = value2.terms; | ||
| 2889 | - angular.forEach($rootScope.termListWithLocation.PixelLocations, function (value1, key1) { | 2879 | + var gData = grayCanvasContext.getImageData(0, 0, canvasWidth, canvasHeight); |
| 2890 | 2880 | ||
| 2891 | - var RED = coloredImageDataValue[value1]; | ||
| 2892 | - var GREEN = coloredImageDataValue[value1 + 1]; | ||
| 2893 | - var BLUE = coloredImageDataValue[value1 + 2]; | 2881 | + //for mirror images |
| 2882 | + var grayCanvasMRID = 'imageCanvas' + TermExistInBodyRegionId + '_MR'; | ||
| 2883 | + var grayCanvasMR = document.getElementById(grayCanvasMRID); | ||
| 2884 | + var grayCanvasMRX; | ||
| 2885 | + var grayCanvasMRY; | ||
| 2894 | 2886 | ||
| 2895 | - grayImageDataValue[value1] = RED; | ||
| 2896 | - grayImageDataValue[value1 + 1] = GREEN; | ||
| 2897 | - grayImageDataValue[value1 + 2] = BLUE; | ||
| 2898 | - }) | 2887 | + //draw a canvas for same bodyregion wich will be flipped after coloring the body system |
| 2888 | + if (TermExistInBodyRegionId == 4 || TermExistInBodyRegionId == 5 || TermExistInBodyRegionId == 6) { | ||
| 2899 | 2889 | ||
| 2900 | - var grayCanvasID = 'imageCanvas' + TermExistInBodyRegionId; | ||
| 2901 | - var grayCanvas = document.getElementById(grayCanvasID); | ||
| 2902 | - if (grayCanvas != null) { | ||
| 2903 | - var grayCanvasContext = grayCanvas.getContext("2d"); | ||
| 2904 | 2890 | ||
| 2905 | - var canvasHeight = grayCanvas.height; | ||
| 2906 | - var canvasWidth = grayCanvas.width; | 2891 | + var grayCanvasMRID = 'imageCanvas' + TermExistInBodyRegionId + '_MR'; |
| 2892 | + var grayCanvasMR = document.getElementById(grayCanvasMRID); | ||
| 2893 | + grayCanvasMRX = grayCanvasMR.style.left; | ||
| 2894 | + grayCanvasMRY = grayCanvasMR.style.top; | ||
| 2907 | 2895 | ||
| 2908 | - //grayCanvasContext.clearRect(0, 0, canvasHeight, canvasWidth) | 2896 | + var FlipedImgCanvas = document.createElement('canvas'); |
| 2897 | + FlipedImgCanvas.height = canvasHeight; | ||
| 2898 | + FlipedImgCanvas.width = canvasWidth; | ||
| 2899 | + FlipedImgCanvas.setAttribute("data-IsMirrored", "Y") | ||
| 2900 | + FlipedImgCanvas.style.position = "absolute"; | ||
| 2901 | + FlipedImgCanvas.style.left = canvasX + "px"; | ||
| 2902 | + FlipedImgCanvas.style.top = canvasY + "px"; | ||
| 2903 | + FlipedImgCanvas.style.visibility = 'hidden'; | ||
| 2904 | + FlipedImgCanvas.id = 'imageCanvas' + TermExistInBodyRegionId + '_MR'; | ||
| 2909 | 2905 | ||
| 2910 | - grayCanvasContext.putImageData(gData, 0, 0); | 2906 | + //remove previous canavs |
| 2907 | + $('#' + grayCanvasMRID).remove(); | ||
| 2911 | 2908 | ||
| 2912 | - // grayCanvasContext.putImageData($rootScope.rawGrayImageDataList[parseInt(TermExistInBodyRegionId) - 1], 0, 0); | 2909 | + //add new canvas on same location and after flipping it will be added to mirrored position |
| 2910 | + document.getElementById('canvasDiv').appendChild(FlipedImgCanvas); | ||
| 2911 | + //put grayData | ||
| 2913 | 2912 | ||
| 2913 | + var filppedCanvasContx = FlipedImgCanvas.getContext("2d"); | ||
| 2914 | + filppedCanvasContx.putImageData(gData, 0, 0); | ||
| 2914 | 2915 | ||
| 2915 | } | 2916 | } |
| 2916 | - $('#spinner').css('visibility', 'hidden') | ||
| 2917 | - $rootScope.isLoading = false; | ||
| 2918 | 2917 | ||
| 2919 | - prevBRID = TermExistInBodyRegionId; | ||
| 2920 | - }) | 2918 | + grayImageDataVar = null; |
| 2919 | + var macthedData = new jinqJs() | ||
| 2920 | + .from($rootScope.macthedTermList) | ||
| 2921 | + .where('bodyRegionId == ' + TermExistInBodyRegionId) | ||
| 2922 | + .select(); | ||
| 2923 | + | ||
| 2924 | + | ||
| 2925 | + | ||
| 2926 | + var coloredImageDataVar = $rootScope.coloredImageCanvasList[parseInt(TermExistInBodyRegionId) - 1]; | ||
| 2927 | + | ||
| 2928 | + var grayImageDataValue = gData.data; | ||
| 2929 | + var coloredImageDataValue = coloredImageDataVar.data; | ||
| 2930 | + | ||
| 2931 | + | ||
| 2932 | + angular.forEach(macthedData, function (value2, key) { | ||
| 2933 | + | ||
| 2934 | + $rootScope.termListWithLocation = value2.terms; | ||
| 2935 | + | ||
| 2936 | + //pick the color from coloredImage data and put on gray imagedata | ||
| 2937 | + angular.forEach($rootScope.termListWithLocation.PixelLocations, function (value1, key1) { | ||
| 2938 | + | ||
| 2939 | + var RED = coloredImageDataValue[value1]; | ||
| 2940 | + var GREEN = coloredImageDataValue[value1 + 1]; | ||
| 2941 | + var BLUE = coloredImageDataValue[value1 + 2]; | ||
| 2942 | + | ||
| 2943 | + grayImageDataValue[value1] = RED; | ||
| 2944 | + grayImageDataValue[value1 + 1] = GREEN; | ||
| 2945 | + grayImageDataValue[value1 + 2] = BLUE; | ||
| 2946 | + }) | ||
| 2947 | + | ||
| 2948 | + //for non mirrored bpdy regions | ||
| 2949 | + var grayCanvasID = 'imageCanvas' + TermExistInBodyRegionId; | ||
| 2950 | + var grayCanvas = document.getElementById(grayCanvasID); | ||
| 2951 | + | ||
| 2952 | + if (grayCanvas != null) { | ||
| 2953 | + | ||
| 2954 | + var grayCanvasContext = grayCanvas.getContext("2d"); | ||
| 2955 | + | ||
| 2956 | + grayCanvasContext.putImageData(gData, 0, 0); | ||
| 2957 | + | ||
| 2958 | + } | ||
| 2959 | + | ||
| 2960 | + //for mirror body regions | ||
| 2961 | + if (TermExistInBodyRegionId == 4 || TermExistInBodyRegionId == 5 || TermExistInBodyRegionId == 6) { | ||
| 2962 | + | ||
| 2963 | + var grayCanvasMRID = 'imageCanvas' + TermExistInBodyRegionId + '_MR'; | ||
| 2964 | + | ||
| 2965 | + var grayCanvasMR = document.getElementById(grayCanvasMRID); | ||
| 2966 | + | ||
| 2967 | + if (grayCanvasMR != null) { | ||
| 2968 | + | ||
| 2969 | + var grayCanvasMRContext = grayCanvasMR.getContext("2d"); | ||
| 2970 | + | ||
| 2971 | + grayCanvasMRContext.save(); | ||
| 2972 | + grayCanvasMRContext.translate(canvasWidth, 0); | ||
| 2973 | + grayCanvasMRContext.scale(-1, 1); | ||
| 2974 | + //flip does not work with putImageData, that is why we used drawImage | ||
| 2975 | + grayCanvasMRContext.drawImage(grayCanvas, 0, 0, canvasWidth, canvasHeight, 0, 0, canvasWidth, canvasHeight); | ||
| 2976 | + grayCanvasMRContext.restore(); | ||
| 2977 | + | ||
| 2978 | + //set this canavs on the actual posution of mirror image | ||
| 2979 | + grayCanvasMR.style.left = grayCanvasMRX; | ||
| 2980 | + grayCanvasMR.style.top = grayCanvasMRY; | ||
| 2981 | + grayCanvasMR.style.visibility = 'visible'; | ||
| 2982 | + | ||
| 2983 | + | ||
| 2984 | + } | ||
| 2985 | + } | ||
| 2986 | + | ||
| 2987 | + $('#spinner').css('visibility', 'hidden') | ||
| 2988 | + $rootScope.isLoading = false; | ||
| 2989 | + | ||
| 2990 | + prevBRID = TermExistInBodyRegionId; | ||
| 2991 | + }) | ||
| 2992 | + } | ||
| 2921 | } | 2993 | } |
| 2922 | } | 2994 | } |
| 2923 | - }) | 2995 | + else { |
| 2996 | + $('#spinner').css('visibility', 'hidden') | ||
| 2997 | + $rootScope.isLoading = false; | ||
| 2998 | + } | ||
| 2924 | 2999 | ||
| 2925 | - } | 3000 | + }) |
| 2926 | 3001 | ||
| 3002 | + } | ||
| 2927 | 3003 | ||
| 3004 | + | ||
| 2928 | 3005 | ||
| 2929 | }, | 3006 | }, |
| 2930 | function (error) { | 3007 | function (error) { |