ADAM / AIAHTML5

Commit 40551497373b4b8b4550557098a730661e152694

Authored by Amrita Vishnoi
1 parent af5e7e6a

Open View implementation is in progress

Inline Side-by-side
Showing 9 changed files with 426 additions and 101 deletions
150-DOCUMENTATION/AIA-TimelinesFormatted.xlsx 0 โ†’ 100644
View file @4055149
No preview for this file type
150-DOCUMENTATION/AIA-TimelinesV1.0.xlsx 0 โ†’ 100644
View file @4055149
No preview for this file type
150-DOCUMENTATION/AIA-TimelinesV1.2.xlsx 0 โ†’ 100644
View file @4055149
No preview for this file type
150-DOCUMENTATION/Scrum/AIA_DailyScrum.xlsx
View file @4055149
No preview for this file type
400-SOURCECODE/AIAHTML5.Web/app/controllers/DAController.js
  View file @4055149
@@ -1696,6 +1696,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo @@ -1696,6 +1696,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
1696 // } 1696 // }
1697 var maskCanvas = document.getElementById(maskCanvasId); 1697 var maskCanvas = document.getElementById(maskCanvasId);
1698 var maskCanvasContext = maskCanvas.getContext("2d"); 1698 var maskCanvasContext = maskCanvas.getContext("2d");
  1699 +
1699 RGBColor = $scope.GetRGBColor(maskCanvasContext, actulalX, actualY, x, y); 1700 RGBColor = $scope.GetRGBColor(maskCanvasContext, actulalX, actualY, x, y);
1700 annotationText = $scope.GetAnnotationText(parseInt(RGBColor)); 1701 annotationText = $scope.GetAnnotationText(parseInt(RGBColor));
1701 } 1702 }
400-SOURCECODE/AIAHTML5.Web/app/controllers/TileViewListController.js
  View file @4055149
@@ -135,31 +135,47 @@ function ($scope, $rootScope, $compile, $http, $log, $location, BodyRegions, Bod @@ -135,31 +135,47 @@ function ($scope, $rootScope, $compile, $http, $log, $location, BodyRegions, Bod
135 135
136 $scope.openModuleItem = function (event) { 136 $scope.openModuleItem = function (event) {
137 137
138 - debugger; 138 + // debugger;
139 var moduleItemDataToBeSaved = event.target.id; 139 var moduleItemDataToBeSaved = event.target.id;
  140 +
  141 + var OpendTileData = [];
140 142
141 - // var moduleItemDataToBeSaved = [];  
142 -  
143 -  
144 - // for(var i=0;i<=$scope.moduleData.length-1;i++)  
145 - // {  
146 -  
147 - // if ($scope.moduleData[i].DivImageTitle == event.target.id)  
148 - // {  
149 -  
150 - // alert($scope.moduleData[i].imageID);  
151 -  
152 - // moduleItemDataToBeSaved.push($scope.moduleData[i].imageID, $scope.moduleData[i].id,$scope.moduleName);  
153 - // }  
154 -  
155 - // }  
156 -  
157 - ModuleService.SaveOpenedModules(moduleItemDataToBeSaved, $scope.moduleLandingData);  
158 -  
159 - ////var isSaved= ModuleService.SaveOpenedModules(moduleDetails);  
160 - 143 + OpendTileData = ModuleService.GetOpenedTileData(moduleItemDataToBeSaved, $scope.moduleLandingData);
  144 +
161 alert('openModuleItem is called'); 145 alert('openModuleItem is called');
162 146
163 } 147 }
164 148
  149 + $scope.openView = function ($event) {
  150 + //$rootScope.disableAnnotationTB = false;
  151 + //$rootScope.CIAnotationIdentifyModeOff = true;
  152 + //$rootScope.currentBodyViewId = $event.currentTarget.id;
  153 + //if ($event.currentTarget.textContent !== null && typeof ($event.currentTarget.textContent) !== "undefined") {
  154 + // var CITitle = [];
  155 + // CITitle = new jinqJs()
  156 + // .from($scope.selectedCIListViewData)
  157 + // .where('_id = ' + $event.currentTarget.id)
  158 + // .select('_Title');
  159 +
  160 + // // console.log(CITitle);
  161 + // // console.log($scope.selectedCIListViewData);
  162 +
  163 + // $rootScope.ViewTitle = CITitle[0]._Title;
  164 + //}
  165 + //else {
  166 + // $rootScope.ViewTitle = $event.currentTarget.textContent;
  167 +
  168 + //}
  169 +
  170 +
  171 + //localStorage.setItem("currentViewTitleFromJson", $rootScope.ViewTitle);
  172 + //localStorage.setItem("currentBodyViewId", $event.currentTarget.id);
  173 +
  174 + var u = $location.url();
  175 + $location.url('/atlas-anatomy-detail.html');
  176 +
  177 + // console.log($location.url('/clinical-illustrations-detail'));
  178 +
  179 + }
  180 +
165 }]); 181 }]);
400-SOURCECODE/AIAHTML5.Web/app/services/ModuleService.js
  View file @4055149
