Capturing client-side mouse events JavaScript / jQuery

Introduction

A requirement to track client-side mouse tracking was presented in order to control PTZ (pan, tilt, zoom) functions of a camera.

This small JavaScript library binds to a DIV, where mouse events are tracked.  In this particular case, a DIV layover was created to sit on top of a live streaming VLC video feed.

Background

In controlling a camera’s PTZ, there may be other requirements, such as iris control.  I wanted to maximize the amount of available events originating from the mouse.

Tracked Mouse Events

The following is a list of events that can be monitored:

  • single left-click
  • double left-click
  • triple left-click
  • middle click
  • single right-click
  • double right-click
  • triple right-click
  • mouse wheel + (zoom in)
  • mouse wheel – (zoom out)

Upon depressing a button, if movement is detected, the delta X and delta Y values are tracked.  This can be used as acceleration factors, or any other control requirements.

If used for acceleration values, it is also important to ensure that an additional stop value is sent when the button is released.  For this reason, a boolean stopEventWithMovement[{what type of click}] can be set.

For example if stopEventWithMovement[“leftSingleClick”] = true:

  • left single-click with no movement – no delta (0, 0) is sent when button released
  • left single-click with movement – delta (0, 0) is sent  is sent when button released

HTML Code

The client-side HTML code is quite simple.  We simply wire up the jQuery, CSS, and mouseTracker.js references:


@{
 Layout = null;
}

<!DOCTYPE html>

<html>
<head>
 <meta name="viewport" content="width=device-width" />
 <title>Index</title>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
 <link href="~/Content/vlcstyles.css" rel="stylesheet" />
 <script type="text/javascript" src="~/Scripts/mouseTracker.js"></script>

</head>
 <body>
 <div id="centerContent">

<canvas id="mouseLayer"></canvas>

 </div>

<br />&nbsp;<br />

 If no video is loaded, or you experience slow mouse response, please download and install the appropriate media player plug-in from <a href="~/Downloads/FBVLC_0.0.2.0_vlc_2.0.5.msi">here</a>.

<div id="diagnostics">
 <div id="position"></div>
 <div id="relativePosition"></div>
 <div><span id="clicked"></span><span id="movement"></span></div>
 <div id="deltaDisplay"></div>
 <div id="zoomFactor"></div>
 </div>

 <div class="message"></div>
 </body>
</html>

You can see where we setup the content containers.  In this case, centerContent contains the video plugin along with the mouseLayer – the main DIV/CANVAS that we are binding to to track our mouse events.

Finally, we have some diagnostic information that is displayed:

CSS Code

The following CSS code is pretty self-explanatory.  The #mouseLayer can be moved around the screen, to suit your own needs, and is visible as a light-red transparency area on the screen:


&nbsp;

body {
 margin:50px 0px; padding:0px;
 text-align:center;

/* Disables text selection - no selection on double-click */
 -webkit-user-select: none; /* Chrome/Safari */
 -moz-user-select: none; /* Firefox */
 -ms-user-select: none; /* IE10+ */
 /* Rules below not implemented in browsers yet */
 -o-user-select: none;
 user-select: none;

}

#vlc-player {
 width: 570px;
 height: 400px;
 width: inherit;
 height: inherit;
 background: #555a5f; /* Old browsers */
 background: -moz-radial-gradient(center, ellipse cover, #555a5f 0%, #1c1e20 100%); /* FF3.6+ */
 background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#555a5f), color-stop(100%,#1c1e20)); /* Chrome,Safari4+ */
 background: -webkit-radial-gradient(center, ellipse cover, #555a5f 0%,#1c1e20 100%); /* Chrome10+,Safari5.1+ */
 background: -o-radial-gradient(center, ellipse cover, #555a5f 0%,#1c1e20 100%); /* Opera 12+ */
 background: -ms-radial-gradient(center, ellipse cover, #555a5f 0%,#1c1e20 100%); /* IE10+ */
 background: radial-gradient(ellipse at center, #555a5f 0%,#1c1e20 100%); /* W3C */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#555a5f', endColorstr='#1c1e20',GradientType=0 ); /* IE6-9 */
}

#centerContent{

width: 600px;
 height: 430px;
 margin:0px auto;
 text-align:left;
 min-height:250px;
 padding:15px;
 border:1px dashed #333;
 background-color:#eee;

/*background: transparent;*/

position: relative;
 padding-top: 30px;
 /*height: auto;*/
 overflow: hidden;

}

/*#centerContent iframe,
#centerContent object,
#centerContent embed {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background-color:red;
 z-index:-100000;
}*/

/* positioning is relative to the container */
#mouseLayer{
 position: absolute;
 top:10px;
 left:10px;
 height: calc(90% - 20px);
 width: calc(90% - 10px);
 /*height: auto;*/
 /*min-height:480px;*/
 margin:0px auto;
 overflow-y: auto;

z-index:1000;

 text-align:left;
 padding:15px;
 border:1px dashed #333;
 /*background-color:#0000ee;*/
 background-color:rgba(255,0,0,0.05);

padding-top: 30px;
 overflow: hidden;
}

#diagnostics{
 display:block;
 margin-top:50px;
 position:relative;
 min-width:100px;
 min-height:100px;
 background-color:#500;
 color:#fff;
}
#position{
 position:relative;
}

#relativePosition{
 position:relative;
}

#clicked{
 position:relative;
}

#zoomFactor{
 position:relative;
}

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