-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.xml
138 lines (138 loc) · 42.4 KB
/
index.xml
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
<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
<channel>
<title>Annotorious on annotorious.github.io</title>
<link>http://annotorious.github.io/</link>
<description>Recent content in Annotorious on annotorious.github.io</description>
<generator>Hugo</generator>
<language>en-us</language>
<lastBuildDate>Sun, 18 Sep 2022 08:54:00 +0200</lastBuildDate>
<atom:link href="http://annotorious.github.io/index.xml" rel="self" type="application/rss+xml" />
<item>
<title>Configuring the Editor</title>
<link>http://annotorious.github.io/guides/configuring-the-editor/</link>
<pubDate>Thu, 24 Sep 2020 14:24:22 +0200</pubDate>
<guid>http://annotorious.github.io/guides/configuring-the-editor/</guid>
<description><h1 id="customizing-the-editor">Customizing the Editor</h1>
<p>Per default, the Annotorious editor popup features two widgets:</p>
<ul>
<li>A <strong>comment widget</strong> for writing comments and replies</li>
<li>A <strong>tag widget</strong> for adding tags, either freetext or supported by a pre-configured vocabulary and an autosuggest dropdown</li>
</ul>
<p><img src="http://annotorious.github.io/images/guides/editor-popup-with-vocab.png" alt="Editor popup"></p>
<p>You can can customize this setup when you initialize Annotorious/RecogitoJS using the
<code>widgets</code> config option. The configuration below will give you the editor shown in the
image above.</p></description>
</item>
<item>
<title>Customizing Styles</title>
<link>http://annotorious.github.io/guides/customizing-styles/</link>
<pubDate>Thu, 24 Sep 2020 10:47:22 +0200</pubDate>
<guid>http://annotorious.github.io/guides/customizing-styles/</guid>
<description><h1 id="customizing-visual-appearance">Customizing Visual Appearance</h1>
<p>Need a different look and feel? Customizing the visual appearance of Annotorious is easy.
All elements of the annotation layer and the editor popup can be styled with CSS.</p>
<h2 id="customizing-shape-styles">Customizing Shape Styles</h2>
<p>Annotorious renders annotations using <a href="https://developer.mozilla.org/en-US/docs/Web/SVG">SVG</a>.
You can completely alter the visual appearance of every graphical element via CSS.</p>
<p>To make styling more flexible, Annotorious adds a few extras:</p>
<ul>
<li>For every annotation shape, Annotorious renders two SVG shapes, exactly on top of each other. The two shapes
have different CSS classes - <code>a9s-inner</code> and <code>a9s-outer</code>. You can use this to create line styles with an outline.
(The default style renders an outer black line and a slightly thinner white inner line.)</li>
<li>When the user creates a new selection, Annotorious renders a mask element. In the default theme, the mask is
hidden. But you can enable it via CSS to add a dimming effect to the area outside the selection.</li>
</ul>
<h3 id="custom-style-example">Custom Style Example</h3>
<p><img src="http://annotorious.github.io/images/guides/custom-annotationlayer-style.jpg" alt="A custom annotation layer style"></p></description>
</item>
<item>
<title>OpenSeadragon Plugin</title>
<link>http://annotorious.github.io/getting-started/osd-plugin/</link>
<pubDate>Mon, 01 Jun 2020 10:20:00 +0200</pubDate>
<guid>http://annotorious.github.io/getting-started/osd-plugin/</guid>
<description><h1 id="getting-started-with-the-openseadragon-plugin">Getting Started with the OpenSeadragon Plugin</h1>
<p>The <strong>Annotorious OpenSeadragon plugin</strong> is an extension to the <a href="http://openseadragon.github.io/">OpenSeadragon</a>
viewer for zoomable high-resolution images. <strong>Click or tap</strong> the annotation to edit. Hold the <code>SHIFT</code> key while
clicking and dragging the mouse to create a new annotation.</p>
<div class="inline-demo">
 <style>
 #toolbar {
 margin-bottom:10px;
 }
 
 .openseadragon-canvas {
 outline:none; 
 background-color:#f4f4f4 !important;
 border-radius:3px;
 }

 #openseadragon {
 max-width:640px; 
 height:400px;
 width:100%;
 }

 @media only screen and (max-width: 800px) {

 .r6o-editor {
 width:260px !important;
 }

 }
 </style>
 <div id="toolbar"></div>
 <div id="openseadragon"></div>
