SVuGy - Exploring the Space between Procedural and Declarative Graphics

SVG Open 2007, Tokyo

Martin J. DÜRST, Makoto FUJIMORI, Takeshi MAEMURA, Tohru KOGA, Kazunari ITO

Aoyama Gakuin University

© 2007 Martin J. Dürst et al., Aoyama Gakuin University

Why SVuGy?

A rectangle in SVG:

<rect x='100' y='200' width='50' height='30'/>

Wouldn't you sometimes want to write this like:

rect 100, 200, 50, 30

With SVuGy, you can!

SVuGy Name

SVG + Ruby = SVuGy

Pronounced SVeeGee

Overview

• Motivation and Goals
• Ruby
• SVG in Ruby
• More than just SVG

• No fancy graphics (yet)
• not much SVG

SVuGy Goals

Practical: Create simple diagrams for lectures

Side-effect: Ruby programming and DSL experience

Long-term: Study procedural → declarative transition

Declarative ↔ Procedural

Declarative: Straightforward and safe, fast, easy for beginners

Procedural: Powerful and flexible, difficult to use

→ Sometimes, you want both!

→ Web standards move frequent procedural idioms to descriptive syntax (CSS, SVG, XForms,...)

DSL

Domain Specific Language

External DSL: Standalone, special-purpose parser,...

Internal DSL: Part of programming language syntax, programming language features available

The Joy of Ruby

Why Ruby?

→ Ruby is short

→ Ruby is easy

→ Ruby is powerful

Ruby is fun!

Ruby History

Programming/Scripting language, developed by Yukihiro MATSUMOTO ("Matz") starting in 1993

"Better" Perl, fully object-oriented, includes elements of Smalltalk, Lisp,...

ca. 2000: 'discovered' by Dave Thomas (Pragmatic Programmers)

ca. 2004: David Heinemeier Hansson publishes Ruby on Rails high-productivity Web application framework

Productive version is 1.8(.6), 1.9 in the works with faster engine and maybe better internationalization

Ruby Basics

Fully object-oriented: "abc".length

Open classes: Add your own favorite methods to base classes

Flexible Typing (duck typing)

Blocks:
5.times { print "Hello World!" }
File.open(fn) do |file| ... end

Meta-programming: programmatic creation of methods, reflection,...

Ruby Syntax

• Start with C/C++/Java/...
• Drop semicolons at end of line (optional)
• Drop parentheses around function arguments (optional, sometimes impossible)
• Use end to end any construct that starts with a word (if, while,...)

SVuGy Basic Shapes

rect 100, 200, 30, 50
circle 300, 300, 50
ellipse 400, 500, 20, 60
polygon 100, 100, 20, 100, 20, 20, 100, 20
text 'Hello SVuGy!', 50, 40

And so on...

Don't forget commas!

SVuGy Grouping

Using blocks:

g {
  # group contents
}

Both SVG elements and SVG attributes can go into block

Ruby Block Syntax Restrictions

method(arg) do
  block
end

method arg do
  block
end

Behind the Scenes

• Block gets executed in context of grouping object (e.g. Group, Anchor,...)
• rect and friends are methods of the grouping object
• They create the corresponding objects (factory method, e.g. rect → Rect.new)
• They add themselves to the parent object
• Factory method automatically added for each shape subclass
• Some additional behind-the-scenes trickery

SVuGy Styling

Syntax variants:

1. Style hash: rect(0, 0, 200, 200).style(:fill => :red)
2. Style block: rect(0, 0, 200, 200) { style { fill :red } }
3. Property method: rect(0, 0, 200, 200).fill(:red)
4. Property constructor: rect(0, 0, 200, 200) { fill :red }

Syntax for transforms uses variants 3 and 4

Property/Value Syntax

Parameter Handling

• Accepting different parameters for the same purpose
  rect 20, 50, 50, 100 → rect p1, 50, 100
• Use class to distinguish role
  rect p1, 50, 100
rect :r2, p1, 50, 100
• Various ways of defaulting

Beyond SVG: More Objects

• Arrows
• Labeled circles
• Rotated text
• Speach bubbles
• ...

Composite objects introduced on a by-need base

An Example: Rotated Text

• Found myself writing a lots of:
  text('sample text', 150, 250).rotate -90, 150, 250
• Position adjustment easier with:
  text('sample text', p1=pt(150, 250)).rotate -90, p1
• Abstracted this to:
rotated_text 'sample text', 150, 250, -90
  (one class, one method, three lines of actual code)

Using Programming Language Features

• Variables
  Automatic simulation based on id
• Calculations
  Scalars, points incl. reference coordinate system
• Specific points
  e.g. r1.tr (top-right corner of r1 rectangle)

Referee Comments

• Performance:
  • We don't care yet
  • If necessary, we can move stuff to C extensions
• Comparison with JavaFX Script
  • Object construction syntax (mostly for GUI components) in JavaFX Script is built-in
  • SVuGy syntax is limited by Ruby syntax, but otherwise extensible

SVuGy Availability

• Currently (as of this morning): .zip/.tar.gz file at http://rubyforge.org/projects/svugy/
• Please try it out
• Please contribute with:
  • Bug reports
  • Feature requests
  • Examples
  • Patches

Further Work

• Layouts/arrangements
• More flexible parameters (almost there, as described in the paper)
• More API-like use (use by program rather than by humans)
• Gradients, Clipping, Masks, Filters
• Animation
• Scripting
• Constraints
• Output details (SVG version, browser compatibility settings, indentation,...)