Embedding Hype document in Ionic Framework


Hey Guys,

i know this is a bit esoteric and not really Hype related, but i hope that someone could help use here. We are building a kind of a “Magazine Viewer” with Ionic Framework, AngularJS and Cordova. Basically we are using the same functionality like the Baker Framework:

We have an Ionic based Carousel where we are preloading the contents before and after the actual page. A page is in this context a Hype document, injected in a DIV inside the Ionic Carousel. The Page is showing up fine on the first load, but after swiping the carousel (unloading the Hype document) we get an infinite amount of errors. hard to describe, so i am posting a screenshot.

Dear Admins: If the screenshot is not sufficient, i can of course give you a live access over PM…

Help is highly appreciated!



Hype, Phonegap and Ionic Deploy?

Might be best to share your document over email (I’ve PMd you).

(drewbullen) #3

I would be very interested to know whether this issue was resolved or explained???


@drewbullen – the proof of concept project we are using here is unfortunately pretty complex. We are using also some other HTML5 contents made with other packages, so not only Hype. Anyhow i was able to track down the problem a bit. The Hype scene that is causing the problem is a demo scene from the Hype showcase gallery (Lake Nakuru Responsive Page). The page is using an animated symbol (a little pulsing dot). When i throw out this symbol from the scene the problems are gone. Apparently this symbol is somehow persistent, even when we load/unload the Hype scene in the Ionic carousel… We will give a try again this week and see if we can do a better solution there. I am thinking about detecting some custom Ionic events and using something similar in Hype like described in this Baker related article here: Embedding within the Baker Framework: Ebooks for the iPad

@Daniel - thanks again for taking the time mate! :smile:



(JJ) #5

Has anyone been able to get Hype working within an Ionic app? I haven’t seen any clear answers to this.

I’m just trying to be able to define a region or even an entire viewport and display the Hype animations.
The next step would be to have some interaction and have the user click on buttons, etc.

If so, what did you need to do?




Hey Guys,

sorry for leaving this thread alone for so long time. I am coming back since we had another need for an integration of Hype animations in an Ionic/AngularJS project. I found a pretty simple solution thet seems to work for OUR needs. You can try it anyhow if you have similar needs:

  1. the “example.hyperesources” goes into the root www folder of your Ionic application

  2. the template page “example.html” is built like this (in fact only the DIV from your Hype3 output):

     	html {
     	body {
     <div id="details_hype_container" style="margin:auto;position:relative;width:1024px;height:768px;overflow:hidden;" aria-live="polite">
  3. finally your “index.html” page in your www folder should call the hype generated script BEFORE the closing body tag:

(sorry the closing tag is nor showing up here in the preformatted text – whyever – but you should close the tga anyhow…)

Hope this helps someone, and as said before – it SEEMS to work in OUR scenario…