</div>
<script type="text/javascript" src="http://annotorious.github.io/js/openseadragon/openseadragon.4.0.0.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@recogito/[email protected]/dist/annotorious.min.css">
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@recogito/[email protected]/dist/openseadragon-annotorious.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@recogito/[email protected]/dist/annotorious-toolbar.min.js"></script>
<script>
 var sampleAnnotation = { 
 "@context": "http://www.w3.org/ns/anno.jsonld",
 "id": "#07475897-d2eb-4dce-aa12-ecb50771c734",
 "type": "Annotation",
 "body": [{
 "type": "TextualBody",
 "value": "Annotation"
 }],
 "target": {
 "selector": {
 "type": "FragmentSelector",
 "conformsTo": "http://www.w3.org/TR/media-frags/",
 "value": "xywh=540,240,180,340"
 }
 }
 };

 window.onload = function() {
 var viewer = OpenSeadragon({
 id: "openseadragon",
 prefixUrl: "/js/openseadragon/images/",
 tileSources: {
 type: "image",
 url: "/images/1280px-Hallstatt.jpg"
 },
 gestureSettingsTouch: {
 pinchRotate: true
 }
 });

 var anno = OpenSeadragon.Annotorious(viewer, {
 locale: 'auto',
 allowEmpty: true
 });

 Annotorious.Toolbar(anno, document.getElementById('toolbar'));

 anno.addAnnotation(sampleAnnotation);
 }
