Control a timeline in the parent of a widget?

Elements
1

Thanks to this forum and the extremely helpful people around here I’m able to swap and control a widget from outside that widget.
:smiling_face_with_three_hearts:

If you look at the attached sample and open the ‘control_parent_through_iframe_widget_01.html’ file in a browser you can see just that.
control_parent.zip (1.0 MB)

Button 1 and 2 load one of the included “test.html” files. And with a second click the timeline inside those “test” files (loaded widget) reactivates so they nicely fade out and the user can choose a new button to click without having a “pats-boom” transition.

The third button shows my problem. I need to remove the button bar that controls the widgets to get a full view of this particular widget scene, but would like to have the button bar reappear after the user clicks a button in the widget.

Is there something similar on these forums that helps me figure out how to control the ‘parent’ from within the childs iFrame? I looked but it’s, as far as I can see the other way around .

2

Hi Rick!

I am not understanding something...

Your text in this button states that it should start a timeline in the Parent. It does not appear to do anything else. Is there a reason why this button needs to be inside the widget?

3

have a look at this post

Either mine or jonathans should solve this.

Example of postMessage with yours.

Would be add this to the head of control_parent_through_iframe_widget_01

	    <script type="text/javascript"> function myCallback(hypeDocument, element, event){ 
 
    window.addEventListener('message', function(theEvent) {
    if(theEvent.data[0] !== 'reload'){
    return;
    };
        hypeDocument.startTimelineNamed('Main Timeline')
        
       hypeDocument.goToTimeInTimelineNamed(0, '1stbttn_blocker')
     	hypeDocument.goToTimeInTimelineNamed(0, '2ndbttn_blocker') 
     	hypeDocument.goToTimeInTimelineNamed(0, '3thbttn_blocker') 
     	
     	hypeDocument.goToTimeInTimelineNamed(0, '1st_bttn')
     	hypeDocument.goToTimeInTimelineNamed(0, '2nd_bttn') 
     	hypeDocument.goToTimeInTimelineNamed(0, '3th_bttn') 
     	
     	var  htmlWidget = hypeDocument.getElementById("mainFrame").children[0];
	  	htmlWidget.setAttribute("src", "");
        
    }, false);
  
  
  } 

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


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

And this as a new function when the button is clicked in each button widget. (test1,test2,test3)

window.parent.postMessage(['reload'], '*');

2 Likes
4

@JimScott Hi Jim :slight_smile: The reason I think :thinking: I need this button inside the widget is because of the user-flow. User clicks a button in the “button-gallery”, which subsequently moves off screen, while the widget takes the front stage.

It seems more ‘natural’ to me to have a user (or timeline) action inside the widget to get the “button-gallery” back up from there then to have an ‘slide-up/slide-down’ button-gallery function on the parent. I can’t see an other way around this. Is there something I missed?

@MarkHunte I just wish there was a cafe around the corner where we all could meet and I could treat you all on a crate of beer or soda, or whatever your poison is. :grin:

I can’t thank you enough for this. But thank you, thank you! :+1: :+1: :+1:

I love this place!

1 Like
5

So here is my go at it (live) with all buttons outside of the widget.
Note: Buttons 1 & 2 are dummies.

Hype Project: WidgetDiddling_JHSv1.hype.zip (17.0 KB)

Placing the "Close" button (as used in this example) inside the widget takes more code to be functional. It seems so straightforward to place it in the main Hype project... which requires just a timeline in the project. The actual interface & scripting could of course follow the dictates of your particular needs.

1 Like
6

Hi Jim :smiley:

Sorry took me a while to reply, I was buried in Hype. :kissing_heart:

This, your approach, would normally work and one I’d use.

But in this case I’m (trying to) tell a story (under each button a different one) over a few scenes with totally different environments, like under “button 3” we have a hatch, the room behind that hatch, a computer screen with data inside that room behind that hatch, which leads into a space scene with an escape pod bursting away diving into a planets atmosphere.

Having a ‘close’ button just hanging there all the time over the scenes is a bit jarring and gives the user an option to escape my story before it’s finished, which is an option I don’t want to give the user until I’m done telling my story.

You see, in “my” movie theater everybody gets strapped down in their chair and aren’t released until the end credits have rolled. :wink:

Still thank you for thinking along. Very much appreciated! :grinning:

1 Like
7

Hi Rick!

The “close” button does not have to be “just hanging there” - that was a demo without a clear idea of what You were doing. It could be scripted to show up at the time desired - unless there is specific user interaction in the Widget that terminates~alters the timing - in that case “postMessage” is definitely the way to go!

In any event best wishes for your production - and maybe we’ll get to see it" (strapped down or not :clown_face:)