BFOIT Introduction to Programming Words, Sentences and UI Events

Introduction

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.

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

    [This is a sentence]

    [200 50]

    [ forward 100 right 90 ]

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

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

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!

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

MOUSEX,MOUSEY - Where the Mouse 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:

• Write a mouseClicked procedure that prints where the mouse is when it's clicked, its x,y coordinates.  Use the word and/or sentence operators introduced at the beginning of this 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.

    to mouseMoved
      println se [mouseMoved to] word mousex word ", mousey
      end

• Change your mouseMoved procedure to move the turtle to where ever the mouse goes.

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

    to keyPressed :num
      println :num
      end

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.

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

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

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

• when the mouse is clicked on the graphics canvas.  Your program can do something if it has a procedure named mouseClicked.
• when the mouse is moved around on the graphics canvas.  Your program can do something if it has 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 if it has a procedure named keyPressed .  The mouse must have been previously clicked on the graphics canvas to activate it.

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