BFOIT - Introduction to Computer Programming

User Interface Events

Introduction

In this lesson, you will learn

  • how to do something when input events occur.  Events covered are keyPressed (when a key on the keyboard is pressed), mouseClicked (when the left button on the mouse is pressed), and mouseMoved (when the mouse is moved within the graphics canvas), and
  • how to get the X and Y coordinates where the mouse was when its left button was clicked.

    • The User Interface

    These days, most of the interaction with a computer or any device with a computer in it, is via what's called a graphical user interface.  In computer-speak it's commonly called the GUI, (pronounced goo-ee). 

    On a deskside computer system, the GUI provides ways for you to launch programs, display stuff, etc... all with a mouse pointing device.  When you are interacting with programs, you use a pointing device (a mouse) to open up menus, choose items from the menus, check boxes that determine how your program should do things.  It's a point-and-click environment.  When it is time to enter text, you have the keyboard.

    On a calculator or mobile phone, much of the interaction is done with buttons - buttons for numbers, menu buttons, arrow buttons for moving around within the menu system.  For text entry, sometimes the buttons are used, but some devices have tiny key pads (made popular by the Blackberry messaging device).

    The first two computers I got to use only dealt with cardboard cards with holes punched in them for input.  Figure 11.1 shows what a punchcard looked like.

    Figure 11.1

    But, by the time I got my first job, my interface was through a teletype terminal, and this was a major step forward!  I could actually interact with the computer, not just submit something for it to do and then wait for something to appear on the printer.  Figure 11.2 shows a Model-33 Teletype, like the one I used for years.  Note the yellow paper-tape reader it had on its left side.  Paper tape was used similarly to punched cards.

    Figure 11.2

    By the 1970's, this magical kingdom in the world of computer science appeared, commonly called PARC.  Actually it is Xerox PARC (PARC stands for Palo Alto Research Center) and it still exists.  A group of scientists there built what was to be the future of computing: networks of "personal" computers were prototyped.  Much of what you see on a computer these days, the user interface, was invented at PARC.  The researchers all had computers (Altos) with high-resolution graphics displays and a pointing device (a mouse).  The mouse, or "X-Y position indicator for a display system" which is what it was originally called, was invented by Doug Engelbart at SRI (Stanford Research Institute) in the early 1960's.  The computers the researchers used were connected by a high-speed network (Ethernet).  They used this environment that they built themselves to do all of their work.  Figure 11.3 is a picture of an Alto workstation.

    Figure 11.3

    The first fancy integrated user interface that was built for the Alto (that's most applicable to what I want to talk about) was Alan Kay's vision of Dynabook.  Alan and a few other researchers including Adele Goldberg and Dan Ingalls, built a graphically-oriented system for working with Personal Dynamic Media, a programming environment they called Smalltalk.  The Smalltalk system introduced a new concept of breaking the graphical display into pieces called "windows" which held separate information.  As I can fit concepts from this system into our learning, I will.

    We've been doing lot's of graphical output, now it's time to interact with a user - to get some input via your computer systems' GUI.  In the following few sections I cover events that your program can respond to.  The events that jLogo supports are keyPressed, mouseClicked, and mouseMoved.  I'm going to start with the mouse since it is the most fun!

    Responding to a mouseClicked Event

    The mouse is simply a pointing device which sends the computer motion information.  In the most common form of the mouse, a little ball spins when you move it across a surface.  As you move the mouse from side to side and forward or backward, it sends this information to the computer.  The GUI uses this information to keep track of a point where the mouse is.  The GUI gives you feedback in the form of a graphical icon, usually an arrow.  The mouse also has buttons on it.  It tells the computer when you press a button down and when you release it.  When this down-up motion is done quickly it's called a mouse-click.  Low-level GUI software communicates that a mouse-click has occured to higher-level programs, like TG, in the form of an event.

    The TG applet/application receives an event when a mouse button is clicked.  If you define a procedure named mouseClicked it will be performed when a mouse-click occurs in the graphics canvas and the button clicked is the left-button.  Go back up to the TG applet.  Type in the following definition of mouseClicked.  Or, better yet, if you have the TG application, Copy and Paste it into TG's editor. 

       to mouseClicked
     println "mouseClicked    
     end

    Click the left button on the mouse on the graphics canvas a few times and watch what happens...

    (MOUSEX,MOUSEY)
    Where the Mouse Was Clicked

    So, what good is knowing that the mouse was just clicked without knowing where it was in TurtleSpace when it was clicked?

    Introducing... the operators mousex and mousey.  These two operators output the coordinates where the mouse was when it was clicked.

    Here is another mouseClicked procedure.  Type it in; check it out.  Do you understand what is happening, what the numbers printed in the CommandCenter mean? 

       to mouseClicked
     println mousex    
     println mousey
     end

    Practice: Play With mouseClicked, mousex, and mousey

    • Write a mouseClicked procedure that prints where the mouse is when it's clicked, its x,y coordinates, in a sentence that is descriptive.  Use the word and/or sentence operators introduced in the previous lesson to combine stuff and print something like: 
         mouseClicked at 112,44
   mouseClicked at -133,-87   
    • Write a mouseClicked procedure that moves the turtle to where the mouse is when it's clicked.

    Following mouseMoved Events

    To track movement of the mouse on the GraphicsCanvas, define a procedure with the name mouseMoved.

    Play scientist and explore how mouseMoved works.  Start off with the same initial procedures we wrote to explore mouseClicked. 

       to mouseMoved
     println mousex   
     println mousey
     end

    Then, work through the same practice stuff.  Modify the procedures you wrote for exploring mouseClicked such that they invoke mouseMoved instead of mouseClicked. 

    Responding to keyPressed Events

    Just like the way mouseClicked and mouseMoved provide access to mouse events, keyPressed can get you events generated when a key on the keyboard is pressed.  If you define a procedure with the name keyPressed that has one input (a number), it will be performed when a key is pressed. 

    Go back up to the TG applet and type in the following definition of keyPressed. 

       to keyPressed :num   
     println :num
     end

    Once you have this entered, click the mouse on the graphics canvas, and then press a few different keys on the keyboard.

    But what good are numbers for keyPressed events?  Why doesn't keyPressed provide the character pressed?

    Well... because not all keys on a keyboard have a character that represents them.  For example, all keyboards have arrow keys.  Table 11.1 details the key number values.

     Key Number 
     Keyboard Key 
    10
    Enter
    32
    Space
    48 - 57
    0 - 9
    65 - 90
    A - Z
    97 - 122
    a - z
    128
    Down-Arrow
    129
    Left-Arrow
    130
    Right-Arrow
    131
    Up-Arrow
    Table 11.1

    Remember, Logo has an operator that converts an ASCII standard code number into a character (char).

    Change your keyPressed procedure to print the character.

    Projects

    LabelPoints

    Write a program, LabelPoints, that labels points on the graphics canvas when you click the mouse in the graphics canvas.  Figure 11.4 shows an the results, what TG looks like after eight mouse-clicks in the graphics canvas.

    Figure 11.4

    KeyPressedLabels

    Write a program, KeyPressedLabels, that

    1. has a mouseClicked procedure which moves the turtle to where the mouse is clicked and draws a little cursor to indicate where it's at,
    2. has a keyPressed procedure which uses char, and label to draw the character representation its input.  After drawing the character, erase your cursor, move the turtle over (ready for the next character), and draw a new cursor.

    Here is an applet that shows the desired behaviour.

    keyPressed Labels Applet

    Eyes

    Write a program, Eyes, that draws a pair of eyes centered on the graphics canvas.  As you move the mouse around on the graphics canvas, make the pupils in the eyes follow the mouse.  Here is an applet that shows the desired behaviour.

    Eyes Applet

    Hint: Think scaling.

    Summary

    In this lesson, you learned about the events that TG will pass on to your programs if you want to know about them.  They are:

    • when the mouse is clicked on the graphics canvas.  Your program can do something by defining a procedure named mouseClicked.
    • when the mouse is moved around on the graphics canvas.  Your program can do something by defining a procedure named mouseMoved.  The mouse must have been previously clicked on the graphics canvas to activate it.
    • when a key is pressed on the keyboard.  Your program can do something by defining a procedure named keyPressed .  The mouse must have been previously clicked on the graphics canvas to activate it.

    You learned about the mousex and mousey operators which output the X and Y values for the coordinate where the mouse was when it was clicked or moved.

    And, finally, I snuck in another example of hierarchy - did you catch it?  The Events structure...  Here's an example of it's layers for mouse events:

    Highest
    Level     		Programs you write in jLogo which contain mouseClicked and/or mouseMoved
        TG, written in Java gets Events from OS, can pass them to programs written in jLogo  
      OS (Operating System, e.g. Windows, Linux), gets binary data from the mouse,
    converts it into Events, and provides these to programs running on the OS
    Lowest
    Level     		Hardware... the mouse, the interface (e.g. USB port) it plugs into,
    the logic (chips) in them, LEDs, optical sensors, mechanical wheels, switches, etc...

    Logo Primitive Procedures
    Introduced in This Lesson

    Name Input(s) Description
     KEYPRESSED  keyNumber When a keyboard key is pressed, TG receives an event. If the key is one that TG is interested in, a user-defined procedure with the name keyPressed (expecting one input) is invoked if it has been defined.
     MOUSECLICKED     When a mouseClicked Event is received by the TG program, if it is the left-button and it is in the graphics canvas, TG invokes a user-defined procedure with the name MOUSECLICKED if one has been defined.
    MOUSEMOVED   When a mouseMoved Event is received by TG, it performs a user-defined procedure named mouseMoved, if one has been defined.  mouseMoved Events only happen when the graphics canvas is active, i.e., the mouse was previously clicked on it.
     MOUSEX   Outputs the X-coordinate where the mouse was when it was last clicked.
     MOUSEY   Outputs the Y-coordinate where the mouse was when it was last clicked.

    Back to Words & Sentences
    Go to the Table of Contents
    On to Predicates, aka Conditional Execution