BFOIT

Introduction to Programming

Symbolic Values
and the
Graphical User Interface

Introduction

In the previous lesson, I wrapped up what you need to know about writing your own procedures.  You now know how to write procedures that work with inputs and produce an output. 

In this lesson, you will learn

  1. about new values, symbolic values, that you can have in your program - words.

  2. how to receive mouse click (GUI) events and how to get the X and Y coordinates where the mouse was when it was clicked, and

  3. how to draw text in the graphics window.

Symbolic Values - Words

So far you have only been working with numeric data.  You have been using integers for lots of things, e.g. the distance the turtle should move, a color number, a number of degrees to rotate, etc... But, what if you want to display some text?

There is a lot more to programming than generating numbers, displaying them, and drawing stuff.  Logo (TurtleTalk is a subset of Logo) is a symbolic programming language.  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 the TurtleTalk language?

When the TurtleTalk interpreter sees a double-quote character, i.e. ("), the collection process for characters composing the word starts.  All characters until a space character 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.  We'll do this in a moment; but, first let's learn a bit about mouse input.

Graphical User Interfaces and the Mouse

A Graphical User Interface, most commonly called a GUI, (pronounced goo-ee) is one way of interacting with the software that is in a computer, or a computer-based device.  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.

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.  He and others also invented the concept of breaking the graphical display into pieces called "windows" which held seperate information.

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 we see as computing environments these days was invented at PARC.&nbp; The researchers all had computers (Altos) with pixel graphics displays and a pointing device (a mouse).  They were connected by a high-speed network (Ethernet). and used this environment to do all their work. 

The thing they did that's most applicable to what I'm talking about here was Alan Kay's 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.  As I can fit concepts from their system into our learning, I will.

We've been doing lot's of graphical output, let's get some input via your computer systems' GUI.

Tracking the Mouse - the mouseclick Procedure

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.  GUIs communicate that a mouse-click has occured to programs in the form of an event.

The TurtleGraphics applet and TG application receive an event when a mouse button is clicked.  If you enter a procedure with the name mouseclick it will be performed when a mouse click occurs.  Here is the TurtleGraphics applet.  Type in the following definition of mouseclick. 


    to mouseclick
      println "mouseclicked
      end

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

Click the mouse in the graphics area 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.  They output the coordinates where the mouse was when it was clicked. 

Exercises:

Drawing Text in the Graphics Window

One more new primitive command: label.  The label command draws text in the graphics area.  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...

Exercise: LabelPoints

Once you've mastered all of these new commands, write a program that labels each point in the graphics area that you click on.  Figure 8.1 shows an example screen after six mouse clicks.

Figure 8.1

Summary

In this lesson, you learned how to include symbols (words) into your programs.  They can be displayed just like numbers.

You learned about the label command which draws textual representations of things into the graphics area of the TurtleGraphics applet and TG application.

And, finally, you learned how to do something when the mouse is clicked in the graphics area - by writing a procedure that you name "mouseclick."  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.

New TurtleTalk Procedures Used In This Lesson
Name Input Description Example
LABEL thing Draw the textual representation of thing in the graphics area, at the turtle's current position. LABEL "Hi!
MOUSECLICK   When a mouse-click is received by the TurtleTalk system, it performs a user-defined procedure with the name MOUSECLICK, if one has been defined.  
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 Table of Contents
Back to previous Lesson ( TurtleTalk Output Command )
On to next Lesson ( TurtleTalk Predicates (Conditional Execution) )