Giter Site home page Giter Site logo

adamjarling / loc-speculative-annotations Goto Github PK

View Code? Open in Web Editor NEW
14.0 3.0 0.0 142.53 MB

Library of Congress Labs, Artist in Residency program project. Speculative Annotation.

Home Page: https://nervous-gates-006218.netlify.app/

JavaScript 99.37% CSS 0.02% HTML 0.61%
fabricjs openseadragon iiif react canvas

loc-speculative-annotations's Issues

Convert metadata panel source info file to IIIF 3.0 manifest

Description

With an eye towards possibly saving out annotations, we could store metadata surrounding source images in IIIF 3.0 compliant manifest files. Then parse this info (via manifesto.js maybe if not too heavy?) for rendering into the application.

Text tool UX cleanup

Experiment with either adding text directly to the canvas via click (which I ran into issues with before), or drag and drop sample text onto the Fabric canvas. In both cases, we'll need an edit toolbar to appear allowing user to customize:

  • font size
  • background color
  • font face
  • more?

image

Done looks like

image

image

image

  • User should be able to see a preview of what their text will look like by typing in the text box.
  • The text style will automatically apply and update live.
  • User could then select desired text style click anywhere on the canvas to place their text and begin typing.
  • The toolbar on the left (screen shot below) is the main toolbar, and the adjustment toolbar that appears when clicking on the elements on the canvas is dynamic and catered to the type of element the user selects such as a shape or a text

Change out Images

I want to change out the images we are using. I have attached 5 that I would like to add. @jaimemears will supply metadata.

Yellowstone
Whitman 1
Whitman 2
Costume 1
Hurston 1

Ice Cream

Pull in new stamp graphics

Description

@CourtneyMcClellan has supplied some new Stamp artwork. We should incorporate this into the app.

image

Done looks like

  • Stamps live in the new Options panel
  • User can filter stamps based on text input
  • Add button moves stamp to page

Thumbnail gallery

  • 2 levels just like mirador
  • gallery view of all possible items and at the item level
  • available for viewing thumbnails of a multi-page document as well as curator overlays.

Product example

Mirador

Reference links

https://youtu.be/9KCn-179Dac

Customize Fabric selection handles

Could you also make the anchor points for dragging/adjusting the size of the elements more prominent?

A high-contrast blue outline with white fill on the anchor points seems to be common in similar tools:

Screen Shot 2021-03-02 at 7 39 41 AM

Screen Shot 2021-03-02 at 7 38 47 AM

Delete All

Im wondering what the use case is for this. Do the annotations all get cleared anyway when I leave the website or are they stored on my browser so that when i return they are still there?

Is it more likely that I would want to delete select annotation versions then delete all?

Done looks like

  • Validate we need "Delete All"
  • User can delete a selected canvas object

Metadata panel

Side panel thats collapsible that shows:

  • metadata about the item and
  • a link to get to the original

Product example

Mirador

Reference links

https://youtu.be/9KCn-179Dac

Notes

How can we augment what's available in the api - provenance notes, materials its made from, etc.

Save

Save annotations locally. The proof of concept for this will be to use FabricJS's toObject() method on the canvas, which should return a serialized object of the FabricJS canvas (which lies on top of the source image).

Done looks like

  • Save current FabricJS objects to a localStorage on the user's browser.
  • Present a list of saved FabricJS canvases, which can be re-applied to the viewer.

API references

http://fabricjs.com/fabric-intro-part-3#serialization

Use local images with OpenSeadragon viewer

Description

Some of the LOC works used in this app might not be hosted and/or published yet. Test to see how feeding a local image to OpenSeadragon will work within the current app.

Stamps Display

Hi Adam, I noticed that when I open the Stamps tool panel it opens up underneath the tools at the bottom of the app. In the screenshot that you took it doesn't seem to be an issue so this could be a Mac thing. For desktop, would it be possible to display it so that the user is shown 20 stamps at a time (2 columns of 10) and allow users to scroll through the stamps? The display may need to change to fit mobile screens, but we can decide that at another time.
image

item level hashtags

Create unique hashtags for each item. these should appear in the sharing menu.

Save current work as a JPG

Figure out how to save the combination of the source image and all user annotations as a JPG which can be downloaded directly in the browser.

Implement new Draw tool size icons

Implement new icons for the Draw tool size selector sent over by @jessvu. Icons are located in the project directory /images/pen-weight-icons/...

