ADAM / AIAHTML5

Commit 44cadc823b88f3085c4ef27664e008ee2443a535

Authored by unknown
1 parent 90e94162

Commit Changes For Erase Functionality and Canvas Opacity

Inline Side-by-side
Showing 13 changed files with 348 additions and 42 deletions
400-SOURCECODE/AIAHTML5.Web/app/controllers/DAController.js
  View file @44cadc8
... ... @@ -5494,8 +5494,9 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
5494 5494 $scope.$on('annotationToolEvent', function (event, data) {
5495 5495 $("#canvas").css("display", "block");
5496 5496 $("#canvasPaint").css("display", "block");
5497   - // $rootScope.FreeStylePaint();
  5497 +
5498 5498 $scope.doClick();
  5499 + $rootScope.FreeStylePaint();
5499 5500 });
5500 5501 $scope.mousePs;
5501 5502 function OnPaintCanvasClick(event) {
... ... @@ -5572,7 +5573,10 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
5572 5573  
5573 5574 var canvasElement = document.getElementById("canvas");
5574 5575 var ctx = canvasElement.getContext("2d");
5575   - if ($rootScope.shapeType == "FreeStylePaint") {
  5576 +
  5577 +
  5578 +
  5579 + /* if ($rootScope.shapeType == "FreeStylePaint") {
5576 5580 var canvasPaint_zIndex = $('#canvasPaint').css("z-index");
5577 5581 var canvas_zIndex = $('#canvas').css("z-index");
5578 5582 if (canvas_zIndex > canvasPaint_zIndex) {
... ... @@ -5585,12 +5589,13 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
5585 5589 $('#canvasPaint').css("z-index", canvasPaint_zIndex);
5586 5590 $('#canvasPaint').sketch({ defaultColor: "#000", defaultSize: 1 });
5587 5591 }
5588   - else {
  5592 + else {*/
5589 5593 switch ($rootScope.shapeType) {
5590 5594  
5591 5595 case "cursor":
5592   - ctx.clearRect(0, 0, 2277, 3248);
  5596 + // ctx.clearRect(0, 0, 2277, 3248);
5593 5597 ctx.beginPath();
  5598 +
5594 5599  
5595 5600 break;
5596 5601  
... ... @@ -5668,6 +5673,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
5668 5673 type: 'rectangle',
5669 5674 draggable: true,
5670 5675 strokeStyle: 'black',
  5676 + opacity: $rootScope.shapestyleOpacity,
5671 5677 strokeWidth: 2,
5672 5678 x: $scope.offsetX1, y: $scope.offsetY1,
5673 5679 width: $scope.x - $scope.offsetX1,
... ... @@ -5738,6 +5744,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
5738 5744 layer: true,
5739 5745 name: 'Circle_' + $rootScope.resetCircle,
5740 5746 type: 'ellipse',
  5747 + opacity: $rootScope.shapestyleOpacity,
5741 5748 draggable: true,
5742 5749 strokeStyle: '#000',
5743 5750 strokeWidth: 2,
... ... @@ -5987,6 +5994,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
5987 5994 $('#canvas').drawText({
5988 5995 layer: true,
5989 5996 draggable: true,
  5997 + // opacity: $rootScope.shapestyleOpacity,
5990 5998 name: 'TextArea_' + $rootScope.resetText,
5991 5999 groups: ['TextArea_' + $rootScope.resetText],
5992 6000 dragGroups: ['TextArea_' + $rootScope.resetText],
... ... @@ -6006,6 +6014,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
6006 6014 layer: true,
6007 6015 name: "TextRect_" + $rootScope.resetTextRect,
6008 6016 dragGroups: ['shapes'],
  6017 + opacity: $rootScope.shapestyleOpacity,
6009 6018 strokeStyle: 'black',
6010 6019 strokeWidth: 2,
6011 6020 x: $scope.offsetX1, y: $scope.offsetY1,
... ... @@ -6070,7 +6079,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
6070 6079 break;
6071 6080  
6072 6081 }
6073   - }
  6082 + //}
6074 6083  
6075 6084 }
6076 6085  
... ... @@ -6131,6 +6140,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
6131 6140 draggable: true,
6132 6141 groups: ['TextArea_' + $rootScope.resetText],
6133 6142 dragGroups: ['TextArea_' + $rootScope.resetText],
  6143 + opacity: $rootScope.shapestyleOpacity,
6134 6144 strokeStyle: 'black',
6135 6145 strokeWidth: 2,
6136 6146 x: $scope.offsetX1, y: $scope.offsetY1,
... ... @@ -6212,11 +6222,34 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
6212 6222 $rootScope.FreeStylePaint = function (e) {
6213 6223 // debugger;
6214 6224  
6215   - // alert("asasssas");
6216   - $rootScope.shapeType = "FreeStylePaint";
6217   - canvas.addEventListener('mouseup', $scope.OnPaintCanvasMouseUp, false);
  6225 +
  6226 + // $rootScope.shapeType = "FreeStylePaint";
  6227 + canvasPaint.addEventListener('mouseup', $scope.OnPaintBrushCanvasMouseUp, false);
  6228 + canvasPaint.addEventListener('mousedown', $scope.OnPaintBrushCanvasMouseDown, false);
  6229 +
6218 6230  
6219 6231 }
  6232 + $scope.OnPaintBrushCanvasMouseDown = function (event) {
  6233 +
  6234 + }
  6235 + $scope.OnPaintBrushCanvasMouseUp = function (event) {
  6236 +
  6237 +
  6238 + // var canvasElement1 = document.getElementById("canvasPaint");
  6239 + // var ctx1 = canvasElement1.getContext("2d");
  6240 +
  6241 + switch($rootScope.shapeType)
  6242 + {
  6243 + case "FreeStylePaint":
  6244 +
  6245 + $('#canvasPaint').sketch({ defaultSize: 1 });
  6246 +
  6247 + break;
  6248 +
  6249 +
  6250 + }
  6251 +
  6252 + }
6220 6253  
6221 6254 $(document).keydown(function (event) {
6222 6255  
... ...
400-SOURCECODE/AIAHTML5.Web/app/controllers/HomeController.js
  View file @44cadc8
... ... @@ -72,7 +72,7 @@ AIA.controller("HomeController", ["$rootScope", "Modules", "$log", "$location",
72 72 if (alreadyOpenThisView != null) {
73 73 for (var i = 0; i < $rootScope.openViews.length; i++) {
74 74 k++;
75   - if ($rootScope.openViews[i].body-views == title) {
  75 + if ($rootScope.openViews[i].body - views == title) {
76 76 $rootScope.openViews.splice((k - 1), 1);
77 77  
78 78 $rootScope.openViews.push(
... ... @@ -94,7 +94,7 @@ AIA.controller(&quot;HomeController&quot;, [&quot;$rootScope&quot;, &quot;Modules&quot;, &quot;$log&quot;, &quot;$location&quot;,
94 94 //$rootScope.isDrawingToolSelected = true;
95 95 //$rootScope.isLineDrawSelecyed = true;
96 96 $rootScope.shapeType = "Line";
97   - // alert($rootScope.shapeType);
  97 + // alert($rootScope.shapeType);
98 98  
99 99  
100 100 }
... ... @@ -133,9 +133,9 @@ AIA.controller(&quot;HomeController&quot;, [&quot;$rootScope&quot;, &quot;Modules&quot;, &quot;$log&quot;, &quot;$location&quot;,
133 133 $rootScope.isIdetifyClicked = true;
134 134 $rootScope.isDrawingToolSelected = false;
135 135 }
136   -
  136 +
137 137 //----Annotation Toolbar: Jcanvas-----
138   -
  138 +
139 139 $rootScope.DrawLine = function (e) {
140 140 $rootScope.switchCanvas();
141 141 $rootScope.shapeType = "Line";
... ... @@ -175,9 +175,24 @@ AIA.controller(&quot;HomeController&quot;, [&quot;$rootScope&quot;, &quot;Modules&quot;, &quot;$log&quot;, &quot;$location&quot;,
175 175 $(".btn-annotation-rectangle").addClass("activebtncolor");
176 176 }
177 177 $rootScope.paintBrush = function () {
178   - $rootScope.switchCanvas();
179   - $rootScope.shapeType = "brush";
180   -
  178 + $rootScope.switchCanvasToPaintCanvas();
  179 +
  180 + $rootScope.shapeType = "FreeStylePaint";
  181 + //alert($rootScope.shapeType);
  182 +
  183 + }
  184 +
  185 + $rootScope.switchCanvasToPaintCanvas = function (e) {
  186 + var canvasPaint_zIndex = $('#canvasPaint').css("z-index");
  187 + var canvas_zIndex = $('#canvas').css("z-index");
  188 + if (canvas_zIndex > canvasPaint_zIndex) {
  189 + canvasPaint_zIndex = parseInt(canvas_zIndex) + 1;
  190 +
  191 + }
  192 + else {
  193 + canvasPaint_zIndex = parseInt(canvasPaint_zIndex) + 1;
  194 + }
  195 + $('#canvasPaint').css("z-index", canvasPaint_zIndex);
181 196 }
182 197  
183 198 $rootScope.DrawCircle = function (e) {
... ... @@ -197,28 +212,23 @@ AIA.controller(&quot;HomeController&quot;, [&quot;$rootScope&quot;, &quot;Modules&quot;, &quot;$log&quot;, &quot;$location&quot;,
197 212 }
198 213 $rootScope.DrawText = function () {
199 214 $rootScope.switchCanvas();
200   -
201   - $rootScope.shapeType = "TextArea";
202   - $('.btnCursor').removeClass('activebtncolor');
203   - $(".btn-annotation").removeClass("activebtncolor");
204   - $(".btn-annotation-Text").addClass("activebtncolor");
205   - // $('.btnCursor').removeClass('activebtncolor');
206   - // $(".btn-annotation").removeClass("activebtncolor");
207   - // $(".btn-annotation-Text").addClass("activebtncolor");
208   - //$('.btnCursor').removeClass('activebtncolor');
209   - //$(".btn-annotation").removeClass("activebtncolor");
210   - //$("#" + e.currentTarget.id).addClass("activebtncolor");
  215 +
  216 + $rootScope.shapeType = "TextArea";
  217 + $('.btnCursor').removeClass('activebtncolor');
  218 + $(".btn-annotation").removeClass("activebtncolor");
  219 + $(".btn-annotation-Text").addClass("activebtncolor");
  220 +
211 221 }
212 222  
213 223 $rootScope.DrawPolygon = function () {
214 224 $rootScope.shapeType = "DrawPolygon";
215   -
  225 +
216 226 }
217 227  
218 228  
219 229 $rootScope.OpacityModal = function () {
220   -
221   -
  230 +
  231 +
222 232 }
223 233 $rootScope.switchCanvas = function () {
224 234 var x = $('#canvasPaint').css("z-index");
... ... @@ -232,13 +242,30 @@ AIA.controller(&quot;HomeController&quot;, [&quot;$rootScope&quot;, &quot;Modules&quot;, &quot;$log&quot;, &quot;$location&quot;,
232 242 $('#canvas').css("z-index", y);
233 243 }
234 244 $rootScope.EraseDrawing = function () {
235   - document.getElementById('paintCanvas').getContext('2d').setTransform(1, 0, 0, 1, 0, 0);
236   - document.getElementById('paintCanvas').getContext('2d').clearRect(0, 0, document.getElementById('paintCanvas').getContext('2d').canvas.width, document.getElementById('paintCanvas').getContext('2d').canvas.height);
  245 + $rootScope.switchCanvasToPaintCanvas();
  246 + // $('#canvasPaint').sketch({ defaultColor: "yellow", defaultSize: 1 });
  247 + var sktch = $('#canvasPaint').sketch();
  248 + $('#canvasPaint').sketch().actions = []; // this line empties the actions.
  249 + var myCanvas = document.getElementById("canvasPaint");
  250 + var ctx = myCanvas.getContext('2d');
  251 + ctx.clearRect(0, 0, myCanvas.width, myCanvas.height);
  252 + $rootScope.switchCanvas();
  253 +
  254 + }
237 255  
  256 + //opacity code
  257 + $rootScope.shapestyleOpacity = 1;
  258 + $rootScope.shapestyle = function (id) {
  259 +
  260 + $rootScope.shapestyleOpacity = $("#" + id).css('opacity');
  261 + $('#editshapestyle').modal('hide');
238 262 }
  263 +
  264 +
  265 +
239 266 //----End-------------
240 267  
241   - $rootScope.AddClick=function (x, y, dragging) {
  268 + $rootScope.AddClick = function (x, y, dragging) {
242 269 $rootScope.clickX.push(x);
243 270 $rootScope.clickY.push(y);
244 271 $rootScope.clickDrag.push(dragging);
... ... @@ -253,7 +280,7 @@ AIA.controller(&quot;HomeController&quot;, [&quot;$rootScope&quot;, &quot;Modules&quot;, &quot;$log&quot;, &quot;$location&quot;,
253 280 context.lineJoin = "round";
254 281 context.lineWidth = 5;
255 282  
256   -
  283 +
257 284 for (var i = 0; i < $rootScope.clickX.length; i++) {
258 285 context.beginPath();
259 286 if ($rootScope.clickDrag[i] && i) {
... ... @@ -267,7 +294,7 @@ AIA.controller(&quot;HomeController&quot;, [&quot;$rootScope&quot;, &quot;Modules&quot;, &quot;$log&quot;, &quot;$location&quot;,
267 294 }
268 295 }
269 296  
270   - $rootScope.PaintCanvasMousedownListener = function (canvasContext,x,y) {
  297 + $rootScope.PaintCanvasMousedownListener = function (canvasContext, x, y) {
271 298 if ($rootScope.isLineDrawSelecyed == true) {
272 299  
273 300 canvasContext.lineWidth = 0.1;
... ... @@ -285,14 +312,14 @@ AIA.controller(&quot;HomeController&quot;, [&quot;$rootScope&quot;, &quot;Modules&quot;, &quot;$log&quot;, &quot;$location&quot;,
285 312 }
286 313  
287 314 }
288   -
  315 +
289 316 $rootScope.PaintCanvasMouseupListener = function (canvasContext) {
290 317 if ($scope.isLineDrawSelecyed == true) {
291 318  
292 319 }
293 320 }
294 321  
295   - $rootScope.PaintCanvasMousemoveListener = function (canvasContext,x,y) {
  322 + $rootScope.PaintCanvasMousemoveListener = function (canvasContext, x, y) {
296 323 if ($rootScope.isLineDrawSelecyed == true) {
297 324 console.log('hm moving')
298 325 canvasContext.lineTo(x, y);
... ... @@ -300,7 +327,7 @@ AIA.controller(&quot;HomeController&quot;, [&quot;$rootScope&quot;, &quot;Modules&quot;, &quot;$log&quot;, &quot;$location&quot;,
300 327 }
301 328 }
302 329  
303   - $rootScope.Draw = function (x, y, isDown,context) {
  330 + $rootScope.Draw = function (x, y, isDown, context) {
304 331 if (isDown) {
305 332 context.beginPath();
306 333 context.strokeStyle = '#000000';
... ... @@ -314,7 +341,7 @@ AIA.controller(&quot;HomeController&quot;, [&quot;$rootScope&quot;, &quot;Modules&quot;, &quot;$log&quot;, &quot;$location&quot;,
314 341 $rootScope.lastX = x; $rootScope.lastY = y;
315 342 }
316 343  
317   -
  344 +
318 345  
319 346  
320 347 //list manager function
... ... @@ -331,7 +358,7 @@ AIA.controller(&quot;HomeController&quot;, [&quot;$rootScope&quot;, &quot;Modules&quot;, &quot;$log&quot;, &quot;$location&quot;,
331 358 $("#listManager").css("visibility", "visible");
332 359 $('#listManager').draggable();
333 360  
334   -
  361 +
335 362 $rootScope.islistManagerEventAlredayDispachted = true;
336 363  
337 364 $rootScope.$broadcast('listManagerEvent', true);
... ... @@ -522,7 +549,7 @@ AIA.controller(&quot;HomeController&quot;, [&quot;$rootScope&quot;, &quot;Modules&quot;, &quot;$log&quot;, &quot;$location&quot;,
522 549 }
523 550 }
524 551 };
525   -
  552 +
526 553  
527 554 }]
528 555 );
529 556 \ No newline at end of file
... ...
400-SOURCECODE/AIAHTML5.Web/content/images/common/annotation-tool-bar/pattern-2burn.jpg 0 → 100644
View file @44cadc8

15.3 KB
400-SOURCECODE/AIAHTML5.Web/content/images/common/annotation-tool-bar/pattern-3burn.jpg 0 → 100644
View file @44cadc8

13.3 KB
400-SOURCECODE/AIAHTML5.Web/content/images/common/annotation-tool-bar/pattern-burn.jpg 0 → 100644
View file @44cadc8

7.95 KB
400-SOURCECODE/AIAHTML5.Web/content/images/common/annotation-tool-bar/pattern-cot.jpg 0 → 100644
View file @44cadc8

16 KB
400-SOURCECODE/AIAHTML5.Web/content/images/common/annotation-tool-bar/pattern-fat.jpg 0 → 100644
View file @44cadc8

20.2 KB
400-SOURCECODE/AIAHTML5.Web/content/images/common/annotation-tool-bar/pattern-gauze.jpg 0 → 100644
View file @44cadc8

12.8 KB
400-SOURCECODE/AIAHTML5.Web/content/images/common/annotation-tool-bar/pattern-picker.png 0 → 100644
View file @44cadc8

1.87 KB
400-SOURCECODE/AIAHTML5.Web/content/images/common/annotation-tool-bar/pattern-scrape.jpg 0 → 100644
View file @44cadc8

19.3 KB
400-SOURCECODE/AIAHTML5.Web/content/images/common/annotation-tool-bar/pattern-skingraft.jpg 0 → 100644
View file @44cadc8

15.3 KB
400-SOURCECODE/AIAHTML5.Web/content/images/common/annotation-tool-bar/pattern-tumor.jpg 0 → 100644
View file @44cadc8

13 KB
400-SOURCECODE/AIAHTML5.Web/index.html
  View file @44cadc8
... ... @@ -423,12 +423,12 @@
423 423 </div>
424 424 </div>
425 425 <div class="well-popup well">
426   - <img src="content/images/blank-shape.jpg" alt="..." class="img-rounded img-responsive"/>
  426 + <img src="content/images/blank-shape.jpg" alt="..." class="img-rounded img-responsive" data-toggle="modal" data-target="#editshapestyle">
427 427 </div>
428 428 <div class="well well-popup">
429 429 <div class="" role="group" aria-label="...">
430 430 <div>
431   - <button type="button" class="btn btn-primary btn-xs pull-left btn-annotation" data-toggle="tooltip" data-placement="top" title="Paint" style="margin-right:1%;" ng-click="FreeStylePaint()"><i class="fa fa-paint-brush"></i></button>
  431 + <button type="button" class="btn btn-primary btn-xs pull-left btn-annotation" data-toggle="tooltip" data-placement="top" title="Paint" style="margin-right:1%;" ng-click="paintBrush()"><i class="fa fa-paint-brush"></i></button>
432 432 <button type="button" class="btn btn-primary btn-xs pull-left btn-annotation" data-toggle="tooltip" data-placement="top" title="Erase" ng-click="EraseDrawing()"><i class="fa fa-eraser"></i></button>&nbsp;
433 433 <div class="marginL2 pull-left"><input type="number" id="amount-2" value="25" step="1" style="width:60px;"></div>&nbsp;
434 434 <div class="pull-left" style="width:45%; margin-left:2%;">
... ... @@ -660,6 +660,140 @@
660 660  
661 661  
662 662  
  663 + <!--Edit Shape Modal-->
  664 + <div class="modal fade" id="editshapestyle" tabindex="-1" role="dialog" aria-labelledby="myModalLabel33" style="z-index:1000000000;width:302px;margin-left:auto;margin-right:auto;overflow:hidden;height:503px;">
  665 + <div class="modal-dialog modal-sm" role="document">
  666 + <div class="modal-content">
  667 + <div class="modal-header annotation-modal-header">
  668 + <h4 class="modal-title" id="myModalLabel33">Edit Shape Style</h4>
  669 + </div>
  670 + <div class="modal-body">
  671 + <div class="marginTopBtm10">
  672 + <div class="well well-sm no-margin-btm">
  673 + <div class="row">
  674 + <div class="col-sm-12">
  675 + <div class="checkbox no-margin">
  676 + <label>
  677 + <input type="checkbox" checked> Fill Option
  678 + </label>
  679 + </div>
  680 + </div>
  681 + <div class="col-sm-6">
  682 + <div class="radio">
  683 + <label>
  684 + <input type="radio" name="filloption" id="filloption1" value="filloption1">
  685 + <span class="">Texture</span>
  686 + <img src="~/../content/images/common/annotation-tool-bar/pattern-picker.png" alt="" class="pattern-picker" data-toggle="modal" data-target="#pattern">
  687 + </label>
  688 + </div>
  689 + <div class="radio">
  690 + <label>
  691 + <input type="radio" name="filloption" id="filloption2" value="filloption2" checked style="margin-top:8px;">
  692 +
  693 +
  694 + <div class="form-group" style="display:inline-flex;vertical-align:top;cursor:pointer;margin-right:36px;">
  695 + <span style="font-weight: normal; float: left; padding-top: 5px; padding-right: 5px;">Color</span>
  696 + <input type="text" class="form-control demo2" data-control="saturation" style="display:none;" value="#0088cc">
  697 + </div>
  698 +
  699 +
  700 + <!--<span class="">Color</span> <img src="img/color-picker.png" alt="" class="color-picker">-->
  701 + <!--<span class="demo2" data-control="hue" style="font-weight:normal;">Color</span>-->
  702 + <!--<img src="img/color-picker.png" alt="" class="color-picker">-->
  703 + </label>
  704 + </div>
  705 + </div>
  706 + <div class="col-sm-6 no-padding marginTop10">
  707 + <div class="row">
  708 + <label class="pull-left" style="font-weight:normal;">Scale</label>
  709 + <div class="pull-left" style="width:62%; margin-left:3%; margin-top:2%;">
  710 + <div id="slider-range-min-3"></div>
  711 + <!--<p>Your slider has a value of <span id="slider-value"></span></p>-->
  712 + </div>
  713 + </div>
  714 +
  715 + <div class="row">
  716 + <label class="pull-left" style="font-weight:normal;">Opacity</label>
  717 + <div class="pull-left" style="width:53%; margin-left:3%; margin-top:2%;">
  718 + <div id="slider-range-min-4"></div>
  719 + </div>
  720 + </div>
  721 +
  722 + <div class="clearfix"></div>
  723 +
  724 +
  725 + </div>
  726 + </div>
  727 +
  728 + </div>
  729 + </div>
  730 + <div class="marginTopBtm10">
  731 + <div class="well well-sm no-margin-btm">
  732 + <div class="row">
  733 + <div class="col-sm-12">
  734 + <div class="checkbox no-margin">
  735 + <label>
  736 + <input type="checkbox" checked> Outline Option
  737 + </label>
  738 + </div>
  739 + </div>
  740 + <div class="col-sm-6">
  741 + <label class="marginTop5">
  742 + <span style="font-weight: normal; float: left; padding-top: 5px; padding-right: 5px;">Color</span>
  743 + <!--<span class="demo " data-control="hue" style="float:left;">&nbsp;</span>-->
  744 +
  745 +
  746 + <div class="form-group" style="display:inline-flex;vertical-align:top;cursor:pointer;margin-right:36px;">
  747 +
  748 + <input type="text" class="form-control demo1" data-control="saturation" style="display:none;" value="#0088cc">
  749 + </div>
  750 +
  751 +
  752 + <!--<img src="img/color-picker.png" alt="" class="color-picker">-->
  753 + </label>
  754 + </div>
  755 +
  756 + <div class="col-sm-6">
  757 + <div class="form-horizontal">
  758 + <div class="form-group">
  759 + <label for="inputPassword" class="col-sm-3 control-label" style=" font-weight:normal; padding-top:9px;">Size</label>
  760 + <div class="col-sm-9 marginTop5">
  761 + <select class="form-control input-sm">
  762 + <option value="1" selected>1</option>
  763 + <option value="2">2</option>
  764 + <option value="3">3</option>
  765 + <option value="4">4</option>
  766 + <option value="5">5</option>
  767 + </select>
  768 + </div>
  769 + </div>
  770 + </div>
  771 + </div>
  772 +
  773 + </div>
  774 + </div>
  775 + </div>
  776 +
  777 + <div class="marginTopBtm10">
  778 + <div class="well well-sm no-margin-btm">
  779 + <img id="imgOpacity" class="img-rounded img-responsive imgopacity" alt="..." src="content/images/blank-shape.jpg">
  780 + </div>
  781 + </div>
  782 + </div>
  783 + <div class="modal-footer">
  784 + <button type="button" class="btn btn-primary btn-sm" ng-click="shapestyle('imgOpacity')">
  785 + OK
  786 + </button>
  787 + <button type="button" class="btn btn-primary btn-sm" data-dismiss="modal">Cancel</button>
  788 + </div>
  789 + </div>
  790 + </div>
  791 + </div>
  792 +
  793 +
  794 +
  795 +
  796 +
663 797  
664 798 <script>
665 799 function mytoggle() {
... ... @@ -872,5 +1006,117 @@
872 1006  
873 1007 </script>
874 1008  
  1009 +
  1010 + <script>
  1011 + $(document).ready(function () {
  1012 +
  1013 + $('.demo1').each(function () {
  1014 +
  1015 + $(this).minicolors({
  1016 + control: $(this).attr('data-control') || 'hue',
  1017 + defaultValue: $(this).attr('data-defaultValue') || '',
  1018 + format: $(this).attr('data-format') || 'hex',
  1019 + keywords: $(this).attr('data-keywords') || '',
  1020 + inline: $(this).attr('data-inline') === 'true',
  1021 + letterCase: $(this).attr('data-letterCase') || 'lowercase',
  1022 + opacity: $(this).attr('data-opacity'),
  1023 + position: $(this).attr('data-position') || 'bottom left',
  1024 + swatches: $(this).attr('data-swatches') ? $(this).attr('data-swatches').split('|') : [],
  1025 + change: function (value, opacity) {
  1026 + if (!value) return;
  1027 + if (opacity) value += ', ' + opacity;
  1028 + if (typeof console === 'object') {
  1029 + console.log(value);
  1030 + }
  1031 + },
  1032 + theme: 'bootstrap'
  1033 + });
  1034 +
  1035 + });
  1036 +
  1037 +
  1038 +
  1039 + $('.demo2').each(function () {
  1040 +
  1041 + $(this).minicolors({
  1042 + control: $(this).attr('data-control') || 'hue',
  1043 + defaultValue: $(this).attr('data-defaultValue') || '',
  1044 + format: $(this).attr('data-format') || 'hex',
  1045 + keywords: $(this).attr('data-keywords') || '',
  1046 + inline: $(this).attr('data-inline') === 'true',
  1047 + letterCase: $(this).attr('data-letterCase') || 'lowercase',
  1048 + opacity: $(this).attr('data-opacity'),
  1049 + position: $(this).attr('data-position') || 'bottom left',
  1050 + swatches: $(this).attr('data-swatches') ? $(this).attr('data-swatches').split('|') : [],
  1051 + change: function (value, opacity) {
  1052 + if (!value) return;
  1053 + if (opacity) value += ', ' + opacity;
  1054 + if (typeof console === 'object') {
  1055 + console.log(value);
  1056 + }
  1057 + },
  1058 + theme: 'bootstrap'
  1059 + });
  1060 +
  1061 + });
  1062 +
  1063 +
  1064 + });
  1065 + </script>
  1066 +
  1067 +
  1068 + <script>
  1069 + $(function () {
  1070 + $("#slider-range-min-3").slider({
  1071 + range: "min",
  1072 + min: 0,
  1073 + max: 100,
  1074 + value: 20,
  1075 + change: function (event, ui) {
  1076 +
  1077 +
  1078 + }
  1079 + });
  1080 +
  1081 +
  1082 +
  1083 + });
  1084 + </script>
  1085 +
  1086 + <script>
  1087 + $(function () {
  1088 +
  1089 +
  1090 +
  1091 + $("#slider-range-min-4").slider(
  1092 + {
  1093 + range: "min",
  1094 + value: .5,
  1095 + min: 0,
  1096 + max: 1,
  1097 + step: .1,
  1098 + slide: function (event, ui) {
  1099 +
  1100 + $(".marginTopBtm10 img.imgopacity").css("opacity", ui.value);
  1101 + // $("#slider-value").html(ui.value);
  1102 +
  1103 + }
  1104 +
  1105 + }
  1106 +
  1107 +);
  1108 +
  1109 + });
  1110 +
  1111 +
  1112 +
  1113 + </script>
  1114 +
  1115 +
  1116 +
  1117 +
  1118 +
  1119 +
  1120 +
875 1121 </body>
876 1122 </html>
877 1123 \ No newline at end of file
... ...