Integrate annototor.js imgselect plugin in our pdf/html viewer (angular 4)
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

Given an HTML(in provided zip), load write Angular4 code to load it into IDRViewer, and integrate plugin so any portion of any image in the HTML can be selected by dragging the mouse over it. Selecting a portion of an image should bring up a dialog box (default of the plugin is fine) to create annotation. The text of the annotation and the relevant coordinates to reload the annotations should be easily accessible/commented. Another major requirement is to provide a function calling which with an array of annotations should populate the HTML with annotations

here is the sample file you will be using for testing things out.

one thing to note, we will need to make sure this supports svg images along with typical raster image types.

Given the scope for this is a bit more complex we will agree to the 100 bounty + 100 tip for the top winner (200 total) and 50 for the runner up solution.

Can you post some more details on what you mean by 'load it into IDRViewer'?
kostasx 11 months ago
Basically that the new code needs to work with the viewer and not hard coded to this one pdf/html. Since we will apply your solution to a couple hundred different files . IDR is really just the wrapper to make the htmls behave like a native pdf
Qdev 11 months ago
Any particular software or library you are planning to use as the IDR Viewer?
kostasx 11 months ago
Yeah, could you link to a library for the IDR viewer? I'm not seeing a client side package
jduplessis294 11 months ago
Hey everyone the viewer is in the zip file when you run the index html page. It’s really just a. Js wrapper around the “pages” that load. Everything is 100% in that zip. Thx
Qdev 11 months ago
Please let me know any other questions! Thx!
Qdev 11 months ago
Can we manipulate the page HTML files (the 1.html, 2.html, 3.html, etc.) like for example add a script tag with code or edit the SVG files included with each file? (Currently working on the Angular 4 version of the solution)
kostasx 11 months ago
Seems valid let’s assume yes via code, just so I don’t have to manually edit all. Thx!
Qdev 11 months ago
Do you also need the images on pages 8,9, 10, etc. (multiple SVG on a single page) to be annotated? If so we need to either edit the SVG code a bit or transform them into images. I am really close to a final solution based on Angular 4, with visible captions and data storage. Will post my solution later in the day.
kostasx 11 months ago
awarded to Wuddrum

Crowdsource coding tasks.

3 Solutions

So, this turned out to be quite tricky. The complexities that arose from trying to combine Angular 4 with the Annotator plugin and the PDF viewer library (almost 0 documentation) were far too many to mention.

I have create an Angular 4 app using the Angular CLI:

npm install -g @angular/cli

ng new my-app

A preview can be found here:

The GitHub repo can be found here:

I have made some changes manually in order for the preview to be available via the domain. Specifically:

in /dist/my-app/index.html:

<base href="/integrate-annototor-js-imgselect-plugin-in-our-pdf-html-viewer-angular-4/dist/my-app/">

And in main.js:

var imgSrc = document.location.origin + "/integrate-annototor-js-imgselect-plugin-in-our-pdf-html-viewer-angular-4/dist/my-app/" + pageNum + "/" + image.getAttribute("xlink:href");

In order to get this repo working locally, you have to do an npm install and also manually edit these two settings according to your local development environment.

The script uses the LocalStorage to store and retrieve cached annotations.
The code can be found in the app.component.ts handleCreatedAnnotations() function:

Changes have also been made to annotator.imgselect.js module in order for the
cached annotations to be loaded on start and also fix some annotation placement issues.
(This needs some improvements)

Bear in mind, that this project is very demanding and requires a lot of hours of work in order for several improvements to be made (e.g. whenever a caption is open the arrow keys do not work on the caption editor, but rather switch to previous/next PDF pages).

I hope the work done so far can helps you.

Let me know what you think.

