open-index/open-npm huggingface dataset:
npm package: @recogito/annotorious-better-polygon
Description: An improved polygon editing tool with more features and better usability
Author: Rainer Simon
Latest version: 0.2.0

# Annotorious Better Polygon

A better polygon selection tool for [Annotorious](https://annotorious.com). Compatible with both
the Annotorious standard version and Annotorious for OpenSeadragon.

![Demo video](https://raw.githubusercontent.com/recogito/recogito-client-plugins/main/plugins/annotorious-better-polygon/screencast.gif)

## Features

- Close the polygon either by double clicking (or long tap), or re-selecting the first point
- When approaching the first point, the mouse will snap to it to make selecting easier
- Add points by clicking and dragging the line midpoint handles
- Remove points by selecting them with a click and pressing the DEL key
- Optionally start drawing by drag or single click

## Installation

__Better Polygon__ requires Annotorious version 2.5.9 or higher.

```html
<html>
  <head>
    <!-- Import Annotorious first -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@recogito/annotorious@latest/dist/annotorious.min.css">
    <script src="https://cdn.jsdelivr.net/npm/@recogito/annotorious@latest/dist/annotorious.min.js"></script>

    <!-- Import the Better Polygon script -->
    <script src="https://cdn.jsdelivr.net/npm/@recogito/annotorious-better-polygon@latest/dist/annotorious-better-polygon.js"></script>
  </head>
  <body>
    <img id="hallstatt" src="640px-Hallstatt.jpg" />

    <script type="text/javascript">
      (function() {
        // Init Annotorious
        var anno = Annotorious.init({
          image: 'hallstatt'
        });

        // Init the plugin
        Annotorious.BetterPolygon(anno);
      })();
    </script>
  </body>
</html>
```

__Or via npm:__

```
$ npm i @recogito/annotorious-better-polygon
```

__Import and initialize:__

```js
import BetterPolygon from '@recogito/annotorious-better-polygon';

//...

BetterPolygon(anno);
```
npm package: @recogito/annotorious-map-annotation
Description: An Annotorious plugin for annotating maps
Author: Rainer Simon
Latest version: 0.3.2

# Annotorious Map Annotation

A helper plugin for using Annotorious with maps and geo-referenced images. After the 
plugin is installed, annotation shapes will use geographic coordinates (latitude, longitude)
rather than image pixel coordinates.

This plugin currently works with [Annotorious OpenSeadragon](https://github.com/recogito/annotorious-openseadragon)
and WMTS maps __only__.

The plugin depends on:
- [OpenSeadragon](https://openseadragon.github.io/)
- [Annotorious OpenSeadragon](https://github.com/recogito/annotorious-openseadragon)
- [OpenSeadragon WTMS plugin](https://github.com/recogito/openseadragon-wmts)

## Installing
`npm install @recogito/annotorious-map-annotation`

or 

```html
<script src="https://cdn.jsdelivr.net/npm/@recogito/annotorious-map-annotation@latest/dist/annotorious-map-annotation.js"></script>
```

## Using

```js
// OpenSeadragon viewer
var viewer = OpenSeadragon({
  id: "openseadragon",
  prefixUrl: "openseadragon/images/"
});

// OpenSeadragon WMTS plugin
var map = await OpenSeadragon.WMTS(viewer, {
  url: 'http://maps.wien.gv.at/wmts/1.0.0/WMTSCapabilities.xml'
});

// Initialize Annotorious
var anno = OpenSeadragon.Annotorious(viewer);

// Add the map annotation plugin
Annotorious.MapAnnotation(anno, map);
```
npm package: @recogito/annotorious-openseadragon
Description: Annotorious image annotation for OpenSeadragon
Author: Rainer Simon
Latest version: 2.7.19

<p align="center">
  <img width="345" src="https://raw.githubusercontent.com/recogito/annotorious-openseadragon/master/annotorious-osd-stylized.png" />
  <br/><br/>
</p>

A plugin for [OpenSeadragon](https://openseadragon.github.io/) that integrates [Annotorious](https://github.com/recogito/annotorious)
to enable creation and display of annotations on high-resolution zoomable images. See the 
[project website](https://recogito.github.io/annotorious/) for details and live demos.

## Installing

Download the [latest release](https://github.com/recogito/annotorious-openseadragon/releases/latest)
and include it in your web page __after__ the OpenSeadragon script.

```html
<link rel="stylesheet" href="annotorious.min.css">
<script src="openseadragon/openseadragon.2.4.2.min.js"></script>
<script src="openseadragon-annotorious.min.js"></script>
```

## Using

```html
<script>
  window.onload = function() {
    var viewer = OpenSeadragon({
      id: "openseadragon1",
      prefixUrl: "openseadragon/images/",
      tileSources: {
        type: "image",
        url: "1280px-Hallstatt.jpg"
      }
    });

    // Initialize the Annotorious plugin
    var anno = OpenSeadragon.Annotorious(viewer);

    // Load annotations in W3C WebAnnotation format
    anno.loadAnnotations('annotations.w3c.json');

    // Attach handlers to listen to events
    anno.on('createAnnotation', function(a) {
      // Do something
    });
  }
</script>
```

Full documentation is [on the project website](https://recogito.github.io/annotorious/). Questions? Feedack? Feature requests? Join the [Annotorious chat on Gitter](https://gitter.im/recogito/annotorious).

[![Join the chat at https://gitter.im/recogito/annotorious](https://badges.gitter.im/recogito/annotorious.svg)](https://gitter.im/recogito/annotorious?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)

## License

[BSD 3-Clause](LICENSE) (= feel free to use this code in whatever way
you wish. But keep the attribution/license file, and if this code
breaks something, don't complain to us :-)

## Who's Using Annotorious OpenSeadragon

[__Archipelago__](https://github.com/esmero/archipelago-deployment) Open Source Digital Object Repository Software

<img width="62" src="https://raw.githubusercontent.com/recogito/annotorious-openseadragon/master/logos/metro.png" />
npm package: @recogito/annotorious-selector-pack
Description: Additional selection tools for Annotorious and the Annotorious OpenSeadragon plugin
Latest version: 0.6.1

# Annotorious Selector Pack

Additional selection tools for Annotorious and the Annotorious OpenSeadragon plugin.

- Point
- Circle
- Ellipse
- Freehand
- Multi-polygon

## Using

Include the plugin in your page directl from the CDN:

```html
<html>
  <head>
    <!-- Annotorious first -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@recogito/annotorious@latest/dist/annotorious.min.css">
    <script src="https://cdn.jsdelivr.net/npm/@recogito/annotorious@latest/dist/annotorious.min.js"></script>

    <!-- Selector Pack plugin -->
    <script src="https://cdn.jsdelivr.net/npm/@recogito/annotorious-selector-pack@latest/dist/annotorious-selector-pack.min.js"></script>
  </head>

  <body>
    <img id="hallstatt" src="640px-Hallstatt.jpg">
    <script>
      window.onload = function() {
        // Init Annotorious
        var anno = Annotorious.init({
          image: 'hallstatt'
        });

        // Init the plugin
        Annotorious.SelectorPack(anno);

        // [ 'rect', 'polygon', 'point', 'circle', 'ellipse', 'freehand' ]
        console.log(anno.listDrawingTools());

        anno.setDrawingTool('ellipse');
      }
    </script>
  </body>
</html>
```

### If you only want to include some tools

You can set the tools to include when initializing the plugin.

```js
// Will only include ellipse and freehand, but not circle
Annotorious.SelectorPack(anno, {
  tools: ['ellipse', 'freehand']
});
```
## Installation  with npm
```
npm i @recogito/annotorious-selector-pack

```

## Using with VueJS

To use the plugin in VueJS, please follow [this guide](https://recogito.github.io/guides/annotorious-in-vue/).

## Development

To run in development mode:

```sh
$ npm install
$ npm start
```
npm package: @recogito/annotorious-shape-labels
Description: Shape label plugin for Annotorious and Annotorious OpenSeadragon
Author: Rainer Simon
Latest version: 0.2.3

# Annotorious Shape Labels

A plugin for Annotorious and Annotorious OpenSeadragon that adds a the first tag as a label
to the  annotation shape.

![Example screenshot](https://raw.githubusercontent.com/recogito/recogito-client-plugins/main/plugins/annotorious-shape-labels/screenshot.jpg)

## Install

Download the [latest minified release](https://github.com/recogito/recogito-client-plugins/blob/main/plugins/annotorious-shape-labels/dist/annotorious-shape-labels.min.js) or include directly via CDN.

```html
<script src="https://cdn.jsdelivr.net/npm/@recogito/annotorious-shape-labels@latest/dist/annotorious-shape-labels.min.js"></script>
```

Import via npm:

```sh
npm install @recogito/annotorious-shape-labels
```

## Use

```html
<html>
  <head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@recogito/annotorious@latest/dist/annotorious.min.css">
    <script src="https://cdn.jsdelivr.net/npm/@recogito/annotorious@latest/dist/annotorious.min.js"></script>
    <script src="annotorious-shape-labels.min.js"></script>
  </head>
  <body>
    <img id="hallstatt" src="640px-Hallstatt.jpg" />

    <script type="text/javascript">
      (function() {
        var anno = Annotorious.init({
          image: 'hallstatt',

          // Add the formatter provided by the plugin
          formatter: Annotorious.ShapeLabelsFormatter()
        });
      })();
    </script>
  </body>
</html>
```

## CSS Styling

The label is inserted into the SVG annotation group as a `foreignObject` element. In addition, 
the plugin adds the first tag as an extra CSS class to the annotation shape.

To apply your own CSS styles, follow this structure:

```svg
<g class="a9s-annotation FirstTagValue">

  <!-- annotation shapes -->
  
  <svg class="a9s-formatter-el">
    <foreignObject>
      <div xmlns="http://www.w3.org/1999/xhtml" class="a9s-shape-label">
        FirstTagValue
      </div>
    </foreignObject>
  </svg>
</g>
```
npm package: @recogito/annotorious-tensorflow-tag-suggestions
Description: An automated tagging plugin for Annotorious and AnnotoriousOSD using MobileNet and TensorflowJS
Author: Rainer Simon
Latest version: 0.1.1

# Annotorious Tensorflow Tag Suggestions

A plugin that adds AI-powered automatic tag suggestions to Annotorious and Annotorious OpenSeadragon. Tag image regions manually first. 
After learning from at least two examples, the plugin provides tag suggestions automatically. Uses Transfer Learning in 
[Tensorflow.js](https://www.tensorflow.org/js) on top of the MobileNet image classifier. Based on this example:

https://codelabs.developers.google.com/codelabs/tensorflowjs-teachablemachine-codelab/index.html#6

![Animated screenshot](https://raw.githubusercontent.com/recogito/recogito-client-plugins/main/plugins/annotorious-tensorflow-tag-suggestions/screenshot.gif)

## Installation

Install via npm 

```sh
npm install @recogito/annotorious-tensorflow-tag-suggestions
```

or include in the page

```html
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@recogito/annotorious-tensorflow-tag-suggestions@latest/dist/annotorious-tf-tag-suggestions.min.js"></script>
```

## Example

```html
<!DOCTYPE html>
<html>
  <head>
    <title>Annotorious Smart Tagging Demo</title>
    <script src="openseadragon-bin-2.4.2/openseadragon.min.js"></script>
    <script src="openseadragon-annotorious.min.js"></script>
    <script src="annotorious-tf-tag-suggestions.min.js"></script>
    <link rel="stylesheet" href="annotorious.min.css">
  </head>
  <body>
    <div id="osd-image"></div>

    <script type="text/javascript">
      (function() {
        // Initialize OpenSeadragon
        var viewer = OpenSeadragon({
          id: "osd-image",
          tileSources: {
            type: "image",
            url: "my-image.jpeg" 
          }
        });

        // Initialize Annotorious
        var anno = OpenSeadragon.Annotorious(viewer, {
          widgets: [ 'TAG' ]
        });

        // Initialize the smart tagging plugin
        recogito.AnnotoriousTFSuggestions(anno);
      })();
    </script>
  </body>
</html>
```
npm package: @recogito/annotorious-tilted-box
Description: The Tilted Box selection tool from Recogito - now for Annotorious
Author: Rainer Simon
Latest version: 0.3.1

# Annotorious Tilted Box Plugin

This plugin for [Annotorious](https://github.com/recogito/annotorious) adds a new 
selection tool: the __Tilted Box__.

![Example screen capture](screencap.gif)

The Tilted Box allows you to quickly draw a rectangle in an arbitrary rotation.
This can be especially useful for selecting text that appears in photographs or
digitized map images.

__!!! BETA !!!__ the current version support __creating__ annotations only. You 
can not (yet) edit existing shapes.

## Install

Include the plugin directly via the CDN:

```html
<!-- Annotorious -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@recogito/annotorious@latest/dist/annotorious.min.css">
<script src="https://cdn.jsdelivr.net/npm/@recogito/annotorious@latest/dist/annotorious.min.js"></script>

<!-- Tilted box plugin -->
<script src="https://cdn.jsdelivr.net/npm/@recogito/annotorious-tilted-box@latest/dist/annotorious-tilted-box.min.js"></script>
```

Or if you are using npm:

``` 
$ npm install @recogito/annotorious-tilted-box
```

Instantiate Annotorious the normal way, and then register the plugin:

```js
var anno = Annotorious.init({
  image: 'my-image'
});

// Init the plugin
Annotorious.TiltedBox(anno);

// Annotorious now has an additional drawing 
// tool - set it as the active tool
anno.setDrawingTool('annotorious-tilted-box');
```

Questions? Feedack? Feature requests? Join the [Annotorious chat on Gitter](https://gitter.im/recogito/annotorious).

[![Join the chat at https://gitter.im/recogito/annotorious](https://badges.gitter.im/recogito/annotorious.svg)](https://gitter.im/recogito/annotorious?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)

## License

[BSD-3 Clause](https://github.com/recogito/recogito-client-plugins/blob/main/packages/annotorious-tilted-box/LICENSE) (= feel 
free to use this code in whatever way you wish. But keep the attribution/license file, 
and if this code breaks something, don't complain to us :-)
npm package: @recogito/firebase-storage
Description: Google Firebase storage adapter for RecogitoJS, Annotorious and AnnotoriousOSD
Author: Rainer Simon
Latest version: 0.2.0

# Firebase Storage

A storage plugin for RecogitoJS and Annotorious/AnnotoriousOSD that uses
Google Firebase as annotation store.

## Installation

Install via npm 

```sh
npm install @recogito/firebase-storage
```

or include in the page

```html
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@recogito/firebase-storage@latest/dist/recogito-firebase-storage.js"></script>
```

## Example

```html
<!DOCTYPE html>
<html>
  <head>
    <title>RecogitoJS/Annotorious Firebase Storage Adapter</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@recogito/annotorious@2.1.6/dist/annotorious.min.css">
    <script src="https://www.gstatic.com/firebasejs/8.2.1/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/8.2.1/firebase-firestore.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@recogito/annotorious@2.1.6/dist/annotorious.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@recogito/firebase-storage@latest/dist/recogito-firebase-storage.min.js"></script>
  </head>
  <body>
    <img id="my-image" src="https://raw.githubusercontent.com/recogito/annotorious/master/public/640px-Hallstatt.jpg">
    
    <script>
      (function() {
        var image = document.getElementById('my-image');
        var anno = Annotorious.init({ image });

        // Firebase will auto-generate this config for you when you 
        // create your app. Just paste your own settings in here.
        var firebaseConfig = {
          apiKey:        "-- your firebase api key here --",
          authDomain:    "-- your authdomain here --",
          databaseURL:   "-- your database url --",
          projectId:     "-- your project id --",
          storageBucket: "-- your storage bucket --",
          messagingSenderId: "...",
          appId: "..."
        };

        var settings = {
          annotationTarget: image.src,  // mandatory
          collectionName: 'annotations' // optional (default = 'annotations')
        }

        recogito.FirebaseStorage(anno, firebaseConfig, settings);
      })();
    </script>
  </body>
</html>
```
npm package: @recogito/pdf-annotator-monorepo
Description: Recogito PDF Annotator monorepo
Author: Rainer Simon
Latest version: 1.0.0-rc.17

# pdf-annotator-js
PDF annotation in the browser, using PDF.js and the Recogito Text Annotator.

Note that the build works currently with Vite 4 __only__. As of now, there is an unresolved problem with the worker script as soon as the build is upgraded to Vite 5.