Structure Approach Suggestions

I would like to get some opinions form the experts about how they would approach building a modular presentation framework in Hype. My plan is to have separate presentations split into a manageable number of scenes each. The look and feel will be consistent throughout so that scenes from individual presentations can be mixed and matched. The mixing and matching will take place in a template Hype document that will “bring in” the required slides from the standalone decks. Hope that makes sense so far. I drew a diagram…


The way I see this working is that the custom deck will contain a persistent symbol footer which contains “control elements”, such as navigation. But importantly I need the UI elements in the footer to be able to globaly control what happens on the slides, whether they are “brought in” (via iFrame or Embeded hype code or any other way?) or are “native” to the custom deck.
For example, say, I want to change the colour theme of the whole presentation. I click a “dark mode” toggle and all the backgrounds of all the scenes turn dark while all the text, in contrast turns light. This change needs to propagate throughout the whole document, for each scene and for all content.

So the question is how to approach this? By accessing the embedded scenes like…

HYPE.documents['SecondaryPresentation'].showSceneNamed('Scene2', instant)

And then call a function that changes the background colour etc? Where would that function be called from? The host Hype document? Or should it exist in every Hype document that I’m bringing in?

Apologies I have more questions than answers at the moment, but don’t want to go down a rabbit hole if it’s totally not viable.

I would appreciate any pointers or suggestions.

Thank you.

1 Like

Oh wow, I’m so glad you asked, because I was recently thinking about this problem. I was contemplating adding a “Flowchart” chapter to “A Book About Hype”.

That was my radical idea — I wouldn’t use scenes. I’d just use one big box that could be dragged around the view. So, the whole group could be dragged or a persistent symbol could be used as navigation.

If that idea is too crazy for you, this free template might be an alternative… https://photics.com/free-template-tuesday-22-tumult-hype-menu/ …it’s very similar to what you’re trying to setup. Except, it only switches left and right. You’d want up and down transitions too. I’m thinking that’s probably just a matter of adding extra JavaScript code — and really getting your order straight.

Ha Ha. I am working on the “Dark Mode” chapter tonight for the Advanced Design section. I’m still working on how to best manage this with Hype, but I basically built it with Wrapping/Apparatuses.

Long story short, it’s a combination of this… https://caniuse.com/#feat=prefers-color-scheme …this… https://caniuse.com/#feat=css-variables …and this… https://caniuse.com/#feat=mdn-api_window_localstorage

That might not fully answer your question, but now I’m feeling really good about the new section I’m working on. :smile:

2 Likes

The question is: do you want the new “compilation” of slides from your deck to be a new file (creating redundancy) or is it just referencing them from their original exports as a dynamic multi bundle viewer?

Also, there is the question of content and templates. Are you planning on building the whole slides in Hype or only reusable layout templates and feed them content from somewhere else on the fly (JSON-object, XML etc.)?

2 Likes

Thanks @Photics for your suggestions and links. I will look into those.
@MaxZieb is closer to understanding what I am after in terms of structure.

Yes. The “compilation” will be referencing the main decks. The main decks will provide the bulk of reusable content that can be inserted into multiple compilation decks. The idea behind this, is that updating a slide in one of the main decks will update all instances of where that slide appears in the compilations.

Yes? So, the main decks will have their content brought in from googlesheets (JSON). I have been playing around with this and it works well. Again, this means that I can change a statistic or text, or image in the google sheet and the result is instantly updated within the output of the Hype doc.

Now I need to take that output and selectively plug it in to any number of custom decks, as illustrated in the diagram.

The issue isn’t in building the slides, how they look, where they get their content from (although I am open to ideas). The issue is what is the best methodology to bring in content from one Hype generated output, into another Hype document and be able to control the look and feel / navigation / animations / functions globally from the “host” document.

Apologies if I’m mixing up the nomenclature. But the best way I can describe it is as follows:
A salesperson needs a presentation tailored for a specific client = custom deck.
The majority of the content (scenes) in the custom deck comes from scenes in standalone decks.
Some of the content (new scenes) will also be added, specific for the purpose of presentation.
The standalone decks ensure consistency, so when a scene is taken from them and inserted into a custom deck it will always show the latest figures / text etc.

I will create a quick example and add it hear soon(ish).

Thanks again.

1 Like

one flexible setup i could imagine is to have one masterfile that reads out an edition/summary. this edition holds the contentpages and sequence to display. each contentpage can be predefined or customized. predefined pages could be part of the master and just their content changes … custom would be a page loaded as iframe …

the edition could be switched by a parameter in the url …

So here is a quick and dirty test to better illustrate (hopefully).

https://www.plughole.com/CustomDeckForumExample.html

