| 1 |
<!doctype html> |
| 2 |
<html lang="en"> |
| 3 |
<head> |
| 4 |
<meta charset="utf-8"> |
| 5 |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| 6 |
<title> CLink: Community Linked Open Cultuur Data </title> |
| 7 |
|
| 8 |
<meta name="description" content="Sweet Maker, Social, Semantic, Web, Decentralized, Makes Sweet, Sweet Swagger, Swtr, swtr"> |
| 9 |
<link href="{{ url_for('static', filename='css/bootstrap.min.css') }}" rel="stylesheet"> |
| 10 |
<link href="{{ url_for('static', filename='css/bootstrap-theme.min.css') }}" rel="stylesheet"> |
| 11 |
<link href="{{ url_for('static', filename='css/annotorious.css') }}" rel="stylesheet"> |
| 12 |
<link href="{{ url_for('static', filename='css/swtmaker.css') }}" rel="stylesheet"> |
| 13 |
<link href="{{ url_for('static', filename='css/bootstrap-tags.css') }}" rel="stylesheet"> |
| 14 |
</head> |
| 15 |
|
| 16 |
<body> |
| 17 |
<!-- navigation and branding of the app --> |
| 18 |
<header id="header" class="navbar navbar-inverse" role="navigation"> |
| 19 |
<div class="container-fluid"> |
| 20 |
<!-- Brand and toggle get grouped for better mobile display --> |
| 21 |
<div class="navbar-header"> |
| 22 |
<button type="button" class="navbar-toggle" data-toggle="collapse" |
| 23 |
data-target="#swtr-navbar-collapse"> |
| 24 |
|
| 25 |
<span class="sr-only">Toggle navigation</span> |
| 26 |
<span class="icon-bar"></span> |
| 27 |
<span class="icon-bar"></span> |
| 28 |
<span class="icon-bar"></span> |
| 29 |
</button> |
| 30 |
<a class="navbar-brand" href="#/home"> |
| 31 |
CLink: Community Linked Open Cultuur Data |
| 32 |
</a> |
| 33 |
</div> |
| 34 |
<!-- Collect the nav links, forms, and other content for toggling --> |
| 35 |
<div class="collapse navbar-collapse" id="swtr-navbar-collapse"> |
| 36 |
<ul class="nav navbar-nav navbar-right"> |
| 37 |
<li class="active"> <a href="#/home" title="Home"> |
| 38 |
<span class="glyphicon glyphicon-home"></span> |
| 39 |
</a></li> |
| 40 |
<li> <a href="#/search" title="Search External Sources"> |
| 41 |
<span class="glyphicon glyphicon-search"></span> |
| 42 |
</a></li> |
| 43 |
<li> <a href="#/play" title="My Playarea"> |
| 44 |
<span class="glyphicon glyphicon-user"></span> |
| 45 |
</a></li> |
| 46 |
|
| 47 |
<li> <a href="#/linked-data" title="Linked Data"> |
| 48 |
<span class="glyphicon glyphicon-globe"></span> |
| 49 |
</a></li> |
| 50 |
<li> <a id="sign-in" href="#" title=""> |
| 51 |
<span id="signinview"> Sign In </span> |
| 52 |
</a></li> |
| 53 |
</ul> |
| 54 |
</div> |
| 55 |
</div> |
| 56 |
</header> |
| 57 |
|
| 58 |
<div id="swtr-root" class="container"> |
| 59 |
<div id="helpview-container"></div> |
| 60 |
|
| 61 |
<div id="home-page" class="page"> |
| 62 |
<div class="jumbotron"> |
| 63 |
<h1> CLink: Community Linked Open Cultuur Data </h1> |
| 64 |
<p> |
| 65 |
There are over 30 data sets in <a href="http://www.opencultuurdata.nl"> |
| 66 |
Open Cultuur Data.</a> Using CLink, one can |
| 67 |
bookmark, annotate, tag and discover the social enrichment of the data |
| 68 |
by a community of interest. |
| 69 |
</p> |
| 70 |
<p> |
| 71 |
CLink provides annotation and tagging of images that are searchable in |
| 72 |
the <a href="http://www.opencultuurdata.nl">OCD</a> dataset and also |
| 73 |
tagging and connecting to images that are outside the dataset. |
| 74 |
The annotations/tags of a person are announced and made available for |
| 75 |
other users who can further filter the users of interest and tags or |
| 76 |
datasets of interest. |
| 77 |
</p> |
| 78 |
<!-- <p> --> |
| 79 |
<!-- <a class="btn btn-info btn-lg" href="#/search">Start Searching and Tagging</a> --> |
| 80 |
<!-- </p> --> |
| 81 |
<div class="row home-links"> |
| 82 |
<div class="col-md-4"> |
| 83 |
<a href="#/search" class="btn btn-info btn-lg"> |
| 84 |
<span class="glyphicon glyphicon-search"></span> |
| 85 |
Search |
| 86 |
</a> |
| 87 |
</div> |
| 88 |
<div class="col-md-4"> |
| 89 |
<a href="#/play" class="btn btn-info btn-lg"> |
| 90 |
<span class="glyphicon glyphicon-user"></span> |
| 91 |
Personal PlayArea |
| 92 |
</a> |
| 93 |
</div> |
| 94 |
<div class="col-md-4"> |
| 95 |
<a href="#/linked-data" class="btn btn-info btn-lg"> |
| 96 |
<span class="glyphicon glyphicon-globe"></span> |
| 97 |
Linked Data |
| 98 |
</a> |
| 99 |
</div> |
| 100 |
</div> |
| 101 |
</div> |
| 102 |
<hr/> |
| 103 |
<p> |
| 104 |
<h3> |
| 105 |
<span class="glyphicon glyphicon-search"></span> |
| 106 |
Search |
| 107 |
</h3> |
| 108 |
<h4> |
| 109 |
Search uses <a href="opencultuurdata.nl">opencultuurdata.nl</a> |
| 110 |
APIs to look for images from the datases provided by OCD collection. |
| 111 |
One can then start annotating an image of interest. |
| 112 |
Such an image is marked and is available in the play |
| 113 |
area [<span class="glyphicon glyphicon-user"></span>] of the user. |
| 114 |
</h4> |
| 115 |
</p> |
| 116 |
<p> |
| 117 |
<h3> |
| 118 |
<span class="glyphicon glyphicon-user"></span> |
| 119 |
Personal PlayArea |
| 120 |
</h3> |
| 121 |
<h4> |
| 122 |
A user can view all annotated images. The tags used in |
| 123 |
annotations are also shown as a list and can be used for filtering the |
| 124 |
set of images. User can also choose to annotate an image outside the |
| 125 |
OCD collection by using the image URL. |
| 126 |
</h4> |
| 127 |
</p> |
| 128 |
<p> |
| 129 |
<h3> |
| 130 |
<span class="glyphicon glyphicon-globe"></span> |
| 131 |
Linked Data |
| 132 |
</h3> |
| 133 |
<h4> |
| 134 |
All images that are tagged by all users are available for browsing, |
| 135 |
filtering based on selecting or deselecting users (and their |
| 136 |
annotations); and also by selecting and deselecting tags of interest. |
| 137 |
</h4> |
| 138 |
</p> |
| 139 |
|
| 140 |
<hr/> |
| 141 |
|
| 142 |
<footer> |
| 143 |
<!--p>This app is part of the <a href="http://www.opencultuurdata.nl/challenge-english/"> |
| 144 |
Open Cuultur Data challenge</a> |
| 145 |
</p--> |
| 146 |
<p> |
| 147 |
We use <a href="https://login.persona.org/about">Mozilla Persona</a> for identifying |
| 148 |
users, <a href="http://annotorious.github.io/">Annotorious</a> for image annotation and |
| 149 |
<a href="http://janastu.org/technoscience/index.php/Sweet_Web">SWeeT Web</a> |
| 150 |
for assimilating the linked open data announced by users. [opensource cc] |
| 151 |
</p> |
| 152 |
<p> |
| 153 |
[<b><a href="http://thefreedictionary.com/clink">Clink</a></b>: Middle English clinken, probably from Middle Dutch klinken, of |
| 154 |
imitative origin.] |
| 155 |
</p> |
| 156 |
</footer> |
| 157 |
</div> |
| 158 |
|
| 159 |
<div id="play-page" class="page"></div> |
| 160 |
|
| 161 |
<!-- the search page --> |
| 162 |
<div id="search-page" class="page"></div> |
| 163 |
|
| 164 |
<div id="linked-data-page" class="page"> |
| 165 |
<div id="tag-cloud" class="row"> |
| 166 |
<div class="panel-group" id="accordion"> |
| 167 |
<div class="col-md-6"> |
| 168 |
<div class="panel panel-default"> |
| 169 |
<div class="panel-heading"> |
| 170 |
<a data-toggle="collapse" data-parent="#accordion" href="#tag-list"> |
| 171 |
<h4 class="panel-title"> |
| 172 |
Tags |
| 173 |
</h4> |
| 174 |
</a> |
| 175 |
</div> |
| 176 |
<div id="tag-list" class="panel-collapse collapse in"> |
| 177 |
<div class="panel-body"> |
| 178 |
<ul class="list-group" id="tags-tag-cloud"></ul> |
| 179 |
</div> |
| 180 |
</div> |
| 181 |
</div> |
| 182 |
</div> |
| 183 |
<div class="col-md-6"> |
| 184 |
<div class="panel panel-default"> |
| 185 |
<div class="panel-heading"> |
| 186 |
<a data-toggle="collapse" data-parent="#accordion" href="#user-list"> |
| 187 |
<h4 class="panel-title"> |
| 188 |
User |
| 189 |
</h4> |
| 190 |
</a> |
| 191 |
</div> |
| 192 |
<div id="user-list" class="panel-collapse collapse in"> |
| 193 |
<div class="panel-body"> |
| 194 |
<ul class="list-group" id="user-tag-cloud"></ul> |
| 195 |
</div> |
| 196 |
</div> |
| 197 |
</div> |
| 198 |
</div> |
| 199 |
</div> |
| 200 |
</div> |
| 201 |
<div id="gallery" class="row"> |
| 202 |
</div> |
| 203 |
</div> |
| 204 |
|
| 205 |
</div> |
| 206 |
<div id="app-overlay"></div> |
| 207 |
|
| 208 |
<script> |
| 209 |
window.swtr = window.swtr || {}; |
| 210 |
swtr.swtstoreURL = function() { return '{{ config.swtstoreURL }}'; } |
| 211 |
swtr.endpoints = { |
| 212 |
'get': '/api/sweets/q', |
| 213 |
'post': '/api/sweets', |
| 214 |
'auth': '/oauth/authorize', |
| 215 |
'login': '/auth/login', |
| 216 |
'logout': '/auth/logout' |
| 217 |
}; |
| 218 |
swtr.access_token = '{{ access_token }}'; |
| 219 |
swtr.refresh_token = '{{ refresh_token }}'; |
| 220 |
swtr.app_id = '{{ config.app_id }}'; |
| 221 |
swtr.oauth_redirect_uri = '{{ config.redirect_uri }}'; |
| 222 |
window.onload = function() { |
| 223 |
swtr.init(); |
| 224 |
}; |
| 225 |
</script> |
| 226 |
<script src="{{ url_for('static', filename='js/lib/jquery-1.10.2.min.js') }}"></script> |
| 227 |
<script src="{{ url_for('static', filename='js/lib/d3.js') }}"></script> |
| 228 |
<script src="{{ url_for('static', filename='js/lib/d3.layout.cloud.js') }}"></script> |
| 229 |
<script src="{{ url_for('static', filename='js/lib/bootstrap.min.js') }}"></script> |
| 230 |
<script src="{{ url_for('static', filename='js/lib/underscore-1.5.2.min.js') }}"></script> |
| 231 |
<script src="{{ url_for('static', filename='js/lib/backbone-1.0.0.min.js') }}"></script> |
| 232 |
<script src="{{ url_for('static', filename='js/lib/annotorious.debug.js') }}"></script> |
| 233 |
<script src="{{ url_for('static', filename='js/lib/custom-fields-plugin.js') }}"></script> |
| 234 |
<script src="{{ url_for('static', filename='js/oauth.js') }}"></script> |
| 235 |
<script src="{{ url_for('static', filename='js/lib/bootstrap-tags.min.js') }}"></script> |
| 236 |
<script src="{{ url_for('static', filename='js/img_swtr.js') }}"></script> |
| 237 |
<script src="{{ url_for('static', filename='js/main.js') }}"></script> |
| 238 |
|
| 239 |
<!-- underscore.js templates --> |
| 240 |
<script type="text/template" id="helpview-template"> |
| 241 |
<div class="row"> |
| 242 |
<div class="col-md-8"> |
| 243 |
<div id="helpview" class="bg-info"> |
| 244 |
<span class="label label-primary">Tip</span> |
| 245 |
<span id="helpview-text"></span> |
| 246 |
<a class="close">×</a> |
| 247 |
</div> |
| 248 |
</div> |
| 249 |
<div class="col-md-4"></div> |
| 250 |
</div> |
| 251 |
</script> |
| 252 |
<script type="text/template" id="sweet-template"> |
| 253 |
<li class="sweet"> |
| 254 |
<a href="#">@<%= who %></a> <strong>#<%= what %></strong> |
| 255 |
/<a href="<%= where %>"><%= where.substr(0, 30) + '...' %></a> |
| 256 |
<p><%= how %></p> |
| 257 |
</li> |
| 258 |
</script> |
| 259 |
<!--script type="text/template" id="dropdown-template"> |
| 260 |
<div id="tags-input"></div> |
| 261 |
<select class="form-control" id="custom-dropdown"> |
| 262 |
<option value="comment" selected>Comment</option> |
| 263 |
<option value="title" >Title</option> |
| 264 |
<option value="tags">Tags</option> |
| 265 |
<option value="link">Link</option> |
| 266 |
</select> |
| 267 |
</script--> |
| 268 |
<script type="text/template" id="customEdit-template"> |
| 269 |
<textarea id="title-input" class="annotorious-editor-text goog-textarea" |
| 270 |
placeholder="Add Title" tabindex="1" rows="2" |
| 271 |
style="overflow-y: hidden; overflow-x: auto; box-sizing: border-box; height: 23px; |
| 272 |
padding-bottom: 4px;"></textarea> |
| 273 |
<textarea id="link-input" class="annotorious-editor-text goog-textarea" |
| 274 |
placeholder="Add Links" tabindex="1" rows="3" style="overflow-y: hidden; overflow-x: auto; |
| 275 |
box-sizing: border-box; height: 23px; padding-bottom: 4px;"></textarea> |
| 276 |
<div id="tags-input" class="annotorious-editor-text goog-textarea" |
| 277 |
placeholder="" tabindex="1" rows="4" style="overflow-y: auto; overflow-x: |
| 278 |
hidden; box-sizing: border-box; height: 23px; padding-bottom: 4px;"></div> |
| 279 |
</script> |
| 280 |
<script type="text/template" id="popup-template"> |
| 281 |
<span class="annotorious-popup-text"> |
| 282 |
<ul class="custom-style-popup"> |
| 283 |
<li class="custom-popup-line" ><span>Title: </span><%= Label %></li> |
| 284 |
<li class="custom-popup-line"><span>Comment: </span><%= Comment %></li> |
| 285 |
<li class="custom-popup-line"><span>Tags: </span><%= Tags %></li> |
| 286 |
<li class="custom-popup-line"><span>Related Links: </span><%= Links %></li> |
| 287 |
</ul> |
| 288 |
</span> |
| 289 |
</script> |
| 290 |
<script type="text/template" id="play-page-template"> |
| 291 |
<!-- second row: image URL input box and Load button --> |
| 292 |
<div class="row" id="user-input-row"> |
| 293 |
<div class="col-md-8"> |
| 294 |
<form class="form-inline" role="form"> |
| 295 |
<div class="form-group col-md-11"> |
| 296 |
<label class="sr-only" for="user-input">Enter URL of an image or web page</label> |
| 297 |
<input class="form-control" type="text" |
| 298 |
placeholder="Enter URL of an image or web page" id="user-input"> |
| 299 |
</div> |
| 300 |
<button type="submit" class="btn btn-info" id="user-input-submit">Load</button> |
| 301 |
</form> |
| 302 |
</div> |
| 303 |
<div class="col-md-4"> |
| 304 |
</div> |
| 305 |
</div> <!-- end second row --> |
| 306 |
<!-- third row - control panel? --> |
| 307 |
<div class="row" id="control-panel"> |
| 308 |
<div class="col-md-8"> |
| 309 |
<form class="form-inline" role="form"> |
| 310 |
<div class="form-group"> |
| 311 |
<button class="btn btn-default" id="sweet">Publish</button> |
| 312 |
</div> |
| 313 |
</form> |
| 314 |
</div> |
| 315 |
<div class="col-md-4"></div> |
| 316 |
</div> <!-- end third row -- > |
| 317 |
<!-- fourth row: the image annotation window --> |
| 318 |
<div class="row"> |
| 319 |
<div id="img-annotation-wrapper" class="col-md-12 col-xs-12 col-lg-12 col-sm-12 well"> |
| 320 |
<div id="img-anno-controls"> |
| 321 |
<form class="form-inline" role="form"> |
| 322 |
<div class="form-group"> |
| 323 |
<label class="checkbox-inline"> |
| 324 |
<input type="checkbox" id="toggle-anno-areas"> Show annotated areas |
| 325 |
</label> |
| 326 |
</div> |
| 327 |
</form> |
| 328 |
</div> |
| 329 |
{% if url %} |
| 330 |
<img src="{{ url }}" id="annotatable-img" class="img-responsive" alt="Annotation Workbench"> |
| 331 |
{% else %} |
| 332 |
<img src="" id="annotatable-img" class="img-responsive" alt="Annotation Workbench"> |
| 333 |
{% endif %} |
| 334 |
</div> |
| 335 |
</div> <!-- end fourth row --> |
| 336 |
|
| 337 |
<div id="sweet-list-wrapper"> |
| 338 |
<ul id="sweet-list"></ul> |
| 339 |
<div class="btn-grp"> |
| 340 |
<button class="btn btn-default" id="sweet-cancel">Cancel</button> |
| 341 |
<button class="btn btn-primary" id="post-sweet">Sweet</button> |
| 342 |
</div> |
| 343 |
</div> |
| 344 |
</script> |
| 345 |
<script type="text/template" id="search-page-template"> |
| 346 |
<div class="row" id="search-user-input-row"> |
| 347 |
<div class="col-md-8"> |
| 348 |
<form class="form-inline" role="form"> |
| 349 |
<div class="form-group col-md-11"> |
| 350 |
<label class="sr-only" for="search-user-input">Enter search query</label> |
| 351 |
<input class="form-control" type="text" |
| 352 |
placeholder="Enter search query" id="search-user-input"> |
| 353 |
</div> |
| 354 |
<button type="submit" class="btn btn-info" id="search-user-input-submit"> |
| 355 |
Go |
| 356 |
</button> |
| 357 |
</form> |
| 358 |
</div> |
| 359 |
<div class="col-md-4"> |
| 360 |
</div> |
| 361 |
</div> |
| 362 |
</script> |
| 363 |
<script type="text/template" id="ocd-view-base-template"> |
| 364 |
<div id="ocd-hud"> |
| 365 |
<span id="ocd-total-results"></span> |
| 366 |
</div> |
| 367 |
<div id="ocd-results"></div> |
| 368 |
<ul class="pager"> |
| 369 |
<li class="previous"> <a href="#">« Previous </a></li> |
| 370 |
<li class="next"> <a href="#"> Next » </a></li> |
| 371 |
</ul> |
| 372 |
</script> |
| 373 |
<script type="text/template" id="ocd-item-template"> |
| 374 |
<div class="col-sm-6 col-md-4 ocd-item"> |
| 375 |
<h4> <%= title %> </h4> |
| 376 |
<div class="media"> |
| 377 |
<a href="<%= media_url %>"> |
| 378 |
<img src="" class="responsive thumb-image"> |
| 379 |
</a> |
| 380 |
</div> |
| 381 |
<div class="text">Authors: <%= authors %> </div> |
| 382 |
<div class="text">Description: <%= description %> </div> |
| 383 |
</div> |
| 384 |
</script> |
| 385 |
<script type="text/template" id="ocd-item-cover-template"> |
| 386 |
<div class="ocd-item-cover"> |
| 387 |
Mark and load this image to annotate |
| 388 |
<button class="btn btn-xs btn-default pull-left ocd-item-mark">Mark</button> |
| 389 |
<a class="close">×</a> |
| 390 |
<div class="clearfix"></div> |
| 391 |
</div> |
| 392 |
</script> |
| 393 |
<script type="text/template" id="filter-users"> |
| 394 |
<ul> |
| 395 |
<label> |
| 396 |
<input type="checkbox" name="<%= who %>" checked="checked"> |
| 397 |
<%= who %> |
| 398 |
</label> |
| 399 |
</ul> |
| 400 |
</script> |
| 401 |
<script type="text/template" id="filter-tags"> |
| 402 |
<ul> |
| 403 |
<input type="checkbox" checked="checked" name=<%= tag %>> |
| 404 |
<label><%= tag %></label> |
| 405 |
</ul> |
| 406 |
</script> |
| 407 |
<script type="text/template" id="gallery-item-template"> |
| 408 |
<div class="col-md-4 col-sm-6 ocd-item"> |
| 409 |
<div class="media"> |
| 410 |
<img src="<%= how.src %>" class="responsive thumb-image"> |
| 411 |
</div> |
| 412 |
<div class="text">Author: <%= who %> </div> |
| 413 |
<div class="text">Tags: <%= how.tags %> </div> |
| 414 |
</div> |
| 415 |
</script> |
| 416 |
<script type="text/template" id="linked-data-list-template"> |
| 417 |
<li class="list-group-item"> |
| 418 |
<span class="badge"> <%= weight %> </span> |
| 419 |
<a class="mCursor"><p><%= who %></p></a> |
| 420 |
</li> |
| 421 |
</script> |
| 422 |
<script type="text/template" id="loader-template"> |
| 423 |
<div id="spinner" class="spinner"> |
| 424 |
<div class="double-bounce1"></div> |
| 425 |
<div class="double-bounce2"></div> |
| 426 |
</div> |
| 427 |
</script> |
| 428 |
</body> |
| 429 |
</html> |
