Integration with Crowdcrafting is only working for Chrome

[teleyinex]

Hi,

We've discovered that the latest version of annotorious.js only works in Chrome. In Firefox v30 (and even on Nightly) it does not render at all the box, or anything similar to that.

We're trying to debug what could be wrong, but as it's working in Chrome we don't have an idea about what could be possible failing.

Can you help us? We've a demo here: http://crowdcrafting.org/app/taggingpictures/newtask

[rsimon]

Hi,

interesting. The standard demo page at the Annotorious homepage still seems to work fine on FF. Cn you switch from http://annotorious.github.io/latest/annotorious.min.js to http://annotorious.github.io/latest/annotorious.full.js? (Never mind the net::ERR_FILE_NOT_FOUND error message - things should still work and the case should be easier to debug.)

Cheers, R

---

Von: Daniel Lombraña González [notifications@github.com] Gesendet: Montag, 23. Juni 2014 10:32 An: annotorious/annotorious Betreff: [annotorious] Integration with Crowdcrafting is only working for Chrome (#106)

Hi,

We've discovered that the latest version of annotorious.js only works in Chrome. In Firefox v30 (and even on Nightly) it does not render at all the box, or anything similar to that.

We're trying to debug what could be wrong, but as it's working in Chrome we don't have an idea about what could be possible failing.

Can you help us? We've a demo here: http://crowdcrafting.org/app/taggingpictures/newtask

— Reply to this email directly or view it on GitHubhttps://github.com/annotorious/annotorious/issues/106.

[teleyinex]

AMAZING. After loading the full.JS it works like a charm ;-) What could be the problem?

[rsimon]

Hm - that's not good. I was hoping to reproduce the error & get a better idea from the unminified code ;-)

Well, the most important difference between minified & unminified is (obviously) the renaming of variable names. What gets renamed and what doesn't is controlled - according to the habits of the Google Closure compiler - via the externs file:

https://github.com/annotorious/annotorious/blob/master/externs/api.externs.js

So it could be something there, although that shouldn't make much difference between browsers.

Can you just briefly switch back and let me know?

Cheers, R

---

Von: Daniel Lombraña González [notifications@github.com] Gesendet: Montag, 23. Juni 2014 10:45 An: annotorious/annotorious Cc: Simon Rainer Betreff: Re: [annotorious] Integration with Crowdcrafting is only working for Chrome (#106)

AMAZING. After loading the full.JS it works like a charm ;-) What could be the problem?

— Reply to this email directly or view it on GitHubhttps://github.com/annotorious/annotorious/issues/106#issuecomment-46819213.

[teleyinex]

Hi,

I've reverted it back to the minified version, again it does not work ;-)

Cheers,

Daniel

[adikeinan]

Hello there! I have the same issue in the application that I'm developing using PyBossa. The 'min' version didn't work for me even on Chrome, but the 'full' one works well on Safari, Chrome and Firefox. Will wait to see how this develops :)

[rsimon]

Did you change anything? I did not get an error message this time in the JS console like before. Also, it seems when I drag, a tiny (1x1px) rectangle is drawn in the upper left corner. So it may be a timing issue: you're loading the image & Annotorious is evaluating it's dimensions shortly before it has actually loaded. Thus, it creates an annotation Canvas of zero size - or maybe 1x1 if you have some sort of tiny placeholder image.

In that case, using the full version if Annotorious may simply have the effect that it takes longer to load - so timing problem solved (although not in a stable way...)

Cheers, Rainer

---

