Auto Scene Title callBack Function / Use a callBack for all hype scenes onLoad events

Tips & Tricks
1

I wrote a a bit of Function a short while ago to Automatically put the scene name in a text element symbol at the top of my Scenes.

This works really well and can be extended to the likes of buttons.
But I had to add the function to all the scenes onload. Actions

So my idea is to put something in the <head> that can detect the HypeSceneLoad event.
There is probably an easy way of adding an EventListener to the symbol. But I could not get anything to work.

But realised that the guys at Tumult have already given us the means of adding an hype event/callback to the head already. in the Famous Post: [linking-to-a-specific-scene-from-inside-and-outside-of-a-tumult-hype-document][1]

there is a section

Linking to a Scene from within your Tumult Hype Project

This technique would be for the following case:
Let's say you have a box on your first scene with a single word in the inner HTML of an element, and you want this to link to scene 2. First, add the following JavaScript in the HEAD area:

<script>
function myCallback(hypeDocument, element, event) {
window.myhypedocument = hypeDocument;
}

if("HYPE_eventListeners" in window === false) {
window.HYPE_eventListeners = Array();
}
window.HYPE_eventListeners.push({"type":"HypeDocumentLoad", "callback":myCallback});
</script>

This code gets the document name of your document. For your link, you would need to add the following code to the > Inner HTML of an element (if your scene being jumped to was named scene2):

Jump to <a href="#" onclick="window.myhypedocument.showSceneNamed('scene2');">scene 2</a>

With a little bit of jiggery we can use this for detecting the HypeSceneLoad event and automatically set each scene text title symbol with the Scene name.

<script type="text/javascript">	
	
	function sceneTitleCallback(hypeDocument, element, event) {
 
 hypeDocument.getSymbolInstanceById('sceneNameSymbol').element().children[0].children[0].textContent =   hypeDocument.currentSceneName() ;
}

if("HYPE_eventListeners" in window === false) {
window.HYPE_eventListeners = Array();
}
window.HYPE_eventListeners.push({"type":"HypeSceneLoad", "callback":sceneTitleCallback});
 
</script>

Once added to the <head> ( Document Inspector -> Edit Head HTML.. button)

You then just need to add a text element to your first Scene, Make it a Persistent Symbol across all Scenes and and set the Symbol 's ID to sceneNameSymbol

Here is a template to also show you.

HypeBlankWithSceneName.hypetemplate.zip (14.8 KB)
[1]: Linking to a specific scene from inside and outside of a Tumult Hype document

2 Likes
2

As An Extra:

You can use this to call other Hype functions and APIs for all scene loads without having to add each function to all the Scene onLoad actions.

Example:

    <script type="text/javascript">	
    	
    	function sceneTitleCallback(hypeDocument, element, event) {
     
     hypeDocument.getSymbolInstanceById('sceneNameSymbol').element().children[0].children[0].textContent =   hypeDocument.currentSceneName() ;
     
    
    }
    
    function onLoadCallback(hypeDocument, element, event) {
     
      hypeDocument.functions().test();
    
    }
    
    if("HYPE_eventListeners" in window === false) {
    window.HYPE_eventListeners = Array();
    }
    
    
    window.HYPE_eventListeners.push({"type":"HypeSceneLoad", "callback":sceneTitleCallback});
    
    window.HYPE_eventListeners.push({"type":"HypeSceneLoad", "callback":onLoadCallback});
    </script >

Using the above will note only set the Title but also run a hype Function on any Scene load.

If you want the hype function avoid some scenes then you can do something like:

<script type="text/javascript">	

//--> Extend Arrays (*https://css-tricks.com/snippets/javascript/javascript-array-contains/ *)
Array.prototype.contains = function ( needleInAHaystack ) {
   for (i in this) {
       if (this[i] == needleInAHaystack) return true;
   }
   return false;
}
//-<

if("HYPE_eventListeners" in window === false) {
window.HYPE_eventListeners = Array();
}


function onLoadCallback(hypeDocument, element, event) {

var doNotRunForScenes = ["Scene2"];
 
 var thisScene = hypeDocument.currentSceneName();
 
 if (! doNotRunForScenes.contains(thisScene)   )
 
  hypeDocument.functions().test();

}

window.HYPE_eventListeners.push({"type":"HypeSceneLoad", "callback":onLoadCallback});
</script>
1 Like
3

Thanks Mark, that’s pretty cool.

2 Likes
4

Thanks Greg ( @gasspence ),

Do you think I should change the post title to refer to this usage I.e Use a callBack for all hype scenes onLoad events

instead of just what I originally used it for.

5

Thank’s for this!
Life-Saver