buttons on top at widget

[jwijffels]

Hello @rsimon

I've been developing this R wrapper around annotorious, annotorious-openseadragon (and recogito) https://github.com/DIGI-VUB/recogito
And used that R package to make a shiny web application which I need for a project where I have images of the 18th/19th century containing questions asked by the police to arrested persons. These images are transcribed. Unfortunately I don't know which part of the text transcription corresponds to which part of the image. So I need to align them in order to create training data for building a handwritten text recognition model.

For this I've set up a shiny app using https://github.com/DIGI-VUB/recogito which allows to select an area of the image using annotorious-openseadragon (screenshot below) and assign it to the corresponding text chunk.

During the process, I have to label the image area with labels POLICE QUESTION / ARRESTED ANSWER. Currently I pass on the labels here https://github.com/DIGI-VUB/recogito/blob/master/inst/htmlwidgets/annotoriousopenseadragon.js#L42 which will be ['QUESTION', 'ANSWER'].
What I would like to have to speed this up is the possibility like you have in recogito that labels are on top so that I can just click them. Like shown below. Is there code online where I can find what is implemented below. I saw this: https://recogito.github.io/guides/editor-widgets/ but maybe that code where you have these place/person/event buttons on top which can be added to the widget init at setup are available online somewhere

Many thanks for the help and for developing annotorious

[rsimon]

Hi,

Yes, exactly. You'd need an editor widget plugin for this. Unfortunately, the plugin API is frankly quite clunky. Things are still fairly easy as long as you are inside a React project. But I assume you'd need a plain JS solution?

Anyways, I have some React code for a similar widget here:
https://github.com/machines-reading-maps/mrm-recogito-ui/blob/main/src/widgets/ClassifyWidget.jsx

(It's not exactly the same as the screenshot from Recogito. But does something similar: three buttons that act as a multiple-choice selection; using classifying as Web Annotation purpose.)

There's also matchin Formatter function which colors annotation accordingly, and a CSS stylesheet for the buttons.

All of this should be fairly easy to translate into a plain JS widget, if needed. I'm happy to guide & help out with it!

[jwijffels]

Ok, that's a start, I indeed need plain JS, but I could also use other buttons from other add-on shiny widgets packages.
Thanks for the reply and the link to the React code, I'll see if I can brew up these buttons in the widget and post here in case of questions.

[rsimon]

Let me know how it goes!

[jwijffels]

I just managed to do what seems like a good approach in my case. In my code, I add the buttons on top and let the buttons append to the tagging purpose which is below. Code which I use now is at https://github.com/DIGI-VUB/recogito/blob/master/inst/htmlwidgets/annotoriousopenseadragon.js#L28:L59

I couldn't find too much documentation on these onRemoveBody/onAppendBody/onUpdateBody and what this args element was but with some trial and error, I could get what I think is usefull. My app now looks like this, which shows the buttons and that it appends the tag when clicked.

works.mp4

Thanks again for the quick help and the links.

[rsimon]

This looks excellent! Yes, the widget API is super under-documented. I'll try to make this a priority for the next release(s).