ADAM / AIAHTML5

Commit 0c78030d28d84ac3a06b791012912ffda622f940

Authored by Nikita Kulshreshtha
1 parent 14e45497

added ATBar code in AA.

Inline Side-by-side
Showing 4 changed files with 151 additions and 126 deletions
400-SOURCECODE/AIAHTML5.Web/app/controllers/HomeController.js
  View file @0c78030
... ... @@ -353,6 +353,98 @@ function ($rootScope, Modules, $log, $location, $timeout, DataService, Authentic
353 353 $rootScope.lexiconLanguageArray = [];
354 354 $rootScope.lexiconLanguageArray.push({ id: "1", language: "English" });
355 355 $(document).ready(function () {
  356 +
  357 +
  358 + // annotation slider starts
  359 + function onBrushSizeChange() {
  360 + $('.btnCursor').addClass('activebtncolor');
  361 + $(".btn-annotation").removeClass("activebtncolor");
  362 + $(".btn-annotation-erase").removeClass("activebtncolor");
  363 + $(".btn-annotation-erase").removeClass("activebtncolor");
  364 + $(".annotationpaintbrushsize").removeClass("activebtncolor");
  365 + var x = $('#canvasPaint').css("z-index");
  366 +
  367 + var y = $('#canvas').css("z-index");
  368 + if (x > y) {
  369 + y = parseInt(x) + 1;
  370 + } else {
  371 + y = parseInt(y) + 1;
  372 + }
  373 + $('#canvas').css("z-index", y);
  374 + }
  375 +
  376 + $("#slider-range-min-2").slider({
  377 + range: "min",
  378 + min: 1,
  379 + max: 60,
  380 + value: 1,
  381 + slide: function (event, ui) {
  382 +
  383 + onBrushSizeChange();
  384 + console.log("sliding");
  385 + $("#btnBrushSize").val(ui.value);
  386 +
  387 + },
  388 + stop: function (event, ui) {
  389 +
  390 + $("#paintLine").attr("data-size", ui.value);
  391 +
  392 + }
  393 +
  394 + });
  395 +
  396 +
  397 + $("#btnBrushSize").keydown(function () {
  398 + onBrushSizeChange();
  399 + var brushSizevalue = this.value;
  400 + $("#slider-range-min-2").slider("value", parseInt(brushSizevalue));
  401 + });
  402 + $("#btnBrushSize").keyup(function () {
  403 + onBrushSizeChange();
  404 + var brushSizevalue = this.value;
  405 + $("#slider-range-min-2").slider("value", parseInt(brushSizevalue));
  406 + });
  407 + $("#btnBrushSizeIncrement").click(function () {
  408 + onBrushSizeChange();
  409 + var brushIncrementVar = $("#btnBrushSize").val();
  410 + if (brushIncrementVar >= 60) {
  411 + $("#slider-range-min-2").slider("value", 60);
  412 + }
  413 + else if (brushIncrementVar == "") {
  414 + var brushIncrementedValue = 1;
  415 + $("#btnBrushSize").val(brushIncrementedValue);
  416 + $("#slider-range-min-2").slider("value", parseInt(brushIncrementedValue));
  417 + }
  418 + else {
  419 + var brushIncrementedValue = parseInt(brushIncrementVar) + 1;
  420 + $("#btnBrushSize").val(brushIncrementedValue);
  421 + $("#slider-range-min-2").slider("value", parseInt(brushIncrementedValue));
  422 + }
  423 + });
  424 + $("#btnBrushSizeDecrease").click(function () {
  425 + onBrushSizeChange();
  426 + var brushDecreaseVar = $("#btnBrushSize").val();
  427 + if (brushDecreaseVar == "") {
  428 + var brushDecrementedValue = 1;
  429 + $("#btnBrushSize").val(brushDecrementedValue);
  430 + $("#slider-range-min-2").slider("value", parseInt(brushDecrementedValue));
  431 + }
  432 + else if (brushDecreaseVar <= 1) {
  433 + $("#slider-range-min-2").slider("value", 1);
  434 + }
  435 + else {
  436 + var brushDecrementedValue = parseInt(brushDecreaseVar) - 1;
  437 + $("#btnBrushSize").val(brushDecrementedValue);
  438 + $("#slider-range-min-2").slider("value", parseInt(brushDecrementedValue));
  439 + }
  440 + });
  441 +
  442 + $("#btnBrushSize").val($("#slider-range-min-2").slider("value"));
  443 +
  444 +
  445 + // annotation slider ends
  446 +
  447 +
356 448 // getUserDetails();
357 449  
358 450 // var ajaxResult = [];
... ...
400-SOURCECODE/AIAHTML5.Web/app/controllers/TileViewListController.js
  View file @0c78030
... ... @@ -155,7 +155,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
155 155 canvas.style.top = '0px';
156 156 canvas.style.position = "absolute";
157 157  
158   - $("#imageDiv").append(canvas);
  158 + $("#canvasDiv").append(canvas);
159 159 $scope.context = canvas.getContext("2d")
160 160  
161 161 //6. Show all pins on AA opened item
... ... @@ -197,8 +197,8 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
197 197  
198 198 angular.element(document).ready(function (e) {
199 199 $("#ImagePanel").resize(function () {
200   - $("#imageDiv").scrollLeft($rootScope.CanvasDivLeftPosition);
201   - $("#imageDiv").scrollTop($rootScope.CanvasDivTopPosition);
  200 + $("#canvasDiv").scrollLeft($rootScope.CanvasDivLeftPosition);
  201 + $("#canvasDiv").scrollTop($rootScope.CanvasDivTopPosition);
202 202 });
203 203  
204 204 })
... ... @@ -610,7 +610,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
610 610 $("#dot").css("visibility", "hidden");
611 611 var verticalScrollPosition = canvasDiv.scrollTop;
612 612 var horizontlScrollPosition = canvasDiv.scrollLeft;
613   - $scope.angle(x, y, evt.pageX + horizontlScrollPosition - $('#imageDiv').offset().left, evt.pageY + verticalScrollPosition - $('#imageDiv').offset().top, true);
  613 + $scope.angle(x, y, evt.pageX + horizontlScrollPosition - $('#canvasDiv').offset().left, evt.pageY + verticalScrollPosition - $('#canvasDiv').offset().top, true);
614 614 },
615 615 });
616 616  
... ... @@ -634,7 +634,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
634 634 if (MultipleLanguage == undefined) {
635 635 console.log("No text is found");
636 636 } else {
637   - $('#imageDiv').append(speechBubbleHTML);
  637 + $('#canvasDiv').append(speechBubbleHTML);
638 638  
639 639 if ($scope.MultiLanguageAnnationArray.length > 0) {
640 640 for (var i = 0; i <= $scope.MultiLanguageAnnationArray.length - 1; i++) {
... ... @@ -709,8 +709,8 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
709 709  
710 710 drag: function (evt) {
711 711  
712   - var verticalScrollPosition = document.getElementById('imageDiv').scrollTop;
713   - var horizontlScrollPosition = document.getElementById('imageDiv').scrollLeft;
  712 + var verticalScrollPosition = document.getElementById('canvasDiv').scrollTop;
  713 + var horizontlScrollPosition = document.getElementById('canvasDiv').scrollLeft;
714 714 var clickedSpeechBubbleId = $(this).attr("id");
715 715  
716 716 var clickedPinId = clickedSpeechBubbleId.substring(12, clickedSpeechBubbleId.length);
... ... @@ -720,7 +720,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
720 720  
721 721 for (var i = 0; i <= $rootScope.speechBubbleDimaensions.length - 1; i++) {
722 722 if ($rootScope.speechBubbleDimaensions[i].id == clickedPinId) {
723   - $scope.angle(clickedPinId, $rootScope.speechBubbleDimaensions[i].currentX, $rootScope.speechBubbleDimaensions[i].currentY, evt.pageX + horizontlScrollPosition - $('#imageDiv').offset().left, evt.pageY + verticalScrollPosition - $('#imageDiv').offset().top, true);
  723 + $scope.angle(clickedPinId, $rootScope.speechBubbleDimaensions[i].currentX, $rootScope.speechBubbleDimaensions[i].currentY, evt.pageX + horizontlScrollPosition - $('#canvasDiv').offset().left, evt.pageY + verticalScrollPosition - $('#canvasDiv').offset().top, true);
724 724 }
725 725 }
726 726  
... ... @@ -766,7 +766,17 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
766 766 fillStyle: radialAfterClick,
767 767 }).drawLayers();
768 768 }
769   -
  769 + $rootScope.$on('annotationToolEvent', function (event, data) {
  770 + $('#editstylebackgroundcolor .minicolors >.minicolors-swatch > .minicolors-swatch-color').css("background-color", "rgb(255,255,255)")
  771 + $('#editstylebackgroundcolor .minicolors >.minicolors-panel > .minicolors-grid >.minicolors-picker').css({ "top": "145px", "left": "4px" });
  772 + $('#outlineColor .minicolors >.minicolors-swatch > .minicolors-swatch-color').css("background-color", "rgb(0,0,0)")
  773 + $('#outlineColor .minicolors >.minicolors-panel > .minicolors-grid >.minicolors-picker').css({ "top": "145px", "left": "4px" });
  774 +
  775 + $("#canvas").css("display", "block");
  776 + $("#canvasPaint").css("display", "block");
  777 + $rootScope.onDrawingCanvasClick();
  778 + $rootScope.FreeStylePaint();
  779 + });
770 780  
771 781 $scope.angle = function (id, cx, cy, ex, ey, BoolValues) {
772 782  
... ...
400-SOURCECODE/AIAHTML5.Web/app/views/aa/atlas-anatomy-detail.html
  View file @0c78030
1   -๏ปฟ
  1 +๏ปฟ๏ปฟ
  2 +<style>
  3 + .canvas-annotationStyle {
  4 + display: none;
  5 + background-color: transparent;
  6 + z-index: 12000;
  7 + position: absolute;
  8 + left: 0;
  9 + right: 0;
  10 + }
  11 +
  12 + .canvas-annotationStyle1 {
  13 + display: none;
  14 + background-color: transparent;
  15 + z-index: 12000;
  16 + position: absolute;
  17 + left: 0;
  18 + right: 0;
  19 + }
  20 +</style>
2 21 <div id="aaDetailPageDiv" class="bodyWrap row" ng-controller="TileViewListController">
3 22  
4 23 <!--<div class="col-sm-12 pageHeading">
... ... @@ -89,9 +108,11 @@
89 108 <div class="container-fluid">
90 109 <div class="row">
91 110  
92   - <div class=" col-sm-12 img-thumbnail" id="imageDiv" style="height: 478px; overflow: scroll;">
93   - <img id="modItemImage" alt="" title="" style="left:0px;top:0px;position:absolute">
94   - <!--<div class="clearfix">
  111 + <div class=" col-sm-12 img-thumbnail" id="canvasDiv" style="height: 478px; overflow: scroll;">
  112 + <canvas id="canvasPaint" ng-click="FreeStylePaint($event)" width="2277" height="3248" class="canvas-annotationStyle1"></canvas>
  113 + <canvas id="canvas" ng-click="onDrawingCanvasClick($event)" width="2277" height="3248" class="canvas-annotationStyle"></canvas>
  114 + <img id="modItemImage" alt="" title="" style="left:0px;top:0px;position:absolute">
  115 + <!--<div class="clearfix">
95 116 <img id="modItemImage" ng-init="alert('hi')" alt="" title="" class="img-responsive">
96 117 </div>
97 118 <!--<div class="col-sm-1 img-thumbnail pull-right" align="center"><img src="../../content/images/1000x600.jpg" alt="" title="" class="img-responsive"></div>
... ... @@ -112,19 +133,19 @@
112 133 });
113 134 </script>
114 135 <script>
115   - $(function () {
116   - $("#slider-range-min-2").slider({
117   - range: "min",
118   - min: 1,
119   - max: 60,
120   - value: 10,
121   - slide: function (event, ui) {
122   - $("#amount-2").val(ui.value);
123   - }
124   - });
125   - $("#amount-2").val($("#slider-vertical-2").slider("value"));
126   -
127   - });
  136 + //$(function () {
  137 + // $("#slider-range-min-2").slider({
  138 + // range: "min",
  139 + // min: 1,
  140 + // max: 60,
  141 + // value: 10,
  142 + // slide: function (event, ui) {
  143 + // $("#amount-2").val(ui.value);
  144 + // }
  145 + // });
  146 + // $("#amount-2").val($("#slider-vertical-2").slider("value"));
  147 +
  148 + //});
