Gitorious

a06e5d7 by Anon Ray at 2013-12-27	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">
8e7eda1 by Anon Ray at 2014-08-29	6	<title> CLink: Community Linked Open Cultuur Data </title>
a06e5d7 by Anon Ray at 2013-12-27	7
2431ed7 by Anon Ray at 2014-08-25	8	<meta name="description" content="Sweet Maker, Social, Semantic, Web, Decentralized, Makes Sweet, Sweet Swagger, Swtr, swtr">
a06e5d7 by Anon Ray at 2013-12-27	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">
8aa9c66 by Arvind at 2014-09-02	13	<link href="{{ url_for('static', filename='css/bootstrap-tags.css') }}" rel="stylesheet">
a06e5d7 by Anon Ray at 2013-12-27	14	</head>
	15
0bce307 by Anon Ray at 2014-06-05	16	<body>
23a64fd by Anon Ray at 2014-08-28	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>
8e7eda1 by Anon Ray at 2014-08-29	30	<a class="navbar-brand" href="#/home">
	31	CLink: Community Linked Open Cultuur Data
	32	</a>
23a64fd by Anon Ray at 2014-08-28	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>
31babf7 by Anon Ray at 2014-08-29	40	<li> <a href="#/search" title="Search External Sources">
23a64fd by Anon Ray at 2014-08-28	41	<span class="glyphicon glyphicon-search"></span>
	42	</a></li>
2db904c by Arvind at 2014-09-01	43	<li> <a href="#/play" title="My Playarea">
	44	<span class="glyphicon glyphicon-user"></span>
	45	</a></li>
	46
8e7eda1 by Anon Ray at 2014-08-29	47	<li> <a href="#/linked-data" title="Linked Data">
	48	<span class="glyphicon glyphicon-globe"></span>
	49	</a></li>
31babf7 by Anon Ray at 2014-08-29	50	<li> <a id="sign-in" href="#" title="">
	51	<span id="signinview"> Sign In </span>
23a64fd by Anon Ray at 2014-08-28	52	</a></li>
	53	</ul>
	54	</div>
8aa9c66 by Arvind at 2014-09-02	55	</div>
23a64fd by Anon Ray at 2014-08-28	56	</header>
	57
	58	<div id="swtr-root" class="container">
8a12443 by Anon Ray at 2014-08-29	59	<div id="helpview-container"></div>
	60
31babf7 by Anon Ray at 2014-08-29	61	<div id="home-page" class="page">
8e7eda1 by Anon Ray at 2014-08-29	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>
5bf92bc by Arvind at 2014-09-01	78	<!-- <p> -->
	79	<!-- <a class="btn btn-info btn-lg" href="#/search">Start Searching and Tagging</a> -->
	80	<!-- </p> -->
9297f60 by Anon Ray at 2014-09-02	81	<div class="row home-links">
	82	<div class="col-md-4">
	83	<a href="#/search" class="btn btn-info btn-lg">
5bf92bc by Arvind at 2014-09-01	84	<span class="glyphicon glyphicon-search"></span>
	85	Search
	86	</a>
9297f60 by Anon Ray at 2014-09-02	87	</div>
	88	<div class="col-md-4">
	89	<a href="#/play" class="btn btn-info btn-lg">
5bf92bc by Arvind at 2014-09-01	90	<span class="glyphicon glyphicon-user"></span>
9297f60 by Anon Ray at 2014-09-02	91	Personal PlayArea
	92	</a>
	93	</div>
	94	<div class="col-md-4">
	95	<a href="#/linked-data" class="btn btn-info btn-lg">
5bf92bc by Arvind at 2014-09-01	96	<span class="glyphicon glyphicon-globe"></span>
9297f60 by Anon Ray at 2014-09-02	97	Linked Data
	98	</a>
	99	</div>
5bf92bc by Arvind at 2014-09-01	100	</div>
	101	</div>
9297f60 by Anon Ray at 2014-09-02	102	<hr/>
	103	<p>
5bf92bc by Arvind at 2014-09-01	104	<h3>
	105	<span class="glyphicon glyphicon-search"></span>
9297f60 by Anon Ray at 2014-09-02	106	Search
5bf92bc by Arvind at 2014-09-01	107	</h3>
	108	<h4>
9297f60 by Anon Ray at 2014-09-02	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
5bf92bc by Arvind at 2014-09-01	113	area [<span class="glyphicon glyphicon-user"></span>] of the user.
	114	</h4>
9297f60 by Anon Ray at 2014-09-02	115	</p>
	116	<p>
