links to this page:    
View this PageEdit this PageUploads to this PageHistory of this PageTop of the SwikiRecent ChangesSearch the SwikiHelp Guide
Morphic Tutorial: Build a 4 digit LED counter
Last updated at 3:03 pm UTC on 2 March 2019


updateMe – This is the most complete Morphic tutorial I have found to date. It would be great to update it to 3.9, especially in regard to the use of AlignmentMorphMatthew Fulmer
Revision history
First Draft: Compilation of Squeak list messages by Hannes Hirzel
Second Draft: Proof reading, testing and additional comments by Daniel McBrearty
Third Draft: Hannes Hirzel
Elimination of the instructions from Tim Olson on how to do it by direct manipulation, because Dan Shafter has done a specific Counter Tutorial for this. This tutorial deals with two other ways of creating a simple counter.
Revision of the rest and test with Squeak release versions 2.7, 2.8 and 3.0.
Tested under 3.1 Carlos Crosetti, removing the orientation: messages.

If you like to help please feel free to either add questions, comments or elaborate on the instructions. Anybody who has the knowledge is invited to revise it and come up with either additions on the approaches described here or add additional ones. This tutorial could serve as a starting point for a wider discussion on how to work with Morphic.


A very simple example - let's say a counter - helps to learn Morphic. Using a counter as an example has some tradition in the Smalltalk literature and many books of the last twenty years have an example on this.

There are different approaches to using Morphic. This tutorial elaborates these.

The problem

Andre M. (Mike) Maloney" asked in comp.lang.smalltalk

> Hi all,

I'm just starting to learn Smalltalk and am using Squeak (2.4c). I'm trying to build a simple counter and need some help. The counter will have three buttons and a display. The displayed value will start at one and the buttons will increment the displayed value by one, decrement the displayed value by one, and reset the displayed value to zero.

I've found the ValueHolder, button, and PluggableButtonController classes, but how do I put the buttons and ValueHolder into a parent frame (window?, view?)?

Squeak has two different interface models: the older MVC (Model, View, Controller), and the newer Morphic. The classes you found are part of MVC. You can use these to build an MVC interface, but it is a little more complicated than Morphic.

This tutorial shows how you can use Morphic to solve this problem.


Make sure you are in a Morphic project. If you are not sure about this look here: Starting up Morphic

First approach

Morphic has a direct manipulation interface and a programming facility using tiles. You don't need Smalltalk in the classic way for this. Dan Shafer explains the solution using direct manipulation here: Counter Tutorial

Note that the direct manipulation approach used in Dan Shafer's excellent tutorial above will not work in Squeak 5.2. You will get tons of deprecation warnings, and the icons in the viewer panel are a bit messed up (you see mouse icons instead of menu icons in the viewer's interface). Grab an older version of Squeak to follow along though because it's still a great tutorial.

The second approach below works well with Squeak 5.2 however.

Morphic Tutorial: Build a 4 digit LED counter -- 2nd approach