help with adding annotations (button is empty and failing)

[abubelinha]

Sorry if I am missing something already documented but I am having troubles for setting up basic annotation system.

I load mootools-core-1.6.0.js, mootools-more-1.6.0.js, iipmooviewer-2.0.js, iiif.js, blending.js, navigation.js, scale.js, touch.js, annotations.js, annotations-edit.js, help.en.js in that order, before my own script (which is basically the same described in #81 plus latest @ruven's corrections).
I added a single annotation array to the IIPMooViewer object, and it works properly (I can double click the current annotation, edit / move / delete it):

var annotations = { 1:{...} } 
...
new IIPMooViewer( "viewer", {
	...
	annotations: annotations,
	navigation: {
		draggable: true,
		buttons: ['reset','zoomIn','zoomOut', 'rotateLeft', 'rotateRight', 'addAnnotation']
	}
});

But that's all I could do.

These are my troubles for adding annotations:

• I see a new 'addAnnotation' button but it has no icon inside. I think its file is missing in this repository, isn't it?
  That's fine if we are supposed to add custom icons for non default buttons, but I suggest this to be documented.
• When I click that empty button, nothing happens (and no javascript error is fired). Should I do anything else in my code? (I don't think this is related to the missing icon, because when I delete files for the other icons in the bar, their buttons are empty too but they keep working).
• I couldn't find an official iipmooviewer 2.0 working example with enabled addAnnotation functionality, in order to compare my code. Is there any?
• In tiny bugfix #56 I found a link to this @jcupitt demo http://jcupitt.github.io/iipmooviewer/ (thanks!).
  It works but it doesn't seem to use the same approach documented in current iipmooviewer's version (it's 9 years old).
  It initializes var annotations = [ {} ] instead of var annotations = {1: {}}.
  I tried to do that too but no way ... I don't understand why its addAnnotation button works and mine doesn't.
  Looking to the comments, it seems @jcupitt added the missing icon and @ruven merged those changes, but for some reason they are gone again.

Thanks in advance for any help you can provide!
@abubelinha

[ruven]

In fact there's no default button for adding annotations, as the idea was that most developers would want to embed the viewer into their own system. To do this there is a javascript function newAnnotation(), which you can be called to create a new empty annotation if you include the file src/annotations-edit.js. Double-clicking existing annotations allows you to edit also.

In the example you found, the source code has been modified to add this new button, which is why it doesn't work for you.

Maybe it would in fact be good to include such a button, as it's the only button you really need to be separate (edit and delete are attached to each annotation). If you have any suggestions for a nice icon for this, let me know!

[abubelinha]

there is a javascript function newAnnotation(), which you can be called to create a new empty annotation if you include the file src/annotations-edit.js

Thanks @ruven, I read all documentation and was aware of that.
But I expected that function to be already called when I click the button (once I already added it to the navigation toolbar).
Why is it more complicated than when adding other optional buttons?
i.e. rotation buttons -once included in navigation bar- already call their corresponding functions when they are clicked.

Sorry by my javascript ignorance but how can I make that button click - function launch happen?
Looking to @jcupitt demo I see a difference in iipmooviewer-2.0.js: should I do the same?

I would prefer a way to activate addAnotation functionality without touching the main iipmooviewer-2.0.js file (i.e. adding some javascript code directly in my .html file script). So I don't need to rewrite code when you update the script.

If you have any suggestions for a nice icon for this, let me know!

Sure. Either these pencil or edit incons ... but I'd prefer the capital "A" like in @jcupitt example, as he had already done the icon work: addAnnotation.png / addAnnotation.svg

BTW. Using @jcupitt demo above I realized I cannot add annotations when using mobile phone.
When I touch inside the annotation text boxes, nothing happens (I would expect the mobile keyboard to be displayed so I can edit title, category and text). Is this expected behaviour?

[ruven]

OK, I've just made a commit that adds this button and activates the functionality: 424f077

You need to add "newAnnotation" to the list of buttons, not "addAnnotation". I ended up using this icon: https://iconduck.com/icons/85125/annotation, but maybe your choices are better. Anyway, we can change this later.

Here's an example demo: https://merovingio.c2rmf.cnrs.fr/iipimage/iipmooviewer/annotations.html

Once you have your annotations working, you need to save them somewhere, so you'll need to integrate some javascript to save these on a server somewhere. This is left deliberately open as this kind of data will usually be stored in a database
away from iipmooviewer or the IIPImage server.

[abubelinha]

Thank you very much @ruven, that works !!

I have a couple of questions:

• Not important: couldn't open your annotation example with my old ipad Opera & Chrome browsers (blank screen).
  They can open other iipmooviewer-2.0 examples (i.e. St. John the Baptist or multispectral both work fine).
• Important: Have annotations been tested in mobile?
  • I couldn't finish an annotation from any mobile phone (just tried 3 different Android from my family -all Samsung- and and an old ipad Air ME898TY/A, iOS 12.4.6).
    I can draw the annotation frame and fill in the three input boxes using "next" key to navigate till the last box; but there "next" dissapears and I cannot reach the Ok/Cancel/Delete buttons (so I cannot submit the form to php server).
    When I try to press one of them with my finger, iipmooviewer behaves like if I was touching the underlying zoomable image.
  • How should I toggle annotations on/off in mobile? (can't press "A" key)

you'll need to integrate some javascript to save these on a server somewhere

Thanks. I am already working on that.
But I am basically interested in students adding annotations to our images as a class assignment.
And they will mostly use mobile phones for browsing them, so ... I am stuck on how to let them submit the form.

Edit: I am opening an specific issue and closing this one. Thanks!