Wrapping – Export Hype HTML to an App 🎁

Hey Michael,
I've just updated the wrapping app. It seems that the sound doesn't work. After scratching my head twice I found out that one needs to add:
wc.setValue( true , forKey: "_allowUniversalAccessFromFileURLs")
below: if #available(OSX ) .
Could you fix that in an update. It's not so nice to need this adding every time.
regards Djon

I'm not comfortable with that change. While not perfect, sounds work for me without that setting. As an example, "Circles with Grandma" has sounds. Maybe it's something else? Are you doing something special with your sounds? Are you using Howler.js? Are you loading them remotely?

I do think there is an issue with playing sounds. It was a problem when creating the app version of "A Book About Hype". The coconut template would have a problem with audio because of repeating sounds.

Also, once I use Wrapping to setup an Xcode project, I don't use Wrapping to build it again. I usually just update the HTML folder.

If you find yourself making a lot of customizations, you might like the new Hype Extension version of Wrapping... Wrapping – Photics.com ...as that can be customized. You can even add your Company Name and Bundle Prefix to speed things up...

Is there a way to get the app to open external links?
It's just for a prototype demo. I'm not submitting to the app store. No matter what I do I can't get an external link within the hype document to open. Not sure if it's possible.

Are you trying to embed an external page or just click a link?

I had a long discussion with "The Eskimo" over at Apple about this.

I don't have Xcode installed right now (I delete the old version when there's a new version.) so this is untested code, but I think this is what you're looking for…

func webView(_ webView: WKWebView,
    createWebViewWith configuration: WKWebViewConfiguration,
    for navigationAction: WKNavigationAction,
    windowFeatures: WKWindowFeatures) -> WKWebView? {
        if navigationAction.targetFrame == nil, let url = navigationAction.request.url {
            NSWorkspace.shared.open(url)
        }
        return nil
    }

Basically, WKWebView wouldn't open external links or download PDF / Zips included with the Hype project. So, there's some extra code needed to make that work. I suppose I could add that to main app, but I'm not sure if there's demand for that. I don't want to mess with working code if everyone else is happy.

Has anyone else here had a problem with external links? :thinking:

I'm downloading Xcode now, so I can check on this thread again tomorrow. HA HA! :smile:

Thanks for the replay.

Unfortunately, I get an error "Cannot find 'NSWorkspace' in scope". I'd like to just open a link but no code I've found seems to work. I'm not a developer, however, creating this with video editing was very choppy. Hopefully, I can think of something.

Oh, are you using iPhone or Mac?

Also, where did you add the code? In the ViewController.swift file, there should be a line that looks like this…