Von: Daniel Lombraña González [notifications@github.com] Gesendet: Montag, 23. Juni 2014 10:57 An: annotorious/annotorious Cc: Simon Rainer Betreff: Re: [annotorious] Integration with Crowdcrafting is only working for Chrome (#106)

Hi,

I've reverted it back to the minified version, again it does not work ;-)

Cheers,

Daniel

— Reply to this email directly or view it on GitHubhttps://github.com/annotorious/annotorious/issues/106#issuecomment-46820205.

[rsimon]

Interesting - could be another piece of evidence pointing to an underlying timing issue. Is the source code for the template available online somewhere? (Í.e. where it's more convenient to look at than through "right-click -> view source"?)

Cheers, R

---

Von: adikeinan [notifications@github.com] Gesendet: Montag, 23. Juni 2014 11:05 An: annotorious/annotorious Cc: Simon Rainer Betreff: Re: [annotorious] Integration with Crowdcrafting is only working for Chrome (#106)

Hello there! I have the same issue in the application that I'm developing using PyBossa. The 'min' version didn't work for me even on Chrome, but the 'full' one works well on Safari, Chrome and Firefox. Will wait to see how this develops :)

— Reply to this email directly or view it on GitHubhttps://github.com/annotorious/annotorious/issues/106#issuecomment-46820986.

[adikeinan]

I didn't make any changes, it worked before the weekend. Now reverted to 'min' again - also the Click and Drag to Annotate message isn't appearing, it looks completely disabled. You can see the code here: https://github.com/MicroPasts/MicroPasts-Horsfield/blob/master/template.html (a bit messy, still under development!)

[adikeinan]

You won't be able to see the actual page as the application is still hidden, but if you wish let me know, I'll give you temporary admin rights.

[teleyinex]

Hi,

The full code is here: https://github.com/PyBossa/app-tagging-pictures/blob/master/template.html

But I guess why with the min version it works in Chrome without problems, and not with Firefox. I mean, the timing could be a problem, which I agree, but in the template I'm firing up the anno action when the image has been downloaded.

In this line of code I make the image visible, and here I force anno to make it annotable, so it should work without problems, right?

[rsimon]

Are you sure this happened over the weekend? If so, at least, there are only four commits which could be the cause for this...

https://github.com/annotorious/annotorious/commit/e80c8e25894b1d27f3b19f4c4effd055134fe409 https://github.com/annotorious/annotorious/commit/c1ba769532ba45cd806fd824af46adaabc58b0d8 https://github.com/annotorious/annotorious/commit/d266e8f8fa5c608b5fc20bb2eac49de016a6bd5a https://github.com/annotorious/annotorious/commit/54d43be4fbf33bf1167dcf8c1f29eb696838c632

I'll need to dig deeper (which I can't do right now). In the mean time, could you revert to the 0.6.3 release (the most recent one to dowload) - this happend before the commits in question.

Cheers, Rainer

---

Von: adikeinan [notifications@github.com] Gesendet: Montag, 23. Juni 2014 11:15 An: annotorious/annotorious Cc: Simon Rainer Betreff: Re: [annotorious] Integration with Crowdcrafting is only working for Chrome (#106)

I didn't make any changes, it worked before the weekend. Now reverted to 'min' again - also the Click and Drag to Annotate message isn't appearing, it looks completely disabled. You can see the code here: https://github.com/MicroPasts/MicroPasts-Horsfield/blob/master/template.html (a bit messy, still under development!)

— Reply to this email directly or view it on GitHubhttps://github.com/annotorious/annotorious/issues/106#issuecomment-46821831.

[rsimon]

Looks ok, although it may still be that you're adding the element and the browser loads the image only after insertion in the DOM (I'm not an expert in this... but I suspect a race condition would still be possible.) Nonetheless, Adi's observation does point into a different direction anyway. So I'll try to follow up on that lead as soon as possible!

Cheers, R

---

Von: Daniel Lombraña González [notifications@github.com] Gesendet: Montag, 23. Juni 2014 11:21 An: annotorious/annotorious Cc: Simon Rainer Betreff: Re: [annotorious] Integration with Crowdcrafting is only working for Chrome (#106)

Hi,

The full code is here: https://github.com/PyBossa/app-tagging-pictures/blob/master/template.html

But I guess why with the min version it works in Chrome without problems, and not with Firefox. I mean, the timing could be a problem, which I agree, but in the template I'm firing up the anno action when the image has been downloaded.

In this line of codehttps://github.com/PyBossa/app-tagging-pictures/blob/master/template.html#L120 I make the image visible, and herehttps://github.com/PyBossa/app-tagging-pictures/blob/master/template.html#L132 I force anno to make it annotable, so it should work without problems, right?

— Reply to this email directly or view it on GitHubhttps://github.com/annotorious/annotorious/issues/106#issuecomment-46822362.

[adikeinan]

Yes, it worked on Thursday, Friday I don't know, and Saturday I don't remember if I checked it... On Thursday for sure it worked. Thanks for your help!

[rsimon]

PS: what's still weird is that the demo pages - even after a full browser cache refresh - seem to work just fine in FF. So any thoughts and hints to what makes the PyBossa template different to the demo pages would be really helpful & greatly appreciated!

Cheers, R

---

Von: Daniel Lombraña González [notifications@github.com] Gesendet: Montag, 23. Juni 2014 11:21 An: annotorious/annotorious Cc: Simon Rainer Betreff: Re: [annotorious] Integration with Crowdcrafting is only working for Chrome (#106)

Hi,

The full code is here: https://github.com/PyBossa/app-tagging-pictures/blob/master/template.html

But I guess why with the min version it works in Chrome without problems, and not with Firefox. I mean, the timing could be a problem, which I agree, but in the template I'm firing up the anno action when the image has been downloaded.

In this line of codehttps://github.com/PyBossa/app-tagging-pictures/blob/master/template.html#L120 I make the image visible, and herehttps://github.com/PyBossa/app-tagging-pictures/blob/master/template.html#L132 I force anno to make it annotable, so it should work without problems, right?

— Reply to this email directly or view it on GitHubhttps://github.com/annotorious/annotorious/issues/106#issuecomment-46822362.

[rsimon]

Ok, thanks - this is really helpful as it definitely narrows down the search to those four commits.

Cheers, R

---

Von: adikeinan [notifications@github.com] Gesendet: Montag, 23. Juni 2014 11:37 An: annotorious/annotorious Cc: Simon Rainer Betreff: Re: [annotorious] Integration with Crowdcrafting is only working for Chrome (#106)

Yes, it worked on Thursday, Friday I don't know, and Saturday I don't remember if I checked it... On Thursday for sure it worked. Thanks for your help!

— Reply to this email directly or view it on GitHubhttps://github.com/annotorious/annotorious/issues/106#issuecomment-46823724.

[rsimon]

Mostly a 'note to self' for now: the only part that

• has seen any significant change in the critical timespan
• fits the general problem
• and could possibly fit the JS exception I've seen @teleyinex' demo page before the switch from annotorious.min.js to annotorious.full.js (but not after the switch back)

is this:

https://github.com/annotorious/annotorious/blob/master/src/mediatypes/annotator.js#L53-67

[rsimon]

Hi all,

I looked into this matter now a bit more closely (by uploading a few updates to annotorious.min.js with included log statements & tracking what happens directly at your demo page @teleyinex).

But things are getting weirder rather than clearer: I'm not so sure any more this was caused by one the recent code changes: when Annotorious captures the mouse events that happen during drawing (a 'down' event to start drawing, and the 'move' events while dragging the box), it relies on the event object's 'offsetX' and 'offsetY' field to compute the box.

Now here's the mystery: in case of the crowdcrafting demo, both of these fields exist in the event object - but they are both set to 'false' in case of Firefox. (You can check this yourself in the JS console).

Interestingly, the same thing does not happen on the Annotorious demo page. There, the event is just fine, also on Firefox. (Again you can check this in the JavaScript console, now that the event logging is baked into annotorious.min.js hosted version.)

Was there any change on the PyBossa side? Could there be another 3rd party library interfering with the event pipeline somehow? Google didn't turn up any results on this case, so I'm slightly puzzled. Any thoughts?

Cheers, R

[teleyinex]

Hi,

This is very interesting indeed :-) The thing that we have done is basically add a new theme, just CSS and some minor JavaScript, but in that page nothing too special. What it worries me is that in Chrome it works just fine, without problems, so it might be a problem from Firefox rendering the page.

But, why is this working with the full version and not with minified one? Any idea?

[rsimon]

I really have no idea... I've uploaded a .full version with the same log statements as the current .min version. Can you maybe switch to the full version? Not sure this will tell us anything. But right now the only idea I have...

[rsimon]

Woah! try removing "bootstrapfixes.js" from your <script> imports.

[rsimon]

@adikeinan are you working on the same PyBossa template? (I.e. are you also using the bootstrapfix.js import?)

At least I just added both bootstrap and bootstrapfixes.js to a local test page - and things ceased working only on FF in exactly the same way as on the PyBossa page.

[adikeinan]

No, I don't have this import. I think I cloned the phototagging application code and started working on it shortly before the minor changes that Daniel has mentioned above, therefore I don't use the same version of code.

[rsimon]

Ah - too bad. Just when I thought I found the issue. Your issue, @adikeinan, could still have a different cause though. (You said Annotorious looks disabled altogether - so that's definitely different behavior than @teleyinex' case.)

As far as your code is concerend: that looks totally correct... If you can give me access to a test page, that would be helpful!

Cheers, R

[teleyinex]

Hi,

Interesting, the bootstrapfixes.js basically changes the CSS class of some items, and it looks like that's causing the issue, right? I'm wondering why Firefox is not doing it properly :-)

Have you tried Bootstrap3 and Annotorious?

[gsergiu]

Hi Daniel,

I assume that you are write .. Probably it overwrites the class=”annotatable” and breaks the Annotorious functionality. Are you using it for dynamic image loading (e.g. foto gallery, carousel, etc)? In that case there will be some timing issues as well.

Annotatorious was successfully integrated in Europeana 1914 project that uses pretty foto. Here is ticket that has to do with Annotorious + Image Gallery integration. https://github.com/europeana/Europeana1914-1918/commit/0763fe24534380ba7254c76bcadd9c850990d3ef

I hope it helps you.

BR,

Sergiu

From: Daniel Lombraña González [mailto:notifications@github.com] Sent: Mittwoch, 25. Juni 2014 08:42 To: annotorious/annotorious Subject: Re: [annotorious] Integration with Crowdcrafting is only working for Chrome (#106)

Hi,

Interesting, the bootstrapfixes.js basically changes the CSS class of some items, and it looks like that's causing the issue, right? I'm wondering why Firefox is not doing it properly :-)

Have you tried Bootstrap3 and Annotorious?

— Reply to this email directly or view it on GitHubhttps://github.com/annotorious/annotorious/issues/106#issuecomment-47065518.

[teleyinex]

Hi,

Good point :-) Let me check if this is happening, so we can finally nail down this problem.

Cheers,

Daniel

[adikeinan]

Hi Rainer, everything is working fine now! I've just reverted the import back to 'min' (if was on 'full'), and it works in several browsers that I've checked (Chrome, FF, Safari). All good now :) Thanks for everything!

