Deutsch   English   

9. Mouse events

 

 

YOU LEARN HERE...

 

to write programs that react on a mouse clicks or on a mouse movements. This programming concept is often used in programs with a graphical user interface.

 

 

EXAMPLES

 

The following programming technique is used for mouse events:
You define in a function (the so-called callback function) what should happen when a mouse button is pressed. This function is never called explicitly in your own program code, but automatically by the system when a mouse event occurs. To do this, you must tell the system what it is called. This is also known as “registering the callback”).

Example 1: Drawing circles with mouse clicks
The callback function onMousePressed(x, y) draws a small circle at the position of the mouse click. This function is registered when makeGPanel() is called with a so-called named parameter mousePressed = onMousePressed.

The name of the callback function can be freely chosen. However, the name of the named parameter with which the callback function is registered in makeGPanel() must be mousePressed or mouseClicked.

 

Program:     

# Gp9a.py

from gpanel import *

def onMousePressed(x, y):
    pos(x, y)    
    fillCircle(1)

makeGPanel(0, 20, 0, 20, mousePressed = onMousePressed)
setColor("cyan")
► Copy to clipboard

 

Example 2: Capturing a mouse movement
A callback that is registered with the parameter mouseMoved reacts to the mouse movements.
If it is registered with the mouseDragged parameter, it reacts to mouse movements with the mouse button held down.

In the example, a mouse movement with the mouse button held down creates funny tube-like figures.

 

Program:     

# Gp9b.py

from gpanel import *      

def onMouseDragged(x, y):
    pos(x, y)
    setColor("cyan")
    fillCircle(.04) 
    setColor("black")
    circle(.04)  

makeGPanel(mouseDragged = onMouseDragged)
► Copy to clipboard


Example 3: Drawing with the mouse button held down
You can create a simple drawing program with mouse events. To do this, use the function draw(x, y) die bei jedem Aufruf der Callbackfunktion onMouseDragged() which draws a line to the current mouse position (and sets the graphics cursor to x, y) each time the callback function onMousePressed() is called. The callback onMousePressed() is required to set the graphics cursor to the current mouse position.
 

The two callback functions are registered simultaneously with named parameters when the GPanel is created.

Program:     

# Gp9c.py

from gpanel import *

def onMousePressed(x, y):
    pos(x, y)

def onMouseDragged(x, y):
    draw(x, y)

makeGPanel(mousePressed = onMousePressed, 
           mouseDragged = onMouseDragged)
► Copy to clipboard

 

Example 4: Filling areas with mouse clicks

In the example, you first draw an 8x8 grid. With mouse clicks, you can then fill the grid fields with the function
fill(x, y, "white", "red")
where (x, y) is the position of the mouse click, white is the old color and red is the new color.

 

Program:     

# Gp9d.py

from gpanel import *

def drawGrid():
    for k in range(8):
        for i in range(8):
            rectangle(i, k, i + 1, k + 1)  
    
def onMousePressed(x, y):
    fill(x, y, "white", "red")   

makeGPanel(-1, 9, -1, 9, mousePressed = onMousePressed)
drawGrid()
► Copy to clipboard
 


 

Example 5: Using the left and right mouse button

The left mouse click marks the squares in red, the right mouse click deletes the marking.

isLeftMouseButton(): Returns True if the left mouse button was pressed.

isRightMouseButton(): Returns True if the right mouse button has been pressed

 

Program:    

# Gp9e.py

from gpanel import *

def drawGrid():
    for k in range(8):
        for i in range(8):
            rectangle(i, k, i + 1, k + 1)  
    
def onMousePressed(x, y):
    if isLeftMouseButton():
        fill(x, y, "white", "red")   
    if isRightMouseButton():    
        fill(x, y, "red", "white")   

makeGPanel(-1, 9, -1, 9, mousePressed = onMousePressed)
drawGrid()
► Copy to clipboard

 

 

REMEMBER YOU...

 

In a callback function, you define what should happen when a mouse button is pressed or a mouse is moved. This function is not called by the program, but directly by the system when such an event has occurred. The callback function must be registered when the GPanel is created.

Pressing a mouse button can be registered with two different callbacks: a press event or a click event. The click event is only triggered after the button is released, while the press event is triggered when the mouse button is pressed. The click event is registered with the mouseClicked parameter.

The mouse movement is registered with the parameter mouseMoved or with the parameter mouseDragged (movement with the mouse button pressed).

 

 

 

TO SOLVE BY YOURSELF

 

1)


A small dot and a line to the previous dot are created at the position of the mouse click.

 


 

2)


In the Functions chapter, you learned how to draw stars. Each time you click the mouse, a star should appear at the mouse position.

 


 

3)


Program a simple tic-tac-toe game.
Two players alternately draw red and green squares with the aim of reaching a row, column or diagonal.