transparency scale is added on transparency box draw. close functionality is working.

currently transparency change is not working.

transparency scale is added on transparency box draw. close functionality is working.
currently transparency change is not working.
Nikita Kulshreshtha
1 parent 7b9ed45e
Showing 5 changed files with 474 additions and 35 deletions
400-SOURCECODE/AIAHTML5.Web/app/controllers/DAController.js
400-SOURCECODE/AIAHTML5.Web/app/views/da/da-view.html
400-SOURCECODE/AIAHTML5.Web/index.html
400-SOURCECODE/AIAHTML5.Web/libs/jquery/jquery_plugin/slider-pips/jquery-ui-slider-pips.css
400-SOURCECODE/AIAHTML5.Web/libs/jquery/jquery_plugin/jquery-ui-slider-pips.js → 400-SOURCECODE/AIAHTML5.Web/libs/jquery/jquery_plugin/slider-pips/jquery-ui-slider-pips.js
@@ -20,7 +20,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
     $scope.layerNumber;
     $scope.daCounter = 1;
     $scope.bagartDetails;
-
+    $scope.transNumber = 50;
  
     $scope.isBodylayerdataLoaded = false;
     $scope.isBodyRegionDataLoaded = false;
@@ -1518,6 +1518,9 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
  
             }
         })
+
+        $('#transparencyScale').modal('show');
+
         document.getElementById('canvasDiv').removeEventListener("mouseup", mouseUpListener);
     }
  
@@ -1633,9 +1636,9 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
         //data on tras canvas irrespective of the trans number, so we can chnage the transparnecy of original data not the manipulated)
         if (isTransparencyChanged == true) {
  
-            var txtTransparencyChange = document.getElementById("txtTransparencyChange");
+           // var txtTransparencyChange = document.getElementById("txtTransparencyChange");
  
-            var transNumber = txtTransparencyChange.value;
+            var transNumber = $scope.transNumber;
  
             var ctx = document.getElementById('transparencyCanvas').getContext('2d');
  
@@ -1768,22 +1771,22 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
                 }
  
  
+                // niki 3june
+                //var txtTransparencyChange = document.getElementById("txtTransparencyChange");
+                ////for first time, the transparency should be 50%
+                //if ($scope.isTboxDrwan) {
  
-                var txtTransparencyChange = document.getElementById("txtTransparencyChange");
-                //for first time, the transparency should be 50%
-                if ($scope.isTboxDrwan) {
+                //    if (txtTransparencyChange != null)
+                //        txtTransparencyChange.value = 50;
  
-                    if (txtTransparencyChange != null)
-                        txtTransparencyChange.value = 50;
+                //    $scope.isTboxDrwan = false;
  
-                    $scope.isTboxDrwan = false;
-
-                }
+                //}
  
                 //check if transparency  is activated
  
  
-                var transNumber = 50;//txtTransparencyChange.value;
+                var transNumber = $scope.transNumber;//txtTransparencyChange.value;
                 // debugger;
                 //this changes the transparency when transparency is already activated(on scale the value is >0) and user resizes or chage the layer
  
@@ -2264,6 +2267,94 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
     }
  
  