Icon colors

  • green
  • pastelBlue
  • pastelGreen
  • pastelPurple
  • pink
  • teal
  • yellow

Updated size options

  • Sm
  • Md
  • Lg

image

Curator Annotation

When this is toggled to within an item, a jpg file of the item with curator annotations is displayed. Tool functionality is available to add additional annotations to the image, same as “My Annotation” mode. Overlay design must visually signal that this is the “curator” view.

Overlay Views

@adamjarling If you are able to make this update quickly, could you add the 'Change Display' label and icon before the display options and make the default set to view 'Your Annotations'? However, since this feature isn't functional yet, could you disable the whole component so that the user doesn't try to check and uncheck anything?

If this isn't a quick change/you would rather spend your time focusing on other features, could you hide the component all together? Thanks Adam!

image

White margins

Ample white space around image that can also be annotated

Handle annotating multiple, independent works

Description

Thus far, the prototypes have been working on a single source image. Now's a good time to shift and start thinking about how a user will select a different work, and add unique annotations.

Done looks like

  • A user can select between works, and the new work appears as the current source image.
  • Each work is uniquely identified in the URL somehow (for sharing and saving)
  • Create a mapping object (maybe IIIF manifest) to document all available works to the application. This will also drive the UI for "select a new work" component.
  • "Save canvas" saves user annotations specific to a work
  • "Share" uses a URL which uniquely identifies a LOC source image on which to re-create user annotations

"Projector" style overlay

Design and perhaps functionality to visually communicate that there's a transparent overlay over the LC item. Courtney recommended two pieces of tape at the corners of the image, Jaime suggested a slight "tint" to the image to communicate an overlay. Courtney, could you attach some drawings?

Static Canvas

image

https://docs.google.com/presentation/d/1GPby059FlA5RSSo-xBiE1HTkOOstBC17VkPuwfrTWzA/edit#slide=id.gb5e38bc965_0_9

I'm wondering if on OSD you could zoom the image out a little bit so that there's padding above and below the image and make the entire canvas area (including the image) static for the LOC staff user testing. I'm imagining this to be the default view of the canvas at the most zoomed out state upon entry of the application.

I would still like for the zooming in/out functionality to work, but when the canvas is zoomed out all the way and the whole image can be seen, if we could disable the ability to move it, I think it would solve for the concerns we have about jumpiness. I understand if this is another limitation of OSD, just wanted to share my idea in case it's doable task.

Prototype - Speech bubble

Description

Prototype of a speech bubble, placed anywhere on the image.

Done looks like

  • User can select a speech bubble control
  • User can click and/or drag speech bubble onto the image canvas
  • User can add text to the bubble.

Punctuation

Description

Place a punctuation mark anywhere on image from a defined set of common punctuation marks (!,?()*)

Agreement pop up when using SA

Sets a tone and could signify desired behaviors. Need language. Refer to annotations book example.

"More specifically, we welcome annotation that is:

Civil. We can disagree. And when we do so, let’s also respect one another.

Constructive. Share what you know. And build upon ideas that are relevant and informative.

Curious. Ask honest questions and listen openly to responses.

Creative. Model generative dialogue. Have fun. Contribute to and learn from the process.

As such, we do not welcome annotation that is:

Hurtful, that personally attacks a participant, or is read as harassment.

Explicit in nature or illegal in content.

Spam and an intentional distraction from the scholarly goals of peer review."

Update saving and displaying a user's annotations based on UX Feedback

Based on UX feedback, update how saving and selecting saved annotations are being handled.

‘Annotate’ is a drop-down menu that holds the option to create a new annotation and view saved annotations. If a user does not have any saved annotations a modal will still appear and show an empty state.

image

image

About Page- gallery for viewing LOC Annotation examples

On the About Page, Jaime and I have discussed having a gallery of items from the collection that include annotations. Sorry for the confusing, this comment has been edited a couple of time. We landed on a gallery like the one below, so as not to confuse it with the thumbnails which can be annotated.

image

Let me know if there are additional questions. If you want me to create a separate issue for this, I am happy to do so.

Highlighter tool

drawing tool added to toolbar with some percentage of transparency

@CourtneyMcClellan could you describe the colors you would like for selection? Is there an icon from the list Adam sent that would be appropriate for this in the tool bar?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.