Hi,
We have an existing Cordova project thats in both the Apple UK App Store and the Google Play store (Jambuster). This is only available in the UK as it provides personalised traffic information for London drivers.
We currently have a help screen which is a simple (and lame) PNG page. However this simple page technically works.
We are exploring using Hype 3 to generate far more interesting and useful help pages. Our current Hype 3 test page consists of a simple scene with three lines of text that fades in over a few seconds. We don’t think we’ll have any issues generating the actual Hype 3 document, but how we use it in Cordova is more complicated and hence this email.
We’ve generated and exported the Hype 3 html folder to our application. We can open the index.html file created in Chrome to verify that it works correctly outside Hype and in a browser.
What we are struggling to do is to get the Hype 3 displayed in our app.
What have we done so far?
We’ve opened up the index.html file and located the three lines that we think are relevant
<div id="testintro1_hype_container" style="margin:auto;position:relative;width:320px;height:568px;overflow:hidden;" aria-live="polite">
<script type="text/javascript" charset="utf-8" src="TestIntro1.hyperesources/testintro1_hype_generated_script.js?36551"></script>
</div>
We have moved the Hype 3 script resources to our head section in the document.
<script type="text/javascript" charset="utf-8" src="TestIntro1.hyperesources/testintro1_hype_generated_script.js?36551"></script>
We have 40-50 script resources in our head section so this is nothing new.
We have left
<div id="testintro1_hype_container" style="margin:auto;position:relative;width:320px;height:568px;overflow:hidden;" aria-live="polite">
</div>
in the section where we used to load the simple .png file. This used to be
<script id="image-modal.html" type="text/ng-template">
<div class="modal image-modal transparent" ng-click="closeModal()">
<ion-pane class="transparent">
<img ng-src="{{imageSrc}}" class="fullscreen-image"/>
</ion-pane>
</div>
</script>
and is now
<script id="image-modal.html" type="text/ng-template">
<div class="modal image-modal transparent" ng-click="closeModal()">
<ion-pane class="transparent">
<div id="testintro1_hype_container" style="margin:auto;position:relative;width:320px;height:568px;overflow:hidden;" aria-live="polite">
</div>
</ion-pane>
</div>
</script>
So far this is nothing more than simple refactoring (though probably wrong).
If we recompile our app and push it down to an iPhone we can see that the script is loaded correctly as no error is reported in the Safari console.
However if we then fire off the action to load the Hype 3 script in the image-modal.html section defined above we get an error. As there are graphics in safari we can’t simply cut and paste the text, we have to insert an image
This is where we start to struggle. We can’t see how to resolve this or indeed what the problem is at all.
Looking at the code shows the minified versions and we probably couldn’t work it out anyway.
Any suggestions or help gratefully received.
Our other option was to look at exporting and importing an animated GIF. We can easily display the GIF, but the animations only run once and its very difficult to reset it from JavaScript. To be honest we’d much rather have an HTML 5 solution if possible.
Thanks for reading this far, any ideas let us know.
Rob
. Does this work for you?
They are all separate things 
even though they are quite often used together.
