benjamingeer
commented
3 years ago cc @mejackreed
Closed benjamingeer closed 3 years ago
benjamingeer
commented
3 years ago cc @mejackreed
benjamingeer
commented
3 years ago To put this another way: does Mirador just represent annotations internally as SVG? Or does it have another, simpler internal representation in JavaScript?
mejackreed
commented
3 years ago Mirador represents annotations internally as using Open Annotation or Web Annotation. There is not currently a representation that you are describing which would provide those needed attributes.
Internally in AnnotationDrawing annotations have an internal state that has some of these attributes and are paper.js objects, but we do not provide hooks for what you are asking for.
Importing annotations with svg paths: https://github.com/ProjectMirador/mirador-annotations/blob/d0c607f9c2b7786933a24da9a0303cbf6d5f5197/src/AnnotationDrawing.js#L116-L121
Exporting to an annotation: https://github.com/ProjectMirador/mirador-annotations/blob/d0c607f9c2b7786933a24da9a0303cbf6d5f5197/src/AnnotationDrawing.js#L116-L121
Are you looking to create a different editing interface or trying to store these attributes differently?
benjamingeer
commented
3 years ago We store annotation shapes in our database, and we'd like to use Mirador to edit them. Currently we store these shapes in a very simple JSON format like this:
{
"lineColor":"#ff3333",
"lineWidth":2,
"points":[
{
"x":0.24285714285714285,
"y":0.1712962962962963
},
{
"x":0.8678571428571429,
"y":0.16666666666666666
},
{
"x":0.8892857142857142,
"y":0.7222222222222222
},
{
"x":0.25,
"y":0.7361111111111112
},
{
"x":0.2392857142857143,
"y":0.16898148148148148
}
],
"type":"polygon"
}(The coordinates are expressed as fractions of image width and image height.)
We're new to Web Annotation, and we're thinking that maybe we should switch to it for storing annotation shapes. If I understand correctly, in Web Annotation, if I want a non-rectangular shape, I have to express it as SVG. That would explain why Mirador is only providing those shapes in SVG format. Is that right?
mejackreed
commented
3 years ago That would explain why Mirador is only providing those shapes in SVG format. Is that right?
Correct. Mirador relies on Web Annotation selectors SVGSelector and FragmentSelector https://www.w3.org/TR/annotation-model/#selectors
While I agree that this is a bit difficult to work with internally, we did not want to specify yet another alternative.
PaperJS has an exportJSON method, but once again this is a library specific format. We have looked into something like GeoJSON as that may offer a similar coordinate geometry and may help with better defining shapes, but then you are doing coordinate transformations.
There are a few libraries that can do SVG parsing / conversions that might help here.
benjamingeer
commented
3 years ago Thanks very much, this helps a lot. I think we're going to do the same thing as Mirador and just store the SVG, that seems like the simplest approach.
Hello, I have a follow-up question to #34. After trying the approach described there, I realised that most of the information about each annotation in
localStorageis in theSvgSelector. For example, if I draw a six-sided polygon, it looks like this:I just want to get the coordinates of the points, the line colour, and the line width. Is parsing the SVG the only way to do this? Also, to import an annotation like this back into Mirador, will I have to generate the same SVG? Or does Mirador have an API for this?