Building an SVG Interface to MediaWiki
Front Page
Peter Edwards
e-2.org limited
Nat Goodden
The University of Gloucester
culturalcartography.net - Who Knew Whom
culturalcartography.net
Creating a web-based map of interpersonal relations in the sphere of culture
Culture
- a constantly evolving collective endeavour
Individuals
- who have made significant contributions to its evolution
Cultural Cartography
- mapping the relationships between individuals who are active in the cultural domain
Using SVG for text-based animation
SVG
Using SVG for text-based animation
Proven in
The Story of Art
(SVG Open 2005)
Familiarity with the DOM, declarative and Script based animation
Vendor-neutral open standard
Using MediaWiki as the data container
MediaWiki
Using MediaWiki as the data container
Familiarity with the editing interface (NG)
Identification of all linked pages.
The need to utilise UTF-8.
Version control and and multiple authorship.
Design
Design
Fonts
Use of the OpenType script face
Handsome Pro
(designed by Nick Shinn) for the main interface
System fonts (sans-serif) used for all other parts
Support for the
font
tag in current SVG viewers
Need to devise an alternative method for embedding the font information
Font embedding using paths
Font embedding using paths
First extract the glyph information from the TrueType font using
ttf2svg
(part of Batik)
Glyph and kerning information extracted from the SVG font using a PHP script
All glyphs stored as
<path>
elements
Kerning information stored as a JSON object
Font embedding using paths - example
Font embedding using paths - example
Font embedding using AJAX
Font embedding using AJAX
Each path definition stored as a separate file, named after the decimal character code for the character
When a letter is needed which is not already defined in the SVG, AJAX can retrieve it
Enables the incremental addition of characters to support different glyphs
Font embedding using AJAX - example
Font embedding using AJAX - example
Interfacing with MediaWiki
Interfacing with MediaWiki
Need to obtain information about linked names + short biography (including links to external sites) via AJAX
Early attempts utilised a custom PHP API to retrieve sets of linked names (no biographical information)
Development of the MediaWiki API over time resulted in it's adoption (version 1.11)
Rendering names in the interface
Rendering names in the interface
3-layer model
Using JavaScript-based animation techniques
Using sine-based animation to simulate travelling through space
Subsequent adoption of a 2-layer model
Rendering names in the interface - example
Rendering names in the interface - example
Status of the project
Status of the project
Working prototype available at
culturalcartography.net
(SVG interface linked from individual wiki entries)
Future of the project
Font embedding is the main drawback to using SVG
Move the interface to a Flash-based model with the advent of ActionScript 3.0 and the Flash 9 player.
Most of the scripting for the interface can be adapted to be used in ActionScript