How to show/hide single layers in browser with JavaScript?

[jeff_biss]

Hello,

I've been beating my head against Adobe's JavaScript API (JavaScript APIs — Acrobat-PDFL SDK: JavaScript Reference) trying to figure out how to do what appears to be a very rudinmentary thing, show and hide specific layers in a PDF in a browser window. I created a map in Illustrator and used layers such that each one shows a single location. When it is opened in a browser window I want my JavaScript to show a specific layer as determined by a onmouseover event. However, I cannot get any layer to show with the file open in Acrobat using the console. I have to say that the API isn't very helpful, most aren't, but I have tried a number of times with no success in getting one specific layer to display on top of the bottom layer. Here is my current code and console output:

var layers = this.getOCGs();
var cnt = layers.length;
cnt
layers[400].name;
layers[400].getIntent;
layers[400].initState;
layers[400].state = true;

undefined
undefined
477
F1
function getIntent() {
    [native code]
}
false
true

I was successful in creating a watermark as instructed by one of Thom Parker's tutorials, but havenot been able to display one layer with JavaScript using the API or any of his other tutorials. I assume that the API is intended to work in a browser, which may be wrong. If the API is not intended to allow me to show and hide layers in a browser, then Adobe should be very clear about this, because, well, why have layers? If the API is intended to provide the means to show and hide a PDF's layers in a browser window, then it should provide clearer information about how to use the API to do that as it doesn't.

Jeff

[try67]

-Your code seems to do what you asked it to do, which is print out a bunch of properties for a specific layer. You didn't tell it to make any changes in this code.

-It's not a good idea to access a layer via its index number, though, as those can change. You need to iterate over the OCGs array, looking for a layer that has a specific name, and then make your adjustments to it.

-If you want to call a function, like getIntent, you must add parentheses at the end, or it will print out its source-code, instead of calling it.

-JS code should work in a browser, as long as the Adobe plugin is used. If other plugins are used, all bets are off.

[jeff_biss]

try67,

Thanks for the reply.

- The change that I want is to make the F1 layer, index #400, visible. How to do that is not explained in the API, if it is, it is it isn't obvious. 

- The API doesn't explain how to use the names that I gave my layers, but it gives code examples using indexing, such as walking through the ocgs array in a for loop. I assumed that if I could add a layer, such as after I figure out how to use the API, then the indexing would change, but I have to start somewhere and as the API shows index examples, I started there.

- I'm not a properly educated programmer, I'm an electrical engineer who taught himself, so that parantheses thing trips me up. The API says that "name" is a property, not a function. So, I figured that one out, but not with getIntent until your comment. I added them and now receive View as the result. I see that it IS a function, not a property. Thanks!

- I don't see anything about how to use the Adobe plugin in my code. I may be blind. I have coded with JavaScript, check out the e-commerce page at marco-inc.com, but it's been a while. I think that Adobe should improve their instructions or make where to get that information more obvious, because I looked. IMO, their Acrobat JavaScript API Reference (Acrobat JavaScript API Reference — Acrobat-PDFL SDK: JavaScript Reference) should state explicitly what needs to be added to one's code to successfully use it because not all users are professional coders who do this all the time. I know that I have to add some include or some such directive, but why isn't it simply stated for us non-coders? At least there are a lot of JavaScript tutorials out there.

[Thom Parker]

Setting the layer state to true will turn the layer on. Whether or not this makes the layer visible depends on the layer settings. Make sure it is set to "Visible when On". 

[jeff_biss]

Thom,

Thanks for your reply. In your answer to Change layer visibility from hidden to visible but doesn't print (Change layer visibility from hidden to visible but doesn't print (JavaScript)), you state that "In the layers panel properties for the layer, manually set the visibility to "visible when on"".

Where is Visible when On set? I am using Illusrator 29.1 but don't see that in either Options for "xxx" layer or Panel Options from the Layers flyout menu or Edit/Preferences, I looked through all screens, but could have missed it.

I did find that I had all layers locked, to keep them safe while I worked on them, and so unlocked all and saved again. I assumed that saving them locked would be another bump in the road.

[jeff_biss]

Thom,

I found Visible when On in Acrobat, not Illustrator. I selected a layer, clicked Properties and the Layer Properties window shows that the layers' Visibility settings are set to Visible when On. So, the layers should be displayed when I use the correct API command, which I don't seem to be doing.

[Thom Parker]

This article provides a function for getting the OCG object by name, and shows how to show/hide layers.

https://acrobatusers.com/tutorials/create_use_layers/

[jeff_biss]

I found that page of yours, it's what I used to verify that JavaScript would change my PDF with that watermark, which it did, but I could not get that layer to show. However, I did notice something when stepping through my code:

