Explanation of screen

PC and Tablet (landscape) version

Figure  shows a screenshot when the application is accessed using a PC browser.

The screen consists of two parts. The left is the “pictogram display area” for displaying pictograms, the right is the “program code input area” for describing programs. The pose of the human shaped pictogram can be changed or moved by entering a program in the program code description area.

Options according to the purpose of use

You can turn on and off four functions according to the purpose of use.

Icon(Name) Explanation
(Show coordinate system) When the check box displayed on the right of the image is turned on, the coordinate system is displayed. The coordinates are in the XY coordinate system (the X and Y values are combined to represent the position). The horizontal direction is the X coordinate from the left end -320 to the right end 320, and the vertical direction is the Y coordinate from the upper end -320 to the lower end 320. That is, the center is (0,0), the upper left is (-320, -320), the upper right is (320, -320), the upper left is (-320, -320), the upper right is (320, -320).

 

Control buttons

Playback, stop and so on are controlled from the control buttons.

Icon(Name) Explanation
(Play) Play the animation from the beginning.
(Fast forwarding) Fast forward playback from the beginning. Useful for getting an overview when the overall execution time is long.
(Stop) Stop the animation.
(Replay) Play the animation from stopped state.
(Clear all) Clear the program written in the “program code input area”. A confirmation dialog box appears before erasing.

How to download contents

The application provides how to download contents in three ways.

[1. Download program code]

(1)  Input the title in “Title input” field.

(2) Press “Download button”,  and the code would be downloaded with a name of “title”.txt (here “title” is a name you inputted in “Title input” field.

[2. Download shot image]

(1) Press “Image download button”,  and the shot image would be downloaded with a name of “title”.png (here “title” is a name you inputted in “Title input” field.

[3. Download animation]

(1) Turn on the check button to the right of the video download button.

(2) Execute once from the beginning to the end. Although it runs slowly, animated image are generated dynamically.

(3) Press “Movie download button”,  and the animation file would be downloaded with a name of “title”.gif (here “title” is a name you inputted in “Title input” field.

 

Block List

Motion Block

Drawing Block

Others Block

Turtle Block

 

Mouse operation and corresponding processing on pictogram display area

The corresponding commands can be added to the program display area automatically by various mouse operations on the pictogram display area.

Mouse position when drag start Mouse operation Processing on pictogram display area
In the human pictogram display area

(Expect for the drawing point of human pictogram)

Left click and drag Rotate correspond part of human pictogram
Right click and drag Translate
Outside the human pictogram display area Left click and drag Draw line
Right click and drag Draw Oval
Any Hold down Change direction( front and side) of human pictogram
A drawing point of human pictogram Click Hold and release the pen at a drawing point