PDF to Load - On Scene Load

1

I Navigate from One Scene to a New Scene via a Button. The button represents a PDF Document that I want to Visitor to See as soon as the Scene Loads. The code I am using within an HTML Widget, gets close, but I have to Click the Link to get it to Actually Load. I want it to Load as soon as the Scene Loads and No Extra Button to push - that looks clunky... I know little about Javascript or HTML, so your guidance is much appreciated. I did a short video, showing exactly what is happening

2

To give a basic overview on how Hype handles PDFs:

  • You could drag a PDF to the scene, and it will be treated like an image
  • By default, the PDF added into the Resource Library will have "Automatically optimize when exporting" turned on which will convert the PDF to a more websafe image formate like a PNG
  • If you uncheck "Automatically optimize when exporting" then most browsers will still display the PDF correctly, but more akin to an image without interactivity or multi-page support. (sidenote: I don't recommend using PDF as a default image format, as rendering can be very slow, instead make sure your document benefits from being a PDF).

Your instinct to use a HTML Widget is generally the right direction to go. It is hard to say exactly what is happening without seeing your document, but I suspect these points will shed light:

  • HTML Widgets have two modes for their content, "Embedded HTML" where you can type in arbitrary HTML and it puts it into an iframe, or a "Specified URL" where you can point the iframe's src to a specific target. This is configured by selecting the HTML Widget and modifying it in the Element Inspector.
  • You probably want the Specified URL mode. If you already have the PDF on a server, you can just put in that http/https URL there and will be good to go.
  • If the PDF is included in your resources library, then you can point to instead using the magic ${resourcesFolderName} variable that gets substituted at export time with a correct relative URL. So if your PDF was named myDocument.pdf then you'd enter ${resourcesFolderName}/myDocument.pdf into the specified URL field.
  • As mentioned above, you'll also need to make sure the "Automatically optimize when exporting" box is unchecked in the Resources Library, otherwise Hype will attempt to turn the PDF into a PNG which is what you do not want.

Here's a screenshot of the setup that will result in a multi-page PDF displaying correctly:

Screen Shot 2021-12-27 at 12.46.35 PM
Screen Shot 2021-12-27 at 12.46.35 PM3014×1938 1.2 MB

I hope that helps!

3

Thank you Jonathan! You helped me get closer, but I still must be missing something. If you could be so kind as to watch this quick video and hopefully tell me where I am missing the boat? Thank you. - Loom | Free Screen & Video Recording Software

4

Using Jonathans suggestion:

Here is an example:
PDF_Example.hype.zip (252,1 KB)

You can edit the HTML by clicking the small pencil icon:

CleanShot 2021-12-28 at 16.23.54@2x
CleanShot 2021-12-28 at 16.23.54@2x1350×1360 181 KB

  1. Double click a rectangle
  2. Click the pen icon
  3. edit the inner HTML

I used the following:

<iframe src="${resourcesFolderName}/myDocument.pdf" style="width:100%;height:100%;border:0;" frameborder="0"></iframe>

… with myDocument.pdf being the name of my PDF document that is in the resource library. You could also put a link to a online PDF here, but that would require an online connection and removing the ${resourcesFolderName}/ part.

5

Here is the approach using a HTML Widget:
PDF_Example_Widget.hype.zip (259,7 KB)

In that case you would enter the URL here:

CleanShot 2021-12-28 at 16.31.21@2x
CleanShot 2021-12-28 at 16.31.21@2x1892×988 185 KB

  1. Add a HTML-Widget to the stage and click on it
  2. Edit the URL as suggested by Jonathan

I usually use the other method with inner HTML because I like to have control over the iFrame HTML syntax and options. This approach is more on the graphical interface side.

1 Like
6

Thank you for your help! I am closer but the Preview will still not load or work. I created a short video to show - your help is greatly appreciated. Loom | Free Screen & Video Recording Software

7

I am having the same issue. Only thing I changed was to update to macOS Monterey, recently. Seems like a bug on the internal preview server?! @jonathan … got any suggestions?

8

Thanks for reporting this issue; I've been able to reproduce it.

Best I can tell is that Hype's WebView is going into an erroneous computational overdrive when trying to render the PDF. You can see that Hype eats up quite a lot of CPU when in this state. This holds up the embedded preview server from completing its request. There are actually ways in which this allows regaining some control and doesn't fully hang the app though; it is a little bit weird!

This does appear to be a WebKit regression in Monterey. I'll be filing a bug.

I also found while the overall CPU hogging still takes effect, it seems to me like the previews tend to work if you only are showing a single PDF in Hype. But that's still not much of a workaround.

Probably the best thing would be to add an HTML Widget, but do not set its specified URL. Instead give it a unique element ID, and then on scene load manually have some code to set the src of the PDF. Something like:

hypeDocument.getElementById("myIframe").getElementsByTagName("iframe")[0].src = "${resourcesFolderName}/ENERGY STAR.pdf";
1 Like