From 56dce78f3ba15e52404e5f3ec0e9a162d60fcdb0 Mon Sep 17 00:00:00 2001 From: nikita Date: Thu, 14 Apr 2016 18:23:34 +0530 Subject: [PATCH] Male anterior is now open on click on male anterior tile in da-vielist. Need scroll bars on panel and also other functionality needed to be integrated. --- 400-SOURCECODE/AIAHTML5.Web/AIAHTML5.Web.csproj | 1 + 400-SOURCECODE/AIAHTML5.Web/MainMenu.html | 7 ++++++- 400-SOURCECODE/AIAHTML5.Web/app/controllers/DAController.js | 651 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++------------------------------------------------- 400-SOURCECODE/AIAHTML5.Web/app/views/da/da-body-view.html | 39 ++++----------------------------------- 400-SOURCECODE/AIAHTML5.Web/app/views/da/da-view.html | 67 ++++++++++++++++++------------------------------------------------- 400-SOURCECODE/AIAHTML5.Web/index.html | 21 +++++++++++++-------- 400-SOURCECODE/AIAHTML5.Web/libs/jquery/2.1.3/jquery.min.js | 12 ++++++++++++ 7 files changed, 656 insertions(+), 142 deletions(-) create mode 100644 400-SOURCECODE/AIAHTML5.Web/libs/jquery/2.1.3/jquery.min.js diff --git a/400-SOURCECODE/AIAHTML5.Web/AIAHTML5.Web.csproj b/400-SOURCECODE/AIAHTML5.Web/AIAHTML5.Web.csproj index e4ff9cf..cd311e4 100644 --- a/400-SOURCECODE/AIAHTML5.Web/AIAHTML5.Web.csproj +++ b/400-SOURCECODE/AIAHTML5.Web/AIAHTML5.Web.csproj @@ -10100,6 +10100,7 @@ + diff --git a/400-SOURCECODE/AIAHTML5.Web/MainMenu.html b/400-SOURCECODE/AIAHTML5.Web/MainMenu.html index dbab469..3b27f98 100644 --- a/400-SOURCECODE/AIAHTML5.Web/MainMenu.html +++ b/400-SOURCECODE/AIAHTML5.Web/MainMenu.html @@ -1,5 +1,10 @@ 
- +
+ +
+

Welcome to A.D.A.M. Interactive Anatomy

