PDA

View Full Version : Ext.ux.ActivityMonitor() - User Activity/Idle Monitoring



arthurakay
16 Nov 2011, 12:14 PM
I just created a GitHub repo for a common class I've had to use on a million different projects:
- https://github.com/arthurakay/ExtJS-Activity-Monitor

This should help anyone who needs to monitor how long a user has been idle/inactive. For example, many web applications need to automatically log a user out... the Ext.ux.ActivityMonitor() class handles most of that for you, with plenty of room for customization.

Thoughts and comments are welcome! :D

mitchellsimoens
20 Nov 2011, 1:13 PM
Get that up on the App Gallery (http://www.sencha.com/apps/) son!

allan.ditzel
1 Dec 2011, 10:02 PM
Thank you for this extension!

I integrated it into my project today and it seems to be working beautifully so far. :D:D:D

arthurakay
2 Dec 2011, 3:48 AM
Awesome! I'm glad someone found this useful.

ajaxvador
2 Dec 2011, 7:20 AM
+1

arthurakay
9 Dec 2011, 10:15 AM
Just added this to the Sencha Market:
- http://market.sencha.com/addon/ext.ux.activitymonitor

twaindev
9 Dec 2011, 12:59 PM
Probably will be using this in my current project.

RodManMx
25 May 2012, 9:04 AM
This is just what I was needing, thank you!!!

ianandrewjamieson
11 Sep 2012, 12:29 AM
Hey all,

I am using this in my Sencha application, however I have come across a problem when using an embedded iframe that actually no activity is being monitored when the user is clicking around on a flash document inside an embedded iframe.

Does anyone know a solution for this?

A workaround I have implemented for the moment is to disable Activity Monitor when they open the iframe and then enable it again when they close.

The only trouble with this is that the screen saver would not come on if they just left it on the iframe page.

Thanks,

Ian

mitchellsimoens
11 Sep 2012, 4:48 AM
The issue there is that you have different documents and all user interactions go to the document within the iframe, not the top level document.

ianandrewjamieson
11 Sep 2012, 5:11 AM
The issue there is that you have different documents and all user interactions go to the document within the iframe, not the top level document.

Yeh I know, is there anyway that you can detect these interactions within the iframe?

arthurakay
11 Sep 2012, 6:03 AM
You should be able to access things using the iframe's "parent" variable:
- http://stackoverflow.com/questions/1301540/set-variable-in-parent-window-from-iframe

It will probably take some custom coding on your part... I didn't design the Activity Monitor for use cases like this. However, if you issue a working PR to the GitHub repo I'll certainly consider adding it!

As for the Flash interaction... I don't know if the ActivityMonitor will properly monitor interactions within the Flash plugin. Again, something I never thought to add/test.

ianandrewjamieson
12 Sep 2012, 1:21 AM
Thank you. Unfortuantely I don't have access to the files in the iframe so I wouldn't be able to implement the method on Stack Overflow.

I have opted for the method of when they open the iframe just to disable Activity Monitor and then enable it again once it has been closed.

Cheers,

Ian

JIMECKELS
25 Mar 2014, 6:43 AM
This has proven a great component. Thanks for sharing.

I've made a minor change to the code so that the mouse event being monitored can be configured.

For us, mousemove was a bit too overzealous, and we wanted it to be mousedown which covered our needs.



/**
* @class Ext.ux.ActivityMonitor
* @author Arthur Kay (http://www.akawebdesign.com)
* @singleton
* @version 1.0
*
* GitHub Project: https://github.com/arthurakay/ExtJS-Activity-Monitor
*/
Ext.define('Ext.ux.ActivityMonitor', {
singleton : true,


ui : null,
runner : null,
task : null,
lastActive : null,

ready : false,
verbose : false,
interval : (1000 * 60 * 1), //1 minute
maxInactive : (1000 * 60 * 30), //30 minutes
mouseEvent : 'mouseover',
secondsUntilInactive: 0,
secondsSinceLastActivity: 0,

init : function(config) {
if (!config) { config = {}; }

Ext.apply(this, config, {
runner : new Ext.util.TaskRunner(),
ui : Ext.getBody(),
task : {
run : this.monitorUI,
interval : config.interval || this.interval,
scope : this
}
});
this.secondsUntilInactive = this.maxInactive;

this.ready = true;
},

isReady : function() {
return this.ready;
},

isActive : Ext.emptyFn,
isInactive : Ext.emptyFn,

start : function() {
var me = this;

if (!me.isReady()) {
me.log('Please run ActivityMonitor.init()');
return false;
}
/**
* we changed this from ousemove to mousedown
* to be less cpu consumming
*/
me.ui.on(me.mouseEvent, me.captureActivity, me);
me.ui.on('keydown', me.captureActivity, me);

me.lastActive = new Date();
me.log('ActivityMonitor has been started.');

me.runner.start(me.task);
return true;
},

stop : function() {
var me = this;

if (!me.isReady()) {
me.log('Please run ActivityMonitor.init()');
return false;
}

me.runner.stop(me.task);
me.lastActive = null;

me.ui.un(me.mouseEvent, me.captureActivity);
me.ui.un('keydown', me.captureActivity);

me.log('ActivityMonitor has been stopped.');
return true;
},

captureActivity : function(eventObj, el, eventOptions) {
this.lastActive = new Date();
},

monitorUI : function() {
var now = new Date(),
inactive = (now - this.lastActive);

this.secondsSinceLastActivity = (inactive / 1000).toFixed();
this.secondsUntilInactive = (this.maxInactive / 1000).toFixed() - this.secondsSinceLastActivity;
if (inactive >= this.maxInactive) {
this.log('MAXIMUM INACTIVE TIME HAS BEEN REACHED');
this.stop(); //remove event listeners

this.isInactive();
}
else {
this.log('CURRENTLY INACTIVE FOR ' + inactive + ' (ms)');
this.isActive();
}
},

log : function(msg) {
if (this.verbose) {
Ext.log(msg);
}
}

});

arthurakay
25 Mar 2014, 6:45 AM
Submit a PR to my GitHub repo... :D