Custom Web Project Request

[Jason Smith]

I am currently working on a web project for a client and this API is perfect for what my client wants me to accomplish. I don't need all the features of the API and I am simply looking to utilize and modify only a select few. If possible could you provide code snippets in your reply? It'll be easier for me to go off of. I would like to know how to do the following (as per my client)...

I want to rearrange the top ToolbarControl and display it how I want while disabling the features that I don't need.

I want to enable multiple users to collaborate on one document.

I want to disable all the annotation tools EXCEPT the sticky note tool. And with the sticky note tool I want to bind it with the highlight tool with a custom highlight color based on a user's choice (specifically the stroke color options you guys already have in place on the sticky note tool).

Lastly, I want users to be able to add their own comments onto a sticky note already put in place by someone. Essentially creating a commenting thread.

Smaller additions:
Is there a way to fix the size of the sticky note popup? We don't want users to morph the size like it's done in the default.

[Matt Parizeau]

Hi Jason,

We provide access to the HTML and JavaScript source of ReaderControl so you can make your modifications to the toolbar directly there if you like.  The div with id "control" contains the entire toolbar.  Alternatively you could do all of your modifications through JavaScript in a separate config file.  This should make it easier to upgrade to newer WebViewer versions in the future.  You can take a look at config.js in the various samples in the WebViewer download that change the toolbar (e.g. http://www.pdftron.com/webviewer/demo/samples/customization/config.js).  For very simple changes you could take a look at ReaderControlConfig.js.

For collaboration Kevin just added a general post outlining some tips: https://groups.google.com/forum/#!topic/pdfnet-webviewer/_QeJeSPVpeY

To modify the annotation tools you can take a look at AnnotationPanel.html and make the changes there or alternatively put them in your config file.  As for your other comment, I'm not 100% sure this is what you mean, however all annotations have a note associated with them.  You can view the note by double clicking on any annotation.  So if I understand correctly you would just want to show the highlight tool, but maybe show the note by default when creating it?

Currently we don't support a commenting thread on notes, but we're working on it and it should be available for the next version.

You can add an event handler for annotationPopupCreated to modify the sticky note.  The following code is to make it unresizable, but you have access to the element so you could change the size, color or add your own fields.

var am = readerControl.docViewer.GetAnnotationManager();
am.on('annotationPopupCreated', function(e, annotation, $popupel) {
    $popupel.resizable('disable');
    $popupel.removeClass('ui-state-disabled');
    $popupel.find('.ui-resizable-handle').css('display', 'none');
});

Matt Parizeau

Software Developer

PDFTron Systems Inc.

[Matt Parizeau]

In response to the deleted post about the next version of WebViewer, generally WebViewer releases happen every 3 months, with the last one being 1.7 at the end of December.  This isn't a set rule and we may consider doing smaller feature releases based on feedback.

Matt Parizeau

Software Developer

PDFTron Systems Inc.

On Thursday, January 30, 2014 9:25:53 AM UTC-8, Matt Parizeau wrote:

Hi Jason,

We provide access to the HTML and JavaScript source of ReaderControl so you can make your modifications to the toolbar directly there if you like.  The div with id "control" contains the entire toolbar.  Alternatively you could do all of your modifications through JavaScript in a separate config file.  This should make it easier to upgrade to newer WebViewer versions in the future.  You can take a look at config.js in the various samples in the WebViewer download that change the toolbar (e.g. http://www.pdftron.com/webviewer/demo/samples/customization/config.js).  For very simple changes you could take a look at ReaderControlConfig.js.

For collaboration Kevin just added a general post outlining some tips: https://groups.google.com/forum/#!topic/pdfnet-webviewer/_QeJeSPVpeY

To modify the annotation tools you can take a look at AnnotationPanel.html and make the changes there or alternatively put them in your config file.  As for your other comment, I'm not 100% sure this is what you mean, however all annotations have a note associated with them.  You can view the note by double clicking on any annotation.  So if I understand correctly you would just want to show the highlight tool, but maybe show the note by default when creating it?

Currently we don't support a commenting thread on notes, but we're working on it and it should be available for the next version.

You can add an event handler for annotationPopupCreated to modify the sticky note.  The following code is to make it unresizable, but you have access to the element so you could change the size, color or add your own fields.

var am = readerControl.docViewer.GetAnnotationManager();
am.on('annotationPopupCreated', function(e, annotation, $popupel) {
    $popupel.resizable('disable');
    $popupel.removeClass('ui-state-disabled');
    $popupel.find('.ui-resizable-handle').css('display', 'none');
});

Matt Parizeau

Software Developer

PDFTron Systems Inc.

On Tuesday, January 28, 2014 6:04:01 PM UTC-8, Jason Smith wrote:

[Jason Smith]

The resize code isn't working when I place it in my config file. I tried putting the code in my HTML and it still isn't working.

    $(function() {
      var viewerElement = document.getElementById('viewer');
      var myWebViewer = new PDFTron.WebViewer({
        type: "html5,html5mobile,Silverlight,flash",
        initialDoc: "GettingStarted.xod",
        path: "lib",
        enableAnnotations: true,
        }, viewerElement);
      $(viewerElement).bind('documentLoaded', function(event){
          myWebViewer.setZoomLevel(1);
      });

var am = readerControl.docViewer.GetAnnotationManager();
am.on('annotationPopupCreated', function(e, annotation, $popupel) {
    $popupel.resizable('disable');
    $popupel.removeClass('ui-state-disabled');
    $popupel.find('.ui-resizable-handle').css('display', 'none');
});

         });

[Matt Parizeau]

It looks like we need to call that resize code in a viewerLoaded handler because when the config script is initially executed readerControl won't be defined.  readerControl will be defined after the viewer is loaded so you could call it like this:

$(document).on('viewerLoaded', function() {

 var am = readerControl.docViewer.GetAnnotationManager();
 am.on('annotationPopupCreated', function(e, annotation, $popupel) {
    $popupel.resizable('disable');
    $popupel.removeClass('ui-state-disabled');
    $popupel.find('.ui-resizable-handle').css('display', 'none');
 });
});

Matt Parizeau

Software Developer

PDFTron Systems Inc.

[Jason Smith]

Thank you for this it works perfectly! And it works for my custom workaround that I am trying to create. But there is one problem I am having, how can I append a new div to the very bottom of a webviewer? When I try and append something to the webviewer it doesn't show, but when I "prepend" a div it shows up at the top as in the following image...

I am using the following code which makes the prepend work like you see in the image I've attached... $("html").prepend("Hello!"). How can I make it to where I can "append" something to the very bottom of the webviewer? And I can't figure out how to override the styling because it always comes out with a gray background (as you can see in the image I added).

If you can get back to me on this ASAP I will be able to finish my application on time!

[Jason Smith]

And also, how can I change the color of the popup from its cream color to something else?, how can I change the "sticky" title text to read something else and how can I change the color of the yellow line that connects the sticky to the highlighted text?

[Matt Parizeau]

The reason why you can't see it when appending is because there are some calculations done on resize (and initially) to fit the height of the viewer to the window.  You could go in to ReaderControl.js and modify the resize function so that viewerHeight is smaller or you could add a div on the html page with WebViewer in it, just below the viewer div.

If you want to modify ReaderControl then you could do something similar to var viewerHeight = window.innerHeight - 20; and then in your config script you would append to the ui-display div (e.g. $("#ui-display").append("hello")).

You could also take a look at the WebViewer Universal Custom Content sample as it adds custom divs around the viewer itself.  This sample is in the WebViewer download and you can see it on our website here: http://www.pdftron.com/webviewer/demo/samples/universal-custom/

To change the popup color and title text you could add the following lines inside of the annotationPopupCreated callback that we were using above.

$popupel.css('background', '#00FFFF');
$popupel.find('.popup-subject').text("Custom Title");

The ability to modify the popup tail was added recently in an unofficial build you can find here: http://pdftron.com/ID-zJWLuhTffd3c/WebViewer/WebViewer_1.7.0.22748.zip

Here is some sample code to draw a custom popup tail:

Annotations.SelectionModel.prototype.drawPopupTail = function(ctx, annotation, zoom, rect, targetPoint) {
    var center = {x: (rect.x1 + rect.x2) * 0.5, y: (rect.y1 + rect.y2) * 0.5};
    var corner = {x: rect.x1, y: rect.y1};
    if (targetPoint.x > center.x) {
        corner.x = rect.x2;
    }
    if (targetPoint.y > center.y) {
        corner.y = rect.y2;
    }

    ctx.beginPath();
    ctx.moveTo(corner.x, corner.y);
    ctx.lineTo(targetPoint.x, targetPoint.y);
    ctx.strokeStyle = "rgba(255, 0, 0, 0.5)";
    ctx.stroke();
};

Matt Parizeau

Software Developer

PDFTron Systems Inc.

[Jason Smith]

I tried the "viewerHeight" option you insisted on but I think it'll look better if I create my own div like in the universal-custom. How can I add my own custom div on the right side of the current webviewer I have? When I take a look at ReaderControl.html in the html5 folder, none of my modifications show on the webviewer on my end (even if I remove large amounts of code). Also I have tried using the universal.html page, but my config file settings don't work when I do this (if I am correct, unversal.html are cross compatible with the other technologies "silverlight, flash" correct?) See my code below...

<script type="text/javascript">

    $(function() {
      var viewerElement = document.getElementById('viewer');
      var myWebViewer = new PDFTron.WebViewer({
        type: "html5,html5mobile,Silverlight,flash",
        initialDoc: "GettingStarted.xod",
        path: "lib",

        config: "lib/config.js",
        html5Path: "html5/ReaderControl.html",
        enableAnnotations: true,
        streaming: false,

        }, viewerElement);
      $(viewerElement).bind('documentLoaded', function(event){
          myWebViewer.setZoomLevel(1);
      });

         });

As for the popup tail. I downloaded the webviewer build you linked and tried the code, but none of it worked. I see no changes when I paste it into my config file as is. Do I need to wrap it in the following...

$(document).on('viewerLoaded', function() {

});

Thank you for continuing to help on this project I am so close!

[Matt Parizeau]

ReaderControl.html is the file that is used for the HTML5 viewer, so if you're making changes to it then they should be reflected when running WebViewer.  Make sure that you're modifying the ReaderControl.html that you think you are (since you have two different builds downloaded) and try clearing your browser cache for the changes to take effect.

With the universal viewer it handles the creation of WebViewer for you, so you don't need to add your own code like you have above.  You just need to modify lib/universal/settings.js to set your options.  To see where WebViewer is initialized go to lib/universal/universal.js in the initializeWebViewer function.

Even without using the universal viewer it should be fairly straightforward to add a div on the right side of the viewer.  For example if you take a look at samples/annotation/desktop.html it has the viewer take up the entire screen, but you could simply modify the body like this:

<body style="width:100%;height:100%;margin:0px;padding:0px;overflow:hidden">
    <div id="viewer" style="height: 100%; width:90%; overflow: hidden;"></div>
    <div id="rightContainer" style="width: 10%">Right</div>
</body>

With the popup tail customization, I just downloaded the linked build, created a config file with the code I posted and made sure the config file was set in the WebViewer options.  After doing this the popup tail changed as I expected.  So it could be that your config file isn't actually being referenced correctly.  Wrapping it inside viewerLoaded shouldn't be necessary.  Try putting the line debugger; at the top of your config file and then have the browser developer tools open.  If the config file is actually run then it will break at that line, otherwise it isn't actually running and you'll have to figure out why.

Matt Parizeau

Software Developer

PDFTron Systems Inc.

[Jason Smith]

Thank you so much! Everything worked and even with my own custom code! Yes! One last thing, how can I restrict this to just when annotations are deleted? The alert shows anytime an annotation is added, changed, or deleted. How to have it JUST on delete?

$(document).on('viewerLoaded', function() {

  am.on('annotationChanged', function(){

    alert("Hello");

  });

});

[Matt Parizeau]

You can do something like this:

am.on('annotationChanged', function(e, annotation, action) {
    if (action === "add") {
        // annotation added
    } else if (action === "modify") {
        // annotation modified
    } else if (action === "delete") {
        // annotation deleted
    }
}

Matt Parizeau

Software Developer

PDFTron Systems Inc.

[Jason Smith]

Awesome. Thank you very much! Do you have an idea how I can give each popup its on unique ID every time one is created?

[Matt Parizeau]

What are you trying to achieve by giving each popup a unique id?  Creating a unique id should be simple enough by having a variable that starts at 1 and is incremented every time a new popup is created.

[Jason Smith]

Since you guys don't have a comment thread feature, I'm creating a makeshift one myself. And I want my users to be able to hyperlink back to the popup that corresponds with the comment thread my users are interacting with. I'll put some kind of a button on the thread that links back to the unique id of the popup in question. Is this the best way to achieve this?

[Matt Parizeau]

When you say you want to link back to another popup does that mean when you press the button the view will jump to the annotation associated with the popup and display the popup with it's text?

The terminology can be a bit confusing with sticky note annotations, but there is an annotation (the visible annotation that you can drag around) and then a note associated with that annotation which is represented by the div element, textarea, tail and some text.  Since annotations and notes map 1:1 then it might be easiest to keep a reference on the annotation to the other annotation it is linking to.  In the annotationPopupCreated event handler you do have access to the annotation object as a parameter and in general to get the popup object you'll need to go through the annotation object anyway with annotManager.GetAnnotationsList() and annotation.getPopup().

So you could have something like:

myAnnotation.replyTo = myOtherAnnotation;

In the button click event have something like:

annotManager.JumpToAnnotation(annotation.replyTo);

Matt Parizeau

Software Developer

PDFTron Systems Inc.

[Jason Smith]

The visible annotation that I can drag around is what I want to link to. How can I link to that specifically from outside the webviewer? I used your javascript counter idea and it properly numbers all the popups now.

[Matt Parizeau]

If you're linking from outside WebViewer then it actually probably makes more sense just to use each annotation's Id property.  An Id looks something like this 39e6c6de-fc42-1a74-784a-216a30b46985 and there is one automatically assigned to each annotation.  If you've stored an Id outside the WebViewer somehow and are trying to link to it then you could have code like:

var iframeWindow = $('iframe')[0].contentWindow;
var annotManager = iframeWindow.readerControl.docViewer.GetAnnotationManager();
var annotationList = annotManager.GetAnnotationsList();

for (var i = 0; i < annotationList.length; ++i) {
    if (annotationList[i].Id === myLinkedId) {
        annotManager.JumpToAnnotation(annotationList[i]);
        return;
    }
}

Matt Parizeau

Software Developer

PDFTron Systems Inc.