If the following paragraph makes no sense to you, don't worry, it's not necessary to understand at all to use the program. It can be helpful to understand if you are using Etoys to teach or apply programming concepts.
Etoys is a prototype object system. Everything on screen is an instance of an object pre-defined in Squeak Smalltalk. So to be clear when I refer to objects I'm really talking about object instances. It is not possible to create news classes of objects using the Etoys scripting tile system, you can only edit and manipulate object instances. Etoys is a Squeak image and you can use it to program in Smalltalk if you like but the focus here is mostly on the visual scripting tile system.
The opening home project has links to tutorials and demos but we'll just plunge into starting a new project.
When you open a project window Etoys creates an instance of the world object. Everything you see on the screen including the menu bar is contained within the world object. There are no separate staging areas. Design, scripting and script execution all happen in the same workspace. Left to right the menu bar contains an icon to get help, a box to enter a project name, arrows to navigate back to the home screen or through multiple projects, an icon to start a painting app, one to open a supply flap, one to select the interface language, one to toggle fullscreen on and off, icons to load and save projects and one to toggle the menu bar on and off. Hover over the icons with the mouse to get pop up tips on usage.
There are three ways to add objects to projects. You can paint one in the painting app. You can drag and drop files from your local drives. Png, jpg and bmp graphic files work well and they become sketch objects like the paintings. Sketches have unique properties similiar to sprites in Scratch. Dragging objects out of the supplies flap and fiddling around with them is the most fun. The supplies flap holds some commonly used objects and the object catalogue which holds the full complement of available objects. These range from basic shapes to small applications.
We'll start with a simple Ellipse. Click on the supplies flap icon and click on the Ellipse then drag and drop the created copy onto the main screen. Click on it with the left mouse button and it sticks to the cursor while you move the mouse around. Click again and it drops. Most objects can be moved this way but there are exceptions which can only be moved with the move handle icon.
Right click on the Ellipse and it becomes surrounded by icons. At the bottom you can change the name from Ellipse to give it a unique identifier.
Icon usage from bottom left clockwise:












Properties that can be changed have a menu icon and an identifier tile on the left side and an assignment symbol attached to a value display on the right. Etoys uses the assignment operator ←. The equals sign = is used for comparison only. Depending on the property type you can change it by scrolling values, typing in a new value or selecting one from a list. Changes have an immediate effect.
The test category contains special tiles that are used for detecting other objects or conditions. They are read only, are used inside testing tiles and will evaluate to true or false.
Along the editor's menu bar you can see options to collapse it back to the viewer, give it a unique name, run it with the yellow exclamation icon or step through it one statement tile at a time. You can also change it's status to run constantly (ticking) or handle mouse and other events. The rate at which it runs can be changed by clicking on the clock icon. There are useful tiles available in the gold box icon. Among the list of options in the options menu, you can select to add a parameter, create a button that runs your script when clicked or convert tiles to text and write and save Smalltalk code.
Variables are created in the viewer by left clicking the light brown down arrow icon at the top of the Viewer window. Give the variable a name, select the type and any other options available. The variable tile now appears in the variables category. It is assigned a default value at time of creation. Change the value if you like. Drag it by the assignment symbol to drop it into a script or drag the variable name to create a watcher or replace another tile. For more on variables see Variable Types and Thoughts about Scope.
So that's the basics of working in the Etoys system. The user has a lot of control over managing the visible workspace. Objects behave in similiar ways. Many such as viewers, scripting tiles and editors are constructed with multiple objects. There are objects to manage other objects. Delete a scripted object instance and all it's associated values and scripts go with it. Of course such control causes a few headaches. Such headaches motivated this blog. Hopefully the Tips and Troubleshooting section can help. There's some particular caveats about deleting things in Save and Save Often.
Last Updated January 29, 2017.