Ready to learn to program with BlocklyProp? You are in the right place.
This set of activities will help you get familiar with the basic BlocklyProp blocks, how to use them, and how they work together. You will build programs for common coding tasks: naming and using values, doing math problems, making decisions, and repeating sections of code.
This set of lessons requires only your Propeller development board, its source of power, and its USB programming cable. It is written for the Propeller Activity Board WX that comes with the ActivityBot Robot Kit, Arlo Complete Robot System, and BlocklyProp Starter Kit. It is also compatible with the Propeller FLiP module. Other Propeller-based boards that have the same connections to a 5 MHz oscillator and the same type of EEPROM, such as the Hackable Electronic Badges, will also work with most blocks.
At first, learning a programming language may feel like learning a foreign language. It may seem difficult but, with practice, you will be able to create your own programs. You may find it is easier to learn a programming language than a foreign language because you are already familiar with the vocabulary.
Additionally, both languages have rules - for instance, English has a grammar. Programming language rules are called a syntax. Blockly helps make sure that the blocks you use generate code that follows the rules of Propeller C. With some practice you will be speaking BlocklyProp in no time!
BlocklyProp is a visual programming language for the Propeller microcontroller. It is a way for you to tell the Propeller microcontroller what to do. Microcontrollers like the Propeller are good at following instructions. Usually, the instructions a microcontroller follows are written in a text-based programming language like BASIC, C, Python, or Javascript. Blockly is helpful because each block automatically writes the text-based code for you.
Let’s take a quick look at what BlocklyProp does each time you drag a block into your program.
Now, you should see a block category menu on the left, and an empty window on the right for building with blocks.
This is the Propeller C text-based code generated by the blocks. The C code gets compiled into even smaller instructions called assembly language before being sent to the Propeller itself. Once those instructions are inside of the Propeller, it runs them.
These tutorials will help you learn how to program your Propeller Activity Board WX or Propeller FLiP to make a variety of different projects and inventions. Once you become familiar with programming using the BlocklyProp system, you might be interested in programming your Propeller in C. The Propeller C Tutorials [5] series parallels the BlocklyProp tutorials.
Variables are one of the most important concepts you'll learn as you get into programming. You can think of a variable as a container or a box that holds information. BlocklyProp has two kinds of variables: string and integer (number).
Although the Propeller microcontroller can work with all numbers, there are two important things to remember.
The first program that you wrote told the Propeller microcontroller to send “Hello World” to the Terminal on your computer screen. Now you will use the Terminal to learn a little bit about how variables work.
There are two variable blocks in the VARIABLES category. The first is the set variable block:
Use this block to store a value in a variable, by attaching a value block to it.
Then, the use variable block can be used in place of a value block in your program:
The item variable is a default included with BlocklyProp, but you can make your own. Let’s try it!
Now, a use variable block for myNumber will appear in the VARIABLES menu.
Each variable you create in this project will be listed here. Each name you create must be unique to that project. See About Naming Things [6] for the rules.
The Variables menu will only show one set variable block, and its name may change as you create variables. But, that’s okay.
A series of characters that make up text is called a “string”. It is a good idea to keep your strings short. Some blocks limit the number of characters per string to 128.
Now, to see what is inside of your variables, we will print them to the Terminal. To set up the Terminal:
Once your program has loaded, the Terminal will open and, after a brief connection message, it will display your variables.
Congratulations! You are starting to learn how to create your own programs with BlocklyProp!
All of the variables in Blockly are global. A global variable is one that when set in one part of your program, can be used in a different part of your program as well. This works in two different ways. A different part of your program can 1) set the value of a variable, and 2) retrieve the value of the variable.
Once your program has loaded, the Terminal will open and, after a brief connection message, it will display the new values stored in your variables.
Your program took the two values you placed in the math operation block and added them together before storing them in the variable “myNumber”. It displayed 50 because 42 + 8 = 50.
You may have noticed that the “+” sign in the math operation block is a drop-down menu. You can choose other math operations as well. Try each of the following ideas in your program:
In the previous tutorial, you learned how to send text and numbers to the Terminal. Now you will use the Terminal to send information to the Propeller microcontroller and to make a program that is more interactive. If a microcontroller can respond and react to either a person or its environment, it can be much more useful.
Let’s write a program that asks you to type in your name, and then repeats it back to you by printing it to the terminal.
Your program will look like this:
To build the program:
You should see this:
This time, instead of collecting your name (or other text), you will obtain a numerical value using the Terminal. When you obtain numbers, you can then do something useful with those numbers. For instance, you can collect two numbers and add them together - using the Activity Board WX like a calculator. Let’s try it:
In the second half of the program you just built, it required many blocks just to print the line "Adding your numbers together: 42 plus 55 equals 97".
There is a block that can be used to combine a bunch of different strings, numbers, and variables:
This block is the Terminal print multiple block. You will find this block in the TERMINAL > COMMUNICATE menu.
Let's try it out!
When you type into the Terminal, your computer sends information back to your Propeller board. By using the Terminal receive text blocks, the Propeller microcontroller knows that it is supposed to stop and wait for information to come to it from the computer to which it is connected.
When you use the Terminal receive text blocks, the Propeller listens for each character you type, and stores them in a special hidden variable called a buffer until it receives the character sent when you press your return key. When the Propeller sees that you sent a return key character, it takes the information collected in the buffer and places it in your variable.
Did you know that you can add things like tabs or carriage returns (new lines) to the strings you are sending to the terminal? There is a special value block called the character value block, found under the VALUES category. When you use it with the Terminal print multiple block, you can add special characters to the information you are sending:
Each character takes up 8 bits of information. Each bit can only be a 1 (one) or a 0 (zero). Each character has its own 8-bit code, and 8 bits are called a byte. The set of codes for characters is called ASCII. For instance, the ASCII code for the character ‘Z’ is 01011010 in binary, which is 90 in decimal. The ASCII code for the return key is 00001101, or 13 in decimal. See the ASCII Table [7] for a list of more characters and their code numbers in decimal.
When the Propeller stores a string of characters in its memory, it always takes up one extra character of space. For example, if you store the 11 character string “Hello World” in a variable, it takes up 12 bytes - the last byte is a zero (00000000) so that the Propeller knows where the end of the string is.
(The real Mad Libs [8] is an awesome game and a registered trademark of Penguin Random House LLC.)
Once you start creating programs of your own, you may need to have your program do some math. There are a few tricks that are helpful to know about values and operators and how they work in BlocklyProp.
You have already used the math operation block. It allows you to insert two number value blocks and to choose a math operation to perform on them:
This block will give a value of 100, since 52 + 48 = 100. If you put it into a Terminal print number block, you can see the value given by the math operation block:
If you choose subtraction (-) from the drop-down menu, the result will be 4. If you choose multiplication (*), the result will be 2496.
Division (/) will result in 1, which is a bit different than you might expect. 52 ÷ 48 = 1.0833…, but Blockly only works with integers, which are positive and negative whole numbers. It is essential to know this fact if your program is doing any division.
The last operation, modulus, gives a result of 4. Modulus is the remainder after division, so if 48 goes into 52 one time, the remainder is 4. Sometimes, it is helpful to use both division and modulus in your program if you need to divide numbers.
Using more than two values
What if you need to use more than two numbers? The math operation block can be mutated. By clicking the gear icon on the block, you can add more inputs, allowing you to do math with more than two numbers.
The Propeller follows the standard order of operations, which means that the program completes multiplication and division operations from left to right and before any addition or subtraction operations (also done from left to right). You can learn more about the order of operations from Kahn Academy by clicking this link [9]. Try it out by adding another term to the math operations block in the program you created above:
The rule of operations states that any multiplication will happen before any addition, so that in the statement 5 + 6 * 3, the 6 and 3 will be multiplied first (6 * 3 = 18), then the 5 will be added, resulting in a value of 23. What if you need the addition to happen first? If you were doing this math problem on paper and you wanted to make sure the 5 and 6 were added first and then that answer was multiplied by 3, you would write it like this: (5 + 6) * 3. The parentheses indicate that you should do the math inside of them first. In Blockly, you can force an operation to be done first by "nesting" it. To “nest” a math operation block, you place one math operation block within another math operation block. It is much like the nesting dolls pictured below.
Let’s build a program with three terms and two operations: an addition and a multiplication. To help you understand how nested math operation blocks work you will group the terms two different ways, which will give two different answers.
After the program loads, the terminal will display:
Why are they different? See if you can figure it out. If you are not sure, keep reading!
It’s a matter of what your BlocklyProp program evaluates first.
This shows that when math operation blocks are nested, BlocklyProp evaluates them from the inside out. You can imagine that each math operation block is enclosed in parentheses, just as in the descriptions above.
Write a program that solves and displays the answers to the following problems. Choose your block nesting carefully to get the same answer you would using the standard order of operations:
(9 + 6) ÷ 3 - 2 = ___
10 - 2 × (6 + 1) = ___
100 × 4 ÷ (25 - 17) + 8 = ___
20 ÷ (10 - 1 × 55) + 2 = ___
After you've learned the basics of programming, you will begin connecting inputs, such as buttons or sensors, and outputs, such as screens and lights, to your Propeller Activity Board WX. You may want to write a program that makes a decision. For instance, you may want your program to turn on a light when you press a button.
In this program, you will use the Terminal receive text block located under COMMUNICATE > TERMINAL and the length of string block from OPERATORS > STRINGS to make a program that decides if an individual’s first name is shorter or longer than 7 letters.
You will not be able to use the delete/backspace key, so if you make a mistake, just reload your program and start over. Now, your program will display how many letters long the name is that you entered.
Use spaces when typing text in your block to help make your program more readable in the Terminal. If you don’t add spaces to text that appears before and after a number that you are trying to print in the middle of a statement, it will look like this:
By adding spaces, the output is easier to read:
These extra spaces will print this in the terminal:
Below is the if...do block, found in the CONTROL category:
The if...do block only works if you attach another block that makes a comparison. For example, the compare values block from the OPERATORS > NUMBERS category as shown here:
To use this block, insert two values and select a comparison to make between them from the drop-down menu. The block evaluates the comparison statement and provides a value of 1 if the statement is true, or 0 if the statement is false.
The = symbol is called a relational operator. Here is the list of relational operators in the compare values drop down menu:
= Equal to
≠ Not equal to
< Less than
≤ Less than or equal to
> Greater than
≥ Greater than or equal to
Sometimes, you may need to do one action if a condition is true, and a different action if it is false. In its original form, the if...do block only completes an action if the condition is true. You can, however, alter the if...do block.
The if...do block is a unique mutating block, meaning you can change how it works. Click on the blue gear icon in front of the word “if,” and a box will pop up for selecting options:
or
What if you want to test whether the name you entered is exactly 7 letters long, in addition to testing whether it is greater or less than 7 letters long? You can mutate the if...do block again to include an else if condition:
Sometimes your program will need to determine what to do based on whether one condition AND another condition are both true. At other times your code might need to check if one condition OR another condition is true. In this lesson, you will try building a program that makes decisions like these, based on two different inputs. These decisions are made with the boolean comparison block from the OPERATORS > NUMBERS menu.
To use the block for a complex decision, insert two compare values blocks into the boolean comparison block, and choose an option from the drop-down menu: and, or, and not, or not. The stuffed boolean comparison block can then go into an if...do block. For example, the expression below in plain words would read as "if the statement 'a is equal to b and c is not equal to d' is true, then clear the terminal screen."
It's a powerful technique with lots of practical uses. Let's use it to build prototype code for a simple game.
Let's build a program that will display who the winner is in a two-player game of “Rock, Paper, Scissors.” The rules of Rock, Paper, Scissors are simple:
Players make their choices by entering one of following letters into the Terminal: r = Rock, p = Paper, s = Scissors.
The program will collect input characters using the Terminal receive number block with its drop-down option set to ASCII character, and store them into a different variable for each player. Here is an example for Player 1:
Then, each variable and a character value block can be inserted into a compare values block to identify which letter players enter. Here's an example for Player 1:
The compare values blocks for each player’s input go into a boolean comparison block:
By building a block structure like this for different possible outcomes of the game, you will be able to determine which player won the match.
Creating several of the above blocks might seem like a lot of work. But, since each block is similar, you can make copies of the completed boolean comparison block and then change the values for other possible combinations. To do this, right click on the far edge of the entire block to view the drop-down menu. Be careful to duplicate the complete block and not just a part of it.
Ready to build the game?
The table of possible outcomes for the game of Rock, Paper, Scissors is below. Your code does not have to test for every possible outcome.
If it is not a tie, and Player 2 did not win, then Player 1 must have won. No need to check further than that!
Here is an example of the complete program. You may have built yours slightly different. That's okay as long as it works as you expect it to. Now it's time to test it out!
The Propeller will display the winning results in the Terminal.
Sometimes you need to be able to program your Propeller to repeat certain operations. This ability is useful for simple things, such as blinking light, and more complex tasks, such as robotic sensor navigation.
Blocks of repeating code are called loops. A loop can be set up to repeat a set of blocks forever, or while a defined condition is true, or for a specified number of times.
Open a new project and build the blocks as shown. You can find the conditional repeat block under the CONTROL menu.
The program above first prints the text “This loop repeats forever,” and then moves the cursor to the next line. Then, the program sets up a loop. Inside the loop, there is a block that prints the text “...and ever…” with a new line and a 1-second pause. The program will continue running forever. The only way to stop the program is to reset the Propeller microcontroller.
Many programs need to use loops that run forever, but sometimes it is helpful to break out of a loop. That is where the break block comes in handy.
In the next example, we will set up a new variable and give it a value of 0. Inside of the loop, we will add 1 to the variable using the de/increment block from the VALUES > NUMBERS menu. We will set it to increment, which is just a fancy way of saying "add 1 to the variable." Then, we will use an if...do block to see if our variable is greater than 5, and if it is, break out of the loop.
Modify your program to look like this:
The conditional repeat block has some additional options:
Sometimes, it is helpful for your loop to skip-count. Imagine that you need to turn a motor all the way around, but you want to stop every ten degrees - the repeat item block lets you do just that:
Now, try building a program that skip-counts:
You can use the repeat item block to count down as well. When you change the “by” value in the block, and start with a higher number than you end with, the repeat item block will count down (decrement) instead of up.
The BlocklyProp Terminal is very useful in viewing the value of a variable as it changes while your program runs. Sometimes, however, it is easier to understand what is happening by graphing a changing value, instead of looking at just the numbers.
BlocklyProp has graph blocks for visually displaying values in a Graphing window. You can find them under the Communicate menu. Let's try it!
This example project plots a straight line as the value of a variable increases with each trip through a counted loop.
You should see the graph generate for 10 seconds until it looks like the one below. The horizontal x-axis of the graph is the time in seconds, and the vertical y-axis is the value of the add variable.
The very first block is Graph initialize. The keep 60 seconds setting generated the vertical grid lines as shown above. The y-axis autoscale setting let the graph size itself to fit the data vertically.
Next is a set variable block that initializes add to zero. The add variable gives us a value for the project to plot.
The rest of the code is in a loop set up to repeat 10 times. The Graph value block is the first thing inside the loop, with the add variable attached. Since add was initialized to zero and hasn't changed yet, the plotted line begins at the origin 0,0. Next, the set variable block with an addition operation attached increases the value of add by 10. A pause (1000) block slows the loop down so the graph updates approximately once per second.
Each time through the loop, add increases by 10, plotting a new point that is one division up and to the right, creating an upward-trending straight line. It stops at 9 on the x-axis, because the loop began counting at zero. And it stops at 90 on the y-axis for the same reason. Notice in the upper right corner of the Graphing window, there is a little box matching the color of the plot line, displaying the value 90. That is the value of add when the loops are complete.
Save, Refresh, Run! — Each time you change your project code, click Save. Then, you will need to refresh your browser before you run your updated code - every time. Otherwise, you will see your data label values update, but you will not see any traces plot onto the graph.
Graph or Terminal, pick one! — Do not try to use Graph and Terminal blocks in the same project, just one or the other. Even if your Graph initialize block is at the top of your code, and a Terminal print text block is at the very bottom, the Terminal takes charge and will prevent the Graphing window from opening. You would, however, see some data values appear in the Terminal window.
Let's graph the value of a second variable, named subtract, along with the first one.
Your project can graph up to 10 values at the same time!
Links
[1] https://learn.parallax.com/tutorials/language/blocklyprop/getting-started-blocklyprop-solo
[2] https://learn.parallax.com/tutorials/language/blocklyprop/blocklyprop-functions-and-multicore
[3] https://learn.parallax.com/support/reference/propeller-blocklyprop-block-reference
[4] https://solo.parallax.com/
[5] http://learn.parallax.com/tutorials/propeller-c
[6] http://learn.parallax.com/support/reference/propeller-blocklyprop-block-reference/about-naming-things
[7] http://learn.parallax.com/ascii
[8] http://www.madlibs.com/
[9] https://www.khanacademy.org/math/pre-algebra/pre-algebra-arith-prop/pre-algebra-order-of-operations/v/introduction-to-order-of-operations