Get the Scene Container and Number


(Loves Hype) #1

Currently there is no easy way to get the Scene Container generated by Hype so I wrote this little snippet (beware it uses jQuery):

//set scene number and container
var currentSceneName = hypeDocument.currentSceneName();
var sceneNames = hypeDocument.sceneNames();
for(var idx in sceneNames){
	if (sceneNames[idx]== currentSceneName) {
		window.sceneNumber = idx;
		window.sceneContainer = $("div[hype_scene_index='"+window.sceneNumber+"']");
		break;
	}
}

To include jQuery add this to your headHTML:

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

(Mark Hunte) #2

I will add this here instead of in a new post.

I am currently need to determine which scene I am in and need to get the index.

So I came up with this;

      var array = document.getElementsByClassName("HYPE_scene") //— WE GET AN ARRAY OF THE SCENE CLASS OBJETCS
var HYPE_scene;
    
    for (i = 0; i < array.length; i++) { 
    
    if (array[i].style.display === "block"){
    console.log( "current scene index = " +i);
    
    HYPE_scene = array[i]; 
    }
    
    }

#3

Hi Mark. If you run this on scene load it will return the index of the scene. Every Hype scene has an attribute “hype_scene_index”. If you run the code before anything else it will pick up the scene.

window.hype_scene = document.getElementById(element.id);
console.log(hype_scene.getAttribute("hype_scene_index"));

Just another way that uses less code and not an array.


(Mark Hunte) #4

Thanks,

I think I had tried that at the time, but for my use at the time I was running stuff after load and needed to get the current scene object so I could get elements with class names only for that scene.

Although above I mention the index I was really after the scene element. I was then able to use something like

var hype_vlist =  HYPE_scene.getElementsByClassName('hype_mp4video');

Also I am in love with element.querySelector() when you have an element and want to only get it’s elements and not ones contained else where with the same class.


#5

Fair enough, I however like to store the scene as a variable so I just run that code before anything (placing it at the top of any code I’m running on scene load) so that I can reference it later if I need to.


(Mark Hunte) #6

Yes, you right I will probably do that where I can in future :smile:


#7

It will be handy I’m sure :smile:


Too many functions. Another approach?
(Loves Hype) #9

Came up with these functions. Either one works… only initialize once on any scene load and from that point forward you will be able to call these extensions to that particular hypeDocument.

var nr = hypeDocument.currentSceneIndex();
var sceneContainer = hypeDocument.currentSceneElement();

These are the corresponding functions that need to be initialized in your first scene load:

hypeDocument.currentSceneIndex = function(){
	var hc = document.getElementById(hypeDocument.documentId());
	var sa = hc.getElementsByClassName("HYPE_scene");
	for (i = 0; i < sa.length; i++) {
		if (sa[i].style.display === "block") return i;
	}
}

hypeDocument.currentSceneElement = function(){
	var hc = document.getElementById(hypeDocument.documentId());
	var sa = hc.getElementsByClassName("HYPE_scene");
	for (i = 0; i < sa.length; i++) {
		if (sa[i].style.display === "block") return sa[i];
	}
}

(Loves Hype) #10

BTW they only need to be initialized once. Not on every scene load. Is there actually a document load event?

Also they don’t depend on each other. Use either or both…


(Mark Hunte) #11

Doh, I should have realised that it was being added to the hypeDocuments scope.

Thanks


#12

I would avoid using element here as it would interfere with the element that called the function :wink: If people were attaching this to say a button that they would want it’s innerHTML to change to something onclick

var element = hypeDocument.currentSceneElement();
	
element.innerHTML = "something";

wouldn’t work but

element.innerHTML = "something";
var element = hypeDocument.currentSceneElement();

would

###*EDIT the original has been changed since this post. So in summary be careful how you name the variable you use to store the scene element.


(Loves Hype) #13

True … but i was just in the usage example. Renamed it to sceneContainer so that nobody runs into trouble should he copy and paste the suggestion.


(Mark Hunte) #14

Yep, I spotted that one when I used it in

It’s great how the update in this thread became immediately handy in a completely new thread straight away.

The linked thread may give people a better idea of why we want to be able to get the scene elements.
Which is because more than one scene may be loaded in the DOM but all are hidden except the current one and we need to select a child classed/tagged elements to a particular scene that may also have a version in another scene.


(Loves Hype) #16

Okay, to hopefully close this thread with a solution that can easily be reused and copy & pasted I’ll give it a hopefully final solution and mark it as solved. Copy&Paste the following into your Head-HTML

<script>

	function extendHype(hypeDocument, element, event) {
		
		/**
		* currentSceneIndex
		* @return {Number} gives you the current scene index
		*/
		hypeDocument.currentSceneIndex = function(){
			var hc = document.getElementById(hypeDocument.documentId());
			var sa = hc.getElementsByClassName("HYPE_scene");
			for (i = 0; i < sa.length; i++) {
				if (sa[i].style.display === "block") return parseInt(sa[i].getAttribute("hype_scene_index"));
			}
		}

		/**
		* currentSceneElement
		* @return {HTMLDivElement} gives you the current scene element
		*/
		hypeDocument.currentSceneElement = function(){
			var hc = document.getElementById(hypeDocument.documentId());
			var sa = hc.getElementsByClassName("HYPE_scene");
			for (i = 0; i < sa.length; i++) {
				if (sa[i].style.display === "block") return sa[i];
			}
		}
		
		/* add more extentions here */
		
		return true;
		}


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

From there on you can use it in any hype function in your document as follows:

Get the scene index number (Number)

var nr = hypeDocument.currentSceneIndex();

Get the scene element (HTMLDivElement)

var elm = hypeDocument.currentSceneElement();

sceneNumber.zip (19.0 KB)


Playing different Audio in different Scenes using the same ID