Add support for image annotation

[MImranAsghar]

Hi, I am currently looking into updating mirador to allow for image annotations. This is what i have been working on and believe would be needed for allowing image annotations.

1). Updated mirador-annotations plugin to add insert image dialog: This image insert/edit input dialog is needed to extend the annotation support to adding image annotation.

• These image annotation insert/edit changes attempt to implement image insert/edit workflow similar to Mirador 2 for the image annotation. For example, once a url is entered then clicking away from the url field will update the width and height inputs with the image width and height that the url corresponds to.

Made a pull request for this in mirador-annotations repo: https://github.com/ProjectMirador/mirador-annotations/pull/50

2). Update mirador to add image annotation viewing on a card when the annotation is hovered. This part of image annotations is the image annotation card (list of image annotations displayed on a card on hovered annotations) which I have yet to make a pull request for that can be added to mirador 3.

• On the canvas both text and image annotations will be shown on the card for all the annotations that are hovered.
• User can scroll horizontally and vertically on the card to figure see the entire image.
• If the user hovers over the "annotation" item on the side bar menu, then the card will be shown on the canvas over that specific annotation in the center of the drawn annotation.

Would like to double check that i am on the right path. Thanks.

Edit: Annotatoin img display (initial version) pull request: https://github.com/ProjectMirador/mirador/pull/3435

Here is how the input dialog looks (see pull request https://github.com/ProjectMirador/mirador-annotations/pull/50):

Here is how the card looks:

Manifest URLs: Using this sample manifest for testing => https://iiif.harvardartmuseums.org/manifests/object/299843

[ggeisler]

@MImranAsghar Thanks for making the updates to the modal window; it looks great now. One thought: I wonder if the title of the modal should be "Add image" rather than "Insert image"? The word "insert" feels a little too specific or technical, and the action the user is doing, I think, is simply adding the image as an annotation.

Also thanks for checking in on your plans for the viewing the annotation. As for the displaying the annotation on the card above the canvas, I'm not sure. I understand that that was the annotation display behavior in Mirador 2, but in conducting user research when planning for Mirador 3, we heard from users that they did not like the fact that the card overlaying the canvas could obscure the annotation target. (This is not an obvious problem in your screenshot above, because the annotation target is large and there aren't many other targets in the same area. It is more of an obvious problem when targets are smaller and/or overlapping or in close proximity.) The card overlay could be very frustrating to users when the canvas was crowded with annotation targets. This is why we used the window sidebar to display the annotation content: so the user could always read the annotation content without obscuring the associated annotation target area.

So, to follow that model, I believe rather than displaying the card as an overlay, the image annotation should be added to the appropriate spot in the sidebar. Ideally it would be resized to fit the width of the sidebar (unless that requires it to be upscaled, in which case it show remain its natural size).

The user might want to see the image larger than it is in the sidebar, however, so we'd probably need a way to see the image larger/full-size outside of the sidebar. Perhaps when the user selects the image in the sidebar, then a card/modal similar to your screenshot (but without the text annotation) would appear on the canvas and show the larger version of the image. (If this explanation isn't clear, let me know and I can create a mockup.)

I know this is quite a bit different than your current approach, and I don't want to be the sole voice advocating for this approach, but I do want to make sure everyone interested in this feature understands why we didn't use the card overlay for displaying annotations in Mirador 3. We knew we'd have to figure out how to deal with image annotations at some point, but you have gotten there before we had an opportunity to spend more time thinking about the other annotation features.

So thoughts from you @MImranAsghar, or others interested in how we extend the annotation functionality, would be great.

[MImranAsghar]

Hi @ggeisler Thanks for the feedback. I agree with your point about the annotation card overlay being somewhat distracting when hovering over the annotations. In that case, I will continue with keeping the goal in mind to display annotation content on sidebar with each annotation item. I agree it would be better that the card should only show when the user selects sidebar image/wants to view full size of image and would disappear by unselecting (Maybe I can add a close button on card too to unselect). So I will continue by making these changes and keep you up to date on how it goes 👍

[MImranAsghar]

Hi! so I made the changes to Mirador here. Displaying dialog to show full image instead of card https://github.com/ProjectMirador/mirador/pull/3435