Question 190851 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – IDLE application screen saver in angular + electron

I would like to implement a ‘screen saver’ behaviour in my Angular application built with Electron when the application is idle for an amount of time (let’s say for 10 seconds). So, if 10 seconds pass in the application without any action from the user (or even the application itself?), a screen with a message should be shown, and this screen will be removed when user has any interaction with the application.

What would be the recommended way? Should I implement this behaviour in a custom way (set a timer which will be erased by any user action etc like this or is there any built-in solution in electron/Angular?

Please note that I do not want to check for the general system’s idle state, just the application’s.

UPDATE:

I have tried to use UserIdleService in this way:

this._userIdle.onIdleStatusChanged().subscribe((isIdle) => {
        if (isIdle) {
            // code to show a screen saver image
        } else {
             this._userIdle.resetTimer();
             // code to hide the screen saver image
        }
    });

But I see the event getting fired every 1 second, despite my configuration for this module which as following:

 UserIdleModule.forRoot(
        {
            idle: 100000,
            timeout: 1000000,
            ping: 60
        }
    )

What could cause this issue?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    After checked the UserIdleService code I realized that idleSensitivity parameter (which by default is 1 should be set in order to use it for inactivity check periodically). Example below:

     UserIdleModule.forRoot(
    {
        idle: 20,
        timeout: 20,
        idleSensitivity: 5,
        ping: 60
    }
)

    This configuration, combined with the following subscription on app.component.ts works fine

    this._userIdle.onIdleStatusChanged().subscribe((isIdle) => {
    if (isIdle) {
        // code to show a screen saver image
    } else {
         this._userIdle.resetTimer();
         // code to hide the screen saver image
    }
});

  2. 0

    You could use observables for that, combined with the debounce function:

    const mouseEvents = fromEvent(document, 'mousemove');

mouseEvents
  .pipe(debounceTime(10000))
  .subscribe((event: MouseEvent) => {
    // Idle screen logic here 
  });
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search