Wait for external trigger to start animation

Using JavaScript with Hype
1

Hi there,
In the attached Hype document, the main timeline is immediately paused and has to wait for an external JavaScript function to trigger it to continue.
I followed the documentation, and it works as long as the external function is called BEFORE the HypeSceneLoad event.
In this case however, the external JavaScript function may take some time to get called, in which case it doesn't work anymore, probably because the HypeSceneLoad event has already passed (you can adjust myTimeOut to 1000ms in order to simulate the delay).
Can you please tell me how to launch the animation after Hype has loaded?
Many thanks in advance.
WaitForTriggerFunction.hype.zip (27.3 KB)

	<script>
	
	  function ContinueMainTimeline(hypeDocument, element, event) {
	    hypeDocument.continueTimelineNamed('Main Timeline', hypeDocument.kDirectionForward, false);
	  }
	
	  function ExternalTrigger() {
	  	console.log('Trigger called');
	    if (("HYPE_eventListeners" in window) === false) {
	  	  console.log('Hype document not yet loaded');
	      window.HYPE_eventListeners = Array();
	    } 
          window.HYPE_eventListeners.push({ "type": "HypeSceneLoad", "callback": ContinueMainTimeline });
	  }
	  	  
	  var myTimeOut = setTimeout(ExternalTrigger, 10);
	  
	</script>
2

I cooked a quick workaround which does not rely on Hype events:
The external trigger function just sets a flag to true, which is checked every 30th of a second by a looping "Wait" timeline launched at the start (see attached Hype doc).
It's not very clean but it does the job.
Feel free to show me a better way to do it.
Thanks and cheers!

WaitForTriggerFunction2.hype.zip (27.5 KB)

	<script>
	
	  function ExternalTrigger() {
	  	console.log('Trigger called');
	    window.okToStart = true;
	  }
	  	  
	  window.okToStart = false;
	  var myTimeOut = setTimeout(ExternalTrigger, 1000);
	  
	</script>

and the function in the looping "Wait" Hype timeline:

function WaitForTrigger (hypeDocument, element, event) {
	
	if (window.okToStart == true) {
		hypeDocument.continueTimelineNamed('Main Timeline', hypeDocument.kDirectionForward, false);
		hypeDocument.pauseTimelineNamed('Wait');
	} else {
		hypeDocument.startTimelineNamed('Wait', hypeDocument.kDirectionForward);
	}
}
3

The only effect you want to achieve is that the timeline starts after a time X, right? Or am I misunderstanding you? So why not simply call the following script on sceneLoad? No script in the head necessary...

setTimeout(function(){
    hypeDocument.continueTimelineNamed('Main Timeline', hypeDocument.kDirectionForward, false);
}, 1000);

Sorry. Wrong file. Here's the correct one...

WaitForTriggerFunction_kt.hype.zip (14.4 KB)

4

Thanks, Kalle.

My project is to be displayed on a digital out-of-home system, which calls the "ExternalTrigger" function when it's ready to display the animation.

I have no control on the timing of this function, and this is why I added the "setTimout" line just for the purpose of simulating various delays.

Thanks again for your input.

5

Maybe...

Put the animation on its own timeline. Which means it will only run when called.

In the Hype WaitForTrigger function. Just put the code to continue that timeline.

hypeDocument.continueTimelineNamed('BoxSlide', hypeDocument.kDirectionForward, false);

In your head, we can alias the Hype function to the windows scope.
This will also save you hard coding the hype documents name etc.. with other approaches.

<script>
	function hypeDocLoadCallback(hypeDocument, element, event) {
		
		console.log("Setting up window scoped Alias function")
 			window.hypFunc = function(){
     		hypeDocument.functions().WaitForTrigger(hypeDocument, element, event)
      		}
 			 
	}

	if("HYPE_eventListeners" in window === false) {
		window.HYPE_eventListeners = Array();
		
		
	}
	
	
	window.HYPE_eventListeners.push({"type":"HypeDocumentLoad", "callback":hypeDocLoadCallback});
		
	 
	  	  setTimeout(() => {
  				console.log("Simulate external trigger calling Alias function")
  				window.hypFunc()
			}, "1000");
	  
	 
		</script>

WaitForTriggerFunction2_mhv1.hype.zip (17.4 KB)

2 Likes
6

Thanks a lot Mark - this is obviously cleaner.
Have a nice day.

1 Like
7

Sidenote: Hype Document Load in the document panel is a long standing request…

2 Likes