Capturing client-side mouse events JavaScript / jQuery

As mentioned earlier, there is the ability to track onMouseUp events if movement is detected, by setting the appropriate boolean stopEventWithMovement[] value.  You can see where these are set near the top of the code.

Because I wanted to add triple-click event tracking, a clickCounter is invoked with a 200ms timeout tracked between clicks.  We count N number of clicks, and the number of clicks that have occurred before a wait time of 200ms between clicks has been met, will be returned.  Over three clicks doesn’t seem to be of much use, but you never know.

You can see this by opening the debug console and clicking several times within the mouse tracking area.  Comment out line 253 to disable this debug output.

I wanted to give the following click functionality:

  • single left-click:  control pan/tilt (x, y)
  • double left-click: detect for single zoom-in; if still depressed, tracking either X or Y movement could add additional immediate zoom control
  • single right-click: detect for single zoom-out; if still depressed track; if still depressed, tracking either X or Y movement could add additional immediate zoom control

Other camera features such as iris control can also be implemented by the same means using say, a triple-click.

Wiring Up Events

Around line 205, you can see the code where you can hook into the events for each button click type, capturing the delta positions.

Around line 136, you can see where to hook up the end-event events.

Server-Side Activation

Obviously you don’t have to use the VLC-related code, but this library gives you pretty good control of activation and deactivation events of different mouse events.

Conclusion

Using SignalR, we can now connect our server events to the client-side events.  Instructions on how to accomplish this are out of the scope of this article.

If you are using the VLC plugin, there are some mixed results using IE, however the mouse tracking events all seem to work fine otherwise.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s