Has anybody embedded a Hype 3 doc in Ionic?

ionic-v1
1

Hi,

We’re investigating using Hype 3 (http://tumult.com/hype/) to write some onboarding stuff for our app.

Hype 3 looks like it has really nice features, sort of a poor mans Final Cut Pro for html5 :slight_smile:

We currently have a static PNG file for our help/onboarding which looks a little lame.

We’d like to use Hype 3 which produces a nice Javascript folder and a simple index.html file that loads and runs smoothly in an external browser.

This is the code from the index.html created by Hype 3.

      <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="www/TestIntro1.hyperesources/testintro1_hype_generated_script.js?36551"></script>
      </div>

We’d like it to “just-drop-in-with-no-coding-at-all” in our current ion-pane

<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>

However Xmas appears to have been and gone and we suspect we are too early for Dec 2017.

Has anybody ever done anything like this before. We have looked at the docs and we have zero idea of where to even start. Any pointers very much welcomed.

Thanks

Rob

2

We’ve worked out how to do it, but its not a match made in heaven. Here’s the notes we made back to the Hype 3 people at Tumult Software.

I’ll consider this closed now

The main problem for us is getting the HTML 5 to fire more than once and on demand. The Hype 3 software doesn’t seem to be re-entrant.

Here;'s our notes in case anybody else is looking to do this. We created a simple Hype 3 project called ‘test1intro’, This project simply displayed a few lines of text fading in over a few seconds.

Htpe 3 generates a small number of JS and HTML files to include. The problem was that Hype 3 assumes you have a website and not a mobile app. the act of lading up one of the scripts kicks everything off. We wanted to delay starting the HTML5 movie until we wanted to, which was waaaaay after the script load.

We have to defer calling the script

test1intro.hyperesources/test1intro_hype_generated_script.js

until after the DOM is completely created.

What we did

Our test Hype 3 document is called test1intro. It has a single scene with two lines of text that gradually appear.

We created the document and saved it to a folder test1intro.

This created a series of files, the important ones of which are:

index.html,
HYPE-552.thin.min.js and
test1intro_hype_generated_script.js

Looking in index.html created by Hype 3we pulled out these lines

<div id="test1intro_hype_container" style="margin:auto;position:relative;width:320px;height:568px;overflow:hidden;" aria-live="polite">
<script type="text/javascript" charset="utf-8" src="test1intro.hyperesources/test1intro_hype_generated_script.js?54709"></script>
We updated the view that used to show the .png file to now hold the Hype 3 div. Note that the script tag is NOT in here. 
<script id="image-modal.html" type="text/ng-template">
<div class="modal image-modal transparent" ng-click="closeModal()">
<ion-pane class="transparent">
  <div id="test1intro_hype_container" style="margin:auto;position:relative;width:320px;height:568px;overflow:hidden;" aria-live="polite">
  </div>
</ion-pane>
</div>
</script>

We opened up the file test1intro_hype_generated_script and pulled out all the Javascript and added it to a function that we control when we call it. This function sits in one of Ionic controllers. The Hype 3 script seems to modify the DOM quite a lot and worries us a little :slight_smile:

We then explicitly added HYPE-552.thin.min.js to our index.html file.

<script src="test1intro.hyperesources/HYPE-552.thin.min.js"></script>

This is a framework type file and the JavaScript in test1intro_hype_generated_script.js calls it.

We then call our new function that simply contains the contents of test1intro_hype_generated_script.js, CallHype() when we load up the help page on top of our main screen. As we don’t call the Hype 3 script until we have setup the DOM (or rather Ionic has) this works and we get a simple yellow screen appear with two lines of text and no errors.

If we rerun the CallHype() function we have created, we don’t get the nice animations running again, we simply get the end screen.

So we have managed to get this working, we have tried quite a lot of ways to get this working but none of the other techniques such as late binding using ng-bind-html worked. This was literally the last thing we tried and we had more or less given up by this stage.

Thanks for the help,

Rob