128 149 </script>
129 150  
130 151 <script>
... ...
400-SOURCECODE/AIAHTML5.Web/index.html
  View file @0c78030
... ... @@ -1451,109 +1451,11 @@
1451 1451 </script>-->
1452 1452  
1453 1453 <script>
1454   - function onBrushSizeChange() {
1455   - $('.btnCursor').addClass('activebtncolor');
1456   - $(".btn-annotation").removeClass("activebtncolor");
1457   - $(".btn-annotation-erase").removeClass("activebtncolor");
1458   - $(".btn-annotation-erase").removeClass("activebtncolor");
1459   - $(".annotationpaintbrushsize").removeClass("activebtncolor");
1460   - var x = $('#canvasPaint').css("z-index");
1461   -
1462   - var y = $('#canvas').css("z-index");
1463   - if (x > y) {
1464   - y = parseInt(x) + 1;
1465   - } else {
1466   - y = parseInt(y) + 1;
1467   - }
1468   - $('#canvas').css("z-index", y);
1469   - }
1470   - $(function () {
1471   - $("#slider-range-min-2").slider({
1472   - range: "min",
1473   - min: 1,
1474   - max: 60,
1475   - value: 1,
1476   - slide: function (event, ui) {
1477   - onBrushSizeChange();
1478   - $("#btnBrushSize").val(ui.value);
1479   -
1480   - },
1481   - stop: function (event, ui) {
1482   -
1483   - $("#paintLine").attr("data-size", ui.value);
1484   -
1485   - }
1486   -
1487   - });
1488   -
1489   -
1490   - $("#btnBrushSize").keydown(function () {
1491   - onBrushSizeChange();
1492   - var brushSizevalue = this.value;
1493   - $("#slider-range-min-2").slider("value", parseInt(brushSizevalue));
1494   - });
1495   - $("#btnBrushSize").keyup(function () {
1496   - onBrushSizeChange();
1497   - var brushSizevalue = this.value;
1498   - $("#slider-range-min-2").slider("value", parseInt(brushSizevalue));
1499   - });
1500   - $("#btnBrushSizeIncrement").click(function () {
1501   - onBrushSizeChange();
1502   - var brushIncrementVar = $("#btnBrushSize").val();
1503   - if (brushIncrementVar >= 60) {
1504   - $("#slider-range-min-2").slider("value", 60);
1505   - }
1506   - else if (brushIncrementVar == "") {
1507   - var brushIncrementedValue = 1;
1508   - $("#btnBrushSize").val(brushIncrementedValue);
1509   - $("#slider-range-min-2").slider("value", parseInt(brushIncrementedValue));
1510   - }
1511   - else {
1512   - var brushIncrementedValue = parseInt(brushIncrementVar) + 1;
1513   - $("#btnBrushSize").val(brushIncrementedValue);
1514   - $("#slider-range-min-2").slider("value", parseInt(brushIncrementedValue));
1515   - }
1516   - });
1517   - $("#btnBrushSizeDecrease").click(function () {
1518   - onBrushSizeChange();
1519   - var brushDecreaseVar = $("#btnBrushSize").val();
1520   - if (brushDecreaseVar == "") {
1521   - var brushDecrementedValue = 1;
1522   - $("#btnBrushSize").val(brushDecrementedValue);
1523   - $("#slider-range-min-2").slider("value", parseInt(brushDecrementedValue));
1524   - }
1525   - else if (brushDecreaseVar <= 1) {
1526   - $("#slider-range-min-2").slider("value", 1);
1527   - }
1528   - else {
1529   - var brushDecrementedValue = parseInt(brushDecreaseVar) - 1;
1530   - $("#btnBrushSize").val(brushDecrementedValue);
1531   - $("#slider-range-min-2").slider("value", parseInt(brushDecrementedValue));
1532   - }
1533   - });
1534   -
1535   - $("#btnBrushSize").val($("#slider-range-min-2").slider("value"));
1536   -
1537   -
1538   -
1539   -
1540   -
1541   - //$("#slider-range-min-2").on("slidestart", function (event, ui) {
1542   -
1543   - // $('.btnCursor').trigger('click');
1544   - // $(".btn-annotation").removeClass("activebtncolor");
1545   - // $('.btnCursor').addClass('activebtncolor');
1546   - // // ctx.clearRect(0, 0, canvasPaint.width, canvasPaint.height);
1547   -
1548   -
1549   - //});
1550   - // $("#slider-range-min-2").on("slidechange", function (event, ui) { alert("ssasa"); });
1551   -
1552   -
  1454 +
1553 1455 $(function () {
1554 1456 $('[data-toggle="tooltip"]').tooltip();
1555 1457 })
1556   - });
  1458 +
1557 1459 </script>
1558 1460 <script>
1559 1461 (function ($) {
... ...