Re: theme Customization

[Matt Parizeau]

Hi,

It appears that the sticky note isn't loaded from that file anymore as we have switched to using a data URL.  To change the image that is used you can override the draw function for the sticky annotation by doing something like this:

var img = new Image();

img.src = "myImage.png"; // or data:image/png;...

Annotations.StickyAnnotation.prototype.draw = function(ctx) {
    ctx.drawImage(img, 0, 0, 31, 28);

};

Matt Parizeau

Software Developer

PDFTron Systems Inc.

On Monday, June 10, 2013 10:40:47 AM UTC-7, HiJacker83 wrote:

Hi! I tried to change sticky notes color (which is yellow by default. see:(PopupIcon.png). I change the file with red one it didn't work. how can I customize and change color of sticky notes?

thanks.

[Matt Parizeau]

Hi,

It looks like I was testing that code with the beta version and it works there but has some issues with the 1.4.2 version.  I would recommend upgrading to the latest beta version which you can find a link for at the top of this forum.

At the moment you aren't able to change the color of the tail coming from the popup.  We hope to expose this and other annotation functionality sometime in the future however.

As for the text highlight color I've just updated the beta version to include a function on DocumentViewer called SetTextHighlightColor.  To use it you would do something like this:

readerControl.docViewer.SetTextHighlightColor('rgba(0, 0, 200, 0.3)');

Matt Parizeau

Software Developer

PDFTron Systems Inc.

On Tuesday, June 11, 2013 12:50:04 AM UTC-7, HiJacker83 wrote:

Hi! Matt, 

Thank you for your help and for your answer.

I have error like this: Uncaught ReferenceError: Annotations is not defined

Nothing change. 

I also would like to change the color of the arrow

see the image: http://img191.imageshack.us/img191/953/adszxfw.png

and the text highlight color.

Can you help me? What am I doing wrong?

10 Haziran 2013 Pazartesi 20:40:47 UTC+3 tarihinde HiJacker83 yazdı:

[Matt Parizeau]

Sorry I was unclear about where you should put this code as I had assumed you had a config file for your customizations.  To make these changes you'll want to create a config JavaScript file and place the changes in there.  You can refer to the WebViewer samples for guidance as they all use config files, but basically you'll want to add another property to the WebViewer options, config: "config.js".  Then in your config.js file you can put the sticky annotation and highlight color code.  You'll have to make one small change to the highlight code to make sure that it works correctly as readerControl won't be defined initially when it is ran.

    $(document).bind("viewerLoaded", function(event) {

        readerControl.docViewer.SetTextHighlightColor('rgba(0, 0, 200, 0.3)');

    });

Matt Parizeau

Software Developer

PDFTron Systems Inc.

[HiJacker83]

[HiJacker83]

What I did so far is 

I downloaded beta version I added the code 

  config: "samples/customization/config.js",

to  index.html

and I added the codes

(function() {

    $(document).bind("viewerLoaded", function(event) {

        readerControl.docViewer.SetTextHighlightColor('rgba(100, 100, 200, 0.8)');

    });

})();

no errors but no change with highlights color. I also added 

var img = new Image();

img.src = "PopupIcon.png"; // or data:image/png;...

Annotations.StickyAnnotation.protoype.draw = function(ctx) {

    ctx.drawImage(img, 22, 33, 31, 28);

};

to config.js but no luck. please help me to work this out.

[Matt Parizeau]

Can you make sure that the path to the config file is correct.  The path should be relative to the html file of your viewer.  For example if the config file was in the same directory then you would just have config: "config.js".  Try putting an alert statement in the config file to make sure that it is actually running.

Matt Parizeau

Software Developer

PDFTron Systems Inc.

[HiJacker83]

I put the code below in the config.js. there was a alert but highlight didn't change at all

   alert("Hello! I am an alert box!");

   $(document).bind("viewerLoaded", function(event) {

        readerControl.docViewer.SetTextHighlightColor('rgba(188, 180, 20, 0.9)');

    });

Here is my link:

http://tradewinds.net.au/WebViewer/samples/i18n/desktop.html

http://tradewinds.net.au/WebViewer/samples/i18n/config.js

I would appreciate  If you can look at it and tell where is the problem or if you can put a working example on pdftron server and share a link.

Cheers.

[Matt Parizeau]

It looks like the config file that is being loaded has the line: readerControl.docViewer.SetTextHighlightColor('rgba(88, 80, 200, 0.5)'); instead of the one you posted above.  This color looks very similar to the default highlight color so it only seems like it isn't being set.  Maybe a different config file then you expect is being loaded?

Matt Parizeau

Software Developer

PDFTron Systems Inc.

[HiJacker83]

I just noticed that its only works on firefox. doesn't work on ie and chrome.

[Matt Parizeau]

From this link: http://tradewinds.net.au/WebViewer/samples/customization/desktop.html I see it working with a red highlight on Firefox, Chrome and IE.  Please make sure that you have cleared your cache and then try loading the page again.  Also just to be clear, this code is changing the highlight color that is shown when using your mouse to select text or to highlight a search result, NOT the highlight annotation.

To change the sticky note image then please use the code I posted previously and put that code inside the same config.js file.

Matt Parizeau

Software Developer

PDFTron Systems Inc.