I’m creating a Hype Document that dynamically loads images into scenes, one per scene and there are ten scenes. The idea is that the user can swipe between the different scenes, Easy enough. What’s the best way to dynamically stop the user from being able to swipe if they’ve reached the end. For example, if there are only seven images and therefore only the first seven scenes have images. I don’t want them to be able to swipe to a blank 8th scene. Is there any way to dynamically stop them from being able to swipe to the next scene?
The answer is a Hype Function and the Hype API. Well how are you preloading/replacing images?
Hi Max. I have a function that reads in JSON data from an external file that has an array of the URLs of external jpeg files on my server. It then creates HTML image tags with that image source and sets the innerHTML of rectangle elements in each scene to a corresponding image tag. How would I use a Hype Function or the Hype API to prevent them swiping to an empty scene?
We would need to see your document to determine the best way to do this -- it might be as simple as playing a timeline which blocks the swipe target with a rectangle.
Hi Daniel,
It’s part of a project that’s way too big to package up and share here. But I just need a pointer as to how to do it. Writing code is simple for me. So I could easily show a rectangle if that would do it. How does that block someone from swiping? Doesn’t the page turn feature work regardless of what elements are in the scene. Anything that can help me block that functionality would be great.
Your Array has got a length. Disable swiping when the Scene corresponding to this length ist reached …
That part I understand. What I don’t know is how to disable swiping. How is that done from code?
Did you have a look at Hypes API? What ist your Code to handle swiping?
I guess it’ll be not to complicated to set up a simple example of your setup …¿
something like this:
if(hypeDocument.sceneNames().indexOf(hypeDocument.currentSceneName()) == yourArray.length){
return }else{
hypeDocument.showNextScene(hypeDocument.kSceneTransitionCrossfade, 1.1)
}If you know that your array length is 30, then if someone swipes on the 30th scene to go to the 31st scene (which would be blank), just instantly transition them back to the 30th scene, or show some animation.
In code, you could get the current scene number (or just map scene names to their actual order), and then create a function loaded 'on scene load' for each scene which does a little check for you.
My apologies. I wasn’t clear and called it the wrong thing. I’m talking about the page turning, not the swipe event. I need the page turn transition and I’m wondering how to prevent it when I get to the end of the array. I know how I could do it with swipe but I’m not a big fan of swiping and changing scenes. And I love the page turning.
@jonathan Is there a way to prevent the user from page turning (on SwipeLeft or On SwipeRight) when a page turn transition is set? I’m trying to dynamically set up a slide show with x number of slides where they page turn through them but won’t end up on a blank slide if there are less slides than the number of scenes in the Hype Document.
hack:
ondocumentload or firstsceneload:
var arrayLength = 3;//your count of array elements
//the scene that should be empty
var query = `.HYPE_scene[hype_scene_index=\"${ arrayLength }\"]`;
var hypeDoc = document.getElementById(hypeDocument.documentId());
var emptySceneElement = hypeDoc.querySelector(query);
//hide it
if(emptySceneElement){
emptySceneElement.style.visibility = 'hidden';
}
and additional on swipe right:
var arrayLength = 3;//your count of array elements ... of course this should be a hypeglobal ...
if(hypeDocument.sceneNames().indexOf(hypeDocument.currentSceneName()) == (arrayLength-1)){
hypeDocument.showSceneNamed(hypeDocument.currentSceneName());
}
works on a simple test.
Note: a display property would be overwritten by hype …
Thank you Hans! That’s brilliant. I hadn’t thought of hiding the blank scenes. And thanks for making a test hype document. I was able to swipe past the last non-blank scene in your test. It takes me several attempt to do it but I get past it to a blank white screen. I’m running it on the web from my Mac. Haven’t tried it on mobile. Does your test stop you from doing that?
switch from current scene to last scene with content and turn the check to >=
could work 
if you need a hook -> start a feature request 
First, perhaps to state the obvious, that page turn transitions can't be programmatically created -- therefore if your slides are individual scenes then the way to avoid page turning to another scene is to just not have the page turn transition onto the next scene! But I'm guessing that isn't what you had in mind...
If you need to conditionally allow/disallow page turning you could also put a blank element over the scene that has an On Drag action set to it. You could animate or program its display property when you want it to change states. I'd put this as the lowest element on the scene so it doesn't interfere with other element mouse actions.
Thank you Jonathan! I think the second part of your answer is exactly what I’m needing - a way to block the page turning events dynamically.
Yes, you can’t dynamically create page turn transitions. The idea is to have x number of scenes (let’s say 10) and then to load in one slide per scene - it could be 5, 6, 8, 10 etc. And to prevent the page turning when there is less than 10 slides. I think your method, blocking the drag events, will work.
1 Like