sugarlabs / turtleblocksjs

Javascript/HTML5 port of Turtle Blocks

TurtleBlocks (the JavaScript version)

Turtle Blocks is an activity with a Logo-inspired graphical "turtle" that draws colorful art based on snap-together visual programming elements. Its "low floor" provides an easy entry point for beginners. It also has "high ceiling" programming, graphics, mathematics, and Computer Science features which will challenge the more adventurous student.

Note: The JavaScript version of Turtle Blocks closely parallels the Python version of Turtle Blocks, which is included in the Sugar distribution. Sugar users probably want to use the Python version rather than the JavaScript version. (The JavaScript version is included in Sugarizer.)

Using Turtle Blocks

The Javascript version of Turtle Blocks is designed to run in a browser. Most of the development has been done in Chrome, but it should also work in Firefox, Opera, and Safari. You can run it directly from index.html, from a server maintained by Sugar Labs, from the github repo, or by setting up a local server.

Sugar users can run Turtle Blocks as an app embedded in the Browse activity (See Turtle Blocks Embedded) or simply open Turtle Blocks in the Browse activity itself.

Once you've launched Turtle Blocks in your browser, start by clicking on (or dragging) blocks from the Turtle palette. Use multiple blocks to create drawings; as the turtle moves under your control, colorful lines are drawn.

You add blocks to your program by clicking on or dragging them from the palette to the main area. You can delete a block by dragging it back onto the palette. Click anywhere on a “stack” of blocks to start executing that stack or by clicking in the Big Play Button (fast running) or press it for a long while for the Turtle to run (slowly) on the Main Toolbar.

Getting Started Documentation

The basic buttons and basic blocks are explained in detail in Documentation.

A guide to programming with Turtle Blocks is available in Turtle Blocks Guide.

A quick start:

Click to run the project at full speed.

Stop the current project running.

To start a new project.

To save a project.

To open a saved project.

Under the secondary menu there are additional play buttons.

Click to run the project slowly.

Click to run the project step by step.

Use advanced mode to expose many additional blocks and features.

There are some buttons at the top of the canvas:

The Show (or hide) grid button will display a pie menu with a variety of grid options. The Erase button will clear the screen and return the turtles to the center of the screen. The Screen button will shrink (or expand) the graphics area.

There are some buttons on the bottom of the canvas:

The Home buttom returns the blocks the center of the screen. The Hide button hides (or reveals) the blocks. The Collapse button collapses (or expands) stacks of blocks. The Shrink and Grow buttons change the size of the blocks.

Some basic blocks include:

Moves turtle forward.

Turns turtle clockwise (angle in degrees).

Sets color of the line drawn by the turtle.

Sets size of the line drawn by the turtle.

Loops specified number of times.

Top of nameable action stack.

Invokes named action stack.

Google Code-in participant Jasmine Park has created some guides to using Turtle Blocks: Turtle Blocks: An Introductory Manual and Turtle Blocks: A Manual for Advanced Blocks

Turtle Confusion

Turtle Confusion presents 40 shape challenges to the learner that must be completed using basic Logo-blocks. The challenges are based on Barry Newell’s 1988 book, Turtle Confusion: Logo Puzzles and Riddles. You can access these puzzles from the Turtle Confusion page.

Music Blocks

Music Blocks is fork of Turtle Blocks with additional blocks for programming music.

Reporting Bugs

Bugs can be reported in the issues section of this repository.

Contributing

Please consider contributing to the project, with your ideas, your artwork, your lesson plans, and your code.

Programmers, please follow these general guidelines for contributions.

Advanced Features

Turtle Blocks has a plugin mechanism that is used to add new blocks. You can learn more about how to use plugins (and how to write them) from the Plugins Guide.

List of Plugins

• Mindstorms: blocks to interact with the LEGO Mindstorms robotics kit
• RoDi: blocks to interact with RoDi wireless robot
• Carbon Calculator: blocks for exploring your carbon footprint
• Maths: addition blocks for some more advanced mathematics
• Translate: blocks for translating strings between languages, e.g., English to Spanish
• Dictionary: a block to look up dictionary definitions
• Weather: blocks to retrieve global weather forecasts
• Logic: blocks for bitwise Boolean operations
• Finance: a block for looking up market prices
• Bitcoin: a block for looking up bitcoin exchange rates
• Nutrition: blocks for exploring the nutritional content of food
• Facebook: a block for publishing a project to Facebook
• Heap: blocks to support a heap and for loading and saving data
• Accelerometer: blocks for accessing an accelerometer
• Turtle: blocks to support advanced features when using multiple turtles
• Gmap: blocks to support generation of Google maps.
• Random quote: returns random quote of the day

