BFOIT

Introduction to Programming

Words, Sentences
and
UI Events

Introduction

In the previous lesson, I wrapped up what you need to know about writing your own procedures.  You now know everything there is to know about creating your own commands and operators.  You know how to write procedures that work with inputs and/or produce an output. 

In this lesson, you will learn

  1. about new values, symbolic values, that you can have in your program - words - and a list of words which is called a sentence in Logo.

  2. 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).

  3. how to get the X and Y coordinates where the mouse was when its left button was clicked, and

  4. how to label, draw text on the graphics canvas.

Symbolic Values - Words

So far you have only been working with numeric data.  You have been using numbers for lots of things, e.g. the distance the turtle should move, a color number, a number of degrees to rotate, etc...

There is a lot more to programming than generating numbers and drawing stuff.  Logo is a symbolic programming language, a decendent of LISP.  Symbolic programming was created to help get computers to do human-like things - the study of artificial intelligence.

So, how do you represent a word in Logo?

When a Logo interpreter sees a double-quote character, i.e. ("), the collection process for characters composing the word starts.  All characters until a space or the end of the line are considered part of the word.  "Word is a word made up of the characters: W, o, r, and d.  Note that the double-quote introduces the word - it is not part of the word.

You can display words just like numbers.  Figure 9.1 shows examples of printing words, note that numbers may also be entered as words.

Figure 9.1

Lists of Words - Sentences

In Logo, a sentence is a list of words.  Just like a word can be included in a program by quoting it (i.e. "Logo is a word), a sentence can be included in a program by surrounding a word or words with square brackets.  Here are a few example sentences: 
    [This is a sentence]

    [200 50]

    [ forward 100 right 90 ]
Note that Logo sentences are just lists of words and that they do not have grammatic structure.

The second example shows how we might use a sentence to represent a point, an x,y pair of coordinates.

An important feature of a sentence is that although it can be made up of many words, it is still only one thing.  This is very important when a sentence is used as an input to a procedure.  Figure 9.2 shows a sentence as an input to println and then what happens when you attempt to invoke println with multiple words.

Figure 9.2

So, even though the sentence is composed of four words, println displays it properly.  But, when I gave println two individual words, the interpreter complained because println only consumed one input.  Thus, the Logo interpreter expected the second word to be a new command and "Words is not a command.

Sentences can also be output from procedures when compound data is appropriate.  The example above, [200 50], works as one way of representing a point.  Take a peek at the pos operator...

WORD and SENTENCE Operators

Words and sentences can also be built out of their pieces by using word and sentence operators.  A word can be built out of two words, a sentence can be built by combining words and/or sentences.

Notice that the word operator only combines two words into a single word.  It's not as flexible as the sentence operator.  You can't use word to combine a word and a sentence.

WORD and SENTENCE Procedures
Name Input(s) Description Example
 WORD   word word  Outputs a word consisting of its first input concatenated with its second input.  WORD "pre :wd 
 SE
 SENTENCE  		 wordOrSentence 
 wordOrSentence  		Outputs a sentence consisting of its first input concatenated with its second input.  SENTENCE "word :sent 

Figure 9.3 shows a few examples of uses of these operators.  Notice how flexible the sentence operator is; it can be used to combine a word and a sentence or combine two sentences into one.

Figure 9.3

Oh, and just an fyi, sentence can be abbreviated se.

Here is the TG applet.  Spend a little time playing with words and sentences.  I'm going to talk a little bit about the user interface next, but you'll need to use words and sentences in the exercises that follow.

alt="Your browser understands the <APPLET> tag but isn't running the applet, for some reason." Your browser is completely ignoring the <APPLET> tag!
TurtleGraphics Applet

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.  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.

Punchcard Model 33 Teletype
Figure 9.4

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.

Xerox PARC's Alto
Figure 9.5

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?

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

Things to try:

Following mouseMoved Events

To track movement of the mouse on the graphics canvas, define a procedure with the name mouseMoved.  Here is a neat example to use to see how it works.  Type this into the TG applet or application's editor, then click the mouse on the graphics canvas and watch what happens when you move the mouse around on the graphics canvas. 
    to mouseMoved
      println se [mouseMoved to] word mousex word ", mousey
      end
Things to try:

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 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.

Not to fret, Logo has an operator that converts a key number to a character - char.  It takes an ASCII number representing a character as its input and outputs the ASCII character.

Change your keyPressed procedure to print the character represented by the key number, instead of the number.

Drawing Text on the Graphics Canvas

One more new primitive command: label.  The label command draws text on the graphics canvas.  The text is displayed where the turtle is.  You use label similarly to how you can use the print command.  The difference is where the characters are displayed.

Either go back up to the TG applet or use a small popup TG applet and play with the label a bit...

Here's a fun little program to enter, try it out... 

    to half :num
      output quotient :num 2
      end

    to randCanvasX
      output difference (random canvaswidth) half canvaswidth
      end

    to randCanvasY
      output difference (random canvasheight) half canvasheight
      end

    to main
      penup hideturtle
      repeat 40 [ setxy randCanvasX randCanvasY label "Hi! ]
      end

    main

Exercises

LabelPoints

Write a program, LabelPoints, that labels points on the graphics canvas when you click on them.  Figure 9.6 shows an example screen after six mouse-clicks.

Figure 9.6

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.

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.

Summary

In this lesson, you learned how to include symbols (words and sentences) into your programs.  They can be displayed just like numbers.  You learned how to join them to form bigger words or longer sentences.

You learned about the label command which draws textual representations of things onto the graphics canvas.

You learned about the events that TG will pass on to your programs if you want to know about them.  They are

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...

Procedures Introduced In This Lesson
Name Input(s) Description Example
 CHAR  number outputs a single character word that is the ASCII code corresponding to the input (an integer between 0 and 127).  char 65
 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.  to keyPressed :num 
   ...
   end
 LABEL  thing Draw the textual representation of thing on the graphics canvas, at the turtle's current position.  label "Hi!
 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.  to mouseClicked   
   ...
   end
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.  to mouseMoved   
   ...
   end
 MOUSEX   Outputs the X-coordinate where the mouse was when it was last clicked.  setx mousex
 MOUSEY   Outputs the Y-coordinate where the mouse was when it was last clicked.  sety mousey
 SE
 SENTENCE  		 wordOrSentence 
 wordOrSentence  		Outputs a sentence consisting of its first input concatenated with its second input.  se "word :sent 
 WORD   word
 word  		Outputs a word consisting of its first input concatenated with its second input.  word "pre :wd 

Back to Table of Contents
Back to previous Lesson ( Output Command )
On to next Lesson ( Predicates - Conditional Execution )