adamjarling / loc-speculative-annotations Goto Github PK
View Code? Open in Web Editor NEWLibrary of Congress Labs, Artist in Residency program project. Speculative Annotation.
Home Page: https://nervous-gates-006218.netlify.app/
Library of Congress Labs, Artist in Residency program project. Speculative Annotation.
Home Page: https://nervous-gates-006218.netlify.app/
Wire up common keyboard buttons (Delete / Enter / etc) for interacting with annotations on the canvas.
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.
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:
I want to change out the images we are using. I have attached 5 that I would like to add. @jaimemears will supply metadata.
@CourtneyMcClellan has supplied some new Stamp artwork. We should incorporate this into the app.
Could we add these two items so they are available for user testing tasks? I have provided the urls below and jpg versions.
Item 1:
https://www.loc.gov/resource/magbell.25300102/?sp=33
Item 2:
https://www.loc.gov/resource/mss18630.03706/?sp=13&r=0.375,0.426,0.944,0.375,0
Mirador
Given this latest document, apply some of the style guide colors/fonts where applicable.
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?
Side panel thats collapsible that shows:
Mirador
How can we augment what's available in the api - provenance notes, materials its made from, etc.
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).
localStorage
on the user's browser.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.
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.
Draw on the image - palette of 4 or 5 colors based on SA palette- kinds of lines include a marker, a crayon, a pencil.
Canvas Chrome App
(Beginning at 3:35) https://www.youtube.com/watch?v=kPQahvtv6Kw
Create unique hashtags for each item. these should appear in the sharing menu.
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 icons for the Draw tool size selector sent over by @jessvu. Icons are located in the project directory /images/pen-weight-icons/...
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.
@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!
Add undo/redo buttons and functionality
Ample white space around image that can also be annotated
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.
Add support for a generic "Stamp" user tool. For the prototype, can experiment with these PNG and SVG files.
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?
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.
A way to type anywhere on the image - a selection of several types of fonts
Cournty will select one from the options Adam provided.
Prototype of a speech bubble, placed anywhere on the image.
Place a punctuation mark anywhere on image from a defined set of common punctuation marks (!,?()*)
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."
Based on the new wireframes, create a structure for the main application to fit into the wireframe design.
Share a URL
Citizen DJ
“Share" feature available here https://citizen-dj.labs.loc.gov/loc-variety-stage/remix/?i=2018620418&s=130055&d=mpc&p=60fH7
Here is a working slide deck for UX feedback as the application evolves. It includes UX recommendations as well as visual examples that are all open for discussion. Let me know if you have any questions!
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.
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.
this could be providing documentation for our developers or architecting the application in a way that changing content is fairly lightweight. Important to consider for other libraries that want to use SA for themselves.
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?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.