Clazzes.org Sketch Home

Clazzes.org Sketch is a framework which provides 2D Vector Graphics for web applications. The project provides PDF-compatible shapes with double-precision coordinates and a HTML5 user frontend which works in all modern browsers, using Google Web Toolkit (GWT). It includes a Scientific Shapes component for rendering charts and tables of large data-sets.

All aspects of the project are highly modular and OSGi compliant, making it possible to only include only selected shapes and/or capabilities.

Architecture

Due to the great modularity, clazzes.org Sketch relies on Maven for the build process. It is not advisable to attempt to build it without.

The framework consists of 3 major components:

  • Server-side data-object abstraction with de-/serialization capabilities to JSON and XML
  • PDF rendering components
  • A browser-based GUI frontend using GWT, which provides full drawing capabilites.

Each of these provides one Maven parent project (ending in -main) and four basic modules:

  • serializable-entities provides basic entities needed for depicting the graphics, like drawing, layer, stroke-, fill- and colour-palettes, etc.
  • richtext provides an abstraction of basic formatted text
  • shapes provides basic geometric shapes like rectangles, ellipses, lines etc.
  • scientific-shapes provides charts and tables for representing data from external providers

shapes and scientific-shapes depend on serializable-entities, but are independent of each other.

Server-side Modules

Server-side modules provide a data-model, and serializers for JSON (to communicate with the web front-end) and XML (for storage). The XML format is defined by modular schema files, which are also provided at the following URLs:

http://www.clazzes.org/sketch/entities/1v0/entities.xsd
http://www.clazzes.org/sketch/richtext/1v0/richtext.xsd
http://www.clazzes.org/sketch/shapes/1v0/shapes.xsd
http://www.clazzes.org/sketch/scientific/1v0/scientificshapes.xsd

The format of the JSON serialization strings largely follows the schema definitions.

PDF-generation modules are by definition also server-side, as they rely on the data model. They produce standards-compliant PDF files using apache PDFbox.

Client Modules

The client modules provide a slightly adapted data model with JavaScript objects, using GWTs possiblities to include native JavaScript. Client-side modules provide two distinct packages per server-sided module: one containing pure data-model and de-/serialization components, and another for user-interface widgets/interactive components (ending on -canvas).

The user interface utilizes a html5 canvas to depict the scenery, while retaining information about the position of each object for interaction.

Source code and issue tracker

At the moment, available documentation is still rather sparse, but the classes are well documented. If you want to give it a try, you can check out the components at the following SVN repositories:

The JIRA projects are: