Can I add a 'screensaver mode' to a presentation?

HI. I have a hype presentation that runs on a touchscreen at an exhibition. The client has asked if, when nobody is using it for a while, can it start to play a bunch of still images. Just like a screensaver. Then when someone starts to interact with it we jump to the start of the main presentation.
Is this possible? I’m no programmer (Why I love Hype) so I wouldn’t know where to start with javascript etc.

Many thanks
Roger

1 Like

Short answer “yes”.

Long answer (warning technical speak).
You would basically run a “timer” and reset it whenever someone moves through the presentation. Once they stop the “timer” would continue for a set amount of time (30 secs, 1 minute) which would / could then jump to a scene that plays the images on it’s Main Timeline (like a screensaver) and of course once someone clicks on that “scene” (the one that is playing the timeline) then the timeline could stop and redirect to scene 1 (beginning of presentation).

So, you would have something similar to this. (The following code may have to be adapted to your situation)

var timer = setTimeout( function () {
    hypeDocument.showSceneNamed('ScreenSaver', hypeDocument.kSceneTransitionCrossfade, 0.4)
}, 30000) // 30 secs (1000ms * 30)

Then on Scene Load of the ScreenSaver scene you would have another function that listens for a “mouse click” (touch) and when that happens it would jump to the beginning scene.

Something like,

element.addEventListener('click', function () {
    hypeDocument.showSceneNamed('start', hypeDocument.kSceneTranstionInstant)
})

Thats a great idea! So where do I add the timer code? At the very first scene I guess, using on scene load? But then how do I reset it as people are using the interactive… Do I just add this code to every scene load so that it keeps getting reset to the start as people are doing things? Also, I have some fairly long videos that pop up and play, can I somehow switch off/pause the timer while they’re playing, so that it doesn’t jump to the screensaver scene half way through a video?

Sorry if this sounds obvious but as I say, I’m not a coder…

Many thanks
Roger

It’s probably better I show you with a document. :slight_smile:

The images I just grabbed to make it small file size. You could animate and add whatever images you wanted.

Also, I changed the timer amount to 3000 (3 secs) so you don’t have to wait so long. In reality you would want to change this to a higher amount (in ms 1000 = 1 sec)

screenSaverOnTimer.hype.zip (202.8 KB)

As you can see the “timer” is set on first scene load and then subsequent scenes it is cleared and set again. Then on the ScreenSaver scene you don’t have to. (of course) and you just add a listener to that scene only (element.addEventListener … ) and when clicked it goes back to whichever scene you want. In this case the first scene.

1 Like

Fantastic! Exactly what I needed. Many thanks for taking the time to make a scene.

R

Thanks for this - a lifesaver on a kiosk project! I’m using an Android device for the screensaver, and if someone starts to fill out the form, then leaves, the virtual keyboard stays up on the screen over the screensaver. Do you know how to fake a touch somewhere on the page prior to the screensaver content starting? I found this page (http://www.domenlightenment.com/#11.13) but can’t seem to make it work.

Couldn’t see the forest for the trees - used
if(document.activeElement) {
document.activeElement.blur();
}
To just hide the keyboard!

Depending on your document and I don’t know your setup. I would add some code to the timer that is set on each scene that “blurs” all the form elements. You would have to add classes I would think to all the elements or if you’re using just inputs then use that tag to find them.

It’s been almost a year since I did this code. Let me refresh my memory and perhaps you can share what you have? and I can come up with something.

If anything is sensitive, you can PM me.

EDIT
I would add this code inside the timeout function. “element” here is the scene as this code in my example is run on scene load.

var inputs = element.querySelectorAll('input');
for(var i=0; i < inputs.length; i++){
	inputs[i].blur();
}

or

var inputs = element.querySelectorAll('.className');
for(var i=0; i < inputs.length; i++){
	inputs[i].blur();
}

The code in context:

timer = setTimeout( function () {
	// gather all inputs in an array and the blur them using a loop
	var inputs = element.querySelectorAll('input');
	for(var i=0; i < inputs.length; i++){
		inputs[i].blur();
	}
	// show the screensaver scene
	hypeDocument.showSceneNamed('ScreenSaver', hypeDocument.kSceneTransitionCrossfade, 0.4)
}, 3000) // 30 secs (1000ms * 30) 30)

####You could also use the document.activeElement.blur(); code in place of the inputs code too. You mention you tried that but had no success.

timer = setTimeout( function () {
	// blur the documents active element
    if(document.activeElement){
        document.activeElement.blur();
    }
	// show the screensaver scene
	hypeDocument.showSceneNamed('ScreenSaver', hypeDocument.kSceneTransitionCrossfade, 0.4)
}, 3000) // 30 secs (1000ms * 30) 30)

The thing is, as the screensaver is another scene then the active elements should blur anyway when transitioning to the scene. It would be interesting to see your setup.

1 Like