WOLFRAM

Wolfram Language & System Documentation Center

ClickPane[image,func]

represents a clickable pane that displays as image and applies func to the coordinates of each click within the pane.

ClickPane[image,{{xmin,ymin},{xmax,ymax}},func]

specifies the range of coordinates to use.

Details and Options
Details and Options Details and Options
Examples  
Basic Examples  
Scope  
Options  
Method  
PassEventsDown  
PassEventsUp  
Applications  
Properties & Relations  
Possible Issues  
See Also
Tech Notes
Related Guides
Related Workflows
History
Cite this Page

ClickPane

ClickPane[image,func]

represents a clickable pane that displays as image and applies func to the coordinates of each click within the pane.

ClickPane[image,{{xmin,ymin},{xmax,ymax}},func]

specifies the range of coordinates to use.

Details and Options

  • The image in a click pane can be a graphic or any other expression.
  • For a Graphics object g, ClickPane[g,func] by default takes the range of coordinates supplied to func to be the range of graphics coordinates corresponding to PlotRange in g.
  • For a general expression, ClickPane[expr,func] takes the range of coordinates to be 0 to 1 in each direction.
  • ClickPane takes the following options:
  • Method "Preemptive"the evaluation method to use
    PassEventsDown Automaticwhether to pass events to inner event handlers
    PassEventsUp Truewhether to pass events to outer event handlers

Examples

open all close all

Basic Examples  (2)

Move the point to where the "click" occurred:

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

Center the disk on mouse clicks:

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

Scope  (2)

For a general expression, the range of coordinates is taken to be 0 to 1 in each direction:

Wolfram Language code: DynamicModule[{pt = {0, 0}}, {ClickPane[Panel[20!], (pt = #)&], Dynamic[pt]}]

Automatically rescale the coordinates to run from to :

Wolfram Language code: DynamicModule[{pt = {0, 0}}, {ClickPane[Panel[20!], {{-5, -5}, {5, 5}}, (pt = #)&], Dynamic[pt]}]

Options  (3)

Method  (1)

By default, the function is evaluated on a preemptive link and times out after 5 seconds:

Wolfram Language code: DynamicModule[{pt = {0, 0}}, {ClickPane[Framed@Graphics[{Yellow, Dynamic@Disk[pt]}, PlotRange -> 5], (Pause[6];pt = #)&], Dynamic[pt]}]

Use Method->"Queued" to evaluate the function on the main link, which never times out:

Wolfram Language code: DynamicModule[{pt = {0, 0}}, {ClickPane[Framed@Graphics[{Yellow, Dynamic@Disk[pt]}, PlotRange -> 5], (Pause[6];pt = #)&, Method -> "Queued"], Dynamic[pt]}]

PassEventsDown  (1)

By default, clicking the button triggers the ClickPane but not the button:

Wolfram Language code: DynamicModule[{pt = {0, 0}}, {ClickPane[Framed[Graphics[Inset[Button["print", Print["fish"]]]]], (pt = #)&], Dynamic[pt]}]

Use PassEventsDown to enable the click to register for the button as well:

Wolfram Language code: DynamicModule[{pt = {0, 0}}, {ClickPane[Framed[Graphics[Inset[Button["print", Print["fish"]]]]], (pt = #)&, PassEventsDown -> True], Dynamic[pt]}]

PassEventsUp  (1)

Clicking in the inner pane triggers both inner and outer panes:

Wolfram Language code: DynamicModule[{outer = {0, 0}, inner = {0, 0}}, Column[{Framed[ClickPane[Row[{"Outer click pane", Framed[ClickPane[{"Inner click pane"}, (inner = #)&]]}], (outer = #)&]], {"outer", Dynamic[outer]}, {"inner", Dynamic[inner]}}]]

Use PassEventsUp to disable the outer pane when the inner pane is clicked:

Wolfram Language code: DynamicModule[{outer = {0, 0}, inner = {0, 0}}, Column[{Framed[ClickPane[Row[{"Outer click pane", Framed[ClickPane[{"Inner click pane"}, (inner = #)&, PassEventsUp -> False]]}], (outer = #)&]], {"outer", Dynamic[outer]}, {"inner", Dynamic[inner]}}]]

Applications  (6)

Visualize solutions to a linear system of differential equations :

Wolfram Language code: 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:

Wolfram Language code: 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 [more info]:

Wolfram Language code: 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/4a^2) - (f/a)]]]
Wolfram Language code: createCircle[pts_] := {}
Wolfram Language code: 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:

Wolfram Language code: DynamicModule[{pt = {0, 0}, c = "Red"}, ClickPane[Framed@Graphics[{Red, Disk[], StandardGray, 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:

Wolfram Language code: 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:

Wolfram Language code: 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]}])&]]

Properties & Relations  (1)

ClickPane is a special case of EventHandler:

Wolfram Language code: DynamicModule[{pts = {}}, ClickPane[Dynamic[Framed@Graphics[Line[pts], PlotRange -> 1]], AppendTo[pts, #]&]]
Wolfram Language code: DynamicModule[{pts = {}}, Dynamic@EventHandler[Framed@Graphics[Line[pts], PlotRange -> 1], "MouseClicked" :> AppendTo[pts, MousePosition["Graphics"]]]]

Possible Issues  (1)

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

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

Use EventHandler to get additional flexibility in registering actions with events:

Wolfram Language code: DynamicModule[{pts = {}}, Dynamic@EventHandler[Framed@Graphics[Line[pts], PlotRange -> 1], "MouseDown" :> AppendTo[pts, MousePosition["Graphics"]]]]
Wolfram Research (2007), ClickPane, Wolfram Language function, https://reference.wolfram.com/language/ref/ClickPane.html.

Text

Wolfram Research (2007), ClickPane, Wolfram Language function, https://reference.wolfram.com/language/ref/ClickPane.html.

CMS

Wolfram Language. 2007. "ClickPane." Wolfram Language & System Documentation Center. Wolfram Research. https://reference.wolfram.com/language/ref/ClickPane.html.

APA

Wolfram Language. (2007). ClickPane. Wolfram Language & System Documentation Center. Retrieved from https://reference.wolfram.com/language/ref/ClickPane.html

BibTeX

@misc{reference.wolfram_2026_clickpane, author="Wolfram Research", title="{ClickPane}", year="2007", howpublished="\url{https://reference.wolfram.com/language/ref/ClickPane.html}", note=[Accessed: 13-June-2026]}

BibLaTeX

@online{reference.wolfram_2026_clickpane, organization={Wolfram Research}, title={ClickPane}, year={2007}, url={https://reference.wolfram.com/language/ref/ClickPane.html}, note=[Accessed: 13-June-2026]}