INTRODUCTION

So far, your understanding of the computer is that it executes instruction after instruction. It can also change the course of a program due to certain conditions or run through loops. The corresponding program structures are called sequence, selection, and iteration. As early as 1966 Böhm and Jacopini proved in a famous article that any calculation procedures (algorithms) can be realized using these three programming structures.

This is, however, only true as long as you do not incorporate any external influences. For example, you can cancel a program at any moment by clicking with the mouse on "Close" (close button). Such processes need a new programming concept: event control (event handling). You have already learned the basic principles in the chapter Turtle Graphics/Event Control. It consists in procedures of the type:

"Whenever the event e occurs, the function f is executed".

The implementation is simple and known since the early days of computer technology in the fifties of the last century. We define a function f (then called interrupt routine) which is never even called by our own program. It sleeps, so to speak, until a certain event E occurs, an external influence, upon which it is then automatically called by the system. Today we call such a function callback and we say that the callback f is “fired” by the event E. Often, callbacks are called with parameter values that contain important information about the event, for example, which mouse button was pressed or where the mouse is located.

REACTING TO A MOUSE EVENT

You can also use mouse events in the GPanel, just like in turtle graphics. In the first example, a green circle is drawn at the current mouse position when the left or right mouse button is pressed. Do the following:

First, in a function with an arbitrarily chosen name, define what should happen when a mouse button is pressed. Here you choose a name, for example onMousePressed(), that expresses what the function does as well as possible. When called by the system, the callback receives the current coordinates of the mouse cursor. Next you need to tell the system that it should call your callback when the mouse button is pressed. This process is called callback registration.

To register your callback you will need a named parameter of makeGPanel() that is called mousePressed.

from gpanel import *

def onMousePressed(x, y):
    move(x, y) 
    fillCircle(0.02)

makeGPanel(mousePressed = onMousePressed)
setColor("green")              

MEMO

DETECTING MOUSE MOVEMENT

MEMO

FREE HAND DRAWING WITH A PRESSED MOUSE BUTTON

MEMO

THE LEFT AND RIGHT MOUSE BUTTON

MEMO

RUBBER BAND LINES

If you want to draw lines with a drawing program, you can mark the starting point by pressing the mouse button. While dragging the mouse, you make a temporary line similar to that of a rubber band that is fastened at the starting point. Only release the mouse button when you are satisfied with the position of the line, and then it will actually be drawn. So here you need three callbacks: onMousePresssed, onMouseDragged and onMouseReleased.

But there is a particular problem: to move the rubber band over the drawing area it must be repeatedly erased from its old location and drawn again to the new location, without changing the already existing drawing. If you deleted the lines by overwriting them with the background color, gaps would result in the existing drawing at the intersection points.

To solve this problem, you must save the existing drawing in the press callback (one also calls this "rescue"). The deletion of the temporary rubber band then happens by restoring this “old” drawing. You can save the drawing with storeGraphics() and restore it with recallGraphics().

from gpanel import *

def onMousePressed(x, y):
    global x1, y1, x2, y2
    storeGraphics()
    x1 = x
    y1 = y
    x2 = x1
    y2 = y1
    setColor("red")
 
def onMouseDragged(x, y):
    global x2, y2
    recallGraphics()
    x2 = x
    y2 = y
    line(x1, y1, x2, y2) 

def onMouseReleased(x, y):
    setColor("white")
    if not (x1 == x2 and y1 == y2):
        line(x1, y1, x2, y2)
    else:
        recalGraphics() 

x1 = 0
y1 = 0
x2 = 0
y2 = 0

makeGPanel(mousePressed = onMousePressed, 
              mouseDragged = onMouseDragged,
              mouseReleased = onMouseReleased)
title("Press And Drag To Draw Lines")
bgColor("blue")
setColor("white")
lineWidth(2)

MEMO

EXERCISES

ADDITIONAL MATERIAL

REGISTERING CALLBACKS WITH DECORATORS

Instead of using named parameters of makeGPanel() to register a callback, an arbitrary named function with two parameters x and y can be "decorated" by a preceding line, so that TigerJython automatically registers the function as callback that is called when the event happens. The additional line has to be prefixed by the "at" sign @. The following decorators are available:

So the program shown above which draws a circle when the mouse button is pressed, can be written using a decorator:

from gpanel import *

@onMousePressed
def doIt(x, y):
    move(x, y) 
    fillCircle(0.02)

makeGPanel()
setColor("green")