[rsimon]

Hi Adi, good news :-) (still weird... but good news ;-)

So one issue resolved, another one to go: Daniel, no I didn't try Annotorious with Bootstrap 3 yet. But I'll try to give it a try later today.

Cheers, R

[teleyinex]

Hi,

I've found where the issue lays, but it's strange to me :-) Basically, what makes everything fail is the bootstrapfixes.js, but this specific code:

(function(){
    $(document).ready(function(){
        //for(i=1; i<13; i++) {
        //    console.log("span" + i);
        //    $(".span" + i).addClass('col-md-' + i);
        //    $(".offset" + i).addClass('col-md-offset' + i);
        //    $(".col-md-" + i).removeClass('span' + i);
        //    $(".col-md-offset" + i).removeClass('offset' + i);
        //}
    });
}());

What makes failing everything is the jQuery(document).ready section. If you remove that part, everything works fine. Thus, the class update is not a problem, is something related to the ready event that holds back something in Annotorious. The most interesting part is that this behavior does not happen in Chrome O.O

I'll keep you posted, as I keep testing new things.

Cheers,

Daniel

[gsergiu]

Hi Daniel,

In another project we were integrating Annotorious with google maps and we had some timing problems.

We solved them by using timers in order to wait for images to be loaded: window.setTimeout( function(){setAnnotatableClasses(); window.setTimeout( function(){anno.reset();}, 500);}, 1000);

