Tracking Mouse Events

This page shows how to use divgraph.js to easily track the user's mouse movement and clicking. Note that when you click on the graph below, the (x,y) coordinates in the graph's system are recorded, and up to 50 points are displayed on the graph.

Left-Button Points


Show mousedown event

Right-Button Points

The initial graph in this case is produced by the function dograph(), which plots a pair of axes and a hidden (transparent) point that will be used for the running coordinate position display. A maximum of 50 points will be displayed. 

function dograph(){
 GRsetgraphwindow()
 Info=new Array()
 Info.style=".xaxisnum {font-size:8pt} .yaxisnum {font-size:8pt}"
 Info.xmin=Info.ymin=0
 Info.xmax=Info.ymax=10
 Info.graphleft=75
 Info.graphtop=30
 Info.graphwidth=200
 Info.graphheight=150
 Info.ticwidth=1
 Info.dogridx=Info.dogridy=true
 Info.xaxislabel=""
 Info.yaxislabel=""
 Info.ptsize=4
 Info.anchor="Graph1"
 Info.maxaddpoints=50
 Data=new Array([6.5,12,"transp"])
 Info.onmousedown="mousedown"
 Info.onmousemove="mousemove"
 GRdrawgraph("",Data,"",Info)
}

The key parameters of interest in this case are Info.onmousedown="mousedown" and Info.onmousemove="mousemove", which direct divgraph.js to send a call to mousedown() when the mouse is pressed down and mousemove() when the mouse is moved. In addition, to be compatible with Microsoft Interent Explorer, the <body> tag must contain the following directives for the mousedown and mousemove events: 

  onmousemove=GRmouseevent()
  onmousedown=GRmouseevent()

(Info.onmouseup is also an option that can be used to track the dragging of objects.) The function GRmouseevent() handles mousemove, mouseup, and mousedown events, translating the coordinates provided by the browser, and creating the following structure:

D.ngraph

the number of the graph the click or move was in

D.button

the button pressed (left=1, middle=2, right=3)

D.docx

the document-based x-coordinate

D.docy

the document-based y-coordinate

D.anchorx

the anchor-based x-coordinate

D.anchory

the anchor-based y-coordinate

D.userx

the user-based x-coordinate

D.usery

the user-based y-coordinate

This structure is passed on to the functions mousemove() and mousedown() along with the event structure created by the browser (which in this case is ignored). 

function mousemove(e,D){
 showxy(D.userx,D.usery)
}
function mousedown(e,D){
 showxy(D.userx,D.usery)
 addtextpoint(D.userx,D.usery,D.button)
 if(document.info.showevent.checked)GRdebugwrite(GRshow(D,"D")+"\nNote: the \"e\" object would be different using "+(GR.isnn4?"Explorer":"Navigator")+".\n\n"+GRshow(e,"e"))
}

These functions in turn call showxy() and addtextpoint, which provide the feedback shown here. 

function showxy(x,y){
 GRdivwrite(GR.List[1].ptdata0,"<h3>("+GRroundoff(x)+","+GRroundoff(y)+")</h3>")
}
function addtextpoint(x,y,button){
 if(isNaN(x) || isNaN(y))return
 var s=GRroundoff(x)+","+GRroundoff(y)
 ;(button==1?document.info.leftbutton.value+=s+"\n":document.info.rightbutton.value+=s+"\n")
 GRaddpoint(x,y,"("+s+")"+"| "+(GR.List[1].nadd+1),(button==1?"red":"blue"))
}

Thus, to intercept the user's mouse actions, you need to:

  1. Indicate which mouse events you want to intercept in the Info structure, along with the functions you are providing to handle the event information.

  2. Add "onmouse...=GRmouseevent()" parameters to the <body> tag for compatibility with Microsoft Internet Explorer.

  3. Provide functions to handle each desired event.

Once this is done, you can have full interaction with the user in your coordinate system. There are many applications other than graphing for which this might be useful. You could, for example, offer the user a GIF image and, displaying no axes (using Info.doxaxis=Info.doyaxis=false), ask the user to point to various places on the image, giving appropriate feedback as they do. This could also be done with imagemaps, but that is far more cumbersome in terms of preparation time and translation of coordinates, and isn't a solution for graphing done real-time.)

1.0
2.0
3.0
4.0
5.0
6.0
7.0
8.0
9.0
0
1.0
2.0
3.0
4.0
5.0
6.0
7.0
8.0
9.0
10.0
back to the list of examples

copyright 2001 Robert M. Hanson. All rights reserved. divgraph.js is freely distributable for noncomercial purposes, provided reference is made as "divgraph.js was developed at St. Olaf College by Robert M. Hanson (http://www.stolaf.edu/people/hansonr/divgraph)." Commercial licensing is available for specific purposes.