Hello 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.
- Blocks Menu - Categories of all blocks available in waterbear
- Toolbar - Toolbar of actions for Waterbear
- Tutorial - This is saved for a future feature.
- Scratchpad - You may drag blocks into and out of this space temporarily. It is helpful when rearranging blocks.
- Workspace - This is where the blocks that make up the program are placed.
- Preview - A preview window showing the programming running
- Text Script - The blocks translated to the underlying programming language
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.
- 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.
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.
The workspace is where the blocks are placed to make a working program. Here the example "Fill circles" is in the workspace.
This is a window that displays the program in a running state. Here the example "Fill circles" is running.
This shows the block script converted to script text (in this case Javascript). It is Read-Only
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.
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.
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.
If you run the script, you will see "Hello World" in your preview window and the script text below it.
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.
Fill in the appropriate values. We fill in "Hello World" (with surrounding ") into the socket.
Mac Keyboard Shortcuts Chrome: command + alt + j Firefox: command + option + k
Need Windows Shortcuts
If you run the script in full screen, you will see "Hello World" appear at the bottom of the Javascript console.