Slide 1 is from the Custom Deck.
Slide 2 is embedded content referencing DeckA hype generated script. (doesn’t populate from googlesheets?)
Slide 3 is iFrame of output file of DeckA (seems to work).
Slide4 Custom Deck
Slide 5 embedded content referencing DeckB hype generated script. (doesn’t populate from googlesheets? Same as DeckA)
Slide 6 iFrame of output file of DeckB (works as expected)
Slide 7 end slide from Custom Deck

Below are the Hype docs for peeps to examine if they wish.

PresentationForumTest.zip (697.1 KB)

Thanks

it does not work, because jquery is not loaded for those iframes …

The iFrames do load (slides 3 and 6). Am I using the embed of the hype generated script the wrong way? I put the code into an HTML widget. There is jquery in the head of the CustomDeck so I thought that would effect the embedded stuff.

the result is an iFrame … -> isolated

@JimScott

That will depend on the situation. If it was up to me, no client would be inflicted with more than 30 slides. Unfortunately, in practice, I have had to prepare 70+ page PowerPoints for sales reps. But let’s say that 50 would be a maximum.

In terms of interactivity. I want to use Hype to it’s full potential, so the embedded hype documents should maintain all their functionality. The question is, how to access some of that functionality from the host document. For example, how to start a timeline to show a graph animating, without using an obvious UI element on the embedded scene?

I would load you scenes into an iframe in a rect.

Basic idea.

The template list would be in the head.

    <script type="text/javascript"> function myCallback(hypeDocument, element, event){ 
 
 
 //-- deck list to load
  hypeDocument.customData.decks= ["DeckAForumExample.html","DeckBForumExample.html"] 
  
   
   hypeDocument.customData.currentDeckIndex = 0
   
    //-- first deck
  hypeDocument.customData.currentDeck =  hypeDocument.customData.decks[0]
  
  
  hypeDocument.customData.deckBaseUrl = "https://2020-uki.s3.eu-west-2.amazonaws.com/CMS/forumTest/"
  
  
  } 

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


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

The symbols navigation buttons would load the scenes in the list.
The first scene can also be loaded via code at the HypeScenePrepareForDisplay event.

    var goScene	= element.classList[1]
	
	var playlist =  hypeDocument.getElementById('sceneloader')
	
	
	//-- get  the groups iframe
	var thisIframe = playlist.querySelector('.iframer > iframe')
	
	
	//-- load first scene at  Prepare For Display 
	if (event.type == "HypeScenePrepareForDisplay"){
	
	thisIframe.src =   hypeDocument.customData.deckBaseUrl +  hypeDocument.customData.decks[hypeDocument.customData.currentDeckIndex]
		
	return
	 }
	  
	//-- use the buttons class to change the src of the iframe
	switch(goScene) {
    case 'next':
    
    
    if(hypeDocument.customData.currentDeckIndex >= hypeDocument.customData.decks.length -1){
    
    return
    }
    hypeDocument.customData.currentDeckIndex += 1
    
      thisIframe.src =   hypeDocument.customData.deckBaseUrl +  hypeDocument.customData.decks[hypeDocument.customData.currentDeckIndex]
        break;
    case 'prev':
    
      
    if(hypeDocument.customData.currentDeckIndex  <= 0){
    return
    }
     hypeDocument.customData.currentDeckIndex -= 1
        thisIframe.src =  hypeDocument.customData.deckBaseUrl +  hypeDocument.customData.decks[hypeDocument.customData.currentDeckIndex]
        break;

}

scenechanger test.hype.zip (25.7 KB)

//will come back with more in a bit…

Thank you @MarkHunte I will take a look… In the meantime I’ve uploaded a new version here: https://www.plughole.com/CustomDeckForumExample.html

The embeded hype documents are now working. Thanks @h_classen , I put jquery into the embed.

<script type="text/javascript" src="https://code.jquery.com/jquery-2.0.3.min.js"></script>
<div id="deckaforumexample_hype_container" class="HYPE_document" style="margin:auto;position:relative;width:1280px;height:720px;overflow:hidden;">
		<script type="text/javascript" charset="utf-8" src="https://www.plughole.com/DeckAForumExample.hyperesources/deckaforumexample_hype_generated_script.js"></script></div>  

On the second slide I added a button in the Custom Deck with a function to change the background colour, but it doesn’t work. The idea here is to be able to play, pause timelines etc and also call other functions from the Custom Deck.

HYPE.documents['DeckAForumExample'].startTimelineNamed('changeBG', HYPE.documents['DeckAForumExample'].kDirectionForward);

The button marked “internal” on the second slide does work.

hypeDocument.startTimelineNamed('changeBG', hypeDocument.kDirectionForward);

I read on the forum about a callback function to check if the hype.document has loaded, but not sure on how to implement that, or if that is indeed the problem.

Cheers

