First Impressions

Here we are. This is the Logo page. To begin with, you have four areas of interest. At the top, the icon bar provides access to Logo’s features. The Graphics panel occupies the left part of your screen, with the turtle residing in the middle. The Logo Editor, where you can enter entire programs, shares the right part of the screen with the Listener, where you can enter single commands.

The Blocks panel is not visible initially. You can click the Select Layout button and then select a layout of your liking, asa well as position your icon bar.

Configure your Screen Estate

Logo offers a set of predefined layouts for your panels. You can change the size of each panel by clicking and dragging the separator between panels; Logo remembers the panel positions internally until you log oput.

Each panel has a button with a question mark in the upper right corner. Click that question mark to learn more about that panel. The Listener panel has even more buttons, but let’s keep this for later.

Of course, you can also program the panel positions and sizes from Logo if you want your program to arrange the panels. If you save your workspace, the panel layout is saved along with your workspace contents. See the Advanced Programming page for details.

Let’s talk about the panels one by one.

This is not a real panel, because its position is fixed at one of the sides of your window. This toolbar contains a set of buttons that lets you control many aspects of Logo:

Button	Explanation
	Opens a dialog that lets you load files into various panels.
	Opens a dialog that lets you various panels into files.
	Opens a dialog that lets you print your procedures or your graphics.
	Undoes the latest drawing action.
	Redoes the latest drawing action.
	Pauses a running program if the debugger is enabled; see the Debugging chapter for details.
	Halts a running program; see the Debugging chapter for details.
	Opens the Toolbox.
	Opens the Shape editor if you’d like to create your own turtle shape.
	Opens a dialog that lets you select a voice for the SAY command.
	Opens a dialog that lets you select a panel layout, and position the icon bar.
	Opens the Help dialog.
	Lists all available keyboard shortcuts.
	Lets you pair a Bluetooth robot like InO-Bot or Blue-Bot with Logo. Note that this icon will not be present if you are using a browser that does not support Bluetooth (like Safari or Firefox), or if your computer’s Bluetooth radio is missing or not turned on.
	Opens the Settings dialog.
	Restarts Logo; you will lose all of your data.
	Exits Logo.

Often, some of these icons are grayed out, which means that the icon is not available at this moment. For example, the Undo and Redo icons are grayed out initially because the turtle has not drawn anything yet, so there is no drawing to be undone or redone.

Dialogs

Very often, Logo displays certain features in a dialog box. For example, click on the Toolbox icon in the icon bar, and the Toolbox appears. This is a dialog. You can move the dialog around if it hides important information; just click somewhere in the dialog’s title and drag the dialog around. If you want the dialog to disappear, click the “X” in the upper right corner, or simply press the Esc key. Most dialogs also display a question mark in their upper right corner; click that question mark to see another small dialog that explains what the dialog is about. You can even continue your work while the dialog is open.

Some important dialogs are modal, which means that the background becomes blurred, and the dialog cannot be moved. Such a dialog must be closed before you can continue your work.

The Listener

Entering Instructions

The Listener panel is where you type commands or instructions for Logo to do. Often the results will affect the Graphics panel, but sometimes you’ll see a response in the Listener.

The green bar highlights your window’s focus; this is where Logo listens to your keyboard input. The Editor panel will also display the green bar to highlight the current line; dialogs will ather paint a blue square around the control that listens to your keybaord input.

Canyoutellwhatthissays? Can you tell what this says? Putting a space between the words of a sentence makes a big difference. The same is true for Logo. When you enter instructions into the Listener panel, make sure you put a space between the words. Press the Enter key to tell Logo to run the instruction.

Make sure the Listener panel is the currently active panel (the one with the blue title bar). To make the Listener panel current, just click in it with the mouse, but watch where the vertical insertion bar (or cursor) appears because that’s where your typing will be entered. This will be in your input area, which is the lowest line. A green background appears where you can type.

