Annotations support

[di72nn]

Currently implemented:

• Saving annotations (when updating from server).
• Methods to work with annotations: addAnnotation(), updateAnnotation() and deleteAnnotation() in OperationsHelper.
• Offline changes and client-to-server sync.
• Demo that displays a JS alert with JSON representation of article annotations in the ReadArticleActivity. See webview_htmlbase.html and JsAnnotationController for details.

What's not done:

• Proper testing.
• Any UI:
  • HTML/JS-side for highlighting and interacting with annotations in text.
  • Android side for modifications (only annotation text can be modified) and maybe more if not implemented in JS.

I'm not yet sure, but it seems that annotation changes on the server side do not mark articles as modified, so API clients never detect annotation changes. If that's correct, it may become an impediment akin to server-side deleted articles. Except this one doesn't have a workaround.

Everyone is welcome to step in to help with UI and JS stuff.

#115.

[di72nn]

BTW, if anyone is interested, here are some code snippets I ran from ReadArticleActivicy using debug evaluation to test stuff:

AnnotationRange range = new AnnotationRange(null, null, "/ul[1]/li[1]", "/ul[1]/li[1]", 1, 5);
Annotation annotation = new Annotation(null, null, article.getId(), "Test annotation from app", null, null, null, null);
annotation.setRanges(Arrays.asList(range));
OperationsHelper.addAnnotation(this, article.getArticleId(), annotation);


fr.gaulupeau.apps.Poche.data.dao.entities.Annotation annotation = new ArrayList<>(article.getAnnotations()).get(1);
annotation.setText("Updated annotation from app");
OperationsHelper.updateAnnotation(this, article.getArticleId(), annotation);


OperationsHelper.deleteAnnotation(this, article.getArticleId(), new java.util.ArrayList<fr.gaulupeau.apps.Poche.data.dao.entities.Annotation>(article.getAnnotations()).get(1))

[Strubbl]

When having annotation support, maybe we can add a menu item to the navigation drawer, which is called "Annotated" or the like. It shall filter for annotated articles. With the tabs we can then see the unread, starred or achived annotated articles.

[di72nn]

It sure is possible. However, a harder part is some kind of UI for displaying and creating annotations - without it this code is useless.

[di72nn]

Rebased. Here's the old code just in case (github seems to save old commits, but I'm not bothered to check for how long).

[di72nn]

Here's a very clunky AnnotatorJS-based UI.
Short version: yes it kinda works, you can go ahead and test it.

Since I'm not a web developer at all, it was an absolute pain to do. Through sufferingI learned a lot.

For that reason I didn't even try to implement the JS part myself, so I had to resort to some libraries.

I considered using touch plugin, which only works with AnnotatorJS 1.2. I managed to get it running, but the UI didn't work that well with our webview (which always wraps the whole page instead of scrolling - the "annotate" button always appeared at the bottom of the article). I also couldn't build a proper version of AnnotatorJS 1.2 (some AnnotatorJS build scripts didn't work properly in my environment). Also I'm not very happy with using a version that ancient.

Instead I built AnnotatorJS's master. It is not mobile friendly, so I kludged it with Android's context menu action: you select text, press "Annotate" in the context menu, then annotator's "annotate" icon appears. That may be improved of course.
Another problem is that annotator popups often appear partly outside of the screen, not sure what's the deal with this.

Anyway, that last solution kinda works (UI wise; hopefully non-UI parts work ok).
So anyone interested in this feature should now have more than enough examples to properly implement the UI.

[di72nn]

Fixed "Annotate" not doing anything on real devices.

Removed that extra step: annotation editor appears directly after pressing "Annotate".
Made a lousy attempt to horizontally center annotator popups.

AnnotatorJS is built from this branch (npm install ., make, take pkg/annotator.min.js).

[di72nn]

Seeing the flurry of activity I presume this is the best it's gonna get (I'm certainly not improving it much more), so I'm marking annotations as an "experimental feature", disabling it by default and unlabeling PR's "work in progress" status.

[di72nn]

Oh, I keep forgetting to thank @The-Compiler for #884 - remote WebView debugging was immensely useful, thank you!

[Strubbl]

I have installed this branch on my phone and i am going to test the feature.

[mirenbz]

THANK YOU! This is a real deal breaker. Really hope it can be made better, but it works is certainly enough to keep (at least me) from switching. 😍

[mblennegard]

I tried this out the other day and noticed that annotations made in the web application does not show up in the Android app.

I don't know if this is already reported elsewhere, but otherwise I can create a bug or feature request respectively.

[Strubbl]

I am not sure, but my guess is that annotations are only synced to the app after a "full update" and not the default "fast update". It is a similar problem with the tags, e.g. #463

[mblennegard]

@Strubbl You are absolutely right.
I just tried it and can confirm that a Full Update from the Android app indeed fetches the annotations made from the web application.

What's interesting is that any annotations made in the Android app syncs with the fast update, as the Android made annotations show up directly in the web application.
Or is it that any edits, such as setting tags, making annotations etc., made in the Android app syncs back to the DB immediately?

[di72nn]

Created a new issue with some explanation: #1048.

Or is it that any edits, such as setting tags, making annotations etc., made in the Android app syncs back to the DB immediately?

Changes made in the app are always synced ASAP.