5bf92bc by Arvind at 2014-09-01	117	<h3>
9297f60 by Anon Ray at 2014-09-02	118	<span class="glyphicon glyphicon-user"></span>
	119	Personal PlayArea
5bf92bc by Arvind at 2014-09-01	120	</h3>
9297f60 by Anon Ray at 2014-09-02	121	<h4>
	122	A user can view all annotated images. The tags used in
5bf92bc by Arvind at 2014-09-01	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>
9297f60 by Anon Ray at 2014-09-02	127	</p>
	128	<p>
5bf92bc by Arvind at 2014-09-01	129	<h3>
9297f60 by Anon Ray at 2014-09-02	130	<span class="glyphicon glyphicon-globe"></span>
	131	Linked Data
5bf92bc by Arvind at 2014-09-01	132	</h3>
	133	<h4>
9297f60 by Anon Ray at 2014-09-02	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>
5bf92bc by Arvind at 2014-09-01	139
9297f60 by Anon Ray at 2014-09-02	140	<hr/>
	141
7477a41 by Anon Ray at 2014-09-02	142	<footer>
9297f60 by Anon Ray at 2014-09-02	143	<!--p>This app is part of the <a href="http://www.opencultuurdata.nl/challenge-english/">
8e7eda1 by Anon Ray at 2014-08-29	144	Open Cuultur Data challenge</a>
9297f60 by Anon Ray at 2014-09-02	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]
5bf92bc by Arvind at 2014-09-01	151	</p>
	152	<p>
bf6032b by Arvind at 2014-09-03	153	[<b><a href="http://thefreedictionary.com/clink">Clink</a></b>: Middle English clinken, probably from Middle Dutch klinken, of
5bf92bc by Arvind at 2014-09-01	154	imitative origin.]
	155	</p>
8e7eda1 by Anon Ray at 2014-08-29	156	</footer>
31babf7 by Anon Ray at 2014-08-29	157	</div>
	158
d6760a5 by Anon Ray at 2014-09-01	159	<div id="play-page" class="page"></div>
0bce307 by Anon Ray at 2014-06-05	160
d6760a5 by Anon Ray at 2014-09-01	161	<!-- the search page -->
	162	<div id="search-page" class="page"></div>
31babf7 by Anon Ray at 2014-08-29	163
c953c9d by Arvind at 2014-08-30	164	<div id="linked-data-page" class="page">
c788cbd by Arvind at 2014-09-03	165	<div id="tag-cloud" class="row">
ac096d0 by Arvind at 2014-09-03	166	<div class="panel-group" id="accordion">
c788cbd by Arvind at 2014-09-03	167	<div class="col-md-6">
	168	<div class="panel panel-default">
	169	<div class="panel-heading">
ac096d0 by Arvind at 2014-09-03	170	<a data-toggle="collapse" data-parent="#accordion" href="#tag-list">
c788cbd by Arvind at 2014-09-03	171	<h4 class="panel-title">
	172	Tags
	173	</h4>
ac096d0 by Arvind at 2014-09-03	174	</a>
c788cbd by Arvind at 2014-09-03	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>
ac096d0 by Arvind at 2014-09-03	180	</div>
	181	</div>
	182	</div>
c788cbd by Arvind at 2014-09-03	183	<div class="col-md-6">
	184	<div class="panel panel-default">
	185	<div class="panel-heading">
ac096d0 by Arvind at 2014-09-03	186	<a data-toggle="collapse" data-parent="#accordion" href="#user-list">
c788cbd by Arvind at 2014-09-03	187	<h4 class="panel-title">
	188	User
	189	</h4>
ac096d0 by Arvind at 2014-09-03	190	</a>
c788cbd by Arvind at 2014-09-03	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>
ac096d0 by Arvind at 2014-09-03	196	</div>
	197	</div>
	198	</div>
448213b by Arvind at 2014-09-02	199	</div>
c953c9d by Arvind at 2014-08-30	200	</div>
c788cbd by Arvind at 2014-09-03	201	<div id="gallery" class="row">
733eb34 by Arvind at 2014-08-31	202	</div>
c953c9d by Arvind at 2014-08-30	203	</div>
8a12443 by Anon Ray at 2014-08-29	204
a06e5d7 by Anon Ray at 2013-12-27	205	</div>
	206	<div id="app-overlay"></div>
	207
	208	<script>
	209	window.swtr = window.swtr \|\| {};
bf8e0b9 by Anon Ray at 2014-05-29	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	};
1a89154 by Anon Ray at 2014-05-01	218	swtr.access_token = '{{ access_token }}';
	219	swtr.refresh_token = '{{ refresh_token }}';
