---
title: "ClickPane"
language: "en"
type: "Symbol"
summary: "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. ClickPane[image, {{xmin, ymin}, {xmax, ymax}}, func] specifies the range of coordinates to use."
keywords: 
- image map
- imagemap
- mouse click
- mouse down
- mouse events
canonical_url: "https://reference.wolfram.com/language/ref/ClickPane.html"
source: "Wolfram Language Documentation"
related_guides: 
  - 
    title: "Click-Interactive Panels"
    link: "https://reference.wolfram.com/language/guide/ClickInteractivePanels.en.md"
  - 
    title: "Custom Interface Construction"
    link: "https://reference.wolfram.com/language/guide/CustomInterfaceConstruction.en.md"
  - 
    title: "Graphics Interactivity & Drawing"
    link: "https://reference.wolfram.com/language/guide/GraphicsInteractivityAndDrawing.en.md"
  - 
    title: "Dynamic Visualization"
    link: "https://reference.wolfram.com/language/guide/DynamicVisualization.en.md"
  - 
    title: "Control Objects"
    link: "https://reference.wolfram.com/language/guide/ControlObjects.en.md"
  - 
    title: "Standalone Interfaces"
    link: "https://reference.wolfram.com/language/guide/StandAloneInterfaces.en.md"
related_workflows: 
  - 
    title: "Use Locator Controls"
    link: "https://reference.wolfram.com/language/workflow/UseLocatorControls.en.md"
  - 
    title: "Build a Manipulate"
    link: "https://reference.wolfram.com/language/workflow/BuildAManipulate.en.md"
related_functions: 
  - 
    title: "LocatorPane"
    link: "https://reference.wolfram.com/language/ref/LocatorPane.en.md"
  - 
    title: "Pane"
    link: "https://reference.wolfram.com/language/ref/Pane.en.md"
  - 
    title: "Button"
    link: "https://reference.wolfram.com/language/ref/Button.en.md"
  - 
    title: "Manipulate"
    link: "https://reference.wolfram.com/language/ref/Manipulate.en.md"
  - 
    title: "ArrayPlot"
    link: "https://reference.wolfram.com/language/ref/ArrayPlot.en.md"
  - 
    title: "GestureHandler"
    link: "https://reference.wolfram.com/language/ref/GestureHandler.en.md"
  - 
    title: "EventHandler"
    link: "https://reference.wolfram.com/language/ref/EventHandler.en.md"
related_tutorials: 
  - 
    title: "Introduction to Dynamic"
    link: "https://reference.wolfram.com/language/tutorial/IntroductionToDynamic.en.md"
---
# ClickPane
⚠ *Unsupported in Cloud*

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.

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  | Automatic    | whether to pass events to inner event handlers |
| PassEventsUp    | True         | whether to pass events to outer event handlers |

---

## Examples (15)

### Basic Examples (2)

Move the point to where the "click" occurred:

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

Out[1]= DynamicModule[«3»]
```

---

Center the disk on mouse clicks:

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

Out[1]= DynamicModule[«3»]
```

### Scope (2)

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

```wl
In[1]:= DynamicModule[{pt = {0, 0}}, {ClickPane[Panel[20!], (pt = #)&], Dynamic[pt]}]

Out[1]= DynamicModule[«3»]
```

---

Automatically rescale the coordinates to run from $-5$ to $5$ :

```wl
In[1]:= DynamicModule[{pt = {0, 0}}, {ClickPane[Panel[20!], {{-5, -5}, {5, 5}}, (pt = #)&], Dynamic[pt]}]

Out[1]= DynamicModule[«3»]
```

### Options (3)

#### Method (1)

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

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

Out[1]= DynamicModule[«3»]
```

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

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

Out[2]= DynamicModule[«3»]
```

#### PassEventsDown (1)

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

```wl
In[1]:= DynamicModule[{pt = {0, 0}}, {ClickPane[Framed[Graphics[Inset[Button["print", Print["fish"]]]]], (pt = #)&], Dynamic[pt]}]

Out[1]= DynamicModule[«3»]
```

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

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

Out[2]= DynamicModule[«3»]
```

#### PassEventsUp (1)

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

```wl
In[1]:= 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]}}]]

Out[1]= DynamicModule[«3»]
```

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

```wl
In[2]:= 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]}}]]

Out[2]= DynamicModule[«3»]
```

### Applications (6)

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

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

Out[1]= Dynamic[ParametricPlot[f, {t, 0, 10}, PlotRange -> 5]]
```

---

Keep track of all solutions as you go:

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

Out[1]= DynamicModule[«3»]
```

---

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

```wl
In[1]:=
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)]]]

In[2]:= createCircle[pts_] := {}

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

Out[3]= DynamicModule[«4»]
```

---

Detect whether you are inside or outside a disk:

```wl
In[1]:= 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"])&]]

Out[1]= DynamicModule[«3»]
```

---

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

```wl
In[1]:= 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]]]})&]]

Out[1]= DynamicModule[«3»]
```

---

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

```wl
In[1]:= 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]}])&]]

Out[1]= DynamicModule[«3»]
```

### Properties & Relations (1)

``ClickPane`` is a special case of ``EventHandler`` :

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

Out[1]= DynamicModule[«3»]

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

Out[2]= DynamicModule[«3»]
```

### Possible Issues (1)

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

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

Out[1]= DynamicModule[«3»]
```

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

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

Out[2]= DynamicModule[«3»]
```

## See Also

* [`LocatorPane`](https://reference.wolfram.com/language/ref/LocatorPane.en.md)
* [`Pane`](https://reference.wolfram.com/language/ref/Pane.en.md)
* [`Button`](https://reference.wolfram.com/language/ref/Button.en.md)
* [`Manipulate`](https://reference.wolfram.com/language/ref/Manipulate.en.md)
* [`ArrayPlot`](https://reference.wolfram.com/language/ref/ArrayPlot.en.md)
* [`GestureHandler`](https://reference.wolfram.com/language/ref/GestureHandler.en.md)
* [`EventHandler`](https://reference.wolfram.com/language/ref/EventHandler.en.md)

## Tech Notes

* [Introduction to Dynamic](https://reference.wolfram.com/language/tutorial/IntroductionToDynamic.en.md)

## Related Guides

* [Click-Interactive Panels](https://reference.wolfram.com/language/guide/ClickInteractivePanels.en.md)
* [Custom Interface Construction](https://reference.wolfram.com/language/guide/CustomInterfaceConstruction.en.md)
* [Graphics Interactivity & Drawing](https://reference.wolfram.com/language/guide/GraphicsInteractivityAndDrawing.en.md)
* [Dynamic Visualization](https://reference.wolfram.com/language/guide/DynamicVisualization.en.md)
* [Control Objects](https://reference.wolfram.com/language/guide/ControlObjects.en.md)
* [Standalone Interfaces](https://reference.wolfram.com/language/guide/StandAloneInterfaces.en.md)

## Related Workflows

* [Use Locator Controls](https://reference.wolfram.com/language/workflow/UseLocatorControls.en.md)
* [Build a Manipulate](https://reference.wolfram.com/language/workflow/BuildAManipulate.en.md)

## History

* [Introduced in 2007 (6.0)](https://reference.wolfram.com/language/guide/SummaryOfNewFeaturesIn60.en.md)