Learn the Interface and Create a Program

If you are here, you should have completed "Setting Up BlocklyProp for the S3". If you have not yet registered, please go back to the previous tutorial for instructions on how to do so.

As a quick review, anytime you want to program your S3 in BlocklyProp, just follow these simple steps:

  • Open your web browser and go to http://blockly.parallax.com/blockly/.
  • Login using your email and password, or with Google.
  • Go to the BlocklyProp-client, connect, and minimize the window (do not close it).
  • Then return to the BlocklyProp homepage to start programming and begin your project.


How to Use BlocklyProp with the S3

Turn your attention now to using BlocklyProp to write simple, versatile code for the S3 robot. For those who have experience with the original S2 or S3 program (S2/S3 GUI), you will begin to see how BlocklyProp can be just as easy to use and understand as the original. BlocklyProp takes it one step further, however, by opening the way to more complex programming for users of any experience level and any age!


How To Read These S3 Tutorials 

Before you try your first program, let us introduce some important formatting you will use to describe block categories and blocks themselves within these tutorials.

  • Words in BOLD UPPERCASE are names of block categories.
    • Example: ACTIONS > MOTORS tells you that we are discussing blocks in the parent category Actions, sub-category Motors.
  • Words in bold lowercase font are names of blocks, or parts of a block you need to interact with.
    • Example: drive speed is a block with 3 actionable parts, duration is one of the parts of that block you can enter a value for, so it also gets a format change.
  • Words in italics are equations, parts of equations, or hints.
    • Example: d = rt is an equation meaning distance = rate multiplied by time. This is used in the Simple Motion with Motors Blocks tutorials.
  • Words that are underlined indicate an option or button you need to select, or click on.
    • Example: When you've completed your program, click Save so you can go back to it later.

It might look strange at first, as there can be a lot of format changes in our tutorials. We do this for a good reason: we want to help you tell the difference between when we are providing information or explanations, and when we are talking about the actual blocks within the BlocklyProp workspace. Drive speed is a topic where we discuss theory and introduce some mathematical calculations to calculate it, but drive speed is also a BlocklyProp block. One is a concept and the other is a block in our programming environment, but without the formatting change the two are not distinct.


Create a Program

It's time to open up your very first program for the S3 using BlocklyProp! In programming, there is a tradition that the first program written when learning about coding is a “Hello, World!” program. In essence, you are saying "Hello, I'm here!" to the world of programming.

Make sure you are logged into BlocklyProp and have the BlocklyProp Client connected.

  • To begin a new program for the S3, click on the New project link and the "Your Project" will open to the first page, "Basic Project Info".

  • Choose a project name (we used "Hello World! 1.1", but you can name it anything you like), and describe the program. The Board Type should read "SCRIBBLER ROBOT".
  • When you are done, click Next in the lower right hand corner. The next page is labeled "Sharing". Here you can set the controls as either Private or Shared.
  • When you’ve made your selection, click Finish.

Hint: You can always change your sharing preference later, so don't worry about which one you choose for now.

The BlocklyProp workspace starts out blank. To the left of the workspace is a list of categories of BlocklyProp blocks (Note: these are updated occasionally and may look a bit different on the current version). Blocks are selected by placing the pointer on the chosen category menu item and clicking to select. For instance, find the label that says “Actions” and click on it. The sidebar expands revealing a number of subcategories to choose from. These subcategories contain the blocks you will use to create programs. Some categories do not have subcategories.

You will use these building blocks in BlocklyProp to write programs. To select a block, place your cursor over a block, left-click on it, and drag it onto your workspace. The block can be dragged and dropped anywhere in the workspace, or placed where you want it to fit into your program. Multiple blocks snap together, like puzzle pieces, in program sequence.


Try This: Hello, World! Program

  • On the left-side bar, click the ACTIONS category and then on the COMMUNICATE subcategory.
  • Choose the send text block and drop it in the workspace.
  • Place your cursor in the light-colored square in the send text block and type “Hello, World!” Your block should look like this:

  • Save the program using the Save button on the right side of the upper toolbar. The Save button will turn from blue to green and change to Save ✔ to indicate that the program has been saved.

There are three circular buttons on the top left of the screen that you should become familiar with:

  • Verify Code (compile) not only prepares the code for loading, it also checks the code for errors. If a code will not compile, it will list where the errors occur.
  • Load and Run (save code to EEPROM) loads the program to Electrically Erasable Programmable Read-Only Memory. This memory is not volatile - programs will remain in your robot's memory when the S3 is turned off or reset and run again when you turn it back on.
  • Open Serial Terminal will open and connect to the terminal window. This button will not load a program to your robot.  You would only use this button to reconnect to a program that you have already loaded to your S3.

Tip: Fly-over text is available for all blocks and most of the buttons in the workspace. These labels will show up when you hover your mouse over buttons or blocks. Buttons will display their name, blocks will display their name and a brief description of their purpose. Definitely make use of this feature as you get to know BlocklyProp.

  • Make sure your S3 is powered on and is connected to your computer with its USB A to micro B cable. It is also a good habit to have your S3’s wheels raised off the work surface when powering on or programming. Programs that cause the S3 to move will immediately begin to run and your robot can quickly roll off the table if not elevated or turned on its side. Sitting your S3 on top of something accomplishes this as well - a peanut butter jar lid or wooden block is just right.
  • If you forget to power on your S3 or connect the cable, a message window ending with "error: no propeller chip on port 'COM #'" will appear. Just connect the cable, power the S3 (or both), and try again.
  • Choose Load and Run (see diagram above) to send your “Hello, World!” program to EEPROM. Another window will open to show that the program is loading correctly. This window can be closed.  It does take a few seconds for the download to happen - don't try reloading, resetting, unplugging, or powering off right away.
    • You will see the S3’s USB TX/RX LED turn on for a moment and then begin to flash. As soon as the program is loaded on the S3, it will run and the Terminal window will open.

  • In your workspace, the Terminal Window, an on-screen serial terminal, will open. You should see:

If all went as planned your Hello World! message should appear, proudly announcing that you have written, loaded, and run the first of many BlocklyProp programs for your S3! It is that simple. BlocklyProp is intuitive and easy to use. The best way to learn BlocklyProp is to play with it, testing out its features and blocks.


Your Turn!

  • Add to the program above by adding a personal message, like this:

You should get a message like this… good, but not perfect.

Let's play around and find other ways to display this message.

  • Can you modify the program you’ve just written to add a space between the “!” and the next message that begins with “This” just like you would if you were typing this message?
  • Can you figure out a way to place the Hello World! message and your personal message on a separate line on the Terminal?

Hint: Take a look in the COMMUNICATE sub-category and check out the send control character block.

Need more information or help? Contact Parallax via email or in one the following ways:

  1. Call a live person in Tech Support at 916-624-8333 or email at support@parallax.com
  2. Visit Parallax’s friendly user Forums - http://forums.parallax.com

Special thanks to Parallax friend Whit Stodghill for his assistance in writing, editing, and testing material for these S3 tutorials.