The illustration shows some examples that you should try yourself. You can use capital letters if you want; that’s what Logo uses for output but it’s not fussy about your input. Watch carefully as you type the letters and you will see how the colors change. This is called syntax highlighting and it’s much more than just colorful. It can help you avoid errors.

Enter the text “print” and a space. But wait! Why does the text appear in red with a wavy underline? Well, this is how Logo attempts to take care of you and your possible errors. In this case, the PRINT command needs at least one input, meaning that Logo knows that you want to print something, but you have not told Logo yet what to print.

If you now double-click that word and wait for two seconds, Logo will display a small hint box, telling you what is wrong. Here, Logo tells you that it expects one input, but found zero. There is even a link that you can click to view the explanation of the entire PRINT command.

In our case, you’d like Logo to print “HELLO”, so please enter a "hello (a quotation mark followed by the word “hello”). The quotation mark inserted before the word “hello” tells Logo to use the word as is and not to attempt to use it as a command. If you really want to enter lowercase words (in case you want Logo to print them in the same case that you entered them), use vertical bars around the words as in "|hello|. You can also use backticks, which automatically also quote the word. (The backtick character is on the same key as the tilde, just below the Esc key.)

You will notice that Logo quickly removes the red flag from the print command as soon as you start typing in the word " hello.

Many of the Logo commands have an abbreviation that means the same thing. You can, for example, use PR, which is is short for PRINT. This saves typing time, but you’ll always know what PRINT means.

To Err is Human

Everybody makes mistakes. It’s going to happen. Even with the syntax highlighting and trying to be very careful, you’re going to press Enter before you see that typo.

Don’t worry about it. Logo will quietly let you know there is a problem and then you can fix it easily. In this example, since I forgot to use the quotation mark before the word “hello”, Logo tried to find the HELLO command to print whatever the command outputs instead of just printing “HELLO”. Since Logo didn’t understand this nonsense, it displayed a message to let me know that HELLO was the problem.

Actually, Logo even tried to warn me by highlighting the word “hello” in orange! If you had double-clicked that word, Logo would have displayed the hint “HELLO is not a procedure”.

What now?? I don’t want to type the whole line again!

There are two ways to fix this problem.

First, you can use the Up-Arrow key to recall the last line that you entered. Place the cursor in front of the “hello”, enter the missing quotation mark and press “Enter” to send the command to Logo again.

Or, you can highlist the command in the upper part of the Listener, copying it into the clipboard and paste it into the Listener command line.

Actually, the Up Arrow and the Down Arrow keys let you scroll through your entire liste of commands if you’d like to recall a previous command.

The clipboard is available to you in the Listener and Editor panel After you select a text, right-click the text and select “Cut” or “Copy”. To insert text, right-click the panel at the desired location and select “Paste”.

You can also use the standard keyboard shortcuts on desktop systems:

Ctrl+C or Cmd+C - Copy

Ctrl+X or Cmd+X - Cut

Ctrl+V or Cmd+V - Paste

The Graphics Panel

The Graphics panel is your main drawing panel. When your turtle draws, it moves across the panel and leaves a trail much like you would leave a line on a sheet of paper with a pencil.

The Logo “sheet of paper” is actually more like a glass panel. Your background image, color, and pattern go onto the back side of the glass while your turtle drawing goes onto the front side. Turtles, bitmaps and controls rest in front of the glass panel.

This glass panel has a fixed size. It is 2000 pixels wide and 2000 pixels tall, with the turtle coordinates [0 0] in the center. A pixel is like a dot. If you paint the smallest dot on the glass surface, it is a pixel. If you move the turtle 100 units, you actually paint 100 dots or pixels. This means that you can paint 1,000 steps in either vertical or horizontal direction before your painting gets lost.

What you see in the Graphics panel is only a small part of the underlying glass panel. The Graphics panel acts as a viewport (or window) into the glass panel. The Graphics panel can vary greatly in size but does not cause any change to your drawing.

If you had the chance to look at Logo from the side, this is what you might see:

