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

Mon Jun 6 18:34:57 UTC 2016

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<mailto: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 ☺

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<mailto:randall at bleeds.info>]
Sent: Friday, June 03, 2016 2:53 PM

To: Walker, Bernard; annotator-dev at lists.okfn.org<mailto: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<mailto: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<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<mailto: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]
Sent: Friday, June 03, 2016 12:19 AM
To: Walker, Bernard; annotator-dev at lists.okfn.org<mailto: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<mailto: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<mailto: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/ecaefd52/attachment-0004.html>