bf8e0b9 by Anon Ray at 2014-05-29	220	swtr.app_id = '{{ config.app_id }}';
	221	swtr.oauth_redirect_uri = '{{ config.redirect_uri }}';
a06e5d7 by Anon Ray at 2013-12-27	222	window.onload = function() {
8aa9c66 by Arvind at 2014-09-02	223	swtr.init();
a06e5d7 by Anon Ray at 2013-12-27	224	};
	225	</script>
	226	<script src="{{ url_for('static', filename='js/lib/jquery-1.10.2.min.js') }}"></script>
c953c9d by Arvind at 2014-08-30	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>
a06e5d7 by Anon Ray at 2013-12-27	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>
5132a59 by Bhanu at 2014-05-16	233	<script src="{{ url_for('static', filename='js/lib/custom-fields-plugin.js') }}"></script>
1a89154 by Anon Ray at 2014-05-01	234	<script src="{{ url_for('static', filename='js/oauth.js') }}"></script>
8a12443 by Anon Ray at 2014-08-29	235	<script src="{{ url_for('static', filename='js/lib/bootstrap-tags.min.js') }}"></script>
20e0d95 by Anon Ray at 2014-08-29	236	<script src="{{ url_for('static', filename='js/img_swtr.js') }}"></script>
	237	<script src="{{ url_for('static', filename='js/main.js') }}"></script>
a06e5d7 by Anon Ray at 2013-12-27	238
8a12443 by Anon Ray at 2014-08-29	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">
bd39cc1 by Arvind at 2014-09-01	244	<span class="label label-primary">Tip</span>
8a12443 by Anon Ray at 2014-08-29	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>
a06e5d7 by Anon Ray at 2013-12-27	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>
7f99329 by Anon Ray at 2014-06-06	256	<p><%= how %></p>
a06e5d7 by Anon Ray at 2013-12-27	257	</li>
	258	</script>
655fc33 by Anon Ray at 2014-06-05	259	<script type="text/template" id="dropdown-template">
01021c2 by Anon Ray at 2014-06-30	260	<div id="tags-input"></div>
655fc33 by Anon Ray at 2014-06-05	261	<select class="form-control" id="custom-dropdown">
01021c2 by Anon Ray at 2014-06-30	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>
0bce307 by Anon Ray at 2014-06-05	266	</select>
	267	</script>
	268	<script type="text/template" id="popup-template">
655fc33 by Anon Ray at 2014-06-05	269	<span class="annotorious-popup-text">
	270	<ul class="custom-style-popup">
	271	<li class="custom-popup-line" ><span>Title: </span><%= Label %></li>
	272	<li class="custom-popup-line"><span>Comment: </span><%= Comment %></li>
	273	<li class="custom-popup-line"><span>Tags: </span><%= Tags %></li>
	274	<li class="custom-popup-line"><span>Related Links: </span><%= Links %></li>
	275	</ul>
	276	</span>
0bce307 by Anon Ray at 2014-06-05	277	</script>
d6760a5 by Anon Ray at 2014-09-01	278	<script type="text/template" id="play-page-template">
	279	<!-- second row: image URL input box and Load button -->
	280	<div class="row" id="user-input-row">
	281	<div class="col-md-8">
	282	<form class="form-inline" role="form">
	283	<div class="form-group col-md-11">
	284	<label class="sr-only" for="user-input">Enter URL of an image or web page</label>
	285	<input class="form-control" type="text"
	286	placeholder="Enter URL of an image or web page" id="user-input">
	287	</div>
	288	<button type="submit" class="btn btn-info" id="user-input-submit">Load</button>
	289	</form>
	290	</div>
	291	<div class="col-md-4">
	292	</div>
	293	</div> <!-- end second row -->
	294	<!-- third row - control panel? -->
	295	<div class="row" id="control-panel">
	296	<div class="col-md-8">
	297	<form class="form-inline" role="form">
	298	<div class="form-group">