Thanks for the release a) there seems like some Fixed position issues: highlighted image area is different from actually selected image area, b) When scrolling with the mouse wheel there's visible lag
Qdev 11 months ago
The visible lag is caused mainly by the pages with many SVGs. The SVGs that are loading into the viewer are really complex and this makes the browser lag. This SVGs can either be simplified or replaced with images. The highlight position is something I am working to improve.
kostasx 11 months ago
hey there i loaded just the raw file here I do some some lag but it still seems like more from your demo, can you confirm?
Qdev 11 months ago
Yes, the lag and high browser CPU usage has nothing to do with my app. Starting from page 8, the SVG that are loaded are way too heavy for the browser to render along with all the other elements.
kostasx 11 months ago
Yes, the lag and high browser CPU usage has nothing to do with my app. Starting from page 8, the SVG that are loaded are way too heavy for the browser to render along with all the other elements. The SVG file 8.svg is 5.7 MB alone!!!
kostasx 11 months ago
I've updated the code (do a hard refresh and check the online demo) on the annotation coordinates. The highlighted image areas are now fixed.
kostasx 11 months ago
Too sad to see that such an effort was not appreciated and a lot of hours that went into working this out were wasted without getting any feedback or tip from the author.
kostasx 11 months ago
Hey man don’t say that - we totally appreciate the community here and the solutions. We are working to see if we can convert all of our giant svg images to png (technically png as base64 in the svg wrapper so we don’t have to modify the markup) so we can then apply the solutions we have here. I should be able to solve that today and then get back to revising these.
Qdev 11 months ago
Thank you!
kostasx 11 months ago
yeah sorry it took so long. We ended up writing code that converted all of the SVGs to 3x sized pngs and then rewriting the html to reference the png instead of the svg object... then had to go through testing to make sure we didnt break existing documents.
Qdev 11 months ago

Alright, took me way longer than I anticipated, but here's my full Angular 4 solution.



Unless I've missed something, this should be a complete solution that includes annotation storage and all the nasty bugfixes - annotation elements staying static on the screen, unable to correctly annotate while zoomed in, using arrow keys while editing annotation etc.

This also supports loading IDRViewer documents from any local folders, by simply providing/parsing the base path of document's folder.

I'll try to briefly go over the changed files.

idrviewer.js: Wrapped in a simple IDRViewerController.initialize_main() function, to enable manual initialization/reinitialization. This is needed because IDRViewer is failing to correctly load additional documents without getting fully reinitialized. And this has to be wrapped in this function because obviously, when Angular app loads the library, it stays loaded, no matter component changes.

idrviewer.fullscreen.js: Wrapped in simple IDRViewerController.initialize_fullscreen() and IDRViewerController.destroy_fullscreen() to manually initialize and uninitialize the library. Base url is now prepended to search.json request url. Also wrapped in a simple IDRViewerController.initialize_search() function to manually initialize/reinitialize the library.

idrviewer.querystring-navigation.js: Removed completely, since it's not compatible with Angular's routing. I've reimplemented the simple functionality in IDRViewerComponent.

idrviewer.toolbar.js: This simply encapsulates the script that's found in IDRViewer's index.html and is responsible for initializing the toolbar. Included support for base url. Also wrapped in a simple IDRViewerController.initialize_toolbar(base_url) function to enable manual initialization.

jquery.imgareaselect.js: Added support for zoom changes.

annotator.imgselect.container.js: This is an extended annotator.imgselect.js, to provide support for IDRViewer container. Exported under the name annotatorImageSelectContainer (I know, not the best naming). Contains a bunch of improvements/bugfixes to annotation logic. By using this, annotator.ui.main does not have to be included when creating a new instance of Annotator, since it configures and sets up all the basic elements on its own to correctly support IDRViewer.

Performance Issues:

I can confirm that the default app, that is provided here is lagging just as much as this or kostasx's app.

However, this only happens when pages 8 to 11 are in the vicinity. Those pages are really demanding - each page contains 6 small pictures, where each has more than 22000 path elements, to simply draw the ground/sand particles. This issue also seems to only affect Chrome/Chromium browsers.

While optimizing the performance is out of the scope of this problem, going forward I can suggest a way to increase the performance.

If object elements get changed into img elements, the performace is a lot better (but not 100% smooth). This however would require some automated tool do change all the documents. Also, since there's no way to access svg contents inside an img tag, the tool should also automatically create image overlays for annotator to attach to.

The downsides of this is obviously the development of such tool (and some editing of my app) and that document's text cannot be selected whilst inside img tag. However, most of the text resides in the html file, so that shouldn't be much of a problem.

EDIT: Corrected path element count under performance.

Here's my solution


Project updated. Please pull the latest commits.

The solution use localStorage as an example of annotations storage.

Annotations will be auto loaded. It will use the query function of the provided storage to get annotations for the image.

All you need to do is implement your custom storage logic in the assets/idrviewer.annot.config.js (see example in the file).

Setup for other IDRViewer documents

  • copy the /assets folder to other IDRViewer folder to activate image annotations


  • added assets/idrviewer.annot.config.js
Thx for the solution. I’ll upload a couple more working examples in about 12 hrs with normal images in them.
Qdev 11 months ago
hey thanks for the release a) Need a callback to get text, coordinates (or details required to reload the annotation) on saving an annoation b) Need a method that given an array of annotations loads them in the viewer - could be demonstrated by using localStorage
Qdev 11 months ago
View Timeline