Cool,
As you are finding there are few ways to approach what you want to do…

I will let @h_classen guide you through his suggestion… ( which may work better for you ? )

With what I have above.

You could use postmessage to communicate from the parent documents and the iframe content.
There is already a few post related to this but;

In the deck projects that would be loaded into the iframe; you could put a listener that listens for messages and acts on them if the message it hears meets the correct conditions.

For example :
in the head of DeckAForumExample.html and DeckBForumExample.html

we have something like:

    <style>
	.darkMode {
  background-color: black!important;
  color: white!important;
}
	
	</style>
	
	
	<script type="text/javascript" src="https://code.jquery.com/jquery-2.0.3.min.js"></script>
	

	
	
	 <script type="text/javascript"> function myCallback(hypeDocument, element, event){ 
 
 
//-- post message to parent window/ requesting what css should be when loaded
   window.parent.postMessage(['whatsmyBG'], '*');
 

 
    window.addEventListener('message', function(theEvent) {
		    
		    
		     //animation  instructions recieved
         
		    if(theEvent.data[0] == 'startAni1'){
		   hypeDocument.startTimelineNamed('startAni1')
    		//setBG(theEvent.data[1])
        
    };
        
        
        
         //darkMode  css instructions recieved
         
         
     if(theEvent.data[0] == 'whatsmyBG'){
     setBG(theEvent.data[1])
  
  
  };
         
        
    }, false);
  
  
  } 

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


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



function setBG(theBG){

var array = document.getElementsByClassName('content') 
		 
				for (i = 0; i < array.length; i++) { 
				
				 if (theBG == "dark"){
				 
					  array[i].classList.add("darkMode");
					 
					   } else {
					   
					 array[i].classList.remove("darkMode");
				   }
			}


}
</script> 

note in two actual DeckAForumExample project the animation control is commented out as the animation is only in B

In the head and other functions of the parent , we post messages and also listen where needed.

The basic idea is; The children/iframes post a message to the parent for instructions when the first load.

The parent listens for the messages from its children and replies with a post message and data to be used by the children.

The children listen for messages from the parent and act upon them.

Two way comms.

As usual this is all an example and should/could be cleaned up and adjusted to needs, logic and efficiency blah blah blah…

I have put a demo that the decks have the head code etc…

(demo) https://markosx.com/hypeTests/scenechanger.html

And her are the raw files

exampleMHv2.zip (608.1 KB)

4 Likes

one quite simple approach to get rid of iFrames could be to add Hypes regular embedcode to the Hypedocuments Head with an addition of display: none.

then move those embeds to their destinated Hype-Element – on documentLoad or sceneload … – by the method ‘appendChild’, change display-property to ‘block’.

ahhh … and of Course you can use @MaxZieb’s https://github.com/worldoptimizer/HypeGlobalBehavior
to let your hypedocumentinstances communicate with each other …
really worth a try! I’m sure Max will guide you :slight_smile:

2 Likes

Or use one template slide deck and separate the content out of it although, making the templates reusable with multiple content sets. I developed a state machine that does just that (to be released soon).

1 Like

That’s been my first suggestion … but then i realized that it’s been the aim to built those docinstances within hype by hand. why not … it gives some more flexilility.

excited for the state machine :slight_smile:

1 Like

Amazing guys. Thank you so much for your suggestions. As @MarkHunte provided a working example, I thought I would try @MaxZieb 's HypeGlobalBehaviour as well to see what approach is more applicable for my needs. I’m probably missing something obvious, but I could only get it to work with the iFrames, not the embedded hype code. Perhaps…

I just realised that I needed to include the HypeGlobalBehaviour.js in that embedded code in the same way as jquery? It’s working now.

So the embed code looks like this:

<script type="text/javascript" src="https://code.jquery.com/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="${resourcesFolderName}/HypeGlobalBehavior.js"></script>
<div id="deckaforumexample_hype_container" class="HYPE_document" style="margin:auto;position:relative;width:1280px;height:720px;overflow:hidden;">
		<script type="text/javascript" charset="utf-8" src="https://www.plughole.com/DeckAForumExample.hyperesources/deckaforumexample_hype_generated_script.js"></script></div>

https://www.plughole.com/CustomDeckForumExample.html

Would You provide a Hype document to the Forum for us to examine?

Thanks!

@JimScott

Here you go… PresentationForumTest.zip (646.1 KB) Seems to be working. I only added the behaviour to slide 1 and 2 in DeckAForumExample, so from the Custom presentation you will see it in on slide 2 as an embed and slide 3 as an iFrame. Both now work.

Cheers

1 Like

You can actually also link Hype GlobalBehavior from the CDN (like jQuery) and benefit from browser caching on this (instead of putting it into your resources). See…

1 Like