diff --git a/400-SOURCECODE/AIAHTML5.Web/app/controllers/TileViewListController.js b/400-SOURCECODE/AIAHTML5.Web/app/controllers/TileViewListController.js
index f537d30..f4ed9fd 100644
--- a/400-SOURCECODE/AIAHTML5.Web/app/controllers/TileViewListController.js
+++ b/400-SOURCECODE/AIAHTML5.Web/app/controllers/TileViewListController.js
@@ -26,7 +26,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
$rootScope.speechBubbleDimaensions = [];
$scope.runningSearchWorkers = [];
$scope.clickedPins = [];
-
+ $scope.sliderPercentValue = 1;
$scope.query = {
selectedbodyregion: '',
selectedbodysystem: '',
@@ -76,6 +76,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
$rootScope.imageName = $rootScope.OpenedTileData[3];
$rootScope.bodySystemName = $rootScope.OpenedTileData[2];
$rootScope.OpenItemImagePath = "../../../content/images/aa/images/" + $rootScope.OpenedTileData[3];
+ $scope.OpenItemImagePath = "../../../content/images/aa/images/" + $rootScope.OpenedTileData[3];
//3. set opened module item title
localStorage.setItem("currentViewTitle", $rootScope.OpenedTileData[6]);
@@ -150,15 +151,29 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
$scope.currentTitleFromJson = localStorage.getItem("currentViewTitle");
$("#modItemImage").attr('src', $rootScope.OpenItemImagePath);
+
+ $rootScope.ViewImageWidth = $("#modItemImage").width();
+ $scope.ViewImageWidth = $("#modItemImage").width();
+ $scope.ViewImageHeight = $("#modItemImage").height();
+
+ $scope.relativeDimesion = 0;
+ $("#modItemImage").css("width", $rootScope.ViewImageWidth + "px");
+
+
//0.5 create canvas on the top of image so that I can draw a line over the canvas.
var canvas = document.createElement('canvas');
canvas.id = 'aaDetailViewCanvas';
+ canvas.className = '.aaCanvas'
canvas.height = parseInt(($scope.imageHeight));
canvas.width = parseInt($scope.imageWidth);
canvas.style.left = '0px';
canvas.style.top = '0px';
canvas.style.position = "absolute";
-
+ //canvas.addEventListener('click', function () {
+ // alert('canvas clicked');
+ // var clickedPint = $scope.getMousePos(event);
+ // alert('x: ' + clickedPint.x + ', y:' + clickedPint.y);
+ //})
$("#canvasDiv").append(canvas);
$scope.context = canvas.getContext("2d")
@@ -196,7 +211,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
$scope.imageHeight = this.height;
}
-
+
angular.element(document).ready(function (e) {
@@ -208,7 +223,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
})
$scope.showAllPins = function () {
-
+
var promise = ModuleService.getPinDataForImage($rootScope.imageName)
.then(
@@ -234,8 +249,8 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
$scope.drawStaticPinsOnImage('aaDetailViewCanvas', value._PinId, value._PinX, value._PinY, value._HeadX, value._HeadY)
})
-
-
+
+
//load search/vocab data
$rootScope.loadSearchData();
}
@@ -458,7 +473,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
$scope.selectedSystemName = null;
if ($scope.isHidePinBtnClicked) {
- // $scope.showAllPinsAfterHide($scope.aaPinData);
+ // $scope.showAllPinsAfterHide($scope.aaPinData);
$scope.showAllPinsAfterHide();
}
else {
@@ -469,56 +484,55 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
$scope.selectedSystemName = event.currentTarget.title;
-
- // get termText info
- var promise = ModuleService.getTermTextDataForPin($scope.moduleName)
- .then(
- function (response) {
- $scope.TermInfo = response.data.Terms.Term;
+ // get termText info
+ var promise = ModuleService.getTermTextDataForPin($scope.moduleName)
+ .then(
+ function (response) {
+
+ $scope.TermInfo = response.data.Terms.Term;
- //on gettng all required data, draw pins
- if ($scope.aaPinData != null && $scope.aaPinData.length > 0) {
+ //on gettng all required data, draw pins
+ if ($scope.aaPinData != null && $scope.aaPinData.length > 0) {
- $scope.selectedSystemPinData = new jinqJs()
- .from($scope.aaPinData)
- .where("_BodySystemName == " + $scope.selectedSystemName)
- .select();
- if ($scope.isHidePinBtnClicked) {
- // $scope.showAllPinsAfterHide($scope.selectedSystemPinData);
- $scope.showAllPinsAfterHide();
+ $scope.selectedSystemPinData = new jinqJs()
+ .from($scope.aaPinData)
+ .where("_BodySystemName == " + $scope.selectedSystemName)
+ .select();
+ if ($scope.isHidePinBtnClicked) {
+ // $scope.showAllPinsAfterHide($scope.selectedSystemPinData);
+ $scope.showAllPinsAfterHide();
- }
- else
- {
- //remove other system pins
- if ($scope.selectedSystemPinData != null && $scope.selectedSystemPinData.length > 0) {
+ }
+ else {
+ //remove other system pins
+ if ($scope.selectedSystemPinData != null && $scope.selectedSystemPinData.length > 0) {
- angular.forEach($scope.aaPinData, function (aaPinDataValue, aaPinDataKey) {
+ angular.forEach($scope.aaPinData, function (aaPinDataValue, aaPinDataKey) {
- if (aaPinDataValue._BodySystemName != $scope.selectedSystemName)
- $scope.removePin('aaDetailViewCanvas', aaPinDataValue._PinId);
- })
+ if (aaPinDataValue._BodySystemName != $scope.selectedSystemName)
+ $scope.removePin('aaDetailViewCanvas', aaPinDataValue._PinId);
+ })
- angular.forEach($scope.selectedSystemPinData, function (value, key) {
+ angular.forEach($scope.selectedSystemPinData, function (value, key) {
- $scope.drawStaticPinsOnImage('aaDetailViewCanvas', value._PinId, value._PinX, value._PinY, value._HeadX, value._HeadY)
+ $scope.drawStaticPinsOnImage('aaDetailViewCanvas', value._PinId, value._PinX, value._PinY, value._HeadX, value._HeadY)
- })
- //show annotation on first pin of the sysyem
- $scope.showAnnotation($scope.selectedSystemPinData, false, false, false);
- }
- }
+ })
+ //show annotation on first pin of the sysyem
+ $scope.showAnnotation($scope.selectedSystemPinData, false, false, false);
}
- },
- function (error) {
- // handle errors here
- console.log(' error: ' + error.statusText);
- }
- )
-
- }
+ }
+ }
+ },
+ function (error) {
+ // handle errors here
+ console.log(' error: ' + error.statusText);
+ }
+ )
+
+ }
}
$scope.showAnnotation = function (selectedPinData, isCtrlPressed, isPinClicked, isItemSearched) {
@@ -540,53 +554,53 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
$scope.GetAnnotationBasedOnActualTermNo(pinTermNumber);
- if (isCtrlPressed) {
+ if (isCtrlPressed) {
+ }
+ else {
+ if (isPinClicked || isItemSearched) {
+ var existingSpeechBubble = $("div[id*='speechBubble']");
+ for (var i = 0; i < existingSpeechBubble.length; i++) {
+ existingSpeechBubble[i].parentNode.removeChild(existingSpeechBubble[i]);
+
+ //make all pin heads grey
+ var radial = $('#aaDetailViewCanvas').createGradient({
+ x1: 50, y1: 50,
+ x2: 50, y2: 50,
+ r1: 10, r2: 30,
+ c1: 'rgba(100, 50, 0,0)',
+ c2: 'rgb(216, 216, 216)'
+ });
+
+
+ $('#aaDetailViewCanvas').setLayers({
+ fillStyle: radial,
+ }).drawLayers();
}
- else {
- if (isPinClicked || isItemSearched) {
- var existingSpeechBubble = $("div[id*='speechBubble']");
- for (var i = 0; i < existingSpeechBubble.length; i++) {
- existingSpeechBubble[i].parentNode.removeChild(existingSpeechBubble[i]);
-
- //make all pin heads grey
- var radial = $('#aaDetailViewCanvas').createGradient({
- x1: 50, y1: 50,
- x2: 50, y2: 50,
- r1: 10, r2: 30,
- c1: 'rgba(100, 50, 0,0)',
- c2: 'rgb(216, 216, 216)'
- });
-
-
- $('#aaDetailViewCanvas').setLayers({
- fillStyle: radial,
- }).drawLayers();
- }
-
- var existingSpeechBubbleLine = $("div[id*='speechBubbleLine']");
- for (var i = 0; i < existingSpeechBubbleLine.length; i++) {
- existingSpeechBubbleLine[i].parentNode.removeChild(existingSpeechBubbleLine[i]);
- }
- var speechBubbleDraggedLine = $("div[id*='speechBubbleDraggedLine']");
- for (var i = 0; i < speechBubbleDraggedLine.length; i++) {
- speechBubbleDraggedLine[i].parentNode.removeChild(speechBubbleDraggedLine[i]);
- }
- }
+
+ var existingSpeechBubbleLine = $("div[id*='speechBubbleLine']");
+ for (var i = 0; i < existingSpeechBubbleLine.length; i++) {
+ existingSpeechBubbleLine[i].parentNode.removeChild(existingSpeechBubbleLine[i]);
}
- if (pinDataWithFirstTermNumber.length > 1) {
- isSameTermWithMultiPin = true;
+ var speechBubbleDraggedLine = $("div[id*='speechBubbleDraggedLine']");
+ for (var i = 0; i < speechBubbleDraggedLine.length; i++) {
+ speechBubbleDraggedLine[i].parentNode.removeChild(speechBubbleDraggedLine[i]);
}
+ }
+ }
+ if (pinDataWithFirstTermNumber.length > 1) {
+ isSameTermWithMultiPin = true;
+ }
+
+ angular.forEach(pinDataWithFirstTermNumber, function (value, key) {
+ $scope.selectedPin.push(value._PinId);
+ var headX = (parseInt(value._HeadX));
+ var headY = (parseInt(value._HeadY));
+ $scope.createSpeechBubble(parseInt(headX) + 10, parseInt(headY) + 10, value._PinId, isCtrlPressed, isPinClicked, isSameTermWithMultiPin);
+ })
+
+
- angular.forEach(pinDataWithFirstTermNumber, function (value, key) {
- $scope.selectedPin.push(value._PinId);
- var headX = (parseInt(value._HeadX));
- var headY = (parseInt(value._HeadY));
- $scope.createSpeechBubble(parseInt(headX) + 10, parseInt(headY) + 10, value._PinId, isCtrlPressed, isPinClicked, isSameTermWithMultiPin);
- })
-
-
-
}
$rootScope.isLoading = false;
@@ -596,7 +610,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
$scope.removeSpeechBubble = function () {
-
+
//clear speech bubbles
var speechBubbles = $("div[id*='speechBubble']");
if (speechBubbles != null || speechBubbles != undefined && speechBubbles.length > 0) {
@@ -652,7 +666,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
$scope.hideSpeechBubble = function () {
-
+
//clear speech bubbles
var speechBubbles = $("div[id*='speechBubble']");
if (speechBubbles != null || speechBubbles != undefined && speechBubbles.length > 0) {
@@ -691,7 +705,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
$("#dot").css("visibility", "hidden");
var verticalScrollPosition = canvasDiv.scrollTop;
var horizontlScrollPosition = canvasDiv.scrollLeft;
- $scope.angle(x, y, evt.pageX + horizontlScrollPosition - $('#canvasDiv').offset().left, evt.pageY + verticalScrollPosition - $('#canvasDiv').offset().top, true);
+ $scope.angle(x * $scope.sliderPercentValue, y * $scope.sliderPercentValue, evt.pageX + horizontlScrollPosition - $('#canvasDiv').offset().left, evt.pageY + verticalScrollPosition - $('#canvasDiv').offset().top, true);
},
});
@@ -699,6 +713,9 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
$scope.createSpeechBubbleBasedOnAnnotationLength = function (x, y, PinId) {
+ x = x * $scope.sliderPercentValue;
+ y = y * $scope.sliderPercentValue;
+
var speechBubbleHTML = ''
+ ''
+ '
'
@@ -779,17 +796,17 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
$rootScope.speechBubbleDimaensions.push({ "currentX": x, "currentY": y, "id": PinId });
speechBubbleDims.push({ currentX: x, currentY: y });
document.getElementById('speechBubbleLine' + PinId + '').style.display = 'block';
- document.getElementById('speechBubbleLine' + PinId + '').style.left = ((speechBubbleDims[0].currentX - 45)) + 'px';
- document.getElementById('speechBubbleLine' + PinId + '').style.top = ((speechBubbleDims[0].currentY) - 20) + 'px';
+ document.getElementById('speechBubbleLine' + PinId + '').style.left = ((speechBubbleDims[0].currentX - 45 * $scope.sliderPercentValue)) + 'px';
+ document.getElementById('speechBubbleLine' + PinId + '').style.top = ((speechBubbleDims[0].currentY) - 20 * $scope.sliderPercentValue) + 'px';
document.getElementById('speechBubble' + PinId + '').style.display = 'block';
- document.getElementById('speechBubble' + PinId + '').style.left = (speechBubbleDims[0].currentX - 70) + 'px';
- document.getElementById('speechBubble' + PinId + '').style.top = (speechBubbleDims[0].currentY - 58) + 'px';
+ document.getElementById('speechBubble' + PinId + '').style.left = (speechBubbleDims[0].currentX - 70 * $scope.sliderPercentValue) + 'px';
+ document.getElementById('speechBubble' + PinId + '').style.top = (speechBubbleDims[0].currentY - 58 * $scope.sliderPercentValue) + 'px';
$('.common-drag').draggable(
{
-
+
drag: function (evt) {
-
+
var verticalScrollPosition = document.getElementById('canvasDiv').scrollTop;
var horizontlScrollPosition = document.getElementById('canvasDiv').scrollLeft;
var clickedSpeechBubbleId = $(this).attr("id");
@@ -850,7 +867,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
$scope.angle = function (id, cx, cy, ex, ey, BoolValues) {
-
+
var dy = ey - cy;
var dx = ex - cx;
var theta = 0;
@@ -871,7 +888,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
var d = Math.sqrt((cx - ex) * (cx - ex) + (cy - ey) * (cy - ey));
var e = cy;
var f = cx;
-
+
if (BoolValues == true) {
$("#speechBubbleDraggedLine" + id).css({ 'display': 'block', 'width': d + 'px', 'top': (e - 10) + 'px', 'left': (f - 5) + 'px', 'transform': 'rotate(' + theta + 'deg)', '-moz-transform': 'rotate(' + theta + 'deg)', '-webkit-transform': 'rotate(' + theta + 'deg)', 'transform-origin': '0% 0%' });
}
@@ -885,106 +902,209 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
$scope.drawStaticPinsOnImage = function (canvasId, PinId, offsetX1, offsetY1, x, y) {
+ console.log('drawStaticPinsOnImage')
+ // if ($scope.isSliderChange == true) {
+ console.log('isSliderrChange')
+ var radial = $('#' + canvasId).createGradient({
+ x1: 50, y1: 50,
+ x2: 50, y2: 50,
+ r1: 10, r2: 30,
+ c1: 'rgba(100, 50, 0,0)',
+ c2: 'rgb(216, 216, 216)'
+ });
+ $('#' + canvasId).drawLine({
+
+ layer: true,
+ name: "Pin_" + PinId,
+ groups: ["Pin_" + PinId],
+ strokeStyle: 'black',
+ strokeWidth: 2,
+ visible: true,
+ x1: offsetX1 * $scope.sliderPercentValue, y1: offsetY1 * $scope.sliderPercentValue,
+ x2: x * $scope.sliderPercentValue, y2: y * $scope.sliderPercentValue,
+
+ }).drawArc({
+ name: "PinArc_" + PinId,
+ layer: true,
+ groups: ["Pin_" + PinId],
+ strokeStyle: 'grey',
+ strokeWidth: 2,
+ visible: true,
+ fillStyle: radial,
+ x: x * $scope.sliderPercentValue, y: y * $scope.sliderPercentValue,
+ radius: 5 * $scope.sliderPercentValue,
- var radial = $('#' + canvasId).createGradient({
- x1: 50, y1: 50,
- x2: 50, y2: 50,
- r1: 10, r2: 30,
- c1: 'rgba(100, 50, 0,0)',
- c2: 'rgb(216, 216, 216)'
- });
- $('#' + canvasId).drawLine({
-
- layer: true,
- name: "Pin_" + PinId,
- groups: ["Pin_" + PinId],
- strokeStyle: 'black',
- strokeWidth: 2,
- visible: true,
- x1: offsetX1, y1: offsetY1,
- x2: x, y2: y,
-
- }).drawArc({
- name: "PinArc_" + PinId,
- layer: true,
- groups: ["Pin_" + PinId],
- strokeStyle: 'grey',
- strokeWidth: 2,
- visible: true,
- fillStyle: radial,
- x: x, y: y,
- radius: 5,
-
- click: function (clickedPin) {
-
- //change the head color to green
- var radialAfterClick = $('#aaDetailViewCanvas').createGradient({
- x1: 50, y1: 50,
- x2: 50, y2: 50,
- r1: 10, r2: 30,
- c1: 'rgba(100, 50, 0,0)',
- c2: 'rgb(126, 187, 83)'
- });
+ click: function (clickedPin) {
+ // alert('pin clciked = ' + clickedPin.name)
+ //change the head color to green
+ var radialAfterClick = $('#aaDetailViewCanvas').createGradient({
+ x1: 50, y1: 50,
+ x2: 50, y2: 50,
+ r1: 10, r2: 30,
+ c1: 'rgba(100, 50, 0,0)',
+ c2: 'rgb(126, 187, 83)'
+ });
- clickedPin.fillStyle = radialAfterClick;
+ clickedPin.fillStyle = radialAfterClick;
- var pinID = (clickedPin.name).substring(7, (clickedPin.name).length);
- // alert('pinId: ' + pinID);
- //showAnnotation();
+ var pinID = (clickedPin.name).substring(7, (clickedPin.name).length);
+ // alert('pinId: ' + pinID);
+ //showAnnotation();
+
+ var pinData = new jinqJs()
+ .from($scope.aaPinData)
+ .where("_PinId == " + pinID)
+ .select();
+
+
+ var pinTermNumber = pinData[0]._TermId;
+
+ var pinWithSameTerm = new jinqJs()
+
+ .from($scope.aaPinData)
+ .where("_TermId == " + pinTermNumber)
+ .select();
+
+
+ if (pinWithSameTerm != undefined && pinWithSameTerm != null && pinWithSameTerm.length > 0) {
- var pinData = new jinqJs()
- .from($scope.aaPinData)
- .where("_PinId == " + pinID)
- .select();
-
-
- var pinTermNumber = pinData[0]._TermId;
-
- var pinWithSameTerm = new jinqJs()
-
- .from($scope.aaPinData)
- .where("_TermId == " + pinTermNumber)
- .select();
-
-
- if (pinWithSameTerm != undefined && pinWithSameTerm != null && pinWithSameTerm.length > 0) {
-
for (var i = 0; i < pinWithSameTerm.length; i++) {
-
- $scope.clickedPins.push({ 'id': pinWithSameTerm[i]._PinId })
- }
-
- }
- var selectedPinData = new jinqJs()
- .from($scope.aaPinData)
- .where("_PinId == " + pinID)
- .select();
- if (clickedPin.event.ctrlKey == true) {
- $scope.showAnnotation(selectedPinData, true, true, false);
+ $scope.clickedPins.push({ 'id': pinWithSameTerm[i]._PinId })
+ }
+
+ }
+
+ var selectedPinData = new jinqJs()
+ .from($scope.aaPinData)
+ .where("_PinId == " + pinID)
+ .select();
+ if (clickedPin.event.ctrlKey == true) {
+ $scope.showAnnotation(selectedPinData, true, true, false);
+
+ }
+ else {
+ $scope.showAnnotation(selectedPinData, false, true, false);
+
+ }
- }
- else {
- $scope.showAnnotation(selectedPinData, false, true, false);
}
+ }).drawLayers();
+ //}
+ // else
+ // {
+ // var radial = $('#' + canvasId).createGradient({
+ // x1: 50, y1: 50,
+ // x2: 50, y2: 50,
+ // r1: 10, r2: 30,
+ // c1: 'rgba(100, 50, 0,0)',
+ // c2: 'rgb(216, 216, 216)'
+ // });
+ // $('#' + canvasId).drawLine({
- }
+ // layer: true,
+ // name: "Pin_" + PinId,
+ // groups: ["Pin_" + PinId],
+ // strokeStyle: 'black',
+ // strokeWidth: 2,
+ // visible: true,
+ // x1: offsetX1, y1: offsetY1,
+ // x2: x, y2: y,
+
+ // }).drawArc({
+ // name: "PinArc_" + PinId,
+ // layer: true,
+ // groups: ["Pin_" + PinId],
+ // strokeStyle: 'grey',
+ // strokeWidth: 2,
+ // visible: true,
+ // fillStyle: radial,
+ // x: x, y: y,
+ // radius: 5,
+
+ // click: function (clickedPin) {
+ // alert('pin clciked = ' + clickedPin.name) //change the head color to green
+ // var radialAfterClick = $('#aaDetailViewCanvas').createGradient({
+ // x1: 50, y1: 50,
+ // x2: 50, y2: 50,
+ // r1: 10, r2: 30,
+ // c1: 'rgba(100, 50, 0,0)',
+ // c2: 'rgb(126, 187, 83)'
+ // });
+
+ // clickedPin.fillStyle = radialAfterClick;
+
+ // var pinID = (clickedPin.name).substring(7, (clickedPin.name).length);
+ // // alert('pinId: ' + pinID);
+ // //showAnnotation();
+
+ // var pinData = new jinqJs()
+ // .from($scope.aaPinData)
+ // .where("_PinId == " + pinID)
+ // .select();
- }).drawLayers();
+
+ // var pinTermNumber = pinData[0]._TermId;
+
+ // var pinWithSameTerm = new jinqJs()
+
+ // .from($scope.aaPinData)
+ // .where("_TermId == " + pinTermNumber)
+ // .select();
+
+
+ // if (pinWithSameTerm != undefined && pinWithSameTerm != null && pinWithSameTerm.length > 0) {
+
+ // for (var i = 0; i < pinWithSameTerm.length; i++) {
+
+ // $scope.clickedPins.push({ 'id': pinWithSameTerm[i]._PinId })
+ // }
+
+ // }
+
+ // var selectedPinData = new jinqJs()
+ // .from($scope.aaPinData)
+ // .where("_PinId == " + pinID)
+ // .select();
+ // if (clickedPin.event.ctrlKey == true) {
+ // $scope.showAnnotation(selectedPinData, true, true, false);
+
+ // }
+ // else {
+ // $scope.showAnnotation(selectedPinData, false, true, false);
+
+ // }
+
+
+ // }
+
+ // }).drawLayers();
+ //}
}
- $scope.removePin = function (canvasId,pinId) {
+ $scope.getMousePos = function (evt) {
+
+ return {
+ x: Math.round(evt.pageX - $('#canvasDiv').offset().left),
+ y: Math.round(evt.pageY - $('#canvasDiv').offset().top)
+ }
+ }
- var pinName = 'Pin_' + pinId;
- var pinArcName = 'PinArc_' + pinId;
- $('#' + canvasId).removeLayer(pinName).drawLayers();
- $('#' + canvasId).removeLayer(pinArcName).drawLayers();
+ $scope.removePin = function (canvasId, pinId) {
- $scope.removeSpeechBubble();
+ var pinName = 'Pin_' + pinId;
+ var pinArcName = 'PinArc_' + pinId;
+ $('#' + canvasId).removeLayer(pinName).drawLayers();
+ $('#' + canvasId).removeLayer(pinArcName).drawLayers();
+
+ $scope.removeSpeechBubble();
+
+ //$rootScope.isSliderChanged = true;
+ //$('#aaDetailViewCanvas').removeLayers();
}
$rootScope.$on('annotationToolEvent', function (event, data) {
@@ -1045,13 +1165,13 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
console.log(' error: ' + error.statusText);
}
)
-
+
}
$scope.GetAnnotationBasedOnActualTermNo = function (actualTermNo) {
-
+
var languageArray = $rootScope.lexiconLanguageArray;
if ($scope.AAPinTermData != null || $scope.AAPinTermData != undefined) {
@@ -1062,30 +1182,30 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
.select();
if ($scope.matchedTermNoData != null || $scope.matchedTermNoData != undefined) {
-
+
for (var j = 0; j <= languageArray.length - 1; j++) {
-
+
$scope.matchedLanguageTermNoData = new jinqJs()
.from($scope.matchedTermNoData)
.where('_LanguageId == ' + languageArray[j].id)
.select();
- var termText = $scope.matchedLanguageTermNoData[0]._TermText;
+ var termText = $scope.matchedLanguageTermNoData[0]._TermText;
$scope.MultiLanguageAnnationArray.push(termText);
-
+
};
-
- }
-
+
}
+
}
+ }
+
+
-
-
$scope.hidePins = function () {
@@ -1102,14 +1222,14 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
var pinArcName = 'PinArc_' + aaPinDataValue._PinId;
$('#aaDetailViewCanvas').setLayer(pinName, {
- visible: false // set to true instead to show the layer again
+ visible: false // set to true instead to show the layer again
}).drawLayers();
$('#aaDetailViewCanvas').setLayer(pinArcName, {
visible: false // set to true instead to show the layer again
}).drawLayers();
})
-
+
$rootScope.isLoading = false;
$('#spinner').css('visibility', 'hidden');
}
@@ -1153,7 +1273,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
$scope.showSpeechBubble();
};
-
+
$scope.showSystemPins = function (seletedSystemPinData, isShowSelectedPins) {
if (isShowSelectedPins) {
@@ -1165,23 +1285,23 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
.where('_PinId != ' + value.id)
.select();
})
- angular.forEach(seletedSystemPinData, function (aaPinDataValue, aaPinDataKey) {
+ angular.forEach(seletedSystemPinData, function (aaPinDataValue, aaPinDataKey) {
- // if (aaPinDataValue._PinId != value.id) {
- var pinName = 'Pin_' + aaPinDataValue._PinId;
- var pinArcName = 'PinArc_' + aaPinDataValue._PinId;
+ // if (aaPinDataValue._PinId != value.id) {
+ var pinName = 'Pin_' + aaPinDataValue._PinId;
+ var pinArcName = 'PinArc_' + aaPinDataValue._PinId;
- $('#aaDetailViewCanvas').setLayer(pinName, {
- visible: false // set to true instead to show the layer again
- }).drawLayers();
+ $('#aaDetailViewCanvas').setLayer(pinName, {
+ visible: false // set to true instead to show the layer again
+ }).drawLayers();
- $('#aaDetailViewCanvas').setLayer(pinArcName, {
- visible: false // set to true instead to show the layer again
- }).drawLayers();
- // }
- })
+ $('#aaDetailViewCanvas').setLayer(pinArcName, {
+ visible: false // set to true instead to show the layer again
+ }).drawLayers();
+ // }
+ })
- // })
+ // })
$scope.clickedPins = [];
}
@@ -1210,7 +1330,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
$scope.showItemsForSearch = function () {
console.log('showItemsForSearch is called');
//this check is for log only because we are writing length so need to check if its not null or undefined
-
+
$timeout(function () {
if (($scope.AAPinTermData != null || $scope.AAPinTermData != undefined) && ($scope.AAPinTermData.length > 0)) {
@@ -1273,6 +1393,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
$scope.IsSearchVisible = false;
}
+
$rootScope.isShowHideButtonClicked = true;
$scope.ShowHideAnnotation = function () {
if ($rootScope.isShowHideButtonClicked == true) {
@@ -1297,8 +1418,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
$("#" + $rootScope.annotationArray[i].speechBubbleLineId).css("display", "none");
}
}
- else
- {
+ else {
$rootScope.isShowHideButtonClicked = true;
for (var i = 0; i <= $rootScope.annotationArray.length - 1; i++) {
$("#" + $rootScope.annotationArray[i].speechBuubleId).css("display", "block");
@@ -1365,10 +1485,123 @@ function showHideAnnotation(event) {
}
function showSelectedPins(event) {
-
+
console.log('showSelectedPins is called')
var scope = angular.element(document.getElementById("aaDetailPageDiv")).scope();
scope.$apply(function () {
scope.showSelectedPins(event);
});
-}
\ No newline at end of file
+}
+
+function onZoom(scope) {
+ debugger;
+ //$(".common-drag").remove();
+ //$(".commonDot").remove();
+ //$(".commonDraggedLine").remove();
+ //var radial = $('#aaDetailViewCanvas').createGradient({
+ // x1: 50, y1: 50,
+ // x2: 50, y2: 50,
+ // r1: 10, r2: 30,
+ // c1: 'rgba(100, 50, 0,0)',
+ // c2: 'rgb(216, 216, 216)'
+ //});
+ //$('#aaDetailViewCanvas').setLayers({
+ // fillStyle: radial,
+ //}).drawLayers();
+ // scope.removePin();
+ // scope.showAllPins();
+
+
+ //6. Show all pins on AA opened item
+}
+
+var sliderVal = 0.0;
+$(document).ready(function () {
+ $(".slider").slider({
+ min: 25,
+ max: 100,
+ value: 100,
+ range: "min",
+ orientation: "vertical",
+ slide: function (event, ui) {
+
+ sliderVal = ui.value;
+
+ var scope = angular.element(document.getElementById("aaDetailPageDiv")).scope();
+ scope.$apply(function () {
+ var relativeWidth = 0;
+ var relativeHeight = 0;
+
+ if (ui.value == 100) {
+ relativeWidth = scope.ViewImageWidth;
+ relativeHeight = scope.ViewImageHeight
+ scope.sliderPercentValue = 1.0;
+ }
+ else if (ui.value == 85) {
+ relativeWidth = scope.ViewImageWidth * 0.85;
+ relativeHeight = scope.ViewImageHeight * 0.85;
+ scope.sliderPercentValue = 0.85;
+
+ } else if (ui.value == 70) {
+ relativeWidth = scope.ViewImageWidth * 0.70;
+ relativeHeight = scope.ViewImageHeight * 0.70;
+ scope.sliderPercentValue = 0.70;
+ } else if (ui.value == 55) {
+
+ relativeWidth = scope.ViewImageWidth * 0.55;
+ relativeHeight = scope.ViewImageHeight * 0.55;
+ scope.sliderPercentValue = 0.55;
+
+ } else if (ui.value == 40) {
+
+ relativeWidth = scope.ViewImageWidth * 0.40;
+ relativeHeight = scope.ViewImageHeight * 0.40;
+ scope.sliderPercentValue = 0.40;
+
+ } else if (ui.value == 25) {
+
+ relativeWidth = scope.ViewImageWidth * 0.25;
+ relativeHeight = scope.ViewImageHeight * 0.25;
+ scope.sliderPercentValue = 0.25;
+
+ }
+
+ console.log('ui.value= '+ui.value+' ,relativeWidth= ' + relativeWidth + ',relativeHeight= ' + relativeHeight)
+ if (ui.value == 25 || ui.value == 40 || ui.value == 55 || ui.value == 70 || ui.value == 85 || ui.value == 100) {
+ $("#modItemImage").css("width", relativeWidth + "px");
+ $("#modItemImage").css("height", relativeHeight + "px");
+ $("#aaDetailViewCanvas").css("width", relativeWidth + "px");
+ $("#modItemImage").css("height", relativeHeight + "px");
+
+ $("#modItemImage").attr('src', '');
+
+
+ $("#aaDetailViewCanvas").remove();
+ //0.5 create canvas on the top of image so that I can draw a line over the canvas.
+ var canvas = document.createElement('canvas');
+ canvas.id = 'aaDetailViewCanvas';
+ canvas.className = 'aaCanvas';
+ canvas.height = relativeHeight;
+ canvas.width = relativeWidth;
+ canvas.style.left = '0px';
+ canvas.style.top = '0px';
+ canvas.style.position = "absolute";
+
+ $("#canvasDiv").append(canvas);
+ scope.context = canvas.getContext("2d")
+ $("#modItemImage").attr('src', scope.OpenItemImagePath);
+ scope.isSliderChange = true;
+ scope.showAllPins();
+ }
+
+
+
+
+ });
+ }
+ })
+ .slider("pips", {
+ rest: "label",
+ step: "15"
+ });
+});
\ No newline at end of file
diff --git a/400-SOURCECODE/AIAHTML5.Web/app/views/aa/atlas-anatomy-detail.html b/400-SOURCECODE/AIAHTML5.Web/app/views/aa/atlas-anatomy-detail.html
index 1be33fe..3f4f3da 100644
--- a/400-SOURCECODE/AIAHTML5.Web/app/views/aa/atlas-anatomy-detail.html
+++ b/400-SOURCECODE/AIAHTML5.Web/app/views/aa/atlas-anatomy-detail.html
@@ -29,7 +29,7 @@