[annotator-dev] How do I change an annotations colour?

Randall Leeds randall at bleeds.info
Mon Jun 6 18:35:55 UTC 2016


No, but maybe I am. I thought you wanted a place to invoke the
annotationsLoaded hook.

On Mon, Jun 6, 2016, 11:35 Walker, Bernard <Bernard.Walker at lsec.dnd.ca>
wrote:

> If I bind to “start” in my module, it executes before the annotations have
> been loaded and drawn.  Am I misunderstanding?
>
>
>
> *From:* Randall Leeds [mailto:randall at bleeds.info]
> *Sent:* Monday, June 06, 2016 2:33 PM
>
>
> *To:* Walker, Bernard; annotator-dev at lists.okfn.org
> *Subject:* Re: [annotator-dev] How do I change an annotations colour?
>
>
>
> There is a "start" hook you could bind to.
>
>
>
> On Mon, Jun 6, 2016, 11:30 Walker, Bernard <Bernard.Walker at lsec.dnd.ca>
> wrote:
>
> Randal, I’ll read up on what you linked me.  I’m an application developer
> normally, not a web developer, so my knowledge is lacking.  However, if I
> can contribute, I most certainly will.
>
>
>
> I’ve continued to look into my issue, and I’m currently working on a
> better solution.  Instead of the hack I did earlier, I’ve created a module,
> and have attached to the hook * annotationCreated*.
>
>
>
> Now, as I encountered earlier, the highlight has not been drawn at this
> stage in the annotation creation.  I can get around this by calling the
> *annotationsLoaded* hook manually (*app.runHook('annotationsLoaded')*),
> and attaching  a “*.then*” to the returned promise (*app.runHook('annotationsLoaded').then(my
> highlighting function)*).  Since the “*.then”* will execute after the
> highlights have been drawn, I can easily attach a style without needing to
> modify the annotator source code.  Success J
>
>
>
> I’ve run into another issue – I have no idea when annotator has completed
> loading.  Attaching to the annoationsLoaded hook in my module doesn’t
> help.  Since the hook hasn’t completed drawing at this stage, it can’t see
> any of the highlights on the page when annotator initially loads.  I need
> to fire something after the annotationsLoaded completes initially (so that
> the highlights have been drawn), but I have no idea how to do that.
>
>
>
> Can anyone lend a suggestion?
>
>
>
> *From:* Randall Leeds [mailto:randall at bleeds.info]
> *Sent:* Friday, June 03, 2016 2:53 PM
>
>
> *To:* Walker, Bernard; annotator-dev at lists.okfn.org
> *Subject:* Re: [annotator-dev] How do I change an annotations colour?
>
>
>
> That looks fine, Bernard.
>
> If you'd like to help improve Annotator so that you don't have to maintain
> a modified version, I'm sure other people could benefit from your
> contributions. We don't have to commit to a property like "color" and agree
> on it to do this. There are solid, common foundational needs that have come
> up before and would enable what you want.
>
> Here are issues worth looking at. Even just your comments would be helpful.
>
> Highlighter hooks: https://github.com/openannotation/annotator/issues/590
>
> Better isolation of the highlighter:
> https://github.com/openannotation/annotator/issues/607
>
> Exposing "marks" (more ambitious):
> https://github.com/openannotation/annotator/issues/585
>
>
>
>
>
> On Fri, Jun 3, 2016 at 11:41 AM Walker, Bernard <
> Bernard.Walker at lsec.dnd.ca> wrote:
>
> If anyone is curious / looking for a way to do this, my solution to this
> was to modify the highlighter.js file; specifically the method
> highlightRange.  I added the following code:
>
>
>
> if(annotation.hasOwnProperty('color')){
>
>                 hl.style.background = annotation.color;
>
> }
>
>
>
> Additionally, I included this function when loading annotator:
>
>
>
> function() {
>
>                 return {
>
>                                 beforeAnnotationCreated: function
> (annotation) {
>
>                                                 annotation.color =
> currentlySelectedColour;
>
>                                 }
>
>                 };
>
> }
>
>
>
> I rebuilt annotator and used this new build.  If there is a better way,
> I’d like to hear suggestions, but this works fine for my purposes.
>
>
>
> *From:* annotator-dev [mailto:annotator-dev-bounces at lists.okfn.org] *On
> Behalf Of *Walker, Bernard
> *Sent:* Friday, June 03, 2016 8:04 AM
> *To:* 'Randall Leeds'; annotator-dev at lists.okfn.org
>
>
> *Subject:* Re: [annotator-dev] How do I change an annotations colour?
>
>
>
> Modifying/overriding the “.annotator-hl” stylesheet isn’t what I’m looking
> to do.  I was hoping to give individual annotations specific colours.
>
>
>
> For example, annotations by Bob could appear in blue, whereas annotations
> by Milton could be red.  Another possible usage scenario would be to give
> priorities to annotations via their colour.  Red being the most important
> annotations on the page and so on.
>
>
>
> I have determined that I can get all the currently existing annotation
> elements on a page document.getElementsByClassName(.annotator-hl).  I can
> iterate through this list and assign the colour based upon the
> data-annotation-id for that annotation element.
>
>
>
> The above approach works, but I do not know when to do it.  The
> annotationCreated event fires after my annotation has been sent to the
> storage, but before it is drawn on the page – I cannot apply the colour to
> the annotation as it is not a page element yet, and thus cannot be found.
> The annotationsLoaded event fires after I have fetches the annotations from
> storage, but before they are elements on the page.
>
>
>
> Is there some way to get a list of all the annotations from storage?  I
> could possibly use a ‘then’ to apply the colour to the annotation elements
> after the app.annotations.load() promise completes?
>
>
>
> Suggestions are welcome.
>
>
>
> *From:* Randall Leeds [mailto:randall at bleeds.info <randall at bleeds.info>]
> *Sent:* Friday, June 03, 2016 12:19 AM
> *To:* Walker, Bernard; annotator-dev at lists.okfn.org
> *Subject:* Re: [annotator-dev] How do I change an annotations colour?
>
>
>
> Trivial or not depends on your goals.
>
> Presently, there is not a way to specify an inline style, though it could
> be added.
>
> Annotator uses its own, external stylesheet.
>
> Whether the stylesheet or an inline style is appropriate depends on the
> environment.
>
> Being able to set a custom class on a particular highlight span would also
> be an acceptable enhancement to enable more granular styling.
>
> If your need is simply to change the color of all highlights, you can
> modify the CSS to change the ".annotator-hl" class styles, or leverage the
> manner in which stylesheets augment and override to provide different
> styles for that class in your own, external or embedded stylesheet.
>
>
>
> On Thu, Jun 2, 2016, 07:30 Walker, Bernard <Bernard.Walker at lsec.dnd.ca>
> wrote:
>
> I am currently using Annotator 2.x, and I’m trying to change the colour of
> an annotation.  The only listing of the annotation format I can find is for
> the 1.2 version (
> http://docs.annotatorjs.org/en/v1.2.x/annotation-format.html).  Nowhere
> in that format do I see a way to specify the colour.  Annotorious has a
> style field; does the 2.X version of Annotator have something similar?
>
>
>
> One would assume this would be trivial?
>
>
>
> Bernard Walker, MSc.
>
> Land Software Engineering Centre (LSEC)
>
> Senior System Software Analyst - ICE
>
> Phone 613-995-5627
>
>
>
> Cha toir a’bhòidhchead goil air a’ phoit.
>
>
>
> _______________________________________________
> annotator-dev mailing list
> annotator-dev at lists.okfn.org
> https://lists.okfn.org/mailman/listinfo/annotator-dev
> Unsubscribe: https://lists.okfn.org/mailman/options/annotator-dev
>
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.okfn.org/pipermail/annotator-dev/attachments/20160606/ab69a35d/attachment-0004.html>


More information about the annotator-dev mailing list