You can try it as a quick test in conjunction with the bootstrap fixes.

I hope it helps!

BR,

Sergiu

From: Daniel Lombraña González [mailto:notifications@github.com] Sent: Freitag, 27. Juni 2014 08:36 To: annotorious/annotorious Cc: Gordea Sergiu Subject: Re: [annotorious] Integration with Crowdcrafting is only working for Chrome (#106)

Hi,

I've found where the issue lays, but it's strange to me :-) Basically, what makes everything fail is the bootstrapfixes.js, but this specific code:

(function(){

$(document).ready(function(){

    //for(i=1; i<13; i++) {

    //    console.log("span" + i);

    //    $(".span" + i).addClass('col-md-' + i);

    //    $(".offset" + i).addClass('col-md-offset' + i);

    //    $(".col-md-" + i).removeClass('span' + i);

    //    $(".col-md-offset" + i).removeClass('offset' + i);

    //}

});

}());

What makes failing everything is the jQuery(document).ready section. If you remove that part, everything works fine. Thus, the class update is not a problem, is something related to the ready event that holds back something in Annotorious. The most interesting part is that this behavior does not happen in Chrome O.O

I'll keep you posted, as I keep testing new things.

Cheers,

Daniel

— Reply to this email directly or view it on GitHubhttps://github.com/annotorious/annotorious/issues/106#issuecomment-47312190.

[rsimon]

Thanks for digging into this!

I can't say what exactly the problem is off the top of my head either. Just one hint from my side: Annotorious adds its own event handler to set up the annotation canvas(es) after document load. I'm using

window.addEventListener

or

window.attachEvent

for this. So it seems that the jQuery .ready method (which, I would assume, internally also picks one of the attachEvent/Listener native methods) somehow doesn't play well here on Firefox

https://github.com/annotorious/annotorious/blob/master/src/dom.js#L55-60