├── .idea ├── LabelD.iml ├── jsLibraryMappings.xml ├── misc.xml ├── modules.xml ├── vcs.xml └── workspace.xml ├── LICENSE.txt ├── README.md ├── annotorious-0.6.4 ├── annotorious.debug.js ├── annotorious.min.js ├── css │ ├── annotorious.css │ ├── delete.png │ ├── feather_icon.png │ ├── pencil.png │ └── theme-dark │ │ ├── DarkSprite-old.png │ │ ├── DarkSprite.png │ │ ├── Dividor.png │ │ ├── Indicator-old.png │ │ ├── Indicator.png │ │ ├── annotorious-dark.css │ │ └── feather_icon.png └── example │ ├── 640px-Hallstatt.jpg │ ├── example.css │ ├── example.html │ └── highlight.js │ ├── LICENSE │ ├── highlight.pack.js │ └── zenburn.css ├── images ├── LabelD-Placeholder.png ├── android-desktop.png ├── dog.png ├── favicon.png ├── flat_user.png ├── ios-desktop.png ├── logo.png ├── person-flat.png └── user.jpg ├── index.html ├── js ├── annotation_queue.js ├── app.js ├── controllers │ ├── AnnotationController.js │ ├── ClassifyController-Backup.js │ ├── ClassifyController.js │ ├── ContributeController.js │ ├── DiscoverController.js │ ├── HelpController.js │ ├── HomeController.js │ ├── ImageController.js │ └── MenuController.js ├── directives │ ├── discover │ │ ├── discoverCardDirective.html │ │ └── discoverCardDirective.js │ └── help │ │ ├── HelpCardDirective.html │ │ └── HelpCardDirective.js ├── routes │ └── pageRoutes.js ├── services │ └── image_get.js ├── shared │ ├── angular-route.js │ ├── angular.min.js │ ├── autoSave.js │ ├── dialog-polyfill.min.js │ ├── jquery.min.js │ ├── material.min.js │ └── modal.js └── ui.js ├── node └── rest │ └── rest_server.js ├── pages ├── annotate.html ├── classify.html ├── contribute.html ├── discover.html └── home.html ├── remodal ├── index.html ├── js │ ├── remodal.js │ └── remodal.min.js └── style │ ├── remodal-default-theme.css │ └── remodal.css ├── style ├── material.cyan-light_blue.min.css ├── material_icons.css ├── modal.css ├── roboto_etc.css └── styles.css └── web_server.js /.idea/LabelD.iml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /.idea/jsLibraryMappings.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /.idea/misc.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /.idea/modules.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /.idea/vcs.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | #Introductions 2 | 3 | LabelD was created as a simple image annotation tool to minimize the amount of work/time spent on annotation by streamlining the overall process. The images can either be pulled from Imgur based on keyword search (search button at the top right), or locally (please un-select Imgur as the image source under Annotation Settings). 4 | 5 | #Installation 6 | 7 | LabelD is simple enough to get up and running. 8 | 9 | 1. Clone/Download the LabelD source code 10 | 2. Satisfy the required dependencies 11 | 3. Launch the 2 required nodejs servers web_server.js and node/rest/rest_server.js 12 | 4. (optional) If there are local images the user wishes to annotate, copy them into the node/rest/data 13 | 14 | 15 | #Dependencies 16 | 17 | - NodeJS 18 | - NPM 19 | - NPM module - express 20 | - NPM module - body-parser 21 | - MongoDB 22 | 23 | And... you're done! 24 | 25 | If you dont have an image base to start from, this may be the easiest platform to begin building a training set. It comes default with the ability to pull keyword indexed images from Imgur, so try it out! 26 | 27 | 1. Put a keyword in the search box at the top right 28 | 2. Hit enter 29 | 3. Click "NEXT" 30 | 31 | Thats it! 32 | -------------------------------------------------------------------------------- /annotorious-0.6.4/css/annotorious.css: -------------------------------------------------------------------------------- 1 | /** Global item styles **/ 2 | 3 | .annotorious-opacity-fade { 4 | -moz-transition-property: opacity; 5 | -moz-transition-duration: 0.5s; 6 | -moz-transition-delay: 0s; 7 | -webkit-transition-property: opacity; 8 | -webkit-transition-duration: 0.5s; 9 | -webkit-transition-delay: 0s; 10 | -o-transition-property: opacity; 11 | -o-transition-duration: 0.5s; 12 | -o-transition-delay: 0s; 13 | transition-property: opacity; 14 | transition-duration: 0.5s; 15 | transition-delay: 0s; 16 | } 17 | 18 | .annotorious-item-focus { 19 | opacity:1.0; 20 | } 21 | 22 | .annotorious-item-unfocus { 23 | opacity:0.4; 24 | } 25 | 26 | /** Hint/help popup **/ 27 | 28 | .annotorious-hint-msg { 29 | background-color:rgba(0,0,0,0.5); 30 | margin:4px; 31 | padding:8px 15px 8px 30px; 32 | font-family: 'lucida grande',tahoma,verdana,arial,sans-serif; 33 | line-height: normal; 34 | font-size:12px; 35 | color:#fff; 36 | border-radius:4px; 37 | -moz-border-radius:4px; 38 | -webkit-border-radius:4px; 39 | -khtml-border-radius:4px; 40 | } 41 | 42 | .annotorious-hint-icon { 43 | position:absolute; 44 | top:6px; 45 | left: 5px; 46 | background:url('feather_icon.png'); 47 | background-repeat:no-repeat; 48 | width:19px; 49 | height:22px; 50 | margin:2px 4px 0px 6px; 51 | } 52 | 53 | /** Popup **/ 54 | 55 | .annotorious-popup { 56 | line-height:135%; 57 | font-family:Arial, Verdana, Sans; 58 | font-size:12px; 59 | color:#000; 60 | background-color:#fff; 61 | border:1px solid #ccc; 62 | padding:9px 8px; 63 | word-wrap:break-word; 64 | width:180px; 65 | border-radius: 3px; 66 | -moz-border-radius: 3px; 67 | -webkit-border-radius: 3px; 68 | -khtml-border-radius: 3px; 69 | -moz-box-shadow:0px 5px 15px #111; 70 | -webkit-box-shadow:0px 5px 15px #111; 71 | box-shadow:0px 5px 15px #111; 72 | 73 | -moz-transition-property: opacity; 74 | -moz-transition-duration: 0.5s; 75 | -moz-transition-delay: 0s; 76 | -webkit-transition-property: opacity; 77 | -webkit-transition-duration: 0.5s; 78 | -webkit-transition-delay: 0s; 79 | -o-transition-property: opacity; 80 | -o-transition-duration: 0.5s; 81 | -o-transition-delay: 0s; 82 | transition-property: opacity; 83 | transition-duration: 0.5s; 84 | transition-delay: 0s; 85 | } 86 | 87 | .annotorious-popup-empty { 88 | color:#999; 89 | font-style:italic; 90 | } 91 | 92 | .annotorious-popup-buttons { 93 | float:right; 94 | margin:0px 0px 1px 10px; 95 | height:16px; 96 | 97 | -moz-transition-property: opacity; 98 | -moz-transition-duration: 1s; 99 | -moz-transition-delay: 0s; 100 | -webkit-transition-property: opacity; 101 | -webkit-transition-duration: 1s; 102 | -webkit-transition-delay: 0s; 103 | -o-transition-property: opacity; 104 | -o-transition-duration: 1s; 105 | -o-transition-delay: 0s; 106 | transition-property: opacity; 107 | transition-duration: 1s; 108 | transition-delay: 0s; 109 | } 110 | 111 | .annotorious-popup-button { 112 | font-size:10px; 113 | text-decoration:none; 114 | display:inline-block; 115 | color:#000; 116 | font-weight:bold; 117 | margin-left:5px; 118 | opacity:0.4; 119 | 120 | -moz-transition-property: opacity; 121 | -moz-transition-duration: 0.5s; 122 | -moz-transition-delay: 0s; 123 | -webkit-transition-property: opacity; 124 | -webkit-transition-duration: 0.5s; 125 | -webkit-transition-delay: 0s; 126 | -o-transition-property: opacity; 127 | -o-transition-duration: 0.5s; 128 | -o-transition-delay: 0s; 129 | transition-property: opacity; 130 | transition-duration: 0.5s; 131 | transition-delay: 0s; 132 | } 133 | 134 | .annotorious-popup-button:hover { 135 | background-color:transparent; 136 | } 137 | 138 | .annotorious-popup-button-active { 139 | opacity:0.9; 140 | } 141 | 142 | .annotorious-popup-button-edit { 143 | background:url(pencil.png); 144 | width:16px; 145 | height:16px; 146 | text-indent:100px; 147 | overflow:hidden; 148 | } 149 | 150 | .annotorious-popup-button-delete { 151 | background:url(delete.png); 152 | width:16px; 153 | height:16px; 154 | text-indent:100px; 155 | overflow:hidden; 156 | float:right; 157 | } 158 | 159 | .annotorious-popup-field { 160 | border-top:1px solid #ccc; 161 | margin:6px 0px 0px 0px; 162 | padding-top:2px; 163 | } 164 | 165 | /** Editor **/ 166 | 167 | .annotorious-editor { 168 | line-height: normal; 169 | padding:0px 0px 2px 0px; 170 | background-color:#f2f2f2; 171 | color:#000; 172 | opacity:0.97; 173 | border:1px solid #ccc; 174 | border-radius: 3px; 175 | -moz-border-radius: 3px; 176 | -webkit-border-radius: 3px; 177 | -khtml-border-radius: 3px; 178 | -moz-box-shadow:0px 5px 15px #111; 179 | -webkit-box-shadow:0px 5px 15px #111; 180 | box-shadow:0px 5px 15px #111; 181 | } 182 | 183 | .annotorious-editor-text { 184 | border-width:0px 0px 1px 0px; 185 | border-style:solid; 186 | border-color:#ccc; 187 | line-height: normal; 188 | background-color:#fff; 189 | width:240px; 190 | height:50px; 191 | outline:none; 192 | font-family:Verdana, Arial; 193 | font-size:11px; 194 | padding:4px; 195 | margin:0px; 196 | color:#000; 197 | text-shadow:none; 198 | overflow-y:auto; 199 | display:block; 200 | } 201 | 202 | .annotorious-editor-button-container { 203 | padding-top:2px; 204 | } 205 | 206 | .annotorious-editor-button { 207 | float:right; 208 | line-height: normal; 209 | display:inline-block; 210 | text-align:center; 211 | text-decoration:none; 212 | font-family:Verdana, Arial; 213 | font-size:10px; 214 | border:1px solid #777; 215 | color:#ddd; 216 | padding:3px 8px; 217 | margin:1px 2px 0px 1px; 218 | cursor:pointer; 219 | cursor:hand; 220 | background:-webkit-gradient(linear, left top, left bottom, from(#888), to(#555)); 221 | background:-moz-linear-gradient(top, #888, #555); 222 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#888888', endColorstr='#555555'); 223 | -moz-border-radius:2px; 224 | -webkit-border-radius:2px; 225 | -khtml-border-radius:2px; 226 | border-radius:2px; 227 | } 228 | 229 | .annotorious-editor-button:hover { 230 | background:#999; 231 | } 232 | 233 | .annotorious-editor-field { 234 | border-bottom:1px solid #ccc; 235 | margin:0px; 236 | background-color:#fff; 237 | padding:3px; 238 | font-family:Verdana, Arial; 239 | font-size:12px; 240 | } 241 | 242 | /** OpenLayers module **/ 243 | .annotorious-ol-boxmarker-outer { 244 | border:1px solid #000; 245 | } 246 | 247 | .annotorious-ol-boxmarker-inner { 248 | border:1px solid #fff; 249 | -webkit-box-sizing: border-box; 250 | -moz-box-sizing: border-box; 251 | -ms-box-sizing: border-box; 252 | box-sizing: border-box; 253 | } 254 | 255 | .annotorious-ol-hint { 256 | line-height: normal; 257 | font-family:Arial, Verdana, Sans; 258 | font-size:16px; 259 | color:#000; 260 | background-color:#fff; 261 | margin:0px; 262 | padding:9px; 263 | border-radius: 5px; 264 | -moz-border-radius: 5px; 265 | -webkit-border-radius: 5px; 266 | -khtml-border-radius: 5px; 267 | } 268 | 269 | .annotorious-ol-hint-secondary { 270 | background-color:#fff000; 271 | } 272 | 273 | canvas { 274 | z-index: 2; 275 | } 276 | 277 | canvas.hidden { 278 | z-index: -1; 279 | visibility: hidden; 280 | } 281 | 282 | html.hasTouch .annotator-viewer li .annotator-controls, 283 | html.hasTouch .annotator-viewer li .annotator-controls { 284 | opacity: 1; 285 | } -------------------------------------------------------------------------------- /annotorious-0.6.4/css/delete.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sweppner/labeld/8e35658310e855e263716fdab35d52b55807757d/annotorious-0.6.4/css/delete.png -------------------------------------------------------------------------------- /annotorious-0.6.4/css/feather_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sweppner/labeld/8e35658310e855e263716fdab35d52b55807757d/annotorious-0.6.4/css/feather_icon.png -------------------------------------------------------------------------------- /annotorious-0.6.4/css/pencil.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sweppner/labeld/8e35658310e855e263716fdab35d52b55807757d/annotorious-0.6.4/css/pencil.png -------------------------------------------------------------------------------- /annotorious-0.6.4/css/theme-dark/DarkSprite-old.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sweppner/labeld/8e35658310e855e263716fdab35d52b55807757d/annotorious-0.6.4/css/theme-dark/DarkSprite-old.png -------------------------------------------------------------------------------- /annotorious-0.6.4/css/theme-dark/DarkSprite.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sweppner/labeld/8e35658310e855e263716fdab35d52b55807757d/annotorious-0.6.4/css/theme-dark/DarkSprite.png -------------------------------------------------------------------------------- /annotorious-0.6.4/css/theme-dark/Dividor.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sweppner/labeld/8e35658310e855e263716fdab35d52b55807757d/annotorious-0.6.4/css/theme-dark/Dividor.png -------------------------------------------------------------------------------- /annotorious-0.6.4/css/theme-dark/Indicator-old.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sweppner/labeld/8e35658310e855e263716fdab35d52b55807757d/annotorious-0.6.4/css/theme-dark/Indicator-old.png -------------------------------------------------------------------------------- /annotorious-0.6.4/css/theme-dark/Indicator.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sweppner/labeld/8e35658310e855e263716fdab35d52b55807757d/annotorious-0.6.4/css/theme-dark/Indicator.png -------------------------------------------------------------------------------- /annotorious-0.6.4/css/theme-dark/annotorious-dark.css: -------------------------------------------------------------------------------- 1 | .annotorious-hint-msg { 2 | background-color:rgba(0,0,0,0.6); 3 | margin:4px; 4 | padding:8px 15px 8px 30px; 5 | font-family:'lucida grande',tahoma,verdana,arial,sans-serif; 6 | line-height:normal; 7 | font-size:12px; 8 | color:#fff; 9 | border-radius:4px; 10 | -moz-border-radius:4px; 11 | -webkit-border-radius:4px; 12 | -khtml-border-radius:4px; 13 | } 14 | 15 | .annotorious-hint-icon { 16 | position:absolute; 17 | top:6px; 18 | left:5px; 19 | background:url(feather_icon.png); 20 | background-repeat:no-repeat; 21 | width:19px; 22 | height:22px; 23 | margin:2px 4px 0 6px; 24 | } 25 | 26 | .annotorious-opacity-fade { 27 | -moz-transition-property:opacity; 28 | -moz-transition-duration:.5s; 29 | -moz-transition-delay:0; 30 | -webkit-transition-property:opacity; 31 | -webkit-transition-duration:.5s; 32 | -webkit-transition-delay:0; 33 | -o-transition-property:opacity; 34 | -o-transition-duration:.5s; 35 | -o-transition-delay:0; 36 | transition-property:opacity; 37 | transition-duration:.5s; 38 | transition-delay:0; 39 | } 40 | 41 | .annotorious-item-focus { 42 | opacity:1.0; 43 | } 44 | 45 | .annotorious-item-unfocus { 46 | opacity:0.4; 47 | } 48 | 49 | .annotorious-popup { 50 | position:absolute; 51 | top:0; 52 | left:0; 53 | width:220px; 54 | min-height:26px; 55 | margin-top:12px; 56 | background-color: #263238; 57 | /*border:1px solid #000;*/ 58 | outline:none; 59 | padding:5px; 60 | -moz-transition-property:opacity; 61 | -moz-transition-duration:.5s; 62 | -moz-transition-delay:0; 63 | -ms-transition-property:opacity; 64 | -ms-transition-duration:.5s; 65 | -ms-transition-delay:0; 66 | -webkit-transition-property:opacity; 67 | -webkit-transition-duration:.5s; 68 | -webkit-transition-delay:0; 69 | -o-transition-property:opacity; 70 | -o-transition-duration:.5s; 71 | -o-transition-delay:0; 72 | transition-property:opacity; 73 | transition-duration:.5s; 74 | transition-delay:0; 75 | -moz-border-radius:8px; 76 | -webkit-border-radius:8px; 77 | -khtml-border-radius:8px; 78 | border-radius:8px; 79 | /*-o-box-shadow:0 5px 5px rgba(0,0,0,0.7),inset 0 1px 1px rgba(255,255,255,0.25);*/ 80 | /*-ms-box-shadow:0 5px 5px rgba(0,0,0,0.7),inset 0 1px 1px rgba(255,255,255,0.25);*/ 81 | /*-moz-box-shadow:0 5px 5px rgba(0,0,0,0.7),inset 0 1px 1px rgba(255,255,255,0.25);*/ 82 | /*-webkit-box-shadow:0 5px 5px rgba(0,0,0,0.7),inset 0 1px 1px rgba(255,255,255,0.25);*/ 83 | /*box-shadow:0 5px 53px rgba(0,0,0,0.7),inset 0 1px 1px rgba(255,255,255,0.25);*/ 84 | } 85 | 86 | .annotorious-popup-text { 87 | display:block; 88 | padding:5px; 89 | font-family:Verdana,Arial; 90 | font-size:12px; 91 | color:#eee; 92 | text-shadow:none; 93 | line-height:150%; 94 | } 95 | 96 | .annotorious-popup-text a { 97 | text-decoration:underline; 98 | color:#eee; 99 | background-color:transparent; 100 | } 101 | 102 | .top-left:after, .annotorious-editor:after { 103 | content:url(Indicator.png); 104 | position:absolute; 105 | left:15px; 106 | top:-14px; 107 | height:18px; 108 | width:19px; 109 | display:block; 110 | } 111 | 112 | .top-right:after { 113 | content:url(Indicator.png); 114 | position:absolute; 115 | right:15px; 116 | top:-14px; 117 | height:18px; 118 | width:19px; 119 | display:block; 120 | } 121 | 122 | 123 | .annotorious-popup-buttons { 124 | float:right; 125 | height:26px; 126 | width:56px; 127 | display:block; 128 | white-space:nowrap; 129 | padding-left:4px; 130 | -moz-transition-property:opacity; 131 | -moz-transition-duration:1s; 132 | -moz-transition-delay:0; 133 | -webkit-transition-property:opacity; 134 | -webkit-transition-duration:1s; 135 | -webkit-transition-delay:0; 136 | -o-transition-property:opacity; 137 | -o-transition-duration:1s; 138 | -o-transition-delay:0; 139 | transition-property:opacity; 140 | transition-duration:1s; 141 | transition-delay:0; 142 | } 143 | 144 | .annotorious-popup-button { 145 | font-size:10px; 146 | text-decoration:none; 147 | display:inline-block; 148 | color:#000; 149 | font-weight:700; 150 | width:26px; 151 | height:26px; 152 | text-indent:100%; 153 | white-space:nowrap; 154 | overflow:hidden; 155 | -moz-transition-property:opacity; 156 | -moz-transition-duration:1s; 157 | -moz-transition-delay:0; 158 | -webkit-transition-property:opacity; 159 | -webkit-transition-duration:1s; 160 | -webkit-transition-delay:0; 161 | -ms-transition-property:opacity; 162 | -ms-transition-duration:1s; 163 | -ms-transition-delay:0; 164 | -o-transition-property:opacity; 165 | -o-transition-duration:1s; 166 | -o-transition-delay:0; 167 | transition-property:opacity; 168 | transition-duration:1s; 169 | transition-delay:0; 170 | } 171 | 172 | .annotorious-popup-button-delete:hover { 173 | background-color:transparent; 174 | background:url(DarkSprite.png) no-repeat; 175 | background-position:0 -40px; 176 | } 177 | 178 | .annotorious-popup-button-delete { 179 | background:url(DarkSprite.png) no-repeat; 180 | background-position:0 -8px; 181 | outline:none; 182 | } 183 | 184 | .annotorious-popup-button-edit { 185 | background:url(DarkSprite.png) no-repeat; 186 | background-position:0 -70px; 187 | outline:none; 188 | } 189 | 190 | .annotorious-popup-button-edit:hover { 191 | background-color:transparent; 192 | background:url(DarkSprite.png) no-repeat; 193 | background-position:0 -99px; 194 | } 195 | 196 | .annotorious-popup-field { 197 | margin:0px; 198 | padding:6px; 199 | font-family:'lucida grande',tahoma,verdana,arial,sans-serif; 200 | font-size:12px; 201 | } 202 | 203 | .annotorious-editor { 204 | position:absolute; 205 | top:0; 206 | left:0; 207 | margin-top:12px; 208 | background-color:#263238; 209 | color:#F2F2F2; 210 | /*border:1px solid #000;*/ 211 | border-radius:8px; 212 | -o-border-radius:8px; 213 | -moz-border-radius:8px; 214 | -webkit-border-radius:8px; 215 | -khtml-border-radius:8px; 216 | /*-o-box-shadow:0 5px 5px rgba(0,0,0,0.7),inset 0 1px 1px rgba(255,255,255,0.25);*/ 217 | /*-ms-box-shadow:0 5px 5px rgba(0,0,0,0.7),inset 0 1px 1px rgba(255,255,255,0.25);*/ 218 | /*-moz-box-shadow:0 5px 5px rgba(0,0,0,0.7),inset 0 1px 1px rgba(255,255,255,0.25);*/ 219 | /*-webkit-box-shadow:0 5px 5px rgba(0,0,0,0.7),inset 0 1px 1px rgba(255,255,255,0.25);*/ 220 | /*box-shadow:0 5px 53px rgba(0,0,0,0.7),inset 0 1px 1px rgba(255,255,255,0.25);*/ 221 | z-index:2; 222 | } 223 | 224 | .annotorious-editor-button-container { 225 | background:url(DarkSprite.png); 226 | background-position:0 -1px; 227 | margin:0 10px 10px; 228 | background-repeat:repeat-x; 229 | height:2px; 230 | display:block; 231 | } 232 | 233 | .annotorious-editor-text { 234 | border:none; 235 | background-color:#263238; 236 | line-height:150%; 237 | margin:10px 0px 4px 0px; 238 | padding:0px 10px; 239 | min-height:50px; 240 | width:100%; 241 | min-width:200px; 242 | outline:none; 243 | font-family:Verdana,Arial; 244 | font-weight:400; 245 | font-size:12px; 246 | color:#eee; 247 | text-shadow:none; 248 | overflow-y:auto; 249 | display:block; 250 | resize:none; 251 | } 252 | 253 | .annotorious-editor-text a:hover { 254 | color:#eee; 255 | background-color:transparent; 256 | } 257 | 258 | .annotorious-editor-button { 259 | float:right; 260 | line-height:normal; 261 | display:inline-block; 262 | text-align:center; 263 | text-decoration:none; 264 | font-family:Verdana,Arial; 265 | font-size:.625em; 266 | border:1px solid #000; 267 | color:#f2f2f2; 268 | padding-top:5px; 269 | padding-bottom:5px; 270 | margin:7px 2px 10px 0px; 271 | cursor:pointer; 272 | width:60px; 273 | -moz-box-shadow:inset 0 1px 1px rgba(255,255,255,0.25),0 1px 1px rgba(255,255,255,0.25); 274 | -webkit-box-shadow:inset 0 1px 1px rgba(255,255,255,0.25),0 1px 1px rgba(255,255,255,0.25); 275 | box-shadow:inset 0 1px 1px rgba(255,255,255,0.25),0 1px 1px rgba(255,255,255,0.25); 276 | -moz-border-radius:3px; 277 | -webkit-border-radius:3px; 278 | -khtml-border-radius:3px; 279 | border-radius:3px; 280 | opacity:1; 281 | } 282 | 283 | .annotorious-editor-button-save { 284 | margin-left:5px; 285 | background:#00BCD4; 286 | background:#00BCD4; 287 | /*filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFA52C',endColorstr='#FB7B28');*/ 288 | } 289 | 290 | .annotorious-editor-button-cancel { 291 | background:#37474F; 292 | background:#37474F; 293 | /*filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#656565',endColorstr='#2C2C2C');*/ 294 | } 295 | 296 | .annotorious-editor-button:hover { 297 | color:rgba(242,2423,242,1); 298 | text-shadow:0 0 6px rgba(242,242,242,0.6); 299 | -o-text-shadow:0 0 6px rgba(242,242,242,0.6); 300 | -moz-text-shadow:0 0 6px rgba(242,242,242,0.6); 301 | -webkit-text-shadow:0 0 6px rgba(242,242,242,0.6); 302 | } 303 | 304 | .annotorious-editor-button:active { 305 | -moz-box-shadow:inset 0 3px 3px rgba(0,0,0,0.7),0 1px 1px rgba(255,255,255,0.25); 306 | -webkit-box-shadow:inset 0 3px 3px rgba(0,0,0,0.7),0 1px 1px rgba(255,255,255,0.25); 307 | box-shadow:inset 0 3px 3px rgba(0,0,0,0.7),0 1px 1px rgba(255,255,255,0.25); 308 | } 309 | 310 | .annotorious-editor-field { 311 | margin:0px; 312 | padding:6px 0px; 313 | font-family:'lucida grande',tahoma,verdana,arial,sans-serif; 314 | font-size:12px; 315 | } 316 | 317 | /** OpenLayers module **/ 318 | .annotorious-ol-boxmarker-outer { 319 | border:1px solid #000; 320 | } 321 | 322 | .annotorious-ol-boxmarker-inner { 323 | border:1px solid #fff; 324 | -webkit-box-sizing: border-box; 325 | -moz-box-sizing: border-box; 326 | -ms-box-sizing: border-box; 327 | box-sizing: border-box; 328 | } 329 | 330 | .annotorious-ol-hint { 331 | line-height: normal; 332 | font-family:Arial, Verdana, Sans; 333 | font-size:16px; 334 | color:#fff; 335 | background-color:rgba(0,0,0,0.7); 336 | margin:0px; 337 | padding:9px; 338 | border-radius: 5px; 339 | -moz-border-radius: 5px; 340 | -webkit-border-radius: 5px; 341 | -khtml-border-radius: 5px; 342 | } 343 | -------------------------------------------------------------------------------- /annotorious-0.6.4/css/theme-dark/feather_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sweppner/labeld/8e35658310e855e263716fdab35d52b55807757d/annotorious-0.6.4/css/theme-dark/feather_icon.png -------------------------------------------------------------------------------- /annotorious-0.6.4/example/640px-Hallstatt.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sweppner/labeld/8e35658310e855e263716fdab35d52b55807757d/annotorious-0.6.4/example/640px-Hallstatt.jpg -------------------------------------------------------------------------------- /annotorious-0.6.4/example/example.css: -------------------------------------------------------------------------------- 1 | html, body { 2 | background-color:#e8e8e8; 3 | min-height:100%; 4 | padding:0; 5 | margin:0; 6 | } 7 | 8 | .column { 9 | width:80%; 10 | margin:0 auto; 11 | padding:10px 20px; 12 | background-color:#fff; 13 | height:100%; 14 | } 15 | 16 | button { 17 | padding:10px 25px; 18 | font-size:16px; 19 | } 20 | -------------------------------------------------------------------------------- /annotorious-0.6.4/example/example.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Annotorious Example Page 4 | 5 | 6 | 7 | 8 | 9 | 47 | 48 | 49 |
50 |

