Loading PDFs async

[alasa]

Hi Hopkin,

Is there a way to load PDFs async? I have multiple PDFs in a single scene and I tried with the PDF component but it loads all the files from the beginning.

I have also tried with iframes and Text Box layer with the following coding:

<script>
function loadPDFIframe() {
var iframe = document.createElement('iframe');
iframe.loading = 'lazy';
iframe.width = '100%';
iframe.height = '100%';
iframe.src = 'media/MyDocument.pdf#page=1';
iframe.frameBorder = '0';

document.getElementById('pdfContainer').appendChild(iframe);
}

// Adding an event listener to the button to trigger the iframe load
document.getElementById('btn_document_RCP').addEventListener('click', loadPDFIframe);
</script>

But not sure if I'm doing it correctly.
Can you please advice?

Thank you
alasa

[Hopki]

Hi Alasa,
The Pano2VR skins do this already with the PDF point hotspots.
So you use the one PDF element and the point hotspot uses a Mouse Click, Set Value action using the Point Hotspots URL which is the path to the PDF file to the PDF element.
If you want to use a button rather than point hotspots then again you can use a Set Value action.

For simplicity, you would drop all your PDFs in a folder, for example, "pdf".
In this example let's say you have a PDF called, brochure.pdf.
You have set up a Boolean variable that when true shows the PDF element using its visible logic block, vis_pdf.

You would add the folder to Assets which is found under the advanced tab of the Web Output properties.

The button would have the action.
Mouse Click, Set Value, assets/pdf/brochure.pdf.
Mouse Click, Set Variable Value, vis_pdf, true or Not(¬) to toggle it.

When clicking, the path is set to the PDF element to display the PDF and the variable value is set to true which will then show the PDF element.
When the variable is set to false, this by default will "unload" the PDF ready for the next one.

So the PDF is only loaded when it is required.
Regards,

[alasa]

Thank you Hopki,

Not sure about the action:
Mouse Click, Set Value, assets/pdf/brochure.pdf.

I have attached here an example following the instructions.
Can you please clarify how it should be?
Thank you

[Hopki]

You need a PDF element to display the PDF.
The buttons target needs to be a PDF element to "load" the PDF to the PDF element.
Please see updated project which now has a PDF element and a close button.

[alasa]

Thank you Hopki, it works.

Is there a way to make a text box dynamic, taking the ID, the Aria Label, or the Note's text of the PDF component? Like the image attached.

[alasa]

Never mind, I solved it. Just using variables in the Text field, right?

[alasa]

Hopki,

Would it be possible to make dynamic the PDF component? Instead of duplicating the PDF, establish each PDF's path with variables?

I see that there is a field to place the path, but your previous solution to load the PDF async, was including the PDF path as an action in the button

[Hopki]

Hi,
To understand your project, you have a popup that has four PDF elements and a title text box.
Different buttons will change the content of each PDF element and the title.
The button could have five actions, so four actions to set the path to search PDF elements, one to set the value to the text box for the title and one that would show the popup.

Another thing you can do if you only want to change the content when you change nodes is use the User Data Custom Properties, if they are using text variables then each node can have its own PDF file paths and title.
Of course, this is if you only want to change the content depending on the node.

Regards,

[alasa]

Hi Hopki,

It is correct as you described. I'm trying to archive a dynamic header and PDF, that varies depending on the button, which triggers a specific PDF.

How would be the User Data Custom Properties method, can you send an example?

Thank you in advance

[Hopki]

Hi alasa,
Please see the attached project.
The PDF files are added as assets as found under the Advanced tab of the web output properties.
The PDFs will be placed in an assets folder in the output.
Then a User Data a custom property is added, this creates a variable in the skin, "load_pdf" which is a text variable.
You enter the PDF file name in each nodes User Data custom property, so for node1 it has PDF1.pdf.

1.png (17.43 KiB) Viewed 192 times

And for node2, its PDF2.pdf.

Then the button in the skin sets the value, "load_pdf" with the full path to the PDF element, assets/$(*load_pdf).
There is also a second variable, vis_pdf that is used to show and hide the screen tint rectangle and PDF element.
The Screen tint rectangle has the action to change the variable back to false.
Regards,