turtleblocksjs's Issues

setting variable values

When picking a block such as 'forward' it comes with a default argument. Modifying such a default seems very erratic. It appears that one has to detach the value box from the parent block, change the value and then reattach it. Moving the block often results in the whole screen scrolling downwards. Entering a new value makes all other values return to their defaults but only as shown on the screen. The actual values are preserved.
Currently I've got myself into a state where the value entry box seems to jump out of the container and I seem unable to get the value back where it belongs.

Scroll bar visible while loading.

See the image, a scroll bar is appeared when loading. Also, it doesn't load at once.

plugins for status widget

(1) port the status widget from Music Blocks to Turtle Blocks;
(2) add a mechanism to support the addition of plugin parameters to the status mechanism

Broken tool in media palette

@walterbender

404 errors in planet code

Seeing lots of GET https://turtle.sugarlabs.org/undefined 404 (Not Found) in the console when opening the planet. Also, if Ignacio's commit [1] is enabled, the planet fails to properly download after the first use.

[1] walterbender@09714c6

trash bin

I can find no way of deleting items. At one time I saw something that looked like a waste paper basket in the top right but dragging items to it did not do anything and it seems no longer to be there.

Coordinates of turtle changes after resizing the window

Angle of turtle as well as its cartesian coordinate should not be changed even after resizing the window. So labeling of bitmap should be changed to get correct coordinates.

double the fun?

Sometimes the planet shows each project twice

redesign of Run buttons

The run buttons (fast, slow, step) take up a lot of room on the toolbar. Maybe there is a way to show just one button at a time? A long press could be used to open a panel for selecting other options. One question is how does the user discover this ability?

Cannot import images on Android

fileChooser doesn't appear.

loading images on a chromebook

Images from the download folder on a chromebook do not load properly into image blocks or show properly with the show block. Images over the web work fine.

Can't edit values of number or text blocks in Chrome

When running Turtle Blocks JS in a Chrome browser from index.html or the Sugar Labs server, the values of text and number blocks can't be edited. This doesn't seem to be an issue if run from a local server or if opened in Firefox.

expander

