annotator-dev mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From Sasha Goodman <em...@sashagoodman.com>
Subject Re: Just a simple example?
Date Thu, 11 May 2017 00:39:18 GMT
Hope this is the right place to bring this up, but there is a simple
example in my early stab at Selectors. Instead of modifying the document
persistently, it merely observes the document and uses the browser's native
Selection API to select or highlight the text. The code is here:
https://github.com/predict-r/annotation-model

To address the original poster's question...

* a static HTML page with some text in it and

In my github repository there is a little tests.hmtl file with some text,
but you could use anything. Cut and paste the code from annotation-model.js
into the page using the console in DevTools

* a JSON structure being created locally in that page which represents the
annotations

Select some text with your mouse and then enter:

var ab = new AnnotationBuilder().highlight(); //takes current user
selection and builds an Annotation
var json = ab.toJSON(); // exports serialized version to JSON-LD

* an invocation of annotatorjs/annotator that takes the JSON and renders it
over the text


var ab2 = new AnnotationBuilder().fromJSON(json); //revives serialized version
ab2.result.target.toSelection(); //highlights the original selection

P.S. This afternoon I streamlined the TextQuoteSelector and
TextPositionSelector to work (in principle ) consistently with Randall
Leed's implementation that used NodeIterator and textContents.



On Wed, May 10, 2017 at 11:08 AM Benjamin Young <byoung@bigbluehat.com>
wrote:

> Hey Richard,
>
>
> thanks for the quick answer. I wish I knew how to write up such a demo!
> I was hoping you could point me to an example from which I could learn ;)
>
>
> At this point it's still quite early for showing demos...but we're working
> quickly to make that happen!
>
>
> What we're focused on now is some foundational tooling for a) the whole
> project and b) the core functionality of Web Annotation Data Model <=> DOM
> "stuff" (ie. Selection API and DOM element-based highlights--built from
> <span>, <mark>, or similar).
>
>
> Are we talking about the same thing?
>
>
> More or less. :) If you mean building something similar to that *demo*,
> then yes, we're on the same page. :) However, ours will be using the Web
> Annotation Data Model [1] and as little code as we can possibly write to
> prove that the developer using the tools we are making can be used to do
> things in the DOM of a web page. For instance...
>
>
> I am not very familiar with the DOM Selection API, but I thought that
> it controls text selection, e.g. for copy-paste operations.
>
>
> We hope to have a demo specifically for a) quick, temporal highlighting
> using the DOM Selection API (no DOM-based elements and no persistence
> beyond the first selection--meaning, clicking on the page removes the
> selection).
>
>
> Later, we hope to have a copy-paste operation/thing that let's you
> copy/paste annotations between web pages. Similar to this earlier demo by
> Randall:
> http://run.plnkr.co/plunks/FJibLnSRElKG3k5s5jH9/
>
>
> Is that at all usable for rendering annotations?
>
>
> Only on the first page load. It's not meant (in this case) to be permanent.
>
>
> I mean, can you create multiple selections with different colorings and
> that
> don't go away when the user manually click-drags a new selection, e.g. to
> copy
> a piece of text?
>
>
> So. No. Not this Selection API-based stuff. However, later demos that use
> span or mark tags could certainly be used as a foundation for individually
> colored highlights.
>
>
> Also, does that actually support events such as on-mouse-over popups that
> would
> show additional information about an annotated piece of text?
>
>
> Again, no. :) It's not what the Selection API is about. Later demos with
> DOM persisted annotations, yes. :)
>
>
> I had a brief look of how annotatorjs rendered highlights, and at least
> in the version I tried, it was using span elements. Is that going to
> change now?
>
>
> Right. Annotation.js offered only DOM persisted annotations. If you wanted
> to do something more inventive (or server side!), you'd be on your own or
> have to desperately hack away at Annotator.js until you found the bits you
> needed or successfully removed the bits you didn't.
>
>
> Apache Annotator aims to build much more minimal more easily compose-able
> libraries that can be used in N number of idiosyncratic annotation tools.
>
>
> Hopefully that explains the objectives a bit better. :)
>
>
> Happy to answer other questions if you have them!
>
> Benjamin
>
>
> [1] https://www.w3.org/TR/annotation-model/
>
>
> --
>
> http://bigbluehat.com/
>
> http://linkedin.com/in/benjaminyoung
>
> ________________________________
> From: Richard Eckart de Castilho <rec@apache.org>
> Sent: Wednesday, May 10, 2017 10:03:55 AM
> To: dev@annotator.incubator.apache.org
> Subject: Re: Just a simple example?
>
> Hi Benjamin,
>
> thanks for the quick answer. I wish I knew how to write up such a demo!
> I was hoping you could point me to an example from which I could learn ;)
>
> Just to make sure again we have a similar thing in mind. I am looking
> for something similar to the brat embedding feature [1], just using
> annotatorjs instead of brat. Are we talking about the same thing?
>
> I am not very familiar with the DOM Selection API, but I thought that
> it controls text selection, e.g. for copy-paste operations. Is that
> at all usable for rendering annotations?
>
> I mean, can you create multiple selections with different colorings and
> that
> don't go away when the user manually click-drags a new selection, e.g. to
> copy
> a piece of text?
>
> Also, does that actually support events such as on-mouse-over popups that
> would
> show additional information about an annotated piece of text?
>
> I had a brief look of how annotatorjs rendered highlights, and at least
> in the version I tried, it was using span elements. Is that going to
> change now?
>
> Best,
>
> -- Richard
>
> [1] http://brat.nlplab.org/embed.html#embedding-event-example
>
> > On 10.05.2017, at 15:40, Benjamin Young <byoung@bigbluehat.com> wrote:
> >
> > Hey Richard!
> >
> > Thanks for writing. There are exactly such things in the works. I've
> seen an in-progress demo from Randall (when we were hanging out at I
> Annotate) that uses fragment selectors to highlight (via the DOM Selection
> API).
> >
> > Here's W3C Note that defines the fragment selector format:
> >
> > http://w3c.github.io/web-annotation/selector-note/#frags
> >
> > We also discussed a demo pretty similar to what you describe that has a
> Web Annotation Data Model document shown in a textarea (perhaps) that is
> also used to highlight a thing on the page.
> >
> > At any rate, these exact things are in progress. :)
> >
> > If you'd like to write-up a demo page and a Web Annotation Data Model
> annotation (or a few) that highlight some stuff, that'd be a great help to
> demo on.
> >
> > We also plan to make the fragment selector thing (at least) usable on
> the http://annotator.apache.org/ site for demoing there.
> >
> > Thanks again for writing!
> >
> > Benjamin
>
>

Mime
  • Unnamed multipart/alternative (inline, None, 0 bytes)
View raw message