Need to Activate Placeholder After X min of Idle Time

  • 1
  • Question
  • Updated 3 years ago
  • Answered
I have a touch app/presentation running successfully.    I want to trigger a video (using the appropriate placeholder) when the screen has not been touched for X minutes.   I have seen and read lots of posts including some outside this community and I have yet to find the exact code to help me do this.

I admit I am NOT a javascript or jquery developer........ but I know enough to have created a complex touch app.

Please help!
Photo of Karen Masulis

Karen Masulis

  • 370 Points 250 badge 2x thumb
  • frustrated

Posted 3 years ago

  • 1
Photo of Blake Freeman

Blake Freeman, Official Rep

  • 36,116 Points 20k badge 2x thumb
Hi Karen,

Rise Vision doesn't have this functionality 'built-in' per se, but it's certainly a possibility with some custom code. Let me get some other eyes on this thread, perhaps someone will have a suggestion on how to accomplish this.
Photo of mlm

mlm, Official Rep

  • 4,624 Points 4k badge 2x thumb
Here is a blog post on specifically what you are asking.
http://blog.risevision.com/developer-tips-tricks-inactivity-timeouts-in-multi-page-presentations/
You will want to put your video on the home page or div that the timer expires to.

The example template in that article may no longer be available but I have copied the entire html into a pen for you: http://codepen.io/mmeiers/pen/jPowOg

Just copy the entire html and create a new presentation in rise vision and paste and replace everything within html view.

Hope that helps,
Mat
Photo of Karen Masulis

Karen Masulis

  • 370 Points 250 badge 2x thumb
I have tried everything I can think of but cannot get the code to work. If anyone is willing to help me for free that would be great.
Photo of Joseph Mayberry

Joseph Mayberry

  • 1,206 Points 1k badge 2x thumb
To make this work you need a few things:

First, a function that, when called, displays the content (in this case the video) that you want shown. (I'll call it showContent() for now)
Second, a listener to check for interaction with the display.
Third, a timer, that will reset when the listener detects interaction AND will call the function to show your content when it finally completes.

There are a lot of different ways to do the first (and Rise Vision has good documentation on that in their Multipage presentation documents). So I will focus on the remaining steps.


The Timer: I'd declare this in a document.ready( function() {} ) 
Inside I'd do something like this:

var idleTimer = setTimeout( showContent(), time); //might have to declare this variable globally, but I'd set it in the document.ready function

where time is the time in milliseconds that you want to wait before showing the content.


The Listener: Again, I'd declare this in the document.ready function.

would be worth looking up the various jquery listeners. One that would make sense here could be mousemove.

If you are declaring inside of the document.ready function the following code should work:

$(this).mousemove(function () {
  clearTimeout(idleTimer); //this stops the original idle timer since the display is no longer idle
  idleTimer = setTimeoout(showContent(), time); //restarts the idle timer right away since any additional interactions will also reset the timer
  //you can also call another function here that hides the video content (if it is being displayed) allowing your presentation to "wake up" on user interaction)
});
(Edited)
Photo of mlm

mlm, Official Rep

  • 4,624 Points 4k badge 2x thumb
Great summary Joseph!
Photo of Karen Masulis

Karen Masulis

  • 370 Points 250 badge 2x thumb
Thank you so much for responding.   Do you know if this is testable within preview mode?  Or do I have to run the presentation on the player to see if it works?

I have a page with id 999 for the video and my home page is 1.  Do I need anything else in the header or elsewhere?

$(document).ready(function() {
var idleTimer = setTimeout( showPage("999"), 3000);
$(this).mousemove(function () {
 clearTimeout(idleTimer);                        
 idleTimer = setTimeoout(showPage("999"), 3000); 
});

//Show home page.
showPage("1");
});
Photo of Joseph Mayberry

Joseph Mayberry

  • 1,206 Points 1k badge 2x thumb
Since all of this is being done through straight html and js it should be testable through the preview as well as the player (I have found that the player can sometimes behave differently then the preview, depending on hardware and stuff like that... so I would suggest testing on a player before pushing it to one of your live displays, but while you are putting it together it should be fine to test with just the preview).


As for the code itself, the sections that you have in place for the idle timer should work for displaying the video page once the display has been idle for a period of time (you have your time set to 3 seconds right now).

Your code doesn't have a means of returning to the home page right now (where you are calling the showPage("1"); will only call it once on page load). I am not certain how you want this to behave, but you could also call this within the mousemove listener. It would look a bit like this:

$(this).mousemove(function () {
  clearTimeout(idleTimer);
  showPage("1");
  idleTimer = setTimeout(showPage("999"), 3000);
});


A note, this method is fairly aggressive (it will call the display to load the home page EVERY time mouse movement is detected). So if you have additional pages, besides the video and the home page, it might be worth while to create some additional functions to handle restarting your main content. Places like w3school and stackoverflow can be great resources if you need help creating these additional functions.
Photo of Karen Masulis

Karen Masulis

  • 370 Points 250 badge 2x thumb
Thank you!   
Photo of Blake Freeman

Blake Freeman, Official Rep

  • 36,116 Points 20k badge 2x thumb
Joseph always comes through!