-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
185 lines (166 loc) · 9.79 KB
/
index.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
<!DOCTYPE html>
<html>
<head>
<meta name="generator" content="Hugo 0.134.1">
<title>Annotorious | A Javascript Image Annotation Library</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@recogito/[email protected]/dist/annotorious.min.css">
<link rel="stylesheet" href="/css/splash.min.261c4fa8199355e8452f7d41412ff418ea7713e306639990f1e149737b8e77e8.css">
<link rel="apple-touch-icon" sizes="180x180" href="/images/annotorious-touch-icon.png">
<link rel="apple-touch-icon" sizes="152x152" href="/images/annotorious-touch-icon-152.png">
<link rel="apple-touch-icon" sizes="144x144" href="/images/annotorious-touch-icon-144.png">
<link rel="apple-touch-icon" sizes="114x114" href="/images/annotorious-touch-icon-114.png" />
<link rel="apple-touch-icon" sizes="72x72" href="/images/annotorious-touch-icon-144.png" />
<link rel="apple-touch-icon" sizes="57x57" href="/images/annotorious-touch-icon-114.png" />
<link rel="apple-touch-icon" href="/images/annotorious-touch-icon.png">
<meta name="description" content="Add drawing, commenting and labeling functionality to images on your website with a few lines of JavaScript.">
<meta name="twitter:title" content="Annotorious | JavaScript image annotation library" />
<meta name="twitter:image:src" content="https://annotorious.github.io/images/annotorious-social-large.png" />
<meta name="twitter:site" content="@aboutgeo" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:description" content="Add drawing, commenting and labeling functionality to images on your website with a few lines of JavaScript.">
<meta property="og:title" content="Annotorious | JavaScript image annotation library" />
<meta property="og:description" content="Add drawing, commenting and labeling functionality to images on your website with a few lines of JavaScript.">
<meta property="og:url" content="https://annotorious.github.io" />
<meta property="og:image" content="https://annotorious.github.io/images/annotorious-social-large.png" />
<meta property="og:type" content="object" />
<script>if(!sessionStorage.getItem("_swa")&&document.referrer.indexOf(location.protocol+"//"+location.host)!== 0){fetch("https://counter.dev/track?"+new URLSearchParams({referrer:document.referrer,screen:screen.width+"x"+screen.height,user:"[email protected]",utcoffset:"1"}))};sessionStorage.setItem("_swa","1");</script>
</head>
<body>
<div class="jumbo-header">
<div class="jumbo-header-background">
<img id="header-background" src="/images/splash-header.jpg" />
</div>
<div class="jumbo-header-foreground">
<div class="jumbo-header-logo-wrapper">
<div class="jumbo-header-logo">Annotorious</div>
</div>
</div>
</div>
<header class="banner">
Annotorious version 2 is no longer maintained. <a href="https://annotorious.dev">Go to Annotorious v3.</a>
</header>
<div id="navbar" class="jumbo-header-navbar" style="background-color:rgba(34,34,34,0);">
<div class="mobile-only">
<button class="hamburger-icon" id="open-responsive-menu" onclick="openResponsiveMenu()">
<img src="/images/menu-24px.svg">
</button>
</div>
<ul>
<li><a href="/getting-started">Getting Started</a></li>
<li><a href="/api-docs">API Docs</a></li>
<li><a href="/guides">Guides</a></li>
<li><a href="/plugins">Plugins</a></li>
<li><a href="/about">About</a></li>
<li class="github"><a href="https://github.com/annotorious/annotorious"><img src="/images/github-logo.svg"></a></li>
</ul>
</div>
<div class="column">
<div class="download-latest">
<h2>JavaScript image annotation library</h2>
<p>
Add drawing, commenting and labeling functionality to images on your website
with a few lines of JavaScript
</p>
<a class="download-button" href="https://github.com/annotorious/annotorious/releases/latest">
Download Annotorious 2.7.12
</a>
<p class="osd-link">
Or get the latest <a href="#openseadragon">OpenSeadragon plugin</a>.
</p>
</div>
<div>
<div class="highlight"><pre tabindex="0" style="color:#93a1a1;background-color:#002b36;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-js" data-lang="js"><span style="display:flex;"><span><span style="color:#268bd2">var</span> anno <span style="color:#719e07">=</span> Annotorious.init({
</span></span><span style="display:flex;"><span> image<span style="color:#719e07">:</span> <span style="color:#b58900">document</span>.getElementById(<span style="color:#2aa198">'image-to-annotate'</span>)
</span></span><span style="display:flex;"><span>});
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span><span style="color:#586e75">// Load annotations in W3C Web Annotation format
</span></span></span><span style="display:flex;"><span><span style="color:#586e75"></span>anno.loadAnnotations(<span style="color:#2aa198">'annotations.json'</span>);
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span><span style="color:#586e75">// Attach listeners to handle annotation events
</span></span></span><span style="display:flex;"><span><span style="color:#586e75"></span>anno.on(<span style="color:#2aa198">'createAnnotation'</span>, <span style="color:#268bd2">function</span>(annotation) {
</span></span><span style="display:flex;"><span> console.log(<span style="color:#2aa198">'Created!'</span>);
</span></span><span style="display:flex;"><span>});
</span></span></code></pre></div>
</div>
<div class="message">
<p>
<strong>Integrate anywhere.</strong> Client-only JavaScript. Works in the browser with no server-side
dependencies. With a <a href="/api-docs/annotorious">rich JavaScript API</a> that has
everything you need to build your own tailor-made annotation applications.
<a href="/getting-started">Get started</a>.
</p>
</div>
<div class="divider-image">
<img id="cogs" src="/images/splash-cogs.jpg" />
</div>
<div class="message">
<p>
<strong>Flexible. Extensible. Interoperable.</strong> Based on the
<a href="https://www.w3.org/TR/annotation-model/">W3C standard</a> for web annotations. Fully
customizable. Change look & feel with CSS, write your own <a href="/api-docs/annotorious/#formatters">formatters</a> to
apply rule-based annotation styles, or build your own plugins and editor extensions.
</p>
</div>
<div class="divider-image">
<img id="lego" src="/images/splash-lego.jpg" />
</div>
<div id="openseadragon" class="download-openseadragon">
<img src="/images/annotorious-osd-stylized.png"/>
<p>
Annotorious is also available as a plugin to <a href="https://openseadragon.github.io/">OpenSeadragon</a>, a JavaScript
viewer for high-resolution zoomable images. <a href="/getting-started/osd-plugin/">Learn more</a>.
</p>
<a class="download-button" href="https://github.com/annotorious/annotorious-openseadragon/releases/latest">
<span class="omittable">Download </span>OpenSeadragon Plugin 2.7.14
</a>
</div>
<div class="message whos-using">
<h2>Who's using Annotorious?</h2>
<ul>
<li>
<a href="https://www.wales.nhs.uk/" title="NHS Wales">
<img src="/images/users/NHSWalesCavLogo.png" alt="NHS Wales">
</a>
</li>
<li>
<a href="https://archipelago.nyc/" title="Archipelago Digital Object Repository by Metro">
<img src="/images/users/metro_large.png" alt="Archipelago Digital Object Repository by Metro">
</a>
</li>
<li>
<a href="https://crowdsourced.micropasts.org/" title="Micropasts">
<img src="/images/users/MicroPasts.png" alt="MicroPasts">
</a>
</li>
</ul>
<p>Using Annotorious? But not listed here? <a href="https://gitter.im/recogito/annotorious" class="no-break">Get in touch</a>!</p>
</div>
</div>
<footer>
<div class="inner">
<p>Licensed under the <a href="https://github.com/annotorious/annotorious/blob/master/LICENSE">BSD License</a></p>
<p>Need help? Get in touch via the <a href="https://gitter.im/recogito/annotorious" class="no-break">Annotorious Gitter Chat</a></p>
<p>Want to help improve documentation? <a href="https://github.com/annotorious/project-website-source">Fork this website</a> and send a pull request!</p>
<p class="social-links">
<span class="no-break">
<a href="https://github.com/annotorious/annotorious"><img src="/images/github-logo.svg"></a>
<a href="https://github.com/annotorious/annotorious">github.com/annotorious</a>
</span>
<span class="no-break">
<a href="https://twitter.com/aboutgeo"><img src="/images/twitter-logo.svg"></a>
<a href="https://twitter.com/aboutgeo">twitter.com/aboutgeo</a>
</span>
<span class="no-break">
<a href="https://steadyhq.com/rainer-simon"><img src="/images/sponsors-logo.svg"></a>
<a href="https://steadyhq.com/rainer-simon">Become a sponsor</a>
</span>
</p>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/@recogito/[email protected]/dist/annotorious.min.js"></script>
<script type="text/javascript" src="/js/splash-gadgets.js"></script>
</body>
</html>