@@ -31,31 +31,43 @@ AIA.service(&#39;ModuleService&#39;, function($http, DataService) { @@ -31,31 +31,43 @@ AIA.service(&#39;ModuleService&#39;, function($http, DataService) {
31 .from(response.data.root.Item) 31 .from(response.data.root.Item)
32 .orderBy([{field: '_Title', sort: 'asc' }]) 32 .orderBy([{field: '_Title', sort: 'asc' }])
33 .select(); 33 .select();
34 - console.log(JSON.stringify(response, null, 4));  
35 - response.data= moduleData;  
36 - return response.data; 34 + // console.log(JSON.stringify(response, null, 4));
  35 + // response.data= moduleData;
  36 + // return response.data;
  37 + return moduleData;
37 }); 38 });
38 }, 39 },
39 40
40 - SaveOpenedModules: function (id,moduleJson) { 41 + GetOpenedTileData: function (id,moduleJson) {
41 42
42 if (modName == ATLAS_ANATOMY) 43 if (modName == ATLAS_ANATOMY)
43 { 44 {
  45 + var AADataForSelectedItem = [];
44 46
  47 + var title = id;
  48 +
45 alert(moduleJson.data.root.Item.length); 49 alert(moduleJson.data.root.Item.length);
46 50
47 var selectedTileData = new jinqJs() 51 var selectedTileData = new jinqJs()
48 .from(moduleJson.data.root.Item) 52 .from(moduleJson.data.root.Item)
49 - .where("_Title =="+ id) 53 + .where("_Title == " + title)
50 .select(); 54 .select();
51 55
52 -  
53 - alert(selectedTileData); 56 + AADataForSelectedItem.push("imageId: " + selectedTileData[0]._ImageId);
  57 + AADataForSelectedItem.push("BodyRegion:" + selectedTileData[0]._BodyRegion);
  58 + AADataForSelectedItem.push("BodySystem: " + selectedTileData[0]._BodySystem);
  59 + AADataForSelectedItem.push("ImageName: " + selectedTileData[0]._ImageName);
  60 + AADataForSelectedItem.push("ImageType:" + selectedTileData[0]._ImageType);
  61 + AADataForSelectedItem.push("TileImageName: " + selectedTileData[0]._TileImageName);
  62 +
  63 + AADataForSelectedItem.push("ViewOrientation: " + selectedTileData[0]._ViewOrientation);
  64 +
  65 + return AADataForSelectedItem;
54 66
55 } 67 }
56 68
57 69
58 - //OpenedModuleItemList.push("imageId: " + moduleDetails[0]); 70 + //OpenedModuleItemList.push("imageId: " + moduleDetails[0]);
59 //OpenedModuleItemList.push("moduleId:" + moduleDetails[1]); 71 //OpenedModuleItemList.push("moduleId:" + moduleDetails[1]);
60 //OpenedModuleItemList.push("moduleName: " + moduleDetails[2]); 72 //OpenedModuleItemList.push("moduleName: " + moduleDetails[2]);
61 73
400-SOURCECODE/AIAHTML5.Web/app/services/ModuleService456.js deleted
View file @af5e7e6
1 -๏ปฟvar ATLAS_ANATOMY = 'Atlas Anatomy';  
2 -var CLINICAL_ILLUSTRATION = 'Clinical Illustrations';  
3 -var CLINICAL_ANIMATION = 'Clinical Animations';  
4 -var OpenedModuleItemList = [];  
5 -var ModDetail = [];  
6 -  
7 -AIA.service("ModuleService", function ($http, $q, DataService) {  
8 -  
9 - var deferred = $q.defer();  
10 -  
11 - this.loadModuleDataBasedOnModuleName = function (moduleName) {  
12 - var tileHtml;  
13 -  
14 -  
15 - var jsonPath;  
16 - if (moduleName == ATLAS_ANATOMY) {  
17 - jsonPath = '~/../content/data/json/aa/aa_dat_contentlist.json';  
18 - }  
19 - else if (moduleName == CLINICAL_ANIMATION) {  
20 - //to do, in next phase of project  
21 - jsonPath = '~/../content/data/json/ca/ca_dat_contentlist.json';  
22 - }  
23 - else if (moduleName == CLINICAL_ILLUSTRATION) {  
24 - //to do, in next phase of project  
25 - jsonPath = '~/../content/data/json/ci/ci_dat_contentlist.json';  
26 - }  
27 -  
28 - var promise = DataService.getJson(jsonPath)  
29 - promise.then(  
30 - function (result) {  
31 - var AtlasAnatomyData = result;  
32 -  
33 - var data = new jinqJs()  
34 - .from(AtlasAnatomyData.root.Item)  
35 - .orderBy([{ field: '_Title', sort: 'asc' }])  
36 - .select();  
37 -  
38 - var tileHTML;  
39 -  
40 - angular.forEach(data, function (value, key) {  
41 - // $rootScope.moduleData = [];  
42 - //$scope.moduleData.push({ "id": value._Id, "imageID": value._ImageId, "TileName": value._TileImageName, "DivImageTitle": value._Title });  
43 - // $scope.moduleData.push(value._ImageId);  
44 - // $scope.moduleData.push(value._TileImageName);  
45 -  
46 - var ImageName = value._TileImageName;  
47 - var imagePath = "~/../content/images/aa/thumbnails/" + value._TileImageName;  
48 - //$scope.TileViewId = value._Id;  
49 -  
50 - tileHTML = $('<div id="' + value._Id + '" class="col-sm-3 col-md-3" title = "' + value._Title + '" data-ng-click="openModuleItem()">'  
51 - + '<div class="thumbnail" >'  
52 - + '<img class="tinyImg" id="' + value._Title + '"ng-src="' + imagePath + '" alt="" title="" >'  
53 - + '<div class="caption"><p>' + value._Title + '</p></div></a></div></div>');//.appendTo('#grid-view');  
54 - })  
55 - var deferred = $q.defer();  
56 - return tileHTML  
57 - .then(function (response) {  
58 - // promise is fulfilled  
59 - //debugger;  
60 - deferred.resolve(response.data);  
61 - // promise is returned  
62 - return deferred.promise;  
63 - }, function (response) {  
64 - // the following line rejects the promise  
65 - deferred.reject(response);  
66 - // promise is returned  
67 - return deferred.promise;  
68 - })  
69 - ;  
70 - }  
71 - )}  
72 -});  
73 \ No newline at end of file 0 \ No newline at end of file
400-SOURCECODE/AIAHTML5.Web/app/views/atlas-anatomy-detail.html 0 โ†’ 100644
  View file @4055149
  1 +<!DOCTYPE html>
  2 +<html lang="en">
  3 +<head>
  4 +<meta charset="utf-8">
  5 +<meta http-equiv="X-UA-Compatible" content="IE=edge">
  6 +<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  7 +<title>A.D.A.M. Interactive Anatomy</title>
  8 +<link href="css/bootstrap.css" rel="stylesheet">
  9 +<link href="css/main.css" rel="stylesheet">
  10 +
  11 +<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
  12 +<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,800,700,600,400italic">
  13 +
  14 +<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
  15 +<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  16 +<!--[if lt IE 9]>
  17 + <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  18 + <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  19 + <![endif]-->
  20 +
  21 +
  22 +<!-- include the jQuery and jQuery UI scripts -->
  23 +<script src="https://code.jquery.com/jquery-2.1.1.js"></script>
  24 +<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
  25 +<!-- plus a jQuery UI theme, here I use "flick" -->
  26 +<link rel="stylesheet" href="css/jquery-ui-slider-pips.css">
  27 +<link rel="stylesheet" href="css/jquery-ui.css">
  28 +</head>
  29 +<body>
  30 +<div class="container-fluid ">
  31 + <!--Header-->
  32 + <nav class="navbar navbar-inverse navbar-fixed-top">
  33 + <div class="container-fluid">
  34 + <!-- Brand and toggle get grouped for better mobile display -->
  35 + <div class="navbar-header">
  36 + <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#topFixedNavbar1" aria-expanded="false"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
  37 + <a class="frameLogo navbar-brand" href="welcome.html"><img src="img/logo-main.png" class="img-responsive" alt=""></a> </div>
  38 + <div class="collapse navbar-collapse" id="topFixedNavbar1">
  39 + <ul class="nav navbar-nav toperMenu-spaceleft">
  40 + <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">File<span class="caret"></span></a>
  41 + <ul class="dropdown-menu">
  42 + <li><a href="#">Open Resources</a></li>
  43 + <li><a href="#">Open My Pictures</a></li>
  44 + <li><a href="#">Open My Animations</a></li>
  45 + <li role="separator" class="divider"></li>
  46 + <li><a href="#">Test Creator</a></li>
  47 + <li><a href="#">Open Test</a></li>
  48 + <li><a href="#">Save Test As</a></li>
  49 + <li role="separator" class="divider"></li>
  50 + <li><a href="#">New Curriculum</a></li>
  51 + <li><a href="#">Open Existing Curriculum</a></li>
  52 + <li><a href="#">Save Curriculum As</a></li>
  53 + <li role="separator" class="divider"></li>
  54 + <li><a href="#">Export Image</a></li>
  55 + <li role="separator" class="divider"></li>
  56 + <li><a href="#">Print Active Viewer</a></li>
  57 + <li><a href="#">Print All Open Viewers</a></li>
  58 + <li><a href="#">Print Priview</a></li>
  59 + </ul>
  60 + </li>
  61 + <li><a href="#" data-toggle="modal" data-target=".bs-example-modal-sm">Annotation</a></li>
  62 +
  63 +
  64 +
  65 + <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Options<span class="caret"></span></a>
  66 + <ul class="dropdown-menu">
  67 + <li><a href="#">List Manager</a></li>
  68 + <li><a href="#">Annotation Toolbar</a></li>
  69 + <li><a href="#">Add to Existing Curriculum</a></li>
  70 + <li><a href="#">Settings</a></li>
  71 + <li role="separator" class="divider"></li>
  72 + <li><a href="#">Lab Exercises PDF</a></li>
  73 + </ul>
  74 + </li>
  75 + <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Help<span class="caret"></span></a>
  76 + <ul class="dropdown-menu">
  77 + <li><a href="#">Help Topics</a></li>
  78 + <li><a href="#">Customer Support</a></li>
  79 + <li role="separator" class="divider"></li>
  80 + <li><a href="#">About A.D.A.M.</a></li>
  81 + </ul>
  82 + </li>
  83 + <li><a href="#">Admin</a></li>
  84 + </ul>
  85 + <ul class="nav navbar-nav navbar-right">
  86 + <li class="visible-xs"><a href="index.html">Logout</a></li>
  87 + <li class="hidden-xs marginR5" data-toggle="tooltip" data-placement="top" title="Logout"><a href="index.html"><i class="fa fa-power-off"></i></a></li>
  88 + </ul>
  89 + <!--<form class="navbar-form navbar-right" role="search">
  90 + <div class="input-group">
  91 + <select class="form-control">
  92 + <option selected>----Select----</option>
  93 + <option>1</option>
  94 + <option>2</option>
  95 + <option>3</option>
  96 + <option>4</option>
  97 + </select>
  98 + <span class="input-group-btn">
  99 + <button class="btn btn-success" type="button"><i class="fa fa-search"></i> Search</button>
  100 + </span> </div>
  101 + </form>-->
  102 + <div id="imaginary_container">
  103 + <div class="input-group stylish-input-group paddTop5 hidden-sm">
  104 + <input type="text" class="form-control width120" placeholder="Search" >
  105 + <span class="input-group-addon">
  106 + <button type="submit" >
  107 + <span class="fa fa-search color-green"></span>
  108 + </button>
  109 + </span>
  110 + </div>
  111 +
  112 + <div class="visible-sm visible-md pull-right marginTop5">
  113 + <div class="dropdown">
  114 + <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" >
  115 + <i class="fa fa-search color-white"></i>
  116 + </button>
  117 + <!--<div class="hidden-xs marginR5 dropdown-toggle marginTop5" id="dropdownMenu1" data-toggle="dropdown" data-placement="top" title="Logout"><a href="index.html"><i class="fa fa-search color-white"></i></a></div>-->
  118 + <ul class="dropdown-menu right0" aria-labelledby="dropdownMenu1">
  119 + <li>
  120 + <!--<div class="input-group"><input type="text" aria-label="Amount (to the nearest dollar)" class="form-control"> <span class="input-group-addon"><i class="fa fa-search color-green"></i></span> </div>-->
  121 + <div class="input-group stylish-input-group ">
  122 + <input type="text" class="form-control" placeholder="Search" style="width:100%;" >
  123 + <span class="input-group-addon">
  124 + <button type="submit" >
  125 + <span class="fa fa-search color-green"></span>
  126 + </button>
  127 + </span>
  128 + </div>
  129 + </li>
  130 + </ul>
  131 + </div>
  132 + </div>
  133 + </div>
  134 + </div>
  135 + </div>
  136 + </nav>
  137 + <!--Body-->
  138 + <div class="bodyWrap row">
  139 + <div class="col-sm-12 pageHeading">
  140 + <!--<button type="button" class="btn btn-success pull-left toggleBar btn-sm" data-toggle="tooltip" data-placement="top" title="Show/Hide Sidebar"> <i class="fa fa-bars"></i> </button>-->
  141 +
  142 + <!--<div class=" pull-left toggleBar toggleHeadingButton" data-toggle="tooltip" data-placement="top" title="Show/Hide Sidebar"> <i class="fa fa-exchange"></i> </div>-->
  143 + <h4 class="pull-left">1<sup>st</sup> &amp; 2<sup>nd</sup> Intercostal Spaces</h4>
  144 + <div class="pull-right btn-group paddTop4 hidden-xs"> <a href="#" class="btn btn-xs btn-default"><i class="fa fa-minus"></i></a> <a href="#" class="btn btn-xs btn-default"><i class="fa fa-clone"></i></a> <a href="#" class="btn btn-xs btn-default"><i class="fa fa-close"></i></a> </div>
  145 + <div class="clearfix"></div>
  146 + </div>
  147 + <div class="tools pull-left" style="top:44px;">
  148 + <div class="toggle-icon toggleBar toggleHeadingButton" data-toggle="tooltip" data-placement="top" title="Show/Hide Sidebar"></div>
  149 + <div class="">
  150 + <div class="col-sm-6" title="Hide Pins"><button class="btn btn-black btn-sm"> <img src="img/hide-pin.png" alt="" title=""></button> </div>
  151 + <div class="col-sm-6" title="Show Selected Pins"><button class="btn btn-black btn-sm pull-right"><img src="img/draw-pin.png" alt="" title=""></button></div>
  152 + <div class="col-sm-6" title="Show All Pins in System(s)"><button class="btn btn-primary btn-sm marginTop5"><img src="img/all-pin.png" alt="" title=""></button></div>
  153 + <div class="col-sm-6" title="Select System">
  154 + <button class="btn btn-black btn-sm pull-right marginTop5 dropdown-toggle" type="button" id="dropdownMenu221" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"><img src="img/icon-highlight.png" alt="" title=""></button>
  155 + <ul class="dropdown-menu" aria-labelledby="dropdownMenu221">
  156 + <li><a href="#" title="Current Structure">All</a></li>
  157 + <li role="separator" class="divider"></li>
  158 + <li><a href="#" title="Cardiovascular">Cardiovascular</a></li>
  159 + <li><a href="#" title="Digestive">Digestive</a></li>
  160 + <li class="disabled"><a href="#" title="Endocrine">Endocrine</a></li>
  161 + <li class="disabled"><a href="#" title="Immune">Immune</a></li>
  162 + <li class="disabled"><a href="#" title="Integumentary">Integumentary</a></li>
  163 + <li class="disabled"><a href="#" title="Lymphatic">Lymphatic</a></li>
  164 + <li><a href="#" title="Muscular">Muscular</a></li>
  165 + <li class="disabled"><a href="#" title="Nervous">Nervous</a></li>
  166 + <li class="disabled"><a href="#" title="Reproductive">Reproductive</a></li>
  167 + <li class="disabled"><a href="#" title="Respiratory">Respiratory</a></li>
  168 + <li><a href="#" title="Skeletal">Skeletal</a></li>
  169 + <li class="disabled"><a href="#" title="Urinary">Urinary</a></li>
  170 + </ul>
  171 +
  172 + </div>
  173 + <div class="col-sm-12" data-toggle="tooltip" data-placement="top" title="Show/Hide Structure Name Boxes"><button class="btn btn-black btn-sm marginTop5 btn-block"> <img src="img/comment-box.png" alt="" title=""></button> </div>
  174 + </div>
  175 + <div class="pips-slider" style="margin-top:125px">
  176 + <h3>Zoom <i class="fa fa-search-plus"></i></h3>
  177 + <div class="slider" id="vertical-slider"></div>
  178 + </div>
  179 + </div>
  180 +
  181 + <div class="main2">
  182 + <div class="col-sm-12 stickey-area">
  183 + <div class="breadcrumb">
  184 + <div class="">
  185 + <div class="input-group col-sm-8 col-xs-7 col-md-10 pull-left">
  186 + <input class="form-control input-sm " type="text" placeholder="Anterior cutaneous branch of first intercostal nerve">
  187 + <!--<select class="form-control input-sm ">
  188 + <option>---Select---</option>
  189 + <option selected>Anterior cutaneous branch of first intercostal nerve</option>
  190 + <option>Anterior cutaneous branch of second intercostal nerve</option>
  191 + <option>Anterior cutaneous branch of third intercostal nerve</option>
  192 + <option>Anterior intercostal artery</option>
  193 + <option>Anterior intercostal vein</option>
  194 + </select>-->
  195 + <!--<div class="input-group-addon btn btn-primary btn-sm"></div>-->
  196 + </div>
  197 + &nbsp;
  198 + <!-- Single button -->
  199 + <div class="btn-group">
  200 + <button type="button" class="btn btn-success dropdown-toggle btn-sm" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
  201 + <i class="fa fa-arrow-circle-right"></i>
  202 + </button>
  203 + <ul class="dropdown-menu">
  204 + <li><a href="#">1<sup>st</sup> &amp; 2<sup>nd</sup> Intercostal Spaces</a></li>
  205 + <li role="separator" class="divider"></li>
  206 + <li><a href="#">All</a></li>
  207 + </ul>
  208 + </div>
  209 + <div class="btn-group">
  210 + <button type="button" class="btn btn-primary dropdown-toggle btn-sm" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
  211 + <i class="fa fa-male"></i>
  212 + </button>
  213 + <ul class="dropdown-menu" style="min-width:auto;">
  214 + <li><img src="img/position.jpg" class="img-responsive"></li>
  215 + </ul>
  216 + </div>
  217 +
  218 + </div>
  219 + </div>
  220 + </div>
  221 + <div class="col-sm-12">
  222 + <div class="container-fluid">
  223 + <div class="row">
  224 + <div class="col-sm-12 img-thumbnail" align="center"><img src="img/1000x600.jpg" alt="" title="" class="img-responsive"></div>
  225 + <!--<div class="col-sm-1 img-thumbnail pull-right" align="center"><img src="img/500x300.jpg" alt="" title="" class="img-responsive"></div>
  226 + <div class="clearfix"></div>-->
  227 + </div>
  228 + </div>
  229 + </div>
  230 + <div class="clearfix"></div>
  231 +
  232 +
  233 +
  234 + </div>
  235 + </div>
  236 +</div>
  237 +
  238 +<!--Annotation Modal-->
  239 +<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" style="z-index:9999;" id="draggable">
  240 + <div class="modal-dialog modal-sm" role="document">
  241 + <div class="modal-content">
  242 + <div class="modal-header annotation-modal-header">
  243 + <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  244 + <h4 class="modal-title" id="myModalLabel">Annotation</h4>
  245 + </div>
  246 + <div class="modal-body">
  247 + <div class="row">
  248 + <div class="col-sm-12">
  249 + <h5>Mode</h5>
  250 + <!--<div class="btn-group" role="group" aria-label="...">
  251 + <button type="button" class="btn btn-primary btn-sm">Identify</button>
  252 + <button type="button" class="btn btn-primary btn-sm">Draw</button>
  253 + </div>-->
  254 + <div class="btn-group btn-group-justified" role="group" aria-label="...">
  255 + <div class="btn-group" role="group">
  256 + <button type="button" class="btn btn-sm btn-success">Identify</button>
  257 + </div>
  258 + <div class="btn-group" role="group">
  259 + <button type="button" class="btn btn-sm btn-success">Draw</button>
  260 + </div>
  261 + </div>
  262 +
  263 + </div>
  264 + <div class="col-sm-12">
  265 + <h5>Tools</h5>
  266 + <div class="well well-popup">
  267 + <div class="" role="" aria-label="...">
  268 + <div class="" role="group" align="center">
  269 + <button type="button" class="btn btn-black btn-xs mrgnBtm5" data-toggle="tooltip" data-placement="top" title="Select Shapes(S)"><img src="img/icon-identity.png" alt="" title=""></button>
  270 + <button type="button" class="btn btn-black btn-xs mrgnBtm5" data-toggle="tooltip" data-placement="top" title="Draw Pin"><img src="img/draw-pin.png" alt="" title=""></button>
  271 + <button type="button" class="btn btn-black btn-xs mrgnBtm5" data-toggle="tooltip" data-placement="top" title="Draw Arrow"><img src="img/draw-arrow.png" alt="" title=""></button>
  272 + <button type="button" class="btn btn-black btn-xs mrgnBtm5" data-toggle="tooltip" data-placement="top" title="Draw Text"><img src="img/draw-text.png" alt="" title=""></button>
  273 + </div>
  274 + <div class="" role="group" align="center">
  275 + <button type="button" class="btn btn-black btn-xs " data-toggle="tooltip" data-placement="top" title="Draw Line"><img src="img/draw-line.png" alt="" title=""></button>
  276 + <button type="button" class="btn btn-black btn-xs" data-toggle="tooltip" data-placement="top" title="Draw Rectangle"><img src="img/draw-rec.png" alt="" title=""></button>
  277 + <button type="button" class="btn btn-black btn-xs" data-toggle="tooltip" data-placement="top" title="Draw Circle"><img src="img/draw-cir.png" alt="" title=""></button>
  278 + <button type="button" class="btn btn-black btn-xs" data-toggle="tooltip" data-placement="top" title="Draw Polygon"><img src="img/draw-poly.png" alt="" title=""></button>
  279 + </div>
  280 + </div>
  281 + </div>
  282 + <div class="well-popup well">
  283 + <img src="img/blank-shape.jpg" alt="..." class="img-rounded img-responsive">
  284 + </div>
  285 + <div class="well well-popup">
  286 + <div class="" role="group" aria-label="...">
  287 + <div>
  288 + <button type="button" class="btn btn-primary btn-xs pull-left" data-toggle="tooltip" data-placement="top" title="Paint" style="margin-right:1%;"><i class="fa fa-paint-brush"></i></button>
  289 + <button type="button" class="btn btn-primary btn-xs pull-left" data-toggle="tooltip" data-placement="top" title="Erase"><i class="fa fa-eraser"></i></button>&nbsp;
  290 + <div class="marginL2 pull-left"><input type="number" id="amount-2" value="25" step="1" style="width:60px;" ></div>&nbsp;
  291 + <div class="pull-left" style="width:45%; margin-left:2%;">
  292 + <div id="slider-range-min-2"></div>
  293 + </div>
  294 + <div class="clearfix"></div>
  295 + </div>
  296 +
  297 +
  298 + </div>
  299 +
  300 +
  301 + </div>
  302 +
  303 + </div>
  304 + </div>
  305 + </div>
  306 +
  307 + </div>
  308 + </div>
  309 +</div>
  310 +
  311 +<script src="js/jquery-1.11.3.min.js"></script>
  312 +<script src="js/bootstrap.js"></script>
  313 +<script src="js/custom.js"></script>
  314 +<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  315 +<script src="js/jquery.sticky.js"></script>
  316 +<script>
  317 +$(window).load(function(){
  318 + $(".stickey-area").sticky();
  319 +});
  320 +</script>
  321 + <script>
  322 + $(function() {
  323 + $( "#slider-range-min-2" ).slider({
  324 + range: "min",
  325 + min: 1,
  326 + max: 60,
  327 + value: 10,
  328 + slide: function( event, ui ) {
  329 + $( "#amount-2" ).val( ui.value );
  330 + }
  331 + });
  332 + $( "#amount-2" ).val( $( "#slider-vertical-2" ).slider( "value" ) );
  333 +
  334 + });
  335 + </script>
  336 +
  337 + <script>
  338 +$(document).ready(function(){
  339 + $('[data-toggle="tooltip"]').tooltip();
  340 +});
  341 +</script>
  342 +<script src="js/jquery-ui-slider-pips.js"></script>
  343 +<script>
  344 + $(".slider")
  345 +
  346 + .slider({
  347 + min: 25,
  348 + max: 100,
  349 + value: 100,
  350 + range: "min",
  351 + orientation: "vertical"
  352 + })
  353 +
  354 + .slider("pips", {
  355 + rest: "label",
  356 + step: "15"
  357 + });
  358 +</script>
  359 +
  360 +<script>
  361 + $(function() {
  362 + $( "#draggable" ).draggable();
  363 + });
  364 + </script>
  365 +
  366 +
  367 +</body>
  368 +</html>
0 \ No newline at end of file 369 \ No newline at end of file