iBooks HTML5 widget loading problem when using my own Default.png

Exporting & Previewing iBooks
1

I have made a Hype 3.5 Pro document ‘ISC33.hype’ and have exported it
as an HTML5 iBook Widget. The Widget is set in iBooks author to run in full screen only. Link because zip would not load

The Widget works perfectly well, however when I replace the generated Default.png with my own Default.png (which has different proportions to the scenes in the document - see link) I run into an issue.

When the widget is triggered in iBooks on iPad there is a pause and then a distorted png is displayed full screen before the maps in the widget load.

Once loaded the widget does as expected. Any help greatly appreciated - this is my first venture into Hype and HTML
Thanks Chris

3

The dimensions that the Default.png loads is equal to the dimensions of the Hype document.

If you peer into Index.html within the widget, you’ll see a CSS style for the background-image + background-size (this code is below). If you remove that background-image, your widget will switch straight to your HTML content and not show Default.png during HTML loading.

Alternatively, you could add white space to the Default@2x.png so it matches the iPad dimensions of your document. This would ensure that 100% (width) and 100% (height) doesn’t get warped.

For your Document, I recommend setting this to be the size of the iPad – you’re a bit larger than the device: Set it as 1024x768 for best compatibility.

<!DOCTYPE html>
<html>
  <head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta http-equiv="X-UA-Compatible" content="chrome=1,IE=edge" />
	<title>ISC33</title>
	<style>
		html {
			height:100%;
		}
		body {
			background-color:#FFFFFF;
			margin:0;
			height:100%;
		}
	</style>
	<style>
		#isc33_hype_container {
			background-image:url(Default@2x.png);
			background-size: 100% 100%;
		}
	</style>

	<script type="text/javascript" src="AppleClasses/AppleWidget.js"></script>
	<script type="text/javascript" charset="utf-8">
		function widgetIsReady(hypeDocument, element, event) {
			if(window.HYPE_loadedWidget == null) {
				window.widget.notifyContentIsReady();
				window.HYPE_loadedWidget = true;
				document.getElementById("isc33_hype_container").style["background-image"] = "none";
			}
			return true;
		}

		if("HYPE_eventListeners" in window === false) {
			window.HYPE_eventListeners = Array();
		}
		window.HYPE_eventListeners.push({"type":"HypeSceneLoad", "callback":widgetIsReady});
	</script>
	<!-- copy these lines to your document head: -->

	<meta name="viewport" content="user-scalable=yes, width=1366" />

	<!-- end copy -->
  </head>
  <body>
	<!-- copy these lines to your document: -->

	<div id="isc33_hype_container" style="margin:auto;position:relative;width:1366px;height:1024px;overflow:hidden;" aria-live="polite">
		<script type="text/javascript" charset="utf-8" src="ISC33.wdgt.hyperesources/isc33_hype_generated_script.js?67893"></script>
	</div>

	<!-- end copy -->
  </body>
</html>
4

I just realized a smarter alternative would be to set the first scene to contain that image you’d like as your thumbnail, and then have that scene also ‘on scene load’ switch to the next scene (containing the map). The position of the playhead on the first scene dictates the contents of Default.png, so this will ensure that Hype does that annoying thumbnail generation work for you. Here’s how that looks:

CloudApp

And when you export, it creates this widget: https://cl.ly/2z1S3w402Q32

5

Thank you, The scene load approach will work well for some other pieces we are doing for an iBook.
We have used the larger size imaged to give a high quality result on the large iPad Pro, and iBooks seems to do a good job of displaying on the other iPads (must try a iPad Mini). Our widget will only be viewed at full screen.
Chris

1 Like