({{, (RefLink[ClickPane, paclet:ref/ClickPane])[image,func] 
represents a clickable pane that displays as image and applies func to the x,y coordinates of each click within the pane.}, {, (RefLink[ClickPane, paclet:ref/ClickPane])[image,{{(Subscript[x, min]),(Subscript[y, min])},{(Subscript[x, max]),(Subscript[y, max])}},func]
specifies the range of coordinates to use.}})

OpenersNotesSection(Spacer1)Details and Options

The image in a click pane can be a graphic or any other expression.

For a (RefLink[Graphics, paclet:ref/Graphics]) object g, (RefLink[ClickPane, paclet:ref/ClickPane])[g,func] by default takes the range of coordinates supplied to func to be the range of graphics coordinates corresponding to (RefLink[PlotRange, paclet:ref/PlotRange]) in g.

For a general expression, (RefLink[ClickPane, paclet:ref/ClickPane])[expr,func] takes the range of coordinates to be 0 to 1 in each direction.

OpenersPrimaryExamplesSection(Spacer1)Examples  (10)

OpenersExampleSection0(Spacer1)Basic Examples  (2)

Move the point to where the "click" occurred:

DynamicModule[{pt={0,0}},ClickPane[Dynamic@Graphics[{Yellow,Disk[],Black,Point[pt]},ImageSize->Tiny],(pt=#)&]]

Center the disk on mouse clicks:

DynamicModule[{pt={0,0}},ClickPane[Framed@Graphics[{Yellow,Dynamic@Disk[pt]},PlotRange->5],(pt=#)&]]

OpenersExampleSection2(Spacer1)Applications  (6)

Visualize solutions to a linear system of differential equations x'==A.x:

ClickPane[Framed@Dynamic@ParametricPlot[f,{t,0,10},PlotRange->5],(f=MatrixExp[(({{-1.1, 0.9}, {-1.4, 0.3}}))t].#)&]

Keep track of all solutions as you go:

DynamicModule[{f={}},ClickPane[Framed@Dynamic@ParametricPlot[f,{t,0,10},PlotRange->5],(AppendTo[f,MatrixExp[(({{-1.1, 0.9}, {-1.4, 0.3}}))t].#])&]]

Create a circle from three points (WebLink[[more info], http://mathworld.wolfram.com/Circle.html]):

createCircle[{{x1_,y1_},{x2_,y2_},{x3_,y3_}}]:=With[{a=Det[(({{x1, y1, 1}, {x2, y2, 1}, {x3, y3, 1}}))],d=-Det[(({{(x1^2)+(y1^2), y1, 1}, {(x2^2)+(y2^2), y2, 1}, {(x3^2)+(y3^2), y3, 1}}))],e=Det[(({{(x1^2)+(y1^2), x1, 1}, {(x2^2)+(y2^2), x2, 1}, {(x3^2)+(y3^2), x3, 1}}))],f=-Det[(({{(x1^2)+(y1^2), x1, y1}, {(x2^2)+(y2^2), x2, y2}, {(x3^2)+(y3^2), x3, y3}}))]},Circle[{-(d/(2 a)),-(e/(2 a))},(Sqrt[(((d^2)+(e^2))/(4(a^2)))-(f/a)])]]

createCircle[pts_]:={}

DynamicModule[{pts={},c={}},ClickPane[Framed@Graphics[{Dynamic[c],Point[Dynamic[pts]]},PlotRange->5],(If[Length[pts]<3,AppendTo[pts,#],pts={#}];c=createCircle[pts])&]]

Detect whether you are inside or outside a disk:

DynamicModule[{pt={0,0},c="Red"},ClickPane[Framed@Graphics[{Red,Disk[],Black,Dynamic@Arrow[{{-2,0},pt}],Dynamic@Text[Dynamic[c],{-2,0}]}],(pt=#;c=If[Norm[pt]<1,"Red","White"])&]]

Make a plot where the arrow "snaps" to the curve when you click inside the pane:

DynamicModule[{pt={π/2,3}},ClickPane[Plot[3Sin[x],{x,-6,6},Epilog->{Dynamic@Arrow[{{1,5},pt}],Text["Feature",{2,5}]},PlotRange->6],(pt={#[[1]],3Sin[#[[1]]]})&]]

Make a plot where the arrow "snaps" to one of the extrema:

DynamicModule[{pt={π/2,3}},ClickPane[Plot[3Sin[x],{x,-6,6},Epilog->{Dynamic@Arrow[{{1,5},pt}],Text["Extremum",{2,5}]},PlotRange->6],(With[{x=(2Round[-1/2+#[[1]]/π]+1)π/2},pt={x,3Sin[x]}])&]]

OpenersExampleSection3(Spacer1)Properties & Relations  (1)

(RefLink[ClickPane, paclet:ref/ClickPane]) is a special case of (RefLink[EventHandler, paclet:ref/EventHandler]):

DynamicModule[{pts={}},ClickPane[Dynamic[Framed@Graphics[Line[pts],PlotRange->1]],AppendTo[pts,#]&]]

DynamicModule[{pts={}},Dynamic@EventHandler[Framed@Graphics[Line[pts],PlotRange->1],"MouseClicked":>AppendTo[pts,MousePosition["Graphics"]]]]

OpenersExampleSection4(Spacer1)Possible Issues  (1)

For a "click" to register, you must press and release the mouse at the same point:

DynamicModule[{pts={}},ClickPane[Dynamic@Framed@Graphics[Line[pts],PlotRange->1],AppendTo[pts,#]&]]

Use (RefLink[EventHandler, paclet:ref/EventHandler]) to get additional flexibility in registering actions with events:

DynamicModule[{pts={}},Dynamic@EventHandler[Framed@Graphics[Line[pts],PlotRange->1],"MouseDown":>AppendTo[pts,MousePosition["Graphics"]]]]

({{DocumentationFooterIconsRelatedFunction.png, ({{See Also}, {(RefLink[LocatorPane, paclet:ref/LocatorPane])  ▪  (RefLink[Pane, paclet:ref/Pane])  ▪  (RefLink[Button, paclet:ref/Button])  ▪  (RefLink[Manipulate, paclet:ref/Manipulate])  ▪  (RefLink[ArrayPlot, paclet:ref/ArrayPlot])  ▪  (RefLink[GestureHandler, paclet:ref/GestureHandler])  ▪  (RefLink[EventHandler, paclet:ref/EventHandler])}})}})

({{DocumentationFooterIconsRelatedTutorial.png, ({{Tutorials}, {▪(RefLinkPlain[Introduction to Dynamic, paclet:tutorial/IntroductionToDynamic])}})}})

({{DocumentationFooterIconsRelatedGuide.png, ({{Related Guides}, {▪(RefLinkPlain[Custom Interface Construction, paclet:guide/CustomInterfaceConstruction])}, {▪(RefLinkPlain[Click-Interactive Panels, paclet:guide/ClickInteractivePanels])}, {▪(RefLinkPlain[Graphics Interactivity & Drawing, paclet:guide/GraphicsInteractivityAndDrawing])}, {▪(RefLinkPlain[Dynamic Visualization, paclet:guide/DynamicVisualization])}, {▪(RefLinkPlain[Control Objects, paclet:guide/ControlObjects])}, {▪(RefLinkPlain[Standalone Interfaces, paclet:guide/StandAloneInterfaces])}})}})