Skip/Delete Scenes using Javascript


#1

I am currently trying to build out a display board to go in an office. We will be displaying statistics in various formats within the animation. I intend to have a scene per location with some data displayed. The data is coming from an external source and populating the relevant fields.

An Example situation:
Scene displays location information and £ value of sales. - This is fine and works
If the value of sales is <£XX we need to skip this scene completely.

Is there an easy way to skip scene? All the data is available externally and I can format this as required (currently it is all within a number of JSON objects).

Many Thanks!


(Loves Hype) #2

You can run a function on scene load and in there you can check against your conditions. If they are not met call hypeDocument.showNextScene(hypeDocument.kSceneTransitionInstant);

Pseudo-Code (not actually tested but you get the idea)

if (myData.valueSomething < 1) {
    hypeDocument.showNextScene(hypeDocument.kSceneTransitionInstant);
}

For next scene look at https://tumult.com/hype/documentation/3.0/#showNextScene
For specific scene look at https://tumult.com/hype/documentation/3.0/#showSceneNamed


#3

Thank you MaxZieb, This works well.

I have two functions, one of which has a trigger within the timeline, the other controls the data and is outside of the hype document. The function within the hype document says that the other function is not found. any ideas?

HTML:

function nextCounty() {
var activeCounties = [‘County1’, ‘County3’];
//hypeDocument.showSceneNamed(activeCounties[0]);
var index = 0;
while (true) {
yield activeCounties[index];
index++;
if (index == activeCounties.length) {
index = 0;
}
}
}

</script>
	<div id="gileadtest_hype_container" style="margin:auto;position:relative;width:600px;height:400px;overflow:hidden;">
		<script type="text/javascript" charset="utf-8" src="Gilead-Test.hyperesources/gileadtest_hype_generated_script.js?81097"></script>
	</div>

In Hype JS Function:
function goToNext(hypeDocument, element, event) {
generateScene = nextCounty();
hypeDocument.showSceneNamed(generateScene.next().value);
}


#4

I have also tried triggering a function within the timeline that does the below however there are no errors and the screen doesn’t navigate, also no logs in console:

    var index = 0;
	
    return function () {
     var activeCounties = ['County1', 'County3'];
     hypeDocument.showSceneNamed(activeCounties[index]);
     console.log(activeCounties[index]);

     // index++ // simpliest way to manage index
     index = index + 1 === activeCounties.length ? 0 : index + 1 // circle. if index is grather than activeCounties.length than index = 0
    }

(Loves Hype) #5

I see a lot off unneeded complexity at first glance and also you have to learn about scope. The hypeDocument object (API) isn’t available “outside” of particular Hype document without some tweaking.

Read about that here

Also I am not sure why your wrapping a return in a function. That doesn’t call it. It’s just a reference to a function that probably ends up in nirvana.

I would suggest you share your file or at least (if that is not possible) try to consilidate you functionality to within Hype. Using external function calls can also be done with a construct like in the link above but in that case I would try to keep all code in the global head scope. Mix and match makes it hard to debug and anticipate interactions if your not a experienced developer.

My suggestion put your data outside in the window context and the use it in Hype only or create that global approach and put all your code in Head-HTML.


#6

Thanks Max!

I’ll have a read through that link and see what I can make of it. If it helps, this is what I am trying to acheive:

I have multiple scenes and at the end of each scene I have a function called. This function has an array of scene names and is used to navigate to the next scene based on the array. This array will be pulled from a database via ajax eventually and stored in a variable. I’d like this to ideally be outside of this function as I will be using the same dataset for multiple uses. I have this working for the first navigation, however, I am unsure how to then go to the next item in the array when the function is next called.

As you can see below, I have an array of two items. When the function is called it navigates to the first item County1 . When the function is next called it should navigate to County3 .

At the end of the animation, I will need to run a function that will reset the position as it will loop continuously.

Current Function:

function nextScene() {
     var activeCounties = ['County1', 'County3'];
     hypeDocument.showSceneNamed(activeCounties[0]);
     console.log(activeCounties[0]);
}

(Loves Hype) #7

Seams straight forward. The issue is in the scope. Why do you want to define the nextScene function outside of Hype. Just use a Hype function for that.


#8

Right, I am trying to use a hype function based on a function I have for something externally (the function being returned works in a simple jsfiddle) however doesn’t work in the hype function and am unsure how to acheive the same functionality?

Skip-Test.hype.zip (192.0 KB)


(Loves Hype) #9

Hope this helps. Please look at the code:

  • it uses my server but I included that rudimentary switching in PHP
  • PHP file has a strange name but thats the id of this thread so I know why I have this on my server :wink:
  • I allowed cross origin … please disable that in production!
  • it uses atomic.js a great little library for Ajax in vanilla JS
  • I just send the currentSceneName and return nextSceneName but you can return more data and send more data to create more sophisticated switching
  • if you want to save data between scenes just store it in hypeDocument.customData

Download:
AjaxData_forum_14448_switching.zip


(Loves Hype) #10

Here is another example

  • Sends more values and gets more returns and displays them
  • Even send a random number and returns it to show a round trip of data
  • caches last response in customData

Download:
AjaxData_forum_14446_switching.zip

Hint:
You could actually also make the request on Scene load and then only use the cache data to forward at the end of a scene instead of making the call at the end… either way you hopefully get the picture.

You could trigger animations based on data see https://tumult.com/hype/documentation/3.0/#startTimelineNamed


#11

This is super helpful! Thank you MaxZieb.

I’ve got to work out how to integrate it into my data and how it comes from the database but this really gives me a proper way of doing it.

I have nearly 10 different data sets to work with so this will help for most of them :slight_smile:

Much appreciated