Annotorious Demo Page

51 |

52 | This is a simple demo page for Annotorious. Hover the mouse over the 53 | image to get started. Use the source code of this example as a guide 54 | when annotation-enabling your own pages! 55 |

56 | 57 |

Demo Image

58 |
59 | 60 |

61 | Hallstatt, Austria. By Nick Csakany, 2007. Public Domain. Source: 62 | Wikimedia 63 | Commons 64 |

65 |
66 | 67 |

68 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut varius 69 | diam posuere quam molestie vestibulum. Vestibulum non volutpat elit. Integer 70 | vitae felis eget magna rutrum sagittis. Nulla facilisi. Praesent a consectetur 71 | velit. Cras eget nibh est, eu imperdiet mauris. Nulla quis justo urna. Sed eu 72 | rutrum mauris. Integer aliquet nulla sit amet ante mollis pellentesque. 73 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut varius 74 | diam posuere quam molestie vestibulum. Vestibulum non volutpat elit. Integer 75 | vitae felis eget magna rutrum sagittis. Nulla facilisi. Praesent a consectetur 76 | velit. Cras eget nibh est, eu imperdiet mauris. Nulla quis justo urna. Sed eu 77 | rutrum mauris. Integer aliquet nulla sit amet ante mollis pellentesque. 78 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut varius 79 | diam posuere quam molestie vestibulum. Vestibulum non volutpat elit. Integer 80 | vitae felis eget magna rutrum sagittis. Nulla facilisi. Praesent a consectetur 81 | velit. Cras eget nibh est, eu imperdiet mauris. Nulla quis justo urna. Sed eu 82 | rutrum mauris. Integer aliquet nulla sit amet ante mollis pellentesque. 83 |

84 | 85 |

Getting Started

86 | 87 |

To set up Annotorious on a Web page, add this code to your page head:

88 | 89 | 
<link type="text/css" rel="stylesheet" href="css/annotorious.css" />
 90 | <script type="text/javascript" src="annotorious.min.js"></script>
91 | 92 |

Specify which images should be annotatable. There are two ways to do this:

93 | 94 |

Option 1: the annotatable CSS class

95 |

96 | Add a CSS class called annotatable. On page load, Annotorious will 97 | automatically scan your page for images with this class, and make them annotatable. 98 | I'd always recommend using this approach, unless your page loads images dynamically, after 99 | the page has loaded. 100 | Example: 101 |

102 | 103 | 
<img src="example.jpg" class="annotatable" />
104 | 105 |

Option 2: Using JavaScript

106 |

107 | Use the Annotorious JavaScript API to make images annotatable 'manually'. 108 | Example: 109 |

110 | 111 | 
<script>
112 |   function init() {
113 |     anno.makeAnnotatable(document.getElementById('myImage'));
114 |   }
115 | </script>
116 | ...        
117 | <body onload="init();">
118 |   <img src="example.jpg" id="myImage" />
119 | </body>
120 | 121 | 122 |

And Next?

123 |

124 | Once you got Annotorious working, you will likely want to integrate it 125 | more deeply with your Website: control it through your own JavaScript, 126 | listen to annotation create/update/delete events, store annotations on 127 | a server, etc. Visit 128 | the Wiki to learn more about Annotorious' JavaScript 129 | API, how to use plugins, or program your own extensions. 130 |

131 | 132 |

Hot-Linking to the Latest Annotorious Build

133 |

134 | Instead of hosting the Annotorious JS & CSS files yourself, you may also 135 | hot-link to the latest versions on the Annotorious site: 136 |

137 | 138 |

139 | http://annotorious.github.com/latest/annotorious.min.js
140 | http://annotorious.github.com/latest/annotorious.css 141 |