+    $scope.onTransparencyChange = function(ev, ui){
+       debugger;
+        alert('t change')
+       $scope.transNumber = ui.value;
+
+        var tCanvas = document.getElementById('transparencyCanvas');
+        var tCanvasContext = tCanvas.getContext('2d');
+
+        var tCanvasHeight = parseInt((tCanvas.style.height).replace('px', ''));
+
+        var tCanvasWidth = parseInt((tCanvas.style.width).replace('px', ''));
+
+        var tBoxStartX = parseInt((tCanvas.style.left).replace('px', ''));
+        var tBoxEndX = parseInt((tCanvas.style.left).replace('px', '')) + parseInt((tCanvas.style.width.replace('px', '')));
+        var tBoxStartY = parseInt((tCanvas.style.top).replace('px', ''));
+        var tBoxEndY = parseInt((tCanvas.style.top).replace('px', '')) + parseInt((tCanvas.style.height).replace('px', ''));
+        var transparencyBoxBottom = parseInt(tBoxStartY) + parseInt(tCanvasHeight);
+        var transparencyBoxRight = parseInt(tBoxStartX) + parseInt(tCanvasWidth);
+
+        //var scope = angular.element(document.getElementById("DAView")).scope();
+        //scope.$apply(function () {
+            var arr = [];
+            $scope.transparencyChangeCounter++;
+            //before changing the transparency of first canvas, hold the orignal canvas data on temp canvas
+        
+            //put original data on transcanvas so that it can be used to change transparency properly
+            var tempCanavs = document.getElementById('tempCanvas');
+            var tempCanvasContext = tempCanavs.getContext('2d');
+
+            var originalTransparencyData = tempCanvasContext.getImageData(0, 0, $scope.transparencyCanvasWidth, $scope.transparencyCanvasHeight);
+            var ctx = document.getElementById('transparencyCanvas').getContext('2d');
+            ctx.putImageData(originalTransparencyData, 0, 0);
+
+
+            var BodyRegionDictionary = $scope.BodyRegionCordinatesData;
+
+            $scope.IncludedBodyRegions = [];
+            var counter = 0;
+            $.each(BodyRegionDictionary, function (index, value) {
+
+                var bodyRegionRight = parseInt(value.X) + parseInt(value.Width);
+                var bodyRegionBottom = parseInt(value.Y) + parseInt(value.Height);
+
+
+           
+                if (tBoxStartX <= bodyRegionRight && value.X <= transparencyBoxRight && tBoxStartY <= bodyRegionBottom && value.Y <= transparencyBoxBottom) {
+
+                    $scope.loadTransparencyImage(value.bodyRegionId, value.Height, value.Width, value.X, value.Y, value.IsMirror, $scope.TransparencyBoxStartX, $scope.TransparencyEndX, $scope.TransparencyBoxStartY, $scope.TransparencyBoxEndY, $scope, false, true);
+
+                }
+
+            });
+
+
+
+      //  });
+    }
+
+    $scope.CloseTransparencyBox = function () {
+        var tBox = document.getElementById('transparencyCanvas');
+
+        // alert('mouseDown is called');
+        if (tBox != null) {
+            tBox.parentNode.removeChild(tBox)
+            var elements = document.getElementsByClassName('ui-icon ui-icon-gripsmall-diagonal-se');
+            while (elements.length > 0) {
+                elements[0].parentNode.removeChild(elements[0]);
+            }
+            var txtTransparencyChange = document.getElementById("txtTransparencyChange");
+            txtTransparencyChange.value = 0;
+            document.getElementById('txtLayerNumber').value = 0;
+            $('#sliderHandle').tabindex = 0;
+            if (document.getElementById('tempCanvas') != null) {
+                $('#tempCanvas').remove();
+            }
+            if ($('#speechBubbleTrns').length > 0) {
+                $('#speechBubbleTrns').remove();
+            }
+            //var scope = angular.element(document.getElementById("DAView")).scope();
+            //scope.$apply(function () {
+                $scope.layerNumber = 0;
+                $scope.isTransparencyActivated = false;
+            //})
+        }
+        document.getElementById('btnTranparency').removeEventListener("click", onTransparencyButtonClick);
+        document.getElementById('btnTranparency').className = 't-transparency'
+    }
+
     $scope.createSpeechBubbleOnTransparencyBox = function (event, text1, text2, x, y) {
  
         $('#canvasDiv').css('cursor', 'pointer');
-<div class=" " id="daView" ng-controller="DAController">
+<!--<style>
+    .slider label {
+        position: absolute;
+        width: 20px;
+        margin-left: -10px;
+        text-align: center;
+        margin-top: 20px;
+    }
+
+    /* below is not necessary, just for style */
+    .slider {
+        width: 50%;
+        margin: 2em auto;
+    }
+</style>-->
+<div class=" " id="daView" ng-controller="DAController">
     <div class="pos-relative leftToolBar tools pull-left">
         <div class="toggle-icon toggleBar toggleHeadingButton" title="Show/Hide Sidebar" style="top:20px;"></div>
         <div class="" style="top:20px">
@@ -117,7 +132,7 @@
         <div class="modal-dialog modal-sm">
             <div class="modal-content">
                 <div class="modal-header annotation-modal-header">
-                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"  ng-click="CloseTransparencyBox()"><span aria-hidden="true">&times;</span></button>
                     <h4 class="modal-title">Transparency</h4>
                 </div>
                 <div class="modal-body">
@@ -184,21 +199,7 @@ $(window).load(function () {
     });
  
  
-	$(".slider")
-                    
-    .slider({ 
-        min: 0, 
-        max: 100,
-        value: 40,
-        range: "min",
-        orientation: "horizontal"
-    })
-                    
-    .slider("pips", {
-        rest: "label",
-        step: "25"
-    });
-    </script> 
+	  </script> 
  
  
 <!--<script>
@@ -226,7 +227,7 @@ $(window).load(function () {
  
     });
 </script>
-<script src="libs/jquery/jquery_plugin/jquery-ui-slider-pips.js"></script>
+<!--<script src="libs/jquery/jquery_plugin/jquery-ui-slider-pips.js"></script>-->
  
 <script>
     $(".slider")
@@ -234,15 +235,24 @@ $(window).load(function () {
     .slider({
         min: 0,
         max: 100,
-        value: 40,
+        value: 50,
         range: "min",
-        orientation: "horizontal"
+        orientation: "horizontal",
+        stop: function (event, ui) {
+            //alert('trans changed')
+            var scope = angular.element(document.getElementById("daView")).scope();
+            scope.$apply(function () {
+                scope.onTransparencyChange(event,ui);
+            });
+         }
     })
  
     .slider("pips", {
         rest: "label",
-        step: "25"
+        step: "10"
     });
+
+    
 </script>
 <script>
     $(document).ready(function () {
@@ -30,7 +30,7 @@
  
     <link href="libs/jquery/jquery_plugin/jsPanel/jspanel/jquery.jspanel.css" rel="stylesheet" />
     <link href="libs/jquery/jquery_plugin/SpeechBubble/css/bubble.css" rel="stylesheet" />
-
+    <link href="libs/jquery/jquery_plugin/slider-pips/jquery-ui-slider-pips.css" rel="stylesheet" />
  
 </head>
 <body ng-controller="HomeController" id="bo">
@@ -143,7 +143,7 @@
     <script src="libs/jinqJs.js"></script>
     <script src="libs/jquery/jquery_plugin/jsPanel/jspanel/jquery.jspanel.js"></script>
     <script src="libs/jquery/jquery_plugin/SpeechBubble/bubble.js"></script>
-    <script src="libs/jquery/jquery_plugin/jquery-ui-slider-pips.js"></script>
+    <script src="libs/jquery/jquery_plugin/slider-pips/jquery-ui-slider-pips.js"></script>
     <!--<script src="libs/jquery/jquery_plugin/jsPanel/jspanel/jquery.jspanel.min.js"></script>-->
     <script src="app/main/AIA.js"></script>
     <script src="app/main/Link.js"></script>
+/*! jQuery-ui-Slider-Pips - v1.11.1 - 2015-11-30
+* Copyright (c) 2015 Simon Goellner <simey.me@gmail.com>; Licensed MIT */
+
+/* HORIZONTAL */
+/* increase bottom margin to fit the pips */
+
+.pips-slider{ background:#fff;
+border:1px solid #E7E7E7;
+
+width:80px;
+margin:0 auto;
+margin-top:110px;}
+
+.pips-slider h3{ width:100%; float:left; background:#CCCCCC; font-size:14px; margin:0; padding:0; margin-bottom:20px; padding:5px 0 5px 10px}
+.pips-slider h3 i{ font-size:14px;}
+.pips-slider #vertical-slider{ margin:40px 0 30px 20px;}
+
+.ui-slider-horizontal.ui-slider-pips {
+  margin-bottom: 1.4em;
+}
+
+/* default hide the labels and pips that arnt visible */
+/* we just use css to hide incase we want to show certain */
+/* labels/pips individually later */
+.ui-slider-pips .ui-slider-label,
+.ui-slider-pips .ui-slider-pip-hide {
+  display: none;
+}
+
+/* now we show any labels that we've set to show in the options */
+.ui-slider-pips .ui-slider-pip-label .ui-slider-label {
+  display: block;
+}
+
+/* PIP/LABEL WRAPPER */
+/* position each pip absolutely just below the default slider */
+/* and also prevent accidental selection */
+.ui-slider-pips .ui-slider-pip {
+  width: 2em;
+  height: 1em;
+  line-height: 1em;
+  position: absolute;
+  font-size: 0.8em;
+  color: #999;
+  overflow: visible;
+  text-align: center;
+  top: 20px;
+  left: 20px;
+  margin-left: -1em;
+  cursor: pointer;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.ui-state-disabled.ui-slider-pips .ui-slider-pip {
+  cursor: default;
+}
+
+/* little pip/line position & size */
+.ui-slider-pips .ui-slider-line {
+  background: #999;
+  width: 1px;
+  height: 3px;
+  position: absolute;
+  left: 50%;
+}
+
+/* the text label postion & size */
+/* it overflows so no need for width to be accurate */
+.ui-slider-pips .ui-slider-label {
+  position: absolute;
+  top: 5px;
+  left: 50%;
+  margin-left: -1em;
+  width: 2em;
+}
+
+/* make it easy to see when we hover a label */
+.ui-slider-pips:not(.ui-slider-disabled) .ui-slider-pip:hover .ui-slider-label {
+  color: black;
+  font-weight: bold;
+}
+
+/* VERTICAL */
+/* vertical slider needs right-margin, not bottom */
+.ui-slider-vertical.ui-slider-pips {
+ /* margin-bottom: 1em;
+  margin-right: 2em;*/
+}
+
+/* align vertical pips left and to right of the slider */
+.ui-slider-vertical.ui-slider-pips .ui-slider-pip {
+  text-align: left;
+  top: auto;
+  left: 20px;
+  margin-left: 0;
+  margin-bottom: -0.5em;
+}
+
+/* vertical line/pip should be horizontal instead */
+.ui-slider-vertical.ui-slider-pips .ui-slider-line {
+  width: 3px;
+  height: 1px;
+  position: absolute;
+  top: 50%;
+  left: 0;
+}
+
+.ui-slider-vertical.ui-slider-pips .ui-slider-label {
+  top: 50%;
+  left: 0.5em;
+  margin-left: 0;
+  margin-top: -0.5em;
+  width: 2em;
+}
+
+/* FLOATING HORIZTONAL TOOLTIPS */
+/* remove the godawful looking focus outline on handle and float */
+.ui-slider-float .ui-slider-handle:focus,
+.ui-slider-float .ui-slider-handle.ui-state-focus .ui-slider-tip-label,
+.ui-slider-float .ui-slider-handle:focus .ui-slider-tip,
+.ui-slider-float .ui-slider-handle.ui-state-focus .ui-slider-tip-label,
+.ui-slider-float .ui-slider-handle:focus .ui-slider-tip-label
+.ui-slider-float .ui-slider-handle.ui-state-focus .ui-slider-tip-label {
+  outline: none;
+}
+
+/* style tooltips on handles and on labels */
+/* also has a nice transition */
+.ui-slider-float .ui-slider-tip,
+.ui-slider-float .ui-slider-tip-label {
+  position: absolute;
+  visibility: hidden;
+  top: -40px;
+  display: block;
+  width: 34px;
+  margin-left: -18px;
+  left: 50%;
+  height: 20px;
+  line-height: 20px;
+  background: white;
+  border-radius: 3px;
+  border: 1px solid #888;
+  text-align: center;
+  font-size: 12px;
+  opacity: 0;
+  color: #333;
+  -webkit-transition-property: opacity, top, visibility;
+  transition-property: opacity, top, visibility;
+  -webkit-transition-timing-function: ease-in;
+  transition-timing-function: ease-in;
+  -webkit-transition-duration: 200ms, 200ms, 0ms;
+  transition-duration: 200ms, 200ms, 0ms;
+  -webkit-transition-delay: 0ms, 0ms, 200ms;
+  transition-delay: 0ms, 0ms, 200ms;
+}
+
+/* show the tooltip on hover or focus */
+/* also switch transition delay around */
+.ui-slider-float .ui-slider-handle:hover .ui-slider-tip,
+.ui-slider-float .ui-slider-handle.ui-state-hover .ui-slider-tip,
+.ui-slider-float .ui-slider-handle:focus .ui-slider-tip,
+.ui-slider-float .ui-slider-handle.ui-state-focus .ui-slider-tip,
+.ui-slider-float .ui-slider-handle.ui-state-active .ui-slider-tip,
+.ui-slider-float .ui-slider-pip:hover .ui-slider-tip-label {
+  opacity: 1;
+  top: -30px;
+  visibility: visible;
+  -webkit-transition-timing-function: ease-out;
+  transition-timing-function: ease-out;
+  -webkit-transition-delay: 200ms, 200ms, 0ms;
+  transition-delay: 200ms, 200ms, 0ms;
+}
+
+/* put label tooltips below slider */
+.ui-slider-float .ui-slider-pip .ui-slider-tip-label {
+  top: 42px;
+}
+
+.ui-slider-float .ui-slider-pip:hover .ui-slider-tip-label {
+  top: 32px;
+  font-weight: normal;
+}
+
+/* give the tooltip a css triangle arrow */
+.ui-slider-float .ui-slider-tip:after,
+.ui-slider-float .ui-slider-pip .ui-slider-tip-label:after {
+  content: " ";
+  width: 0;
+  height: 0;
+  border: 5px solid rgba(255, 255, 255, 0);
+  border-top-color: white;
+  position: absolute;
+  bottom: -10px;
+  left: 50%;
+  margin-left: -5px;
+}
+
+/* put a 1px border on the tooltip arrow to match tooltip border */
+.ui-slider-float .ui-slider-tip:before,
+.ui-slider-float .ui-slider-pip .ui-slider-tip-label:before {
+  content: " ";
+  width: 0;
+  height: 0;
+  border: 5px solid rgba(255, 255, 255, 0);
+  border-top-color: #888;
+  position: absolute;
+  bottom: -11px;
+  left: 50%;
+  margin-left: -5px;
+}
+
+/* switch the arrow to top on labels */
+.ui-slider-float .ui-slider-pip .ui-slider-tip-label:after {
+  border: 5px solid rgba(255, 255, 255, 0);
+  border-bottom-color: white;
+  top: -10px;
+}
+
+.ui-slider-float .ui-slider-pip .ui-slider-tip-label:before {
+  border: 5px solid rgba(255, 255, 255, 0);
+  border-bottom-color: #888;
+  top: -11px;
+}
+
+/* FLOATING VERTICAL TOOLTIPS */
+/* tooltip floats to left of handle */
+.ui-slider-vertical.ui-slider-float .ui-slider-tip,
+.ui-slider-vertical.ui-slider-float .ui-slider-tip-label {
+  top: 50%;
+  margin-top: -11px;
+  width: 34px;
+  margin-left: 0px;
+  left: -60px;
+  color: #333;
+  -webkit-transition-duration: 200ms, 200ms, 0;
+  transition-duration: 200ms, 200ms, 0;
+  -webkit-transition-property: opacity, left, visibility;
+  transition-property: opacity, left, visibility;
+  -webkit-transition-delay: 0, 0, 200ms;
+  transition-delay: 0, 0, 200ms;
+}
+
+.ui-slider-vertical.ui-slider-float .ui-slider-handle:hover .ui-slider-tip,
+.ui-slider-vertical.ui-slider-float .ui-slider-handle.ui-state-hover .ui-slider-tip,
+.ui-slider-vertical.ui-slider-float .ui-slider-handle:focus .ui-slider-tip,
+.ui-slider-vertical.ui-slider-float .ui-slider-handle.ui-state-focus .ui-slider-tip,
+.ui-slider-vertical.ui-slider-float .ui-slider-handle.ui-state-active .ui-slider-tip,
+.ui-slider-vertical.ui-slider-float .ui-slider-pip:hover .ui-slider-tip-label {
+  top: 50%;
+  margin-top: -11px;
+  left: -50px;
+}
+
+/* put label tooltips to right of slider */
+.ui-slider-vertical.ui-slider-float .ui-slider-pip .ui-slider-tip-label {
+  left: 47px;
+}
+
+.ui-slider-vertical.ui-slider-float .ui-slider-pip:hover .ui-slider-tip-label {
+  left: 37px;
+}
+
+/* give the tooltip a css triangle arrow */
+.ui-slider-vertical.ui-slider-float .ui-slider-tip:after,
+.ui-slider-vertical.ui-slider-float .ui-slider-pip .ui-slider-tip-label:after {
+  border: 5px solid rgba(255, 255, 255, 0);
+  border-left-color: white;
+  border-top-color: transparent;
+  position: absolute;
+  bottom: 50%;
+  margin-bottom: -5px;
+  right: -10px;
+  margin-left: 0;
+  top: auto;
+  left: auto;
+}
+
+.ui-slider-vertical.ui-slider-float .ui-slider-tip:before,
+.ui-slider-vertical.ui-slider-float .ui-slider-pip .ui-slider-tip-label:before {
+  border: 5px solid rgba(255, 255, 255, 0);
+  border-left-color: #888;
+  border-top-color: transparent;
+  position: absolute;
+  bottom: 50%;
+  margin-bottom: -5px;
+  right: -11px;
+  margin-left: 0;
+  top: auto;
+  left: auto;
+}
+
+.ui-slider-vertical.ui-slider-float .ui-slider-pip .ui-slider-tip-label:after {
+  border: 5px solid rgba(255, 255, 255, 0);
+  border-right-color: white;
+  right: auto;
+  left: -10px;
+}
+
+.ui-slider-vertical.ui-slider-float .ui-slider-pip .ui-slider-tip-label:before {
+  border: 5px solid rgba(255, 255, 255, 0);
+  border-right-color: #888;
+  right: auto;
+  left: -11px;
+}
+
+/* SELECTED STATES */
+/* Comment out this chuck of code if you don't want to have
+        the new label colours shown */
+.ui-slider-pips [class*=ui-slider-pip-initial] {
+  font-weight: bold;
+  color: #0095da;
+}
+
+.ui-slider-pips .ui-slider-pip-initial-2 {
+  color: #1897C9;
+}
+
+.ui-slider-pips [class*=ui-slider-pip-selected] {
+  font-weight: bold;
+  color: #000;
+}
+
+.ui-slider-pips .ui-slider-pip-inrange {
+  color: black;
+}
+
+.ui-slider-pips .ui-slider-pip-selected-2 {
+  color: #E70081;
+}
+
+.ui-slider-pips [class*=ui-slider-pip-selected] .ui-slider-line,
+.ui-slider-pips .ui-slider-pip-inrange .ui-slider-line {
+  background: black;
+}