Hello Waterbear

Dethe Elza edited this page Jan 16, 2015 · 6 revisions

OUTDATED: This page needs to be updated and does not reflect the current state of Waterbear.


This is an overview of the interface of Waterbear. Below the image is a list of what feature each number refers to. Each feature will be detailed in the next section.

Waterbear Interface

  1. Blocks Menu - Categories of all blocks available in waterbear
  2. Toolbar - Toolbar of actions for Waterbear
  3. Tutorial - This is saved for a future feature.
  4. Scratchpad - You may drag blocks into and out of this space temporarily. It is helpful when rearranging blocks.
  5. Workspace - This is where the blocks that make up the program are placed.
  6. Preview - A preview window showing the programming running
  7. Text Script - The blocks translated to the underlying programming language

1. Blocks Menu

The Block Menu is where all of the blocks are stored. A user can expand any section and drag the blocks out from the menu onto the workspace or into the Scratchpad. There is also a search bar that can be used to search for blocks by keyword.

The Block Menu with the "Arrays" section expanded to show all of the blocks related to arrays.

The user has search for "array" and the only blocks showing in the Block Menu are related to arrays.

2. Toolbar


  • New - Creates a new workspace with a blank program
  • Open Gist - Opens a program that is saved within a Github Gist and populates the workspace. Accepts a URL.
  • Open File - Opens a program from a local file on the computer and populates the Workspace.
  • Save Gist - Exports the current program in the workspace to a Github Gist. Returns a URL.
  • Save File - Exports the current program to a local .json file on the computer.


Waterbear includes a list of example projects provided by the Waterbear team. When an example is loaded, the previous script will be replaced by the example script.


  • Blocks Menu - Show/hide the Block Menu
  • Scripts Workspace - Show/hide the Workspace
  • Tutorial - Show/hide the tutorial pane
  • Scratchpad - Show/hide the Scratchpad
  • Preview - Show/hide the preview window
  • Text Script - Show/hide the script text
  • Run Full Size - Run the program full screen in the browser window.


Undo or Redo drags or edits within the workspace.

3. Tutorial (Under Construction)

4. Scratchpad

The Scratchpad is a place where one can drag and drop elements from and to the workspace.

Here a usr has dragged the "fill circle..." block from the workspace into the Scratchpad.

5. Workspace

The workspace is where the blocks are placed to make a working program. Here the example "Fill circles" is in the workspace.

6. Preview

This is a window that displays the program in a running state. Here the example "Fill circles" is running.

7. Text Script

This shows the block script converted to script text (in this case Javascript). It is Read-Only

Hello World

We are going to make two "Hello World" programs. One is going to print "Hello World" to the preview window, and one is going to log the text to the Javascript console.

If you are using a mobile device (phone, tablet, etc), you most likely will not be able to view the Javascript console, so that section may not be of use.

Hello World - Print String


Step 1 - Find blocks

We search for "text" in the search box. We are going to want the "font" block and "fill text" block. The "font" block will allow us to the make the text larger than the default size, and the "fill text" will actually write the text onto the screen.

Drag the two blocks to the Workspace.

Step 2 - Fill in sockets

Drag the two blocks mentioned above to the workspace, and fill in the appropriate values. We fill in "40" px to make the text 40 pixels tall. We filled "Hello World" into the first box, and 150,50 into the x,y slots to position the text on the screen.

Step 3 - Run script

If you run the script, you will see "Hello World" in your preview window and the script text below it.

Hello World - Javascript Console

Step 1 - Find blocks

We search for "console" in the search box. We are going to want the "console log" block. This will allow us to print a string to the Javascript console. Drag the block to the Workspace.

Step 2 - Fill in sockets

Fill in the appropriate values. We fill in "Hello World" (with surrounding ") into the socket.

Step 3 - Open Javascript Console

Mac Keyboard Shortcuts Chrome: command + alt + j Firefox: command + option + k

Need Windows Shortcuts

Step 4 - Run script

If you run the script in full screen, you will see "Hello World" appear at the bottom of the Javascript console.

The End!