7477a41 by Anon Ray at 2014-09-02	299	<button class="btn btn-default" id="sweet">Publish</button>
d6760a5 by Anon Ray at 2014-09-01	300	</div>
	301	</form>
	302	</div>
	303	<div class="col-md-4"></div>
	304	</div> <!-- end third row -- >
	305	<!-- fourth row: the image annotation window -->
	306	<div class="row">
	307	<div id="img-annotation-wrapper" class="col-md-12 col-xs-12 col-lg-12 col-sm-12 well">
	308	<div id="img-anno-controls">
	309	<form class="form-inline" role="form">
	310	<div class="form-group">
	311	<label class="checkbox-inline">
	312	<input type="checkbox" id="toggle-anno-areas"> Show annotated areas
	313	</label>
	314	</div>
	315	</form>
	316	</div>
	317	{% if url %}
	318	<img src="{{ url }}" id="annotatable-img" class="img-responsive" alt="Annotation Workbench">
	319	{% else %}
	320	<img src="" id="annotatable-img" class="img-responsive" alt="Annotation Workbench">
	321	{% endif %}
	322	</div>
	323	</div> <!-- end fourth row -->
	324
	325	<div id="sweet-list-wrapper">
	326	<ul id="sweet-list"></ul>
	327	<div class="btn-grp">
	328	<button class="btn btn-default" id="sweet-cancel">Cancel</button>
	329	<button class="btn btn-primary" id="post-sweet">Sweet</button>
	330	</div>
	331	</div>
	332	</script>
8a12443 by Anon Ray at 2014-08-29	333	<script type="text/template" id="search-page-template">
	334	<div class="row" id="search-user-input-row">
	335	<div class="col-md-8">
	336	<form class="form-inline" role="form">
	337	<div class="form-group col-md-11">
	338	<label class="sr-only" for="search-user-input">Enter search query</label>
	339	<input class="form-control" type="text"
	340	placeholder="Enter search query" id="search-user-input">
	341	</div>
	342	<button type="submit" class="btn btn-info" id="search-user-input-submit">
	343	Go
	344	</button>
	345	</form>
	346	</div>
	347	<div class="col-md-4">
	348	</div>
	349	</div>
	350	</script>
68af0f8 by Anon Ray at 2014-08-27	351	<script type="text/template" id="ocd-view-base-template">
	352	<div id="ocd-hud">
	353	<span id="ocd-total-results"></span>
	354	</div>
	355	<div id="ocd-results"></div>
	356	<ul class="pager">
	357	<li class="previous"> <a href="#">« Previous </a></li>
	358	<li class="next"> <a href="#"> Next » </a></li>
	359	</ul>
	360	</script>
2431ed7 by Anon Ray at 2014-08-25	361	<script type="text/template" id="ocd-item-template">
	362	<div class="col-sm-6 col-md-4 ocd-item">
	363	<h4> <%= title %> </h4>
	364	<div class="media">
	365	<a href="<%= media_url %>">
	366	<img src="" class="responsive thumb-image">
	367	</a>
	368	</div>
3803988 by Anon Ray at 2014-08-30	369	<div class="text">Authors: <%= authors %> </div>
	370	<div class="text">Description: <%= description %> </div>
	371	</div>
	372	</script>
	373	<script type="text/template" id="ocd-item-cover-template">
	374	<div class="ocd-item-cover">
	375	Mark and load this image to annotate
	376	<button class="btn btn-xs btn-default pull-left ocd-item-mark">Mark</button>
	377	<a class="close">×</a>
	378	<div class="clearfix"></div>
2431ed7 by Anon Ray at 2014-08-25	379	</div>
	380	</script>
7faaca7 by Arvind at 2014-08-27	381	<script type="text/template" id="filter-users">
	382	<ul>
8a12443 by Anon Ray at 2014-08-29	383	<label>
	384	<input type="checkbox" name="<%= who %>" checked="checked">
	385	<%= who %>
	386	</label>
7faaca7 by Arvind at 2014-08-27	387	</ul>
	388	</script>
	389	<script type="text/template" id="filter-tags">
	390	<ul>
	391	<input type="checkbox" checked="checked" name=<%= tag %>>
	392	<label><%= tag %></label>
	393	</ul>
	394	</script>
733eb34 by Arvind at 2014-08-31	395	<script type="text/template" id="gallery-item-template">
	396	<div class="col-md-4 col-sm-6 ocd-item">
	397	<div class="media">
	398	<img src="<%= how.src %>" class="responsive thumb-image">
	399	</div>
	400	<div class="text">Author: <%= who %> </div>
	401	<div class="text">Tags: <%= how.tags %> </div>
	402	</div>
	403	</script>
448213b by Arvind at 2014-09-02	404	<script type="text/template" id="linked-data-list-template">
	405	<li class="list-group-item">
	406	<span class="badge"> <%= weight %> </span>
	407	<p><%= who %></p>
	408	</li>
	409	</script>
db62ecd by Arvind at 2014-09-03	410	<script type="text/template" id="loader-template">
	411	<div id="spinner" class="spinner">
	412	<div class="double-bounce1"></div>
	413	<div class="double-bounce2"></div>
	414	</div>
	415	</script>
a06e5d7 by Anon Ray at 2013-12-27	416	</body>
	417	</html>