Link to embedded PDFs on an iPad

Hello there, I hope someone can help.
We are creating a project to be used on an iPad where we will display all of our PDFs and Presentations. Each Hype screen will have a series of thumbnails that when selected should open the relevant PDF or presentation outside of the Hype project but locally on the iPad.

I assume we simply drag the PDF into Hype which creates a thumbnail and also adds the PDF resource in the resources library. But what are the next steps? What would be best way to link to the resource so we can show the multipage PDF or presentation?

Thanks guys

This page might help you think of options: Displaying PDFs within your Tumult Hype Documents

Thanks Daniel, I did look a that page before I posted, but it seems to be focused on web uploading. Is there not a way to add the files to the iPad/Hype file so that it can be accessed locally? We maybe somewhere sowing the app where we don't have web access so ideally everything would be stored on the iPad in some way.

Since web browsers don't support displaying PDFs within themselves and require an interpreter (like PDF.js) it takes a little extra effort to get this working. For PDF.js, which seems like the best way to show a PDF on a webpage, it looks like it is possible to use it offline:

The path you would use is ${resourcesFolderName}/filename.pdf or you may need to hardcode it to something like index.hyperesources/filename.pdf if placed inside an HTML widget.

So once you have that working, you will likely want to setup a Kiosk situation where the iPad can download all files locally and display them without internet access. Here's a few tools for that: Displaying a Tumult Hype document in a Kiosk or as an app

If the PDFs are just a few pages, you may save yourself a lot of trouble and either export them to HTML or export them to a sequence of images that you create a slideshow with.

1 Like

Thanks Daniel, so is it not possible to set a clickable link to a thumbnail that opens a PDF document in Adobe (not online or offline)?

Did you try option 2 or 3 in the downloadable 'pdf-example' file on this page? Displaying PDFs within your Tumult Hype Documents Both options open in a new tab in Safari -- but if you want this all to run 'locally' then you would need to add some sort of Kiosk tool. Embedding multi-page pdfs in Hype or HTMK = tricky, but loading a Hype document which contains PDF files in a Kiosk shouldn't be too hard.

I had some success by replacing the PDF for my own PDF in the 'pdf-example' file and changing the code in the Widget but when I try to do the same to my own file I cant get it to work. For example the 'Automatically Optimize When Exporting' box is greyed out when I select the PDFs in my Hype file?

Hmm -- are you sure you're just selecting the PDFs? In my tests this works as expected:

Yes it's odd. I drag the PDF into hype. Reveal PDF in the Resource folder, so it is selected and it is still greyed out.

When I create a new doc and drag the PDF in the 'Automatically Optimize When Exporting' box is NOT greyed out. And only the PDF appears. In my original file it kind of puts it into a group and creates a Retina version of it. Is that the issue and how to stop it from doing that?

Can you send both files so I can see what might be going on? That's odd.... (Feel free to send me a private message if you'd prefer)

Thanks again Daniel,

I think I have sorted that issue by re importing the PDF into Hype.

I have set on Mouse Click to 'Go to URL' with the link ${resourcesFolderName}/PDF Name.pdf

This opens the PDF in the web browser, without using PDF.js

I have set the PDF to open 'Two-Up (Cover Page)' so that the PDF opens as spreads but this isn't respected when the PDF opens in the browser. Is there anything I can do to make this work?

HI Daniel,

I've downloaded and installed Kiosk Pro to be able to store PDFs on the iPad for use offline with the app we've built with Hype. Kiosk Pro works great with Hype but I'm having trouble solving the step of linking to the PDFs themselves within Hype.

I've copied the PDF files to the iPad. Looking at the directory of local files on the Kiosk app, the relative path of the PDFs is simply the name of the PDF eg car.pdf.

How do I point Hype to Kiosk Pro's local file directory to pick up the PDF? For example, I want to set an on click/tap action on a thumbnail to load the PDF but I can only enter a URL. What should I use for the URL here?

The URL for the Go to URL… action can be a relative path. So if you know the path relative to the exported .html document, you can use that.

We are now using the Kiosk Pro App which is a great success. We are able to open PDFs that are loaded locally into the App.

Is there a way/some code that we can add in Hype to direct the user, when pressing a thumbnail link, to open Presentations that have been loaded locally on the Kiosk App, into PowerPoint on the iPad so that we can show animated presentations?

I would recommend asking the Kiosk Pro folks about this. There are application-specific security restrictions iOS has in place to prevent one app from just reading a file from another app, so they would probably need to do things to specifically enable this.

Depending on your use case, it might be easier to do an HTML export of the PowerPoint and present it as a web page.

I think they have enabled the ability to open presentations but unfortunately the Kiosk Pro App doesn't support animation within PowerPoint. So I'm wondering if there is code to jump out of the App, into PowerPoint?

Likely not given iOS security constraints; it would be up to either Kiosk Pro or PowerPoint to be able to implement this.

From a web browser, you cannot direct an application to open a file unless it specifically has a URL handler, something like powerpoint://file/path.ppt. I don't see that PowerPoint has this. If it had this, then you could open something that PowerPoint has access to, but it could not open a file that was included in Kiosk Pro. This is because the iOS sandboxing does not allow one application to open another application's documents.

There are of course ways applications can talk to each other, but this would require Kiosk Pro making some sort of browser-level API you have access to, and then running the code that would transfer the document to PowerPoint. I don't see that they have anything like this, but it would be up to them to implement if you need it.

1 Like

Thanks Jonathan. I approached KioskPro and they agreed with you.

If it's useful to anyone, they said:

*As context on our part, Kiosk Pro is based on Apple's WKWebView and UIWebView browser components, which can be selected in the app's Browser Engine setting. *

*Apple requires all third-party apps accessing web-based content to use one of these browser components, which are a part of the iOS/iPadOS operating system and are updated with the operating system. As this is a requirement, these components are used even by major browsers that have their own engines on other platforms (like Chrome for iOS or Firefox). *

We use these underlying browser components to make web requests, render content, and execute JavaScript. These browser components do have limited support for PowerPoint files, but as noted in our documentation, treat them as documents and don't incorporate support for animation. As these decisions are essentially baked into those browser components, they are not something we can change or address directly.

1 Like