Thimble Learning Platform
Back to full view

Thimble Blockly

Introduction

Thimble Blockly is an easy-to-use interactive web-based programming environment. This module will teach you how to set up and use Thimble Blockly.

Objectives

  • Set up the Thimble Blockly Agent so that you can upload directly to your Arduino.
  • Learn how to make your own programs with Thimble Blockly.
  • Have fun!
  • Using Thimble Blockly

    Setup 

    First, you'll need a Thimble account to build and upload sketches from inside Blockly. You can create an account through the learning app.

    Once you have your account you'll want to install the Thimble Upload Agent. This program allows Thimble Blockly to connect to your board and upload programs to it. The installer that you want to use depends on your operating system.

    Windows

    Download and run the windows installer and then start the agent from the desktop or the start menu.

    Linux

    Download and unpack the installer package and run install.sh , then start it from your applications menu.

    Verification

    Now, connect your Thimbleduino to your computer and open blockly.thimble.io in your web browser. After logging in to your account you should be able to use the upload button in Thimble Blockly.

    Your first program 

    Blockly programs are built by connecting blocks together. Blocks that are connecten one below another are run one after the other. All blocks have to be connected to the start block to be included in the program. The blocks are stored in the menu on the left.

    Find the "DigitalWrite" block in the Input/Output menu and the "wait ms" block in the "Control" menu. Drag the blocks into position so they look like the image below. Make sure to change the values connected to the DigitalWrite blocks so that one is true and one is false.

    Blink ProgramBlink Program

    Once you're done, press the Upload button. Once you see the word "Done" next to the device dropdown your code has been uploaded. You should see the light on your Arduino blinking slowly. Try changing the program to make the light blink faster, or in different patterns.

    Looking at the code 

    Blockly means that you don't have to worry about the code, but if you want to see how your program is being turned into code you can select "View Code" in the menu. You can copy this code and paste it into the Arduino IDE. Then you can modify it and upload it. You don't have to worry about the code right now, but if you want to make really advanced programs later on you'll have to write the code yourself, so take a look and see if you can figure out how it all works!

    Your second program 

    Connect the potentiometer to an analog pin, then create a program like below (make sure to choose the right analog pin).

    Analog Plotting ProgramAnalog Plotting Program

    Upload the program and then select "Serial" from the menu to open up the serial monitor. You should see a bunch of numbers being printed out, representing the position of the potentiometer. You can click on the "Plotter" tab to show a visual representation of the data. Here's an example where I moved the dial back and forth randomly.

    Plot of analog positionPlot of analog position

    What else can I do? 

    If you select "Load" from the menu and click on the "Examples" tab you'll be able to see some programs that were made by other people. You can open these programs by clicking on them and see what sort of things are possible.

    Saving your programs

    Intro 

    Once you've made a program, you might want to save it for later. Thimble Blockly offers two ways to do this: Saving to your Thimble profile and saving to your local computer. Saving to your Thimble profile allows you to access your programs from any computer where you can use Thimble Blockly. Saving to your computer allows you to share the file with other people.

    Saving to your Thimble profile 

    In order to save to your Thimble profile you'll first have to be logged in to your Thimble account. If you aren't logged in and have a program that you want to save you'll have to use the local save option (see below). Once you're logged in, you'll want to enter a name for your program in the box at the top-left of the editor window. Now you can select the save option from the menu and then select "Save as new program". The sketch will be saved to your profile and will show up on the load dialog.

    Loading a program

    Loading a program from your Thimble profile is easy: Just select the load option from the menu and then click on the program that you want to load. If you have a lot of programs you might have to click through some pages.

    Updating a program

    If you change your program and want to save it, you should open up the save dialog and click on the same program that you saved to or loaded from earlier. The sketch will be updated and will be ready to reload.

    Renaming a program

    If you want to change the name of a program, you'll first have to load it. Once you've loaded it, change the name in the name box, click save, and select the old file that you want to change the name of. You'll get a confirmation dialog. Click OK and your program name will be changed.

    Deleting a program

    You can delete a program by opening up the save or load dialogs and clicking on the delete icon next to a program's name. If you click it you will get a confirmation dialog, and then the program will be deleted.

    Saving to your computer 

    The other option you have is to save your program to your computer. Enter a name for your program, open the save dialog, and then press "Save to disk". Your browser will then download the save file.

    Loading from your computer

    Loading a program is very similar. Open the load dialog, then click "Load from disk". An upload window will appear. Just find the file that you saved before and open it.

    Conclusion 

    You should now be able to easily save and load your programs so that you don't have to remake tham each time.

    Advanced Blockly

    Intro 

    Now that you're familiar with the basic functionality of Blockly, let's learn some more advanced techniques.

    Variables 

    Variables allow you to save something and remember it for later. To get a feel for variables, we're going to start by making the same blink sketch that we made before, but we're going to use a variable instead of copying the code twice.

    First we're going to make our variable. Click on the "+" button on the start block to create a new variable. Then, change the name of the variable to "on" and change the type of the variable from "Number" to "Boolean". Now, you can connect all of the blocks that make up the program. You can find all of the blocks in the menus on the left. Here's what it should look like when you're done:

    Blink Program with VariablesBlink Program with Variables

    Upload the program to your board. It should do the same thing as the old blink sketch.

    Functions 

    Once you start making bigger programs you might notice that things become very long and there might be some big chunks of code that you have to copy into a bunch of different spots. Functions allow you to get a chunk of code, separate it out, and then use that chunk of code in other places. Functions can be useful to help organize things even in smaller programs.

    Let's start by building part of a Tic-Tac-Toe game. This program is just going to print out the Tic-Tac-Toe board over serial.

    First, lets make our board. Press the "+" button on the start block to add a variable and then change its type to "List Number". Press the "+" button on the list block until you have 9 items in the list (for 3 rows of 3). Now you can set some values in the list. We're going to use 0 to signify an empty spot, 1 to signify a spot with an X, and 2 to signify a spot with an O. Here's what it should look like when you're done:

    List representing a Tic-Tac-Toe GridList representing a Tic-Tac-Toe Grid

    Once you've done that you'll have to set up the blocks. Here's how it should look like:

    Blocks to print out a Tic-Tac-Toe GridBlocks to print out a Tic-Tac-Toe Grid

    Upload that to your board and check the serial monitor. You should get a printout of your Tic-Tac-Toe board each second.

    Now this works, but the code is starting to get pretty big, and it's going to get messy when you start adding more features to your game, so let's use a function. Go to the functions panel and grab the function block without a return part. The block will have a "+" button and a name. Now name your function something that makes sonse to you, such as "printGrid". Note that there are some restrictions on when name you can choose.

    Once you've added your function, drag all of the blocks that you added before into the function. I'm going to leave the last two blocks behind though. Go back to the functions menu and you should now see a block at the bottom with the name of your function. Place that block where your other blocks used to be. Your program should now look like this:

    Tic-Tac-Toe with a FunctionTic-Tac-Toe with a Function

    You can upload this program and it will work just like the last one. You might notice another spot where functions could help us: see the two identical chunks that check if the number is 0 or 1? We can move that into a function so that we don't have to copy it. This time you're going to grab the fuction block with the return part on it, since we want to get a value from the function. Give the function a name like "getGridSlot" and make sure that the return type is set to "Number". Once you have your new function, find the part that is exactly the same in both blocks (the "in list" part) and connect it to the return section of the new function.

    The "i" and "j" variables that you were using before are no longer valid, because those variables are only found inside the loops, so we'll have to make new ones. Press the "+" button on your new function to add arguments. Arguments are like variables except that their value is set by whatever code uses your function. Give them names like "x" and "y", and set their types to "Number". "y" replaces "i" and "x" replaces "j".

    Now go back to the function menu and grab the block for your new function and put it where the duplicated code used to be. Connect a "j" block to the "x" connection and connect a "i" block to the "y" connection. Do the same for both places where the duplicated blocks used to be. Once you're done your program should look like this:

    Tic-Tac-Toe with a Function Returning a ValueTic-Tac-Toe with a Function Returning a Value

    Conclusion 

    That was a lot to learn, but hopefully you managed to keep up! Have fun with your new programming skills, maybe even make this into a full Tic-Tac-Toe game!