HTML widget works well on the web but not so well on the iPad

Hi, I have what I think may be a problem with an iBooks Author widget, created with Hype.

While it works perfectly when tested in the web browser, and the intended movements are smooth and precise, when used in both Hype Reflect and an exported iBook, the movements are slower, and occur with a delay, thus altering the intended purpose of its operation. So it doesn't work as accurately as it does in the application itself.

Is there a technical explanation for this difference in behavior, and a way to resolve it?

Thank you very much!

Pedro.

That's really the main problem. You're building your foundation on sand. Unfortunately, iBooks Author is dead tech. Apple isn't supporting it anymore. They took it off the app store. The original version of A Book About Hype was an iBook. I wanted to create something interactive, to showcase what could be built with Hype. But even under ideal conditions, it meant only targeting Apple devices. Many other ePub readers don't support Apple's iBooks widgets. Even on iPad or iPhone, if you flipped through the pages too quickly, the book could crash.

For the next edition of the book, I created a printed book. I went back to paper... PAPER! It's because Apple just abandoned this tech.

But, even if you were to convert your Hype project to an app, it looks like this might still be an issue. You mentioned it's slow in Hype Reflect too. That's a problem? How do you fix it?

I don't know. I haven't seen your project. But if I was working on a project with this problem, I'd probably use the developer tools to determine what's causing the project to slow down.

This is why I like Safari. It has developer tools that work with iOS devices. First, you'll need the developer tools turned on. (That's a setting in Safari Preferences.) Then, launch your Hype project in a web browser. You can accomplish this by putting it on your own web server or pressing the Safari icon when using Hype reflect.

Once it's running in the browser on the iOS device, launch the dev tools from Mac Safari.

From there, you can use the tools to get a closer look at what's going on.

Are there any errors in the console? Is there too much memory being used? What exactly is slowing down... and when does that slowdown occur. The first step in solving this problem is identifying exactly what's wrong. The developer tools might help you.

1 Like

This is not something we've heard of, generally speaking. It may be dependent on your content.

One item, which can sometimes be a silver bullet to try, is unchecking "Use WebKit graphics acceleration" in the Document Inspector. This changes the rendering flow and can sometimes make a difference.

You're welcome to post a zip of your .hype document, .iba file, instructions on which specific animations reproduce the problems (a video showing may also help tremendously).

But like @Photics said, iBooks Author is unfortunately abandoned by Apple so there might not be too much that can be done.

Thank you very much for your comments.

It is true that iBooks Author should not be the application to use, but I have not found a similar one yet (in my opinion, PubCoder is a bit immature in some of its features, especially those I need to use the most). In addition the project is oriented to the Apple market, and more specifically to iPad users.

Attached now a zip file Movement.zip with the content of the project. Its operation is to be able to drag either the circle or the line. If the circle is moved, the line must remain in its initial position; and if the line is moved, the circle must return to its initial position. All this in a fast and smooth way, as it does in its web version. But neither in iPad as an iBook, nor in Hype Reflect, does it do it in the same way.

I have tried to uncheck the "Use Webkit graphics acceleration" option, but it does not improve its performance.

Thank you very much for your comments.

You are right that iBooks Author should not be the application to use (I already read your warning in your book), but I have not found a similar one yet. Also the project is oriented to the Apple market, and more specifically to iPad users. I may have to recycle myself to another application that allows me to generate educational resources with the same quality as iBooks did.

I have followed your indications about the developer options in Safari, but I have not found anything strange.

We will keep investigating.

Well, personally, I'm thinking of going the app route. It's not definite, as I still have a lot of work to do with Widgets, but I'm thinking of creating general web development training content, with a section on Hype. Instead of exporting interactive Hype content as a widget, the whole project can be converted to a WKWebView app instead. It's a very similar idea, but the experience could be quite different. The latter having the potential to be far more impressive.

Meanwhile...

You have a lot of actions duplicating each other. I don't know if that's your problem, but that's something that looks suspicious to me. Mouse Down, Mouse Over, Mouse Click... they're all doing the same thing. Those actions are then combined with a drag event.

  • Do you really need the Mouse Over event, especially since that might not do anything useful on mobile?

  • Do you really need a Mouse Click/Tap and Mouse Down / Touch Start event? Usually, it's one or the other.

I'm not sure what you're trying to build here, so I'll use my "Abacus" template as a comparison...

https://photics.com/free-template-tuesday-19-tumult-hype-abacus/

I was having trouble getting the thing to work right. It seemed wrong. The speed was off. That's because a click requires a full touch-down and then touch-up. Such actions are better reserved for buttons, where the user has to make a decision... down-then-up... it's more intentional.

I switched the Abacus to Mouse Down, rather than Mouse Click, and it felt natural. Perhaps this is the problem you're having. Because, based on what I saw in the template, there's nothing crazy going on. There are no resources — no images, no JavaScript — so that eliminates a lot of potential problems.

Hmm... I gave it a try both within an iBook via iBooks Author and in Hype Reflect on my iPad Pro. There didn't seem to be any specific issues.

Could you let me know what hardware you're testing with and what version of iOS?

Does the same thing happen in Mobile Safari? Your document is fairly simple so I'm surprised there'd be any performance problems, especially through Hype Reflect. Maybe you could also try restarting -- perhaps there's some background running process eating at your CPU.

Hello!!!

Thank you very much for your advice, and above all for the time you have dedicated to solving my question. The idea is to offer a widget with which to practice the differences between demand movements and demand shifts, in an Economics 101 course.

Yes, with the modifications that you propose, and deleting an object that didn't really provide much, it works smoother and without interruptions. I was wrong to select so many stock options.

I am very grateful.

Pedro.

1 Like

Hello:

The speed and smoothness problems have disappeared modifying some of the marked Actions, and deleting an object that did not provide relevant information (Punto 0).

It now works equally well in Safari and on the iPad (Pro 10.5 , with OS 14.3), through iBooks Author and Hype Reflect.

Many thanks,

Pedro.

1 Like

Okay, great -- I guess case closed then!