forked from viveke10/annotorious.github.io
-
Notifications
You must be signed in to change notification settings - Fork 0
/
plugins.html
191 lines (162 loc) · 8.19 KB
/
plugins.html
1
2
3
4
5
6
7
8
9
10
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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
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
188
189
190
191
<!DOCTYPE html>
<html>
<head>
<title>Annotorious - Image Annotation for the Web</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
<link type="text/css" rel="stylesheet" media="all" href="css/highlight.css" />
<script type="text/javascript" src="js/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="js/highlight.js"></script>
</head>
<body>
<div class="navbar">
<div class="navbar-inner">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="demos.html">Demos</a></li>
<li><a href="getting-started.html">Getting Started</a></li>
<li class="active"><a href="javascript:void(0);">Plugins & Useful Stuff</a></li>
<li><a href="api.html">API</a></li>
<li><a href="about.html">About</a></li>
</ul>
</div>
</div>
<div class="header">
<div class="header-inner">
<div class="download-link">
Get the Latest Release
<a class="download-button" href="http://github.com/annotorious/annotorious/releases/tag/v0.6.4">Download Annotorious v0.6.4</a>
</div>
<h1><img src="img/h1-logo.png">Annotorious</h1>
</div>
</div>
<div class="content">
<div class="content-inner">
<div class="sidebar">
<h2>Storage Plugins</h2>
<ul>
<li><a href="#parse">Parse Storage</a></li>
<li><a href="#es">ElasticSearch</a></li>
</ul>
<h2>Selector Plugins</h2>
<ul>
<li><a href="#fancybox">Fancy Box</a></li>
</ul>
<h2>Miscellaneous Plugins</h2>
<ul>
<li><a href="#semantic-tagging">Semantic Tagging</a></li>
</ul>
<h2>Other Useful Stuff</h2>
<ul>
<li><a href="#okfn">OKFN Annotator Integration</a></li>
<li><a href="#pybossa">PyBossa Template</a></li>
<!-- li><a href="#wordpress">Wordpress</a></li -->
</ul>
</div>
<div class="content-two-column">
<h1>Plugins</h1>
<p>
To add a plugin, include the plugin script in your page head and register the plugin through
the Annotorious JavaScript API. <strong>Example:</strong>
</p>
<pre class="code" lang="html">
<head>
<!-- Import main Annotorious script and CSS -->
<link rel="stylesheet" href="css/annotorious.css" type="text/css" />
<script src="js/annotorious.min.js"></script>
<!-- Import the plugin script -->
<script src="js/example-plugin.js"></script>
...
<!-- Use the API to attach and activate the plugin -->
<script>
anno.addPlugin('ExamplePlugin', {});
</script>
</head></pre>
<p/>
<h2>Storage Plugins</h2>
<p>
Storage plugins connect Annotorious to different types of databases or storage backends. You don't
necessarily <em>need</em> a storage plugin to persist your annotations - you could just as well roll your
own solution using the JavaScript API - but storage plugins may make your life easier.
</p>
<div class="plugin">
<a name="parse"><strong>Parse.com Storage</strong></a><br/>
A cloud storage plugin to store annotations on the <a href="http://parse.com">Parse platform</a>
hosting service. Kindly contributed by <a href="https://twitter.com/dommmel">@dommmel</a>.<br/>
<a class="bottom-link" href="https://github.com/dommmel/annotorious-parse-plugin">Read More</a>
<a class="bottom-link" href="https://github.com/dommmel/annotorious-parse-plugin/archive/master.zip">Download ZIP</a>
</div>
<div class="plugin">
<a name="es"><strong>ElasticSearch Storage</strong></a><br/>
A simple plug-in that stores annotations on an <a href="http://www.elasticsearch.org/">ElasticSearch</a>
server. Meant primarily as a demo, and as an example for those interested in building their own storage
plugins.<br/>
<a class="bottom-link" href="http://github.com/annotorious/annotorious-elasticsearch-plugin">Read More</a>
<a class="bottom-link" href="https://github.com/annotorious/annotorious-elasticsearch-plugin/archive/master.zip">Download ZIP</a>
</div>
<hr/>
<h2>Selector Plugins</h2>
<p>
Selector plugins add new drawing/selection tools to Annotorious.
</p>
<div class="plugin">
<a name="fancybox"><strong>Fancy Box</strong></a><br/>
Replaces the default box selection tool with a selector that masks out the rest of the image while selecting.<br/>
<a class="bottom-link" href="demos/fancybox-preview.html">Try the Demo</a>
<a class="bottom-link" href="latest/anno-fancybox.min.js">Download JS</a>
</div>
<hr/>
<h2>Miscellaneous</h2>
<div class="plugin">
<a name="semantic-tagging"><strong>Semantic Tagging (Beta)</strong></a><br/>
Adds <em>Semantic Tagging</em> functionality to Annotorious: while typing an annotation, the
text is sent to a server for <a href="http://en.wikipedia.org/wiki/Named-entity_recognition">Named Entity
Recognition</a>. Entities are suggested as possible tags, and the user can add them to the
annotation by clicking on them.<br/>
<a class="bottom-link" href="demos/semantic-tagging-preview.html">Try the Demo</a>
</div>
<hr/>
<h1>Other Useful Stuff</h1>
<div class="plugin">
<a name="okfn"><strong>Integration between Annotorious and OKFN Annotator</strong></a><br/>
<p>This extension integrates Annotorious into the <a href="http://okfnlabs.org/annotator/">Annotator Web
annotation system</a> by the <em>Open Knowledge Foundation</em>. Technically, this is <strong>not</strong>
realized as an Annotorious Plugin, so bear in mind that the setup procedure is different! Read the
docs for details.</p>
<a class="bottom-link" href="plug-outs/okfn-annotator.html">Read More</a>
<a class="bottom-link" href="downloads/annotorious-okfn-plugout-0.3.zip">Download ZIP</a>
</div>
<div class="plugin">
<a name="pybossa"><strong>PyBossa Template for Picture Tagging with Annotorious</strong></a><br/>
<p>An Annotorious-powered template for the open-source crowdsourcing framework
<a href="http://daniellombrana.es/pybossa.html">PyBossa</a> that allows you to tag picture collections.</p>
<a class="bottom-link" href="http://daniellombrana.es/taggingpictures.html">Read More</a>
<a class="bottom-link" href="http://crowdcrafting.org/app/taggingpictures/">Try on Crowdcrafting.org</a>
<a class="bottom-link" href="http://github.com/PyBossa/app-tagging-pictures">Source Code</a>
</div>
</div>
</div>
</div>
<footer>
<div class="footer-inner">
<p>Annotorious is licensed under the terms of the <a href="http://opensource.org/licenses/MIT">MIT License</a>.</p>
<p>Need help? Check the <a href="http://groups.google.com/d/forum/annotorious">Annotorious Google Group</a>.</p>
<p><a href="http://github.com/annotorious/annotorious">github.com/annotorious/annotorious</a></p>
</div>
</footer>
<script type="text/javascript">
$(document).ready(function(){
$('pre.code').highlight({source:0, zebra:1, indent:'space', list:'ol'});
});
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-38067134-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>