"Projector" style overlay

[adamjarling]

"Projector" style overlay

[CourtneyMcClellan]

Hi Adam, Yes, this is close to what I am thinking. I think the overlay is in use at all times (the intention here is to suggest to viewers that they are not altering the item itself). I will work to update that image right now. Thanks, Courtney

…

On Mon, Mar 1, 2021 at 8:24 AM Adam J. Arling ***@***.***> wrote: @CourtneyMcClellan <https://github.com/CourtneyMcClellan> I'm working on figuring out this issue, and how to pin the tape overly images so they zoom in/out. Does something like this look on track? [image: image] <https://user-images.githubusercontent.com/3020266/109502839-210e5000-7a5f-11eb-9038-8edf3470030a.png> — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#20 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ASOHXDCIWVNGML76Q4GVXWTTBOIRNANCNFSM4WCWPVTA> .

[jessvu]

Here's a mockup of what I had in mind for the overlay. It's similar to Jaime's with the tint overlay. I am imagining that the feature can function like layers do in the Adobe programs and other similar drawing applications. Users can turn off and on each layer with the User's layer being editable and the Curator's a static image. This functionality would allow the users to have both layers turned on at the same time or one at a time.

[CourtneyMcClellan]

Yes, I will make a little sketch and post soon

[adamjarling]

Thinking through this as a developer, here's how the Application layers are currently set up...this will help us figure out how to achieve this feature.

Application layers

Bottom layer

OpenSeadragon canvas which contains the source image

Middle layer

Fabric JS canvas which holds all user annotations

Top layer

User created objects on the Fabric JS canvas

---

If we want to pin the overlay to the source image, then we'll need to either add it to the OSD layer, or to the Fabric layer as a non-editable Fabric object, sent to the very bottom of the Fabric object stack.

I'll have to think about how we could toggle these layers on/off. Where in the UI would this Layers selection control live, and what would it look like?

[jaimemears]

Yes, I was imagining this would be on the Fabric JS layer. The design elements of this overlay would be consistent for the “My annotation“ experience regardless of image. For layer selection - When toggling to the “Curator Annotation” view in the UI, some of these design elements would be different, if possible, such as the color of the border, or perhaps a permanent graphic akin to the masking tape, in order to signal to the user that you were in the “Curator Annotation” space. Do you need pngs of the tape illustration to prototype this? From: Adam J. Arling <[email protected]> Sent: Wednesday, February 17, 2021 8:58 AM To: adamjarling/loc-speculative-annotations <[email protected]> Cc: Mears, Jaime <[email protected]>; Author <[email protected]> Subject: Re: [adamjarling/loc-speculative-annotations] "Projector" style overlay (#20) Thinking through this as a developer, here's how the Application layers are currently set up...this will help us figure out how to achieve this feature. Application layers Bottom layer OpenSeadragon canvas which contains the source image Middle layer Fabric JS canvas which holds all user annotations Top layer User created objects on the Fabric JS canvas If we want to pin the overlay to the source image, then we'll need to either add it to the OSD layer, or to the Fabric layer as a non-editable Fabric object, sent to the very bottom of the Fabric object stack. I'll have to think about how we could toggle these layers on/off. Where in the UI would this Layers selection control live, and what would it look like? — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub<#20 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AFOVVKBZVOBOUK2XSIKEKELS7PDNRANCNFSM4WCWPVTA>.

[CourtneyMcClellan]

https://slack-files.com/T01FY6ZS1MM-F01JXBMDCAF-1e5e8b5aab

Link to tape design

[adamjarling]

@CourtneyMcClellan I'm working on figuring out this issue, and how to pin the tape overly images so they zoom in/out. Does something like this look on track?

[adamjarling]

Note this is without a tint effect, just the tape images. But thinking about the tint effect, and then the overall UX, I'm wondering how this displays?

• Is the overlay graphics/effect present at all times?
• Can it be shown/hidden via user control?

[CourtneyMcClellan]

[adamjarling]

Here's a first pass at applying this to the updated smaller viewport window. If someone has a better tape image or suggestions, feel free to pass my way.

[adamjarling]

Comments from @CourtneyMcClellan

Added notes: no tape in corners, this design work to remind visitors they are not writing on original item is provided in many other ways.

Ok, I'll pull this feature back and close the issue.