Structure Approach Suggestions

gleb · February 25, 2020, 11:29pm

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.

Photics · February 26, 2020, 1:26am

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... Free Template Tuesday #22 – Tumult Hype “Menu” – Photics.com ...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... Can I use... Support tables for HTML5, CSS3, etc ...this... Can I use... Support tables for HTML5, CSS3, etc ...and this... Can I use... Support tables for HTML5, CSS3, etc

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

MaxZieb · February 26, 2020, 10:32am

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.)?

gleb · February 26, 2020, 2:44pm

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.

h_classen · February 26, 2020, 4:18pm

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 …

gleb · February 26, 2020, 4:23pm

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

h_classen · February 26, 2020, 6:13pm

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

gleb · February 26, 2020, 8:00pm

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.

h_classen · February 26, 2020, 8:29pm

the result is an iFrame … -> isolated

gleb · February 26, 2020, 8:29pm

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

MarkHunte · February 26, 2020, 9:54pm

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…

gleb · February 26, 2020, 10:25pm

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

MarkHunte · February 27, 2020, 12:32am

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)

h_classen · February 27, 2020, 9:32am

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

MaxZieb · February 27, 2020, 9:57am

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

h_classen · February 27, 2020, 10:04am

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

gleb · February 28, 2020, 12:04am

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

JimScott · February 28, 2020, 1:02am

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

Thanks!

gleb · February 28, 2020, 7:07am

@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

MaxZieb · February 28, 2020, 8:28am

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