Presentation - What is best route ? HTML / OAM / iBook

I'm working on a presentation in Hype.
A bit like a keynote presentation
but I need JS for some interactions and calculations.

If I make a local HTML file is there a way of only showing the pages
without a URL bar at the top.
Or is there another way like the OAM or widget.
The question herewith is how to read/display those files?

At first I was thinking… nah… the Hype Reflect app can go full screen…

Oh, it still has a black circle at the bottom right.

Then I was like… nah… Safari can go full screen…

Nope, it's like you say, the URL bar is still there.

So, if it was me making the presentation, I'd probably turn the project into an app with Xcode.

@MarkHunte has a project on GitHub could help.

Also, I made "Wrapping", which turns a Hype project into an app by "wrapping" it with a WKWebView.

There's a video here…

1 Like

Great question... I had this a while back where I had made an explainer and wanted to be able to make it so the recipient didn't have to open it in a browser.

XCode would have been great except I couldn't guarantee the target would be a Mac or iOS. I ended up looking at a bunch of things (like electron) for trying to make a portable double-click type app.

I'd love to say I came up with a suitable solution. I didn't. The result was pretty iffy. So if anyone does have an answer to this one, it would be fantastic.

Hi MPD,
In my quest I came across https://revealjs.com.
It looks like this could work. It has a "press F function" with makes the presentation fullscreen - exactly what I need.
However I tried to replace the index.html with my index.html but it did not work - it just opened the local file but without the "press F function".
But I keep trying.

Pure JavaScript can get you fullscreen…

…but I'm still not sure that's what you want. I did a quick test with…

document.getElementById(hypeDocument.documentId()).webkitRequestFullscreen();

That code was triggered when a button was pressed. And while it didn't work in Hype Reflect, previewing on Mobile Safari did trigger fullscreen. However…

It adds a close button to the top left. I even looked at the source code to see if I could hide that button, but it seems to be at a level above the web document.

How was it iffy exactly? Shouldn't the app route just work? I'm the one that makes Wrapping so it's expected that I say this, but it works awesome for me. Unfortunately, Wrapping doesn't support Android, but wouldn't just making a WebView manually work?

I can turn a Hype project into an Android App... Wrapping – Export Hype HTML to an App 🎁 - #60 by Photics …that's not really a problem. The problem I've been having is having Wrapping automating the process. :blush:

Thanks for the reply. By iffy I was meaning that going down the path of using things like electron it gets pretty heavy weight pretty quickly (and tends to be a resource hog).

I've bought Wrapping, and it looks promising, but my I don't have any control over the target users machine... so it may not be Mac. And some of the things that need installs might get chucked out by their IT teams. I was more hoping for a self contained file that you double click, it runs, and at the end doesn't leave any artifacts.

Nice! :slightly_smiling_face:

Progressive Web Apps might be an alternative, but Apple is a little slow to adopt that technology.

It's a little tricky with Hype, but I was thinking about single HTML files. CSS & JavaScript can be added in a single HTML file. Also, images can be embedded as Base64. However, I suspect IT departments might be more hostile towards that, as an HTML file by itself might not run properly. That's why Hype spins up a local web server when previewing a project.

1 Like

If you're presenting on your machine, Google Chrome Canary has a new setting called 'Immersive Full Screen' which you can enable by visiting:

about:flags

And then typing 'Immersive' at the top:

This gives you a true fullscreen on a Mac with no address bar.

For iOS, check this list: Displaying a Tumult Hype document in a Kiosk or as an app

1 Like