var layers = this.getOCGs();
var cnt = layers.length;
cnt
layer = layers[400].name;
layers[400].getIntent();
layers[400].setIntent([layers[400].constants.intents.view])
var c = layers[400].constants;
c;
layers[400].initState;
layers[400].state = true;
layers[400].state = !layers[400].state;


undefined
undefined
520
F1
View
undefined
undefined
[object constants]
false
true
false

When I step through the last two steps that change the state, I notice that some graphic elements in the PDF blink of then back on but the layer never becomes visible. These elements are not visible in the source Illustrator file and appear a dashed line rectanges in the PDF, so they must be some artifact. So, the script is doing something just not making that layer visible.  

The layers hide and show in the PDF as determined by their checkbox, so what might be preventing the script's state change from displaying them? Something from Illustrator? I see that the Layers menu has Release to Layers (Sequence) and Release to Layers (Build), could they have something to do with the script's state change not working?

[jeff_biss]

About using names, I tried your for loop in the JavaScript Debugger but it doesn't run the for loop line by line. I couldn't find any information for running the script as a script using the player. I'm searching for that information, if you have a tutorial for it, please provide the link. I'm getting the feeling that the player works on scripts that are part of the PDF, which mine is not.

[Thom Parker]

Watch this video on the Console Window:

https://www.pdfscripting.com/public/images/video/AcroJSIntro/AcroJSIntro_ConsoleWindow.cfm

[jeff_biss]

That video is great! Thanks, that allowed me to use your example as my template:

function find(ocgname){
    var layers = this.getOCGs();
    for(var i=0; i < layers.length; i++) { 
        if(layers[i].name == ocgname) return layers[i];
    }
    return null;
}

var ocg = null;
ocg = find("F1");
ocg.getIntent();
ocg.setIntent([layers[400].constants.intents.view])
var c = ocg.constants;
c;
ocg.initState;
ocg.state = true;

true

However, the specified layer refuses to show. I'll keep at it because it has to work because you've gotten it to work obviously. Enjoy your weekend.

[Thom Parker]

Can you make up a demo PDF doc and post it so we can check it out. 

[jeff_biss]

Thom,

Happy Monday! I've attached the file, with fewer layers, and an even simpler one that has but two layers and even it doesn't show layer 2 when I specify it to be set to "true". I created them in Illustrator, whatever the latest version is, with all layers unlocked and invisible, but but the underlying map. The JavaScript code is the same as above, changing the argument name as required. All layers display in Acrobat when I click to show the layers in the Layers window. 

Thanks, Jeff

[Thom Parker]

In both of the files, all OCG layers are duplicated. For example in the first document  with two layers, there are two OCGs named "Layer 1" and two OCGs named "Layer2". The first instance (in the listing order) of both are not connected to anything.  So that is why setting the state doesn't do anything. 

To see this more clearly, run this code in the console window:

setOCGOrder(getOCGs())

[jeff_biss]

Thom,

Happy Tuesday! That is weird because I added only a single instance of a layer. Where did these come from? Illustrator? Acrobat? So I experimented.

1. I see that there is a "Create Acrobat Layers from Top-Level Layers" setting in the Save As window. I unchecked it and saved it.

2. I opened it in Acrobat, no layers. I closed it.

3. I opened it in Illustrator.

4. I Saved As but with Create Acrobat Layers from Top-Level Layers checked.

5. I opened in Acrobat, layers.

6. I ran the script that you provided. The layers were ordered with no duplicates.

7. I ran my script and the layer was displayed.

I searched for "duplicate" and "layers" in "Acrobat" and nothing about duplicate layers was in the results.

What is up with layers?

What does Illustrator do?

Does it add duplicate layers? I don't see them in the layers panel.

Why would saving without Acrobat layers and then with prevent those duplicate layers?

Is this a bug in Illustrator? Should I report it? Is it known?

Thanks, Jeff

[jeff_biss]

Thom, one more thing. I brought the layers issue up with my girlfriend, she's a tech writer who uses Adobe SW, and she brought up a warning that I forgot about. When we would insert a PDF as graphic in FrameMaker or InDesign, we would get a "Layers don't match" warning. That must be due to what is happening here, right?

Thanks, jeff

[Thom Parker · Accepted solution]

Congrats on finding a workaround!! Seems like the conversion from Illustrator to PDF is the issue, which is probably an Acrobat issue. There is no good reason for creating duplicate layers like that, so yeah, I think it's a bug.  The only thing you can do is report it.  

https://www.adobe.com/products/wishform.html

[jeff_biss]

Thom,

I'll report it, at least I can copy and paste this thread for their information. Thanks for all of your help, I NEVER would have considered that the failure could be multiple threads and thus even considered that Save As cycle nor would I have found that script that showed the duplicates.

Thanks, Jeff