+
+
    diff --git a/400-SOURCECODE/AIAHTML5.Web/app/controllers/DAController.js b/400-SOURCECODE/AIAHTML5.Web/app/controllers/DAController.js index e587ddd..384caec 100644 --- a/400-SOURCECODE/AIAHTML5.Web/app/controllers/DAController.js +++ b/400-SOURCECODE/AIAHTML5.Web/app/controllers/DAController.js @@ -14,7 +14,12 @@ function ($scope,$rootScope, $compile,$http, $log, $location, $timeout,DA,$route $scope.isTransparencyActivated = null; $scope.BodyLayerData = null; $scope.VocabTermData = null; - $scope.bodyViewId =0; + $scope.bodyViewId = 0; + + //view specific constants + $scope.voId ; + $scope.layerNo; + //get the DA body view list based on selected gender $scope.getDAViewList = function ($event) { @@ -28,6 +33,8 @@ function ($scope,$rootScope, $compile,$http, $log, $location, $timeout,DA,$route else { $scope.genderId = $event.currentTarget.id; } + // $($event.currentTarget.id).addClass("active"); + $scope.selectedGenderBodyViewData = new jinqJs() .from($scope.BodyViewData.BodyViews.view) .where('_gender == ' + $scope.genderId) @@ -50,24 +57,12 @@ function ($scope,$rootScope, $compile,$http, $log, $location, $timeout,DA,$route $scope.imagePath = "http://localhost/AIA/content/images/DA/BodyViews/" + value._id + '/skintone/' + userEthnicity + '/' + thumbnailImage; - //$scope.isImageExists = $scope.checkImgExistance($scope.imagePath); - ////debugger - - //if ($scope.isImageExists == false) { - // $scope.imagePath = ($scope.imagePath).replace($scope.userModestySetting, ""); - //} - - //debugger + var $el = $('
    ' + '' + '

    ' + value._title + '

    ').appendTo('#bodyViewList'); - //var $el = $('
    ' - // + '' - // + '

    ' + value._title + '

    ' - // + '
    ').appendTo('#bodyViewList'); - $compile($el)($scope); @@ -100,9 +95,9 @@ function ($scope,$rootScope, $compile,$http, $log, $location, $timeout,DA,$route $scope.openView = function ($event) { - alert('clicked: ' + $event.currentTarget.id) - $rootScope.pageToOpen = 'app/views/da/da-view.html'; - alert($rootScope.pageToOpen) + debugger; + $rootScope.pageToOpen = 'app/views/da/da-body-view.html'; + $scope.voId = $event.currentTarget.id; } @@ -121,32 +116,23 @@ function ($scope,$rootScope, $compile,$http, $log, $location, $timeout,DA,$route .error(function (data, status, headers, config) { console.log(data); }); - + //load body region data - $http({ method: 'GET', url: 'http://localhost/AIAHtml/data/json/da_dat_brview.json' }).success(function (data) { - $scope.BodyRegionData = data; - console.log($scope.BodyRegionData); - }) - .error(function (data, status, headers, config) { - console.log(data); - }); + //$http({ method: 'GET', url: 'http://localhost/AIA/content/data/json/da_dat_brview.json' }).success(function (data) { + // debugger; + // $scope.BodyRegionData = data; + // console.log($scope.BodyRegionData); + //}) + //.error(function (data, status, headers, config) { + // console.log(data); + //}); $('#daLoaderLabel').css('visibility', 'hidden') - // Load Layer data - $http({ method: 'GET', url: 'http://localhost/AIAHtml/data/json/da_dat_layer_1.json' }).success(function (data) { - $scope.BodyLayerData = data; - console.log($scope.BodyLayerData); - - }) - .error(function (data, status, headers, config) { - console.log(data); - }); - - $http({ method: 'GET', url: 'http://localhost/AIAHtml/data/json/da_dat_tm_sg_1.json' }).success(function (data) { + $http({ method: 'GET', url: 'http://localhost/AIA/content/data/json/da_dat_tm_sg_1.json' }).success(function (data) { $scope.TermNumberData = data; }) @@ -156,7 +142,7 @@ function ($scope,$rootScope, $compile,$http, $log, $location, $timeout,DA,$route //load vocabterm data - $http({ method: 'GET', url: 'http://localhost/AIAHtml/data/json/cm_dat_vocabterm_1.json' }).success(function (data) { + $http({ method: 'GET', url: 'http://localhost/AIA/content/data/json/cm_dat_vocabterm_1.json' }).success(function (data) { $scope.VocabTermData = data; }) .error(function (data, status, headers, config) { @@ -168,38 +154,605 @@ function ($scope,$rootScope, $compile,$http, $log, $location, $timeout,DA,$route //da-body-view functions $scope.openBodyView = function () { - alert('body view is clicked'); - // $scope.bodyViewId = $routeParams.bodyViewId; - + $.jsPanel({ id: 'daImagePanel', + //selector: '.daView', + theme: 'success', ajax: { - url: 'http://localhost/AIA/app/views/da/da-view.html' + url: 'app/views/da/da-view.html' }, title: "Male Anterior", // bootstrap: 'columns large-10 medium-9', position: { - top: 45, //50, - left: 15, - right: 15 + top: 70, //50, + left: 110, + // right: 0 }, //overflow: { horizontal: 'scroll', vertical: 'scroll' }, - theme: "success", - size: { width: $(window).outerWidth() - 150, height: $(window).outerHeight() - 80 }, + + size: { width: $(window).outerWidth() - 120, height: $(window).outerHeight()-110 }, + //size: { width: 500, height: 500 }, }); + $scope.LoadDefaultLayerImage(); + } - - - angular.element(document).ready(function () { }) + + + + + + + + + $scope.LoadDefaultLayerImage = function () { + debugger; + + $http({ method: 'GET', url: 'http://localhost/AIA/content/data/json/da_dat_brview.json' }).success(function (data) { + debugger; + $scope.BodyRegionData = data; + console.log($scope.BodyRegionData); + }) + .error(function (data, status, headers, config) { + console.log(data); + }); + + + // Load Layer data + $http({ method: 'GET', url: 'http://localhost/AIA/content/data/json/da_dat_layer_1.json' }).success(function (data) { + debugger + $scope.BodyLayerData = data; + console.log($scope.BodyLayerData); + + }) + .error(function (data, status, headers, config) { + console.log(data); + }); + + + $scope.voId = 1; + $scope.layerNo = 0; + $scope.skinTone = DA[0].ethnicity; + + $timeout(function () { $scope.CalculateImageCordinates($scope.voId); }, 250); + + }; + + + //calculate coordinates for body region images + $scope.CalculateImageCordinates = function (viewOrientationId) { + + debugger; + //set height of canvas div and left tool bar as per window size + $scope.BodyRegionCordinatesData = []; // create an empty array + + //$('#canvasDiv').css('height', $('#daImagePanel').outerHeight() - 124) + //$('#leftToolBar').css('height', $('#daImagePanel').outerHeight() - 124) + + //calculate image coordinates and draw image + var bodyRegionCoordinates = $scope.BodyRegionData.BodyRegionViews; + var viewOrientationId = String($scope.voId); + + + $scope.bodyRegionCoordinates = new jinqJs() + .from($scope.BodyRegionData.BodyRegionViews.BodyRegionCordinates) + .where('_ViewOrientationId == ' + viewOrientationId) + .select(); + + angular.forEach($scope.bodyRegionCoordinates, function (value, key) { + + + if (value._HaveMirrorImage == 'Y') { + + //DrawMirroredImage + + //0. Scaling as per default zoom + var rectangle = scaleRectangle(value._X, value._Y, value._Height, value._Width, value._MirrorValue); + + //1.Get image source + var src = $scope.GetImageSource(value._BodyRegionId); + $scope.imageSource = src; + debugger; + //2.Draw mirror image + $scope.DrawMirroredImage(Math.round(rectangle.scaledHeight), Math.round(rectangle.scaledWidth), Math.round(rectangle.scaledX), Math.round(rectangle.scaledY), src, value._BodyRegionId, 'N'); + debugger; + $scope.BodyRegionCordinatesData.push( + { + "bodyRegionId": value._BodyRegionId, "Height": Math.round(rectangle.scaledHeight), "Width": Math.round(rectangle.scaledWidth), + "X": Math.round(rectangle.scaledX), "Y": Math.round(rectangle.scaledY), "IsMirror": 'Yes' + } + ); + + //3.GetMaskImageSource + var maskImageSrc = $scope.GetMaskImageSource($scope.imageSource); + debugger; + //4 Draw Mask Mirror Image + $scope.DrawMirroredImage(Math.round(rectangle.scaledHeight), Math.round(rectangle.scaledWidth), Math.round(rectangle.scaledX), Math.round(rectangle.scaledY), maskImageSrc, value._BodyRegionId, 'Y'); + + + //Draw Normal Image + + //0. Scaling as per default zoom + var rectangle = scaleRectangle(value._X, value._Y, value._Height, value._Width, 0); + + //1.Draw body region which have mirror image + $scope.DrawImage(Math.round(rectangle.scaledHeight), Math.round(rectangle.scaledWidth), Math.round(rectangle.scaledX), Math.round(rectangle.scaledY), src, value._BodyRegionId, 'N'); + $scope.BodyRegionCordinatesData.push( + { + "bodyRegionId": value._BodyRegionId, "Height": Math.round(rectangle.scaledHeight), "Width": Math.round(rectangle.scaledWidth), + "X": Math.round(rectangle.scaledX), "Y": Math.round(rectangle.scaledY), "IsMirror": 'No' + } + ); + + //2.Draw body region for mask image + $scope.DrawImage(Math.round(rectangle.scaledHeight), Math.round(rectangle.scaledWidth), Math.round(rectangle.scaledX), Math.round(rectangle.scaledY), maskImageSrc, value._BodyRegionId, 'Y'); + + + } + else { + //Draw body region which don't have mirror image + + //0.Scaling as per default zoom + var rectangle = scaleRectangle(value._X, value._Y, value._Height, value._Width, value._MirrorValue); + + //1.Get image source + var src = $scope.GetImageSource(value._BodyRegionId); + $scope.imageSource = src; + + //2.Draw body region which don't have mirror image + $scope.DrawImage(Math.round(rectangle.scaledHeight), Math.round(rectangle.scaledWidth), Math.round(rectangle.scaledX), Math.round(rectangle.scaledY), src, value._BodyRegionId, 'N'); + + $scope.BodyRegionCordinatesData.push( + { + "bodyRegionId": value._BodyRegionId, "Height": Math.round(rectangle.scaledHeight), "Width": Math.round(rectangle.scaledWidth), + "X": Math.round(rectangle.scaledX), "Y": Math.round(rectangle.scaledY), "IsMirror": 'No' + } + ); + + //3.GetMaskImageSource + var maskSRC = $scope.GetMaskImageSource($scope.imageSource); + + //4.Draw body region for mask image + $scope.DrawImage(Math.round(rectangle.scaledHeight), Math.round(rectangle.scaledWidth), Math.round(rectangle.scaledX), Math.round(rectangle.scaledY), maskSRC, value._BodyRegionId, 'Y'); + + } + + + }); + + //set scrollbars on canvas and hide loading label + $('#daLoaderLabel').css('visibility', 'hidden') + $('#canvasDiv').css('overflow', 'scroll') + $('#canvasDiv').scrollLeft($('#canvasDiv').width() / 2) + + var abc = $scope.BodyRegionCordinatesData + } + + function scaleRectangle(x, y, height, width, mirrorValue) { + var nzoom = 75; + var existingZoon = 100; + + var X = 0; + var scaledY = 0; + var scaledHeight = 0; + var scaledWidth = 0; + + if (mirrorValue != 0) { + var mirroredX = parseInt(mirrorValue) + parseInt(x); + var newX = (mirroredX * nzoom); + mirroredX = (newX / existingZoon); + X = mirroredX; + } + else { + var newX = (x * nzoom); + X = (newX / existingZoon); + } + + var newY = (y * nzoom); + var Y = (newY / existingZoon); + + var newHeight = (height * nzoom); + var ht = (newHeight / existingZoon); + + var newWidth = (width * nzoom); + var wt = (newWidth / existingZoon); + + return { + scaledX: X, + scaledY: Y, + scaledHeight: ht, + scaledWidth: wt + } + } + + $scope.GetMaskImageSource = function (src) { + var mciImage = src.replace('.jpg', '_mci.png') + return mciImage; + + } + + + $scope.GetImageSource = function (bodyRegionId) { + debugger; + var dataLength = $scope.BodyLayerData.Layers.DataLayer.length; + + //set max for LayerNumber input + $scope.totalLayers = dataLength - 1; + + $('#txtLayerNumber').attr('max', $scope.totalLayers); + + $scope.one = 1; + + $scope.userInput = parseInt($scope.layerNo); + + + var SelectedLayerData = []; + SelectedLayerData = $scope.BodyLayerData.Layers.DataLayer[dataLength - $scope.userInput - 1]; + if ($scope.layerNo == 0) { + for (var z = 0; z <= SelectedLayerData.BodyRegion.length; z++) { + + var bodyRegion = SelectedLayerData.BodyRegion[z]._BodyRegionId; + var bodyRegionSkinTone = SelectedLayerData.BodyRegion[z].Image._SkintTone; + + if (bodyRegion == bodyRegionId && bodyRegionSkinTone == $scope.skinTone) { + + return "content/images/DA/BodyViews/" + $scope.voId + "/layers/" + $scope.layerNo + "/" + bodyRegionId + "/" + $scope.skinTone + "/" + SelectedLayerData.BodyRegion[z].Image._ImageName; + } + } + } + + else { + for (z = 0; z <= SelectedLayerData.BodyRegion.length; z++) { + var bodyRegion = SelectedLayerData.BodyRegion[z]._BodyRegionId; + if (bodyRegion == bodyRegionId) { + return "content/images/DA/BodyViews/" + $scope.voId + "/layers/" + $scope.layerNo + "/" + bodyRegionId + "/" + SelectedLayerData.BodyRegion[z].Image._ImageName; + } + } + } + } + + + $scope.DrawMirroredImage = function (h, w, x, y, src, bodyRegionId, isMaskImage) { + + var FlipedImgCanvas = document.createElement('canvas'); + FlipedImgCanvas.height = h; + FlipedImgCanvas.width = w; + FlipedImgCanvas.setAttribute("data-IsMirrored", "Y") + FlipedImgCanvas.style.position = "absolute"; + FlipedImgCanvas.style.left = x + "px"; + FlipedImgCanvas.style.top = y + "px"; + + if (isMaskImage == 'Y') { + FlipedImgCanvas.id = 'imageCanvas' + bodyRegionId + '_MR_mci'; + FlipedImgCanvas.style.visibility = 'hidden' + + } + else { + FlipedImgCanvas.id = 'imageCanvas' + bodyRegionId + '_MR'; + FlipedImgCanvas.style.visibility = 'visible' + + } + FlipedImgCanvas.addEventListener('click', function (evt) { + + //get mouse coordinate of mirror image click + var mousePos = getMousePos(evt); + //alert(mousePos.x + ',' + mousePos.y); + + var context = FlipedImgCanvas.getContext("2d"); + var canvasId = context.canvas.getAttribute('id'); + + var mirrorCanvasX = context.canvas.offsetLeft; + var mirrorCanvasWidth = context.canvas.clientWidth; + + var maskCanvasId = (canvasId.replace('_MR', '')) + '_mci'; + var maskCanvas = document.getElementById(maskCanvasId); + var canvasContextForRGB = maskCanvas.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(canvasContextForRGB.canvas.offsetLeft) + parseInt(distanceXOnMirrorImage); + + var actulalX = mirrorXOnNormalImage + var actualY = mousePos.y + verticalScrollPosition + + + + + var pixelData = canvasContextForRGB.getImageData(Math.round(actulalX - parseInt(canvasContextForRGB.canvas.offsetLeft)), Math.round(actualY - y), 1, 1); + + pixelData.data[0] = pixelData.data[0] - 9; + pixelData.data[1] = pixelData.data[1] - 9; + pixelData.data[2] = pixelData.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 annotationText = $scope.GetAnnotationText(parseInt(RGBColor)); + + if ($('#speechBubble').length > 0) { + $('#speechBubble').remove(); + + createSpeechBubble(evt, annotationText, evt.pageX + horizontlScrollPosition - $('#canvasDiv').offset().left + 5, evt.pageY + verticalScrollPosition - $('#canvasDiv').offset().top - 50) + + } + else + createSpeechBubble(evt, annotationText, evt.pageX + horizontlScrollPosition - $('#canvasDiv').offset().left + 5, evt.pageY + verticalScrollPosition - $('#canvasDiv').offset().top - 50) + + + + }, false); + + FlipedImgCanvas.addEventListener('mousedown', function (evt) { + + //alert('mousedown') + }, false); + + + FlipedImgCanvas.addEventListener('mouseup', function (evt) { + //alert('mouseup') + + + }, false); + + var context = FlipedImgCanvas.getContext("2d"); + + var PI = Math.PI; + var PI2 = PI * 2; + var cw, ch, imgW, imgH, mouseX, mouseY; + var scaleFactor = 1.00; + + //$scaler = $("#scaler"); + //$scaler.val(scaleFactor); + //$scaler.hide(); + + var img = new Image(); + img.onload = start; + + img.src = "http://localhost/AIA/" + src;; + // img.src = "http://localhost/AIAHtml/" + src; + console.log("img.src: " + img.src); + console.log("src: " + src); + + + function start() { + context.save(); + context.translate(w, 0); + context.scale(-1, 1); + context.drawImage(img, 0, 0); + context.restore(); + + + }; + + document.getElementById('canvasDiv').appendChild(FlipedImgCanvas); + + + } + + $scope.DrawImage = function (h, w, x, y, src, bodyRegionId, isMaskImage) { + + var imgCanvas = document.createElement('canvas'); + // imgCanvas.style.backgroundColor = 'red'; + imgCanvas.height = h; + imgCanvas.width = w; + imgCanvas.setAttribute("data-IsMirrored", "N") + imgCanvas.style.position = "absolute"; + imgCanvas.style.left = x + "px"; + imgCanvas.style.top = y + "px"; + if (isMaskImage == 'Y') { + imgCanvas.style.visibility = 'hidden' + imgCanvas.id = 'imageCanvas' + bodyRegionId + '_mci'; + + } + else { + imgCanvas.id = 'imageCanvas' + bodyRegionId; + imgCanvas.style.visibility = 'visible' + + } + imgCanvas.addEventListener('click', function (evt) { + + + + var context = imgCanvas.getContext("2d"); + + + var canvasId = context.canvas.getAttribute('id'); + + var maskCanvasId = canvasId + '_mci'; + var maskCanvas = document.getElementById(maskCanvasId); + var canvasContextForRGB = maskCanvas.getContext("2d"); + + + var mousePos = 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// - 135;// + leftToolBarWidth; + var actualY = mousePos.y + verticalScrollPosition //- 135; //+ tomenuBarheight + titleBarheight + searchComboheight; + + + + var pixelData = canvasContextForRGB.getImageData(Math.round(actulalX - x), Math.round(actualY - y), 1, 1); + + pixelData.data[0] = pixelData.data[0] - 9; + pixelData.data[1] = pixelData.data[1] - 9; + pixelData.data[2] = pixelData.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 annotationText = $scope.GetAnnotationText(parseInt(RGBColor)); + + if ($('#speechBubble').length > 0) { + $('#speechBubble').remove(); + + createSpeechBubble(evt, annotationText, evt.pageX + horizontlScrollPosition - $('#canvasDiv').offset().left + 5, evt.pageY + verticalScrollPosition - $('#canvasDiv').offset().top - 50) + + } + else + createSpeechBubble(evt, annotationText, evt.pageX + horizontlScrollPosition - $('#canvasDiv').offset().left + 5, evt.pageY + verticalScrollPosition - $('#canvasDiv').offset().top - 50) + + + }, false); + + + + + var PI = Math.PI; + var PI2 = PI * 2; + var cw, ch, imgW, imgH, mouseX, mouseY; + var scaleFactor = 1.00; + + //$scaler = $("#scaler"); + //$scaler.val(scaleFactor); + //$scaler.hide(); + + var context = imgCanvas.getContext('2d'); + var img = new Image(); + img.onload = start; + + // img.src = "http://localhost/AIAHtml/" + src; + img.src = img.src = "http://localhost/AIA/" + src; + console.log("img.src: " + img.src); + console.log("src: " + src); + + + + function start() { + + context.drawImage(img, 0, 0); + }; + $('#daLoaderLabel').css('visibility', 'visible') + document.getElementById('canvasDiv').appendChild(imgCanvas); + + } + + //get annotation from term number + $scope.GetAnnotationText = function (termNumber) { + + var annotationText; + //0 + var figLeafTermNo = 5868; // to do declare constant for this + + if (parseInt(termNumber) != parseInt(figLeafTermNo)) { + $scope.TermNumber = termNumber; + $scope.matchedTermNoData = new jinqJs() + .from($scope.TermNumberData.TermData.Term) + .where('_TermNumber == ' + termNumber) + .select(); + //1. + var actualTermNo = 0; + for (z = 0; z <= $scope.matchedTermNoData.length; z++) { + //send actual term no to get the term text. + actualTermNo = $scope.matchedTermNoData[0]._ActualTermNumber; + annotationText = $scope.GetAnnotationBasedOnActualTermNo(actualTermNo); + break; + }; + + //2. + + } + else { + // send term no to vocab json data to get the text + } + return annotationText; + } + + $scope.GetAnnotationBasedOnActualTermNo = function (actualTermNo) { + + var Annotation; + $scope.ActualTermNo = actualTermNo; + + $scope.matchedActualTermData = new jinqJs() + .from($scope.VocabTermData.VocabTerms.Term) + .where('_ActualTermNumber == ' + actualTermNo) + .select(); + for (z = 0; z <= $scope.matchedActualTermData.length; z++) { + //send actual term no to get the term text. + Annotation = $scope.matchedActualTermData[0]._TermText; + // alert("Annotation : " + Annotation); + break; + }; + return Annotation; + } + + + + + + + + + + }] diff --git a/400-SOURCECODE/AIAHTML5.Web/app/views/da/da-body-view.html b/400-SOURCECODE/AIAHTML5.Web/app/views/da/da-body-view.html index f430d49..ea277a5 100644 --- a/400-SOURCECODE/AIAHTML5.Web/app/views/da/da-body-view.html +++ b/400-SOURCECODE/AIAHTML5.Web/app/views/da/da-body-view.html @@ -1,39 +1,8 @@ - - - - - - - - - - - - - - - - +
    -
    - +
    +
    -
    +
    - - - - - - - - - - - - - \ No newline at end of file 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 b9c5b33..a699e14 100644 --- a/400-SOURCECODE/AIAHTML5.Web/app/views/da/da-view.html +++ b/400-SOURCECODE/AIAHTML5.Web/app/views/da/da-view.html @@ -1,45 +1,27 @@ - - - - - - - - - - - - - - - -
    +
    - +
    - +
    - +
    - +
    - +
    - +
    - +
    - +
    - +
    @@ -87,7 +69,7 @@
    -
    +
    @@ -110,7 +92,7 @@
      -
      • +
    @@ -118,28 +100,15 @@
    -
    -
    - +
    + +
    +
    Loading....
    + +
    - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/400-SOURCECODE/AIAHTML5.Web/index.html b/400-SOURCECODE/AIAHTML5.Web/index.html index 14457c6..f253431 100644 --- a/400-SOURCECODE/AIAHTML5.Web/index.html +++ b/400-SOURCECODE/AIAHTML5.Web/index.html @@ -27,6 +27,9 @@ + + +
    @@ -45,12 +48,7 @@
    -
    - -
    -

    Welcome to A.D.A.M. Interactive Anatomy

    -
    -
    + @@ -136,7 +134,8 @@
    - + + @@ -146,12 +145,18 @@ - + + + + + + +