Kyoto - day 6 & mmm....Osaka

See also Kyoto - day 5.

 Old and New - View from our Hotel, Hotel Unizo

Old and New - View from our Hotel, Hotel Unizo

 Daitoku-ji Temple

Daitoku-ji Temple

 Linda at Temple Path

Linda at Temple Path

 Inside the Temple

Inside the Temple

 Path to the Temple

Path to the Temple

 Temple Gardener :)

Temple Gardener :)

 Shinkansen to Osaka

Shinkansen to Osaka

 Ville and hUUge ferrisch wheel in Osaka

Ville and hUUge ferrisch wheel in Osaka

 Three Whales at Osaka Aquarium :)

Three Whales at Osaka Aquarium :)

 Jellyfish

Jellyfish

 (Two*) Whale Shark at the Worlds Largest Fish Tank

(Two*) Whale Shark at the Worlds Largest Fish Tank

 Crabby Hair Day ...

Crabby Hair Day ...

 R U jealous?

R U jealous?

 Osaka by Night

Osaka by Night

 Shinsaibashi in Osaka

Shinsaibashi in Osaka

JSXaal Goes Open Source

Update (March 2012): The JSXaal project is not actively worked on anymore. See JSAV for a JavaScript algorithm visualization framework.

JSXaal viewer, the JavaScript viewer for XAAL animations is now an open source project at Google Code. You can find the project here.

Getting Started

First of all, make sure to check the brief introduction to XAAL. Then follow the three simple steps below.

Step 1: Check out the source

To checkout the source code, you will need Subversion installed. Then you can checkout the code by typing: svn checkout http://jsxaal.googlecode.com/svn/trunk/ jsxaal-read-only

Step 2: Play with the Example

The directory that you just checked out includes an example in doc/example.html (imaginative naming, don't you think?). You can also view the example online. What you should see when opening that file is something like the image below. The controls for the animation should be quite self-evident: forward moves you forward and backward one step backward.

 JSXaal Viewer Example

JSXaal Viewer Example

Step 3: Modify the XAAL document

The example loads the XAAL file doc/example.xml. Try modifying it by, for example, changing the positions or colors of the objects. You can also add new objects or animation effects according to the XAAL specification. Note, that the viewer does not support the whole specification yet.

XAAL has a new home at xaal.org

Main page of xaal.org
Main page of xaal.org

As I aim to publish XAAL and the related tools for the whole AV community to benefit from, XAAL has moved to xaal.org. The site has all the important information about XAAL:

  • Publications - There are already several publications available about XAAL. These are all listed on xaal.org.
  • Documentation - Documentation is something I'm working on improving. At the moment, the site includes some examples on how to use XAAL.
  • Schemas - The XML Schemas for XAAL are available from the site. The documentation for these is also work in progress.

Now that you all non-existing readers of this blog :) know what is available from the site, it's a good time to explain why you should (or shouldn't) visit the site.

What is XAAL?

In short, XAAL (eXtensible Algorithm Animation Language) is an algorithm animation language designed to be used in multiple algorithm animation (AA) systems. The goal is to unify the AA world by allowing interchange of animations between the existing systems. The language has primitives for working with graphics such as rectangles and circles, as well as data structures like arrays and graphs.

XAAL Example

The following is an example of using graphical primitives in XAAL.

<polyline id="poly">
  <coordinate x="210" y="210"/>
  <coordinate x="220" y="220"/>
  <coordinate x="210" y="230"/>
  <coordinate x="230" y="230"/>
  <coordinate x="230" y="210"/>
  <closed value="false"/>
  <style>
    <color name="lime"/>
    <fill-color name="black"/>
    <stroke width="4"/>
  </style>  
</polyline>
graphical-example-150x150.jpg

In addition to the polyline, the building blocks available include

  • point, polyline, line, polygon;
  • arc, ellipse, circle and circle-segment;
  • square, triangle, rectangle;
  • text.

Data structures available include array, graph, list, tree, and binary tree. Below is an example of a graph.

<graph>
  <node id="n1"><key value="D"/></node>
  <node id="n2"><key value="E"/></node>
  <node id="n3"><key value="M"/></node>
  <node id="n4"><key value="O"/></node>
  <edge from="n1" to="n2" directed="true"/>
  <edge from="n2" to="n3" directed="true"/>
  <edge from="n3" to="n4" directed="true"/>
  <edge from="n4" to="n1" directed="true"/>
</graph>
XAAL graph example

Tools for working with XAAL

There are also tools for creating and working with XAAL animations. These include a Java parser, classes for creating animations, and adapters for converting XAAL animations for some of the existing algorithm animation systems. These are not, however, published yet but they will be. So, stay tuned for more updates on that!

Currently, the animations can be used in JHAVÉ or using the JavaScript viewer.

My article "Seamless Merging of Hypertext and Algorithm Animation" in TOCE

My article "Seamless Merging of Hypertext and Algorithm Animation" was finally published in ACM Transactions on Computing Education (TOCE) in volume 9, issue 2 (in ACM digital library). The abstract of the article:

Online learning material that students use by themselves is one of the typical usages of algorithm animation (AA). Thus, the integration of algorithm animations into hypertext is seen as an important topic today to promote the usage of algorithm animation in teaching. This article presents an algorithm animation viewer implemented purely using HTML and JavaScript. The viewer is capable of viewing animations in Xaal (eXtensible Algorithm Animation Language), a language designed to allow easy transformation of AAs between various formats. This solution is extremely suited for use in hypertext learning material due to the advanced interaction possibilities between learning material (HTML) and the animation.

I'll try to post some demos of the viewer soon. Below is a picture explaining the main parts of the viewer.

JSXaal viewer
JSXaal viewer