</script>
<p>Download the <a href="https://github.com/recogito/annotorious-openseadragon/releases/latest">latest release</a>
and include script and stylesheet file in your web page. Make sure to include the script <strong>after</strong> the
OpenSeadragon script.</p></description>
</item>
<item>
<title>Headless Mode</title>
<link>http://annotorious.github.io/guides/headless-mode/</link>
<pubDate>Sat, 03 Apr 2021 10:28:42 +0200</pubDate>
<guid>http://annotorious.github.io/guides/headless-mode/</guid>
<description><h1 id="headless-mode-using-annotorious-without-the-editor-popup">Headless Mode: Using Annotorious without the Editor Popup</h1>
<p>Want to use Annotorious only for the drawing tools? But don&rsquo;t need
the editor? That&rsquo;s what <strong>headless mode</strong> is for! In headless mode, you keep
all the standard functionality: drawing and editing shapes, JavaScript API,
lifecycle events. But you are free to build your own user interface, without being
forced to the standard editor popup.</p>
<p>The demo uses headless mode to create annotations with either an <strong>Orange</strong>
or <strong>Green</strong> tag, and a <a href="http://annotorious.github.io/api-docs/annotorious/#formatters">formatter</a>
to color the shapes. (To delete an annotation, select it and press the <strong>Delete</strong> key.)</p></description>
</item>
<item>
<title>Web Annotation Model</title>
<link>http://annotorious.github.io/getting-started/web-annotation/</link>
<pubDate>Sun, 17 May 2020 14:33:09 +0200</pubDate>
<guid>http://annotorious.github.io/getting-started/web-annotation/</guid>
<description><h1 id="the-w3c-web-annotation-model">The W3C Web Annotation Model</h1>
<p>Annotorious supports a subset of the <a href="https://www.w3.org/TR/annotation-model/">W3C Web Annotation model</a>,
an open standard for interoperable annotations.</p>
<ul>
<li>Only a <strong>single target</strong> shape per annotation is supported.</li>
<li><strong><a href="https://www.w3.org/TR/annotation-model/#fragment-selector">FragmentSelectors</a></strong> of type <a href="https://www.w3.org/TR/media-frags/">Media Fragment</a>
are supported for rectangle shapes (see example below), with both pixel- and percent-encoded coordinates.</li>
<li><strong><a href="https://www.w3.org/TR/annotation-model/#svg-selector">SVG Selectors</a></strong> aer supported for polygon shapes (see example below).</li>
<li>Annotation <code>TextualBody</code> types with a <code>purpose</code> of <code>commenting</code>, <code>replying</code> or no <code>purpose</code> are displayed as <strong>comments</strong>.</li>
<li>Annotation bodies with a <code>purpose</code> of <code>tagging</code> are displayed as <strong>tags</strong>.</li>
<li>Bodies of any other type are <strong>ignored</strong>, unless you implement your own editor extension.</li>
</ul>
<h2 id="annotation-ids">Annotation IDs</h2>
<p><strong>Important:</strong> Annotorious requires an <code>id</code> on every annotation. The ID can be any alphanumeric string.
Annotations created by users will automatically get a globally unique ID in the form <code>#{uuid}</code>.</p></description>
</item>
<item>
<title>Annotorious in Vue</title>
<link>http://annotorious.github.io/guides/annotorious-in-vue/</link>
<pubDate>Sun, 18 Sep 2022 08:54:00 +0200</pubDate>
<guid>http://annotorious.github.io/guides/annotorious-in-vue/</guid>
<description><h1 id="using-annotorious-in-vuejs">Using Annotorious in Vue.js</h1>
<p>Below is a minimal example for using Annotorious in Vue.js. Thanks to
<a href="https://github.com/gbrits">Grant Brits</a> for this contribution!</p>
<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-html" data-lang="html"><span style="display:flex;"><span>&lt;<span style="color:#268bd2">template</span>&gt;
</span></span><span style="display:flex;"><span> &lt;<span style="color:#268bd2">div</span>&gt;
</span></span><span style="display:flex;"><span> &lt;<span style="color:#268bd2">img</span> id<span style="color:#719e07">=</span><span style="color:#2aa198">&#34;plan&#34;</span> src<span style="color:#719e07">=</span><span style="color:#2aa198">&#34;img.png&#34;</span> style<span style="color:#719e07">=</span><span style="color:#2aa198">&#34;width: 100%; max-width: 1024px;&#34;</span> /&gt;
</span></span><span style="display:flex;"><span> &lt;/<span style="color:#268bd2">div</span>&gt;
</span></span><span style="display:flex;"><span>&lt;/<span style="color:#268bd2">template</span>&gt;
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>&lt;<span style="color:#268bd2">script</span>&gt;
</span></span><span style="display:flex;"><span> <span style="color:#268bd2">import</span> { Annotorious} from <span style="color:#2aa198">&#39;@recogito/annotorious&#39;</span>;
</span></span><span style="display:flex;"><span> <span style="color:#268bd2">import</span> <span style="color:#2aa198">&#39;@recogito/annotorious/dist/annotorious.min.css&#39;</span>;
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span> <span style="color:#268bd2">export</span> <span style="color:#719e07">default</span> {
</span></span><span style="display:flex;"><span> 
</span></span><span style="display:flex;"><span> data() {
</span></span><span style="display:flex;"><span> <span style="color:#719e07">return</span> {
</span></span><span style="display:flex;"><span> anno<span style="color:#719e07">:</span> <span style="color:#cb4b16">null</span>
</span></span><span style="display:flex;"><span> }
</span></span><span style="display:flex;"><span> },
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span> methods<span style="color:#719e07">:</span> {
</span></span><span style="display:flex;"><span> initAnno() {
</span></span><span style="display:flex;"><span> <span style="color:#719e07">this</span>.anno <span style="color:#719e07">=</span> <span style="color:#719e07">new</span> Annotorious({
</span></span><span style="display:flex;"><span> image<span style="color:#719e07">:</span> <span style="color:#b58900">document</span>.getElementById(<span style="color:#2aa198">&#34;plan&#34;</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:#719e07">this</span>.anno.on(<span style="color:#2aa198">&#39;createAnnotation&#39;</span>, <span style="color:#268bd2">function</span> (annotation) {
</span></span><span style="display:flex;"><span> console.log(<span style="color:#2aa198">&#39;Created annotation&#39;</span>, annotation);
</span></span><span style="display:flex;"><span> });
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span> <span style="color:#719e07">this</span>.anno.on(<span style="color:#2aa198">&#39;createSelection&#39;</span>, <span style="color:#268bd2">function</span> (selection) {
</span></span><span style="display:flex;"><span> console.log(<span style="color:#2aa198">&#39;Created selection&#39;</span>, selection);
</span></span><span style="display:flex;"><span> });
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span> <span style="color:#719e07">this</span>.anno.on(<span style="color:#2aa198">&#39;deleteAnnotation&#39;</span>, <span style="color:#268bd2">function</span> (annotation) {
</span></span><span style="display:flex;"><span> console.log(<span style="color:#2aa198">&#39;Delete annotation&#39;</span>, selection);
</span></span><span style="display:flex;"><span> });
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span> <span style="color:#719e07">this</span>.anno.on(<span style="color:#2aa198">&#39;mouseEnterAnnotation&#39;</span>, <span style="color:#268bd2">function</span> (annotation, element) {
</span></span><span style="display:flex;"><span> console.log(<span style="color:#2aa198">&#39;Mouse ENTERED annotation&#39;</span>, annotation);
</span></span><span style="display:flex;"><span> });
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span> <span style="color:#719e07">this</span>.anno.on(<span style="color:#2aa198">&#39;selectAnnotation&#39;</span>, <span style="color:#268bd2">function</span> (annotation, element) {
</span></span><span style="display:flex;"><span> console.log(<span style="color:#2aa198">&#39;Select annotation&#39;</span>, annotation);
</span></span><span style="display:flex;"><span> });
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span> <span style="color:#719e07">this</span>.anno.on(<span style="color:#2aa198">&#39;cancelSelected&#39;</span>, <span style="color:#268bd2">function</span> (selection) {
</span></span><span style="display:flex;"><span> console.log(<span style="color:#2aa198">&#39;UNSELECTED&#39;</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:#719e07">this</span>.anno.on(<span style="color:#2aa198">&#39;clickAnnotation&#39;</span>, <span style="color:#268bd2">function</span> (annotation, element) {
</span></span><span style="display:flex;"><span> console.log(<span style="color:#2aa198">&#39;Clicked annotation&#39;</span>, annotation);
</span></span><span style="display:flex;"><span> });
</span></span><span style="display:flex;"><span> }
</span></span><span style="display:flex;"><span> },
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span> mounted() {
</span></span><span style="display:flex;"><span> <span style="color:#719e07">this</span>.initAnno();
</span></span><span style="display:flex;"><span> }
</span></span><span style="display:flex;"><span> }
</span></span><span style="display:flex;"><span>&lt;/<span style="color:#268bd2">script</span>&gt;
</span></span></code></pr</description>
</item>
<item>
<title>Annotorious in React</title>
<link>http://annotorious.github.io/guides/annotorious-in-react/</link>
<pubDate>Sun, 25 Apr 2021 16:45:12 +0200</pubDate>
<guid>http://annotorious.github.io/guides/annotorious-in-react/</guid>
<description><h1 id="using-annotorious-in-react">Using Annotorious in React</h1>
<p>At the moment, Annotorious doesn&rsquo;t have native React integration (yet). If you want to use
Annotorious in your own React project, there are a few things to consider:</p>
<ul>
<li><strong>Annotorious modifies the DOM directly:</strong> you need to use <a href="https://reactjs.org/docs/refs-and-the-dom.html">refs</a>
to access image DOM elements.</li>
<li><strong>Annotorious has an imperative API:</strong> wrapping it for React requires a few workarounds, including initialization
in a <code>useEffect</code> hook, and storing the <code>anno</code> object in the component state.</li>
</ul>
<p>Below is a minimal React component to get you started:</p></description>
</item>
<item>
<title>Storing Annotations</title>
<link>http://annotorious.github.io/getting-started/storing-annotations/</link>
<pubDate>Mon, 01 Jun 2020 10:20:00 +0200</pubDate>
<guid>http://annotorious.github.io/getting-started/storing-annotations/</guid>
<description><h1 id="storing-annotations">Storing Annotations</h1>
<p><strong>Important:</strong> Annotorious does not provide a backend for storing annotations online. It provides
<strong>user interface functionality only</strong>. To store annotations, you need to connect them to your own
backend, using the <a href="http://annotorious.github.io/api-docs/">JavaScript API</a>.</p>
<p>When users create, update or delete annotations, Annotorious emits the following events:</p>
<ul>
<li><strong>createAnnotation</strong></li>
<li><strong>updateAnnotation</strong></li>
<li><strong>deleteAnnotation</strong></li>
</ul>
<p>Subscribe to these events, and execute the corresponding write operations to your backend.</p>
<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-javascript" data-lang="javascript"><span style="display:flex;"><span>anno.on(<span style="color:#2aa198">&#39;createAnnotation&#39;</span>, <span style="color:#268bd2">function</span>(annotation) {
</span></span><span style="display:flex;"><span> <span style="color:#586e75">// This part depends entirely on how your backend works
</span></span></span><span style="display:flex;"><span><span style="color:#586e75"></span> axios.post(<span style="color:#2aa198">&#39;http://www.example.com/annotations/&#39;</span>).then((response) =&gt; {
</span></span><span style="display:flex;"><span> console.log(<span style="color:#2aa198">&#39;Stored.&#39;</span>);
</span></span><span style="display:flex;"><span> });
</span></span><span style="display:flex;"><span>});
</span></span></code></pr</description>
</item>
<item>
<title>Firebase Storage Plugin</title>
<link>http://annotorious.github.io/guides/using-firebase-for-storage/</link>
<pubDate>Fri, 01 May 2020 13:28:54 +0200</pubDate>
<guid>http://annotorious.github.io/guides/using-firebase-for-storage/</guid>
<description><h1 id="using-firebase-for-storage">Using Firebase for Storage</h1>
<p>A quick and easy way to set up your own annotation store without managing your own server is
through <a href="https://firebase.google.com/">Firebase</a>, a web application development platform by Google.
Firebase includes a cloud-based document database with a JavaScript SDK for storing, updating and
deleting JSON records. All you need to do is wire up the Firebase storage SDK operations with the
corresponding events from Annotorious.</p>
<p><img src="http://annotorious.github.io/images/guides/firebase.png" alt="Firebase Screenshot"></p></description>
</item>
<item>
<title>Writing Editor Widgets</title>
<link>http://annotorious.github.io/guides/editor-widgets/</link>
<pubDate>Thu, 24 Sep 2020 14:24:22 +0200</pubDate>
<guid>http://annotorious.github.io/guides/editor-widgets/</guid>
<description><h1 id="writing-your-own-editor-widgets">Writing Your Own Editor Widgets</h1>
<p>You can extend the editor with your own <strong>widgets</strong>. A widget can be:</p>
<ol>
<li>an ordinary JavaScript function that takes a set of input arguments and returns
a DOM element, which will be inserted into the editor</li>
<li>a <a href="https://reactjs.org/docs/introducing-jsx.html">React</a> component conforming to the
same interface conventions as the built-in widgets.</li>
</ol>
<blockquote>
<p>Before you start writing your own widgets, you should first familiarize yourself with the
the <a href="http://annotorious.github.io/getting-started/web-annotation">W3C Web Annotation specification</a>, in
particular the concepts of <strong>annotation bodies</strong> and body <strong>purposes</strong>.</p></description>
</item>
<item>
<title>React Editor Widget</title>
<link>http://annotorious.github.io/guides/example-react-widget/</link>
<pubDate>Sat, 20 Feb 2021 10:28:42 +0200</pubDate>
<guid>http://annotorious.github.io/guides/example-react-widget/</guid>
<description><h1 id="an-example-react-editor-widget">An Example React Editor Widget</h1>
<p>In this guide, we re-recreate the example <a href="http://annotorious.github.io/guides/editor-widgets/">color selector widget from the previous tutorial</a>
as a React component. The widget adds a section to the editor with three buttons: red, green and blue.
Clicking one of the buttons will set an annotation body with the color value, and body purpose of <code>highlighting</code>.</p>
<p><img src="http://annotorious.github.io/images/guides/colorselector-widget.png" alt="Editor popup"></p>
<p>JSX code for the plugin is below. A full project (including a webpack build configuration)
is <a href="https://github.com/recogito/recogito-client-plugins/tree/main/packages/widget-react-helloworld">available on GitHub</a>.
Here&rsquo;s what the code does, step by step:</p></description>
</item>
<item>
<title>Contributing Translations</title>
<link>http://annotorious.github.io/guides/contributing-ui-translations/</link>
<pubDate>Mon, 01 Jun 2020 20:04:18 +0200</pubDate>
<guid>http://annotorious.github.io/guides/contributing-ui-translations/</guid>
<description><h1 id="contributing-ui-translations">Contributing UI Translations</h1>
<p>We want to make the user interface available in as many languages as possible. If you want to help: providing a translation is easy - and because there are not many labeled elements, it&rsquo;s not a lot of work.</p>
<h2 id="message-dictionaries">Message Dictionaries</h2>
<p>User interface labels are part of <code>recogito-client-core</code>, a JavaScript package for common code shared between
Annotorious and RecogitoJS. In <a href="https://github.com/recogito/recogito-client-core/tree/main/src/i18n">this folder</a>
you will find <code>messages</code> files, one file for each available translation.</p></description>
</item>
<item>
<title>Hacker's Guide</title>
<link>http://annotorious.github.io/guides/hackers-guide/</link>
<pubDate>Thu, 04 Jun 2020 11:46:22 +0200</pubDate>
<guid>http://annotorious.github.io/guides/hackers-guide/</guid>
<description><h1 id="hackers-guide-to-annotorious-and-recogitojs">Hacker&rsquo;s Guide to Annotorious and RecogitoJS</h1>
<p>We welcome pull requests to Annotorious and RecogitoJS - both to the code, as well as to our documentation! To contribute,
simply fork the relevant repository and hack away. Our code is located in the following repositories</p>
<ul>
<li><strong><a href="https://github.com/recogito/annotorious">recogito/annotorious</a></strong>. Annotorious application entry point, SVG rendering
and drawing tool base classes.</li>
<li><strong><a href="https://github.com/recogito/annotorious-openseadragon">recogito/annotorious-openseadragon</a></strong>. The OpenSeadragon plugin.
Imports most functionality from annotorious and recogito-client-core.</li>
<li><strong><a href="https://github.com/recogito/recogito-client-core">recogito/recogito-client-core</a></strong>. A base module that contains shared
code for Annotorious and RecogitoJS, most importantly the code for the editor popup.</li>
<li><strong><a href="https://github.com/recogito/recogito-js">recogito/recogito-js</a></strong>. RecogitoJS application entry point, text annotation
functionality.</li>
</ul>
<h2 id="running-in-development-mode">Running in Development Mode</h2>
<p>To hack on <strong>Annotorious</strong>, the <strong>OpenSeadragon plugin</strong> or <strong>RecogitoJS</strong>, you need to run them in development mode.</p></description>
</item>
<item>
<title>Plugins</title>
<link>http://annotorious.github.io/plugins/</link>
<pubDate>Mon, 05 Apr 2021 10:09:57 +0200</pubDate>
<guid>http://annotorious.github.io/plugins/</guid>
<description><h1 id="plugins">Plugins</h1>
<p>Plugins extend the functionality of Annotorious. The following plugins are currently
available:</p>
<h2 id="annotorious-better-polygonhttpsgithubcomrecogitorecogito-client-pluginstreemainpluginsannotorious-better-polygon"><a href="https://github.com/recogito/recogito-client-plugins/tree/main/plugins/annotorious-better-polygon">Annotorious Better Polygon</a></h2>
<p>A better polygon drawing tool for for Annotorious and Annotorious OpenSeadragon. Provides extra features not found in
the built-in polygon tool, such as adding and removing points, closing the polygon by re-selecting the first point, and
selecting/moving multiple corners.</p>
<h2 id="annotorious-selector-packhttpsgithubcomrecogitoannotorious-selector-pack"><a href="https://github.com/recogito/annotorious-selector-pack">Annotorious Selector Pack</a></h2>
<p>Additional selection tools for Annotorious and Annotorious OpenSeadragon: <strong>circle</strong>, <strong>ellipse</strong>
and <strong>freehand drawing</strong>.</p></description>
</item>
<item>
<title>Annotorious</title>
<link>http://annotorious.github.io/site/annotorious/</link>
<pubDate>Fri, 12 Jun 2020 08:04:26 +0200</pubDate>
<guid>http://annotorious.github.io/site/annotorious/</guid>
<description></description>
</item>
<item>
<title>About</title>
<link>http://annotorious.github.io/about/</link>
<pubDate>Mon, 01 Jun 2020 17:48:46 +0200</pubDate>
<guid>http://annotorious.github.io/about/</guid>
<description><h1 id="about-annotorious">About Annotorious</h1>
<p>Annotorious is <strong>open source software</strong> licensed under the <a href="https://github.com/recogito/annotorious/blob/master/LICENSE">BSD 3-Clause license</a>.</p>
<h2 id="source-code">Source Code</h2>
<p>All source code is available on the <strong><a href="https://github.com/recogito">recogito</a></strong> GitHub organization. The key
repositories are:</p>
<ul>
<li><strong><a href="https://github.com/recogito/annotorious">recogito/annotorious</a></strong> Annotorious (standard version)</li>
<li><strong><a href="https://github.com/recogito/annotorious-openseadragon">recogito/annotorious-openseadragon</a></strong> Annotorious OpenSeadragon plugin</li>
<li><strong><a href="https://github.com/recogito/recogito-client-core">recogito/recogito-client-core</a></strong> shared base components</li>
<li><strong><a href="https://github.com/recogito/recogito-client-plugins">recogito/recogito-client-plugins</a></strong> plugins and extensions</li>
</ul>
<h2 id="need-help">Need Help?</h2>
<p>Get in touch via the <a href="https://gitter.im/recogito/annotorious">Annotorious Gitter chat</a>. If you encounter bugs, or
have feature requests, please report them via the GitHub issue trackers:</p></description>
</item>
<item>
<title>API Docs | Annotorious OSD Plugin</title>
<link>http://annotorious.github.io/api-docs/osd-plugin/</link>
<pubDate>Sun, 17 May 2020 14:15:19 +0200</pubDate>
<guid>http://annotorious.github.io/api-docs/osd-plugin/</guid>
<description><h1 id="api-reference-openseadragon-plugin">API Reference: OpenSeadragon Plugin</h1>
<blockquote>
<p>The <strong>OpenSeadragon Plugin</strong> is an extension to the
<a href="http://openseadragon.github.io/">OpenSeadragon</a> zoomable image viewer.
If you are looking for the standard version of Annotorious, which works with
normal images embedded in websites, <a href="http://annotorious.github.io/api-docs/annotorious">see here instead</a>.</p>
</blockquote>
<h2 id="initialization">Initialization</h2>
<p>When included via <code>&lt;script&gt;</code> tag:</p>
<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> OpenSeadragon.Annotorious(viewer, config);
</span></span></code></pre></div><p>With npm:</p>
<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">import</span> OpenSeadragon from <span style="color:#2aa198">&#39;openseadragon&#39;</span>;
</span></span><span style="display:flex;"><span><span style="color:#268bd2">import</span> <span style="color:#719e07">*</span> as Annotorious from <span style="color:#2aa198">&#39;@recogito/annotorious-openseadragon&#39;</span>;
</span></span><span style="display:flex;"><span><span style="color:#268bd2">import</span> <span style="color:#2aa198">&#39;@recogito/annotorious-openseadragon/dist/annotorious.min.css&#39;</span>;
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span><span style="color:#268bd2">const</span> viewer <span style="color:#719e07">=</span> OpenSeadragon({
</span></span><span style="display:flex;"><span> id<span style="color:#719e07">:</span> <span style="color:#2aa198">&#34;openseadragon&#34;</span>,
</span></span><span style="display:flex;"><span> tileSources<span style="color:#719e07">:</span> {
</span></span><span style="display:flex;"><span> type<span style="color:#719e07">:</span> <span style="color:#2aa198">&#34;image&#34;</span>,
</span></span><span style="display:flex;"><span> url<span style="color:#719e07">:</span> <span style="color:#2aa198">&#34;1280px-Hallstatt.jpg&#34;</span>
</span></span><span style="display:flex;"><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:#268bd2">const</span> config <span style="color:#719e07">=</span> {}; <span style="color:#586e75">// Optional plugin config options
</span></span></span><span style="display:flex;"><span><span style="color:#586e75"></span>
</span></span><span style="display:flex;"><span>Annotorious(viewer, config);
</span></span></code></pr</description>
</item>
<item>
<title>API Docs | Annotorious</title>
<link>http://annotorious.github.io/api-docs/annotorious/</link>
<pubDate>Sun, 17 May 2020 14:14:36 +0200</pubDate>
<guid>http://annotorious.github.io/api-docs/annotorious/</guid>
<description><h1 id="api-reference-annotorious">API Reference: Annotorious</h1>
<blockquote>
<p>The <strong>standard version</strong> of Annotorious works with normal images embedded in websites
or web applications. If you are looking for the Annotorious OpenSeadragon plugin,
<a href="http://annotorious.github.io/api-docs/osd-plugin">see here instead</a>.</p>
</blockquote>
<h2 id="initialization">Initialization</h2>
<p>When included via <code>&lt;script&gt;</code> tag:</p>
<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-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#268bd2">var</span> config <span style="color:#719e07">=</span> {
</span></span><span style="display:flex;"><span> image<span style="color:#719e07">:</span> <span style="color:#b58900">document</span>.getElementById(<span style="color:#2aa198">&#39;my-image&#39;</span>),
</span></span><span style="display:flex;"><span> readOnly<span style="color:#719e07">:</span> <span style="color:#cb4b16">true</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:#268bd2">var</span> anno <span style="color:#719e07">=</span> Annotorious.init(config);
</span></span></code></pr</description>
</item>
</channel>
</rss>