annotorious / annotorious-v2-selector-pack Goto Github PK
View Code? Open in Web Editor NEWAdditional selection tools for Annotorious and the Annotorious OpenSeadragon plugin
License: BSD 3-Clause "New" or "Revised" License
Additional selection tools for Annotorious and the Annotorious OpenSeadragon plugin
License: BSD 3-Clause "New" or "Revised" License
I know this is in early form, but most of the functionality works for us! But there's an error on hitting OK on the note:
ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'split' of null
TypeError: Cannot read property 'split' of null
at Xu (openseadragon-annotorious.min.js:21649)
at Object.Ju [as SvgSelector] (openseadragon-annotorious.min.js:21658)
at openseadragon-annotorious.min.js:22744
at i.addAnnotation (openseadragon-annotorious.min.js:22745)
I prettified openseadragon-annatorious before getting this error, so the code that's bombing is:
Xu = function (e) {
return Ku(e)
.getAttribute("points")
.split(" ")
.map(function (e) {
return e.split(",").map(function (e) {
return parseFloat(e.trim());
});
});
},
A feature for point annotation to prepare an option to set svg element for representing the point annotation.
Seems completely broken for Annotorious standard, and partially broken in the OpenSeadragon version. In OSD it's possible to create a point. But it's not possible to move the point after creating.
I met an error Error: Cannot find module 'webpack-cli/bin/config-yargs'
while executing npm start
.
According to stackoverflow, It looks webpack version is the cause of the error.
Thus, I changed start script in package.json
from "webpack-dev-server --open --mode=development -d"
to webpack serve --open --mode=development
.
After changing script, I got another error Error: Cannot find module '@babel/core'
. I solved this error by executing command npm install --save-dev @babel/core
.
I read through the other issues, seems like this console error:
Error: <ellipse> attribute ry: Expected length, "undefined".
Ke @ index.js:43
Je @ index.js:43
e @ index.js:43
(anonymous) @ index.js:43
(anonymous) @ index.js:43
(anonymous) @ AnnotationLayer.js:161
index.js:43 Error: <ellipse> attribute ry: Expected length, "undefined".
Ke @ index.js:43
Je @ index.js:43
e @ index.js:43
(anonymous) @ index.js:43
(anonymous) @ index.js:43
Was mentioned in another issue, but not discussed. I dug deeper to see what the problem is, and found that on this line:
there are only 3 parameters passed to thedrawEllipse
method, when the method itself expects 4:
This then gets pushed into
which explodes on line 8:Not sure what the 4th expected value is supposed to be, but figured this would make it easier to debug.
Thanks for looking!
I am trying to integrate annotorius selector pack with openseadragon and below is my code.
import { Component, OnInit, ViewChild, ElementRef, HostListener } from '@angular/core';
import * as OpenSeadragon from 'openseadragon';
import * as SelectorPack from '@recogito/annotorious-selector-pack';
import * as Annotorious from '@recogito/annotorious-openseadragon';
import {ColorSelectorClassWidget} from './widgets/color-selector-class';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit{
url: any = 'https://recogito.github.io/images/640px-Hallstatt.jpg';
@ViewChild('ref') ref!: ElementRef;
viewer: any;
annotorius: any;
constructor() { }
ngOnInit(){
}
ngAfterViewInit() {
setTimeout(()=>{
this.initOpenSeadragon();
})
}
initOpenSeadragon() {
const tileSources = {
type: "image",
url: this.url
};
this.viewer = OpenSeadragon({
element: this.ref.nativeElement,
prefixUrl: "assets/openseadragon/",
panHorizontal: true,
// defaultZoomLevel: 0,
// homeFillsViewer: true,
minZoomLevel: 0,
maxZoomLevel: 10,
visibilityRatio: 0,
tileSources: tileSources,
degrees: 0,
showRotationControl: true,
});
this.viewer.addHandler('open', () => {
setTimeout(()=>{
var tiledImage = this.viewer.world.getItemAt(0);
const point = new OpenSeadragon.Point(0,0);
this.viewer.viewport.zoomTo(1.1, null, true);
})
})
this.initAnnotorius();
}
initAnnotorius() {
this.annotorius = Annotorious(this.viewer, { widgets: [
{widget: ColorSelectorClassWidget},
{ widget: 'COMMENT' },
] });
console.log(SelectorPack)
Annotorious.SelectorPack(this.annotorius);
console.log(this.annotorius.listDrawingTools());
}
}
And i am getting error
Registering the RubberBandCircleTool in the ToolsRegistry currently still happens in the main repository. This probably needs to moved to the selector pack. I'd do it myself, but I'm not sure what the preferred way is to do this.
I can't use the line tool, it exists in the src tools folder but cannot be used. It doesn't exist in the latest min.js file released. I tried to generate it from the source code typing "npm run build" command, but it did not work so I could not build it for the latest selector min.js file. What is the best practice to use the line tool without suffering?
I add the plugin of toolbar and selector pack , for the defaul selector rect and polygon they have the widget but the circle and eclipse selectors doesn't have it , how can I add it to them ?
edit : in the basic example it work good but by adding anything to the anno init , the eclipse and circle stop having widget , right now i just tried to add formatter of shape label and it didn't work , always there is error n.reduce is not a function.
here my code :
<html>
<head>
<!-- Annotorious first -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@recogito/annotorious@latest/dist/annotorious.min.css">
</head>
<body>
<div id="my-toolbar-container"></div>
<img id="hallstatt" src="640px-Hallstatt.jpg">
<script src="https://cdn.jsdelivr.net/npm/@recogito/annotorious@latest/dist/annotorious.min.js"></script>
<script src="annotorious-shape-labels.min.js"></script>
<!-- Selector Pack plugin -->
<script src="https://cdn.jsdelivr.net/npm/@recogito/annotorious-toolbar@latest/dist/annotorious-toolbar.min.js"></script>
<script src="selector.js"></script>
<script>
window.onload = function() {
// Init Annotorious
var anno = Annotorious.init({
image: 'hallstatt',
formatter: Annotorious.ShapeLabelsFormatter()
});
// Init the plugin
Annotorious.SelectorPack(anno);
Annotorious.Toolbar(anno, document.getElementById('my-toolbar-container'));
// [ 'rect', 'polygon', 'point', 'circle', 'ellipse', 'freehand' ]
console.log(anno.listDrawingTools());
}
</script>
</body>
Since this would be pretty fundamental, it's probably worth including into the core distribution. (I.e. not as an extra plugin.)
This has been brought up as a feature request multiple times. A tool for creating an annotation target consisting of multiple polygon shapes. There's nothing that prevents this in principle. Just needs thinking through the interaction design (and writing the code :-)
Probably, this is best implemented as a separate drawing tool plugin.
I'm currently working out a free drawing tool, but I'm unsure what to call it. For my current work in progress, I'll call it "freedrawing", with class names such as "EditableFreeDrawing". Please let me know if you think this should be called differently.
When clicking to move polygon point I get an error
Unhandled Promise Rejection: TypeError: null is not an object (evaluating 'args.annotation.target.selector')
Then I can not save any changes
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.