See the thick glass plate? On the back side, you can see a background image, and the turtle has drawn a red square onto the front of the glass. The turtle itself hovers over the glass and the viewport is above all, hiding most of the picture.

Going back to the screen and looking at the whole thing from above, you would see this through your viewport.

The Logo Editor

The Editor panel contains a text editor where you can enter entire programs. As with the Listener, the Editor tries diligently to find and highlight any problems with your code before you even run your program the first time. If yoi look at the picture, the Editor contains a few proceudres, but the last procedure has not been finished yet (the “D” of “END” is still missing). Logo immediately sees that the current procedure “PENTAGON” has not been finished with the proper “END” word, yo it issues a warning that the procedure “PENTAGON” is missing the “END” command. Typing the missing “D” will immidiately remove that warning.

The Editor displays lines with errors in them with the line number background set to red, and warnings with the line number background set to orange. As usual, double-click any error and wait for Logo to display a hint. Actually, you can highlight any command at any time to see a short explanation of the command!

THe Editor has a few buttons at the bottom:

Button	Explanation
	Jumps to the previous error. If there are no errors, this button is grayed out.
	Jumps to the next error. If there are no errors, this button is grayed out.
	Opens a small dialog to find and/or replace text.
	Erases the entire content of the editor.
	Saves the editor content to a file. If there is nothing to save, this button is grayed out.
	Runs the entire content of the editor in Logo. Please not that you can run your code anytime, even if the editor highlights any errors or warnings.

The Toolbox

The Toolbox dialog contains many resources you can use in your Logo projects such as controls, shapes, backgrounds vand colors. The popup list at the top of the Toolbox lets you select any of the panels.

The Toolbox dialog is hidden to begin with, select the Toolbox icon in the icon bar to make it appear. Let’s go through the various parts of the Toolbox.

The Colors panel shows the 138 extended colors arranged in groups by shades of intensity (from light to dark). You can see each color’s name by hovering the mouse pointer over a block. The COLORS command displays a list of all 138 color names; type SHOW COLORS in the Listener panel to see the list of color words in numerical order.

If you drop a color on top of a turtle, it sets the turtle’s pen color. If you drop a color onto the Graphics panel, the drop spot is the origin of a FILL command with the dropped color.

The color words can be used in the SETPC and SETBG commands . Put a double quotation mark in front of the color word. Try SETBG "ORANGE. If you can’t decide on a color yourself, try SETPC PICK COLORS.

The Toolbox contains a huge number of images. Drag an image, like an animal, to the Graphics panel, and create a new turtle that has the shape of this animal. You can also drop an animal on top of a turtle to change its shape. If you want to use the actual file name of a shape or image, drag the image into the Listener of Editor panels and drop them there; Logo will happily insert the full file name instead of the image.

The “Backgrounds” toolbox contains a number of backgrounds; drop one of them on the Graphics panel to see how it works. The “Tiled Backgrounds” toolbox also contains background images, but these are tiled, meaning that they are stitched together to form a background.

Finally, the “Controls” toolbox contains a number of control elements that you can drag to the Graphics panel. When you drop a control, it is created as a turtle with a few extra properties and procedures to put these controls into life. See the chapter about controls for details.

Logo Help

The Help dialog contains the entire online reference for all Logo commands. TGhe question mark in the Icon bar opens the dialog. You can click and browse all commands. Many commands come with sample code, which you can copy and then paste into your Editor panel. You can also use the HELP command to find a specific command. Just enter HELP “command into the Listener input field and press Enter (substitute “command” with the command that you would like to learn about as, for example, HELP "FD).

Final Notes about the Workspace

Logo can save a copy of your Logo workspace and the contents of the Editor panel. You should save very often in case your browser crashes, or if you manage to refresh the page by accident. You can specify what Logo saves in the Settings dialog. Initially, Logo does not save anything.

When you log out, Logo asks you if you’d like to keep your Logo data for the next time you log on. If you are a student working in a classroom, it is a good idea to have Logo forget about your personal Logo data unless you want someone else to pick up your work where you left off.