-
Notifications
You must be signed in to change notification settings - Fork 0
Home
Welcome to the mirador-annotation-editor (MAE) wiki!
You can customize Mirador theme by passing an object 'theme' into ./demo/src/index.js in const config = {}
themes: {
light: {
palette : {
type: 'light',
primary:{
main:'#506257'
}
},
spacing:[0,4,8,12,16,20],
}
}
}
in this example I override only 'light' theme and change main primary color and spacing.
The MAE plugin produces annotation items that targets the canvas currently opened in Mirador.
When adding an annotation, several annotation templates are presented to the user.
A test manifest gathering all annotation templates is available here: https://files.tetras-libre.fr/dev/Clock/manifestWithAnnotationTemplates_MAE.json
The text template allows for complex targets using FragmentSelector and SvgSelector.
Note : the SvgSelector is not working in the following
{
"body":{"type":"TextualBody","value":"<b>Text</b> with SvgSelector target"},
"id":"textWithSvgSelectorUUID",
"motivation":"commenting",
"target":{
"source":"https://preview.iiif.io/cookbook/master/recipe/0003-mvm-video/canvas",
"selector":[
{"type":"FragmentSelector","value":"xywh=0,0,300,300&t=10,50"},
{"type":"SvgSelector","value":"<svg xmlns='http://www.w3.org/2000/svg'><path xmlns='http://www.w3.org/2000/svg' d='M1120.17532,721.79236c0,-148.97083 131.38754,-269.73555 293.46229,-269.73555c162.07475,0 293.46229,120.76472 293.46229,269.73555c0,148.97083 -131.38754,269.73555 -293.46229,269.73555c-162.07475,0 -293.46229,-120.76472 -293.46229,-269.73555z' data-paper-data='{"state":null}' fill='none' fill-rule='nonzero' stroke='#00bfff' stroke-width='3' stroke-linecap='butt' stroke-linejoin='miter' stroke-miterlimit='10' stroke-dasharray='' stroke-dashoffset='0' font-family='none' font-weight='none' font-size='none' text-anchor='none' style='mix-blend-mode: normal'/></svg>"}]},
"type":"Annotation"
}
@Anthony, Is the SvgSelector even supported by our Mirador for video content ?
If not we should restrict to rectangles at first with annotations of the form:
{
"body":{"type":"TextualBody","value":"<b>Text</b> with simple target</p>"},
"id":"textWithSimlpleTargetUUID",
"motivation":"commenting",
"target":"https://preview.iiif.io/cookbook/master/recipe/0003-mvm-video/canvas#xywh=0,0,300,300&t=10,50",
"type":"Annotation"
}
The tag template is the same as the text template but with motivation:tagging. It should allow for complex targets using FragmentSelector and SvgSelector.
Note : the SvgSelector is not working in the following
{
"body":{"type":"TextualBody","value":"<b>Tag</b> with SvgSelector target"},
"id":"tagWithSvgSelectorUUID",
"motivation":"tagging",
"target":{
"source":"https://preview.iiif.io/cookbook/master/recipe/0003-mvm-video/canvas",
"selector":[
{"type":"FragmentSelector","value":"xywh=0,0,300,300&t=10,50"},
{"type":"SvgSelector","value":"<svg xmlns='http://www.w3.org/2000/svg'><path xmlns='http://www.w3.org/2000/svg' d='M1120.17532,721.79236c0,-148.97083 131.38754,-269.73555 293.46229,-269.73555c162.07475,0 293.46229,120.76472 293.46229,269.73555c0,148.97083 -131.38754,269.73555 -293.46229,269.73555c-162.07475,0 -293.46229,-120.76472 -293.46229,-269.73555z' data-paper-data='{"state":null}' fill='none' fill-rule='nonzero' stroke='#00bfff' stroke-width='3' stroke-linecap='butt' stroke-linejoin='miter' stroke-miterlimit='10' stroke-dasharray='' stroke-dashoffset='0' font-family='none' font-weight='none' font-size='none' text-anchor='none' style='mix-blend-mode: normal'/></svg>"}]},
"type":"Annotation"
}
@Anthony, Is the SvgSelector even supported by our Mirador for video content ?
If not we should restrict to rectangles at first with annotations of the form:
{
"body":{"type":"TextualBody","value":"<b>Tag</b> with simple target"},
"id":"tagWithSimpleTargetUUID",
"motivation":"tagging",
"target":"https://preview.iiif.io/cookbook/master/recipe/0003-mvm-video/canvas#xywh=0,0,300,300&t=10,50",
"type":"Annotation"
}
The target is a simple rectangle. Mirador displays the image fitting the target.
{
"body":{"id":"https://files.tetras-libre.fr/dev/media/random-III-dev.png","type":"Image","value":"<b>Image</b> with simple target"},
"id":"imageWithSimpleTargetUUID",
"motivation":"commenting",
"target":"https://preview.iiif.io/cookbook/master/recipe/0003-mvm-video/canvas#xywh=0,0,300,300&t=10,50",
"type":"Annotation"
}
Same as the Image template but the image is generated using the Konva drawing library. Also, the target must fit the all canvas. The body id shall be a data URL but the following example is not so it is more readable.
{
"body":{"id":"https://files.tetras-libre.fr/dev/media/2rectangle.svg","type":"Image","value":"<b>Drawing</b> with simple target filling the canvas"},
"id":"drawingUUID",
"motivation":"commenting",
"target":"https://preview.iiif.io/cookbook/master/recipe/0003-mvm-video/canvas#xywh=0,0,640,360&t=10,50",
"type":"Annotation"
}
The new way:
{
"body":{"id":"https://iiif.harvardartmuseums.org/manifests/object/299843","type":"Manifest","value":"<b>Manifest</b> with the new Manifest type"},
"id":"manifestNewWayUUID",
"motivation":"commenting",
"target":"https://preview.iiif.io/cookbook/master/recipe/0003-mvm-video/canvas#xywh=0,0,300,300&t=10,50",
"type":"Annotation"
}
The old way:
{
"body":{"type":"Manifest","value":"<b>Manifest</b> with the old method"},
"id":"manifestOldWayUUID#https://iiif.harvardartmuseums.org/manifests/object/299843",
"motivation":"commenting",
"target":"https://preview.iiif.io/cookbook/master/recipe/0003-mvm-video/canvas#xywh=0,0,300,300&t=10,50",
"type":"Annotation"
}
TODO