@recogito/annotorious-toolbar
v1.2.1
Published
A simple toolbar for switching Annotorious drawing tools
Downloads
534
Readme
Annotorious Toolbar
A simple toolbar to switch between drawing tools.
Install
Include the plugin directly via the CDN:
<html>
<head>
<!-- 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>
<!-- Toolbar plugin -->
<script src="https://cdn.jsdelivr.net/npm/@recogito/annotorious-toolbar@latest/dist/annotorious-toolbar.min.js"></script>
</head>
<body>
<!-- The toolbar mounts itself into a DIV on your page -->
<div id="my-toolbar-container"></div>
<img id="my-image" src="hallstatt640px.jpg">
</body>
</html>Or if you are using npm:
$ npm install @recogito/annotorious-toolbarInstantiate Annotorious the normal way, and then register the plugin:
var anno = Annotorious.init({
image: 'my-image'
});
// Init the plugin
Annotorious.Toolbar(anno, document.getElementById('my-toolbar-container'));Optional Settings
All settings are added as a third element that are key, value pairs.
Annotorious.Toolbar(anno, document.getElementById('my-toolbar-container'), {'key': 'value', 'key2': 'value2'});withMouse: adds Mouse icon to the toolbar for dragging around the image. Also changes the toolbar settings so that an annotation creation with a shape is always enabled until switched to the mouse icon.
Annotorious.Toolbar(anno, document.getElementById('my-toolbar-container'), {'withMouse': true});drawingTools: a list of tools you want in the toolbar. The options are: [ 'annotorious-tilted-box', 'rect', 'polygon', 'circle', 'ellipse', 'freehand', 'point', 'line']. This allows you to order your toolbar in the order/items you want to show up. You have to have the specific tool installed in order for it to show up in your toolbar.
Annotorious.Toolbar(anno, document.getElementById('my-toolbar-container'), {'drawingTools': ['polygon', 'rect', 'circle']});infoElement: a HTML element where hints about the drawing tools show up. Currently the only hint is the hint on how to stop the polygon tool.
Annotorious.Toolbar(anno, document.getElementById('my-toolbar-container'), {'infoElement': document.getElementById('info-element')});withLabel: A setting that enables a text label for the drawing tool to show up next to the shape. For example, when enabled, there will the text 'Rectangle' next to the 'Rectangle' icon.
Annotorious.Toolbar(anno, document.getElementById('my-toolbar-container'), {'withLabel': true});withTooltip: A setting that enables a tooltip(hover effect) over each button specifying the name of the button.
Annotorious.Toolbar(anno, document.getElementById('my-toolbar-container'), {'withTooltip': true});Questions? Feedack? Feature requests? Join the Annotorious chat on Gitter.
License
BSD-3 Clause (= 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 :-)