Touch screen tv

Ask the community
,
1

Has anyone know how to create a motion screen saver for your WIX sight. I am in need of one to use for a touch screen tv, which is where the site is located. I am looking for when the screen is stagnant after 10 sec. it would go to the screensaver

2

Hi Colleen,

Add the ‘screen saver’ element to the page (could be a gif or a video), collapse it on load.
Next, create a function that will count 10 seconds then expand the screen saver element.

Each page click will fire the onClick event - even if the visitor clicked a different page element. in this case, both onClick events will fire.

3

I created an example that monitors page clicks and displays a screen saver if idle time is longer than 6 seconds
Check it out here
https://idoi240.wixsite.com/cookie/dasd

The code is not so clean but it does the job:


let lastClick;
const timeout = 5000;

export function page1_click(event, $w) {
  resetCounter();
}

function resetCounter() { 
  $w('#screenSaver').collapse();
  lastClick = Date.now();
 return new Promise(resolve => {
    setTimeout(() => {
    shouldShowScreenSaver(isIdle());
    }, timeout + 500);
  });
}

function isIdle() {
 return (Date.now() - lastClick) > timeout 
}

function shouldShowScreenSaver(shouldShow) {
 if (shouldShow) {
    $w('#screenSaver').expand();
  }
 else {
    $w('#screenSaver').collapse();
  }
}
4

Open a Lightbox (full screen) with video on Overlay background.
Set up Overlay => “Clicking closes lb” on.