Proposal by Matthias Springer for Athen's HTML5 canvas

Proposed by Matthias Springer (profile, biography)

How will I do that project


At first I have to learn how Athens works. The Athens project comes with the "AthensTutorial", a step-by-step tutorial that begins with the basic concepts and uses most of Athens' features. I will go through this tutorial to understand the Athens API.

I am experienced with HTML4, CSS and JavaScript, and know the basic concepts of the HTML5 canvas. I will take a look at advanced tutorials on HTML5 canvas on the Internet, if necessary.

I am already experienced with Amber and wrote a fairly complex application in Amber before the GSoC, so no further preparation will be needed. 

In general

After getting familiar with Athens, I will start implementing the basic classes in "Athens-Core". The classes in "Athens-Core" are mainly abstract superclasses and classes that coordinate the rendering (e.g. "AthensCanvas").

In the next weeks I will gradually implement features to get the next part of the tutorial running. The tutorial consists of 31 steps and becomes more difficult (uses more advanced features) with every step. Once the tutorial is running on Amber I am almost finished with Athens implementation (mainly bug fixing from now on), since the tutorial uses most of the features offered by Athens.

I will start developing a small game that shows most of the features. This should be a really good-looking game in order to convince other people to use Athens and Amber (give them some eye-candy). Then I will start implementing a small example that shows how Athens can be used to build GUI applications (windows, buttons, ...). After the GSoC, I plan to use Athens to implement a Morphic-like framework in Amber, a project that I already started before the GSoC. Using Athens we can provide high-quality user interfaces that benefit of the advantages that vector graphics have (e.g. stepless zooming).


I will reuse as much code as possible from the Pharo implementation, making it easier to keep my implementation up-to-date with the Pharo implementation. This can be achieved by putting Amber-specific code into a separate package.

  • Athens-Cairo-*: only needed in Pharo (we don't need it in this project) for drawing.
  • Athens-Core-*: core classes are be platform-independent.
  • Athens-Amber: new package containing Amber-specific code. This package contains what Athens-Cairo-* contains for Pharo.
  • Athens-Examples/SVG/Text/Tutorial: should be platform-independent.

I might have to make slight changes to the common source code due to differences between Amber Smalltalk and Pharo Smalltalk. For instance, Amber does not support the dollar character syntax and there are some restrictions on naming instance/class variables.

What methodologies will I use

I will do some "explorative testing" in order to understand Athens. At the beginning of each week I want to talk to my mentors about the features to implement next and discuss important design decisions. During this talk I also present the implemented features from the last week/iteration. In week 1 and 2 we should discuss architectural decisions in detail, so we should plan to have some longer discussions/Skype sessions.

The requirements are quite straightforward: implementing Athens in Amber, support all features that are supported by the reference implementation in Pharo (guided by the tutorial) and provide demo applications. Therefore, I think we don't need to specify user stories or use cases.

In general, I like to have tests for all implemented features. We'll see if that makes sense for this project, since it's mostly GUI development. Amber has built-in SUnit support and GUI tests could be done with Selenium. The Athens implementation for Pharo does currently not have tests. 

Suggested timeline and milestones

  • Week 1 (June 17th - June 23st): learn how to use Athens (Athens tutorial), implement classes in "Athens-Core".
  • Week 2: implement features for steps 2, 3, 4, 5 (important architectural decisions need to be made and implemented; step 1 is installation): creating surfaces, shapes, basic drawing, colors, coordinates.
  • Week 3: implement features for steps 6, 7, 8, 9, 10, (11): transformations.
  • Week 4: implement features for steps 12, 13, 14, 15, 16: paths.
  • Weeb 5: implement features for steps 17, 18, 19, 20: self-intersection paths, hollow shapes, gradients.
  • Week 6: implement features for steps 21, 22: pattern paint, surface as paint.
  • Week 7: implement features for steps 23, 24, 25, 26: stroke paint.
  • Week 8: implement features for steps 27, 28: paint modes.
  • Week 9: implement features for steps 29, 30: clipping, text.
  • Week 10: time buffer, implement features not used in the tutorial (if any).
  • Week 11: implement features not used in the tutorial (if any), bug fixing, cross-browser compatibility bug fixing.
  • Week 12: cross-browser compatibility bug fixing.
  • Week 13: implement game.
  • Week 14 (September 16th - September 22nd): implement game, create proof-of-concept of how to build user interfaces with Athens.

This is just an estimation. Some features might turn out to take longer while other features might turn out to be easier to implement.

Where I see the risks

Athens might require classes/methods that are not provided by Amber. Differences in syntax can be changed easily. I will probably have to implement some missing classes (e.g. "Color") but when skimmed through the source code, I found nothing critical.

Athens might use libcairo features that can not be directly mapped to HTM5 Canvas features. This is unlikely, HTML5 Canvas supports a lot of features. Otherwise, I have to implement the feature and do the whole drawing on the canvas "on my own".

There might be issues with different web browsers. I will focus on getting everything running in Chromium and care about Firefox, Safari and Internet Explorer later. From my experience, such problems can be fixed with additional checks in JavaScript/Smalltalk code and CSS.

How the results will look like

  • A modified version of Amber with additional classes for Athens (multiple Smalltalk source code files, one per package). We can use dalehenrich/amber-skeleton to have all Athens code in a seperate repository.
  • Demo applications: a game and a demo application showing how GUIs can be created based on Athens. The game should probably be packaged separately (some Smalltalk source code files and images), the GUI example can be shipped with Athens.

Updated: 1.5.2013