There as yet appears to be no mechanism to avoid blocks sitting on top of each other.
(In the non js version it's in the flow control palette not yet implemented in js.)

Names of the icons should be displayed for the Block Palette

Blocks stay lit up even their execution is over . (Reference to https://github.com/walterbender/musicblocks/issues/32)

See Run slow and Run step by step to reproduce this bug.

Pop up dialog box for Settings needs border

The settings pop up box which appears when clicked the settings icon on right panel.

Plugin: Hide blocks from palettes

When I am developing a plugin, I might want to be able to hide blocks from the palette menu though keeping them in the code if used. Use cases:

1. Finding out whether a robot is an ev3 or NXT then hiding inappropriate blocks (eg. led only shows for NXT, gyro only for ev3)
2. Removing blocks from the plugin without breaking existing programs

What do you think?

p5.min.js not found

I've got a JavaScript error trying to read lib/p5.min.js.
This file is referenced on line 10 of index.html but don't exist in the repo.

"logo is not defined" for flow blocks when using plugins

I'm still having issues with plugins, I've found this while testing the RoDI plugin but it also happens using the nutrition plugin.

To reproduce:

1. Load a plugin which uses a flow block (i.e. Nutrition)
2. Use an eat block and connect it to any food
3. Click on it
4. The following error appears on the js console

VM650:1 Uncaught ReferenceError: logo is not defined
    at eval (eval at Logo._runFromBlockNow (logo.js:4483), <anonymous>:1:34)
    at Logo._runFromBlockNow (logo.js:4483)
    at logo.js:970
(anonymous) @ VM650:1
Logo._runFromBlockNow @ logo.js:4483
(anonymous) @ logo.js:970
setTimeout (async)
Logo._runFromBlock @ logo.js:969
Logo.runLogoCommands @ logo.js:926
(anonymous) @ block.js:1260
(anonymous) @ easeljs-0.8.2.min.js:12
b._dispatchEvent @ easeljs-0.8.2.min.js:12
b.dispatchEvent @ easeljs-0.8.2.min.js:12
b._dispatchMouseEvent @ easeljs-0.8.2.min.js:13
b._handlePointerUp @ easeljs-0.8.2.min.js:13
b._handleMouseUp @ easeljs-0.8.2.min.js:13
f @ easeljs-0.8.2.min.js:13

Thanks!

booleanOneArgBlock lost in transition to SVG

The transition to svg seems to have seen the booleanOneArgBlock get removed. This is annoying, since I need it in TurtleStorm for my touch sensor block (bool out, text in).

@walterbender could you please re-add it?

Transfer project to sugarlabs

:)

Loudness block doesn't work on Windows

tested in Chrome

Text version in parallel with the graphical blocks ? (discussion)

I'm not sure this is the right place to ask this question, so feel free to close the issue or move it to a wiki or a discussion forum. While trying to show my 9 years old son how turtleblocks works, I became quickly annoyed by the space requirements for the blocks on the screen. With a few functions and a few color changes, for example, or adding only 2 or 3 variables, the screen becomes quickly full of blocks. I would like to know if you plan to have the possibility of associating the blocks with a text representation of the script. It could be more compact, easier to debug and maybe easier to follow if more than a few blocks are used.

In the days of Borland Delphi, visual programming was used to design the interface of a program, but the developer always had access to the underlying function and object calls and parameters. Maybe I'm just melancholic about that interface, but I always found it natural and productive.

Many thanks for developing the turtleblocks. Best regards.

Delete All button should leave only one turtle

But it is not the case
here is the screen shot ->
before pressing button - >

after pressing button ->

But Only one turtle should be left.

sometimes blocks conatiner won't scroll

Sometimes the blocks container won't scroll even though it is unlocked.

Sometimes long press puts menu in wrong place.

It should always appear just above the current stack.

README getting started guide is not up-to-date

As in title - the pictures (icons) are outdated together with descriptions of their functions.

munsell color problem

The entries for 0R and 2.5R V9 are wrong (they are copies of the V8 colors).

Camera doesn't work on Android

'nuf said

Horizontal bar appears while loading Turtle Blocks

Close icon is not working.

Close icon is not working.

Cordova doesn't do onResize

After rotating your devie, it gets things like this:

And doesn't even update the canvas bounds (test: drag something around the screen)

About localization setup ? thanks

Hello all
I find this project has "localization.ini"
but I can't find any info about setup.
I find "translate.json" plugin. but can't work!!
thank all.

Mouse events are not binded properly with co-ordinates on canvas.

Currently in the "Toolbar" on top, mouse events like click and drag doesn't point to specific element/toolbar because of co-ordinates detection mechanism on canvas.
Tough its not a serious issue but improving it will be great.
I would like to discuss ways other than co-ordinate detection too.
Attaching some images where my mouse is not on the element but i can trigger the event.

The suggestion/error pop-up does not seem to disappear after the error has been corrected

In the attachment, when the action block has been removed or after the error is corrected,the pop-up doesn't disappear.

storage of work

Suggested priority #1: ability to store one's work.
Congrats on progress made so far.

Global variables set by one plugin can be overwritten by a second plugin

https://github.com/walterbender/turtleblocksjs/blob/master/js/utils.js#L413

With currently implemented solution, different plugins can overwrite previously set variables with the same name. There is no validation, if global variable with specified name already exists. It can lead to plugins' malfunctioning. Maybe we should implement some kind of validation or make strict naming convention for globals set in plugins?

Tour messes things up on mobile

Joyride does not work on mobile... really. Here are some pretty pictures:

Full album: https://imgur.com/a/Gl1E6

"this.publish" function in js/samplesviewer.js can overwrite server files

When a user clicks the 'publish' button in the 'Planet' view there are no checks to see whether the project is already published - this slows the code down and also can overwrite entries already present on the server. Maybe a user could be forced to name their project with a name that has not already been used?

Identical issue to https://github.com/walterbender/musicblocks/issues/387

Bug with Joyride, Touring incorrectly.

While you take tour to Turtle Blocks,
After Expand/collapse collapsable blocksExpand/collapse tour is not according to subject.
I will start fixing it tonight. [~Abhishek ]

Polar coordinate grid not centered under some circumstances.

Especially evident after a resize

Text rotation not saved properly in SVG output

We need to close the path, insert the text, then start a new path.

note to frequency block always returns NaN

As in title, block (taken from media palette) seems to be always returning NaN. However, e.g. for A4 it should have been 440Hz (see picture below).

Browser: FF
Version of TBJS: master branch

SVG output somewhat broken

The included SVG is supposed to render as an R. Looks fine in TB, but not correct as SVG output.

<?xml version="1.0" encoding="UTF-8" standalone="no"?><svg xmlns="http://www.w3.org/2000/svg" width="1055" height="868"><g transform="scale(1,1)"><rect x="0" y="0" height="868" width="1055" fill="rgb(146, 181, 200)"/><path d="M 544.86,549.7333333333333 624.9088888888889,549.7333333333333 728.1044444444444,819.7777777777778 896.8822222222223,819.7777777777778 778.2555555555556,527.5511111111111 C 845.7666666666667,499.58222222222224 896.8822222222223,439.7866666666667 896.8822222222223,318.26666666666665 896.8822222222223,298.97777777777776 C 896.8822222222223,99.33777777777777 758.0022222222223,67.5111111111111 635.5177777777778,67.5111111111111 388.62,67.5111111111111 388.62,819.7777777777778 544.86,819.7777777777778 544.86,549.7333333333333 " style="stroke-linecap:round;fill:none;stroke:rgba(255,0,104,1);stroke-width:4.822222222222222pt;" /><path d="M 544.86,414.7111111111111 544.86,202.53333333333333 642.2688888888889,202.53333333333333 C 684.7044444444444,202.53333333333333 738.7133333333334,218.92888888888888 738.7133333333334,303.8 738.7133333333334,313.44444444444446 C 738.7133333333334,398.31555555555553 684.7044444444444,414.7111111111111 642.2688888888889,414.7111111111111 544.86,414.7111111111111 " style="stroke-linecap:round;fill:none;stroke:rgba(255,0,104,1);stroke-width:4.822222222222222pt;" /></g></svg>

Before and after resizing turtle position changes

Bug in documentation

It says:

Action stacks let you to extend

it should say:

Action stacks let you extend

Loading plugins is broken in turtleblocksjs

Starting from this commit, where the way of loading plugins (dictionary instead of an array) changed, plugins can no longer be loaded in turtleblocks.

It seems there's a discrepancy between turtleblocks (which uses arrays) and musicblocks (which uses dictionaries).

What's weird is that the pluginify scripts has more functionalities on the turtleblocks side but still uses the array method for specifying the parts of the plugin. Which is the correct one?

Comment removed

Testing

So, this has no tests of any kind at all right now 😢 As seen in #147, we can eaisly break things because there are lots of different browsers and lots of code that is fragile. I know that @walterbender, you say this codebase needs refactoring, so why not get talking more specifically about it?

Our current architecture merges the "model" and "view" in our code, which makes testing harder. It does not make it impossible to write tests though, it just means that we are more BDD tests than TDD tests. Separating the model and view means it is much easier to test the model (it is pure js!) but does not fix the issue with the view being canvas (harder to test than DOM).

So, how do we test with js and canvas? I think this is 2 parts, how do we unit test and how do we test canvas?

For unit testing there are many options. I have used QUnit previously. It is based inside your browser and is very simple, agile and nice 😄. Because it is browser based, it is super easy (load web page in browser) to test everywhere! You can test in many environments and even production eaisly. Another framework (no experience with this one sorry) is Jasmine. It is not based within the DOM, so must be run using a node and node-canvas. The advantage is that we have examples to draw off, as it used by easel js.

For testing the app, there seems to be 1 common method: compare the output from the canvas to an image we have taken previously. One example is in Easel js or a Simple ImageDiff Demo. These are using Jasmine. (It would probably be simple to adapt it for another framework though). If we use the image comparison method, we would only require minimal changes to our code (I think). Off the top of my head, we would need to force a size for the canvas and make a way override the scale.

Hopefully this just gets the conversation started! I think that if we add tests we will stop breaking things (as much), which should be a goal as we move closer to production (and especially if we want to stay as agile).

Text rotation not saved properly in SVG output

The rotation is not accounted for.