class ViewController: NSViewController, WKUIDelegate, WKNavigationDelegate {

The code goes in there, just before… override func viewDidLoad() {

Xcode downloaded a lot faster today. So I got it setup and I tested the code. It seems to work as expected.

I'm using a mac. To create an iPhone build. I think may have somehow gotten an old version. This is what I have:

// ViewController.swift
// hooper-test-unit was created by Lesley Piercefield – Copyright © 2022
// The Xcode project was auto generated by the "Wrapping" app
// Wrapping – Photics.com

import UIKit
import WebKit

class ViewController: UIViewController, UIScrollViewDelegate, WKUIDelegate {

var wv: WKWebView!

override func loadView() {
    let wc = WKWebViewConfiguration()
    wc.allowsInlineMediaPlayback = true
    wc.mediaTypesRequiringUserActionForPlayback = []
    wv = WKWebView(frame: .zero, configuration: wc)
    wv.uiDelegate = self
    wv.scrollView.bounces = false
    wv.scrollView.isScrollEnabled = false
    wv.scrollView.delegate = self
    wv.isOpaque = false
    wv.isHidden = false
    view = wv
}

func viewForZooming(in scrollView: UIScrollView) -> UIView? {
    return nil
}

var webView = WKWebView()

override func viewDidLoad() {
    super.viewDidLoad()
    let url = Bundle.main.url(forResource: "/html/index", withExtension: "html")
    let request = URLRequest(url: url!)
    wv.load(request)
}

}

Post related to code to open urls which may help you/people.

Which version are you using? (Are you using the App or the Script?) I haven't updated it in a while though. Adding support for external links seems like a nice feature to add if I do update it.

Anyway, here's a link to what "The Eskimo" said…

https://developer.apple.com/forums/thread/68427?answerId=199512022#199512022

…that's the iPhone version of the code. It uses "UIApplication" instead of "NSWorkspace".

Thanks so much, that worked great. I was wondering why does it hide the status bar? I have about 40 pixels of a black bar at the top. The status bar is there on the load screen but once everything loads there is just a black bar there. I can fix it with video editing but I'm wondering if it's something I can change in the app in the future. I have version 1.2.

Are you using an iPhone with a notch? If so, then your HTML needs to be updated to expand into that area.

cover-notches

Do you have the "Cover notches" option checked?

You could also uncheck the option to hide the status bar in Xcode, but I suspect that's not the way you want to go.

I am using an iPhone with a notch. There aren't many iPhones left without the notch. The external links open without the black bar so it's pretty obvious. The option to cover the notch isn't selected. I'm not really sure why the status bar is being hidden. I can't think of a reason to hide it. For now, I'll just edit one in so that the app looks real in the demo video.

What happens when you check the box?

Screenshot is the default setting. I'm thinking that checking that option might fix the problem. It's not always so easy though. The notch can make it difficult to setup the layout.

I was going to test a Wrapping bundle to see if it goes behind the safe areas or not which I think it does not. But it seems its broken on my Mac. Big Sur and Wrapping 1.2 (12)

It looks like it is not putting the html index in and not placing the HTML folder in the right place.
Not used it that much as I use the template but I would expect it to still work ?.

This is what I get?


The code is expecting

let url = Bundle.main.url(forResource: "/html/index", withExtension: "html")

You're getting an error? Are you using the app or the Hype script?

Do you have an index.html file? Hype doesn't automatically create one. (The “Wrapping” export script does create an index.html file, so it seems like you're using the app without an index.html file. Is that right?)

Also, what do you mean by safe areas? :thinking:

I have heard you mention that, never found it?

I do a normal Hype export, using what ever name the project is. Hype creates the normal html file.
But I assume Wrapping would create its own, but now it does not create an index.html file and appears to put the html folder in the wrong place.

As I said I do not normally use wrapping but wanted to help out.

Safe areas :

Currently it's a perk for purchasing Wrapping through Etsy… This item is unavailable - Etsy

What's wrong about it? :thinking:

Wrapping the app expects an index.html file. That just how it works, as it's not limited to Hype projects. I suppose I could add automation to detect if an index.html file exists. If not, then prompt the user to choose one from the list.

The export script version of Wrapping automatically renames the main html file in a Hype project to index.html.

So you're supposed to manually drop the index file into the created html folder ?
Shows how long ago I used it, I don remember having to do that.


Ah, Just figured out what I must have been doing wrong ( probably being tired and not paying attention) and what I should be doing is

create an enclosing folder and choose that instead with the hype export inside,


Ok that works.

So with Wrapping I get :

and I assume what is wanted is :smiley:

is that right.

Do you have the new version of A Book About Hype? There's a section that talks about creating a script to export a Hype project with an index.html file. (There's advanced export, but I don't like the way Hype manages that, so I created the script.) That's what I use when I want to update the HTML without changing the whole Xcode project.

If you want the clock, you just change the related setting in Xcode. I thought about creating a prompt for that, but it's just so easy to change in Xcode. I figured going full screen was the most common anyway. However, the HTML needs to be updated to go into the notch area. Hype addresses this with the “cover notches” setting.

Widgets, Circles with Grandma, and Cabling all have the background going into the notch area. No clock though. I didn't like the look of that.

I have my own export scripts. and can write them already.

I jus assumed when you where talking about the export script, it built an Xcode project with the Hype Project and was not just doing an export of the hype project with an index.html.

I know how to get the status bar and full screen. I use code to do it as the setting do not always comply.

I am good. I was just trying to understand the issue and help but ran into the above.