142 |
143 | 144 | 145 | -------------------------------------------------------------------------------- /annotorious-0.6.4/example/highlight.js/LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2006, Ivan Sagalaev 2 | All rights reserved. 3 | Redistribution and use in source and binary forms, with or without 4 | modification, are permitted provided that the following conditions are met: 5 | 6 | * Redistributions of source code must retain the above copyright 7 | notice, this list of conditions and the following disclaimer. 8 | * Redistributions in binary form must reproduce the above copyright 9 | notice, this list of conditions and the following disclaimer in the 10 | documentation and/or other materials provided with the distribution. 11 | * Neither the name of highlight.js nor the names of its contributors 12 | may be used to endorse or promote products derived from this software 13 | without specific prior written permission. 14 | 15 | THIS SOFTWARE IS PROVIDED BY THE REGENTS AND CONTRIBUTORS ``AS IS'' AND ANY 16 | EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED 17 | WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE 18 | DISCLAIMED. IN NO EVENT SHALL THE REGENTS AND CONTRIBUTORS BE LIABLE FOR ANY 19 | DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES 20 | (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; 21 | LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND 22 | ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT 23 | (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS 24 | SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. 25 | -------------------------------------------------------------------------------- /annotorious-0.6.4/example/highlight.js/highlight.pack.js: -------------------------------------------------------------------------------- 1 | var hljs=new function(){function l(o){return o.replace(/&/gm,"&").replace(//gm,">")}function b(p){for(var o=p.firstChild;o;o=o.nextSibling){if(o.nodeName=="CODE"){return o}if(!(o.nodeType==3&&o.nodeValue.match(/\s+/))){break}}}function h(p,o){return Array.prototype.map.call(p.childNodes,function(q){if(q.nodeType==3){return o?q.nodeValue.replace(/\n/g,""):q.nodeValue}if(q.nodeName=="BR"){return"\n"}return h(q,o)}).join("")}function a(q){var p=(q.className+" "+q.parentNode.className).split(/\s+/);p=p.map(function(r){return r.replace(/^language-/,"")});for(var o=0;o"}while(x.length||v.length){var u=t().splice(0,1)[0];y+=l(w.substr(p,u.offset-p));p=u.offset;if(u.event=="start"){y+=s(u.node);r.push(u.node)}else{if(u.event=="stop"){var o,q=r.length;do{q--;o=r[q];y+=("")}while(o!=u.node);r.splice(q,1);while(q'+L[0]+""}else{r+=L[0]}N=A.lR.lastIndex;L=A.lR.exec(K)}return r+K.substr(N)}function z(){if(A.sL&&!e[A.sL]){return l(w)}var r=A.sL?d(A.sL,w):g(w);if(A.r>0){v+=r.keyword_count;B+=r.r}return''+r.value+""}function J(){return A.sL!==undefined?z():G()}function I(L,r){var K=L.cN?'':"";if(L.rB){x+=K;w=""}else{if(L.eB){x+=l(r)+K;w=""}else{x+=K;w=r}}A=Object.create(L,{parent:{value:A}});B+=L.r}function C(K,r){w+=K;if(r===undefined){x+=J();return 0}var L=o(r,A);if(L){x+=J();I(L,r);return L.rB?0:r.length}var M=s(A,r);if(M){if(!(M.rE||M.eE)){w+=r}x+=J();do{if(A.cN){x+=""}A=A.parent}while(A!=M.parent);if(M.eE){x+=l(r)}w="";if(M.starts){I(M.starts,"")}return M.rE?0:r.length}if(t(r,A)){throw"Illegal"}w+=r;return r.length||1}var F=e[D];f(F);var A=F;var w="";var B=0;var v=0;var x="";try{var u,q,p=0;while(true){A.t.lastIndex=p;u=A.t.exec(E);if(!u){break}q=C(E.substr(p,u.index-p),u[0]);p=u.index+q}C(E.substr(p));return{r:B,keyword_count:v,value:x,language:D}}catch(H){if(H=="Illegal"){return{r:0,keyword_count:0,value:l(E)}}else{throw H}}}function g(s){var o={keyword_count:0,r:0,value:l(s)};var q=o;for(var p in e){if(!e.hasOwnProperty(p)){continue}var r=d(p,s);r.language=p;if(r.keyword_count+r.r>q.keyword_count+q.r){q=r}if(r.keyword_count+r.r>o.keyword_count+o.r){q=o;o=r}}if(q.language){o.second_best=q}return o}function i(q,p,o){if(p){q=q.replace(/^((<[^>]+>|\t)+)/gm,function(r,v,u,t){return v.replace(/\t/g,p)})}if(o){q=q.replace(/\n/g,"
")}return q}function m(r,u,p){var v=h(r,p);var t=a(r);if(t=="no-highlight"){return}var w=t?d(t,v):g(v);t=w.language;var o=c(r);if(o.length){var q=document.createElement("pre");q.innerHTML=w.value;w.value=j(o,c(q),v)}w.value=i(w.value,u,p);var s=r.className;if(!s.match("(\\s|^)(language-)?"+t+"(\\s|$)")){s=s?(s+" "+t):t}r.innerHTML=w.value;r.className=s;r.result={language:t,kw:w.keyword_count,re:w.r};if(w.second_best){r.second_best={language:w.second_best.language,kw:w.second_best.keyword_count,re:w.second_best.r}}}function n(){if(n.called){return}n.called=true;Array.prototype.map.call(document.getElementsByTagName("pre"),b).filter(Boolean).forEach(function(o){m(o,hljs.tabReplace)})}function k(){window.addEventListener("DOMContentLoaded",n,false);window.addEventListener("load",n,false)}var e={};this.LANGUAGES=e;this.highlight=d;this.highlightAuto=g;this.fixMarkup=i;this.highlightBlock=m;this.initHighlighting=n;this.initHighlightingOnLoad=k;this.IR="[a-zA-Z][a-zA-Z0-9_]*";this.UIR="[a-zA-Z_][a-zA-Z0-9_]*";this.NR="\\b\\d+(\\.\\d+)?";this.CNR="(\\b0[xX][a-fA-F0-9]+|(\\b\\d+(\\.\\d*)?|\\.\\d+)([eE][-+]?\\d+)?)";this.BNR="\\b(0b[01]+)";this.RSR="!|!=|!==|%|%=|&|&&|&=|\\*|\\*=|\\+|\\+=|,|\\.|-|-=|/|/=|:|;|<|<<|<<=|<=|=|==|===|>|>=|>>|>>=|>>>|>>>=|\\?|\\[|\\{|\\(|\\^|\\^=|\\||\\|=|\\|\\||~";this.BE={b:"\\\\[\\s\\S]",r:0};this.ASM={cN:"string",b:"'",e:"'",i:"\\n",c:[this.BE],r:0};this.QSM={cN:"string",b:'"',e:'"',i:"\\n",c:[this.BE],r:0};this.CLCM={cN:"comment",b:"//",e:"$"};this.CBLCLM={cN:"comment",b:"/\\*",e:"\\*/"};this.HCM={cN:"comment",b:"#",e:"$"};this.NM={cN:"number",b:this.NR,r:0};this.CNM={cN:"number",b:this.CNR,r:0};this.BNM={cN:"number",b:this.BNR,r:0};this.inherit=function(q,r){var o={};for(var p in q){o[p]=q[p]}if(r){for(var p in r){o[p]=r[p]}}return o}}();hljs.LANGUAGES.javascript=function(a){return{k:{keyword:"in if for while finally var new function do return void else break catch instanceof with throw case default try this switch continue typeof delete let yield const",literal:"true false null undefined NaN Infinity"},c:[a.ASM,a.QSM,a.CLCM,a.CBLCLM,a.CNM,{b:"("+a.RSR+"|\\b(case|return|throw)\\b)\\s*",k:"return throw case",c:[a.CLCM,a.CBLCLM,{cN:"regexp",b:"/",e:"/[gim]*",i:"\\n",c:[{b:"\\\\/"}]},{b:"<",e:">;",sL:"xml"}],r:0},{cN:"function",bWK:true,e:"{",k:"function",c:[{cN:"title",b:"[A-Za-z$_][0-9A-Za-z$_]*"},{cN:"params",b:"\\(",e:"\\)",c:[a.CLCM,a.CBLCLM],i:"[\"'\\(]"}],i:"\\[|%"}]}}(hljs);hljs.LANGUAGES.xml=function(a){var c="[A-Za-z0-9\\._:-]+";var b={eW:true,c:[{cN:"attribute",b:c,r:0},{b:'="',rB:true,e:'"',c:[{cN:"value",b:'"',eW:true}]},{b:"='",rB:true,e:"'",c:[{cN:"value",b:"'",eW:true}]},{b:"=",c:[{cN:"value",b:"[^\\s/>]+"}]}]};return{cI:true,c:[{cN:"pi",b:"<\\?",e:"\\?>",r:10},{cN:"doctype",b:"",r:10,c:[{b:"\\[",e:"\\]"}]},{cN:"comment",b:"",r:10},{cN:"cdata",b:"<\\!\\[CDATA\\[",e:"\\]\\]>",r:10},{cN:"tag",b:"|$)",e:">",k:{title:"style"},c:[b],starts:{e:"",rE:true,sL:"css"}},{cN:"tag",b:"|$)",e:">",k:{title:"script"},c:[b],starts:{e:"<\/script>",rE:true,sL:"javascript"}},{b:"<%",e:"%>",sL:"vbscript"},{cN:"tag",b:"",c:[{cN:"title",b:"[^ />]+"},b]}]}}(hljs); -------------------------------------------------------------------------------- /annotorious-0.6.4/example/highlight.js/zenburn.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | Zenburn style from voldmar.ru (c) Vladimir Epifanov 4 | based on dark.css by Ivan Sagalaev 5 | 6 | */ 7 | 8 | pre code { 9 | display: block; padding: 0.5em; 10 | background: #3F3F3F; 11 | color: #DCDCDC; 12 | } 13 | 14 | pre .keyword, 15 | pre .tag, 16 | pre .css .class, 17 | pre .css .id, 18 | pre .lisp .title, 19 | pre .nginx .title, 20 | pre .request, 21 | pre .status, 22 | pre .clojure .attribute { 23 | color: #E3CEAB; 24 | } 25 | 26 | pre .django .template_tag, 27 | pre .django .variable, 28 | pre .django .filter .argument { 29 | color: #DCDCDC; 30 | } 31 | 32 | pre .number, 33 | pre .date { 34 | color: #8CD0D3; 35 | } 36 | 37 | pre .dos .envvar, 38 | pre .dos .stream, 39 | pre .variable, 40 | pre .apache .sqbracket { 41 | color: #EFDCBC; 42 | } 43 | 44 | pre .dos .flow, 45 | pre .diff .change, 46 | pre .python .exception, 47 | pre .python .built_in, 48 | pre .literal, 49 | pre .tex .special { 50 | color: #EFEFAF; 51 | } 52 | 53 | pre .diff .chunk, 54 | pre .subst { 55 | color: #8F8F8F; 56 | } 57 | 58 | pre .dos .keyword, 59 | pre .python .decorator, 60 | pre .title, 61 | pre .haskell .type, 62 | pre .diff .header, 63 | pre .ruby .class .parent, 64 | pre .apache .tag, 65 | pre .nginx .built_in, 66 | pre .tex .command, 67 | pre .prompt { 68 | color: #efef8f; 69 | } 70 | 71 | pre .dos .winutils, 72 | pre .ruby .symbol, 73 | pre .ruby .symbol .string, 74 | pre .ruby .string { 75 | color: #DCA3A3; 76 | } 77 | 78 | pre .diff .deletion, 79 | pre .string, 80 | pre .tag .value, 81 | pre .preprocessor, 82 | pre .built_in, 83 | pre .sql .aggregate, 84 | pre .javadoc, 85 | pre .smalltalk .class, 86 | pre .smalltalk .localvars, 87 | pre .smalltalk .array, 88 | pre .css .rules .value, 89 | pre .attr_selector, 90 | pre .pseudo, 91 | pre .apache .cbracket, 92 | pre .tex .formula { 93 | color: #CC9393; 94 | } 95 | 96 | pre .shebang, 97 | pre .diff .addition, 98 | pre .comment, 99 | pre .java .annotation, 100 | pre .template_comment, 101 | pre .pi, 102 | pre .doctype { 103 | color: #7F9F7F; 104 | } 105 | 106 | pre .coffeescript .javascript, 107 | pre .javascript .xml, 108 | pre .tex .formula, 109 | pre .xml .javascript, 110 | pre .xml .vbscript, 111 | pre .xml .css, 112 | pre .xml .cdata { 113 | opacity: 0.5; 114 | } 115 | 116 | -------------------------------------------------------------------------------- /images/LabelD-Placeholder.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sweppner/labeld/8e35658310e855e263716fdab35d52b55807757d/images/LabelD-Placeholder.png -------------------------------------------------------------------------------- /images/android-desktop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sweppner/labeld/8e35658310e855e263716fdab35d52b55807757d/images/android-desktop.png -------------------------------------------------------------------------------- /images/dog.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sweppner/labeld/8e35658310e855e263716fdab35d52b55807757d/images/dog.png -------------------------------------------------------------------------------- /images/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sweppner/labeld/8e35658310e855e263716fdab35d52b55807757d/images/favicon.png -------------------------------------------------------------------------------- /images/flat_user.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sweppner/labeld/8e35658310e855e263716fdab35d52b55807757d/images/flat_user.png -------------------------------------------------------------------------------- /images/ios-desktop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sweppner/labeld/8e35658310e855e263716fdab35d52b55807757d/images/ios-desktop.png -------------------------------------------------------------------------------- /images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sweppner/labeld/8e35658310e855e263716fdab35d52b55807757d/images/logo.png -------------------------------------------------------------------------------- /images/person-flat.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sweppner/labeld/8e35658310e855e263716fdab35d52b55807757d/images/person-flat.png -------------------------------------------------------------------------------- /images/user.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sweppner/labeld/8e35658310e855e263716fdab35d52b55807757d/images/user.jpg -------------------------------------------------------------------------------- /js/annotation_queue.js: -------------------------------------------------------------------------------- 1 | var AnnotationQueue = {}; 2 | 3 | AnnotationQueue.prev_annotations = []; 4 | AnnotationQueue.current_annotation = {}; 5 | AnnotationQueue.next_annotations = []; 6 | 7 | AnnotationQueue.addNewAnnotation = function(new_annotation){ 8 | 9 | 10 | }; 11 | 12 | AnnotationQueue.getLastAnnotation = function(new_annotation){ 13 | 14 | }; 15 | 16 | AnnotationQueue.getNextAnnotation = function(new_annotation){ 17 | 18 | }; -------------------------------------------------------------------------------- /js/app.js: -------------------------------------------------------------------------------- 1 | var app = angular.module('LabeldApp', ['ngRoute']); 2 | var local_loc = "/node/rest/data" 3 | var annotation_state = {}; 4 | annotation_state["prev_annotations"] = []; 5 | annotation_state["next_annotations"] = []; 6 | annotation_state["current_annotation"] = {}; 7 | -------------------------------------------------------------------------------- /js/controllers/AnnotationController.js: -------------------------------------------------------------------------------- 1 | // var annotation_image_id = "#annotation_image" 2 | 3 | anno.setProperties({ 4 | outline: 'red' 5 | }); 6 | $(".previous-button").hide(); 7 | 8 | app.controller('AnnotationController', ['$scope', function($scope) { 9 | console.log(annotation_state); 10 | 11 | // console.log(annotation_state); 12 | $scope.nextImage = function(){ 13 | console.log(annotation_state); 14 | 15 | // //if there arent any previous images, hide the previous button 16 | // if(annotation_state.prev_annotations.length > 0) 17 | // $(".previous-button").show(); 18 | // else 19 | // $(".previous-button").hide(); 20 | 21 | // If there are any objects in next_annotations, ie if the user has gone back in the queue, pull the most recent 22 | if(firstImage){ 23 | hljs.initHighlightingOnLoad(); 24 | 25 | if(annotation_state.prev_annotations.length > 0){ 26 | $("#annotation_image").attr("src", annotation_state.current_annotation.location); 27 | } 28 | var child = $("#annotation_image"); 29 | // var height = $(window).height() - 125; 30 | // var width = $(window).width() - 391; 31 | child.height("inherit");//height="42" width="42" 32 | child.width("inherit"); 33 | 34 | anno.makeAnnotatable(document.getElementById('annotation_image')); 35 | 36 | if(annotation_state.prev_annotations.length > 0){ 37 | if(previous.annotations.length > 0) { 38 | for (var annotation_index in annotation_state.current_annotation.annotations) { 39 | var annotation = annotation_state.current_annotation.annotations[annotation_index]; 40 | anno.addAnnotation(annotation); 41 | } 42 | } 43 | } 44 | firstImage = false; 45 | } 46 | 47 | 48 | if(annotation_state.next_annotations.length > 0){ 49 | 50 | // set initial variables 51 | var current_annotation_object = {}; 52 | var next = annotation_state.next_annotations.pop(); 53 | var parent = $("#annotation_image").parent(); 54 | var current = $("#annotation_image"); 55 | 56 | // save current annotation values and remove annotorious from the image 57 | current_annotation_object["location"] = current.attr("src"); 58 | current_annotation_object["annotations"] = anno.getAnnotations(); 59 | console.log(anno.getAnnotations()); 60 | anno.removeAll(); 61 | current_annotation_object["size"] = { 62 | "height": current.height(), 63 | "width": current.width() 64 | }; 65 | annotation_state.current_annotation = current_annotation_object; 66 | 67 | // push the current annotation object to the array of previously seen annotation objects 68 | annotation_state.prev_annotations.push(current_annotation_object); 69 | 70 | // create a new child image object and set its values 71 | //var child = $(""); 72 | //$("#image").remove(); 73 | var child = $("#annotation_image") 74 | // var height = $( window ).height() - 125; 75 | // var width = $(window).width() - 125; 76 | child.attr("src", next.location); 77 | child.attr("id", "annotation_image"); 78 | child.height("inherit");//height="42" width="42" 79 | child.width("inherit"); 80 | 81 | // add the child image object to the parent on the page 82 | // parent.append(child); 83 | 84 | // Add annotorious to the new child image element 85 | // anno.makeAnnotatable(document.getElementById('image')); 86 | 87 | //add the given anno 88 | if(next.annotations.length > 0){ 89 | for(var annotation_index in next.annotations){ 90 | var annotation = next.annotations[annotation_index]; 91 | anno.addAnnotation(annotation); 92 | } 93 | } 94 | }else { 95 | var keyword = 'dogs'; 96 | if($("#search").val()!="") 97 | keyword = $("#search").val(); 98 | 99 | var query_link = "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?"; 100 | var query_object = { 101 | tags: keyword, 102 | tagmode: "any", 103 | format: "json" 104 | }; 105 | var query_callback = function (data) { 106 | 107 | var image_annotation_object = {}; 108 | var rnd = Math.floor(Math.random() * data.items.length); 109 | var image_src = data.items[rnd]['media']['m'].replace("_m", "_b"); 110 | var current_annotation_object = {}; 111 | // return image_src; 112 | // $('body').css('background-image', "url('" + image_src + "')"); 113 | var parent = $("#annotation_image").parent(); 114 | var current = $("#annotation_image"); 115 | current_annotation_object["location"] = current.attr("src"); 116 | current_annotation_object["annotations"] = anno.getAnnotations(); 117 | // console.log(anno.getAnnotations()); 118 | anno.removeAll(); 119 | current_annotation_object["size"] = { 120 | "height": current.height(), 121 | "width": current.width() 122 | }; 123 | annotation_state.current_annotation = current_annotation_object; 124 | annotation_state.prev_annotations.push(current_annotation_object); 125 | 126 | // var child = $(""); 127 | // $("#image").remove(); 128 | var child = $("#annotation_image"); 129 | // var height = $(window).height() - 125; 130 | // var width = $(window).width() - 125; 131 | 132 | child.attr("src", image_src); 133 | child.attr("id", "annotation_image"); 134 | child.attr("class", "annotatable"); 135 | child.height("inherit");//height="42" width="42" 136 | child.width("inherit"); 137 | // parent.append(child); 138 | // anno.makeAnnotatable(document.getElementById('image')); 139 | }; 140 | if(!$("#useFlickr").is(':checked')) { 141 | 142 | var image_src = local_loc+"/"+local_list.pop(); 143 | 144 | var current_annotation_object = {}; 145 | // return image_src; 146 | // $('body').css('background-image', "url('" + image_src + "')"); 147 | var parent = $("#annotation_image").parent(); 148 | var current = $("#annotation_image"); 149 | current_annotation_object["location"] = current.attr("src"); 150 | current_annotation_object["annotations"] = anno.getAnnotations(); 151 | console.log(anno.getAnnotations()); 152 | anno.removeAll(); 153 | current_annotation_object["size"] = { 154 | "height": current.height(), 155 | "width": current.width() 156 | }; 157 | annotation_state.current_annotation = current_annotation_object; 158 | annotation_state.prev_annotations.push(current_annotation_object); 159 | 160 | // var child = $(""); 161 | // $("#image").remove(); 162 | var child = $("#annotation_image"); 163 | // var height = $(window).height() - 125; 164 | // var width = $(window).width() - 125; 165 | 166 | child.attr("src", image_src); 167 | child.attr("id", "annotation_image"); 168 | child.attr("class", "annotatable"); 169 | child.height("inherit");//height="42" width="42" 170 | child.width("inherit"); 171 | // parent.append(child); 172 | }else{ 173 | $(document).ready(function () { 174 | $.getJSON(query_link, query_object, query_callback); 175 | }); 176 | } 177 | } 178 | }; 179 | 180 | $scope.prevImage = function(){ 181 | console.log(annotation_state); 182 | if(annotation_state.prev_annotations.length>0){ 183 | var current_annotation_object = {}; 184 | var previous = annotation_state.prev_annotations.pop(); 185 | var parent = $("#annotation_image").parent(); 186 | var current = $("#annotation_image"); 187 | current_annotation_object["location"] = current.attr("src"); 188 | current_annotation_object["annotations"] = anno.getAnnotations(); 189 | console.log(anno.getAnnotations()); 190 | anno.removeAll(); 191 | current_annotation_object["size"] = { 192 | "height": current.height(), 193 | "width": current.width() 194 | }; 195 | annotation_state.current_annotation = current_annotation_object; 196 | annotation_state.next_annotations.push(current_annotation_object); 197 | 198 | var child = $("#annotation_image"); 199 | // var child = $(""); 200 | // $("#image").remove(); 201 | // var height = $( window ).height() - 125; 202 | // var width = $(window).width() - 125; 203 | 204 | child.attr("src", previous.location); 205 | child.attr("id", "annotation_image"); 206 | child.height("inherit");//height="42" width="42" 207 | child.width("inherit"); 208 | // parent.append(child); 209 | // anno.makeAnnotatable(document.getElementById('image')); 210 | if(previous.annotations.length > 0) { 211 | for (var annotation_index in previous.annotations) { 212 | var annotation = previous.annotations[annotation_index]; 213 | anno.addAnnotation(annotation); 214 | } 215 | } 216 | 217 | console.log("Previous queue length : " + annotation_state.prev_annotations.length); 218 | console.log("Next queue length : " + annotation_state.next_annotations.length); 219 | } 220 | 221 | 222 | }; 223 | 224 | var handler = function(e){ 225 | if(e.keyCode === 39) { 226 | // console.log('right arrow'); 227 | $scope.nextImage(); 228 | // $scope.doSomething(); 229 | }else if (e.keyCode == 37){ 230 | // console.log('left arrow'); 231 | $scope.prevImage(); 232 | } 233 | }; 234 | 235 | var $doc = angular.element(document); 236 | 237 | $doc.on('keydown', handler); 238 | $scope.$on('$destroy',function(){ 239 | $doc.off('keydown', handler); 240 | }); 241 | 242 | }]); -------------------------------------------------------------------------------- /js/controllers/ClassifyController-Backup.js: -------------------------------------------------------------------------------- 1 | var prev_annotations = []; 2 | var next_annotations = []; 3 | var current_annotation = {}; 4 | 5 | anno.setProperties({ 6 | outline: 'red' 7 | }); 8 | $(".previous-button").hide(); 9 | 10 | app.controller('ClassifyController', ['$scope', function($scope) { 11 | 12 | $scope.nextImage = function(){ 13 | 14 | //if there arent any previous images, hide the previous button 15 | if(prev_annotations.length > 0) 16 | $(".previous-button").show(); 17 | else 18 | $(".previous-button").hide(); 19 | 20 | // If there are any objects in next_annotations, ie if the user has gone back in the queue, pull the most recent 21 | if(next_annotations.length > 0){ 22 | 23 | // set initial variables 24 | var current_annotation_object = {}; 25 | var next = next_annotations.pop(); 26 | var parent = $("#image").parent(); 27 | var current = $("#image"); 28 | 29 | // save current annotation values and remove annotorious from the image 30 | current_annotation_object["location"] = current.attr("src"); 31 | current_annotation_object["annotations"] = anno.getAnnotations(); 32 | console.log(anno.getAnnotations()); 33 | anno.removeAll(); 34 | current_annotation_object["size"] = { 35 | "height": current.attr("height"), 36 | "width": current.attr("width") 37 | }; 38 | current_annotation = current_annotation_object; 39 | 40 | // push the current annotation object to the array of previously seen annotation objects 41 | prev_annotations.push(current_annotation_object); 42 | 43 | // create a new child image object and set its values 44 | //var child = $(""); 45 | //$("#image").remove(); 46 | var child = $("#image") 47 | var height = $( window ).height() - 125; 48 | var width = 1048; 49 | child.attr("src", next.location); 50 | child.attr("id", "image"); 51 | child.attr("height", height);//height="42" width="42" 52 | child.attr("width", width); 53 | 54 | // add the child image object to the parent on the page 55 | parent.append(child); 56 | 57 | // Add annotorious to the new child image element 58 | // anno.makeAnnotatable(document.getElementById('image')); 59 | 60 | //add the given anno 61 | if(next.annotations.length > 0){ 62 | for(var annotation_index in next.annotations){ 63 | var annotation = next.annotations[annotation_index]; 64 | anno.addAnnotation(annotation); 65 | } 66 | } 67 | }else { 68 | var keyword = "dogs"; 69 | $(document).ready(function () { 70 | 71 | $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?", 72 | { 73 | tags: keyword, 74 | tagmode: "any", 75 | format: "json" 76 | }, 77 | function (data) { 78 | var image_annotation_object = {}; 79 | var rnd = Math.floor(Math.random() * data.items.length); 80 | var image_src = data.items[rnd]['media']['m'].replace("_m", "_b"); 81 | var current_annotation_object = {}; 82 | // return image_src; 83 | // $('body').css('background-image', "url('" + image_src + "')"); 84 | var parent = $("#image").parent(); 85 | var current = $("#image"); 86 | current_annotation_object["location"] = current.attr("src"); 87 | current_annotation_object["annotations"] = anno.getAnnotations(); 88 | console.log(anno.getAnnotations()); 89 | anno.removeAll(); 90 | current_annotation_object["size"] = { 91 | "height": current.attr("height"), 92 | "width": current.attr("width") 93 | }; 94 | current_annotation = current_annotation_object; 95 | prev_annotations.push(current_annotation_object); 96 | 97 | // var child = $(""); 98 | // $("#image").remove(); 99 | var child = $("#image"); 100 | var height = $(window).height() - 125; 101 | var width = 1048; 102 | 103 | child.attr("src", image_src); 104 | child.attr("id", "image"); 105 | child.attr("class", "annotatable"); 106 | child.attr("height", height);//height="42" width="42" 107 | child.attr("width", width); 108 | parent.append(child); 109 | // anno.makeAnnotatable(document.getElementById('image')); 110 | }); 111 | 112 | }); 113 | } 114 | }; 115 | 116 | $scope.prevImage = function(){ 117 | 118 | 119 | var current_annotation_object = {}; 120 | var previous = prev_annotations.pop(); 121 | var parent = $("#image").parent(); 122 | var current = $("#image"); 123 | current_annotation_object["location"] = current.attr("src"); 124 | current_annotation_object["annotations"] = anno.getAnnotations(); 125 | console.log(anno.getAnnotations()); 126 | anno.removeAll(); 127 | current_annotation_object["size"] = { 128 | "height": current.attr("height"), 129 | "width": current.attr("width") 130 | }; 131 | current_annotation = current_annotation_object; 132 | next_annotations.push(current_annotation_object); 133 | 134 | var child = $("#image"); 135 | // var child = $(""); 136 | // $("#image").remove(); 137 | var height = $( window ).height() - 125; 138 | var width = 1048; 139 | 140 | child.attr("src", previous.location); 141 | child.attr("id", "image"); 142 | child.attr("height", height);//height="42" width="42" 143 | child.attr("width", width); 144 | parent.append(child); 145 | // anno.makeAnnotatable(document.getElementById('image')); 146 | if(previous.annotations.length > 0) { 147 | for (var annotation_index in previous.annotations) { 148 | var annotation = previous.annotations[annotation_index]; 149 | anno.addAnnotation(annotation); 150 | } 151 | } 152 | 153 | console.log("Previous queue length : " + prev_annotations.length); 154 | console.log("Next queue length : " + next_annotations.length); 155 | 156 | }; 157 | 158 | var handler = function(e){ 159 | if(e.keyCode === 39) { 160 | console.log('right arrow'); 161 | $scope.nextImage(); 162 | // $scope.doSomething(); 163 | }else if (e.keyCode == 37){ 164 | console.log('left arrow'); 165 | $scope.prevImage(); 166 | } 167 | }; 168 | 169 | var $doc = angular.element(document); 170 | 171 | $doc.on('keydown', handler); 172 | $scope.$on('$destroy',function(){ 173 | $doc.off('keydown', handler); 174 | }); 175 | 176 | }]); -------------------------------------------------------------------------------- /js/controllers/ClassifyController.js: -------------------------------------------------------------------------------- 1 | anno.setProperties({ 2 | outline: 'red' 3 | }); 4 | $(".previous-button").hide(); 5 | 6 | app.controller('ClassifyController', ['$scope', function($scope) { 7 | 8 | $scope.nextImage = function(){ 9 | 10 | // //if there arent any previous images, hide the previous button 11 | // if(annotation_state.prev_annotations.length > 0) 12 | // $(".previous-button").show(); 13 | // else 14 | // $(".previous-button").hide(); 15 | 16 | // If there are any objects in next_annotations, ie if the user has gone back in the queue, pull the most recent 17 | if(firstImage){ 18 | hljs.initHighlightingOnLoad(); 19 | 20 | if(annotation_state.prev_annotations.length > 0){ 21 | $("#image").attr("src", annotation_state.current_annotation.location); 22 | } 23 | var child = $("#image"); 24 | var height = $(window).height() - 125; 25 | var width = $(window).width() - 391; 26 | child.height("inherit");//height="42" width="42" 27 | child.width("inherit"); 28 | 29 | anno.makeAnnotatable(document.getElementById('image')); 30 | 31 | if(annotation_state.prev_annotations.length > 0){ 32 | if(previous.annotations.length > 0) { 33 | for (var annotation_index in annotation_state.current_annotation.annotations) { 34 | var annotation = annotation_state.current_annotation.annotations[annotation_index]; 35 | anno.addAnnotation(annotation); 36 | } 37 | } 38 | } 39 | firstImage = false; 40 | } 41 | 42 | 43 | if(annotation_state.next_annotations.length > 0){ 44 | 45 | // set initial variables 46 | var current_annotation_object = {}; 47 | var next = annotation_state.next_annotations.pop(); 48 | var parent = $("#image").parent(); 49 | var current = $("#image"); 50 | 51 | // save current annotation values and remove annotorious from the image 52 | current_annotation_object["location"] = current.attr("src"); 53 | current_annotation_object["annotations"] = anno.getAnnotations(); 54 | console.log(anno.getAnnotations()); 55 | anno.removeAll(); 56 | current_annotation_object["size"] = { 57 | "height": current.height(), 58 | "width": current.width() 59 | }; 60 | annotation_state.current_annotation = current_annotation_object; 61 | 62 | // push the current annotation object to the array of previously seen annotation objects 63 | annotation_state.prev_annotations.push(current_annotation_object); 64 | 65 | // create a new child image object and set its values 66 | //var child = $(""); 67 | //$("#image").remove(); 68 | var child = $("#image") 69 | var height = $( window ).height() - 125; 70 | var width = $(window).width() - 125; 71 | child.attr("src", next.location); 72 | child.attr("id", "image"); 73 | child.attr("height", height);//height="42" width="42" 74 | child.attr("width", width); 75 | 76 | // add the child image object to the parent on the page 77 | parent.append(child); 78 | 79 | // Add annotorious to the new child image element 80 | // anno.makeAnnotatable(document.getElementById('image')); 81 | 82 | //add the given anno 83 | if(next.annotations.length > 0){ 84 | for(var annotation_index in next.annotations){ 85 | var annotation = next.annotations[annotation_index]; 86 | anno.addAnnotation(annotation); 87 | } 88 | } 89 | }else { 90 | var keyword = 'dogs'; 91 | if($("#search").val()!="") 92 | keyword = $("#search").val(); 93 | 94 | var query_link = "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?"; 95 | var query_object = { 96 | tags: keyword, 97 | tagmode: "any", 98 | format: "json" 99 | }; 100 | var query_callback = function (data) { 101 | 102 | var image_annotation_object = {}; 103 | var rnd = Math.floor(Math.random() * data.items.length); 104 | var image_src = data.items[rnd]['media']['m'].replace("_m", "_b"); 105 | var current_annotation_object = {}; 106 | // return image_src; 107 | // $('body').css('background-image', "url('" + image_src + "')"); 108 | var parent = $("#image").parent(); 109 | var current = $("#image"); 110 | current_annotation_object["location"] = current.attr("src"); 111 | current_annotation_object["annotations"] = anno.getAnnotations(); 112 | console.log(anno.getAnnotations()); 113 | anno.removeAll(); 114 | current_annotation_object["size"] = { 115 | "height": current.height(), 116 | "width": current.width() 117 | }; 118 | annotation_state.current_annotation = current_annotation_object; 119 | annotation_state.prev_annotations.push(current_annotation_object); 120 | 121 | // var child = $(""); 122 | // $("#image").remove(); 123 | var child = $("#image"); 124 | var height = $(window).height() - 125; 125 | var width = $(window).width() - 125; 126 | 127 | child.attr("src", image_src); 128 | child.attr("id", "image"); 129 | child.attr("class", "annotatable"); 130 | child.attr("height", height);//height="42" width="42" 131 | child.attr("width", width); 132 | parent.append(child); 133 | // anno.makeAnnotatable(document.getElementById('image')); 134 | }; 135 | if(!$("#useFlickr").is(':checked')) { 136 | 137 | var image_src = local_loc+"/"+local_list.pop(); 138 | 139 | var current_annotation_object = {}; 140 | // return image_src; 141 | // $('body').css('background-image', "url('" + image_src + "')"); 142 | var parent = $("#image").parent(); 143 | var current = $("#image"); 144 | current_annotation_object["location"] = current.attr("src"); 145 | current_annotation_object["annotations"] = anno.getAnnotations(); 146 | console.log(anno.getAnnotations()); 147 | anno.removeAll(); 148 | current_annotation_object["size"] = { 149 | "height": current.height(), 150 | "width": current.width() 151 | }; 152 | annotation_state.current_annotation = current_annotation_object; 153 | annotation_state.prev_annotations.push(current_annotation_object); 154 | 155 | // var child = $(""); 156 | // $("#image").remove(); 157 | var child = $("#image"); 158 | var height = $(window).height() - 125; 159 | var width = $(window).width() - 125; 160 | 161 | child.attr("src", image_src); 162 | child.attr("id", "image"); 163 | child.attr("class", "annotatable"); 164 | child.attr("height", height);//height="42" width="42" 165 | child.attr("width", width); 166 | parent.append(child); 167 | }else{ 168 | $(document).ready(function () { 169 | $.getJSON(query_link, query_object, query_callback); 170 | }); 171 | } 172 | } 173 | }; 174 | 175 | $scope.prevImage = function(){ 176 | 177 | 178 | var current_annotation_object = {}; 179 | var previous = annotation_state.prev_annotations.pop(); 180 | var parent = $("#image").parent(); 181 | var current = $("#image"); 182 | current_annotation_object["location"] = current.attr("src"); 183 | current_annotation_object["annotations"] = anno.getAnnotations(); 184 | console.log(anno.getAnnotations()); 185 | anno.removeAll(); 186 | current_annotation_object["size"] = { 187 | "height": current.height(), 188 | "width": current.width() 189 | }; 190 | annotation_state.current_annotation = current_annotation_object; 191 | annotation_state.next_annotations.push(current_annotation_object); 192 | 193 | var child = $("#image"); 194 | // var child = $(""); 195 | // $("#image").remove(); 196 | var height = $( window ).height() - 125; 197 | var width = $(window).width() - 125; 198 | 199 | child.attr("src", previous.location); 200 | child.attr("id", "image"); 201 | child.attr("height", height);//height="42" width="42" 202 | child.attr("width", width); 203 | parent.append(child); 204 | // anno.makeAnnotatable(document.getElementById('image')); 205 | if(previous.annotations.length > 0) { 206 | for (var annotation_index in previous.annotations) { 207 | var annotation = previous.annotations[annotation_index]; 208 | anno.addAnnotation(annotation); 209 | } 210 | } 211 | 212 | console.log("Previous queue length : " + annotation_state.prev_annotations.length); 213 | console.log("Next queue length : " + annotation_state.next_annotations.length); 214 | 215 | }; 216 | 217 | var handler = function(e){ 218 | if(e.keyCode === 39) { 219 | // console.log('right arrow'); 220 | $scope.nextImage(); 221 | // $scope.doSomething(); 222 | }else if (e.keyCode == 37){ 223 | // console.log('left arrow'); 224 | $scope.prevImage(); 225 | } 226 | }; 227 | 228 | var $doc = angular.element(document); 229 | 230 | $doc.on('keydown', handler); 231 | $scope.$on('$destroy',function(){ 232 | $doc.off('keydown', handler); 233 | }); 234 | 235 | }]); -------------------------------------------------------------------------------- /js/controllers/ContributeController.js: -------------------------------------------------------------------------------- 1 | var prev_annotations = []; 2 | var next_annotations = []; 3 | var current_annotation = {}; 4 | 5 | anno.setProperties({ 6 | outline: 'red' 7 | }); 8 | $(".previous-button").hide(); 9 | 10 | app.controller('ContributeController', ['$scope', function($scope) { 11 | 12 | $scope.nextImage = function(){ 13 | 14 | //if there arent any previous images, hide the previous button 15 | if(prev_annotations.length > 0) 16 | $(".previous-button").show(); 17 | else 18 | $(".previous-button").hide(); 19 | 20 | // If there are any objects in next_annotations, ie if the user has gone back in the queue, pull the most recent 21 | if(next_annotations.length > 0){ 22 | 23 | // set initial variables 24 | var current_annotation_object = {}; 25 | var next = next_annotations.pop(); 26 | var parent = $("#image").parent(); 27 | var current = $("#image"); 28 | 29 | // save current annotation values and remove annotorious from the image 30 | current_annotation_object["location"] = current.attr("src"); 31 | current_annotation_object["annotations"] = anno.getAnnotations(); 32 | console.log(anno.getAnnotations()); 33 | anno.removeAll(); 34 | current_annotation_object["size"] = { 35 | "height": current.attr("height"), 36 | "width": current.attr("width") 37 | }; 38 | current_annotation = current_annotation_object; 39 | 40 | // push the current annotation object to the array of previously seen annotation objects 41 | prev_annotations.push(current_annotation_object); 42 | 43 | // create a new child image object and set its values 44 | //var child = $(""); 45 | //$("#image").remove(); 46 | var child = $("#image") 47 | var height = $( window ).height() - 125; 48 | var width = 1048; 49 | child.attr("src", next.location); 50 | child.attr("id", "image"); 51 | child.attr("height", height);//height="42" width="42" 52 | child.attr("width", width); 53 | 54 | // add the child image object to the parent on the page 55 | parent.append(child); 56 | 57 | // Add annotorious to the new child image element 58 | // anno.makeAnnotatable(document.getElementById('image')); 59 | 60 | //add the given anno 61 | if(next.annotations.length > 0){ 62 | for(var annotation_index in next.annotations){ 63 | var annotation = next.annotations[annotation_index]; 64 | anno.addAnnotation(annotation); 65 | } 66 | } 67 | }else { 68 | var keyword = "dogs"; 69 | $(document).ready(function () { 70 | 71 | $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?", 72 | { 73 | tags: keyword, 74 | tagmode: "any", 75 | format: "json" 76 | }, 77 | function (data) { 78 | var image_annotation_object = {}; 79 | var rnd = Math.floor(Math.random() * data.items.length); 80 | var image_src = data.items[rnd]['media']['m'].replace("_m", "_b"); 81 | var current_annotation_object = {}; 82 | // return image_src; 83 | // $('body').css('background-image', "url('" + image_src + "')"); 84 | var parent = $("#image").parent(); 85 | var current = $("#image"); 86 | current_annotation_object["location"] = current.attr("src"); 87 | current_annotation_object["annotations"] = anno.getAnnotations(); 88 | console.log(anno.getAnnotations()); 89 | anno.removeAll(); 90 | current_annotation_object["size"] = { 91 | "height": current.attr("height"), 92 | "width": current.attr("width") 93 | }; 94 | current_annotation = current_annotation_object; 95 | prev_annotations.push(current_annotation_object); 96 | 97 | // var child = $(""); 98 | // $("#image").remove(); 99 | var child = $("#image"); 100 | var height = $(window).height() - 125; 101 | var width = 1048; 102 | 103 | child.attr("src", image_src); 104 | child.attr("id", "image"); 105 | child.attr("class", "annotatable"); 106 | child.attr("height", height);//height="42" width="42" 107 | child.attr("width", width); 108 | parent.append(child); 109 | // anno.makeAnnotatable(document.getElementById('image')); 110 | }); 111 | 112 | }); 113 | } 114 | }; 115 | 116 | $scope.prevImage = function(){ 117 | 118 | 119 | var current_annotation_object = {}; 120 | var previous = prev_annotations.pop(); 121 | var parent = $("#image").parent(); 122 | var current = $("#image"); 123 | current_annotation_object["location"] = current.attr("src"); 124 | current_annotation_object["annotations"] = anno.getAnnotations(); 125 | console.log(anno.getAnnotations()); 126 | anno.removeAll(); 127 | current_annotation_object["size"] = { 128 | "height": current.attr("height"), 129 | "width": current.attr("width") 130 | }; 131 | current_annotation = current_annotation_object; 132 | next_annotations.push(current_annotation_object); 133 | 134 | var child = $("#image"); 135 | // var child = $(""); 136 | // $("#image").remove(); 137 | var height = $( window ).height() - 125; 138 | var width = 1048; 139 | 140 | child.attr("src", previous.location); 141 | child.attr("id", "image"); 142 | child.attr("height", height);//height="42" width="42" 143 | child.attr("width", width); 144 | parent.append(child); 145 | // anno.makeAnnotatable(document.getElementById('image')); 146 | if(previous.annotations.length > 0) { 147 | for (var annotation_index in previous.annotations) { 148 | var annotation = previous.annotations[annotation_index]; 149 | anno.addAnnotation(annotation); 150 | } 151 | } 152 | 153 | console.log("Previous queue length : " + prev_annotations.length); 154 | console.log("Next queue length : " + next_annotations.length); 155 | 156 | }; 157 | 158 | var handler = function(e){ 159 | if(e.keyCode === 39) { 160 | console.log('right arrow'); 161 | $scope.nextImage(); 162 | // $scope.doSomething(); 163 | }else if (e.keyCode == 37){ 164 | console.log('left arrow'); 165 | $scope.prevImage(); 166 | } 167 | }; 168 | 169 | var $doc = angular.element(document); 170 | 171 | $doc.on('keydown', handler); 172 | $scope.$on('$destroy',function(){ 173 | $doc.off('keydown', handler); 174 | }); 175 | 176 | }]); -------------------------------------------------------------------------------- /js/controllers/DiscoverController.js: -------------------------------------------------------------------------------- 1 | var prev_annotations = []; 2 | var next_annotations = []; 3 | var current_annotation = {}; 4 | 5 | anno.setProperties({ 6 | outline: 'red' 7 | }); 8 | $(".previous-button").hide(); 9 | 10 | app.controller('DiscoverController', ['$scope', function($scope) { 11 | 12 | $scope.nextImage = function(){ 13 | 14 | //if there arent any previous images, hide the previous button 15 | if(prev_annotations.length > 0) 16 | $(".previous-button").show(); 17 | else 18 | $(".previous-button").hide(); 19 | 20 | // If there are any objects in next_annotations, ie if the user has gone back in the queue, pull the most recent 21 | if(next_annotations.length > 0){ 22 | 23 | // set initial variables 24 | var current_annotation_object = {}; 25 | var next = next_annotations.pop(); 26 | var parent = $("#image").parent(); 27 | var current = $("#image"); 28 | 29 | // save current annotation values and remove annotorious from the image 30 | current_annotation_object["location"] = current.attr("src"); 31 | current_annotation_object["annotations"] = anno.getAnnotations(); 32 | console.log(anno.getAnnotations()); 33 | anno.removeAll(); 34 | current_annotation_object["size"] = { 35 | "height": current.attr("height"), 36 | "width": current.attr("width") 37 | }; 38 | current_annotation = current_annotation_object; 39 | 40 | // push the current annotation object to the array of previously seen annotation objects 41 | prev_annotations.push(current_annotation_object); 42 | 43 | // create a new child image object and set its values 44 | //var child = $(""); 45 | //$("#image").remove(); 46 | var child = $("#image") 47 | var height = $( window ).height() - 125; 48 | var width = 1048; 49 | child.attr("src", next.location); 50 | child.attr("id", "image"); 51 | child.attr("height", height);//height="42" width="42" 52 | child.attr("width", width); 53 | 54 | // add the child image object to the parent on the page 55 | parent.append(child); 56 | 57 | // Add annotorious to the new child image element 58 | // anno.makeAnnotatable(document.getElementById('image')); 59 | 60 | //add the given anno 61 | if(next.annotations.length > 0){ 62 | for(var annotation_index in next.annotations){ 63 | var annotation = next.annotations[annotation_index]; 64 | anno.addAnnotation(annotation); 65 | } 66 | } 67 | }else { 68 | var keyword = "dogs"; 69 | $(document).ready(function () { 70 | 71 | $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?", 72 | { 73 | tags: keyword, 74 | tagmode: "any", 75 | format: "json" 76 | }, 77 | function (data) { 78 | var image_annotation_object = {}; 79 | var rnd = Math.floor(Math.random() * data.items.length); 80 | var image_src = data.items[rnd]['media']['m'].replace("_m", "_b"); 81 | var current_annotation_object = {}; 82 | // return image_src; 83 | // $('body').css('background-image', "url('" + image_src + "')"); 84 | var parent = $("#image").parent(); 85 | var current = $("#image"); 86 | current_annotation_object["location"] = current.attr("src"); 87 | current_annotation_object["annotations"] = anno.getAnnotations(); 88 | console.log(anno.getAnnotations()); 89 | anno.removeAll(); 90 | current_annotation_object["size"] = { 91 | "height": current.attr("height"), 92 | "width": current.attr("width") 93 | }; 94 | current_annotation = current_annotation_object; 95 | prev_annotations.push(current_annotation_object); 96 | 97 | // var child = $(""); 98 | // $("#image").remove(); 99 | var child = $("#image"); 100 | var height = $(window).height() - 125; 101 | var width = 1048; 102 | 103 | child.attr("src", image_src); 104 | child.attr("id", "image"); 105 | child.attr("class", "annotatable"); 106 | child.attr("height", height);//height="42" width="42" 107 | child.attr("width", width); 108 | parent.append(child); 109 | // anno.makeAnnotatable(document.getElementById('image')); 110 | }); 111 | 112 | }); 113 | } 114 | }; 115 | 116 | $scope.prevImage = function(){ 117 | 118 | 119 | var current_annotation_object = {}; 120 | var previous = prev_annotations.pop(); 121 | var parent = $("#image").parent(); 122 | var current = $("#image"); 123 | current_annotation_object["location"] = current.attr("src"); 124 | current_annotation_object["annotations"] = anno.getAnnotations(); 125 | console.log(anno.getAnnotations()); 126 | anno.removeAll(); 127 | current_annotation_object["size"] = { 128 | "height": current.attr("height"), 129 | "width": current.attr("width") 130 | }; 131 | current_annotation = current_annotation_object; 132 | next_annotations.push(current_annotation_object); 133 | 134 | var child = $("#image"); 135 | // var child = $(""); 136 | // $("#image").remove(); 137 | var height = $( window ).height() - 125; 138 | var width = 1048; 139 | 140 | child.attr("src", previous.location); 141 | child.attr("id", "image"); 142 | child.attr("height", height);//height="42" width="42" 143 | child.attr("width", width); 144 | parent.append(child); 145 | // anno.makeAnnotatable(document.getElementById('image')); 146 | if(previous.annotations.length > 0) { 147 | for (var annotation_index in previous.annotations) { 148 | var annotation = previous.annotations[annotation_index]; 149 | anno.addAnnotation(annotation); 150 | } 151 | } 152 | 153 | console.log("Previous queue length : " + prev_annotations.length); 154 | console.log("Next queue length : " + next_annotations.length); 155 | 156 | }; 157 | 158 | var handler = function(e){ 159 | if(e.keyCode === 39) { 160 | console.log('right arrow'); 161 | $scope.nextImage(); 162 | // $scope.doSomething(); 163 | }else if (e.keyCode == 37){ 164 | console.log('left arrow'); 165 | $scope.prevImage(); 166 | } 167 | }; 168 | 169 | var $doc = angular.element(document); 170 | 171 | $doc.on('keydown', handler); 172 | $scope.$on('$destroy',function(){ 173 | $doc.off('keydown', handler); 174 | }); 175 | 176 | }]); -------------------------------------------------------------------------------- /js/controllers/HelpController.js: -------------------------------------------------------------------------------- 1 | var prev_annotations = []; 2 | var next_annotations = []; 3 | var current_annotation = {}; 4 | 5 | anno.setProperties({ 6 | outline: 'red' 7 | }); 8 | $(".previous-button").hide(); 9 | 10 | app.controller('HelpController', ['$scope', function($scope) { 11 | 12 | $scope.nextImage = function(){ 13 | 14 | //if there arent any previous images, hide the previous button 15 | if(prev_annotations.length > 0) 16 | $(".previous-button").show(); 17 | else 18 | $(".previous-button").hide(); 19 | 20 | // If there are any objects in next_annotations, ie if the user has gone back in the queue, pull the most recent 21 | if(next_annotations.length > 0){ 22 | 23 | // set initial variables 24 | var current_annotation_object = {}; 25 | var next = next_annotations.pop(); 26 | var parent = $("#image").parent(); 27 | var current = $("#image"); 28 | 29 | // save current annotation values and remove annotorious from the image 30 | current_annotation_object["location"] = current.attr("src"); 31 | current_annotation_object["annotations"] = anno.getAnnotations(); 32 | console.log(anno.getAnnotations()); 33 | anno.removeAll(); 34 | current_annotation_object["size"] = { 35 | "height": current.attr("height"), 36 | "width": current.attr("width") 37 | }; 38 | current_annotation = current_annotation_object; 39 | 40 | // push the current annotation object to the array of previously seen annotation objects 41 | prev_annotations.push(current_annotation_object); 42 | 43 | // create a new child image object and set its values 44 | //var child = $(""); 45 | //$("#image").remove(); 46 | var child = $("#image") 47 | var height = $( window ).height() - 125; 48 | var width = 1048; 49 | child.attr("src", next.location); 50 | child.attr("id", "image"); 51 | child.attr("height", height);//height="42" width="42" 52 | child.attr("width", width); 53 | 54 | // add the child image object to the parent on the page 55 | parent.append(child); 56 | 57 | // Add annotorious to the new child image element 58 | // anno.makeAnnotatable(document.getElementById('image')); 59 | 60 | //add the given anno 61 | if(next.annotations.length > 0){ 62 | for(var annotation_index in next.annotations){ 63 | var annotation = next.annotations[annotation_index]; 64 | anno.addAnnotation(annotation); 65 | } 66 | } 67 | }else { 68 | var keyword = "dogs"; 69 | $(document).ready(function () { 70 | 71 | $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?", 72 | { 73 | tags: keyword, 74 | tagmode: "any", 75 | format: "json" 76 | }, 77 | function (data) { 78 | var image_annotation_object = {}; 79 | var rnd = Math.floor(Math.random() * data.items.length); 80 | var image_src = data.items[rnd]['media']['m'].replace("_m", "_b"); 81 | var current_annotation_object = {}; 82 | // return image_src; 83 | // $('body').css('background-image', "url('" + image_src + "')"); 84 | var parent = $("#image").parent(); 85 | var current = $("#image"); 86 | current_annotation_object["location"] = current.attr("src"); 87 | current_annotation_object["annotations"] = anno.getAnnotations(); 88 | console.log(anno.getAnnotations()); 89 | anno.removeAll(); 90 | current_annotation_object["size"] = { 91 | "height": current.attr("height"), 92 | "width": current.attr("width") 93 | }; 94 | current_annotation = current_annotation_object; 95 | prev_annotations.push(current_annotation_object); 96 | 97 | // var child = $(""); 98 | // $("#image").remove(); 99 | var child = $("#image"); 100 | var height = $(window).height() - 125; 101 | var width = 1048; 102 | 103 | child.attr("src", image_src); 104 | child.attr("id", "image"); 105 | child.attr("class", "annotatable"); 106 | child.attr("height", height);//height="42" width="42" 107 | child.attr("width", width); 108 | parent.append(child); 109 | // anno.makeAnnotatable(document.getElementById('image')); 110 | }); 111 | 112 | }); 113 | } 114 | }; 115 | 116 | $scope.prevImage = function(){ 117 | 118 | 119 | var current_annotation_object = {}; 120 | var previous = prev_annotations.pop(); 121 | var parent = $("#image").parent(); 122 | var current = $("#image"); 123 | current_annotation_object["location"] = current.attr("src"); 124 | current_annotation_object["annotations"] = anno.getAnnotations(); 125 | console.log(anno.getAnnotations()); 126 | anno.removeAll(); 127 | current_annotation_object["size"] = { 128 | "height": current.attr("height"), 129 | "width": current.attr("width") 130 | }; 131 | current_annotation = current_annotation_object; 132 | next_annotations.push(current_annotation_object); 133 | 134 | var child = $("#image"); 135 | // var child = $(""); 136 | // $("#image").remove(); 137 | var height = $( window ).height() - 125; 138 | var width = 1048; 139 | 140 | child.attr("src", previous.location); 141 | child.attr("id", "image"); 142 | child.attr("height", height);//height="42" width="42" 143 | child.attr("width", width); 144 | parent.append(child); 145 | // anno.makeAnnotatable(document.getElementById('image')); 146 | if(previous.annotations.length > 0) { 147 | for (var annotation_index in previous.annotations) { 148 | var annotation = previous.annotations[annotation_index]; 149 | anno.addAnnotation(annotation); 150 | } 151 | } 152 | 153 | console.log("Previous queue length : " + prev_annotations.length); 154 | console.log("Next queue length : " + next_annotations.length); 155 | 156 | }; 157 | 158 | var handler = function(e){ 159 | if(e.keyCode === 39) { 160 | console.log('right arrow'); 161 | $scope.nextImage(); 162 | // $scope.doSomething(); 163 | }else if (e.keyCode == 37){ 164 | console.log('left arrow'); 165 | $scope.prevImage(); 166 | } 167 | }; 168 | 169 | var $doc = angular.element(document); 170 | 171 | $doc.on('keydown', handler); 172 | $scope.$on('$destroy',function(){ 173 | $doc.off('keydown', handler); 174 | }); 175 | 176 | }]); -------------------------------------------------------------------------------- /js/controllers/HomeController.js: -------------------------------------------------------------------------------- 1 | app.controller('HomeController', ['$scope', function($scope) { 2 | 3 | 4 | 5 | }]); -------------------------------------------------------------------------------- /js/controllers/ImageController.js: -------------------------------------------------------------------------------- 1 | var prev_annotations = []; 2 | var next_annotations = []; 3 | var current_annotation = {}; 4 | 5 | anno.setProperties({ 6 | outline: 'red' 7 | }); 8 | $(".previous-button").hide(); 9 | 10 | app.controller('ImageController', ['$scope', function($scope) { 11 | 12 | $scope.nextImage = function(){ 13 | 14 | //if there arent any previous images, hide the previous button 15 | if(prev_annotations.length > 0) 16 | $(".previous-button").show(); 17 | else 18 | $(".previous-button").hide(); 19 | 20 | // If there are any objects in next_annotations, ie if the user has gone back in the queue, pull the most recent 21 | if(next_annotations.length > 0){ 22 | 23 | // set initial variables 24 | var current_annotation_object = {}; 25 | var next = next_annotations.pop(); 26 | var parent = $("#image").parent(); 27 | var current = $("#image"); 28 | 29 | // save current annotation values and remove annotorious from the image 30 | current_annotation_object["location"] = current.attr("src"); 31 | current_annotation_object["annotations"] = anno.getAnnotations(); 32 | console.log(anno.getAnnotations()); 33 | anno.removeAll(); 34 | current_annotation_object["size"] = { 35 | "height": current.attr("height"), 36 | "width": current.attr("width") 37 | }; 38 | current_annotation = current_annotation_object; 39 | 40 | // push the current annotation object to the array of previously seen annotation objects 41 | prev_annotations.push(current_annotation_object); 42 | 43 | // create a new child image object and set its values 44 | //var child = $(""); 45 | //$("#image").remove(); 46 | var child = $("#image") 47 | var height = $( window ).height() - 125; 48 | var width = 1048; 49 | child.attr("src", next.location); 50 | child.attr("id", "image"); 51 | child.attr("height", height);//height="42" width="42" 52 | child.attr("width", width); 53 | 54 | // add the child image object to the parent on the page 55 | parent.append(child); 56 | 57 | // Add annotorious to the new child image element 58 | // anno.makeAnnotatable(document.getElementById('image')); 59 | 60 | //add the given anno 61 | if(next.annotations.length > 0){ 62 | for(var annotation_index in next.annotations){ 63 | var annotation = next.annotations[annotation_index]; 64 | anno.addAnnotation(annotation); 65 | } 66 | } 67 | }else { 68 | var keyword = "dogs"; 69 | $(document).ready(function () { 70 | 71 | $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?", 72 | { 73 | tags: keyword, 74 | tagmode: "any", 75 | format: "json" 76 | }, 77 | function (data) { 78 | var image_annotation_object = {}; 79 | var rnd = Math.floor(Math.random() * data.items.length); 80 | var image_src = data.items[rnd]['media']['m'].replace("_m", "_b"); 81 | var current_annotation_object = {}; 82 | // return image_src; 83 | // $('body').css('background-image', "url('" + image_src + "')"); 84 | var parent = $("#image").parent(); 85 | var current = $("#image"); 86 | current_annotation_object["location"] = current.attr("src"); 87 | current_annotation_object["annotations"] = anno.getAnnotations(); 88 | console.log(anno.getAnnotations()); 89 | anno.removeAll(); 90 | current_annotation_object["size"] = { 91 | "height": current.attr("height"), 92 | "width": current.attr("width") 93 | }; 94 | current_annotation = current_annotation_object; 95 | prev_annotations.push(current_annotation_object); 96 | 97 | // var child = $(""); 98 | // $("#image").remove(); 99 | var child = $("#image"); 100 | var height = $(window).height() - 125; 101 | var width = 1048; 102 | 103 | child.attr("src", image_src); 104 | child.attr("id", "image"); 105 | child.attr("class", "annotatable"); 106 | child.attr("height", height);//height="42" width="42" 107 | child.attr("width", width); 108 | parent.append(child); 109 | // anno.makeAnnotatable(document.getElementById('image')); 110 | }); 111 | 112 | }); 113 | } 114 | }; 115 | 116 | $scope.prevImage = function(){ 117 | 118 | 119 | var current_annotation_object = {}; 120 | var previous = prev_annotations.pop(); 121 | var parent = $("#image").parent(); 122 | var current = $("#image"); 123 | current_annotation_object["location"] = current.attr("src"); 124 | current_annotation_object["annotations"] = anno.getAnnotations(); 125 | console.log(anno.getAnnotations()); 126 | anno.removeAll(); 127 | current_annotation_object["size"] = { 128 | "height": current.attr("height"), 129 | "width": current.attr("width") 130 | }; 131 | current_annotation = current_annotation_object; 132 | next_annotations.push(current_annotation_object); 133 | 134 | var child = $("#image"); 135 | // var child = $(""); 136 | // $("#image").remove(); 137 | var height = $( window ).height() - 125; 138 | var width = 1048; 139 | 140 | child.attr("src", previous.location); 141 | child.attr("id", "image"); 142 | child.attr("height", height);//height="42" width="42" 143 | child.attr("width", width); 144 | parent.append(child); 145 | // anno.makeAnnotatable(document.getElementById('image')); 146 | if(previous.annotations.length > 0) { 147 | for (var annotation_index in previous.annotations) { 148 | var annotation = previous.annotations[annotation_index]; 149 | anno.addAnnotation(annotation); 150 | } 151 | } 152 | 153 | console.log("Previous queue length : " + prev_annotations.length); 154 | console.log("Next queue length : " + next_annotations.length); 155 | 156 | }; 157 | 158 | var handler = function(e){ 159 | if(e.keyCode === 39) { 160 | console.log('right arrow'); 161 | $scope.nextImage(); 162 | // $scope.doSomething(); 163 | }else if (e.keyCode == 37){ 164 | console.log('left arrow'); 165 | $scope.prevImage(); 166 | } 167 | }; 168 | 169 | var $doc = angular.element(document); 170 | 171 | $doc.on('keydown', handler); 172 | $scope.$on('$destroy',function(){ 173 | $doc.off('keydown', handler); 174 | }); 175 | 176 | }]); -------------------------------------------------------------------------------- /js/controllers/MenuController.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by seanweppner on 8/4/16. 3 | */ 4 | 5 | app.controller('MenuController', ['$scope', function($scope) { 6 | 7 | $scope.downloadJson = function(){ 8 | console.log("Downloading"); 9 | var total_annotations = []; 10 | total_annotations = total_annotations.concat(annotation_state.prev_annotations); 11 | total_annotations.push(annotation_state.current_annotation); 12 | total_annotations = total_annotations.concat(annotation_state.next_annotations); 13 | 14 | var final_download = {}; 15 | var milliseconds = (new Date).getTime(); 16 | final_download["created"] = milliseconds; 17 | final_download["data"] = total_annotations; 18 | 19 | 20 | /*var something = window.open("data:text/json," + encodeURIComponent(JSON.stringify(final_download)), 21 | "_blank"); 22 | something.focus();*/ 23 | 24 | var iframe = "" 25 | var x = window.open(); 26 | x.document.open(); 27 | x.document.write(iframe); 28 | x.document.close(); 29 | 30 | }; 31 | 32 | }]); 33 | -------------------------------------------------------------------------------- /js/directives/discover/discoverCardDirective.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |

Data Set 1

5 |
6 |
7 | Non dolore elit adipisicing ea reprehenderit consectetur culpa. 8 |
9 |
10 | Read More 11 |
12 |
13 |
-------------------------------------------------------------------------------- /js/directives/discover/discoverCardDirective.js: -------------------------------------------------------------------------------- 1 | app.directive('discoverCard', function() { 2 | return { 3 | restrict: 'E', 4 | scope: { 5 | info: '=' 6 | }, 7 | templateUrl: 'js/directives/discover/discoverCardDirective.html' 8 | }; 9 | }); -------------------------------------------------------------------------------- /js/directives/help/HelpCardDirective.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Title 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /js/directives/help/HelpCardDirective.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by seanweppner on 8/5/16. 3 | */ 4 | -------------------------------------------------------------------------------- /js/routes/pageRoutes.js: -------------------------------------------------------------------------------- 1 | app.config(function($routeProvider) { 2 | $routeProvider 3 | 4 | // route for the home page 5 | .when('/', { 6 | templateUrl : 'pages/home.html', 7 | controller : 'HomeController' 8 | }) 9 | 10 | // route for the about page 11 | .when('/annotate', { 12 | templateUrl : 'pages/annotate.html', 13 | controller : 'AnnotationController' 14 | }) 15 | 16 | // route for the about page 17 | .when('/classify', { 18 | templateUrl : 'pages/classify.html', 19 | controller : 'ClassifyController' 20 | }) 21 | 22 | // route for the contact page 23 | .when('/discover', { 24 | templateUrl : 'pages/discover.html', 25 | controller : 'DiscoverController' 26 | }) 27 | 28 | // route for the contact page 29 | .when('/contribute', { 30 | templateUrl : 'pages/contribute.html', 31 | controller : 'ContributeController' 32 | }) 33 | 34 | // route for the contact page 35 | .when('/help', { 36 | templateUrl : 'pages/help.html', 37 | controller : 'HelpController' 38 | }); 39 | }); -------------------------------------------------------------------------------- /js/services/image_get.js: -------------------------------------------------------------------------------- 1 | app.factory('getImages', ['$http', function($http) { 2 | return $http.get('https://s3.amazonaws.com/codecademy-content/courses/ltp4/forecast-api/forecast.json') 3 | .success(function(data) { 4 | return data; 5 | }) 6 | .error(function(err) { 7 | return err; 8 | }); 9 | }]); 10 | -------------------------------------------------------------------------------- /js/shared/autoSave.js: -------------------------------------------------------------------------------- 1 | var autoSave = function(image_id){ 2 | // console.log("saving..."); 3 | var current_annotation_object = {}; 4 | var current = $(image_id); 5 | 6 | current_annotation_object["location"] = current.attr("src"); 7 | current_annotation_object["annotations"] = anno.getAnnotations(); 8 | current_annotation_object["size"] = { 9 | "height": current.height(), 10 | "width": current.width() 11 | }; 12 | annotation_state.current_annotation = current_annotation_object; 13 | 14 | setTimeout(autoSave(image_id), 50); 15 | }; -------------------------------------------------------------------------------- /js/shared/dialog-polyfill.min.js: -------------------------------------------------------------------------------- 1 | (function(){var a=window.CustomEvent;if(!a||typeof a=="object"){a=function d(i,g){g=g||{};var h=document.createEvent("CustomEvent");h.initCustomEvent(i,!!g.bubbles,!!g.cancelable,g.detail||null);return h};a.prototype=window.Event.prototype}function f(g){while(g){if(g.nodeName.toUpperCase()=="DIALOG"){return(g)}g=g.parentElement}return null}function c(g,j){for(var h=0;h, the polyfill may not work correctly",g)}if(g.nodeName.toUpperCase()!="DIALOG"){throw"Failed to register dialog: The element is not a dialog."}new b((g))};e.registerDialog=function(g){if(g.showModal){console.warn("Can't upgrade : already supported",g)}else{e.forceRegisterDialog(g)}};e.DialogManager=function(){this.pendingDialogStack=[];this.overlay=document.createElement("div");this.overlay.className="_dialog_overlay";this.overlay.addEventListener("click",function(g){g.stopPropagation()});this.handleKey_=this.handleKey_.bind(this);this.handleFocus_=this.handleFocus_.bind(this);this.handleRemove_=this.handleRemove_.bind(this);this.zIndexLow_=100000;this.zIndexHigh_=100000+150};e.DialogManager.prototype.topDialogElement=function(){if(this.pendingDialogStack.length){var g=this.pendingDialogStack[this.pendingDialogStack.length-1];return g.dialog}return null};e.DialogManager.prototype.blockDocument=function(){document.body.appendChild(this.overlay);document.body.addEventListener("focus",this.handleFocus_,true);document.addEventListener("keydown",this.handleKey_);document.addEventListener("DOMNodeRemoved",this.handleRemove_)};e.DialogManager.prototype.unblockDocument=function(){document.body.removeChild(this.overlay);document.body.removeEventListener("focus",this.handleFocus_,true);document.removeEventListener("keydown",this.handleKey_);document.removeEventListener("DOMNodeRemoved",this.handleRemove_)};e.DialogManager.prototype.updateStacking=function(){var h=this.zIndexLow_;for(var g=0;g=h){return false}this.pendingDialogStack.push(g);if(this.pendingDialogStack.length==1){this.blockDocument()}this.updateStacking();return true};e.DialogManager.prototype.removeDialog=function(h){var g=this.pendingDialogStack.indexOf(h);if(g==-1){return}this.pendingDialogStack.splice(g,1);this.updateStacking();if(this.pendingDialogStack.length==0){this.unblockDocument()}};e.dm=new e.DialogManager();document.addEventListener("submit",function(k){var l=k.target;if(!l||!l.hasAttribute("method")){return}if(l.getAttribute("method").toLowerCase()!="dialog"){return}k.preventDefault();var i=f((k.target));if(!i){return}var j;var g=[document.activeElement,k.explicitOriginalTarget];var h=["BUTTON","INPUT"];g.some(function(m){if(m&&m.form==k.target&&h.indexOf(m.nodeName.toUpperCase())!=-1){j=m.value;return true}});i.close(j)},true);window.dialogPolyfill=e;e.forceRegisterDialog=e.forceRegisterDialog;e.registerDialog=e.registerDialog})(); -------------------------------------------------------------------------------- /js/shared/modal.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by seanweppner on 8/5/16. 3 | */ 4 | 5 | (function() { 6 | 'use strict'; 7 | var dialogButton = document.querySelector('#annotationSettingsBtn'); 8 | 9 | var dialog = document.querySelector('#dialog'); 10 | 11 | $("#localInput").hide(); 12 | 13 | if (! dialog.showModal) { 14 | dialogPolyfill.registerDialog(dialog); 15 | } 16 | dialogButton.addEventListener('click', function() { 17 | dialog.showModal(); 18 | }); 19 | dialog.querySelector('button:not([disabled])') 20 | .addEventListener('click', function() { 21 | dialog.close(); 22 | }); 23 | }()); 24 | 25 | $("#useFlickrClick").click(function(){ 26 | if(!$("#useFlickr").is(':checked')) 27 | $("#localInput").show(); 28 | else 29 | $("#localInput").hide(); 30 | }); 31 | 32 | -------------------------------------------------------------------------------- /js/ui.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by seanweppner on 8/7/16. 3 | */ 4 | 5 | $("#localInput").hide(); 6 | 7 | $(".mdl-navigation__link").each(function( index ) { 8 | // console.log( index + ": " + $( this ).text() ); 9 | $( this ).click(function(){ 10 | $(".mdl-navigation__link").each(function( index ){ 11 | $( this ).removeClass('selected-page'); 12 | }); 13 | $( this ).toggleClass('selected-page'); 14 | }); 15 | }); 16 | 17 | $("#useFlickrClick").click(function(){ 18 | var query_link = base_query_url + "/listFiles"; 19 | var query_object = {}; 20 | var query_callback = function (data) { 21 | local_list = local_list.concat(data.data); 22 | console.log(data); 23 | } 24 | 25 | if(!$("#useFlickr").is(':checked')){ 26 | $("#localInput").show(); 27 | $.getJSON(query_link, query_object, query_callback); 28 | 29 | }else{ 30 | $("#localInput").hide(); 31 | } 32 | }); -------------------------------------------------------------------------------- /node/rest/rest_server.js: -------------------------------------------------------------------------------- 1 | var express = require('express'); 2 | var bodyParser = require('body-parser'); 3 | var app = express(); 4 | var fs = require("fs"); 5 | var path = require('path'); 6 | var appDir = path.dirname(require.main.filename); 7 | 8 | var mongo_db = "local_db"; 9 | 10 | 11 | var data_dir = appDir+"/data" 12 | 13 | app.post('/upload', function (req, res) { 14 | console.log(req); 15 | console.log(res); 16 | var tempPath = req.files.file.path, 17 | targetPath = path.resolve('data_dir'); 18 | if ( isImage(path.extname(req.files.file.name).toLowerCase()) ) { 19 | fs.rename(tempPath, targetPath, function(err) { 20 | if (err) throw err; 21 | console.log("Upload completed!"); 22 | }); 23 | } else { 24 | fs.unlink(tempPath, function () { 25 | if (err) throw err; 26 | console.error("Only .png files are allowed!"); 27 | }); 28 | } 29 | // ... 30 | }); 31 | 32 | app.get('/listUsers', function (req, res) { 33 | fs.readFile( __dirname + "/" + "users.json", 'utf8', function (err, data) { 34 | console.log( data ); 35 | res.end( data ); 36 | }); 37 | }); 38 | 39 | app.get('/listFiles', function (req, res) { 40 | // fs.readFile( __dirname + "/" + "users.json", 'utf8', function (err, data) { 41 | // console.log( data ); 42 | // res.end( data ); 43 | // }); 44 | console.log(data_dir); 45 | var numFiles = 0; 46 | var filesList = ""; 47 | fs.readdir(data_dir, function(err, items) { 48 | var response = {}; 49 | response["data"] = items; 50 | response["dir"] = data_dir; 51 | res.setHeader('Access-Control-Allow-Origin', 'http://localhost:8888'); 52 | res.end(JSON.stringify(response)); 53 | }); 54 | 55 | }); 56 | 57 | app.get('/loadFiles', function (req, res) { 58 | // fs.readFile( __dirname + "/" + "users.json", 'utf8', function (err, data) { 59 | // console.log( data ); 60 | // res.end( data ); 61 | // }); 62 | console.log("Load Files Called..."); 63 | console.log(data_dir); 64 | var numFiles = 0; 65 | var filesList = ""; 66 | fs.readdir(data_dir, function(err, items) { 67 | loadImagesToDB(items); 68 | }); 69 | res.end("data loaded!"); 70 | 71 | }) 72 | 73 | app.get('/nextImage', function (req, res) { 74 | // fs.readFile( __dirname + "/" + "users.json", 'utf8', function (err, data) { 75 | // console.log( data ); 76 | // res.end( data ); 77 | // }); 78 | 79 | }) 80 | 81 | var server = app.listen(8081, function () { 82 | 83 | var host = server.address().address 84 | var port = server.address().port 85 | 86 | console.log("Labeld listening at http://%s:%s", host, port) 87 | 88 | })/** 89 | * Created by seanweppner on 8/5/16. 90 | */ 91 | 92 | 93 | function loadImagesToDB(images){ 94 | var collection_name = "annotation_images"; 95 | 96 | // Retrieve 97 | var MongoClient = require('mongodb').MongoClient; 98 | 99 | // Connect to the db 100 | MongoClient.connect("mongodb://localhost:27017/"+mongo_db, function(err, db) { 101 | if(err) { return console.dir(err); } 102 | 103 | console.log("Made it!"); 104 | 105 | var cursor = db.collection(collection_name).find( ); 106 | console.log(cursor); 107 | 108 | var num = 1; 109 | // cursor.each(function(err, doc) { 110 | // assert.equal(err, null); 111 | // if (doc != null) { 112 | // console.dir(doc); 113 | // num += 1; 114 | // } else { 115 | // // callback(); 116 | // // console.log("Error"); 117 | // } 118 | // }); 119 | 120 | var collection = db.collection(collection_name); 121 | for(var image_index in images){ 122 | var image_location = images[image_index]; 123 | var image_object = {}; 124 | image_object["location"] = image_location; 125 | collection.insert(image_object); 126 | } 127 | }); 128 | } 129 | 130 | function isImage(file_type){ 131 | if(file_type === '.png') 132 | return true; 133 | else if(file_type === '.jpg') 134 | return true; 135 | else if(file_type === '.jpeg') 136 | return true; 137 | else if(file_type === '.tiff') 138 | return true; 139 | else if(file_type === '.bmp') 140 | return true; 141 | else 142 | return false; 143 | } -------------------------------------------------------------------------------- /pages/annotate.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 |
5 |
6 | 7 | Next 10 | Previous 13 | 14 |
15 |
16 |
    17 |
  • Annotation Settings
    • 18 |
19 |
20 | 56 | -------------------------------------------------------------------------------- /pages/classify.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 | 5 | Next 8 | Previous 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 |
67 |
68 | -------------------------------------------------------------------------------- /pages/contribute.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 |
6 |

Data Set 1

7 |
8 |
9 | Non dolore elit adipisicing ea reprehenderit consectetur culpa. 10 |
11 |
12 | Read More 13 |
14 |
15 |
16 |
17 |
18 |
19 |

Data Set 2

20 |
21 |
22 | Non dolore elit adipisicing ea reprehenderit consectetur culpa. 23 |
24 |
25 | Read More 26 |
27 |
28 |
29 |
30 |
31 |
32 |

Data Set 3

33 |
34 |
35 | Non dolore elit adipisicing ea reprehenderit consectetur culpa. 36 |
37 |
38 | Read More 39 |
40 |
41 |
42 |
43 |
44 |
45 |

Data Set 4

46 |
47 |
48 | Non dolore elit adipisicing ea reprehenderit consectetur culpa. 49 |
50 |
51 | Read More 52 |
53 |
54 |
55 |
56 |
57 |
58 |

Data Set 5

59 |
60 |
61 | Non dolore elit adipisicing ea reprehenderit consectetur culpa. 62 |
63 |
64 | Read More 65 |
66 |
67 |
68 |
69 |
70 |
71 |

Data Set 6

72 |
73 |
74 | Non dolore elit adipisicing ea reprehenderit consectetur culpa. 75 |
76 |
77 | Read More 78 |
79 |
80 |
81 |
82 |
83 |
84 |

Data Set 7

85 |
86 |
87 | Non dolore elit adipisicing ea reprehenderit consectetur culpa. 88 |
89 |
90 | Read More 91 |
92 |
93 |
94 |
95 |
96 |
97 |

Data Set 8

98 |
99 |
100 | Non dolore elit adipisicing ea reprehenderit consectetur culpa. 101 |
102 |
103 | Read More 104 |
105 |
106 |
107 |
108 |
109 |
110 |

Data Set 9

111 |
112 |
113 | Non dolore elit adipisicing ea reprehenderit consectetur culpa. 114 |
115 |
116 | Read More 117 |
118 |
119 |
120 |
121 |
122 |
123 |

Data Set 10

124 |
125 |
126 | Non dolore elit adipisicing ea reprehenderit consectetur culpa. 127 |
128 |
129 | Read More 130 |
131 |
132 |
133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | 172 | 173 | 174 | 175 | 176 | 177 | 178 | 179 | 180 | 181 | 182 | 183 | 184 | 185 | 186 |
187 |
-------------------------------------------------------------------------------- /pages/discover.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 |
6 |

Data Set 1

7 |
8 |
9 | Non dolore elit adipisicing ea reprehenderit consectetur culpa. 10 |
11 |
12 | Read More 13 |
14 |
15 |
16 |
17 |
18 |
19 |

Data Set 2

20 |
21 |
22 | Non dolore elit adipisicing ea reprehenderit consectetur culpa. 23 |
24 |
25 | Read More 26 |
27 |
28 |
29 |
30 |
31 |
32 |

Data Set 3

33 |
34 |
35 | Non dolore elit adipisicing ea reprehenderit consectetur culpa. 36 |
37 |
38 | Read More 39 |
40 |
41 |
42 |
43 |
44 |
45 |

Data Set 4

46 |
47 |
48 | Non dolore elit adipisicing ea reprehenderit consectetur culpa. 49 |
50 |
51 | Read More 52 |
53 |
54 |
55 |
56 |
57 |
58 |

Data Set 5

59 |
60 |
61 | Non dolore elit adipisicing ea reprehenderit consectetur culpa. 62 |
63 |
64 | Read More 65 |
66 |
67 |
68 |
69 |
70 |
71 |

Data Set 6

72 |
73 |
74 | Non dolore elit adipisicing ea reprehenderit consectetur culpa. 75 |
76 |
77 | Read More 78 |
79 |
80 |
81 |
82 |
83 |
84 |

Data Set 7

85 |
86 |
87 | Non dolore elit adipisicing ea reprehenderit consectetur culpa. 88 |
89 |
90 | Read More 91 |
92 |
93 |
94 |
95 |
96 |
97 |

Data Set 8

98 |
99 |
100 | Non dolore elit adipisicing ea reprehenderit consectetur culpa. 101 |
102 |
103 | Read More 104 |
105 |
106 |
107 |
108 |
109 |
110 |

Data Set 9

111 |
112 |
113 | Non dolore elit adipisicing ea reprehenderit consectetur culpa. 114 |
115 |
116 | Read More 117 |
118 |
119 |
120 |
121 |
122 |
123 |

Data Set 10

124 |
125 |
126 | Non dolore elit adipisicing ea reprehenderit consectetur culpa. 127 |
128 |
129 | Read More 130 |
131 |
132 |
133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | 172 | 173 | 174 | 175 | 176 | 177 | 178 | 179 | 180 | 181 | 182 | 183 | 184 | 185 | 186 |
187 |
-------------------------------------------------------------------------------- /pages/home.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |

Home

5 |
6 |
7 | Basic information about LabelD. 8 |
9 |
10 | Read More 11 |
12 |
13 |
14 |
15 |
16 |

View options

17 |
    18 |
  • 19 | 23 |
    • 24 |
  • 25 | 29 |
    • 30 |
  • 31 | 35 |
    • 36 |
  • 37 | 41 |
    • 42 |
43 |
44 |
45 | Change location 46 |
47 | location_on 48 |
49 |
50 |
-------------------------------------------------------------------------------- /remodal/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Remodal example 7 | 8 | 9 | 10 | 11 | 25 | 26 | 27 |
28 | Modal №1
29 | Modal №2 30 |

31 | 32 |

Remodal

33 |

34 | Responsive, lightweight, fast, synchronized with CSS animations, fully customizable modal window plugin 35 | with declarative configuration and hash tracking. 36 |

37 |
38 | 39 |

Remodal

40 |

41 | Responsive, lightweight, fast, synchronized with CSS animations, fully customizable modal window plugin 42 | with declarative configuration and hash tracking. 43 |

44 |
45 | 46 |

Remodal

47 |

48 | Responsive, lightweight, fast, synchronized with CSS animations, fully customizable modal window plugin 49 | with declarative configuration and hash tracking. 50 |

51 |
52 | 53 |

Remodal

54 |

55 | Responsive, lightweight, fast, synchronized with CSS animations, fully customizable modal window plugin 56 | with declarative configuration and hash tracking. 57 |

58 |
59 | 60 |

Remodal

61 |

62 | Responsive, lightweight, fast, synchronized with CSS animations, fully customizable modal window plugin 63 | with declarative configuration and hash tracking. 64 |

65 |
66 | 67 |

Remodal

68 |

69 | Responsive, lightweight, fast, synchronized with CSS animations, fully customizable modal window plugin 70 | with declarative configuration and hash tracking. 71 |

72 |
73 | 74 |

Remodal

75 |

76 | Responsive, lightweight, fast, synchronized with CSS animations, fully customizable modal window plugin 77 | with declarative configuration and hash tracking. 78 |

79 |
80 | 81 |

Remodal

82 |

83 | Responsive, lightweight, fast, synchronized with CSS animations, fully customizable modal window plugin 84 | with declarative configuration and hash tracking. 85 |

86 |
87 | 88 |

Remodal

89 |

90 | Responsive, lightweight, fast, synchronized with CSS animations, fully customizable modal window plugin 91 | with declarative configuration and hash tracking. 92 |

93 |
94 | 95 |

Remodal

96 |

97 | Responsive, lightweight, fast, synchronized with CSS animations, fully customizable modal window plugin 98 | with declarative configuration and hash tracking. 99 |

100 |
101 | 102 |

Remodal

103 |

104 | Responsive, lightweight, fast, synchronized with CSS animations, fully customizable modal window plugin 105 | with declarative configuration and hash tracking. 106 |

107 |
108 | 109 |

Remodal

110 |

111 | Responsive, lightweight, fast, synchronized with CSS animations, fully customizable modal window plugin 112 | with declarative configuration and hash tracking. 113 |

114 |
115 | 116 |

Remodal

117 |

118 | Responsive, lightweight, fast, synchronized with CSS animations, fully customizable modal window plugin 119 | with declarative configuration and hash tracking. 120 |

121 |
122 | 123 |

Remodal

124 |

125 | Responsive, lightweight, fast, synchronized with CSS animations, fully customizable modal window plugin 126 | with declarative configuration and hash tracking. 127 |

128 |
129 | 130 |

Remodal

131 |

132 | Responsive, lightweight, fast, synchronized with CSS animations, fully customizable modal window plugin 133 | with declarative configuration and hash tracking. 134 |

135 |
136 | 137 |

Remodal

138 |

139 | Responsive, lightweight, fast, synchronized with CSS animations, fully customizable modal window plugin 140 | with declarative configuration and hash tracking. 141 |

142 |
143 | 144 |

Remodal

145 |

146 | Responsive, lightweight, fast, synchronized with CSS animations, fully customizable modal window plugin 147 | with declarative configuration and hash tracking. 148 |

149 |
150 | 151 |

Remodal

152 |

153 | Responsive, lightweight, fast, synchronized with CSS animations, fully customizable modal window plugin 154 | with declarative configuration and hash tracking. 155 |

156 |
157 | 158 |

Remodal

159 |

160 | Responsive, lightweight, fast, synchronized with CSS animations, fully customizable modal window plugin 161 | with declarative configuration and hash tracking. 162 |

163 |
164 | 165 |

Remodal

166 |

167 | Responsive, lightweight, fast, synchronized with CSS animations, fully customizable modal window plugin 168 | with declarative configuration and hash tracking. 169 |

170 |
171 | 172 |

Remodal

173 |

174 | Responsive, lightweight, fast, synchronized with CSS animations, fully customizable modal window plugin 175 | with declarative configuration and hash tracking. 176 |

177 |
178 | 179 |

Remodal

180 |

181 | Responsive, lightweight, fast, synchronized with CSS animations, fully customizable modal window plugin 182 | with declarative configuration and hash tracking. 183 |

184 |
185 | 186 |

Remodal

187 |

188 | Responsive, lightweight, fast, synchronized with CSS animations, fully customizable modal window plugin 189 | with declarative configuration and hash tracking. 190 |

191 |
192 | 193 |

Remodal

194 |

195 | Responsive, lightweight, fast, synchronized with CSS animations, fully customizable modal window plugin 196 | with declarative configuration and hash tracking. 197 |

198 |
199 | 200 |

Remodal

201 |

202 | Responsive, lightweight, fast, synchronized with CSS animations, fully customizable modal window plugin 203 | with declarative configuration and hash tracking. 204 |

205 |
206 |
207 | 208 | 221 | 222 |
223 |
224 |

Another one window

225 |

226 | Hello! 227 |

228 |
229 |
230 | 231 |
232 | 233 | 234 | 247 | 248 | 249 | 250 | 251 | 252 | 253 | 295 | 296 | 297 | -------------------------------------------------------------------------------- /remodal/js/remodal.min.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Remodal - v1.1.0 3 | * Responsive, lightweight, fast, synchronized with CSS animations, fully customizable modal window plugin with declarative configuration and hash tracking. 4 | * http://vodkabears.github.io/remodal/ 5 | * 6 | * Made by Ilya Makarov 7 | * Under MIT License 8 | */ 9 | 10 | !function(a,b){"function"==typeof define&&define.amd?define(["jquery"],function(c){return b(a,c)}):"object"==typeof exports?b(a,require("jquery")):b(a,a.jQuery||a.Zepto)}(this,function(a,b){"use strict";function c(a){if(w&&"none"===a.css("animation-name")&&"none"===a.css("-webkit-animation-name")&&"none"===a.css("-moz-animation-name")&&"none"===a.css("-o-animation-name")&&"none"===a.css("-ms-animation-name"))return 0;var b,c,d,e,f=a.css("animation-duration")||a.css("-webkit-animation-duration")||a.css("-moz-animation-duration")||a.css("-o-animation-duration")||a.css("-ms-animation-duration")||"0s",g=a.css("animation-delay")||a.css("-webkit-animation-delay")||a.css("-moz-animation-delay")||a.css("-o-animation-delay")||a.css("-ms-animation-delay")||"0s",h=a.css("animation-iteration-count")||a.css("-webkit-animation-iteration-count")||a.css("-moz-animation-iteration-count")||a.css("-o-animation-iteration-count")||a.css("-ms-animation-iteration-count")||"1";for(f=f.split(", "),g=g.split(", "),h=h.split(", "),e=0,c=f.length,b=Number.NEGATIVE_INFINITY;eb&&(b=d);return b}function d(){if(b(document.body).height()<=b(window).height())return 0;var a,c,d=document.createElement("div"),e=document.createElement("div");return d.style.visibility="hidden",d.style.width="100px",document.body.appendChild(d),a=d.offsetWidth,d.style.overflow="scroll",e.style.width="100%",d.appendChild(e),c=e.offsetWidth,d.parentNode.removeChild(d),a-c}function e(){if(!x){var a,c,e=b("html"),f=k("is-locked");e.hasClass(f)||(c=b(document.body),a=parseInt(c.css("padding-right"),10)+d(),c.css("padding-right",a+"px"),e.addClass(f))}}function f(){if(!x){var a,c,e=b("html"),f=k("is-locked");e.hasClass(f)&&(c=b(document.body),a=parseInt(c.css("padding-right"),10)-d(),c.css("padding-right",a+"px"),e.removeClass(f))}}function g(a,b,c,d){var e=k("is",b),f=[k("is",u.CLOSING),k("is",u.OPENING),k("is",u.CLOSED),k("is",u.OPENED)].join(" ");a.$bg.removeClass(f).addClass(e),a.$overlay.removeClass(f).addClass(e),a.$wrapper.removeClass(f).addClass(e),a.$modal.removeClass(f).addClass(e),a.state=b,!c&&a.$modal.trigger({type:b,reason:d},[{reason:d}])}function h(a,d,e){var f=0,g=function(a){a.target===this&&f++},h=function(a){a.target===this&&0===--f&&(b.each(["$bg","$overlay","$wrapper","$modal"],function(a,b){e[b].off(r+" "+s)}),d())};b.each(["$bg","$overlay","$wrapper","$modal"],function(a,b){e[b].on(r,g).on(s,h)}),a(),0===c(e.$bg)&&0===c(e.$overlay)&&0===c(e.$wrapper)&&0===c(e.$modal)&&(b.each(["$bg","$overlay","$wrapper","$modal"],function(a,b){e[b].off(r+" "+s)}),d())}function i(a){a.state!==u.CLOSED&&(b.each(["$bg","$overlay","$wrapper","$modal"],function(b,c){a[c].off(r+" "+s)}),a.$bg.removeClass(a.settings.modifier),a.$overlay.removeClass(a.settings.modifier).hide(),a.$wrapper.hide(),f(),g(a,u.CLOSED,!0))}function j(a){var b,c,d,e,f={};for(a=a.replace(/\s*:\s*/g,":").replace(/\s*,\s*/g,","),b=a.split(","),e=0,c=b.length;e").addClass(k("overlay")+" "+k("is",u.CLOSED)).hide(),e.append(f.$overlay)),f.$bg=b("."+k("bg")).addClass(k("is",u.CLOSED)),f.$modal=a.addClass(q+" "+k("is-initialized")+" "+f.settings.modifier+" "+k("is",u.CLOSED)).attr("tabindex","-1"),f.$wrapper=b("
").addClass(k("wrapper")+" "+f.settings.modifier+" "+k("is",u.CLOSED)).hide().append(f.$modal),e.append(f.$wrapper),f.$wrapper.on("click."+q,'[data-remodal-action="close"]',function(a){a.preventDefault(),f.close()}),f.$wrapper.on("click."+q,'[data-remodal-action="cancel"]',function(a){a.preventDefault(),f.$modal.trigger(v.CANCELLATION),f.settings.closeOnCancel&&f.close(v.CANCELLATION)}),f.$wrapper.on("click."+q,'[data-remodal-action="confirm"]',function(a){a.preventDefault(),f.$modal.trigger(v.CONFIRMATION),f.settings.closeOnConfirm&&f.close(v.CONFIRMATION)}),f.$wrapper.on("click."+q,function(a){var c=b(a.target);c.hasClass(k("wrapper"))&&f.settings.closeOnOutsideClick&&f.close()})}var n,o,p="remodal",q=a.REMODAL_GLOBALS&&a.REMODAL_GLOBALS.NAMESPACE||p,r=b.map(["animationstart","webkitAnimationStart","MSAnimationStart","oAnimationStart"],function(a){return a+"."+q}).join(" "),s=b.map(["animationend","webkitAnimationEnd","MSAnimationEnd","oAnimationEnd"],function(a){return a+"."+q}).join(" "),t=b.extend({hashTracking:!0,closeOnConfirm:!0,closeOnCancel:!0,closeOnEscape:!0,closeOnOutsideClick:!0,modifier:"",appendTo:null},a.REMODAL_GLOBALS&&a.REMODAL_GLOBALS.DEFAULTS),u={CLOSING:"closing",CLOSED:"closed",OPENING:"opening",OPENED:"opened"},v={CONFIRMATION:"confirmation",CANCELLATION:"cancellation"},w=function(){var a=document.createElement("div").style;return void 0!==a.animationName||void 0!==a.WebkitAnimationName||void 0!==a.MozAnimationName||void 0!==a.msAnimationName||void 0!==a.OAnimationName}(),x=/iPad|iPhone|iPod/.test(navigator.platform);m.prototype.open=function(){var a,c=this;c.state!==u.OPENING&&c.state!==u.CLOSING&&(a=c.$modal.attr("data-remodal-id"),a&&c.settings.hashTracking&&(o=b(window).scrollTop(),location.hash=a),n&&n!==c&&i(n),n=c,e(),c.$bg.addClass(c.settings.modifier),c.$overlay.addClass(c.settings.modifier).show(),c.$wrapper.show().scrollTop(0),c.$modal.focus(),h(function(){g(c,u.OPENING)},function(){g(c,u.OPENED)},c))},m.prototype.close=function(a){var c=this;c.state!==u.OPENING&&c.state!==u.CLOSING&&(c.settings.hashTracking&&c.$modal.attr("data-remodal-id")===location.hash.substr(1)&&(location.hash="",b(window).scrollTop(o)),h(function(){g(c,u.CLOSING,!1,a)},function(){c.$bg.removeClass(c.settings.modifier),c.$overlay.removeClass(c.settings.modifier).hide(),c.$wrapper.hide(),f(),g(c,u.CLOSED,!1,a)},c))},m.prototype.getState=function(){return this.state},m.prototype.destroy=function(){var a,c=b[p].lookup;i(this),this.$wrapper.remove(),delete c[this.index],a=b.grep(c,function(a){return!!a}).length,0===a&&(this.$overlay.remove(),this.$bg.removeClass(k("is",u.CLOSING)+" "+k("is",u.OPENING)+" "+k("is",u.CLOSED)+" "+k("is",u.OPENED)))},b[p]={lookup:[]},b.fn[p]=function(a){var c,d;return this.each(function(e,f){d=b(f),null==d.data(p)?(c=new m(d,a),d.data(p,c.index),c.settings.hashTracking&&d.attr("data-remodal-id")===location.hash.substr(1)&&c.open()):c=b[p].lookup[d.data(p)]}),c},b(document).ready(function(){b(document).on("click","[data-remodal-target]",function(a){a.preventDefault();var c=a.currentTarget,d=c.getAttribute("data-remodal-target"),e=b('[data-remodal-id="'+d+'"]');b[p].lookup[e.data(p)].open()}),b(document).find("."+q).each(function(a,c){var d=b(c),e=d.data("remodal-options");e?("string"==typeof e||e instanceof String)&&(e=j(e)):e={},d[p](e)}),b(document).on("keydown."+q,function(a){n&&n.settings.closeOnEscape&&n.state===u.OPENED&&27===a.keyCode&&n.close()}),b(window).on("hashchange."+q,l)})}); -------------------------------------------------------------------------------- /remodal/style/remodal-default-theme.css: -------------------------------------------------------------------------------- 1 | /* 2 | * Remodal - v1.1.0 3 | * Responsive, lightweight, fast, synchronized with CSS animations, fully customizable modal window plugin with declarative configuration and hash tracking. 4 | * http://vodkabears.github.io/remodal/ 5 | * 6 | * Made by Ilya Makarov 7 | * Under MIT License 8 | */ 9 | 10 | /* ========================================================================== 11 | Remodal's default mobile first theme 12 | ========================================================================== */ 13 | 14 | /* Default theme styles for the background */ 15 | 16 | .remodal-bg.remodal-is-opening, 17 | .remodal-bg.remodal-is-opened { 18 | -webkit-filter: blur(3px); 19 | filter: blur(3px); 20 | } 21 | 22 | /* Default theme styles of the overlay */ 23 | 24 | .remodal-overlay { 25 | background: rgba(43, 46, 56, 0.9); 26 | } 27 | 28 | .remodal-overlay.remodal-is-opening, 29 | .remodal-overlay.remodal-is-closing { 30 | -webkit-animation-duration: 0.3s; 31 | animation-duration: 0.3s; 32 | -webkit-animation-fill-mode: forwards; 33 | animation-fill-mode: forwards; 34 | } 35 | 36 | .remodal-overlay.remodal-is-opening { 37 | -webkit-animation-name: remodal-overlay-opening-keyframes; 38 | animation-name: remodal-overlay-opening-keyframes; 39 | } 40 | 41 | .remodal-overlay.remodal-is-closing { 42 | -webkit-animation-name: remodal-overlay-closing-keyframes; 43 | animation-name: remodal-overlay-closing-keyframes; 44 | } 45 | 46 | /* Default theme styles of the wrapper */ 47 | 48 | .remodal-wrapper { 49 | padding: 10px 10px 0; 50 | } 51 | 52 | /* Default theme styles of the modal dialog */ 53 | 54 | .remodal { 55 | box-sizing: border-box; 56 | width: 100%; 57 | margin-bottom: 10px; 58 | padding: 35px; 59 | 60 | -webkit-transform: translate3d(0, 0, 0); 61 | transform: translate3d(0, 0, 0); 62 | 63 | color: #2b2e38; 64 | background: #fff; 65 | } 66 | 67 | .remodal.remodal-is-opening, 68 | .remodal.remodal-is-closing { 69 | -webkit-animation-duration: 0.3s; 70 | animation-duration: 0.3s; 71 | -webkit-animation-fill-mode: forwards; 72 | animation-fill-mode: forwards; 73 | } 74 | 75 | .remodal.remodal-is-opening { 76 | -webkit-animation-name: remodal-opening-keyframes; 77 | animation-name: remodal-opening-keyframes; 78 | } 79 | 80 | .remodal.remodal-is-closing { 81 | -webkit-animation-name: remodal-closing-keyframes; 82 | animation-name: remodal-closing-keyframes; 83 | } 84 | 85 | /* Vertical align of the modal dialog */ 86 | 87 | .remodal, 88 | .remodal-wrapper:after { 89 | vertical-align: middle; 90 | } 91 | 92 | /* Close button */ 93 | 94 | .remodal-close { 95 | position: absolute; 96 | top: 0; 97 | left: 0; 98 | 99 | display: block; 100 | overflow: visible; 101 | 102 | width: 35px; 103 | height: 35px; 104 | margin: 0; 105 | padding: 0; 106 | 107 | cursor: pointer; 108 | -webkit-transition: color 0.2s; 109 | transition: color 0.2s; 110 | text-decoration: none; 111 | 112 | color: #95979c; 113 | border: 0; 114 | outline: 0; 115 | background: transparent; 116 | } 117 | 118 | .remodal-close:hover, 119 | .remodal-close:focus { 120 | color: #2b2e38; 121 | } 122 | 123 | .remodal-close:before { 124 | font-family: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif !important; 125 | font-size: 25px; 126 | line-height: 35px; 127 | 128 | position: absolute; 129 | top: 0; 130 | left: 0; 131 | 132 | display: block; 133 | 134 | width: 35px; 135 | 136 | content: "\00d7"; 137 | text-align: center; 138 | } 139 | 140 | /* Dialog buttons */ 141 | 142 | .remodal-confirm, 143 | .remodal-cancel { 144 | font: inherit; 145 | 146 | display: inline-block; 147 | overflow: visible; 148 | 149 | min-width: 110px; 150 | margin: 0; 151 | padding: 12px 0; 152 | 153 | cursor: pointer; 154 | -webkit-transition: background 0.2s; 155 | transition: background 0.2s; 156 | text-align: center; 157 | vertical-align: middle; 158 | text-decoration: none; 159 | 160 | border: 0; 161 | outline: 0; 162 | } 163 | 164 | .remodal-confirm { 165 | color: #fff; 166 | background: #81c784; 167 | } 168 | 169 | .remodal-confirm:hover, 170 | .remodal-confirm:focus { 171 | background: #66bb6a; 172 | } 173 | 174 | .remodal-cancel { 175 | color: #fff; 176 | background: #e57373; 177 | } 178 | 179 | .remodal-cancel:hover, 180 | .remodal-cancel:focus { 181 | background: #ef5350; 182 | } 183 | 184 | /* Remove inner padding and border in Firefox 4+ for the button tag. */ 185 | 186 | .remodal-confirm::-moz-focus-inner, 187 | .remodal-cancel::-moz-focus-inner, 188 | .remodal-close::-moz-focus-inner { 189 | padding: 0; 190 | 191 | border: 0; 192 | } 193 | 194 | /* Keyframes 195 | ========================================================================== */ 196 | 197 | @-webkit-keyframes remodal-opening-keyframes { 198 | from { 199 | -webkit-transform: scale(1.05); 200 | transform: scale(1.05); 201 | 202 | opacity: 0; 203 | } 204 | to { 205 | -webkit-transform: none; 206 | transform: none; 207 | 208 | opacity: 1; 209 | } 210 | } 211 | 212 | @keyframes remodal-opening-keyframes { 213 | from { 214 | -webkit-transform: scale(1.05); 215 | transform: scale(1.05); 216 | 217 | opacity: 0; 218 | } 219 | to { 220 | -webkit-transform: none; 221 | transform: none; 222 | 223 | opacity: 1; 224 | } 225 | } 226 | 227 | @-webkit-keyframes remodal-closing-keyframes { 228 | from { 229 | -webkit-transform: scale(1); 230 | transform: scale(1); 231 | 232 | opacity: 1; 233 | } 234 | to { 235 | -webkit-transform: scale(0.95); 236 | transform: scale(0.95); 237 | 238 | opacity: 0; 239 | } 240 | } 241 | 242 | @keyframes remodal-closing-keyframes { 243 | from { 244 | -webkit-transform: scale(1); 245 | transform: scale(1); 246 | 247 | opacity: 1; 248 | } 249 | to { 250 | -webkit-transform: scale(0.95); 251 | transform: scale(0.95); 252 | 253 | opacity: 0; 254 | } 255 | } 256 | 257 | @-webkit-keyframes remodal-overlay-opening-keyframes { 258 | from { 259 | opacity: 0; 260 | } 261 | to { 262 | opacity: 1; 263 | } 264 | } 265 | 266 | @keyframes remodal-overlay-opening-keyframes { 267 | from { 268 | opacity: 0; 269 | } 270 | to { 271 | opacity: 1; 272 | } 273 | } 274 | 275 | @-webkit-keyframes remodal-overlay-closing-keyframes { 276 | from { 277 | opacity: 1; 278 | } 279 | to { 280 | opacity: 0; 281 | } 282 | } 283 | 284 | @keyframes remodal-overlay-closing-keyframes { 285 | from { 286 | opacity: 1; 287 | } 288 | to { 289 | opacity: 0; 290 | } 291 | } 292 | 293 | /* Media queries 294 | ========================================================================== */ 295 | 296 | @media only screen and (min-width: 641px) { 297 | .remodal { 298 | max-width: 700px; 299 | } 300 | } 301 | 302 | /* IE8 303 | ========================================================================== */ 304 | 305 | .lt-ie9 .remodal-overlay { 306 | background: #2b2e38; 307 | } 308 | 309 | .lt-ie9 .remodal { 310 | width: 700px; 311 | } 312 | -------------------------------------------------------------------------------- /remodal/style/remodal.css: -------------------------------------------------------------------------------- 1 | /* 2 | * Remodal - v1.1.0 3 | * Responsive, lightweight, fast, synchronized with CSS animations, fully customizable modal window plugin with declarative configuration and hash tracking. 4 | * http://vodkabears.github.io/remodal/ 5 | * 6 | * Made by Ilya Makarov 7 | * Under MIT License 8 | */ 9 | 10 | /* ========================================================================== 11 | Remodal's necessary styles 12 | ========================================================================== */ 13 | 14 | /* Hide scroll bar */ 15 | 16 | html.remodal-is-locked { 17 | overflow: hidden; 18 | 19 | -ms-touch-action: none; 20 | touch-action: none; 21 | } 22 | 23 | /* Anti FOUC */ 24 | 25 | .remodal, 26 | [data-remodal-id] { 27 | display: none; 28 | } 29 | 30 | /* Necessary styles of the overlay */ 31 | 32 | .remodal-overlay { 33 | position: fixed; 34 | z-index: 9999; 35 | top: -5000px; 36 | right: -5000px; 37 | bottom: -5000px; 38 | left: -5000px; 39 | 40 | display: none; 41 | } 42 | 43 | /* Necessary styles of the wrapper */ 44 | 45 | .remodal-wrapper { 46 | position: fixed; 47 | z-index: 10000; 48 | top: 0; 49 | right: 0; 50 | bottom: 0; 51 | left: 0; 52 | 53 | display: none; 54 | overflow: auto; 55 | 56 | text-align: center; 57 | 58 | -webkit-overflow-scrolling: touch; 59 | } 60 | 61 | .remodal-wrapper:after { 62 | display: inline-block; 63 | 64 | height: 100%; 65 | margin-left: -0.05em; 66 | 67 | content: ""; 68 | } 69 | 70 | /* Fix iPad, iPhone glitches */ 71 | 72 | .remodal-overlay, 73 | .remodal-wrapper { 74 | -webkit-backface-visibility: hidden; 75 | backface-visibility: hidden; 76 | } 77 | 78 | /* Necessary styles of the modal dialog */ 79 | 80 | .remodal { 81 | position: relative; 82 | 83 | outline: none; 84 | 85 | -webkit-text-size-adjust: 100%; 86 | -ms-text-size-adjust: 100%; 87 | text-size-adjust: 100%; 88 | } 89 | 90 | .remodal-is-initialized { 91 | /* Disable Anti-FOUC */ 92 | display: inline-block; 93 | } 94 | -------------------------------------------------------------------------------- /style/material_icons.css: -------------------------------------------------------------------------------- 1 | /* fallback */ 2 | @font-face { 3 | font-family: 'Material Icons'; 4 | font-style: normal; 5 | font-weight: 400; 6 | src: local('Material Icons'), local('MaterialIcons-Regular'), url(https://fonts.gstatic.com/s/materialicons/v17/2fcrYFNaTjcS6g4U3t-Y5UEw0lE80llgEseQY3FEmqw.woff2) format('woff2'); 7 | } 8 | 9 | .material-icons { 10 | font-family: 'Material Icons'; 11 | font-weight: normal; 12 | font-style: normal; 13 | font-size: 24px; 14 | line-height: 1; 15 | letter-spacing: normal; 16 | text-transform: none; 17 | display: inline-block; 18 | white-space: nowrap; 19 | word-wrap: normal; 20 | direction: ltr; 21 | -webkit-font-feature-settings: 'liga'; 22 | -webkit-font-smoothing: antialiased; 23 | } -------------------------------------------------------------------------------- /style/modal.css: -------------------------------------------------------------------------------- 1 | body { 2 | /*padding-top: 20px;*/ 3 | /*padding-left: 20px;*/ 4 | box-sizing: border-box; 5 | } 6 | 7 | .mdl-dialog { 8 | border: none; 9 | box-shadow: 0 9px 46px 8px rgba(0, 0, 0, 0.14), 0 11px 15px -7px rgba(0, 0, 0, 0.12), 0 24px 38px 3px rgba(0, 0, 0, 0.2); 10 | width: 280px; } 11 | .mdl-dialog__title { 12 | padding: 24px 24px 0; 13 | margin: 0; 14 | font-size: 2.5rem; } 15 | .mdl-dialog__actions { 16 | padding: 8px 8px 8px 24px; 17 | display: -webkit-flex; 18 | display: -ms-flexbox; 19 | display: flex; 20 | -webkit-flex-direction: row-reverse; 21 | -ms-flex-direction: row-reverse; 22 | flex-direction: row-reverse; 23 | -webkit-flex-wrap: wrap; 24 | -ms-flex-wrap: wrap; 25 | flex-wrap: wrap; } 26 | .mdl-dialog__actions > * { 27 | margin-right: 8px; 28 | height: 36px; } 29 | .mdl-dialog__actions > *:first-child { 30 | margin-right: 0; } 31 | .mdl-dialog__actions--full-width { 32 | padding: 0 0 8px 0; } 33 | .mdl-dialog__actions--full-width > * { 34 | height: 48px; 35 | -webkit-flex: 0 0 100%; 36 | -ms-flex: 0 0 100%; 37 | flex: 0 0 100%; 38 | padding-right: 16px; 39 | margin-right: 0; 40 | text-align: right; } 41 | .mdl-dialog__content { 42 | padding: 20px 24px 24px 24px; 43 | color: rgba(0,0,0, 0.54); } -------------------------------------------------------------------------------- /style/roboto_etc.css: -------------------------------------------------------------------------------- 1 | /* cyrillic-ext */ 2 | @font-face { 3 | font-family: 'Roboto'; 4 | font-style: normal; 5 | font-weight: 100; 6 | src: local('Roboto Thin'), local('Roboto-Thin'), url(https://fonts.gstatic.com/s/roboto/v15/ty9dfvLAziwdqQ2dHoyjphkAz4rYn47Zy2rvigWQf6w.woff2) format('woff2'); 7 | unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F; 8 | } 9 | /* cyrillic */ 10 | @font-face { 11 | font-family: 'Roboto'; 12 | font-style: normal; 13 | font-weight: 100; 14 | src: local('Roboto Thin'), local('Roboto-Thin'), url(https://fonts.gstatic.com/s/roboto/v15/frNV30OaYdlFRtH2VnZZdhkAz4rYn47Zy2rvigWQf6w.woff2) format('woff2'); 15 | unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; 16 | } 17 | /* greek-ext */ 18 | @font-face { 19 | font-family: 'Roboto'; 20 | font-style: normal; 21 | font-weight: 100; 22 | src: local('Roboto Thin'), local('Roboto-Thin'), url(https://fonts.gstatic.com/s/roboto/v15/gwVJDERN2Amz39wrSoZ7FxkAz4rYn47Zy2rvigWQf6w.woff2) format('woff2'); 23 | unicode-range: U+1F00-1FFF; 24 | } 25 | /* greek */ 26 | @font-face { 27 | font-family: 'Roboto'; 28 | font-style: normal; 29 | font-weight: 100; 30 | src: local('Roboto Thin'), local('Roboto-Thin'), url(https://fonts.gstatic.com/s/roboto/v15/aZMswpodYeVhtRvuABJWvBkAz4rYn47Zy2rvigWQf6w.woff2) format('woff2'); 31 | unicode-range: U+0370-03FF; 32 | } 33 | /* vietnamese */ 34 | @font-face { 35 | font-family: 'Roboto'; 36 | font-style: normal; 37 | font-weight: 100; 38 | src: local('Roboto Thin'), local('Roboto-Thin'), url(https://fonts.gstatic.com/s/roboto/v15/VvXUGKZXbHtX_S_VCTLpGhkAz4rYn47Zy2rvigWQf6w.woff2) format('woff2'); 39 | unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB; 40 | } 41 | /* latin-ext */ 42 | @font-face { 43 | font-family: 'Roboto'; 44 | font-style: normal; 45 | font-weight: 100; 46 | src: local('Roboto Thin'), local('Roboto-Thin'), url(https://fonts.gstatic.com/s/roboto/v15/e7MeVAyvogMqFwwl61PKhBkAz4rYn47Zy2rvigWQf6w.woff2) format('woff2'); 47 | unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; 48 | } 49 | /* latin */ 50 | @font-face { 51 | font-family: 'Roboto'; 52 | font-style: normal; 53 | font-weight: 100; 54 | src: local('Roboto Thin'), local('Roboto-Thin'), url(https://fonts.gstatic.com/s/roboto/v15/2tsd397wLxj96qwHyNIkxHYhjbSpvc47ee6xR_80Hnw.woff2) format('woff2'); 55 | unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000; 56 | } 57 | /* cyrillic-ext */ 58 | @font-face { 59 | font-family: 'Roboto'; 60 | font-style: normal; 61 | font-weight: 300; 62 | src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v15/0eC6fl06luXEYWpBSJvXCIX0hVgzZQUfRDuZrPvH3D8.woff2) format('woff2'); 63 | unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F; 64 | } 65 | /* cyrillic */ 66 | @font-face { 67 | font-family: 'Roboto'; 68 | font-style: normal; 69 | font-weight: 300; 70 | src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v15/Fl4y0QdOxyyTHEGMXX8kcYX0hVgzZQUfRDuZrPvH3D8.woff2) format('woff2'); 71 | unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; 72 | } 73 | /* greek-ext */ 74 | @font-face { 75 | font-family: 'Roboto'; 76 | font-style: normal; 77 | font-weight: 300; 78 | src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v15/-L14Jk06m6pUHB-5mXQQnYX0hVgzZQUfRDuZrPvH3D8.woff2) format('woff2'); 79 | unicode-range: U+1F00-1FFF; 80 | } 81 | /* greek */ 82 | @font-face { 83 | font-family: 'Roboto'; 84 | font-style: normal; 85 | font-weight: 300; 86 | src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v15/I3S1wsgSg9YCurV6PUkTOYX0hVgzZQUfRDuZrPvH3D8.woff2) format('woff2'); 87 | unicode-range: U+0370-03FF; 88 | } 89 | /* vietnamese */ 90 | @font-face { 91 | font-family: 'Roboto'; 92 | font-style: normal; 93 | font-weight: 300; 94 | src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v15/NYDWBdD4gIq26G5XYbHsFIX0hVgzZQUfRDuZrPvH3D8.woff2) format('woff2'); 95 | unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB; 96 | } 97 | /* latin-ext */ 98 | @font-face { 99 | font-family: 'Roboto'; 100 | font-style: normal; 101 | font-weight: 300; 102 | src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v15/Pru33qjShpZSmG3z6VYwnYX0hVgzZQUfRDuZrPvH3D8.woff2) format('woff2'); 103 | unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; 104 | } 105 | /* latin */ 106 | @font-face { 107 | font-family: 'Roboto'; 108 | font-style: normal; 109 | font-weight: 300; 110 | src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v15/Hgo13k-tfSpn0qi1SFdUfZBw1xU1rKptJj_0jans920.woff2) format('woff2'); 111 | unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000; 112 | } 113 | /* cyrillic-ext */ 114 | @font-face { 115 | font-family: 'Roboto'; 116 | font-style: normal; 117 | font-weight: 400; 118 | src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v15/sTdaA6j0Psb920Vjv-mrzH-_kf6ByYO6CLYdB4HQE-Y.woff2) format('woff2'); 119 | unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F; 120 | } 121 | /* cyrillic */ 122 | @font-face { 123 | font-family: 'Roboto'; 124 | font-style: normal; 125 | font-weight: 400; 126 | src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v15/uYECMKoHcO9x1wdmbyHIm3-_kf6ByYO6CLYdB4HQE-Y.woff2) format('woff2'); 127 | unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; 128 | } 129 | /* greek-ext */ 130 | @font-face { 131 | font-family: 'Roboto'; 132 | font-style: normal; 133 | font-weight: 400; 134 | src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v15/tnj4SB6DNbdaQnsM8CFqBX-_kf6ByYO6CLYdB4HQE-Y.woff2) format('woff2'); 135 | unicode-range: U+1F00-1FFF; 136 | } 137 | /* greek */ 138 | @font-face { 139 | font-family: 'Roboto'; 140 | font-style: normal; 141 | font-weight: 400; 142 | src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v15/_VYFx-s824kXq_Ul2BHqYH-_kf6ByYO6CLYdB4HQE-Y.woff2) format('woff2'); 143 | unicode-range: U+0370-03FF; 144 | } 145 | /* vietnamese */ 146 | @font-face { 147 | font-family: 'Roboto'; 148 | font-style: normal; 149 | font-weight: 400; 150 | src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v15/NJ4vxlgWwWbEsv18dAhqnn-_kf6ByYO6CLYdB4HQE-Y.woff2) format('woff2'); 151 | unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB; 152 | } 153 | /* latin-ext */ 154 | @font-face { 155 | font-family: 'Roboto'; 156 | font-style: normal; 157 | font-weight: 400; 158 | src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v15/Ks_cVxiCiwUWVsFWFA3Bjn-_kf6ByYO6CLYdB4HQE-Y.woff2) format('woff2'); 159 | unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; 160 | } 161 | /* latin */ 162 | @font-face { 163 | font-family: 'Roboto'; 164 | font-style: normal; 165 | font-weight: 400; 166 | src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v15/oMMgfZMQthOryQo9n22dcuvvDin1pK8aKteLpeZ5c0A.woff2) format('woff2'); 167 | unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000; 168 | } 169 | /* cyrillic-ext */ 170 | @font-face { 171 | font-family: 'Roboto'; 172 | font-style: normal; 173 | font-weight: 500; 174 | src: local('Roboto Medium'), local('Roboto-Medium'), url(https://fonts.gstatic.com/s/roboto/v15/ZLqKeelYbATG60EpZBSDy4X0hVgzZQUfRDuZrPvH3D8.woff2) format('woff2'); 175 | unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F; 176 | } 177 | /* cyrillic */ 178 | @font-face { 179 | font-family: 'Roboto'; 180 | font-style: normal; 181 | font-weight: 500; 182 | src: local('Roboto Medium'), local('Roboto-Medium'), url(https://fonts.gstatic.com/s/roboto/v15/oHi30kwQWvpCWqAhzHcCSIX0hVgzZQUfRDuZrPvH3D8.woff2) format('woff2'); 183 | unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; 184 | } 185 | /* greek-ext */ 186 | @font-face { 187 | font-family: 'Roboto'; 188 | font-style: normal; 189 | font-weight: 500; 190 | src: local('Roboto Medium'), local('Roboto-Medium'), url(https://fonts.gstatic.com/s/roboto/v15/rGvHdJnr2l75qb0YND9NyIX0hVgzZQUfRDuZrPvH3D8.woff2) format('woff2'); 191 | unicode-range: U+1F00-1FFF; 192 | } 193 | /* greek */ 194 | @font-face { 195 | font-family: 'Roboto'; 196 | font-style: normal; 197 | font-weight: 500; 198 | src: local('Roboto Medium'), local('Roboto-Medium'), url(https://fonts.gstatic.com/s/roboto/v15/mx9Uck6uB63VIKFYnEMXrYX0hVgzZQUfRDuZrPvH3D8.woff2) format('woff2'); 199 | unicode-range: U+0370-03FF; 200 | } 201 | /* vietnamese */ 202 | @font-face { 203 | font-family: 'Roboto'; 204 | font-style: normal; 205 | font-weight: 500; 206 | src: local('Roboto Medium'), local('Roboto-Medium'), url(https://fonts.gstatic.com/s/roboto/v15/mbmhprMH69Zi6eEPBYVFhYX0hVgzZQUfRDuZrPvH3D8.woff2) format('woff2'); 207 | unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB; 208 | } 209 | /* latin-ext */ 210 | @font-face { 211 | font-family: 'Roboto'; 212 | font-style: normal; 213 | font-weight: 500; 214 | src: local('Roboto Medium'), local('Roboto-Medium'), url(https://fonts.gstatic.com/s/roboto/v15/oOeFwZNlrTefzLYmlVV1UIX0hVgzZQUfRDuZrPvH3D8.woff2) format('woff2'); 215 | unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; 216 | } 217 | /* latin */ 218 | @font-face { 219 | font-family: 'Roboto'; 220 | font-style: normal; 221 | font-weight: 500; 222 | src: local('Roboto Medium'), local('Roboto-Medium'), url(https://fonts.gstatic.com/s/roboto/v15/RxZJdnzeo3R5zSexge8UUZBw1xU1rKptJj_0jans920.woff2) format('woff2'); 223 | unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000; 224 | } 225 | /* cyrillic-ext */ 226 | @font-face { 227 | font-family: 'Roboto'; 228 | font-style: normal; 229 | font-weight: 700; 230 | src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v15/77FXFjRbGzN4aCrSFhlh3oX0hVgzZQUfRDuZrPvH3D8.woff2) format('woff2'); 231 | unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F; 232 | } 233 | /* cyrillic */ 234 | @font-face { 235 | font-family: 'Roboto'; 236 | font-style: normal; 237 | font-weight: 700; 238 | src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v15/isZ-wbCXNKAbnjo6_TwHToX0hVgzZQUfRDuZrPvH3D8.woff2) format('woff2'); 239 | unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; 240 | } 241 | /* greek-ext */ 242 | @font-face { 243 | font-family: 'Roboto'; 244 | font-style: normal; 245 | font-weight: 700; 246 | src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v15/UX6i4JxQDm3fVTc1CPuwqoX0hVgzZQUfRDuZrPvH3D8.woff2) format('woff2'); 247 | unicode-range: U+1F00-1FFF; 248 | } 249 | /* greek */ 250 | @font-face { 251 | font-family: 'Roboto'; 252 | font-style: normal; 253 | font-weight: 700; 254 | src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v15/jSN2CGVDbcVyCnfJfjSdfIX0hVgzZQUfRDuZrPvH3D8.woff2) format('woff2'); 255 | unicode-range: U+0370-03FF; 256 | } 257 | /* vietnamese */ 258 | @font-face { 259 | font-family: 'Roboto'; 260 | font-style: normal; 261 | font-weight: 700; 262 | src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v15/PwZc-YbIL414wB9rB1IAPYX0hVgzZQUfRDuZrPvH3D8.woff2) format('woff2'); 263 | unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB; 264 | } 265 | /* latin-ext */ 266 | @font-face { 267 | font-family: 'Roboto'; 268 | font-style: normal; 269 | font-weight: 700; 270 | src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v15/97uahxiqZRoncBaCEI3aW4X0hVgzZQUfRDuZrPvH3D8.woff2) format('woff2'); 271 | unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; 272 | } 273 | /* latin */ 274 | @font-face { 275 | font-family: 'Roboto'; 276 | font-style: normal; 277 | font-weight: 700; 278 | src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v15/d-6IYplOFocCacKzxwXSOJBw1xU1rKptJj_0jans920.woff2) format('woff2'); 279 | unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000; 280 | } 281 | /* cyrillic-ext */ 282 | @font-face { 283 | font-family: 'Roboto'; 284 | font-style: normal; 285 | font-weight: 900; 286 | src: local('Roboto Black'), local('Roboto-Black'), url(https://fonts.gstatic.com/s/roboto/v15/s7gftie1JANC-QmDJvMWZoX0hVgzZQUfRDuZrPvH3D8.woff2) format('woff2'); 287 | unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F; 288 | } 289 | /* cyrillic */ 290 | @font-face { 291 | font-family: 'Roboto'; 292 | font-style: normal; 293 | font-weight: 900; 294 | src: local('Roboto Black'), local('Roboto-Black'), url(https://fonts.gstatic.com/s/roboto/v15/3Y_xCyt7TNunMGg0Et2pnoX0hVgzZQUfRDuZrPvH3D8.woff2) format('woff2'); 295 | unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; 296 | } 297 | /* greek-ext */ 298 | @font-face { 299 | font-family: 'Roboto'; 300 | font-style: normal; 301 | font-weight: 900; 302 | src: local('Roboto Black'), local('Roboto-Black'), url(https://fonts.gstatic.com/s/roboto/v15/WeQRRE07FDkIrr29oHQgHIX0hVgzZQUfRDuZrPvH3D8.woff2) format('woff2'); 303 | unicode-range: U+1F00-1FFF; 304 | } 305 | /* greek */ 306 | @font-face { 307 | font-family: 'Roboto'; 308 | font-style: normal; 309 | font-weight: 900; 310 | src: local('Roboto Black'), local('Roboto-Black'), url(https://fonts.gstatic.com/s/roboto/v15/jyIYROCkJM3gZ4KV00YXOIX0hVgzZQUfRDuZrPvH3D8.woff2) format('woff2'); 311 | unicode-range: U+0370-03FF; 312 | } 313 | /* vietnamese */ 314 | @font-face { 315 | font-family: 'Roboto'; 316 | font-style: normal; 317 | font-weight: 900; 318 | src: local('Roboto Black'), local('Roboto-Black'), url(https://fonts.gstatic.com/s/roboto/v15/phsu-QZXz1JBv0PbFoPmEIX0hVgzZQUfRDuZrPvH3D8.woff2) format('woff2'); 319 | unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB; 320 | } 321 | /* latin-ext */ 322 | @font-face { 323 | font-family: 'Roboto'; 324 | font-style: normal; 325 | font-weight: 900; 326 | src: local('Roboto Black'), local('Roboto-Black'), url(https://fonts.gstatic.com/s/roboto/v15/9_7S_tWeGDh5Pq3u05RVkoX0hVgzZQUfRDuZrPvH3D8.woff2) format('woff2'); 327 | unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; 328 | } 329 | /* latin */ 330 | @font-face { 331 | font-family: 'Roboto'; 332 | font-style: normal; 333 | font-weight: 900; 334 | src: local('Roboto Black'), local('Roboto-Black'), url(https://fonts.gstatic.com/s/roboto/v15/mnpfi9pxYH-Go5UiibESIpBw1xU1rKptJj_0jans920.woff2) format('woff2'); 335 | unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000; 336 | } 337 | /* cyrillic-ext */ 338 | @font-face { 339 | font-family: 'Roboto'; 340 | font-style: italic; 341 | font-weight: 400; 342 | src: local('Roboto Italic'), local('Roboto-Italic'), url(https://fonts.gstatic.com/s/roboto/v15/WxrXJa0C3KdtC7lMafG4dRkAz4rYn47Zy2rvigWQf6w.woff2) format('woff2'); 343 | unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F; 344 | } 345 | /* cyrillic */ 346 | @font-face { 347 | font-family: 'Roboto'; 348 | font-style: italic; 349 | font-weight: 400; 350 | src: local('Roboto Italic'), local('Roboto-Italic'), url(https://fonts.gstatic.com/s/roboto/v15/OpXUqTo0UgQQhGj_SFdLWBkAz4rYn47Zy2rvigWQf6w.woff2) format('woff2'); 351 | unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; 352 | } 353 | /* greek-ext */ 354 | @font-face { 355 | font-family: 'Roboto'; 356 | font-style: italic; 357 | font-weight: 400; 358 | src: local('Roboto Italic'), local('Roboto-Italic'), url(https://fonts.gstatic.com/s/roboto/v15/1hZf02POANh32k2VkgEoUBkAz4rYn47Zy2rvigWQf6w.woff2) format('woff2'); 359 | unicode-range: U+1F00-1FFF; 360 | } 361 | /* greek */ 362 | @font-face { 363 | font-family: 'Roboto'; 364 | font-style: italic; 365 | font-weight: 400; 366 | src: local('Roboto Italic'), local('Roboto-Italic'), url(https://fonts.gstatic.com/s/roboto/v15/cDKhRaXnQTOVbaoxwdOr9xkAz4rYn47Zy2rvigWQf6w.woff2) format('woff2'); 367 | unicode-range: U+0370-03FF; 368 | } 369 | /* vietnamese */ 370 | @font-face { 371 | font-family: 'Roboto'; 372 | font-style: italic; 373 | font-weight: 400; 374 | src: local('Roboto Italic'), local('Roboto-Italic'), url(https://fonts.gstatic.com/s/roboto/v15/K23cxWVTrIFD6DJsEVi07RkAz4rYn47Zy2rvigWQf6w.woff2) format('woff2'); 375 | unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB; 376 | } 377 | /* latin-ext */ 378 | @font-face { 379 | font-family: 'Roboto'; 380 | font-style: italic; 381 | font-weight: 400; 382 | src: local('Roboto Italic'), local('Roboto-Italic'), url(https://fonts.gstatic.com/s/roboto/v15/vSzulfKSK0LLjjfeaxcREhkAz4rYn47Zy2rvigWQf6w.woff2) format('woff2'); 383 | unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; 384 | } 385 | /* latin */ 386 | @font-face { 387 | font-family: 'Roboto'; 388 | font-style: italic; 389 | font-weight: 400; 390 | src: local('Roboto Italic'), local('Roboto-Italic'), url(https://fonts.gstatic.com/s/roboto/v15/vPcynSL0qHq_6dX7lKVByXYhjbSpvc47ee6xR_80Hnw.woff2) format('woff2'); 391 | unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000; 392 | } 393 | /* cyrillic-ext */ 394 | @font-face { 395 | font-family: 'Roboto'; 396 | font-style: italic; 397 | font-weight: 700; 398 | src: local('Roboto Bold Italic'), local('Roboto-BoldItalic'), url(https://fonts.gstatic.com/s/roboto/v15/t6Nd4cfPRhZP44Q5QAjcC_ZraR2Tg8w2lzm7kLNL0-w.woff2) format('woff2'); 399 | unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F; 400 | } 401 | /* cyrillic */ 402 | @font-face { 403 | font-family: 'Roboto'; 404 | font-style: italic; 405 | font-weight: 700; 406 | src: local('Roboto Bold Italic'), local('Roboto-BoldItalic'), url(https://fonts.gstatic.com/s/roboto/v15/t6Nd4cfPRhZP44Q5QAjcC14sYYdJg5dU2qzJEVSuta0.woff2) format('woff2'); 407 | unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; 408 | } 409 | /* greek-ext */ 410 | @font-face { 411 | font-family: 'Roboto'; 412 | font-style: italic; 413 | font-weight: 700; 414 | src: local('Roboto Bold Italic'), local('Roboto-BoldItalic'), url(https://fonts.gstatic.com/s/roboto/v15/t6Nd4cfPRhZP44Q5QAjcC1BW26QxpSj-_ZKm_xT4hWw.woff2) format('woff2'); 415 | unicode-range: U+1F00-1FFF; 416 | } 417 | /* greek */ 418 | @font-face { 419 | font-family: 'Roboto'; 420 | font-style: italic; 421 | font-weight: 700; 422 | src: local('Roboto Bold Italic'), local('Roboto-BoldItalic'), url(https://fonts.gstatic.com/s/roboto/v15/t6Nd4cfPRhZP44Q5QAjcCwt_Rm691LTebKfY2ZkKSmI.woff2) format('woff2'); 423 | unicode-range: U+0370-03FF; 424 | } 425 | /* vietnamese */ 426 | @font-face { 427 | font-family: 'Roboto'; 428 | font-style: italic; 429 | font-weight: 700; 430 | src: local('Roboto Bold Italic'), local('Roboto-BoldItalic'), url(https://fonts.gstatic.com/s/roboto/v15/t6Nd4cfPRhZP44Q5QAjcC9DiNsR5a-9Oe_Ivpu8XWlY.woff2) format('woff2'); 431 | unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB; 432 | } 433 | /* latin-ext */ 434 | @font-face { 435 | font-family: 'Roboto'; 436 | font-style: italic; 437 | font-weight: 700; 438 | src: local('Roboto Bold Italic'), local('Roboto-BoldItalic'), url(https://fonts.gstatic.com/s/roboto/v15/t6Nd4cfPRhZP44Q5QAjcC6E8kM4xWR1_1bYURRojRGc.woff2) format('woff2'); 439 | unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; 440 | } 441 | /* latin */ 442 | @font-face { 443 | font-family: 'Roboto'; 444 | font-style: italic; 445 | font-weight: 700; 446 | src: local('Roboto Bold Italic'), local('Roboto-BoldItalic'), url(https://fonts.gstatic.com/s/roboto/v15/t6Nd4cfPRhZP44Q5QAjcC4gp9Q8gbYrhqGlRav_IXfk.woff2) format('woff2'); 447 | unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000; 448 | } -------------------------------------------------------------------------------- /style/styles.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright 2015 Google Inc. All Rights Reserved. 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | html, body { 18 | font-family: 'Roboto', 'Helvetica', sans-serif; 19 | } 20 | 21 | table { 22 | 23 | border-spacing: 0px !important; 24 | } 25 | 26 | table.qr-code td { 27 | border-width: 0; 28 | border-style: solid; 29 | border-color: #00f; 30 | border-collapse: collapse; 31 | margin: 0 !important; 32 | padding: 0 !important; 33 | } 34 | 35 | table.qr-code td.black { 36 | border-top-color: #000; 37 | background: #000; 38 | border-top-width:0 !important; 39 | width:5px !important; 40 | height:5px !important; 41 | padding: 0px 0px 0px 0px !important; 42 | } 43 | 44 | table.qr-code td.white { 45 | border-top-color: #fff; 46 | background: #fff; 47 | border-top-width:0 !important; 48 | width:5px !important; 49 | height:5px !important; 50 | padding: 0px 0px 0px 0px !important; 51 | } 52 | 53 | .demo-avatar { 54 | width: 48px; 55 | height: 48px; 56 | border-radius: 24px; 57 | } 58 | .demo-layout .demo-header .mdl-textfield { 59 | padding: 0px; 60 | margin-top: 41px; 61 | } 62 | .demo-layout .demo-header .mdl-textfield .mdl-textfield__expandable-holder { 63 | bottom: 19px; 64 | } 65 | .demo-layout .mdl-layout__header .mdl-layout__drawer-button { 66 | color: rgba(0, 0, 0, 0.54); 67 | } 68 | .mdl-layout__drawer .avatar { 69 | margin-bottom: 16px; 70 | } 71 | .demo-drawer { 72 | border: none; 73 | } 74 | /* iOS Safari specific workaround */ 75 | .demo-drawer .mdl-menu__container { 76 | z-index: -1; 77 | } 78 | .demo-drawer .demo-navigation { 79 | z-index: -2; 80 | } 81 | /* END iOS Safari specific workaround */ 82 | .demo-drawer .mdl-menu .mdl-menu__item { 83 | display: -webkit-flex; 84 | display: -ms-flexbox; 85 | display: flex; 86 | -webkit-align-items: center; 87 | -ms-flex-align: center; 88 | align-items: center; 89 | } 90 | .demo-drawer-header { 91 | box-sizing: border-box; 92 | display: -webkit-flex; 93 | display: -ms-flexbox; 94 | display: flex; 95 | -webkit-flex-direction: column; 96 | -ms-flex-direction: column; 97 | flex-direction: column; 98 | -webkit-justify-content: flex-end; 99 | -ms-flex-pack: end; 100 | justify-content: flex-end; 101 | padding: 16px; 102 | height: 151px; 103 | } 104 | .demo-avatar-dropdown { 105 | display: -webkit-flex; 106 | display: -ms-flexbox; 107 | display: flex; 108 | position: relative; 109 | -webkit-flex-direction: row; 110 | -ms-flex-direction: row; 111 | flex-direction: row; 112 | -webkit-align-items: center; 113 | -ms-flex-align: center; 114 | align-items: center; 115 | width: 100%; 116 | } 117 | 118 | .annotation-background { 119 | background-image: url("../images/LabelD-Placeholder.png"); 120 | background-repeat: no-repeat; 121 | /*background-attachment: fixed;*/ 122 | background-position: center; 123 | 124 | } 125 | 126 | .about-modal { 127 | text-align: left !important; 128 | } 129 | 130 | .next-button { 131 | /*margin-right: 27px ! important;*/ 132 | position: absolute; 133 | margin-bottom: 26px !important; 134 | right: -1% !important; 135 | 136 | } 137 | 138 | .previous-button { 139 | margin-right: unset ! important; 140 | right: unset ! important; 141 | margin-left: 3px ! important; 142 | position: absolute; 143 | margin-bottom: 26px ! important; 144 | left: 3% !important; 145 | 146 | } 147 | 148 | 149 | 150 | .annotation_window { 151 | left: 2.5%; 152 | top: 2.5%; 153 | height:95%; 154 | width: 95%; 155 | } 156 | 157 | .logo { 158 | margin-top: 15px; 159 | height: 150px; 160 | width: 240px; 161 | } 162 | 163 | .user_header{ 164 | height: 100px ! important; 165 | } 166 | 167 | /*.export-button {*/ 168 | /*margin-right: 5px ! important;*/ 169 | /*position: absolute;*/ 170 | /*min-width: 27px ! important;*/ 171 | /*max-width: 27px ! important;*/ 172 | /*}*/ 173 | 174 | .demo-navigation { 175 | -webkit-flex-grow: 1; 176 | -ms-flex-positive: 1; 177 | flex-grow: 1; 178 | } 179 | .demo-layout .demo-navigation .mdl-navigation__link { 180 | display: -webkit-flex !important; 181 | display: -ms-flexbox !important; 182 | display: flex !important; 183 | -webkit-flex-direction: row; 184 | -ms-flex-direction: row; 185 | flex-direction: row; 186 | -webkit-align-items: center; 187 | -ms-flex-align: center; 188 | align-items: center; 189 | color: rgba(255, 255, 255, 0.56); 190 | font-weight: 500; 191 | } 192 | .demo-layout .demo-navigation .mdl-navigation__link:hover { 193 | background-color: #00BCD4; 194 | color: #37474F; 195 | } 196 | 197 | .selected-page { 198 | background-color: #00BCD4 !important; 199 | color: #37474F !important; 200 | } 201 | 202 | .demo-navigation .mdl-navigation__link .material-icons { 203 | font-size: 24px; 204 | color: rgba(255, 255, 255, 0.56); 205 | margin-right: 32px; 206 | } 207 | 208 | .demo-content { 209 | max-width: 1080px; 210 | } 211 | 212 | .demo-charts { 213 | -webkit-align-items: center; 214 | -ms-flex-align: center; 215 | -ms-grid-row-align: center; 216 | align-items: center; 217 | } 218 | .demo-chart:nth-child(1) { 219 | color: #ACEC00; 220 | } 221 | .demo-chart:nth-child(2) { 222 | color: #00BBD6; 223 | } 224 | .demo-chart:nth-child(3) { 225 | color: #BA65C9; 226 | } 227 | .demo-chart:nth-child(4) { 228 | color: #EF3C79; 229 | } 230 | .demo-graphs { 231 | padding: 16px 32px; 232 | display: -webkit-flex; 233 | display: -ms-flexbox; 234 | display: flex; 235 | -webkit-flex-direction: column; 236 | -ms-flex-direction: column; 237 | flex-direction: column; 238 | -webkit-align-items: stretch; 239 | -ms-flex-align: stretch; 240 | align-items: stretch; 241 | } 242 | /* TODO: Find a proper solution to have the graphs 243 | * not float around outside their container in IE10/11. 244 | * Using a browserhacks.com solution for now. 245 | */ 246 | _:-ms-input-placeholder, :root .demo-graphs { 247 | min-height: 664px; 248 | } 249 | _:-ms-input-placeholder, :root .demo-graph { 250 | max-height: 300px; 251 | } 252 | /* TODO end */ 253 | .demo-graph:nth-child(1) { 254 | color: #00b9d8; 255 | } 256 | .demo-graph:nth-child(2) { 257 | color: #d9006e; 258 | } 259 | 260 | .annotation-image { 261 | width: 100%; 262 | height: 85vh; 263 | } 264 | 265 | .annotorious-annotationlayer { 266 | width: 100%; 267 | height: 85vh; 268 | } 269 | 270 | .demo-cards { 271 | -webkit-align-items: flex-start; 272 | -ms-flex-align: start; 273 | -ms-grid-row-align: flex-start; 274 | align-items: flex-start; 275 | -webkit-align-content: flex-start; 276 | -ms-flex-line-pack: start; 277 | align-content: flex-start; 278 | } 279 | .demo-cards .demo-separator { 280 | height: 32px; 281 | } 282 | .demo-cards .mdl-card__title.mdl-card__title { 283 | color: white; 284 | font-size: 24px; 285 | font-weight: 400; 286 | } 287 | .demo-cards ul { 288 | padding: 0; 289 | } 290 | .demo-cards h3 { 291 | font-size: 1em; 292 | } 293 | .demo-updates .mdl-card__title { 294 | min-height: 200px; 295 | background-image: url('../images/dog.png'); 296 | background-position: 90% 100%; 297 | background-repeat: no-repeat; 298 | } 299 | .demo-cards .mdl-card__actions a { 300 | color: #00BCD4; 301 | text-decoration: none; 302 | } 303 | 304 | .demo-options h3 { 305 | margin: 0; 306 | } 307 | .demo-options .mdl-checkbox__box-outline { 308 | border-color: rgba(255, 255, 255, 0.89); 309 | } 310 | .demo-options ul { 311 | margin: 0; 312 | list-style-type: none; 313 | } 314 | .demo-options li { 315 | margin: 4px 0; 316 | } 317 | .demo-options .material-icons { 318 | color: rgba(255, 255, 255, 0.89); 319 | } 320 | .demo-options .mdl-card__actions { 321 | height: 64px; 322 | display: -webkit-flex; 323 | display: -ms-flexbox; 324 | display: flex; 325 | box-sizing: border-box; 326 | -webkit-align-items: center; 327 | -ms-flex-align: center; 328 | align-items: center; 329 | } 330 | -------------------------------------------------------------------------------- /web_server.js: -------------------------------------------------------------------------------- 1 | var http = require("http"), 2 | url = require("url"), 3 | path = require("path"), 4 | fs = require("fs"); 5 | port = process.argv[2] || 8888; 6 | 7 | http.createServer(function(request, response) { 8 | 9 | var uri = url.parse(request.url).pathname 10 | , filename = path.join(process.cwd(), uri); 11 | 12 | fs.exists(filename, function(exists) { 13 | if(!exists) { 14 | response.writeHead(404, {"Content-Type": "text/plain"}); 15 | response.write("404 Not Found\n"); 16 | response.end(); 17 | return; 18 | } 19 | 20 | if (fs.statSync(filename).isDirectory()) filename += '/index.html'; 21 | 22 | fs.readFile(filename, "binary", function(err, file) { 23 | if(err) { 24 | response.writeHead(500, {"Content-Type": "text/plain"}); 25 | response.write(err + "\n"); 26 | response.end(); 27 | return; 28 | } 29 | 30 | response.writeHead(200); 31 | response.write(file, "binary"); 32 | response.end(); 33 | }); 34 | }); 35 | }).listen(parseInt(port, 10)); 36 | 37 | console.log("Static file server running at\n => http://localhost:" + port + "/\nCTRL + C to shutdown");/** 38 | * Created by seanweppner on 8/5/16. 39 | */ 40 | --------------------------------------------------------------------------------