Known Participant

Answered

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

Forum|Forum|1 year ago
January 16, 2025
2 replies
2683 views

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

Correct answer Thom Parker

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

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

Thom Parker

Inspiring

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".

Thom Parker - Software Developer at PDFScriptingUse the Acrobat JavaScript Reference early and often

J

jeff_bissAuthor

Known Participant

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.

J

jeff_bissAuthor

Known Participant

Watch this video on the Console Window:

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

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.

try67

Braniac

-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.

J

jeff_bissAuthor

Known Participant

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.

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded