Conference Speakers
Keynotes
SVG Wow 2009
A collection of open web demos
Erik Dahlström (Opera Software ASA)
Erik Dahlström is the SVG team leader at Opera Software ASA, where he's been working as a software developer since 2001. He holds an MSc degree in Computer Science and Engineering from the Institute of Technology at Linköping University (LiTH), Sweden. Since 2005 Mr Dahlström has been the primary representative of Opera Software on the W3C SVG Working Group. He is currently the co-chair of the group.
Show Abstract
This session will show some of the many ways current and future web technologies can be used together to create dynamic and graphically rich content. The main focus will be demos, and topics will include combinations of CSS, HTML and SVG, filters, video and audio, and other surprises.
Hide Abstract
SVG in Internet Explorer and at Google
Brad Neuberg (Google Inc., Developer Advocate)
Brad Neuberg is a developer advocate at Google for the Open Web. He is the creator of a number of JavaScript libraries and frameworks for expanding the capabilities of web applications, including Dojo Storage, Dojo Offline, and Really Simple History. Brad worked with Douglas Engelbart on the HyperScope project; explored deeply collaborative web browsers with Paper Airplane; worked on one of the first web-based RSS aggregators; and was a Developer Advocate for the Gears project. He is currently focused on increasing the capability of web browsers to render vector graphics, such as SVG, through drop-in JavaScript shims. Brad also created Coworking, an international grassroots movement to establish a new kind of workspace for the self-employed.
Show Abstract
SVG is coming of age. One of the biggest impediments to SVG though has been lack of support in Internet Explorer. At this keynote you will learn about SVG Web, a new open source JavaScript project that allows Internet Explorer to render both static and dynamic SVG with a simple drop-in library! See demos of SVG Web and hear from the creators of the project. In addition, find out how Google and others are using SVG, including in Google Maps, Google Docs, and more. You will walk away from this keynote excited and ready to immediately use SVG across all major browsers (Internet Explorer, Firefox, Safari, the iPhone, and more).
Hide Abstract
Beyond XHTML
Sam Ruby (IBM, STSM)
http://en.wikipedia.org/wiki/Sam_Ruby
Show Abstract
One of the factors limiting SVG adoption is the association with XML. XML has been helpful in a number of ways: from providing a concrete syntax that enables both a focus on higher level constructs and simplifies tooling. It also has been an inhibitor in places where tight integration with less well formed content is a necessity.
This talk is about small lessons that you can learn from the web to increase adoption of SVG, and big lessons of the web that you will have to deal that will be direct consequences of the "unwashed masses" copy/pasting SVG fragments onto MySpace pages or equivalent and expecting it to all "just work".
Demos will include producing and editing SVG in a text editor such as vi.
Hide Abstract
All Presentations
including regular presentations, keynotes and panel discussions
- Atkinson, Darren (Santa Clara University, Associate Professor)
- Digital Library Visualization Using SproutCore and SVG:
Show AbstractDigital Library Visualization Using SproutCore and SVG
Papertopic: GUI Frameworks for Web Applications
Author(s): Bergström, Peter (Santa Clara University) and Darren Atkinson (Santa Clara University)
Web-based digital libraries have sped up the process scholars use to find new, important research papers. With powerful searching capabilities and rich bibliographic meta data, a digital library is a great resource. Unfortunately, current digital libraries are limited by their inadequate webpage-based paradigm and it is easy for even the most experienced scholar to get lost in the vast quantity of published material available. A paper and its immediate references are shown on a webpage, but it is not obvious where that paper belongs in the larger context of a field of research.
The main goal of our research was two-fold. First, to develop and test the effectiveness of an application that allows a scholar to interact with a digital library and explore bibliographic meta data using a defined set of visualizations. These visualizations needed to provide different levels of visibility into a paper's citation network without losing focus of the currently viewed paper. The application, called PaperCube, needed to support navigation between papers and, to a limited extent, the authors of those papers.
By replacing the traditional webpage-based paradigm with a suite of visualizations that expose various dimensions of bibliographic meta data, the hope was that a researcher could gain new insights and find relationships that were not previously apparent. Furthermore, by making the experience spatial, researchers may be able to find what they are looking for quickly and intuitively.
The second goal was to push the limits of modern web browsers. By using web standards-based technologies, the goal was to explore the possibility of creating a dynamic, desktop-like experience that incorporates rich, interactive visualizations.
PaperCube was written using the SproutCore JavaScript framework, which is geared towards the creation of highly interactive, “cloud,” or thick client applications in the web browser. Using only JavaScript and standards-based rendering technologies such as Scalable Vector Graphics, PaperCube allows users to browse a version of the CiteSeer digital library and view paper and author relationships using a set of dynamic visualizations.
Leveraging the powerful features in SproutCore including bindings and observers, PaperCube aims to deliver unparalleled interactivity within the confines of a web browser. Bindings and observers enabled PaperCube to easily implement resolution independence in its visualizations. Resolution independence was key because citation networks can be very large. By adjusting a slider control in the UI, a visualization can be zoomed in using SVG-based transforms without needing to explicitly redraw. Furthermore, through the use of bindings, slider controls can dynamically alter the display parameters of the visualizations, permitting the depth of a paper citation network to be adjusted or the thresholds that determine if a node should be displayed as part of the graph changed.
Using SproutCore’s rich data model, content data objects are incrementally and asynchronously retrieved from the server ensuring that only needed data impacts performance. This loading scheme permits complex visualizations to be progressively rendered using SVG to display hundreds, if not thousands, of nodes and give feedback to the user while loading additional data.
Stemming from the need for a flexible graph API for various views in PaperCube, the NodeGraph class was created as a generalized solution that can display any type of relational data as an undirected graph rendered using Scalable Vector Graphics. The class is not PaperCube-specific and could be easily integrated into other applications.
The NodeGraph class is able to display a mixed set of content objects and has many customizable methods and properties to keep the base implementation as generalized as possible. In PaperCube, the views that use this API extend and customize these methods and properties. These methods allow the developer to abstract away the details of different content data types and provide a consistent API. When a graph rendered using this class is altered based on any threshold value including depth, the graph is designed to smoothly transition using animations. All of the properties that determine the currently visible data can be adjusted dynamically through UI control elements through bindings. Since SVG is DOM-based, aggressive caching of DOM nodes is used to optimize performance and only apply transitions to altered parts of a visualization and leave the rest untouched.
PaperCube was validated through a user study which showed that it was very useful when it comes to augmenting digital library search by reducing the “cognitive load” on a researcher and aiding the “discoverability” of new research material. Furthermore, it was shown that participants thought that it was “visually exciting and intuitive” application and an “amazing example of the apps that we’ll be seeing on the web in a couple of years.”
Links:
Hide Abstract
- Digital Library Visualization Using SproutCore and SVG:
- Beard, Jacob (McGill University Modelling, Simulation and Design Lab)
- Modelling the Reactive Behaviour of SVG-based Scoped User Interfaces with Hierarchically-linked Statecharts:
Show Abstract, Paper (Separate Tab), Presentation (Separate Tab)Modelling the Reactive Behaviour of SVG-based Scoped User Interfaces with Hierarchically-linked Statecharts
Papertopic: Interactivity and Scripting
Author(s): Beard, Jacob (McGill University Modelling, Simulation and Design Lab) and Hans Vangheluwe (McGill University)
There are many challenges that developers face during the development of a complex User Interface (UI). Desired behaviour may be autonomous or reactive, and possibly real-time. Each UI component may be required to exhibit a radically different behaviour from that of any other component and the behaviour of components may be inter-related. These complex behavioural relationships between components are often difficult to express, and are even more difficult to encode and maintain.
There are also difficulties related to the development process: the developer must be able to rapidly adapt the structure and behaviour of the UI to changing system requirements. Unfortunately, conventional code-centric approaches fall short. We suggest that a developer should specify the behaviour of a UI using a representation which minimizes "accidental complexity".
Our solution uses Model-Driven Engineering (MDE). By modelling every aspect of the system-to-be-built, at the most appropriate level of abstraction, using the most appropriate formalism(s), it becomes possible to completely capture the behaviour of a UI, to rapidly generate prototype implementations, to easily adapt the UI as project requirements change, and, finally, to synthesize a UI and maintain it.
More specifically, in this paper, we introduce a class of UIs known as Scoped User Interfaces, and illustrate how one may model them using Hierarchically-linked Statecharts (HlS). A Scoped User Interface is one in which reactive visual components (widgets) such as buttons and windows are hierarchically nested. Statecharts is a modelling formalism initially proposed by David Harel as an extension of Finite State Machines. It was intended as a solution for modelling complex, state-based behaviour, and is now included as a part of the OMG Unified Modeling Language (OMG UML) Superstructure specification. HlS applies an actor-based approach to modelling the behaviour of UIs, explicitly modelling each hierarchically-scoped UI component. A default event model that implements hierarchical event capturing and bubbling is used to bind the system together, and allows widgets at the highest level of the hierarchy to exhibit a general behaviour, while widgets deeper in the hierarchy exhibit more specific behaviour.
We have used the techniques described in this paper to develop AToM3-Redux, an experimental, SVG-based visual modelling environment. SVG has provided a complete platform for the development of this application. In our approach, we use the SCCJS compiler to translate our Statechart models to ECMAScript. Because SVG supports scripting interactivity, it has been possible to bind each Statechart instance to a newly-created, SVG-based widget, with minimal "glue" code. The SVG DOM is inherently hierarchical, and was hence used to encode hierarchical relationships between UI components. The SVG event model then, has enabled the hierarchical event handling for arbitrarily complex, dynamically created widgets. Finally, the SVG event model also provides an event "vocabulary" that we have used as triggers in our Statechart models.
The paper will give a step-by-step description of our approach by means of a concrete example, as we illustrate the work we have done to develop, using HlS, an SVG-based environment for visually editing and simulating Statechart models.
Links:
Hide Abstract
- Modelling the Reactive Behaviour of SVG-based Scoped User Interfaces with Hierarchically-linked Statecharts:
- Becker, Timothée (ITC)
- TimeMapper, Visualizing Moving Object Data using WMS Time and SVG SMIL Animations:
Show AbstractTimeMapper, Visualizing Moving Object Data using WMS Time and SVG SMIL Animations
Papertopic: SVG for Webmapping and Online GIS/GML
Author(s): Köbben, Barend (ITC), Blok, Connie (ITC) and Timothée Becker (ITC)
The constant increase in number and size of spatially and temporally referenced datasets challenges researchers to develop effective means for visually exploring and presenting the dynamics of the underlying phenomena. Within the fields of Geovisualization and Exploratory Data Analysis, interactive animated mapping has been pointed out as the only generic technique available to explore large spatio-temporal (ST) datasets. They enable the user to get a complete view of the dynamic process under study and often help to reveal (subtle) spatio-temporal patterns. To become more broadly used, interactive vector animated maps must become less time-consuming to make and easier to disseminate. Internet technologies offer two big advantages: the possibility for interoperable distributed services and the ease of disseminating animations to specialists and wider audiences world-wide.
With the global aim of improving vector animated mapping possibilities, the main objective of this research was to look into the possibility of combining two technologies: distributed geo services and animated, interactive vector maps.
As a framework for distributed services, we adopt OGC's Web Map Service (WMS) and as a graphical means to render interactive animated maps for the internet, we choose Scalable Vector Graphics (SVG) and its SMIL animations.
In geographic studies, three types of change are commonly identified: change of spatial characteristics (e.g. change of position), existential change (e.g. appearance and disappearance) and change of attribute (e.g. change in land-use). To depict such changes, which occur on objects symbolized by the three vector data types (point, line, polygon), various forms of animation need to be used. In addition, authors specialized on the cognitive aspects of animation point to the fact that the use of animation can be made more effective if it is assisted by temporal legends and various types of interactivity. The main features that we intended to implement were: three types of temporal legends, play/pause buttons, a time-slider, a speed control, a looping function and a way for the user to select the temporal extent he wants to visualize.
The questions addressed in this research are the following: Are OGC WMS and SVG animation compatible in terms of the format in which time stamps are stored/used? In other words, how must temporal data stored according to OGC recommendations be converted for it to be used inside SMIL animations? More practically, for a given case-study, can SMIL animations alone be used, or is it necessary to add scripting? Finally, what mechanisms can be used to implement the desired interactive functionalities?
The result of this research is a WMS prototype called TimeMapper, which is an extension of Köbben’s (2007) RIMapper project. To respond to the user’s request, TimeMapper retrieves ST data from a database backend, serializes SVG animated maps and accompanies these with an advanced user-interface. This interface allows the user to interact with both the spatial and the temporal dimensions of the data.
The potential and limitations of the system are shown in a test-case for Antarctic iceberg exploration. The setup enables scientists and shipping companies to explore iceberg movement as well as the influence of seasons on calvings from the ice-shelf. Responsiveness limitations have been identified as well as solutions to tackle them. Two facts give the project a broader potential: Firstly, the principles followed as well as the technologies chosen could be used to render interactive animations to depict a wide range of real-world phenomena. Secondly, the interactive animations can be viewed using a mere Web browser and can thus be widely disseminated.
Links:
Hide Abstract
- TimeMapper, Visualizing Moving Object Data using WMS Time and SVG SMIL Animations:
- Bergström, Peter (Santa Clara University)
Show Biography
Hypertext researcher and the developer of PaperCube (http://papercube.peterbergstrom.com), a web-based digital library visualization tool that uses SVG for many of its complex visualizations.
- Digital Library Visualization Using SproutCore and SVG:
Show Abstract, Paper (Separate Tab)Digital Library Visualization Using SproutCore and SVG
Papertopic: GUI Frameworks for Web Applications
Author(s): Bergström, Peter (Santa Clara University) and Darren Atkinson (Santa Clara University)
Web-based digital libraries have sped up the process scholars use to find new, important research papers. With powerful searching capabilities and rich bibliographic meta data, a digital library is a great resource. Unfortunately, current digital libraries are limited by their inadequate webpage-based paradigm and it is easy for even the most experienced scholar to get lost in the vast quantity of published material available. A paper and its immediate references are shown on a webpage, but it is not obvious where that paper belongs in the larger context of a field of research.
The main goal of our research was two-fold. First, to develop and test the effectiveness of an application that allows a scholar to interact with a digital library and explore bibliographic meta data using a defined set of visualizations. These visualizations needed to provide different levels of visibility into a paper's citation network without losing focus of the currently viewed paper. The application, called PaperCube, needed to support navigation between papers and, to a limited extent, the authors of those papers.
By replacing the traditional webpage-based paradigm with a suite of visualizations that expose various dimensions of bibliographic meta data, the hope was that a researcher could gain new insights and find relationships that were not previously apparent. Furthermore, by making the experience spatial, researchers may be able to find what they are looking for quickly and intuitively.
The second goal was to push the limits of modern web browsers. By using web standards-based technologies, the goal was to explore the possibility of creating a dynamic, desktop-like experience that incorporates rich, interactive visualizations.
PaperCube was written using the SproutCore JavaScript framework, which is geared towards the creation of highly interactive, “cloud,” or thick client applications in the web browser. Using only JavaScript and standards-based rendering technologies such as Scalable Vector Graphics, PaperCube allows users to browse a version of the CiteSeer digital library and view paper and author relationships using a set of dynamic visualizations.
Leveraging the powerful features in SproutCore including bindings and observers, PaperCube aims to deliver unparalleled interactivity within the confines of a web browser. Bindings and observers enabled PaperCube to easily implement resolution independence in its visualizations. Resolution independence was key because citation networks can be very large. By adjusting a slider control in the UI, a visualization can be zoomed in using SVG-based transforms without needing to explicitly redraw. Furthermore, through the use of bindings, slider controls can dynamically alter the display parameters of the visualizations, permitting the depth of a paper citation network to be adjusted or the thresholds that determine if a node should be displayed as part of the graph changed.
Using SproutCore’s rich data model, content data objects are incrementally and asynchronously retrieved from the server ensuring that only needed data impacts performance. This loading scheme permits complex visualizations to be progressively rendered using SVG to display hundreds, if not thousands, of nodes and give feedback to the user while loading additional data.
Stemming from the need for a flexible graph API for various views in PaperCube, the NodeGraph class was created as a generalized solution that can display any type of relational data as an undirected graph rendered using Scalable Vector Graphics. The class is not PaperCube-specific and could be easily integrated into other applications.
The NodeGraph class is able to display a mixed set of content objects and has many customizable methods and properties to keep the base implementation as generalized as possible. In PaperCube, the views that use this API extend and customize these methods and properties. These methods allow the developer to abstract away the details of different content data types and provide a consistent API. When a graph rendered using this class is altered based on any threshold value including depth, the graph is designed to smoothly transition using animations. All of the properties that determine the currently visible data can be adjusted dynamically through UI control elements through bindings. Since SVG is DOM-based, aggressive caching of DOM nodes is used to optimize performance and only apply transitions to altered parts of a visualization and leave the rest untouched.
PaperCube was validated through a user study which showed that it was very useful when it comes to augmenting digital library search by reducing the “cognitive load” on a researcher and aiding the “discoverability” of new research material. Furthermore, it was shown that participants thought that it was “visually exciting and intuitive” application and an “amazing example of the apps that we’ll be seeing on the web in a couple of years.”
Links:
Hide Abstract
- Digital Library Visualization Using SproutCore and SVG:
- Blatnik, Stanko (IPAK Institute, Researcher)
Show Biography
Following a degree in Physics with a concentration on theoretical particle physics Stanko spent 16 years at university at Tuzla teaching Physics, Automation, Computer Science, and Metodology of Scientific Work. During this period Stanko wrote several articles in field of Theoretical physics use of Computers in chemical industry and education. From 1977 to 1985 Stanko was dean of Chemical Engineering Department and pro-vice-chancellor of the University trying to improve educational process using computers. In 1985 Stanko joined Gorenje Procesna oprema at Velenje. In his capacity as Member of board responsible for Research and Development relations Stanko was responsible for development of new products and coordination of collaboration with universities and Research Institutes in Slovenia and abroad. In 1992 Stanko joined Inova Ir as head of R&D department. He became involved in several research projects covering the use of fuzzy logic and artificial intelligence in process control. From 2000 Stanko established IPAK, Institute for Symbolic Analysis and Development of Information Technologies. In his capacity as director of institute Stanko managed several projects in elearning, lectured at Sarajevo and on West Valley College in Saratoga, Silicon Valley. Together with Kelly Carey from West Valley Stanko wrote two books published by Prentice hall and Apress in US, later translated in Italian and Chinese. Stanko likes to work with young people from kindergarten to university helping them to use their creative potentials. In last years he coordinated several EU projects in the field of eLearning.
- Cognitive Graphics and SVG:
Show AbstractCognitive Graphics and SVG
Papertopic: Accessibility of SVG
Author(s): Blatnik, Stanko (IPAK Institute)
Cognitive Graphics and SVG
Alexander Bashlykov Tasmo Moscow
Sonja Bercko Integra Association for Human Resource Development, Šoštanj
Stanko Blatnik, Mladen Blatnik and Vojko Strahovnik IPAK Institute for Symbolic Analysis and Development of Information Technologies, Velenje
Cognitive graphics is successfully used for visual representation of the existence, structure and qualitative and quantitative characteristics of the complex system. Usually it is used for support of human operator in the decision making process in extraordinary situations in complex industrial process. If classical approach for graphical presentation of process data is used there are to many parameters so it is very difficult to understand where is cause of problem. Cognitive images which present the state of system using different forms (faces, different geometrical shapes) can significantly simplify the presentation of status of system and decision making process.
The cognitive graphics approach can be used in several different area like medical diagnostics, monitoring of complex project progress, monitoring of learning process with the aim to improve their realization.
Because more and more of described process is using web application (Internet or Intranet) the use of Scalable Vector Graphics for generation of cognitive images can present significant improvement in the application of cognitive graphics because of following facts:
· the quality of images will be better
· images can be easily generated
· There are more application using mobile devices where the use of SVG present significant advantage.
· Accessibility of SVG
In proposed article we will present the use of Scalable Vector Graphics in the monitoring of learning process progress.
Today a lot of education is realized on web as e-learning or as blended learning. The monitoring of student progress using classical approach in which results achieved in all forms of evaluation could be significantly improved if the process will be presented in one cognitive image, which is generated using artificial intelligence.
The Scalable Vector Graphics is used for generation of cognitive images for presentation the level of knowledge and skills of students acquired in educational process. With such approach much better insight in success of concrete educational form and better results could be achieved.
Hide Abstract
- Cognitive Graphics and SVG:
- Blok, Connie (ITC, Assistent Professor)
- TimeMapper, Visualizing Moving Object Data using WMS Time and SVG SMIL Animations:
Show AbstractTimeMapper, Visualizing Moving Object Data using WMS Time and SVG SMIL Animations
Papertopic: SVG for Webmapping and Online GIS/GML
Author(s): Köbben, Barend (ITC), Blok, Connie (ITC) and Timothée Becker (ITC)
The constant increase in number and size of spatially and temporally referenced datasets challenges researchers to develop effective means for visually exploring and presenting the dynamics of the underlying phenomena. Within the fields of Geovisualization and Exploratory Data Analysis, interactive animated mapping has been pointed out as the only generic technique available to explore large spatio-temporal (ST) datasets. They enable the user to get a complete view of the dynamic process under study and often help to reveal (subtle) spatio-temporal patterns. To become more broadly used, interactive vector animated maps must become less time-consuming to make and easier to disseminate. Internet technologies offer two big advantages: the possibility for interoperable distributed services and the ease of disseminating animations to specialists and wider audiences world-wide.
With the global aim of improving vector animated mapping possibilities, the main objective of this research was to look into the possibility of combining two technologies: distributed geo services and animated, interactive vector maps.
As a framework for distributed services, we adopt OGC's Web Map Service (WMS) and as a graphical means to render interactive animated maps for the internet, we choose Scalable Vector Graphics (SVG) and its SMIL animations.
In geographic studies, three types of change are commonly identified: change of spatial characteristics (e.g. change of position), existential change (e.g. appearance and disappearance) and change of attribute (e.g. change in land-use). To depict such changes, which occur on objects symbolized by the three vector data types (point, line, polygon), various forms of animation need to be used. In addition, authors specialized on the cognitive aspects of animation point to the fact that the use of animation can be made more effective if it is assisted by temporal legends and various types of interactivity. The main features that we intended to implement were: three types of temporal legends, play/pause buttons, a time-slider, a speed control, a looping function and a way for the user to select the temporal extent he wants to visualize.
The questions addressed in this research are the following: Are OGC WMS and SVG animation compatible in terms of the format in which time stamps are stored/used? In other words, how must temporal data stored according to OGC recommendations be converted for it to be used inside SMIL animations? More practically, for a given case-study, can SMIL animations alone be used, or is it necessary to add scripting? Finally, what mechanisms can be used to implement the desired interactive functionalities?
The result of this research is a WMS prototype called TimeMapper, which is an extension of Köbben’s (2007) RIMapper project. To respond to the user’s request, TimeMapper retrieves ST data from a database backend, serializes SVG animated maps and accompanies these with an advanced user-interface. This interface allows the user to interact with both the spatial and the temporal dimensions of the data.
The potential and limitations of the system are shown in a test-case for Antarctic iceberg exploration. The setup enables scientists and shipping companies to explore iceberg movement as well as the influence of seasons on calvings from the ice-shelf. Responsiveness limitations have been identified as well as solutions to tackle them. Two facts give the project a broader potential: Firstly, the principles followed as well as the technologies chosen could be used to render interactive animations to depict a wide range of real-world phenomena. Secondly, the interactive animations can be viewed using a mere Web browser and can thus be widely disseminated.
Links:
Hide Abstract
- TimeMapper, Visualizing Moving Object Data using WMS Time and SVG SMIL Animations:
- Botev, Nikolay (San Jose State University, Graduate Student)
Show Biography
Following a bachelor's degree in Computer Science from San Jose State University in Spring 2009 Nikolay is currently pursuing a Master's degree in the same field while working as a software engineer at Fujitsu Network Communications in Sunnyvale, CA. Nikolay is also a proud participant in Google Summer of Code 2008.
- Interactive Documentation using JavaScript and SVG:
Show Abstract, Paper (Separate Tab)Interactive Documentation using JavaScript and SVG
Generating navigable, interactive graphs of Context Free Grammar productions using JavaScript and SVG to serve as an aid to navigating complex language specification documents online
Papertopic: SVG for Technical Documentation
Author(s): Botev, Nikolay (San Jose State University)
Background
Context free grammars are usually described in Backus Naur Form (BNF) and are a common part of computer programming language specifications. Visual representations of CFG productions are sometimes used in documentation to give a high-level overview of the different parts of a language that is easy to understand, yet comprehensive, in that it describes the full power of the language. There is a standard flow graph notation for visualizing grammar productions. This flow graph notation is very similar to a finite state machine graph with one start and one final state. Examples of the use of this type of visualization include the Oracle SQL language documentation [1] and the ANTLRworks IDE for the ANTLR compiler compiler language [2]. The World Wide Web consortium (W3C) uses a standard notation for the BNF grammar included in all of its language specifications documents.
Introduction
This paper describes an application for CFG visualization SVG. Grammar productions are parsed using ANTLR and an SVG graph is generated using Java and the Velocity template language. The grammar visualization tool is used to present an augmented view of W3C specifications. This augmented view displays a W3C specification side-by-side with a visual representation of each grammar production of the specification's language. This application works within a web browser and uses Javascript to bring SVG to life by adding interactivity and animations. The user can move between grammar productions by clicking on the production references that appear in the current flow graph, or by selecting an item from a full list of grammar productions. The W3C specification document is kept in sync with the currently displayed graph, so that the user can read the textual description and related documentation from the specficiation document while looking at the production graph.
Files:
Hide Abstract
- Interactive Documentation using JavaScript and SVG:
- Campbell, Marvin
- ERP solutions, techniques and opportunities with SVG:
Show AbstractERP solutions, techniques and opportunities with SVG
Extensible Application Programming (XAP) with SVG
Papertopic: Business Cases and Case Studies
Author(s): Campbell, Marvin
EXtensible Application Programming (XAP) philosophy was derived from the need to cut the cost of using Information Systems (IS) software solutions on third-party proprietary software platform. Currently, IS software vendors who write business solutions for Accounting, Manufactory, etc. must pass the cost of using proprietary third-party software along to the customer. In some cases, More than 35% of the cost of a customize software product’s sales goes to a third party vendor who license proprietary software.
The XAP project began in June 1999; the primary objective is to use the “Bestowfree” (Best of what’s Free) philosophy to create Information Systems / Information Technology business applications. In 2002, SVG was initially added to the list of languages used to implement and execute XAP techniques to solve business problem.
In 2009, it is now clear that the growth area in the XAP philosophy is SVG and X3D in the Enterprise Resource Planning (ERP) solution. ERP solutions (i.e. PeopleSoft, SAP, WorkDay, etc) are XML compatible which allows all forms of extensible application programming techniques to be used. Let’s face it; ERP systems contain all of the information systems data that runs corporations around the world. The opportunity to graphically represent data for ERP users via an extensible programming language like SVG is the future.
SVG is coming of Age; ERP users are clearly looking for better ways to represent data. SVG allows XAP programmers to create solutions that was not conceivable until now.
Hide Abstract
- ERP solutions, techniques and opportunities with SVG:
- Cassera, Andrea (Isituto Nazionale di Geofisica e Vulcanologia - Sezione di Milano)
- MIDOP: Macroseismic Intensity Data Online Publisher:
Show AbstractMIDOP: Macroseismic Intensity Data Online Publisher
Papertopic: SVG for Webmapping and Online GIS/GML
Author(s): Locati, Mario (Isituto Nazionale di Geofisica e Vulcanologia - Sezione di Milano) and Andrea Cassera (Isituto Nazionale di Geofisica e Vulcanologia - Sezione di Milano)
Within the activities of the Networking Activity 4 (NA4) module called “Distributed Archive of Historical Earthquake Data” of the European Commission NERIES project, a massive quantity of historical earthquakes related data is being published online. The NA4 working team is composed of many researchers coming from five European National Institutions. The retrieved data ranges from year 1000 to year 1900 and covers all of Europe.
One of the fundamental components of historical seismology research is the so called “macroseismic intensity data” which describes the level of damage caused by an earthquake in a list of places. Usually these data come in form of printed maps and/or tables; only rarely data are available in digital form. Among other tasks, the NA4 working team is dedicated to publishing maps representing retrieved material
Until now no dedicated software for online map publishing existed and general purpose solutions were adopted. However a macroseismic map requires a series of additional information such as explanation on the sources used, detailed places information and representation of the level of damage using special glyph.
These requirements are of difficult implementation using out-of-the-box tools, resulting in extremely time-consuming hard to do customization and manual operations, tasks that NA4 couldn’t afford. To solve the situation the working team decided to create MIDOP, a specific tool that allows web-inexperienced researchers to easily transform unappealing tables into deeply customized interactive maps.A completely coding-free approach has been adopted sporting a user friendly web interface capable of generating entire websites from scratch. Once a website has been created, its publication on the web is easy as dragging a folder to the final web server. Thanks to its SVG and JavaScript integration the web server will only manage static pre-generated pages, resulting in a secure and lightweight web application from the server point-of-view. Only the client computer resources will be used when users require actions such zoom, pans or mapped places search.
The MIDOP tool is based on open source solutions such as JavaScript, PHP and MySQL and extensively uses SVG for visual representation and interaction. The tool is being released under an open source license.
Links:
Hide Abstract
- MIDOP: Macroseismic Intensity Data Online Publisher:
- Cherdlu, Etienne (OpenStreetMap)
Show Biography
Etienne has been involved in OpenStreetMap since its early days. He is the author of Osmarender, the SVG based map renderer for OSM. Etienne is a founding board member of the OpenStreetMap Foundation and administers the GPStogo scheme which distributes GPS receivers to volunteer mappers in developing countries.
- Using SVG to create maps from OpenStreetMap data:
Show AbstractUsing SVG to create maps from OpenStreetMap data
Papertopic: SVG for Webmapping and Online GIS/GML
Author(s): Cherdlu, Etienne (OpenStreetMap)
OpenStreetMap (OSM) was started in 2004 to make a user generated free and open map of the world. It has grown rapidly and currently has over 35,000 regular and active contributors across over 150 countries.
One of the earliest needs was obviously to visualize the data being collected as a map. OSM's map data is described exclusively as vectors and expressed in XML so SVG was an obvious choice. There are now several map renderers for OSM data but the first and original renderer, called Osmarender uses SVG.
Today Osmarender forms the core of a distributed map rendering project called Tiles@home. Bit mapped map tiles are pre-generated for the whole planet at 17 zoom levels ranging from the the world on a single tile up to the highest zoom level where each tile represents no more than 1/10th of a square mile.
Tiles@home comprises a distributed network of clients that download a chunk of OSM data for a small area and transform it using XSLT into SVG. This is then rendered as a 256px by 256px bitmap using either Inkscape or Batik. These bitmaps are then uploaded to a central server which provides a full function map viewer using OpenLayers which has equivalent functionality to the web-based Google maps viewer.
This talk will describe how XSLT and SVG is used to render OSM data as a map. It will describe the architecture of Osmarender and explain how it has evolved to meet a variety of different needs including the Tiles@home application. I will outline some of the principles of good cartography and how these have been achieved using SVG. The session will describe the main techniques used and the results achieved. It will discuss the benefits of using SVG in preference to using a graphics rendering engine directly. I'll go on to address some of the limitations of SVG for cartography and tricks and workarounds used to circumvent these. The talk will conclude with a summary of the future directions for SVG rendering of map data and discuss some of ways that SVG could make this process easier and provide better results.
Hide Abstract
- Using SVG to create maps from OpenStreetMap data:
- Clay, Samuel (Daylife, Engineer/Maker)
Show Biography
Samuel, a recent graduate of Case Western Reserve, and now living in Brooklyn, works as a web engineer at Daylife, part of a team sincerely dedicated to reshaping the landscape for news and how people interact with different perspectives on topics and connections in the news. Previously, Samuel worked at Microsoft as an intern for the MSN Video (Soapbox) team and the Window Live Favorites team. Samuel's previous projects include: SunRayLab, an online collaboration network; NewsBlur, a RSS feed reader with intelligence; CaseLife, a college group communication system; and Scheduler Jones, a graphical scheduling application. Samuel greatly admires those who spend time thinking about how systems work. He also shares the same passion in explaining the complex and planning for new designs; thinking about interaction on the web, both technical and social, and building a natural conceptual model of software into his work. He especially enjoys the recent and growing interest in SVG.
- Raphaël — JavaScript Library:
Show Abstract, Paper (Separate Tab), Presentation (Separate Tab)Raphaël — JavaScript Library
Cross-browser SVG today
Papertopic: SVG Authoring Tools and Techniques
Author(s): Clay, Samuel (Daylife)
The maturation of web browsers has reached the point where it is easy to use native vector graphics without any third party plugins and installs. SVG is supported in all major modern browsers except for IE, which supports VML, a slightly-limited precursor to SVG. Despite maturity of SVG in web browsers there are still gaps in support. Raphaël Javascript Library (http://raphaeljs.com) is a small JavaScript library that uses SVG as a base. Raphaël equalizes the differences between browsers and emulates the features and benefits of SVG in Internet Explorer with VML. Raphaël enables front-end developers to use vector graphics in a cross-browser compatible way with only a single source to maintain.
Raphaël can be used to create rich interactive graphics, creating vector elements that are native to the browser and the DOM. Native DOM elements are exposed to Javascript, allowing for them to be used in the same manner as any other HTML element. Raphaël can attach Javascript handlers, events, animations, and other features native to Javascript to SVG/VML elements created in Raphaël. Raphaël works in IE6+, FF3+, Safari 3+, and Opera 9.5+.
jQuery (http://www.jquery.com), a popular Javascript framework used to simplify HTML document traversing, event handling, animating, and Ajax interactions for rapid web development, can be used on top of Raphaël for additional interactivity and management of SVG in the browser.
This paper will demonstrate how Raphaël works, how it can be used in all browsers, why the world needs another Javascript or SVG library, limitations of both Raphaël and SVG in the browser, comparisons with existing SVG browser solutions, and a demo of the Raphaël API and its capabilities.
Short summary:
- Why we need library?
- Why JavaScript?
- Library API
- SVG Support (browsers)
- SVG Support (library)
- Library Limitations
- Demos
- How it is done?
- Comparison with existing solutions
Links:
Hide Abstract
- Raphaël — JavaScript Library:
- Cohen, Jonathan
- SVG in Fritzing: a Case Study:
Show Abstract, Paper (Separate Tab), Presentation (Separate Tab)SVG in Fritzing: a Case Study
Papertopic: Business Cases and Case Studies
Author(s): Cohen, Jonathan, Crowe, Mariano and Brendan Howell
SVG in Fritzing: a Case Study
Jonathan Cohen, Mariano Crowe, Brendan Howell
University of Applied Sciences Potsdam
Pappellallee 8-9, 14468 Potsdam, Germany
jonathan, merunga, brendan @ fritzing.org
Fritzing (www.fritzing.org) is an open-source Electronic Design Automation (EDA) tool aimed primarily at non-engineers. [1] The approach is GUI-based, using the metaphor of working with a breadboard and electronic parts. Once a user finishes assembling his graphical circuit board, he can export it to any of several graphics formats for either “do it yourself” PCB etching, or to send to a professional PCB production facility.
Fritzing makes use of many of the features of SVG: fast rendering; scaling with no degradation; compact representation; precise real-world measurements; ease of conversion to other formats; xml manipulation for generation and modification; and familiarity to our intended user-base of artists, designers, and hobbyists.
The main user-manipulable unit in Fritzing is the part, for example a force sensitive resistor. In a sketch, a user assembles multiple parts, and connects them with graphical wires. The user can see his sketch in three different views: breadboard, schematic, and PCB, and parts have distinct visual representations in each view. In Fritzing, a single part is represented by multiple files: an xml-based metadata file (.fzp), which refers to multiple svg files: one for each view, plus an icon.
In a given view, a single part may have multiple layers which are independently visible. For example, in PCB view, a part might have Copper0 and Silkscreen layers. Parts may also have connectors, which are the locations where a user may attach wires. Each layer of a part is specified using an SVG element with an id attribute surrounding a further set of SVG elements, possibly including connectors. Each connector is also an element with an id attribute. Layer and connector element ids are then referenced in the metadata file. When parts are loaded, the SVG for a single view is split into multiple SVGs—one for each layer—for rendering in separate on-screen graphics objects. The locations of the connectors in the SVG file tell us where these clickable areas are.
We encourage users to create their own parts, using their SVG tool of choice to create part images for each view.[2] Then in Fritzing, the user brings up a Part Editor which allows him to import the images and specify connector locations for each view. Fritzing then saves a new metadata file, and copies of the original SVG images modified with new layer and connector elements.
For some standard parts like ICs, resistors, and pin headers, the Part-O-Matic is an online tool that automatically generates new parts—SVGs and metadata files—according to user-supplied specifications.
Fritzing currently exports sketches to a number of formats: SVG, Gerber, PDF, PostScript, PNG, and JPG. While the latter four are mostly free with the programming framework (we use Qt [3] C++), the others require some translation. SVG is our internal format, and the first step is to construct a single sketch SVG from all of the individual part SVGs. Connecting wires are added as line elements.
It is very important that we preserve accurate size and position of all parts and wires during export, so the individual part SVGs are normalized to a single width/height/viewBox when added to the sketch SVG. While this is straightforward for circle and line elements, we use an LALR parser to deal with path elements (works for polygons and polylines, too).
Depending on the purpose of the output, we may only use certain layers (thus again splitting the original part SVG), and we may change colors of SVG elements (for example, rendering color into black-and-white).
For export to Gerber, there is a more-or-less one-to-one correspondence between internal SVG elements and the legacy Gerber vector format, so we walk the sketch SVG tree spitting out Gerber elements. Another legacy format we work with is gEDA—an open source EDA tool with a massive library of parts. In this case, we import from gEDA format to SVG, giving our users access to these parts.
An early version of Fritzing was written in Java on top of GEF [4] and other Eclipse frameworks. Internally, all graphics were represented as bitmaps. We can definitely say that without SVG the new version of Fritzing would not be where it is now: speedily rendered with clean scaling, able to export to multiple formats, and open for users to contribute parts.
[1] Knörig, A., et al. Fritzing – A tool for advancing electronic prototyping for designers. In: Proceedings of the 3rd International Conference on Tangible and Embedded Interaction. TEI '09. Cambridge, England.
[2] Unfortunately, our users have not been able to avoid a hand-xml-editing step after making part images using either Illustrator or Inkscape.
[3] Qt application framework. http://www.qtsoftware.com/
[4] Eclipse Graphical Editing Framework, http://www.eclipse.org/gef/
Files:
Hide Abstract
- SVG in Fritzing: a Case Study:
- Concolato, Cyril (Télécom ParisTech)
- SVG Communicating Widgets:
Show AbstractSVG Communicating Widgets
Papertopic: SVG and Digital Television
Author(s): Dufourd, Jean-Claude (Télécom ParisTech), Concolato, Cyril (Télécom ParisTech) and Jean Le Feuvre
There is widespread enthusiasm for widgets. While a widget is usually deemed to be based on a variant of HTML+CSS+ECMA-Script, in the process of defining communicating widgets, we found it natural to design widgets in SVG+ECMA-Script. Our current interests include widgets for interactive TV, for user interface of UPnP devices, and for the mobile environment (hence our interest in SVG Tiny 1.2). Our work is based on the W3C Widgets specification, with extensions. We have already implemented the sections “Packaging and Configuration” and “APIs and Events”. One extension is to allow multiple content types in order to address multiple device types with the same widget, in particular to be able to move a widget from one device to another.
Within an interactive TV scenario, some widget applications include a lot of text, e.g. news or documentary follow-ups, whereas other widget applications are very graphically intensive, e.g. adverts and advert follow-ups. For the text, an HTML-based widget is often best: these widgets are more “informative” and less interactive”. For adverts, SVG and its interactive graphics are the right choice. Within a UPnP interfacing scenario, the function of widgets is to provide user interfaces that can be rendered on many devices: TV, smart phone, PC… SVG is a clear winner in that case.
The classic communicating widget is one using ECMA-Script together with XMLHttpRequest, generating SVG on the fly, e.g. from an RSS feed. We have implemented this, but our view of communication extends well beyond this. Our main extension over W3C Widgets is to define, in the widget configuration file of each widget, declarative communication interfaces in order to enable communication between widgets and between a widget and outside entities.
When designing communication between widgets, there is a choice between (1) defining another set of ECMA-Script APIs, (2) using events, or (3) creating a declarative format. APIs and events both exclude the simple case of script-less widgets, which is of interest to us on very small devices. The declarative solution allows script-less widgets, and makes static checks possible, including security checks, and will lead to a significantly more secure widget system. The declarative solution also allows:
- connecting one interface to many, or many to many;
- connecting an interface without knowing the exact address of the service to be connected, provided the widget UA knows about the service and the interface signatures of the widget and of the service match;
- asynchronous connection and disconnection, i.e. the binding happens at any time; the interfaces provide a locus for the bound state;
- flexible yet type-checked interfaces: interfaces do not need to be standardized to interoperate, and the type of each argument can be still checked upon binding.
The widget user agent, upon loading a widget, discovers its interfaces and tries to bind them to known matching interfaces. Binding may also happen upon discovery of a new device or upon loading of another widget. Matching interfaces can be offered by other widgets, UPnP services, web services, applications... A communication interface is characterized by:
- a type, which shall match that of bound interface(s);
- a set of messages, with direction and parameters.
Messages can be processed by a script or be connected directly to attributes of SVG elements. Simple widgets can thus be defined using SVG only. More complex widgets require the use of ECMA-Script. In a message processed by a script function, message parameters match the function parameters. In other messages, each parameter is connected to one attribute of a named element either in input or output direction. A scripted output message is triggered by a call to a special invoke function. A non-scripted output message can be triggered by any scene event, including the DOMAttrModified event sent by any of the attributes connected to the message parameters. Conversely, an input message triggers a script function call or a scene event.
Our system is implemented in GPAC, an open source multimedia framework for research and academic purposes in different aspects of multimedia, with a focus on presentation technologies (graphics, animation and interactivity). GPAC is developed at Télécom ParisTech. The widget UA is implemented in a mixture of C++, ECMA-Script and SVG. Widgets can be implemented in SVG, BIFS or any other media type supported by GPAC, such as Flash, VRML, X3D, LASeR and DIMS, regardless of the widget UA implementation language.
Hide Abstract
- SVG Communicating Widgets:
- Crowe, Mariano
- SVG in Fritzing: a Case Study:
Show AbstractSVG in Fritzing: a Case Study
Papertopic: Business Cases and Case Studies
Author(s): Cohen, Jonathan, Crowe, Mariano and Brendan Howell
SVG in Fritzing: a Case Study
Jonathan Cohen, Mariano Crowe, Brendan Howell
University of Applied Sciences Potsdam
Pappellallee 8-9, 14468 Potsdam, Germany
jonathan, merunga, brendan @ fritzing.org
Fritzing (www.fritzing.org) is an open-source Electronic Design Automation (EDA) tool aimed primarily at non-engineers. [1] The approach is GUI-based, using the metaphor of working with a breadboard and electronic parts. Once a user finishes assembling his graphical circuit board, he can export it to any of several graphics formats for either “do it yourself” PCB etching, or to send to a professional PCB production facility.
Fritzing makes use of many of the features of SVG: fast rendering; scaling with no degradation; compact representation; precise real-world measurements; ease of conversion to other formats; xml manipulation for generation and modification; and familiarity to our intended user-base of artists, designers, and hobbyists.
The main user-manipulable unit in Fritzing is the part, for example a force sensitive resistor. In a sketch, a user assembles multiple parts, and connects them with graphical wires. The user can see his sketch in three different views: breadboard, schematic, and PCB, and parts have distinct visual representations in each view. In Fritzing, a single part is represented by multiple files: an xml-based metadata file (.fzp), which refers to multiple svg files: one for each view, plus an icon.
In a given view, a single part may have multiple layers which are independently visible. For example, in PCB view, a part might have Copper0 and Silkscreen layers. Parts may also have connectors, which are the locations where a user may attach wires. Each layer of a part is specified using an SVG element with an id attribute surrounding a further set of SVG elements, possibly including connectors. Each connector is also an element with an id attribute. Layer and connector element ids are then referenced in the metadata file. When parts are loaded, the SVG for a single view is split into multiple SVGs—one for each layer—for rendering in separate on-screen graphics objects. The locations of the connectors in the SVG file tell us where these clickable areas are.
We encourage users to create their own parts, using their SVG tool of choice to create part images for each view.[2] Then in Fritzing, the user brings up a Part Editor which allows him to import the images and specify connector locations for each view. Fritzing then saves a new metadata file, and copies of the original SVG images modified with new layer and connector elements.
For some standard parts like ICs, resistors, and pin headers, the Part-O-Matic is an online tool that automatically generates new parts—SVGs and metadata files—according to user-supplied specifications.
Fritzing currently exports sketches to a number of formats: SVG, Gerber, PDF, PostScript, PNG, and JPG. While the latter four are mostly free with the programming framework (we use Qt [3] C++), the others require some translation. SVG is our internal format, and the first step is to construct a single sketch SVG from all of the individual part SVGs. Connecting wires are added as line elements.
It is very important that we preserve accurate size and position of all parts and wires during export, so the individual part SVGs are normalized to a single width/height/viewBox when added to the sketch SVG. While this is straightforward for circle and line elements, we use an LALR parser to deal with path elements (works for polygons and polylines, too).
Depending on the purpose of the output, we may only use certain layers (thus again splitting the original part SVG), and we may change colors of SVG elements (for example, rendering color into black-and-white).
For export to Gerber, there is a more-or-less one-to-one correspondence between internal SVG elements and the legacy Gerber vector format, so we walk the sketch SVG tree spitting out Gerber elements. Another legacy format we work with is gEDA—an open source EDA tool with a massive library of parts. In this case, we import from gEDA format to SVG, giving our users access to these parts.
An early version of Fritzing was written in Java on top of GEF [4] and other Eclipse frameworks. Internally, all graphics were represented as bitmaps. We can definitely say that without SVG the new version of Fritzing would not be where it is now: speedily rendered with clean scaling, able to export to multiple formats, and open for users to contribute parts.
[1] Knörig, A., et al. Fritzing – A tool for advancing electronic prototyping for designers. In: Proceedings of the 3rd International Conference on Tangible and Embedded Interaction. TEI '09. Cambridge, England.
[2] Unfortunately, our users have not been able to avoid a hand-xml-editing step after making part images using either Illustrator or Inkscape.
[3] Qt application framework. http://www.qtsoftware.com/
[4] Eclipse Graphical Editing Framework, http://www.eclipse.org/gef/
Files:
Hide Abstract
- SVG in Fritzing: a Case Study:
- Cruz, Jon (Inkscape)
Show Biography
Jon A. Cruz is a professional developer with over 20 years of experience, working extensively in multimedia, including programming and 3D art creation. He has developed for a wide variety of platforms including mobile and other devices, servers for large mail and messaging systems, enterprise security applications, and UI design and development. He is currently involved in Open Source as a core developer and board member with Inkscape, working on more comprehensive integration of LittleCMS and color management features, tablet enhancements and general UI features. He represents Inkscape with the OpenICC and Create projects, focusing on shared resources and collaboration with other software. He has participated as a mentor in Google's Summer of Code since its first year with Inkscape and recently also for OpenICC. He was a keynote speaker at SVG Open 2008, and presented talks at Linux.conf.au 2009, the first Libre Graphics Meeting in Lyon, and various Java users' groups.
- Inkscape v0.47 and Beyond:
Show Abstract, Presentation (Separate Tab)Inkscape v0.47 and Beyond
Inkscape Update and Roadmap, Fall 2009
Papertopic: SVG Authoring Tools and Techniques
Author(s): Cruz, Jon (Inkscape)
Inkscape has going through a round of refactoring and enhancement since the release of 0.46. This talk will present an overview of some of the main changes since the prior release, and then some of the directions for progress after. Several Google Summer of Code projects will be touched upon, along with some of the potential opened up by the recent refactoring. Interface improvements covered will include grids, guides & snapping, filters, live path effects. Node, tweak, calligraphy and eraser tool changes will also be touched on.
Future plans including accelerated release schedule will also be covered. This portion will include possible interface device additions/enhancements including tablets, multi-touch, joystick and others. Additional discussion will be had in regards to incorporating a more adaptive UI. DBus integration and advanced plugin interface possibilities will be explored.
Links:
Files:
Hide Abstract
- Inkscape v0.47 and Beyond:
- Culler, Megan (University of North Carolina)
Show Biography
Megan Culler has a Bachelor's degree in Anthropology from NYU, and is currently a graduate student in the City and Regional Planning program at UNC.
- A City Upon a Screen:
Show AbstractA City Upon a Screen
Exposing Civic Data Through Accessible Interactive Data Visualizations
Papertopic: Accessibility of SVG
Author(s): Schepers, Doug (W3C) and Megan Culler (University of North Carolina)
SVG has many accessibility features, and when created and presented correctly, it can be used by people with limited or no vision, as well as other disabilities. However, the manner in which to do this most effectively is not always clear, and there are challenges with existing screen readers.
Governments have particular responsibility, both ethical and legal, to provide universal access to information and services, no matter what disabilities a citizen may have. Currently, most data visualization is in the form of inaccessible raster images. This presentation will describe the range of services and civic data that should be exposed to the public, and how those might be presented in a more accessible manner using SVG. This data could include information about the physical environment, such as public transit routes and schedules or zoning maps, or other kinds of information that might be of interest to the public, such as charts of tax and budget data, organizational charts illustrating how an agency is staffed, or crime rates.
Unfortunately, certain kinds of information are more difficult than others to make accessible, especially information that is visual in nature. Maps, for instance, are particularly challenging, and there is currently no effective way to make most maps accessible. Many charts and graphs are also not made in a way that allows them to be accessible.
This presentation will also describe how to properly use SVG to maximize its accessibility. It will explain the different general challenges facing users with different disabilities, and specific techniques for overcoming them. It will also present problems with existing browsers and screen readers that prevent SVG from being used to it fullest extent for accessibility. The presentation will walk through specific examples of different types of data visualizations, such as route maps and bar charts, and which techniques must be used with each. It will also indicate particular kinds of data that cannot effectively be presented in SVG in an accessible way, for which alternate formats should be supplied.
The talk will give a preview of the new accessibility features planned for SVG 2.0, including integration and extension of ARIA (Accessible Rich Internet Applications) and new navigation mechanisms.
Finally, this presentation will introduce a new open-source script library that creates charts and graphs that are accessible to blind users, and a reference implementation of a screen reader that understands and properly presents this data.
The benefits of making government data available in an accessible SVG format extend beyond the disabled community. When done correctly, it has the potential to improve usability for the general public. Furthermore, it can reduce government dependence on proprietary software.
Hide Abstract
- A City Upon a Screen:
- Dahlström, Erik (Opera Software ASA)
Show Biography
Erik Dahlström is the SVG team leader at Opera Software ASA, where he's been working as a software developer since 2001. He holds an MSc degree in Computer Science and Engineering from the Institute of Technology at Linköping University (LiTH), Sweden. Since 2005 Mr Dahlström has been the primary representative of Opera Software on the W3C SVG Working Group. He is currently the co-chair of the group.
- SVG WG panel:
Show AbstractSVG WG panel
Papertopic: Panel Discussions
Author(s): Dahlström, Erik (Opera Software ASA)
The SVG WG would like to make themselves available for a panel discussion covering topics related to the standards effort, such as current and past SVG specifications, errata, testsuites and implementation status.
Similar sessions in previous years have been lively, informative and well attended.
Hide Abstract
- SVG WG panel:
- Dailey, David (Slippery Rock University, Professor of Computer Science)
Show Biography
Having taught in three disciplines more than a handful of universities from Alaska to Massachusetts, I've finally settled in Pennsylvania with research interests in graph theory and graphics. I've been experimenting with SVG for about six years.
- Grapher – an open source, SVG-based web application for graph theorists:
Show Abstract, Paper (Separate Tab)Grapher – an open source, SVG-based web application for graph theorists
Papertopic: Interactivity and Scripting
Author(s): Dailey, David (Slippery Rock University), Elder, Eric (Slippery Rock University Web Communications Dept.) and Reno Perri (Slippery Rock University)
We will be presenting the current state of a twenty year project that allows graphs to be easily drawn, modified, analyzed, saved and restored using SVG as well as some earlier technologies. When a graph theorist attempts to investigate a hypothesis about graphs, one of the things he or she often does is to draw a picture of the graph on paper or a blackboard. In attempting to prove a theorem about graphs, the graphs one uses to test one’s conjecture are often small and easy to visualize. Nevertheless, certain hypotheses are difficult to investigate even on small graphs. Determining whether or not a given graph has a certain property, of high computational complexity, is something for which the mathematician may need to rely on software to answer the question, even for small graphs. Software can aid the mathematician by providing relatively fast analysis of a graph according to many different properties. The remaining problem, then, is in getting the graph, as drawn or visualized, into machine readable form.
Grapher is a web-based graph-drawing user interface, done in JavaScript and SVG, previously undertaken in several languages (most recently JavaScript with VML). It is designed so that the task of designing a graph is fairly simple: nodes may be drawn, connected, disconnected and relocated with a minimum of effort through the use of context-sensitive drawing actions. It allows multiple nodes to be selected, copied, pasted or extruded. It allows for simple graph theoretic investigations, such as minimal path, node domination, and node coloration. It works with a simplified XML language for exporting and importing graphs. It is also extensible, by virtue of being both an open source project but it is also hoped that JavaScript functions can be defined and executed dynamically by the user.
Hide Abstract
- Grapher – an open source, SVG-based web application for graph theorists:
- Danilo, Alex (Abbra)
Show Biography
Alex joined the W3C SVG Working Group in early 2002 representing Canon for a number of years. He later became a founding member of the W3C Compound Documents Working Group working closely with the mobile community. He then rejoined the SVG WG as an independent. He has been the lead architect, developer and project manager for a number of SVG implementations over the years, and was instrumental in development of advanced SVG 1.2 features such as the compositing and text layout modules for SVG 1.2 Full. He has also built advanced Compound Document implementations that seamlessly marry features of SVG 1.2, XHTML and CSS.
- Lights, Camera, Action!:
Show Abstract, Paper (Separate Tab)Lights, Camera, Action!
Papertopic: SVG for Multimedia Presentations
Author(s): Danilo, Alex (Abbra)
When SVG was young it dreamed of going to the movies, it was a brash youngster showing everyone how well it could draw. Showing off beautiful resolution independent vectors it became the darling of artists and the in-crowd who understood and enjoyed its many advantages.
Slowly SVG started to grow up and smell the roses and the emergence of video technologies all over the internet, then as a teenager SVG started to dream about one day being part of the multimedia revolution that it was growing up into.
The young SVG mastered filters and lighting effects and realized the future lay in video. Then as it matured into its adulthood, SVG became the first child of the W3C family to standardize <video>.
With its new found maturity, SVG decided to show off its video credentials, appearing in many state of the art browsers, showing off what was possible. In a precocious moment, SVG showed off some video inside fonts that had escaped into the outside (HTML) world.
As time went on, SVG found everyone wanting to know more about its video, and what else it could do.
With 1.2 features, SVG took on a new role, as the pied piper dragging along all its followers eager to learn the intricacies of combining video, filters, compositing, transformations, synchronized presentations and much much more.
The grown up SVG decided to showcase itself under the Californian sun to show just what is possible with its new found video skills, not to mention how the best browsers in the world have embraced its outlook on the world.
In the pre-SVG 1.2 world we had alpha compositing, SMIL animation, and filters that provided lighting primitives. These were useful in a simple 2-D world when the web was young.
During the five years between publication of SVG 1.1 and the recommendation for SVG 1.2 was reached, many advanced features were introduced into SVG.
The most interesting one is of course video. SVG video brings with it far more versatile possibilities than a simple rectangle on the screen of a web page. Transforms, compositing, use of opacity brings a wealth of options.
Native support for SMIL in SVG provides the capability for synchronizing video with aribtrary scalable graphics for powerful presentation capability.
SVG 1.2 with video has made itself the perfect fit for many consumers of video, whether it's for set-top boxes, on the web or on mobile devices.
Understanding how to use SVG video features and take advantage of the synchronization, compositing and <prefetch> features will be explored and showcased alongside some advanced, but not yet standardized future features under development.
Hide Abstract
- Lights, Camera, Action!:
- Danzart, Annie (Télécom ParisTech)
- SVG Checker:
Show Abstract, Paper (Separate Tab)SVG Checker
A helper to live with SVG
Papertopic: Accessibility of SVG
Author(s): Danzart, Annie (Télécom ParisTech), Moissinac, Jean-Claude (Télécom ParisTech) and Christine Potier (Télécom ParisTech)
Why a SVG checker?
All of us have encountered an SVG file which doesn't play in our favorite player. And then, we are faced with the problem to find in the file what is wrong: syntax error, player lack of support for a given feature, SVG version...
All of us should make an effort to improve accessibility of its SVG production. Many of us will want to soon be able to convert a SVG 1.1 Full file to a SVG 1.2 Tiny file.
And we do not want to know every detail of each specification version of SVG.
We propose an environment to help to do all of that:
- Analyze the characteristics of an SVG file
- Find the characteristics to be changed to meet defined constraints
- Have a track on how to perform these modifications while doing only few changes in the original
This paper presents a work in progress.
Elementary level
At a very first level, we check a file against available DTD or schema and produce some diagnosis. That check is just about what is expressed by these formal specification.
A variant of that check is to check a file against several formal specification and the diagnosis says what specification is best suited for the file.
Tools to become conformant with a specification version of SVG
That level uses the results from the elementary level and adds:
- diagnosis about some sophisticated constraints of a version like limitations on external use in SVG Tiny 1.2
- proposals to modify a file based on a diagnosis; for example, if a file uses a gradiant not supported by SVG Tiny 1.2, the tool proposes solutions like using a simple gradiant or replacing the gradiant by a bitmap image; the principle is
1) identify the problem and
2) if there are known solutions, propose them to the user
3) apply automatically the 'patch'
Tools to become conformant with a player
The first level of check is against the published table of elements supported by a list of players (ref). We are looking for the best tools to express some problems and some solutions (ex: problem with text size in Firefox). Then, these tools work like the previous tool (identify the problem, propose solutions and apply a chosen solution).
Tools for accessibility
We propose an environment to ensure the accessibility of SVG files: this means that the SVG file must have a good textual description which can be transmit "as is" or by an audio tool.
Our tools helps the SVG creator to take account of the W3C recommendations and proposes solutions :1st level of accessibility: detection of the presence/absence of the desc attribute in the definition of shapes
To define textualy a geometric graphic description, the accessibility needs that every part (i.e. rect, g, ...) has a desc attribute. Our tool detects if this attribute exists for each shape and proposes to add one in case of absence
For a good description of the SVG file, it has to use styles to reflect the hierarchy of the shapes if any exists.2nd level : detection of the presence/absence of styles
In order to be accessible, the styles of a SVG file have to be in a CSS file. Then, the user will be able to replace it by another (others fonts, bigger, ...).
If styles are described in the file itself, our tool proposes to make an external CSS containig all the styles. Moreover, it will also propose new styles according to the hierarchy of the shapes.3rd level : simplification and readability of the shapes
In a too complex shape (i.e. a long path), it detects (if possible) simpler shapes in it and proposes to replace the previous ones by these new definitions. Those new shapes will also respect the accessibility constraints.
Hide Abstract
- SVG Checker:
- Deerring, James
Show Biography
Independent SVG developer
- Designing high definition UI elements in SVG:
Show AbstractDesigning high definition UI elements in SVG
Using the z-axis in the Cartesian coordinate system
Papertopic: Workflow for Creating and Using SVG
Author(s): Deerring, James
Designing high definition interfaces in SVG using the z-axis in the Cartesian coordinate system
Geared towards web designers, project managers, advertisers, marketers or anyone deploying SVG in large scale enterprises.
SVG has the potential to be widely used in internet advertising and marketing. This presentation will show how to effectively use SVG across a broad spectrum of markets without having to create separate files for each market, ensuring high quality graphic branding consistency.
With the advent of screen technology, and the layering properties of SVG, another axis has been added to the 2 dimensional Cartesian coordinate system. This axis, normally labeled z, provides a third dimension of space measurement. Participants will be shown how to take advantage of the z-axis to create UI elements and graphics that are smaller and more flexible in usage then any current methods being used.
The first part of the presentation will focus on understanding the concept to this approach, analyzing how a graphic image is composed and creating the UI elements used in a 1920 by 1080 pixels SVG web page template that the participants may modify, keep for their personal use.
The created images will be converted to a conventional font, and then converted to an SVG font and implemented into the template. What this does is to teach the client computer to replicate and draw the images at any time without havening to fetch and retrieve the images from a stored location as is currently done.
The second part of the presentation will focus on implementing the UI elements and modifying their placement and attributes in different iterations and usage. The 'font-face-uri' element will be used to remove all path data from the document structure.
The reviewer can see an example template best viewed with Opera (Subject to change) at:
http://deerring.com/abstract.svg
About digital hieroglyphic fonts
Hieroglyphics were the first language used to communicate identity, events and actions. They were not good at communicating ideas, and so alphanumeric codes were designed to fulfil this need. These alphanumeric methods were designed to be read in 2 dimensional x-axis and y-axis formats. Hieroglyphics on the other hand were meant to be seen on the z-axis (brush strokes on top of brush strokes).
SVG font technology allows almost any vector data path generated to be stored as font glyphs. SVG also does not care whether these font glyphs are displayed on the x-axis, y-axis or z-axis. To understand the significance of this many examples will be shown.
Normal font glyphs are perfect for the x-axis and y-axis, but are useless on the z-axis, the hieroglyphic font is just the opposite.
Looking at the source code of the completed template it will be seen that all the necessary vector path data is concentrated in the font data at the top of the document making the document coding extremely clean, easy to navigate and program. The actual mark-up used to access the font data is just font references with-in the SVG document. Later all the vector path data will be removed from the document making the document even leaner in file size.
Both "Flash" technology and SVG allow a graphic to be repeatedly used by saving the path data as a symbol element. This is effective for some limited applications, but in large scale deployment it is hardly enough. To create a new site using the same Symbol elements used in an existing site with different colors and effects, all the Symbol elements have to be recreated as different data files and stored independently.
By using hieroglyphic fonts all data needed to construct UI elements is stored in one location in a single file. It also allows the data to be used independently with different colors, sizes from unlimited locations all from a single centralized file.
Hide Abstract
- Designing high definition UI elements in SVG:
- Dennedy, Dan (MobiTV, Lead Software Developer)
- SVG in Mobile DTV (ATSC-M/H):
Show Abstract, Paper (Separate Tab)SVG in Mobile DTV (ATSC-M/H)
Papertopic: Mobile SVG Solutions
Author(s): Dennedy, Dan (MobiTV)
SVG in Mobile DTV (ATSC-M/H)
by Dan R. Dennedy
Lead Software Developer, Office of the CTO, MobiTV
This paper describes how SVG is being used for the forthcoming mobile digital television service in the USA. It also explains MobiTV's interest in, advocacy for, and activities around the usage of SVG in Mobile DTV.
Introduction to Mobile DTV
The U.S. standard for digital broadcast television is ATSC, which is really a standards body. The ATSC group has established a new standard to address mobile applications called ATSC-M/H (mobile/handheld). Part 5 of the A/153 1.0 standard specifies an Application Framework. Mobile DTV is the new "consumer friendly" way to refer to ATSC-M/H. It's meaning is more obvious, and it is easier to remember.
It has been extremely difficult to receive the existing terrestrial ATSC broadcasts while moving. The mobile stream contains massive amounts of error protection and correction. In addition, it is not reasonable to expect handheld devices such as mobile phones and personal media players to decode and scale down HD video to the small screen sizes. The mobile broadcast provides a widescreen 416x240 resolution.
To be competitive with the current and future mobile entertainment landscape, mobile TV must expand beyond the mobile playback of video and audio. The application framework will provide a new set of tools for Web-like personalization and interaction. Participation television will allow for the ATSC-M/H viewer to engage in real-time with the television program. Such an experience is proven to lower churn and increase viewing times. Real-time mobile commerce will generate new and novel revenue opportunities. Interactive advertising will increase CPM. Real-time audience measurement data can be provided via the application framework. Surveys, usage and other data go directly to the broadcaster.
SVG Tiny 1.2, OMA-RME and 3GPP DIMS
The Open Mobile Alliance (OMA), a standards body that develops open standards for the mobile phone industry, has developed a Rich Media Environment (RME) specification. The ATSC has adopted this standard for its application framework. The OMA-RME specification adds a few things to the the 3GPP DIMS standard. The 3GPP DIMS standard is based heavily upon the SVG Tiny 1.2 standard. It adds much in the area of packaging and delivering. In particular, it specifies the packetized delivery over RTP. Additionally, it defines time-based commands and scripts that can alter the document state.
MobiTV's Role
Our principle is that mobile DTV will help the usage of mobile video grow and that benefits MobiTV. Mobile DTV provides excellent image and sound quality. There are no potential service scaling issues for popular, live events (not that there ever are any ;-). As mobile video gains in popularity, it stands to reason that many people will subscribe to additional services, providers, and shows - many of which are powered by MobiTV. Finally, the application framework requires services.
MobiTV recommended to the ATSC the encapsulation of UDP/IP to facilitate the inclusion of OMA-RME and the output of 3GPP mobile encoders. We, alongside Nokia, also recommended the usage of SVG Tiny 1.2 for the application framework. Finally, we recommended a layered model for the presentation of SVG Tiny distinct from the broadcast video for a few reasons that will be explained.
NAB Demonstrations
For the National Association of Broadcasters (NAB) Show in 2008, we developed the world's first Mobile DTV player that supports SVG Tiny 1.2 for the interactive stream. In addition, we developed the world's first OME-RME interactive delivery server. The server also handles specific web service requests to support the interactive applications on display:
* Voting and Dancer Information - Dancing With the Stars
* Local Activity - Traffic and Weather
* Show Promotions and Advertisement
* Channel Change Logging
For the NAB Show in 2009, we converted our player from last year into a NPAPI web browser plugin so that various partners could embed it into their player applications. More significantly, we proposed and demonstrated MixTV: a revenue-sharing business model that combines free, off-the-air mobile DTV with subscription-based on-demand content delivered over a mobile wireless data network. Furthermore, the on-demand content may come from a 3-7 day window of previous local broadcasts recorded at the broadcast facility, uploaded to the MobiTV managed streaming service, and offered by the mobile network operator for playback over their 3G or 4G data network. Additionally, MixTV demonstrated a SVG Tiny 1.2-based enhanced program guide that aggregates these otherwise disparate offerings. Finally, another demonstration took advantage of the scripting capability of the SVG player to send viewing information to a Nielsen web service for audience measurement.
Hide Abstract
- SVG in Mobile DTV (ATSC-M/H):
- Dufourd, Jean-Claude (Télécom ParisTech)
- SVG Communicating Widgets:
Show Abstract, Paper (Separate Tab), Presentation (Separate Tab)SVG Communicating Widgets
Papertopic: SVG and Digital Television
Author(s): Dufourd, Jean-Claude (Télécom ParisTech), Concolato, Cyril (Télécom ParisTech) and Jean Le Feuvre
There is widespread enthusiasm for widgets. While a widget is usually deemed to be based on a variant of HTML+CSS+ECMA-Script, in the process of defining communicating widgets, we found it natural to design widgets in SVG+ECMA-Script. Our current interests include widgets for interactive TV, for user interface of UPnP devices, and for the mobile environment (hence our interest in SVG Tiny 1.2). Our work is based on the W3C Widgets specification, with extensions. We have already implemented the sections “Packaging and Configuration” and “APIs and Events”. One extension is to allow multiple content types in order to address multiple device types with the same widget, in particular to be able to move a widget from one device to another.
Within an interactive TV scenario, some widget applications include a lot of text, e.g. news or documentary follow-ups, whereas other widget applications are very graphically intensive, e.g. adverts and advert follow-ups. For the text, an HTML-based widget is often best: these widgets are more “informative” and less interactive”. For adverts, SVG and its interactive graphics are the right choice. Within a UPnP interfacing scenario, the function of widgets is to provide user interfaces that can be rendered on many devices: TV, smart phone, PC… SVG is a clear winner in that case.
The classic communicating widget is one using ECMA-Script together with XMLHttpRequest, generating SVG on the fly, e.g. from an RSS feed. We have implemented this, but our view of communication extends well beyond this. Our main extension over W3C Widgets is to define, in the widget configuration file of each widget, declarative communication interfaces in order to enable communication between widgets and between a widget and outside entities.
When designing communication between widgets, there is a choice between (1) defining another set of ECMA-Script APIs, (2) using events, or (3) creating a declarative format. APIs and events both exclude the simple case of script-less widgets, which is of interest to us on very small devices. The declarative solution allows script-less widgets, and makes static checks possible, including security checks, and will lead to a significantly more secure widget system. The declarative solution also allows:
- connecting one interface to many, or many to many;
- connecting an interface without knowing the exact address of the service to be connected, provided the widget UA knows about the service and the interface signatures of the widget and of the service match;
- asynchronous connection and disconnection, i.e. the binding happens at any time; the interfaces provide a locus for the bound state;
- flexible yet type-checked interfaces: interfaces do not need to be standardized to interoperate, and the type of each argument can be still checked upon binding.
The widget user agent, upon loading a widget, discovers its interfaces and tries to bind them to known matching interfaces. Binding may also happen upon discovery of a new device or upon loading of another widget. Matching interfaces can be offered by other widgets, UPnP services, web services, applications... A communication interface is characterized by:
- a type, which shall match that of bound interface(s);
- a set of messages, with direction and parameters.
Messages can be processed by a script or be connected directly to attributes of SVG elements. Simple widgets can thus be defined using SVG only. More complex widgets require the use of ECMA-Script. In a message processed by a script function, message parameters match the function parameters. In other messages, each parameter is connected to one attribute of a named element either in input or output direction. A scripted output message is triggered by a call to a special invoke function. A non-scripted output message can be triggered by any scene event, including the DOMAttrModified event sent by any of the attributes connected to the message parameters. Conversely, an input message triggers a script function call or a scene event.
Our system is implemented in GPAC, an open source multimedia framework for research and academic purposes in different aspects of multimedia, with a focus on presentation technologies (graphics, animation and interactivity). GPAC is developed at Télécom ParisTech. The widget UA is implemented in a mixture of C++, ECMA-Script and SVG. Widgets can be implemented in SVG, BIFS or any other media type supported by GPAC, such as Flash, VRML, X3D, LASeR and DIMS, regardless of the widget UA implementation language.
Hide Abstract
- SVG Communicating Widgets:
- Ehrismann, Jim (Quickoffice, Software Developer)
Show Biography
Jim has worked in software development for about 20 years. He has spent the last nine years mostly with BitFlash in its various incarnations. His work has centred around 2D graphics for supporting the BitFlash SVGT engine. In another career he has also done topographic and surface deformation mapping using specialized radar image processing.
- Creating an SVG Browser Plug-in for Webkit in the Android Open Source Project:
Show AbstractCreating an SVG Browser Plug-in for Webkit in the Android Open Source Project
Papertopic: SVG Viewer Implementations
Author(s): Ehrismann, Jim (Quickoffice)
SVG is currently regarded in the mobile realm as a leading solution for providing resolution-independent 2D graphics that is rich in features, open in design, and can be integrated directly with other Web technologies. Webkit is an open source Web browser engine that powers a number of applications on multiple platforms, including of course Android. Armed with the Android Open Source Project and the BitFlash SVG Player we strove to create an SVG plugin for the Webkit-powered Android Browser to enable compound document technologies. These technologies, like WICD, define stronger integration of HTML and SVG capabilities, such as rendering and interactivity. In this work we tested the openness of Android, as well as the portability of the BitFlash SVG Player. This paper describes our experiences and findings with respect to feasibility, extent of integration, and performance. We detail the inclusion of the BitFlash SVG Player into Android as a member of its set of C/C++ libraries accessed through the application framework. We also describe the SVG Player's integration with Webkit's scripting and browser libraries, and Android's media and surface libraries. The attempts to build and load onto a mobile device the resulting customized Android software stack are related as well in this paper. The suitability of this SVG plugin for Webkit on Android is discussed, in terms of performance, resource requirements, and integration issues. Finally, we look beyond to similarly empowering other Webkit-based applications on other platforms.
Hide Abstract
- Creating an SVG Browser Plug-in for Webkit in the Android Open Source Project:
- Elder, Eric (Slippery Rock University Web Communications Dept., Web Designers Student Assistant)
- Grapher – an open source, SVG-based web application for graph theorists:
Show AbstractGrapher – an open source, SVG-based web application for graph theorists
Papertopic: Interactivity and Scripting
Author(s): Dailey, David (Slippery Rock University), Elder, Eric (Slippery Rock University Web Communications Dept.) and Reno Perri (Slippery Rock University)
We will be presenting the current state of a twenty year project that allows graphs to be easily drawn, modified, analyzed, saved and restored using SVG as well as some earlier technologies. When a graph theorist attempts to investigate a hypothesis about graphs, one of the things he or she often does is to draw a picture of the graph on paper or a blackboard. In attempting to prove a theorem about graphs, the graphs one uses to test one’s conjecture are often small and easy to visualize. Nevertheless, certain hypotheses are difficult to investigate even on small graphs. Determining whether or not a given graph has a certain property, of high computational complexity, is something for which the mathematician may need to rely on software to answer the question, even for small graphs. Software can aid the mathematician by providing relatively fast analysis of a graph according to many different properties. The remaining problem, then, is in getting the graph, as drawn or visualized, into machine readable form.
Grapher is a web-based graph-drawing user interface, done in JavaScript and SVG, previously undertaken in several languages (most recently JavaScript with VML). It is designed so that the task of designing a graph is fairly simple: nodes may be drawn, connected, disconnected and relocated with a minimum of effort through the use of context-sensitive drawing actions. It allows multiple nodes to be selected, copied, pasted or extruded. It allows for simple graph theoretic investigations, such as minimal path, node domination, and node coloration. It works with a simplified XML language for exporting and importing graphs. It is also extensible, by virtue of being both an open source project but it is also hoped that JavaScript functions can be defined and executed dynamically by the user.
Hide Abstract
- Grapher – an open source, SVG-based web application for graph theorists:
- Emmons, Andrew (YOU i Labs, Vice President - Reseach and Development)
Show Biography
Andrew is the Vice President of Research and Development at YOU i Labs. Previously Andrew worked seven+ years at BitFlash where he was a key player in bringing SVG to constrained devices-from the world's first SVGT player on a feature phone to an eventual distribution of more than 300 million units. During this time, he was also a leader in the W3C open standards community and was co-chair of the SVG Working Group which brought SVGT 1.2 to Recommendation. Prior to joining BitFlash, Andrew was Lead Programmer for five years at Sir-Tech Canada, a critically acclaimed PC game development company.
- The Role of SVG in developing compelling, high-performance next-generation user interfaces for embedded devices:
Show AbstractThe Role of SVG in developing compelling, high-performance next-generation user interfaces for embedded devices
Papertopic: Mobile SVG Solutions
Author(s): Emmons, Andrew (YOU i Labs)
Expectations for user interfaces on mobile devices have been increasing rapidly over the last couple of years with the advent of 3D, touch, physics and superior performance. This paper will examine the critical role SVG plays in helping to deliver on these new expectations, and will also highlight some of the challenges that need to be overcome. A number of critical use cases will be examined including 3D and touch user interfaces. A content development framework will be used to develop SVG-based next-generation user interfaces.
Hide Abstract
- The Role of SVG in developing compelling, high-performance next-generation user interfaces for embedded devices:
- Fitch, Thomas (4D Inc., Technical Services Team Member)
Show Biography
I am a bay area native who went to high school just down the street at Archbishop Mitty and college here at San Jose State University. I've been in the tech industry here since an internship at Compaq in the 1990's. My SVG experience has come since I began working at 4D Inc. (www.4d.com) about three years ago. One of the new and interesting developments at 4D when I started was the SVG engine soon to come in our newest unreleased product. At that time we had very few people familiar with SVG outside of the developers building the rendering engine. I worked with those developers and with another resident 4D SVG expert, Vincent De Lachaux, during development of the 4D SVG component. That component makes building SVG documents native to the 4D language, and documentation on it can be found at: http://www.4d.com/docs/CMU/CMU65896.HTM Since the public release of 4D's SVG tools I've been building demo's and presenting the new technology to our developers. The biggest presentation was at last year's 4D Summit, October 2008 in Long Beach, in front of over 200 developers. A sample of one of the demo's can be seen on Youtube at: http://www.youtube.com/watch?v=UdyU6V53wAw&fmt=18
- Desktop Data Visualization with SVG:
Show AbstractDesktop Data Visualization with SVG
Papertopic: SVG Authoring Tools and Techniques
Author(s): Fitch, Thomas (4D Inc.)
SVG is currently targeted mainly for web based graphics and applications. There is an excellent opportunity for desktop applications to take advantage of the benefits of SVG to display rich graphics and dynamic reports as well. This presentation will discuss the benefits of SVG graphics for desktop applications, the challenges developers will face using SVG for desktop applications, and a demo desktop application implementation with SVG reporting using 4D v11 SQL.
Benefits:
- An overall higher quality of graphics.
- Reports which are easily moved to the web.
- Desktop applications generally like to publish at least some of their content to the web, using SVG to display your reports makes that part of the application “web ready”.
- Reports with dynamic data rather than static.
- The SVG is created programmatically, based on live data from the database backend. This way all your reports are live and up to date rather than periodically generated. Every time a user loads a report it is easy for application to re-generate the SVG.
- A solution that is packaged in a way such that it is familiar for existing developers.
- The application development language can wrap SVG commands so that developers are not “scared away” by the daunting task of learning new technology. For example 4D has already done this with their 4D SVG component, and there are Ruby and Java solutions as well (though they are not as powerfully user configurable as most desktop applications would require):
- A fully encapsulated, high quality and dynamic reporting tool.
- With all the above benefits and an API implementation, a desktop application’s SVG images and will be self-contained. The SVG generation will be handled by the application, so data control will be easy as well. And then the rendering will be handled by the application as well, removing the need to rely on browser solutions on user desktops, of which you do not know the configuration.
Challenges:
- The implementation of SVG rendering as part of your solution.
- For a desktop application to take full advantage of this idea it must natively render SVG. This is not trivial especially as the SVG specification changes and new functionality is added. Even a rudimentary rendering engine though will offer improved graphics to what most desktop applications currently support.
- Balancing ease of use and power level.
- As a development tool the SVG API implemented must be easy for developers to use but also allow as much of the power of SVG as possible. One way to handle this is with an array of basic commands that will allow beginners to develop simple and attractive reports while offering other advanced options for developers who prefer more control at the cost of simplicity.
- Maintaining speed when displaying images.
- If a database application is querying a large amount of data every time that a report is being displayed this could eventually be problematic. This is one of the downsides to having real time data for your reports. Each solution to this problem will most likely be specific to the desktop application in use.
Implementation Demo:
- Getting the data to be displayed.
- Including interactivity with the report and Developer Hooks so that the user can control what type of interactive pop-ups they want on events such as clicks or mouse overs.
- Using 4D, Ruby, and Java to build SVG.
- These are high level implementations that simply build SVG XML documents. The mathematical aspects can be found and implemented from many different sites on the web. This part of development is probably the easiest because it is both high level for the developer and there is existing information to be drawn from. There is no need for each developer to reinvent the wheel.
Hide Abstract
- Desktop Data Visualization with SVG:
- Förster, Klaus (University of Innsbruck, Department of Geography)
Show Biography
Klaus Förster works and teaches at the Department of Geography, University of Innsbruck. He is responsible for the technical implementation of the Tirol Atlas, an SVG-based free Online Atlas for the region of Tyrol and Southtyrol. He contributed SVG-export modules to PostGIS, Grass-GIS as well as SpatiaLite and maintains Universities World Wide, a free link portal to universities around the world.
- Using Canvas in SVG:
Show Abstract, Paper (Separate Tab)Using Canvas in SVG
Papertopic: Interactivity and Scripting
Author(s): Förster, Klaus (University of Innsbruck, Department of Geography)
"SVG coming of age" faces a situation where it is no longer the only open standard that can do graphics on the web. Canvas has matured as well over the last years and is implemented in modern Web browsers like Firefox, Opera, Safari or Chrome. This paper will show how Canvas drawing can be utilized from within SVG and tries to provide use cases for why Canvas integration into SVG would be desirable in the future.
What is Canvas?
Canvas represents a "resolution-dependent bitmap canvas, which can be used rendering graphs, game graphics, or other visual images on the fly" [1]. It is part of the HTML5 specification and in contrast to SVG, deals solely with raster. The actual drawing is done with JavaScript, so once you get a reference to your Canvas element and obtain a drawing context by calling the
getContext('2d')method on it, you are ready to draw onto the Canvas. You may create rectangles, lines, curves, arcs or texts, stroke and fill objects with color, gradients or patterns and, just as in SVG, scale, rotate, translate or matrix-transform them. In addition, Canvas provides eleven compositing attributes whilst drawing, simple shadows and most important in the context of this paper, allows to draw images, videos or parts of them using thedrawImagemethod and gain direct access to their pixel's rgba-values throughgetImageDataandputImageData.Why use Canvas in SVG?
Besides the fact that it is always advantageous to mix evolving techniques and thus enhance facilities in creating applications, the ability to control raster values is a big win for SVG. The idea of accessing pixel values in SVG was already part of the first SVG 1.2 Full Draft way back in 2004 where
SVGImage.getPixel()was defined as returning an SVGColor-object at point x/y [2]. This chapter has disappeared in SVG 1.2 Tiny and probably will not make it into SVG1.2 Full either. A much better and cleaner way to control raster in SVG would be using Canvas and itsdrawImage,getImageDataandputImageDatacapabilities instead, so let us explore how this can be done.How to use Canvas in SVG?
As it is not yet clear how SVG and HTML5 will play together in the future, the only way to include Canvas in SVG is via the foreignObject element which comprises the following steps:
- add a foreignObject to your SVG
- add an HTML Canvas element to your foreignObject
- add a script to your SVG that runs onload and:
- gets a reference to the Canvas element
- defines the drawing context with
getContext('2d') - uses this context to draw ...
If you want to put an existing image onto the Canvas to make use of
getImageDataandputimageData, there are additional steps needed:- add an HTML img element to your foreignObject
- get a reference to this image
- use
drawImage(image,dx,dy)to copy the image to the Canvas
The reason why you cannot us an SVG image element as source for the
drawImagemethod is simple, but painful: the current Canvas specification does not (yet) allow to referenceSVGImageElementas source fordrawImageand can only cope withHTMLImageElement,HTMLCanvasElementandHTMLVideoelement. This short-coming will hopefully be addressed during the process of defining "SVG in HTML5" behavior and could be extended to allowSVGSVGElementas well.The examples ...
Given the basic concept introduced above, it is now time to explore the benefits of Canvas in SVG. This series of examples shows how to read and manipulate pixel data of Canvas raster images and make these values available in SVG. All examples use SVGCanvasElement.js, a simple Javascript library that helps to master canvas in SVG.
- Read pixel values
- Compute distribution of colors
- Reclassify pixels by color values
- Convert color to grayscale
- CSS3 color picker
- Extract icons from a single icon sheet
- Use alpha-channel values for shaded relief and elevation display
- Create Elevation profiles from alpha channel values
- A simple sound-map (FF3.5 needed)
Conclusion
Mixing Canvas with SVG has huge potential to build stunning interactive applications in the future. Canvas and SVG are not competitors but complement one another as both do what they do so well. Given SVG's capabilities when it comes to user interfaces and Canvas's unique and efficient way of handling raster in the browser, it is time to bring both together and thus make the next step in integrating SVG in HTML5.
References
- [1] http://www.whatwg.org/specs/web-apps/current-work/#the-canvas-element
- [2] http://www.w3.org/TR/2004/WD-SVG12-20041027/dom.html#media-dom
A note on browser support
All examples work with Firefox 3.5. Safari 4 and Chrome 3 cannot cope with filters in examples 7+8 and
in example 9 - the rest works as expected.Links:
Hide Abstract
- Using Canvas in SVG:
- Gerhaeuser, Michael (University of Bayreuth)
- Interactive SVG with JSXGraph:
Show AbstractInteractive SVG with JSXGraph
Papertopic: Interactivity and Scripting
Author(s): Valentin, Bianca (University of Bayreuth) and Michael Gerhaeuser (University of Bayreuth)
JSXGraph (http://jsxgraph.org) is a client-side web application/library for
- interactive drawings,
- interactive function plotting,
- interactive charts and data visualization,
- interactive Mathematics: Statistics, Geometry, Calculus
in a web browser.
Visualization is realized with SVG which is supported by most major web browsers. The only notable exception is Microsoft Internet Explorer where JSXGraph uses its own rendering engines based on VML or Silverlight.
The library is completely implemented in JavaScript, no further plug-ins (like Java or Flash) are required. Thus, JSXGraph is browser and platform independent.
JSXGraph is easy to embed and has a small footprint: less than 60 KB if compressed by the web server. JSXGraph is released under the "Lesser GNU General Public License", the source code is available at http://sourceforge.net/projects/jsxgraph.
The main focus of JSXGraph lies on the interactive exploration of scientific constructions and the intended audience are universities and schools. But the library also offers widespread visualization and scripting capabilities which are useful for many other interactive web applications based on data presentation.
JavaScript still has the reputation of being slow. But meanwhile, the execution speed of JavaScript in the web browsers has been improved by some orders of magnitude and speed is still one of the big issues in the competition between the web browsers.
A big advantage over - for example - Java programs is the much reduced download time and the zero initialization time. A further reason for the use of JavaScript is that the future support of Java plug-ins by the web browsers - especially on mobile devices - seems to be more than uncertain.
By now JSXGraph contains objects and methods for
- curve plotting: function graphs, parametric curves, polar curves, data plots, tangents, normals,
- spline interpolation,
- Euclidean Geometry: Points, lines, circles, intersections, perpendicular lines, angles,
- turtle graphics,
- charts,
- modelling: Epidemiology, L-systems in Biology,
- sliders, gliders
- on- and offline reading of files from dynamic geometry software (DGS).
At the moment JSXGraph supports the XML based GEONExT and the European Intergeo file formats. Further file formats are under development.
Since JSXGraph itself is implemented in JavaScript the canonical scripting language for JSXGraph is JavaScript. This eases the integration of interactive graphics in a web page and the connection via AJAX to server based data sources like data bases or ERP systems and mathematical tools like R (Statistics) or Matlab (Numerical Mathematics).
Therefore, almost everything is scriptable.
In our talk we will show the possibilities of JSXGraph and explain implementation hurdles, e.g. speed issues and alternative usage of SVG and VML, and how we solved them.
The wiki pages of the project (http://jsxgraph.uni-bayreuth.de/wiki/) contain many examples and showcases:
- http://jsxgraph.uni-bayreuth.de/wiki/index.php/Category:Examples
- http://jsxgraph.uni-bayreuth.de/wiki/index.php/Showcases
Links:
Hide Abstract
- Interactive SVG with JSXGraph:
- Gersabeck, Volker (pidoco GmbH)
- pidoco - an SVG-rich web application:
Show Abstractpidoco - an SVG-rich web application
Learnings and insights from three years of development
Papertopic: Interactivity and Scripting
Author(s): Gersabeck, Volker (pidoco GmbH)
pidoco is a web-based editor for creating and executing UI mockups and interactive wireframes. It uses SVG as its core graphics format. After three years of development, we would like to share some of our learnings and experiences with the usage of SVG in such an application. Many of the well known techniques that live around SVG have been used with pidoco: XML / XSLT for creating SVG code, JavaScript for adding user interaction to the application, XHTML to host the different SVG snippets, and unit testing with YUI and Selenium. In addition, some advanced concepts were included like the <use> element, which plays an important role for the scalability and performance of pidoco. How these techniques were combined and applied to pidoco will be shown. Finally, the different possibilities to tackle the IE / VML issue will be discussed.
Links:
Hide Abstract
- pidoco - an SVG-rich web application:
- Hardy, Vincent (Oracle, Senior Director, Development)
Show Biography
Vincent Hardy works at Oracle on graphical, interactive and animated user interfaces in the field of Business Intelligence, contributing to making large sets of complex data visually understandable, in order to help users navigate data sets, detect trends or find anomalies. Prior to Oracle, Vincent worked at Sun Microsystems for 10 years where he focused on graphical, animated and interactive technologies, mainly the Java 2D API and the Scalable Vector Graphics format (SVG). Vincent co-founded and led the Batik project at Apache, an open source Java toolkit for manipulating, viewing or transcoding SVG content. Vincent contributed to the development of the Scalable Vector Graphics specification and its version for mobile devices, SVG Tiny. He chaired the Compound Documents Format (CDF) effort in W3C. Vincent is the author of the "Java 2D API Graphics" book and has a passion for graphical design.
- Using SVG in Oracle Business Visualizations:
Show Abstract, Paper (Separate Tab)Using SVG in Oracle Business Visualizations
How SVG is used to import, export rich business graphics and support advanced, interactive visualizations
Papertopic: Business Cases and Case Studies
Author(s): Hardy, Vincent (Oracle) and Hugh Zhang (Oracle)
This session discusses how SVG is used in different visualization efforts at Oracle. In a first part, this session will discuss the use of SVG as an export format for business graphics, as well as the use of SVG as an import format for inserting custom graphics into visualizations. This first part will present the advantages of using SVG, discuss the issues met and show examples of SVG's usage in Oracle's ADF visualization components, the Data Visualization Tools components. In a second part, the session will present how SVG is leveraged for animated, interactive visualization components to provide features as rich as competing technologies. That part will discuss the pros and cons of using SVG for advanced visualization components, talk about some of the shortcomings and hopes for the future of SVG and the Canvas API.
Hide Abstract
- SVG Wow 2009:
Show AbstractSVG Wow 2009
A collection of open web demos
Papertopic: Interactivity and Scripting
Author(s): Dahlström, Erik (Opera Software ASA) and Vincent Hardy (Oracle)
This session will show some of the many ways current and future web technologies can be used together to create dynamic and graphically rich content. The main focus will be demos, and topics will include combinations of CSS, HTML and SVG, filters, video and audio, and other surprises.
Hide Abstract
- Using SVG in Oracle Business Visualizations:
- Herzog, Daniel (Vodafone, User Interface Engineer)
- SVG in Vodafone Widgets:
Show AbstractSVG in Vodafone Widgets
Papertopic: Mobile SVG Solutions
Author(s): Herzog, Daniel (Vodafone) and Lars Piepel (Vodafone)
SVG in Vodafone Widgets
Preface: Vodafone and SVG
Vodafone is taking part in W3C working groups for a long time now, related to SVG that is mostly the Tiny 1.2 spec and WICD 1.0 spec. There is a huge demand for SVG in a lot of ways in the company, and it became the number one format for vector-graphics, especially when doing data-exchange. For these reasons, Vodafone as well demands SVG support from numerous vendors, partners and manufactures.
Product-wise, there is a history in doing SVG-only clients. Having walked that path, we gained a lot of experience and in parallel there was already a lot of work on the WICD standard which became W3C Candidate Recommendation on 18 July 2007. The work of this initiative is all about defining and sorting out the gaps between SVG, CSS and HTML and it brought in a lot of extra opportunities to use SVG in clever ways.Widgets Basics
The term "widget" has a lot of meanings. But in this case, and that is at the same time what the W3C Widget spec is all about, we mean web-content that gets packaged as a zip-file under certain rules and with some nice extras added to them.
There is a root document, it can be HTML, XHTML or SVG; and all extras like images, CSS files and JavaScript are added and can be referenced from inside the zip file or the web. This package will be a standard, and there are more, for example about „API and Events“, Security, Signatures, and Updates of the widgets. The widget concept enables a web-developer to make an offline web page that runs multi-platform and just connects to online resources when it's needed. This includes multiple device-classes as well, today that means desktop computers and smart-phones and also consoles like the Nintendo Wii, in the future it will expand to lower-end phones and I would guess coffee machines.The Vodafone Widgets project
An installable S60 client is done by Opera, based on their core rendering engine and their initial widget spec that was created in 2006. As a customer you can get the client as a download for you S60 smart-phone, as a developer you can get a special version to try and debug your widget as you create it.
More information is available on http://www.betavine.net/resources/widgetsDeveloper support
SVG in Widgets
In a typical Vodafone widget, SVG will be used for buttons and all sorts of others graphics that make sense to be vector. By the use of clever CSS and Media Queries it helps a lot to design for multiple platforms, resolutions, screen-sizes and aspect-ratios.
The level of SVG support in the run-times, especially in the Vodafone widget run-time coming from Opera, is pretty decent. This means SVG can be animated, styled by CSS, modified by JavaScript, ether through HTML (parent-to-child) or in the SVG itself.
Technically there are a couple of ways of bringing SVG to widgets:SVG as background image
Using SVG as background-image in HTML enables complex background artwork, like rounded corners or tabs overlapping the actual widget, which still proportionally adapts to different display resolutions, aspect ratio change, user zoom etc.
[sample: SVG as widget/HTML background]
[sample: SVG as button/div background]SVG as object
Referenced from HTML via object tag, SVG can be used for fancy and dynamic reusable components.
[sample: animating dynamic stock graph]
Child to parent script access allows this SVG object to get data (name, graph-values etc.) from its parent HTML document.
[sample: busy bee / progress bar]
Parent to child script access lets you manipulate the graphic (i.e. the progress-bar) directly from HTML, and as any vector graphic format, SVG allows for complex animations with small file-size.SVG as fullscreen widget
[sample: simple 2D-game]
Using HTML just as a wrapper, SVG objects can be used fullscreen/full-canvas/full-window, which allows for 2D-game programming. Listening to both, key and mouse events, lets this sample play on touchscreen as well as directional input devices. The current draft of the w3c widget spec also features direct usage of an SVG root document.Hide Abstract
- SVG in Vodafone Widgets:
- Homan, Jan (Visual Integrity, Software Architect)
Show Biography
Jan Homan (Dutch, based in Noordwijk, The Netherlands), CTO and co-founder, has over 25 years experience in software development. He worked in senior development positions at both at Océ and Island Graphics until founding Visual Integrity in 1993. He has developed many graphics technologies and applications including IslandPresents, a presentation application and the first of its kind on a graphical UNIX workstation. He is the inventor and chief architect of all of the Visual Integrity technologies.
- Automated Generation of SVG from PDF Content:
Show AbstractAutomated Generation of SVG from PDF Content
Reuse, Repurpose and Recycle Content - PDF, Postscript and Windows Metafiles All Easily Produce Reliable, High-Quality SVG
Papertopic: Workflow for Creating and Using SVG
Author(s): Homan, Jan (Visual Integrity)
SVG is still a rare sighting for the average Web surfer. Behind the scenes, however, major organizations have successfully adopted it to store, publish and (re)use significant content ranging from engineering drawings to financial reports and general business documents. This is just the tip of the iceberg in terms of the usefulness of SVG. The pros and cons of generating SVG from other formats such as PDF, PostScript and Windows Metafiles will be reviewed along with the available technologies. A number of compelling business cases will be presented to inspire organizations to further embrace SVG.
More specifically::
• Adobe PDF format is widely used and has become one of the primary standard for viewing electronic pages and documents.
• Organizations want SVG to provide them with the XML and Web equivalent of PDF.
• In addition to coding SVG from scratch or generating though (XML) data, a conversion server can be employed to great effect as well as cost and time-savings to convert their existing content and document flows from PDF to SVG.
• Conversion can be achieved interactively on the desktop, automated on enterprise servers, or integrated into applications.
• Stumbling blocks to achieving high quality conversions such as textual content will be addressed and overcome though options such as embedding character glyphs in the SVG file.
• Examples of browser differences with SVG will be presented.
• Advanced capabilities to search SVG files for objects and replace or modify attributes will be explored
• Real-life case studies of SVG will be presented including:
• Database reports in finance
• Flight navigation charts in aviation
• Yellow Pages listings in directory publishing
• Technical graphics in defense, aerospace and automotive
• Financial charts in investment banking
• System diagrams in Formula One racing
• Data plots in medical research
Hide Abstract
- Automated Generation of SVG from PDF Content:
- Hopgood, Bob (Oxford Brookes University)
Show Biography
Involved with graphics on the web since 1994. Teaches SVG on the Masters Course at Oxford Brookes.
- SVG Animation in 2D and 3D:
Show Abstract, Paper (Separate Tab), Presentation (Separate Tab)SVG Animation in 2D and 3D
Papertopic: SVG Authoring Tools and Techniques
Author(s): Hopgood, Bob (Oxford Brookes University)
1. Introduction
We have been interested in the use of computer animation as an educational and visualisation tool since the early 1970s. SVG, with its excellent declarative animation capabilities, has been our main tool over the last few years. A specific project, that we started in 2002, was to animate the WWW Conference Logos(http://www.iw3c2.org/conferences/) as part of the Conference Opening and Closing Sessions. From Budapest (12th, 2003) until Edinburgh (15th, 2006) , the complete set of animations were shown at each conference. Since Edinburgh, we have shortened it to just the four most recent conferences which has given us the ability to expand the time of each animation.
Each year we have the problem of taking a logo constructed using a drawing package like Illustrator that needs to be transformed into SVG and animated efficiently. WWW6 in Santa Clara was the first conference logo to use 3D in a significant way and that presented a specific challenge. Our solution has been to transform the SVG document into an XML form that could be manipulated more easily before transforming back to SVG.
A simple 3D wire-frame animation system called PAEPOS [1] was defined in 2002 to animate the construction of the WWW6 logo. Peter Gould [2], a student on the Oxford Brookes Masters Course in Web Technologies , extended the wireframe system to a full 3D system with hidden line elimination and lighting as his dissertation in 2004. Our animations tend to be of the order of 6 Mbytes in size so automation is necessary to achieve the desired effect efficiently.
Our approach has been to construct a path toolkit, called path_ology, for manipulating SVG path descriptions. The path description is converted into an XML data structure that is manipulated by a set of XSLT transformations. Each transformation performs a simple operation which can be pipelined together to produce the desired transformation. The path library has gone through a number of iterations to improve the performance and extend the functionality. A major advantage is that with a well defined XML structure it is relatively easy to add one-off transformations for a specific task (simulating Japanese painting for the 2005 Tokyo Logo and charcoal drawing for the 2008 Beijing Logo.
2. Path Library
The basic elements of the path library are:
- Conversion of the SVG path description into a canonical internal form consisting of subpaths made up of absolute cubics, arcs and lines
- Converting the internal form back to either the original form or a more desirable form.
Once the internal form has been generated, the path definitions can be manipulated by specific transformations. Examples are:
- Change accuracy
- Reverse a path
- Split cubics
- Join cubics
- Transform arcs to cubics
- Smooth curves
- Apply transformations to the path coordinates
- Transform basic primitives like rect, circle, ellipse etc to paths
- Change lines to cubics
It also gives the opportunity to avoid certain path sequences that are implemented incorrectly in specific implementations. For example Safari incorrectly animated the sequence Zm and Opera the sequence m x,y m.
3. A Third Dimension
To achieve 3D effects, the approach taken has been the following;
- Add a Z-dimension to each path primitive
- Provide 3-D transformations that can be applied to each 3D path individually
- Provide a perspective transformation back to the 2-D form
For the 2007 Conference in Banff, a fully articulated skier was animated but that has not been added to the basic library so far.
4. Animation
The main animation support has been the ability to define a set of individual scenes (keyframes) and to automate the transformation of the individual paths to animation commands. For 3D animations, if the keyframes are sufficiently close, the 2D interpolations give realistic 3D effects. All the animations have soundtracks synchronised to the animation actions. Both the Adobe plugin and Safari are able to support excellent synchronisation over animations lasting several minutes. Batik is nearly as good. Opera is unable to sustain complex animations over long periods.
The talk will be illustrated using the individual animations that have been created including the recent one for WWW 2009 in Madrid.
5. References
[1] Hopgood, F R A, et al, Using XSLT and SVG in Teaching: 3D, Sound and Nostalgia, SVG Open 2003
[2] Gould, P, et al, 3D Animation Using SVG and XSLT, SVG Open 2005
Hide Abstract
- SVG Animation in 2D and 3D:
- Howell, Brendan
- SVG in Fritzing: a Case Study:
Show AbstractSVG in Fritzing: a Case Study
Papertopic: Business Cases and Case Studies
Author(s): Cohen, Jonathan, Crowe, Mariano and Brendan Howell
SVG in Fritzing: a Case Study
Jonathan Cohen, Mariano Crowe, Brendan Howell
University of Applied Sciences Potsdam
Pappellallee 8-9, 14468 Potsdam, Germany
jonathan, merunga, brendan @ fritzing.org
Fritzing (www.fritzing.org) is an open-source Electronic Design Automation (EDA) tool aimed primarily at non-engineers. [1] The approach is GUI-based, using the metaphor of working with a breadboard and electronic parts. Once a user finishes assembling his graphical circuit board, he can export it to any of several graphics formats for either “do it yourself” PCB etching, or to send to a professional PCB production facility.
Fritzing makes use of many of the features of SVG: fast rendering; scaling with no degradation; compact representation; precise real-world measurements; ease of conversion to other formats; xml manipulation for generation and modification; and familiarity to our intended user-base of artists, designers, and hobbyists.
The main user-manipulable unit in Fritzing is the part, for example a force sensitive resistor. In a sketch, a user assembles multiple parts, and connects them with graphical wires. The user can see his sketch in three different views: breadboard, schematic, and PCB, and parts have distinct visual representations in each view. In Fritzing, a single part is represented by multiple files: an xml-based metadata file (.fzp), which refers to multiple svg files: one for each view, plus an icon.
In a given view, a single part may have multiple layers which are independently visible. For example, in PCB view, a part might have Copper0 and Silkscreen layers. Parts may also have connectors, which are the locations where a user may attach wires. Each layer of a part is specified using an SVG element with an id attribute surrounding a further set of SVG elements, possibly including connectors. Each connector is also an element with an id attribute. Layer and connector element ids are then referenced in the metadata file. When parts are loaded, the SVG for a single view is split into multiple SVGs—one for each layer—for rendering in separate on-screen graphics objects. The locations of the connectors in the SVG file tell us where these clickable areas are.
We encourage users to create their own parts, using their SVG tool of choice to create part images for each view.[2] Then in Fritzing, the user brings up a Part Editor which allows him to import the images and specify connector locations for each view. Fritzing then saves a new metadata file, and copies of the original SVG images modified with new layer and connector elements.
For some standard parts like ICs, resistors, and pin headers, the Part-O-Matic is an online tool that automatically generates new parts—SVGs and metadata files—according to user-supplied specifications.
Fritzing currently exports sketches to a number of formats: SVG, Gerber, PDF, PostScript, PNG, and JPG. While the latter four are mostly free with the programming framework (we use Qt [3] C++), the others require some translation. SVG is our internal format, and the first step is to construct a single sketch SVG from all of the individual part SVGs. Connecting wires are added as line elements.
It is very important that we preserve accurate size and position of all parts and wires during export, so the individual part SVGs are normalized to a single width/height/viewBox when added to the sketch SVG. While this is straightforward for circle and line elements, we use an LALR parser to deal with path elements (works for polygons and polylines, too).
Depending on the purpose of the output, we may only use certain layers (thus again splitting the original part SVG), and we may change colors of SVG elements (for example, rendering color into black-and-white).
For export to Gerber, there is a more-or-less one-to-one correspondence between internal SVG elements and the legacy Gerber vector format, so we walk the sketch SVG tree spitting out Gerber elements. Another legacy format we work with is gEDA—an open source EDA tool with a massive library of parts. In this case, we import from gEDA format to SVG, giving our users access to these parts.
An early version of Fritzing was written in Java on top of GEF [4] and other Eclipse frameworks. Internally, all graphics were represented as bitmaps. We can definitely say that without SVG the new version of Fritzing would not be where it is now: speedily rendered with clean scaling, able to export to multiple formats, and open for users to contribute parts.
[1] Knörig, A., et al. Fritzing – A tool for advancing electronic prototyping for designers. In: Proceedings of the 3rd International Conference on Tangible and Embedded Interaction. TEI '09. Cambridge, England.
[2] Unfortunately, our users have not been able to avoid a hand-xml-editing step after making part images using either Illustrator or Inkscape.
[3] Qt application framework. http://www.qtsoftware.com/
[4] Eclipse Graphical Editing Framework, http://www.eclipse.org/gef/
Files:
Hide Abstract
- SVG in Fritzing: a Case Study:
- Ilinsky, Sergey (Senior Software Developer)
Show Biography
Seasoned front-end engineer, creator of Backbase Ajax Framework 4.x. Interested in JavaScipt, DOM, XML (and its applications), CSS, XBL2 and other client-side technologies
- Using SVG1.2 Tiny cross-browser with Ample SDK:
Show AbstractUsing SVG1.2 Tiny cross-browser with Ample SDK
Papertopic: GUI Frameworks for Web Applications
Author(s): Ilinsky, Sergey
Ample SDK is a revolutionary client-side GUI framework that shields web developers from browsers' inconsistencies in their implementations of standards and that brings modern technologies to the browsers lacking of whose – all in a standard, cross-browser and consistent fashion.
Among the other technologies, Ample SDK has support for selected modules of SVG1.2Tiny and SMIL3.0 which in the conjunction with the DOM-Core (Level 2) and the DOM Events (Level 3) implementations allow creation of dynamic SVG graphics and more. A very simple example that illustrates mentioned in action can be found at http://www.amplesdk.com/examples/svg/dynamic/ (Try in IE, otherwise there will be no wonder)
The principal difference between Ample SDK and the other GUI frameworks is that it has componentization model built-in at the core (as extension to its standards-based DOM) with help of which it is possible to implement any markup technology. This is exactly how SVG1.2Tiny is implemented in Ample SDK. And Mozilla's XUL. And much of XHTML5 markup will be soon too.
The framework enables natural development experience:
- Application UI layout made with XML-based technology (XUL, XHTML1, SVG1.2Tiny or XHTML5 soon)
- Styling made with CSS (namespaces supported, pseudo-elements for styling components subviews, pseudo-classes to style components dynamic states)
- Application logic written in JavaScript against standard-based APIs – DOM Core (Level 2), DOM Evens (Level 3), [DOM] Selectors API, and other: XMLHttpRequest, DOMParser, XSLTProcessor, JSON, XMLSerializer.
During the session I would like to introduce the fellows to the architecture of Ample SDK framework and cover aspects of using SVG1.2Tiny, SMIL3 and DOM modules enabled in Ample SDK.
Links:
- Ample SDK project home page
- Example: SVG in action with SMIL and DOM (Try it in IE first)
- Sergey Ilinsky homepage
Hide Abstract
- Using SVG1.2 Tiny cross-browser with Ample SDK:
- Jiang, Tao (Boston Scientific, Principal Software Engineer)
Show Biography
Tao Jiang was the lead developer at Cenco Inc. for its new generation of jet engine test system. He was fascinated by the expressiveness and flexibility of SVG. He realized that SVG can not only been used in designing appealing web site but also been used in creating user interface on any platform and promoting declarative programming paradigm to allow flexible design and easy configuration for quick project turn around. The system is currently being used by various airline and engine maintenance companies around the world. He now works for Boston Scientific.
- SVG in data acquisition and control systems:
Show Abstract, Paper (Separate Tab), Presentation (Separate Tab)SVG in data acquisition and control systems
Papertopic: Business Cases and Case Studies
Author(s): Jiang, Tao (Boston Scientific)
A real life example of using SVG in data acquisition and control system domain. The system is currently being used by various airline and engine maintenance companies around the world. The major challenges involve:
1. GUI widget creation using SVG.
2. GUI editor supporting SVG component.
3. Fast SVG rendering with continuously data updating (>20HZ) (not just fast initial loading)
4. Real time enhancement on JFreeChart.
Links:
Hide Abstract
- SVG in data acquisition and control systems:
- Johnson, G. Wade (cPanel, Inc., Senior Software Developer)
Show Biography
A Senior Software Developer with around 20 years of experience developing software for many industries, including finance, geoscience, personal investment, IVR, and web services. Programming language experience includes Perl, C, C++, Java, Forth, and Fortran, among others. SVG has been mostly an ongoing hobby for around 7 years.
- Results of Profiling Script Animation in SVG:
Show Abstract, Paper (Separate Tab), Presentation (Separate Tab)Results of Profiling Script Animation in SVG
Papertopic: Interactivity and Scripting
Author(s): Johnson, G. Wade (cPanel, Inc.)
SVG supports two technologies that can be used for animation. The SMIL-based declarative animation and ECMAscript-based scripted animation. The two different approaches have different strengths and weaknesses. Where SMIL-based animation is supported, it is normally smoother and easier for the developer to design.
At the present time, many browsers support scripting, but not SMIL. Even in cases where viewers support SMIL-based animation, scripting still has the advantage of being easily driven by outside sources of data. The performance of scripting engines has been improving in the last few years. The obvious question becomes, have these systems reached the point where reasonable animation is possible using ECMAscript?
This paper describes a simple profiling system for measuring the performance of the scripting system. The profiler measures the update rate of an animated page as a function of the requested update delay. By measuring the actual update rate across a series of requested update rates, we can determine how fast the scripting engine can update a page with a given level of complexity. By performing this measurement on multiple viewers with different kinds of image complexity, we can begin to understand the performance characteristics of script-based animation.
Obviously, any form of performance benchmark like this is subject to variables outside the scope of the actual test. Any variable that I was aware of was reported in an effort to specify exactly what we are measuring. Although many performance benchmarks are designed with a goal of "proving" that one application is better than another, that was not a goal of this research. Instead, the tests were designed to allow an understanding of the level of performance a developer can expect across multiple viewing platforms.
The results of the performance test showed that, for the architecture and image complexity tested, script-based animation is fast enough on current browsers to sustain greater than 20 image updates per second. In some cases, the update rate was significantly higher. Given video speed of 24 frames per second as a reference, this finding suggests that script-based animation is viable.
The second useful finding from this report was the profiling technique and infrastructure. This code can be used to perform profiling on any script-based application with minimal changes to the application. If enough people can perform similar tests on different architectures and applications, we may be able to develop a very good characterization of the performance of scripting in SVG.
Hide Abstract
- Results of Profiling Script Animation in SVG:
- Kaipiainen, Samuli (Department of Computer Science / University of Helsinki, )
Show Biography
I'm part-time teaching and improving stuff at the cs dept nümedia corner.
- SVG vs. Canvas on Trivial Drawing Application:
Show Abstract, Paper (Separate Tab)SVG vs. Canvas on Trivial Drawing Application
Papertopic: Interactivity and Scripting
Author(s): Kaipiainen, Samuli (Department of Computer Science / University of Helsinki) and Matti Paksula (Department of Computer Science / University of Helsinki)
We have created a small a) vector drawing application with SVG and b) pixel drawing application with Canvas. Both were easy and straight-forward web app developments. The assumption is, that these are the stereotypical "made-fit" applications for both standard.
What will be interesting, though, is when we swap the platforms: we'll create a c) pixel drawing application with SVG, and a d) vector drawing application with Canvas. Now the assumption is, that each takes considerably more work than the "made-fit" plan, and consequently works worse, too.
However, this "butt ahead into a tree" experiment gives useful info on the limits of each standard. If it would turn out, that either of these "wrong" approaches works better than the other one, that would suggest the concerning standard to be "better", or at least to have wider limits on its usefulness.
On top of this, we'll attempt to layer the pixel Canvas and vector SVG on top of each other, so that we can attach the best of both standards into one small standards-compliant non-Flash drawing web application. Here the assumption is, though, that it's easier to stay in one standard, as there is no useful interface between SVG and Canvas.
SVG's native "file format" is naturally SVG, while Canvas' is bitmap, such as PNG. It will be interesting to experiment on in/outputting e) SVG from Canvas and f) bitmap from SVG. This would be required for the standards to be attached into one useful drawing application.
The hidden agenda here is to also demystify whole SVG vs. Canvas situation, as it now seems that "general public" thinks Canvas is so sexy, not realizing that SVG might be better suited for their vector-based needs.
We'll create a complete (while small) web 2.0 savvy web drawing application, which we'll publish and document in full SVG and Canvas detail goriness. All which hopefully gives a useful starting point in choosing the correct standard for any new graphical web application.
Links:
Hide Abstract
- SVG vs. Canvas on Trivial Drawing Application:
- Kaushik, Nilam (University of Waterloo , Masters student )
- Using SVG to render content rich maps on mobile devices:
Show Abstract, Paper (Separate Tab)Using SVG to render content rich maps on mobile devices
Papertopic: Mobile SVG Solutions
Author(s): Kaushik, Nilam (University of Waterloo )
With the growth of mobile devices such as PDAs and smartphones in the last few years, the mobile phone industry has seen an increase in both consumer and enterprise mobile applications. Exploiting user mobility has opened a kaleidoscope of opportunities for content rich data-driven applications based on mobility.
We explore the challenges involved with creating and using a specific genre of interactive applications with SVG for resource constrained devices, such as PDAs and smartphones, in environments where a GPS cannot be used. To give the problem some context, consider a tourist scouting for major attractions, restaurants, hotels etc in a new city. Instead of having to gather all this information from various sources, the tourist can instead resort to an interactive SVG based map application. With such an application, the user can not only leverage the zooming/panning capability of SVG but also interact with the map to search and get detailed information(with images and audio/video) about points of interest and navigate to other maps. A collection of such maps can be offered as an application. Interactive mapping applications for museums, zoos etc can be developed along the same lines.
The challenge herewith lies in handling user events such as trackball clicks and keyboard events on a mobile device. User events are handled by implementing an SVG uDOM interface. The uDOM interface handles things such as focus handling, rotation, zooming, panning, and searching for text. The application described will be developed on the BlackBerry Storm smartphone. Devices supporting BlackBerry OS 4.7 have a built-in transconding capability that is compatible with version 1.2 of the SVG specification. The transconding utility converts SVG content to a binary format recognized by BlackBerry devices.
Hide Abstract
- Using SVG to render content rich maps on mobile devices:
- Kendrick, Bill (Tux4Kids, Lead Developer, Tux Paint)
Show Biography
Bill Kendrick is lead developer of "Tux Paint," an award-winning, cross-platform open source drawing application geared towards young children. Utilizing open source libraries like Cairo and libRSVG, Bill added support for SVG-based artwork to Tux Paint's "Stamps" tool.
- Rendering SVG graphics with libSDL, a cross-platform multimedia library:
Show Abstract, Presentation (Separate Tab)Rendering SVG graphics with libSDL, a cross-platform multimedia library
Papertopic: SVG Authoring Tools and Techniques
Author(s): Kendrick, Bill (Tux4Kids)
The Simple DirectMedia Layer library (libSDL, or SDL) is a popular, open source multimedia library that provides low-level access to video, audio, input (keyboard, mouse, joystick). SDL is written in C, but works natively with C++ and has bindings to numerous other languages. It officially supports Windows, Mac OS X, Linux, BSDs, Solaris, IRIX, QNX, BeOS and Windows CE, and unofficially supports AmigaOS, Atari ST, RISC OS, Symbian OS, Sega Dreamcast, Nintendo Wii and DS, and other platforms. SDL is released under the GNU Lesser General Public License (LGPL), and has been used in countless applications and games, both commercial and open source.
Using open source SVG libraries such as Cairo, Cairo2, libSVG, svg-cairo and/or libRSVG, it is possible to load and render SVG vector images and convert them to SDL bitmap surfaces. Less than 150 lines of C source code are needed to do this.
SVG support was added in this way to the Tux Paint project, an open source drawing program for young children, to help expand its clipart support (accessed via its "Stamps" tool). Along with the reduced size of SVG files (compared to PNG bitmaps), SVGs also provide greater flexibility and higher quality scaling.
In the future, Tux Paint will eventually support additional clipart features, such as transformation and rotation, which SVG support simplifies. Tux Paint's user interface will also benefit from SVG support, allowing scalable widgets and button labels. Other Tux4Kids educational software is already in the process of receiving SVG UI support.
Bill Kendrick is lead developer of Tux Paint, and has produced numerous other open source games using SDL. In mid-2007, he added SVG support to Tux Paint, first using Cairo together with both libSVG and svg-cairo (available on some older platforms), as well as with the more modern and robust libRSVG library.
Links:
Hide Abstract
- Rendering SVG graphics with libSDL, a cross-platform multimedia library:
- Köbben, Barend (ITC, Senior Lecturer)
Show Biography
Barend Köbben holds an MSc in Geography, specialising in Cartography, from Utrecht University in The Netherlands. He worked for 9 years as a Lecturer in cartography at that University and then moved to the International Institute for Geo-information Sciences and Earth Observation (ITC). The ITC is an international school providing courses on GIS and Remote Sensing to students from all around the world, ranging from commercial short courses, through 12 month Professional Master and 18 month MSc degree courses to PhD programmes. Here he is at present Senior Lecturer in GIS and cartographic visualisation in the Department of GeoInformation Processing (GIP). His teaching subjects include Geo-Webservices, WebGIS and WebCartography, 3D visualisation, multimedia and image mapping. Furthermore, supervision of PM Final Assignments and MSc thesis work in the fields of WebGIS and WebCartography and other subjects from the GIP knowledge node of Distributed GeoServices. Barend participates within the research activities concerning Distributed GeoServices, which deals with Geodata infrastructure, Internet /Web, Mobile GIS and Multi-scale spatial data. He has been involved in various consultancy projects in The Netherlands, Italy, Malaysia, Iran, Zambia, South Africa and India. He is Webmaster of the AGILE website (http://agile-online.org), the Dutch website for Cartography (http://www.kartografie.nl) and is Map Editor an a member of the editorial board of Geografie, the journal of the Royal Dutch Society for Geography.
- TimeMapper, Visualizing Moving Object Data using WMS Time and SVG SMIL Animations:
Show Abstract, Paper (Separate Tab)TimeMapper, Visualizing Moving Object Data using WMS Time and SVG SMIL Animations
Papertopic: SVG for Webmapping and Online GIS/GML
Author(s): Köbben, Barend (ITC), Blok, Connie (ITC) and Timothée Becker (ITC)
The constant increase in number and size of spatially and temporally referenced datasets challenges researchers to develop effective means for visually exploring and presenting the dynamics of the underlying phenomena. Within the fields of Geovisualization and Exploratory Data Analysis, interactive animated mapping has been pointed out as the only generic technique available to explore large spatio-temporal (ST) datasets. They enable the user to get a complete view of the dynamic process under study and often help to reveal (subtle) spatio-temporal patterns. To become more broadly used, interactive vector animated maps must become less time-consuming to make and easier to disseminate. Internet technologies offer two big advantages: the possibility for interoperable distributed services and the ease of disseminating animations to specialists and wider audiences world-wide.
With the global aim of improving vector animated mapping possibilities, the main objective of this research was to look into the possibility of combining two technologies: distributed geo services and animated, interactive vector maps.
As a framework for distributed services, we adopt OGC's Web Map Service (WMS) and as a graphical means to render interactive animated maps for the internet, we choose Scalable Vector Graphics (SVG) and its SMIL animations.
In geographic studies, three types of change are commonly identified: change of spatial characteristics (e.g. change of position), existential change (e.g. appearance and disappearance) and change of attribute (e.g. change in land-use). To depict such changes, which occur on objects symbolized by the three vector data types (point, line, polygon), various forms of animation need to be used. In addition, authors specialized on the cognitive aspects of animation point to the fact that the use of animation can be made more effective if it is assisted by temporal legends and various types of interactivity. The main features that we intended to implement were: three types of temporal legends, play/pause buttons, a time-slider, a speed control, a looping function and a way for the user to select the temporal extent he wants to visualize.
The questions addressed in this research are the following: Are OGC WMS and SVG animation compatible in terms of the format in which time stamps are stored/used? In other words, how must temporal data stored according to OGC recommendations be converted for it to be used inside SMIL animations? More practically, for a given case-study, can SMIL animations alone be used, or is it necessary to add scripting? Finally, what mechanisms can be used to implement the desired interactive functionalities?
The result of this research is a WMS prototype called TimeMapper, which is an extension of Köbben’s (2007) RIMapper project. To respond to the user’s request, TimeMapper retrieves ST data from a database backend, serializes SVG animated maps and accompanies these with an advanced user-interface. This interface allows the user to interact with both the spatial and the temporal dimensions of the data.
The potential and limitations of the system are shown in a test-case for Antarctic iceberg exploration. The setup enables scientists and shipping companies to explore iceberg movement as well as the influence of seasons on calvings from the ice-shelf. Responsiveness limitations have been identified as well as solutions to tackle them. Two facts give the project a broader potential: Firstly, the principles followed as well as the technologies chosen could be used to render interactive animations to depict a wide range of real-world phenomena. Secondly, the interactive animations can be viewed using a mere Web browser and can thus be widely disseminated.
Links:
Hide Abstract
- SVG in GIS:
Show AbstractSVG in GIS
The Use of SVG in Desktop- and Web-GIS
Papertopic: SVG for Webmapping and Online GIS/GML
Author(s): Neumann, Andreas (City of Uster) and Barend Köbben (ITC)
The presentation will provide an overview of the use of SVG in the GIS landscape. SVG is sometimes used to implement whole geodata viewers, sometimes it is only used in tiny parts of a complex GIS product, such as for the definition of point symbols or patterns. In other cases it is used somewhere in a publishing workflow or as part of the quality assurance of geodata infrastructures. People will be surprised to find out in how many projects or products SVG is used.
The following summary lists a few examples of where SVG can be found in GIS:
- SVG as a GUI for Web-GIS viewers (along with ECMAScript)
- SVG geometry for parts of the GUI in an integrated HTML/SVG/Ajax environment
- SVG geometry for rendering vector maps (through XMLHttpRequests or getURL)
- SVG as a transportation layer for WMS GetMap query results
- SVG for the definition of symbols and patterns
- SVG as part of a reporting workflow
- SVG for the visualization of charts and diagrams in GIS
- SVG in Google Earth (Using webkit features in information bubbles)
- SVG for importing graphics in map layout
- SVG for exporting map layouts
The presentation will demonstrate various examples and mention commercial and open source implementations where SVG is partially used, such as Autodesk, Postgis, Quantum GIS, Mapserver, OpenLayers, FME, etc.
A summary will discuss where the use of SVG is already mature and solid and where there is room for improvements. Hopefully, this presentation will also encourage developers and product managers to improve the quality and flexibility of the SVG support in their projects/products. The presentation will also highlight the fact that the quality of basic infrastructure products, such as libraries, conversion tools and webbrowsers matters a lot, as a lot of desktop or derived web projects build upon those underlying libraries and tools.
Hide Abstract
- TimeMapper, Visualizing Moving Object Data using WMS Time and SVG SMIL Animations:
- Kochetkova, Elena
Show Biography
Elena Kochetkova is a graduate student majoring in Computer Science at San Jose State University. Elena has received her B.S. degree at University of California, Davis in 2004. Her primary area of interest is Data Mining and Information Visualization for Bioinformatics Researches. While pursuing her undergraduate degree at UC Davis, Elena had been working in Dr. Michelmore’s lab doing bioinformatics programming for the research related to tomato and lettuce genetics and breeding as well as research on classical and molecular genetics of disease resistance in Arbidopsis, lettuce, and tomato. Two of her major programs are GenomePixelizer - a tool that helps visualizing the relationships between duplicated genes in genome(s) and between the members of gene clusters, and GenBank Parser - a script designed to translate the region of DNA sequence specified in the CDS part of each gene into a protein sequence. In 2002 Elena received John Moran Award for the contribution to the research in Plant Pathologies.
- GenomePixelizer SVG-fied:
Show Abstract, Paper (Separate Tab)GenomePixelizer SVG-fied
Papertopic: Graphic Design with SVG
Author(s): Kochetkova, Elena
This paper presents the benefits of using XML, XSLT, and SVG technologies combined with JavaScript scripting in re-development of the genome visualization tool to provide users with simpler interface, maximized interactivity; as well as, improved efficiency of genetic data analysis.
GenomePixelizer is the Genome Visualization Tool that I co-developed in 2002. It was written using the TCL/TK toolkit and was designed to help with the visualization of the relationships between duplicated genes in genome(s) and to study the relationships between members of gene clusters (Kozik, A. et Al.).
GenomePixelizer proved itself useful (Dardick et al, 2007, Romanov et al, 2006, Cheung et al 2003, etc.) in the detection of duplication events in genomes, tracking the "footprints" of evolution, as well as displaying the genetic maps and other aspects of comparative genetics (Kozik, A. et Al.).
GenomePixelizer is not an intuitive tool to use. It provides a lot of functionality; however, it requires special data pre-processing: it takes in 3 input files (a file containing setup information, a file containing pre-processed genome information and a distance matrix file) and has a complicated user interface.
GenomePixelizer requires the download and setup of the TCL/TK package. Large datasets need to be subdivided into smaller datasets and re-run through GenomePixelizer in order to see more detail.
The featured tool: GenomePixelizer SVG-fied is lightweight, dynamic and interactive. It takes in one XML file containing setup information, genome information and distance matrix and uses XML Style Sheets and SVG to plot genes over chromosomes and to identify duplicated genes. Furthermore, users can click on a specific gene and land on the NCBI entry for the specified gene. Since we are dealing with scalable graphics, users can also zoom onto the region of interest. In the near future users will be able to rearrange chromosomes by dragging them and move around clusters of genes for further analysis.
References:
1. Kozik, A., Kochetkova, E., Michelmore, R. GenomePixelizer – a visualization program for comparative genomics within and between species. Bioinformatics 2002. 18:335-336.
2. Dardick, C., et. Al. The Rice Kinase Database. A Phylogenomic Database for the Rice Kinome. Plant Physiol. 2007 February; 143(2): 579–586.
3. Romanov, M. N., Construction of a California condor BAC library and first-generation chicken–condor comparative physical map as an endangered species conservation genomics resource. Genomics 88 (2006) 711–718.
4. Cheung, J., et Al. Genome-wide detection of segmental duplications and potential assembly errors in the human genome sequence. Genome Biology 2003, 4:R25
Hide Abstract
- GenomePixelizer SVG-fied:
- Kubo, Hiroya (Chiba University of Commerce, Associate Professor)
Show Biography
Mr. Hiroya Kubo is currently an Associate Professor in Department of Policy Informatics, Chiba University of Commerce, Japan (2009- ). He is also a Visiting Researcher of Keio Research Institute at SFC, Keio University, Japan (2003- ). He received a Master Degree in Media and Governance from Keio University in 1999. He worked as a Software Engineer at P.I.M., Inc. Japan (1999-2000), a Research Associate of “Center of Excellence for the 21st Century (21st COE)” at Keio University (2003-2005), an Assistant Professor at Chiba University of Commerce (2003-2005), a lecturer at Chiba University of Commerce (2005-2009), and a Special Researcher at Keio University (2008-2009). He was awarded “Genius-Programmer / Super-Creator” in 2007 Season 1 “Exploratory IT Human Resources Project (MITOH Program)” by Information-Technology Promoting Agency(IPA), Japan. He is an originator and a chief technology officer of an open-source software development project named “Shared Questionnaire System” which is also known as “School Evaluation Supporting System” (2003- ). His research interests are end-user XML handling, concurrent distributed computing, user interface design, and open-source eco-system management.
- Optical Mark Reader System based on SVG Print:
Show Abstract, Paper (Separate Tab), Presentation (Separate Tab)Optical Mark Reader System based on SVG Print
Using the SVG Print Document as a container of OMR form metadata
Papertopic: Publishing and Printing with SVG
Author(s): Kubo, Hiroya (Chiba University of Commerce)
Questionnaire surveys using Optical Mark Reading (OMR) continue to be useful. They will coexist with web form questionnaires. In this paper, I propose an integrated OMR application, which is named Shared Questionnaire System (SQS), and is based on the W3C standards for printing: XSL-FO and SVG Print. SQS is a proof-of-concept application to demonstrate the separation of presentation and content, while handling form documents using OMR technology.
Through typesetting, an OMR form document is presented, and a set of OMR form metadata is produced. The presentation is produced as a ready-to-print PDF document. The OMR form metadata is produced as an SVG Print document, which describes the geometric information of the answer area, allowing the answers to be read by the OMR engine.
Hide Abstract
- Optical Mark Reader System based on SVG Print:
- Lai, Xun (Kent State University, Ph.D. Candidate)
Show Biography
Xun Lai has Master's degrees in both Mathematics and Computer Science. He is a Ph.D. candidate in the Department of Computer Science at Kent State University, OH, USA. He did research in Control Theory and Numerical Analysis when he was a graduate student in mathematics at Zhongshan University (China) and Kent State University. His current research is on Web technologies for mathematics teaching and learning. In 2003, he joined a research group led by Dr. Paul Wang, Director of the Institute for Computational Mathematics at Kent, and participated in the Web-based Mathematics Education (WME) project. Xun is using SVG, an XML application, to develop GeometryEditor, a geometry manipulative authoring system that supports teaching and learning mathematics on the Web. He is currently also a software engineer at PayPal.
- GeometryEditor: an SVG-based Interactive Geometry System:
Show Abstract, Paper (Separate Tab)GeometryEditor: an SVG-based Interactive Geometry System
Papertopic: Interactivity and Scripting
Author(s): Lai, Xun (Kent State University)
Overview
GeometryEditor is a Web-based interactive geometry package written in SVG, HTML, MathML, CSS and Javascript. The work is part of the WME (Web-based Mathematics Education) project at the department of Computer Science, Kent State University, for enhancing mathematics education using Web technologies. Interactive geometry software (IGS) is computer programs for users to create and manipulate geometric constructions, called geometric manipulatives in educational terminology. The fundamental principle of IGS is: geometric objects of a manipulative maintain their mathematical relations under mouse operations or driving data changes. Existing IGS, including those written in Java do not utilize the Web to a great extent.
GeometryEditor together with its hosting Web site GeoSite provides a completely Web-based environment for users to create, save, access, share, search and reuse geometric constructions and HTML page fragments. GeometryEditor supports all the major browsers such as Firefox 1.5+, Safari 3.1+, Opera 9+ and Windows IE with ASV. The core SVG-coded Plane Geometry Engine is very small and loads fast.
GeometryEditor has two major components.
- An SVG-coded Plane Geometry Engine for authoring and viewing manipulatives (creating, moving, and animating geometric objects).
- GUI for the authoring environment providing authoring logic, a variety of dialogs assisting authoring, publishing, and communications with the server side.
The earliest version of GeometryEditor dated back to 2004. The development of GeometryEditor witnesses the evolvement and growth of SVG. My initial design was to use SVG only for the geometric core engine and HTML/CSS for UI (menu, toolbar and dialogs). However, the lack of browser support and HTML-SVG communication capability at the early stage forced me to build the UI completely in SVG when ASV plug-in was the only reliable support. Later I changed to use XUL after Firefox 1.5 was released since it supported Mac. Eventually with the support from Safari, I was able to switch back to my initial design.
Regarding geometric construction authoring support, GeometryEditor provides many unique features. GeometryEditor has very comprehensive authoring support for geometric object creation, expressions, macros, coordinate systems, recursion, and event handling and so on.
Web-Orientation
GeometryEditor is the only IGS that utilizes the Web to a great extent in the following aspects. Most of these features cannot be easily achieved by traditional IGS.
Manipulative and page authoring and publishing
- Only a browser with SVG support is needed
- GeoSite also provides a WYSIWYG page authoring environment for users to author not only HTML page fragments, but also the interaction between a manipulative and the enclosing page without users having any programming knowledge.
- Once the authoring of a manipulative or page fragment is done, the publishing is instant under the user's account. Other users can view it immediately.
Manipulative sharing
- GeoSite allows users to organize manipulatives like a file system.
- GeometryEditor is able to load manipuatives from the same domain server or across servers.
- Manipulatives can be viewed, copied and linked across users, and across two GeoSites.
- Manipulatives and page fragments can be easily embedded in pages on any Web site
- GeoSite itself is a repository of manipulatives and educational pages. Everyone can contribute.
- Searching a useful manipulative or educational page becomes easy.
School usage
- Manipulatives can be opened in two modes: authoring mode or learning mode. Under learning mode, the user interface is greatly simplified with necessary tools customized by the author
- Homework submission and collection support. A teacher can easily view all the constructions by his/her students.
Enhancement by other systems
- GeometryEditor can also be enhanced by any mathematics computational engine installed on the server side, such as Computer Algebra systems.
Enhancement to other systems
- GeomeEditor is also a library that can be used in a larger Web application that needs mathematical drawing capability.
Links:
- GeometryEditor Demo Site
- Geometry authoring environment
- Page authoring environment demo
- Manipulative and page organization under a user
- GeometryEditor research site
- WME (Web-based Mathematics Education) research site
Hide Abstract
- GeometryEditor: an SVG-based Interactive Geometry System:
- Lazutkin, Eugene
- SVG in Dojo GFX:
Show AbstractSVG in Dojo GFX
Papertopic: Interactivity and Scripting
Author(s): Lazutkin, Eugene
The real world experience with SVG using Dojo GFX: the improving support of SVG in browsers simplifies internals of Dojo GFX, generating SVG in any browser (even in IE!), introduction of Dojo Charting, experiments with cross-browser animation.
Case study: interactive mapping (ESRI).
Links:
Hide Abstract
- SVG in Dojo GFX:
- Leech, Jonathan (Virtela Communications, Inc., Senior Software Engineer)
- Enhancing Server-Side SVG Generation using the Batik Extension Handler Mechanism:
Show Abstract, Paper (Separate Tab), Presentation (Separate Tab)Enhancing Server-Side SVG Generation using the Batik Extension Handler Mechanism
Papertopic: Server-side SVG Generators and Manipulators
Author(s): Leech, Jonathan (Virtela Communications, Inc.)
This paper presents a technique for enhancing the capabilities of SVG graphics generated via the Batik library and the Java Abstract Windowing Toolkit (AWT). The enhancements include CSS stylesheet support with multiple media types, support for high quality patterns, enhancements to enable interactivity and animation, and an enhancement that adds logical grouping to the SVG objects created on introspection of the java stack. These enhancements can be applied to any tool that uses AWT. For the purposes of this paper the enhancements are applied to charts created by the JFreeChart charting library. The enhancements bring the SVG output of the tool up to par with its native Java AWT abilties, and in some instances allow it to surpass its native AWT capability.
The general technique is to use the Extension Handler Mechanisms provided by Batik, in conjunction with specialized class implementations derived from the AWT Paint class. The Paint objects are provided as input to JFreeChart, and are passed through to Batik. Upon their discovery, the Batik Extension Handlers perform extra logic in the SVG generation step, which performs the specific enhancements. The specific Batik extension mechanisms employed include the StyleHandler, ExtensionHandler, and DOMGroupManager / DOMTreeManager. Some of the enhancements can be used independently of SVG generation to augment AWT alone.
First, CSS stylesheets are supported by creating a specialized Paint that refers to the class to be used. The SVG output of Batik is also enhanced to include the specific stylesheet(s). More than one stylesheet can be used and the media-type attribute is supported. For example, the same SVG chart can have a two stylesheets, one each for the "screen" and "print" media types. Each stylesheet can include different colors, patterns, etc. The CSS enhancement can also be applied to standlone AWT. In this case, the stylesheet is parsed, and the color applied to the object as Java AWT paints it.
Second, high quality patterns are supported via the creation of a specialized Paint that refers to the pattern to be used. The source pattern is SVG. When the SVG Pattern is detected by the Batik Extension Handler, the pattern is included in the <defs> section of the SVG and used in the SVG element being renderered by Batik. The patterns can be used even when SVG is not produced. In this use case, the pattern is rendered to a bitmap, and the bitmap used as a fill pattern to standalone AWT graphics calls.
Third, Interactivity and Animation are supported by creating another specialized Paint object. In this case, the Paint object specifies Javascript code to be executed simultaneously with certain mouse events. Declarative SVG animations are created in a similar manner. Batik SVG generation is enhanced with a corresponding change to import specific javascript files. Via this mechanism, tooltips, highlights, drilldowns, and various chart animations are demonstrated in charts created by JFreeChart and output to SVG.
Finally, a technique is demonstrated by which the SVG produced by Batik contains a logical grouping of objects. Without this enhancement, Batik output is relatively flat. With this enhancement, Batik introspects the java stack, and creates group tags corresponding to the method names in the stack. Each group tag contains a class attribute with the name of a method in the stack trace, and its children are the SVG elements drawn in that method and its successors. This technique is demonstrated using JFreeChart and is shown to work in conjunction with the aforementioned enhancements.
Hide Abstract
- Enhancing Server-Side SVG Generation using the Batik Extension Handler Mechanism:
- Le Feuvre, Jean
- SVG Communicating Widgets:
Show AbstractSVG Communicating Widgets
Papertopic: SVG and Digital Television
Author(s): Dufourd, Jean-Claude (Télécom ParisTech), Concolato, Cyril (Télécom ParisTech) and Jean Le Feuvre
There is widespread enthusiasm for widgets. While a widget is usually deemed to be based on a variant of HTML+CSS+ECMA-Script, in the process of defining communicating widgets, we found it natural to design widgets in SVG+ECMA-Script. Our current interests include widgets for interactive TV, for user interface of UPnP devices, and for the mobile environment (hence our interest in SVG Tiny 1.2). Our work is based on the W3C Widgets specification, with extensions. We have already implemented the sections “Packaging and Configuration” and “APIs and Events”. One extension is to allow multiple content types in order to address multiple device types with the same widget, in particular to be able to move a widget from one device to another.
Within an interactive TV scenario, some widget applications include a lot of text, e.g. news or documentary follow-ups, whereas other widget applications are very graphically intensive, e.g. adverts and advert follow-ups. For the text, an HTML-based widget is often best: these widgets are more “informative” and less interactive”. For adverts, SVG and its interactive graphics are the right choice. Within a UPnP interfacing scenario, the function of widgets is to provide user interfaces that can be rendered on many devices: TV, smart phone, PC… SVG is a clear winner in that case.
The classic communicating widget is one using ECMA-Script together with XMLHttpRequest, generating SVG on the fly, e.g. from an RSS feed. We have implemented this, but our view of communication extends well beyond this. Our main extension over W3C Widgets is to define, in the widget configuration file of each widget, declarative communication interfaces in order to enable communication between widgets and between a widget and outside entities.
When designing communication between widgets, there is a choice between (1) defining another set of ECMA-Script APIs, (2) using events, or (3) creating a declarative format. APIs and events both exclude the simple case of script-less widgets, which is of interest to us on very small devices. The declarative solution allows script-less widgets, and makes static checks possible, including security checks, and will lead to a significantly more secure widget system. The declarative solution also allows:
- connecting one interface to many, or many to many;
- connecting an interface without knowing the exact address of the service to be connected, provided the widget UA knows about the service and the interface signatures of the widget and of the service match;
- asynchronous connection and disconnection, i.e. the binding happens at any time; the interfaces provide a locus for the bound state;
- flexible yet type-checked interfaces: interfaces do not need to be standardized to interoperate, and the type of each argument can be still checked upon binding.
The widget user agent, upon loading a widget, discovers its interfaces and tries to bind them to known matching interfaces. Binding may also happen upon discovery of a new device or upon loading of another widget. Matching interfaces can be offered by other widgets, UPnP services, web services, applications... A communication interface is characterized by:
- a type, which shall match that of bound interface(s);
- a set of messages, with direction and parameters.
Messages can be processed by a script or be connected directly to attributes of SVG elements. Simple widgets can thus be defined using SVG only. More complex widgets require the use of ECMA-Script. In a message processed by a script function, message parameters match the function parameters. In other messages, each parameter is connected to one attribute of a named element either in input or output direction. A scripted output message is triggered by a call to a special invoke function. A non-scripted output message can be triggered by any scene event, including the DOMAttrModified event sent by any of the attributes connected to the message parameters. Conversely, an input message triggers a script function call or a scene event.
Our system is implemented in GPAC, an open source multimedia framework for research and academic purposes in different aspects of multimedia, with a focus on presentation technologies (graphics, animation and interactivity). GPAC is developed at Télécom ParisTech. The widget UA is implemented in a mixture of C++, ECMA-Script and SVG. Widgets can be implemented in SVG, BIFS or any other media type supported by GPAC, such as Flash, VRML, X3D, LASeR and DIMS, regardless of the widget UA implementation language.
Hide Abstract
- SVG Communicating Widgets:
- Li, Yan (School of Computer, South China Normal University, Associate Dean, Professor)
Show Biography
Professor Yan LI is associate dean of School of Computer, and Director of Spatial Information Research Center, South China Normal University in Guangzhou, China. Now, she focuses on the theory and methods of spatial information and also continued the research works on Remote Sensing and GIS applications. The project are been implementing as follows: “Spatial Information Integration and applications in Guangdong”, “a prototype of hyper-spectral image processing System development”, “Environment monitoring with hyper-spectra data”, “A XML based spatial information service system” etc. And a project from the National Natural Science Foundation of China, “Theory and methods of online spatial reasoning analysis”. At same time, given the teaching courses on “Multimedia System” in English and “Introduction to Spatial Information System” to undergraduate students, and also given the MSc courses of the theory and methods of spatial information, Virtual reality and UML spatial modeling etc.
- Applied Standardization for implementing SVG WebGIS:
Show AbstractApplied Standardization for implementing SVG WebGIS
Papertopic: SVG for Webmapping and Online GIS/GML
Author(s): Li, Yan (School of Computer, South China Normal University)
Applied Standardization for implementing SVG WebGIS
Yan LI, Xuemin DONG
Computer School, South China Normal University, Guangzhou, China
Spatial Information Research Center, South China Normal University, Guangzhou, China
yanli@scnu.edu.cn xuemindong@yahoo.com.cn
SVG has enjoyed recent popularity for use in developing a WEBGIS. It is a one of the new trends to develop a WebGIS by using XML-GML-SVG solution. Nevertheless, most of the studies and attempts were showed that the main functions implemented on the server side with GML processing and SVG was used only for visualizing the results of the processed GML. This solution is very easy to cause the congestion problem as every operation request from the client will be all sent to the server for executing and answering. Obviously, when quite a lot of concurrent user’s requests occurred, the efficiency of the system must be slowed down sharply even made the congestion. In addition to the limitations of GML, some map operation such as map decoration, map annotation can not be implemented in this processing workflow as the GML does not specify the displaying graphics and decorating styles. Whereas, SVG is defined to a vector graphic standard via internent it can consummate the issue if its data structure is satisfy the characteristics of spatial information. After SVG is extended the representation to spatial information such as map position, map analysis and map decoration [Yan LI, Yang CAO and Haosheng HUANG etc., 2008] it is a good solution to develop a WebGIS. Still, when we develop an implementing WebGIS, another problem faced is how to deal with SVG documents from various transform tools which provide their own document structure.
Based on the problem met in developing procedure, this paper proposed a SVG standardized document as a framework to implement a WebGIS project on the client side. It creates a SVG standardized document according to the SVG-based spatial representation model first; and then it advances the storage strategies for SVG visualizing database and GML application schema and the database management system needed in order to improve the efficiency of the system. Finally, the workflow is showed by using the SVG standardized document in order to implement an applied WebGIS project. The experimental results shown, it is a feasible and easy to update different data sets of SVG WebGIS for the practical implementation with the SVG spatial standardized framework on the client side.
Keywords-SVG WebGIS; SVG Standardized document; spatial information, GML data module
Links:
Files:
Hide Abstract
- Applied Standardization for implementing SVG WebGIS:
- Locati, Mario (Isituto Nazionale di Geofisica e Vulcanologia - Sezione di Milano, Technologist)
Show Biography
Mario Locati took his university degree in Interaction Design at Faculty of Design of the Politecnico di Milano (Italy) in year 2000. He is a technologist at the Istituto Nazionale di Geofisica e Vulcanologia in Milan and works within the historical earthquake macroseismic research team. He acts both as a data warehouse architect and as online software developer, experiencing SVG from year 2003.
- MIDOP: Macroseismic Intensity Data Online Publisher:
Show Abstract, Paper (Separate Tab), Presentation (Separate Tab)MIDOP: Macroseismic Intensity Data Online Publisher
Papertopic: SVG for Webmapping and Online GIS/GML
Author(s): Locati, Mario (Isituto Nazionale di Geofisica e Vulcanologia - Sezione di Milano) and Andrea Cassera (Isituto Nazionale di Geofisica e Vulcanologia - Sezione di Milano)
Within the activities of the Networking Activity 4 (NA4) module called “Distributed Archive of Historical Earthquake Data” of the European Commission NERIES project, a massive quantity of historical earthquakes related data is being published online. The NA4 working team is composed of many researchers coming from five European National Institutions. The retrieved data ranges from year 1000 to year 1900 and covers all of Europe.
One of the fundamental components of historical seismology research is the so called “macroseismic intensity data” which describes the level of damage caused by an earthquake in a list of places. Usually these data come in form of printed maps and/or tables; only rarely data are available in digital form. Among other tasks, the NA4 working team is dedicated to publishing maps representing retrieved material
Until now no dedicated software for online map publishing existed and general purpose solutions were adopted. However a macroseismic map requires a series of additional information such as explanation on the sources used, detailed places information and representation of the level of damage using special glyph.
These requirements are of difficult implementation using out-of-the-box tools, resulting in extremely time-consuming hard to do customization and manual operations, tasks that NA4 couldn’t afford. To solve the situation the working team decided to create MIDOP, a specific tool that allows web-inexperienced researchers to easily transform unappealing tables into deeply customized interactive maps.A completely coding-free approach has been adopted sporting a user friendly web interface capable of generating entire websites from scratch. Once a website has been created, its publication on the web is easy as dragging a folder to the final web server. Thanks to its SVG and JavaScript integration the web server will only manage static pre-generated pages, resulting in a secure and lightweight web application from the server point-of-view. Only the client computer resources will be used when users require actions such zoom, pans or mapped places search.
The MIDOP tool is based on open source solutions such as JavaScript, PHP and MySQL and extensively uses SVG for visual representation and interaction. The tool is being released under an open source license.
Links:
Hide Abstract
- MIDOP: Macroseismic Intensity Data Online Publisher:
- Martin, Johnny
Show Biography
Johnny is a entrepreneur in software development. Presently he is teaching graduate and undergraduate computer science at San Jose State University and serves as an advisory board member for five startup ventures, including Skinux, Inc., Wedshare, and Incentive Technologies. Johnny holds a Ph.D. in Computer Science from the University of Minnesota.
- Implementing a CPU Emulator in SVG:
Show Abstract, Paper (Separate Tab)Implementing a CPU Emulator in SVG
Papertopic: Interactivity and Scripting
Author(s): Martin, Johnny
Overview
This paper describes the SECRET project, which stands for SVG and ECMAScript Cardiac Reproduction Emulator Tutor. SECRET emulates CARDIAC, the CARDboard Illustrative Aid to Computation introduced by Bell Systems Laboratories in the 1960's. CARDIC is a simple human-operated CPU made of cardboard. The SECRET project goals include:
- Providing a visually rich user interface that faithfully captures the CARDIAC's original graphics.
- Providing an intuitive interaction experience supported by meaningful animation sequences and realistic movements.
- Providing a zero-setup installation model, such as that found using only an SVG- and ECMAScript-capable browser
- Provide a single-file deployment which can run standalone or off-line.
- Provide an environment for experimenting with the development of low-level emulators supporting interactivity, scripting, and animation, while using only SVG and ECMAScript.
This paper focuses on SECRET's implementation and presents some of the key development steps using SVG and ECMAScript in SECRET's development.
History of the Cardboard Computer
In 1961, the Bell System's "Aids to High School Science" program introduced a series of student work kits that were "intended as a concrete contribution to education in areas where Bell scientists are particularly competent"[2]. The kits included topics on solar energy, magnetism, speech synthesis, semiconductor physics, and crystallography, and were distributed to high schools by the 23 Bell System operating telephone companies. In 1968 a new kit, CARDIAC (the CARDboard Illustrative Aid to Computation), was introduced.
Designed to illustrate computer operations and serve as a programming introduction, CARDIAC uses base-10 arithmetic and human interaction to power its 10-opcode instruction set. The cardboard kit must be assembled from die-cut sliders, overlays, and printed cardstock with window openings. CARDIAC was developed by David Hagelbarger and Saul Fingerman, both members of Bell Labs' Information Processing Research Department.
Prior Work
CARDIAC is no longer distributed by the Bell operating phone companies, but there are organizations who offer historic cardboard reproductions for sale. There also have been some open-source efforts to provide software emulators for CARDIAC's instruction set. JCINC [3] is a Java-swing based program that was based on an earlier program called CINC. CEMU[4] is a CARDIAC emulator written in TI89-Basic, but its author describes CEMU as not functional, yet "very nearly though, and requires only a little tweaking".
Implementation
SVG and ECMAScript offer the potential of a single-file interactive diagram representing the CARDIAC system that allows for user interaction. The SVG and ECMAScript implementation approach compares favorably with the CINC cardiac simulator, which requires a Java Runtime Environment (JRE), and renders with a user interface that is limited by Swing's widget set.
SECRET's first implementation step included scanning and importing historical CARDIAC graphics to Inkscape [5] and exporting to SVG. Then component graphics were surgically cut out into animation SVG sprites and layers. These were manually ID'ed and grafted onto a substrate SVG framework canvas. By using SVG transparency and z-ordering, the development of an interlaced layering mechanism allows for the illusion of cardboard pieces sliding under one another while portions show through cutout transparent "holes".
Next, several ECMAScript libraries were developed. The core CPU emulator was designed in ECMAScript to run with or without the SVG graphical front-end to ensure a faithful reproduction of CARDIAC CPU's semantic behavior. Various ECMAScript libraries were developed including libraries to provide animated movement, manage scenario time sequences, and abstract user-events.
The hope is that SECRET showcases the power of SVG in yielding an historically faithful reproduction of graphic artifacts and combined with ECMAScript yields a rich interactive emulation with rich animations and controls.
Fall 2009, SECRET is scheduled for beta release in an introductory computer science for non-majors course at San Jose State University and concurrently in teaching high-school students attending San Jose High Academy.
References
[1] "Cardboard 'Computer' Helps Students" Bell Laboratories Record, July 1969
[2] "New Bell System Teaching Aids" (Cover Story) The Journal of the Telephone Industry, Part 21 Practical Electronics, February 27, 1965
[3]"The CINC Project" http://sourceforge.net/projects/cinc/, latest version jcinc-0.2.0, December 12, 2005.
[4]"CEMU" a CARDIAC Emulator written in TI-89 Basic, Sean McCoy, Sept. 22, 2004, http://www.ticalc.org/archives/files/fileinfo/356/35663.html
[5] http://www.inkscape.org/
Files:
Hide Abstract
- Implementing a CPU Emulator in SVG:
- McCormack, Cameron
- Implementors Panel:
Show AbstractImplementors Panel
Papertopic: Panel Discussions
Author(s): McCormack, Cameron
This panel will feature implementors of the SVG specification on a variety of user agents, from desktop to mobile, from toolkits to libraries to authoring tools. The format is a moderated question-and-answer session, with both prepared topics and audience participation. The panel will begin with an introduction by each panelist, who will talk about their company or organization, give a brief overview of their implementation, and talk about their role in the project. This panel will focus on the technical issues of the implementations, issues of market and distribution, plans for future development, and a variety of other topics that will provide the audience with a good sense of the current state of SVG implementations, and will provide an opportunity for dialog between different implementors with different use cases.
The list of participating panelists is not yet settled, but we are aiming for a comprehensive array of people. There will be a general call for participation from implementors, with inclusion based on market relevance and breadth of scope for the panel as a whole.
Due to general interest in this topic, the ideal duration for this panel would be 1.5 hours, and broad audience attendance is expected.
Hide Abstract
- Implementors Panel:
- Minuti, Fabrizio (Sogei s.p.a.)
- GEOPOI – SVG API-Oriented WebMapping Framework :
Show Abstract, Presentation (Separate Tab)GEOPOI – SVG API-Oriented WebMapping Framework
Papertopic: SVG for Webmapping and Online GIS/GML
Author(s): Minuti, Fabrizio (Sogei s.p.a.) and Maurizio Rosina (Sogei s.p.a.)
SVG has been identified as standard reference for the development of a framework (named GEOPOI ® GEOcoding Points Of Interest) based on geographical data, used by an Italian institutional community.
The Framework has been developed in fully compliant svg / javascript (using browsers latest technology available) and a set of library of API has been published to manipulate maps and georeferred data.
The geographical data(streets, parks, rivers, lakes, etc) is the main layer available to every customer; the visual effect is similar to pre-calculated raster maps (like Google Maps, Microsoft Maps, etc), but everything in the GEOPOI map is vectorial and context-aware. It is possible, also, to add background aerial or satellite raster images (provided by an institutional repository of georeferenced raster maps or by customer external repository). Included in the APIs there are also the routing functions to compute complex route directions.
Customers can embed GEOPOI in their own WEB applications and, by using published APIs, can develop customized user interfaces and can integrate the main geographical data with georeferenced POIs and Polygons.
Files:
Hide Abstract
- GEOPOI – SVG API-Oriented WebMapping Framework :
- Moissinac, Jean-Claude (Télécom ParisTech, Associate Professor)
- Re-doing Papyrus:
Show Abstract, Paper (Separate Tab), Presentation (Separate Tab)Re-doing Papyrus
A case study about a 2D animated game
Papertopic: SVG for Multimedia Presentations
Author(s): Moissinac, Jean-Claude (Télécom ParisTech)
In 1995, I was mandated by a French editor to prepare 2D animations for the educative interactive game Papyrus on CD-I and CDROM. Interactivity was done with Macromedia Director.
To get fluid animation, the targeted resolution was 512x373 pixels with 256 colors. All animations are done with bitmaps.
By style choice (cartoon-like), animations were hand-drawn, then computer-colored and assembled.
To be able to benefit from future technical evolution, I choosed to scan the drawings to high resolution. It was a hard work to get a good low resolution result from a high resolution scan, but it's another subject.
So I had all the scanned drawings. I also had a very good converter from bitmap to vector. So I decided to try to convert the game into SVG. What follows is a description of what I did, how, and some thoughts learned about SVG. And I will demonstrate the result.
I also had all the exposure sheets. An exposure sheet is used by cartoon animators to define for each time step what are the drawings that are assembled to compose the scene. Something very similar to the scenario panel in the Flash editor.
I have then produced an XML version of the exposure sheets.
So, with the drawings, my vectorizer, the exposure sheets and a bit of programing, I was ready to generate SVG files for all the animated scenes.
Hundreds of drawings and dozens of exposure sheets. Is SVG a good solution? Yes, as I will show. And you will see a lot of samples.Vectorize the drawings
The first step was to get an SVG file for each original drawings. The drawings was in proprietary format that I translated into PNG. Then I adjusted my vectorizer to translate PNG files to SVG files.
As a result, I got an SVG version for each original drawing.Assemble the drawings to animate them
From one column of the exposure sheet, I know how to animate a character or piece of a character: I have the reference of a drawing for each time step.
The full paper will demonstrate different ways to animate the elementary basic drawings.Assemble several animations and a background
Next, I need to generate a SVG file which groups a background and several animations, as defined by the columns of the exposure sheets.
First, I generate an SVG file with reference to the backgorund and to each external animation created during the previous step. The refernce is an xlink:href in a use or animation element.
But, as I would like the result to be executable on mobile phones, it needs to be compatible with SVG Tiny 1.2. In that specification, the file referenced by a 'use' can't contains a 'use' with an external reference.
My first solution was not compatible: A complete scene referenced several animations, and each animation refernced several drawings, resulting in two levels of external use.
I will present why it is intesting to create animation chunk by chunk and later, assemble the chunks. I will show how it can be done.Add interactivity
Some actions are very simple to add to the previously created SVG files. Some are more difficult.
We will show several interactivity examples and how they can be achieved.Test in web browsers and in mobile phones
We will demonstrate how all that works with GPAC, Firefox, Opera and Google Chrome.
We will also show the result with Opera Mobile on a mobile phone.
We could show the benefit of scalable graphics.Lessons
I will develop some lessons drawn from that experience.
The first is about the management of IDs in SVG.
The second is about reusability of drawings and animation in SVG.
The third is about thinking to prepare the future when managing projects about media.Hide Abstract
- SVG Checker:
Show AbstractSVG Checker
A helper to live with SVG
Papertopic: Accessibility of SVG
Author(s): Danzart, Annie (Télécom ParisTech), Moissinac, Jean-Claude (Télécom ParisTech) and Christine Potier (Télécom ParisTech)
Why a SVG checker?
All of us have encountered an SVG file which doesn't play in our favorite player. And then, we are faced with the problem to find in the file what is wrong: syntax error, player lack of support for a given feature, SVG version...
All of us should make an effort to improve accessibility of its SVG production. Many of us will want to soon be able to convert a SVG 1.1 Full file to a SVG 1.2 Tiny file.
And we do not want to know every detail of each specification version of SVG.
We propose an environment to help to do all of that:
- Analyze the characteristics of an SVG file
- Find the characteristics to be changed to meet defined constraints
- Have a track on how to perform these modifications while doing only few changes in the original
This paper presents a work in progress.
Elementary level
At a very first level, we check a file against available DTD or schema and produce some diagnosis. That check is just about what is expressed by these formal specification.
A variant of that check is to check a file against several formal specification and the diagnosis says what specification is best suited for the file.
Tools to become conformant with a specification version of SVG
That level uses the results from the elementary level and adds:
- diagnosis about some sophisticated constraints of a version like limitations on external use in SVG Tiny 1.2
- proposals to modify a file based on a diagnosis; for example, if a file uses a gradiant not supported by SVG Tiny 1.2, the tool proposes solutions like using a simple gradiant or replacing the gradiant by a bitmap image; the principle is
1) identify the problem and
2) if there are known solutions, propose them to the user
3) apply automatically the 'patch'
Tools to become conformant with a player
The first level of check is against the published table of elements supported by a list of players (ref). We are looking for the best tools to express some problems and some solutions (ex: problem with text size in Firefox). Then, these tools work like the previous tool (identify the problem, propose solutions and apply a chosen solution).
Tools for accessibility
We propose an environment to ensure the accessibility of SVG files: this means that the SVG file must have a good textual description which can be transmit "as is" or by an audio tool.
Our tools helps the SVG creator to take account of the W3C recommendations and proposes solutions :1st level of accessibility: detection of the presence/absence of the desc attribute in the definition of shapes
To define textualy a geometric graphic description, the accessibility needs that every part (i.e. rect, g, ...) has a desc attribute. Our tool detects if this attribute exists for each shape and proposes to add one in case of absence
For a good description of the SVG file, it has to use styles to reflect the hierarchy of the shapes if any exists.2nd level : detection of the presence/absence of styles
In order to be accessible, the styles of a SVG file have to be in a CSS file. Then, the user will be able to replace it by another (others fonts, bigger, ...).
If styles are described in the file itself, our tool proposes to make an external CSS containig all the styles. Moreover, it will also propose new styles according to the hierarchy of the shapes.3rd level : simplification and readability of the shapes
In a too complex shape (i.e. a long path), it detects (if possible) simpler shapes in it and proposes to replace the previous ones by these new definitions. Those new shapes will also respect the accessibility constraints.
Hide Abstract
- Re-doing Papyrus:
- Neuberg, Brad (Google Inc., Developer Advocate)
Show Biography
Brad Neuberg is a developer advocate at Google for the Open Web. He is the creator of a number of JavaScript libraries and frameworks for expanding the capabilities of web applications, including Dojo Storage, Dojo Offline, and Really Simple History. Brad worked with Douglas Engelbart on the HyperScope project; explored deeply collaborative web browsers with Paper Airplane; worked on one of the first web-based RSS aggregators; and was a Developer Advocate for the Gears project. He is currently focused on increasing the capability of web browsers to render vector graphics, such as SVG, through drop-in JavaScript shims. Brad also created Coworking, an international grassroots movement to establish a new kind of workspace for the self-employed.
- SVG in Internet Explorer and at Google:
Show AbstractSVG in Internet Explorer and at Google
Papertopic: Interactivity and Scripting
Author(s): Neuberg, Brad (Google Inc.)
SVG is coming of age. One of the biggest impediments to SVG though has been lack of support in Internet Explorer. At this keynote you will learn about SVG Web, a new open source JavaScript project that allows Internet Explorer to render both static and dynamic SVG with a simple drop-in library! See demos of SVG Web and hear from the creators of the project. In addition, find out how Google and others are using SVG, including in Google Maps, Google Docs, and more. You will walk away from this keynote excited and ready to immediately use SVG across all major browsers (Internet Explorer, Firefox, Safari, the iPhone, and more).
Hide Abstract
- SVG in Internet Explorer and at Google:
- Neumann, Andreas (City of Uster, GIS manager)
Show Biography
Andreas Neumann received a masters degree in Geography/Cartography from Vienna University, in 2001. In 1999 he joined the Cartographic Institute of the Swiss Federal Institute of Technology, first as a system administrator and later as a teaching and research assistant, and finally as a PhD student. At the same institute Neumann advised several thesis and student projects in the webmapping domain. From 2001 to 2003 he was employed as a GIS specialist at a Zurich based geology consulting company. Andreas was one of the initiators of the SVG.Open 2002 conference in Zurich, the first international SVG developers conference, co-organized by the W3C consortium. From June 2007 on he is employed by the City of Uster, Kanton Zurich, where he works as a GIS manager and coordinator.
- SVG in GIS:
Show Abstract, Presentation (Separate Tab)SVG in GIS
The Use of SVG in Desktop- and Web-GIS
Papertopic: SVG for Webmapping and Online GIS/GML
Author(s): Neumann, Andreas (City of Uster) and Barend Köbben (ITC)
The presentation will provide an overview of the use of SVG in the GIS landscape. SVG is sometimes used to implement whole geodata viewers, sometimes it is only used in tiny parts of a complex GIS product, such as for the definition of point symbols or patterns. In other cases it is used somewhere in a publishing workflow or as part of the quality assurance of geodata infrastructures. People will be surprised to find out in how many projects or products SVG is used.
The following summary lists a few examples of where SVG can be found in GIS:
- SVG as a GUI for Web-GIS viewers (along with ECMAScript)
- SVG geometry for parts of the GUI in an integrated HTML/SVG/Ajax environment
- SVG geometry for rendering vector maps (through XMLHttpRequests or getURL)
- SVG as a transportation layer for WMS GetMap query results
- SVG for the definition of symbols and patterns
- SVG as part of a reporting workflow
- SVG for the visualization of charts and diagrams in GIS
- SVG in Google Earth (Using webkit features in information bubbles)
- SVG for importing graphics in map layout
- SVG for exporting map layouts
The presentation will demonstrate various examples and mention commercial and open source implementations where SVG is partially used, such as Autodesk, Postgis, Quantum GIS, Mapserver, OpenLayers, FME, etc.
A summary will discuss where the use of SVG is already mature and solid and where there is room for improvements. Hopefully, this presentation will also encourage developers and product managers to improve the quality and flexibility of the SVG support in their projects/products. The presentation will also highlight the fact that the quality of basic infrastructure products, such as libraries, conversion tools and webbrowsers matters a lot, as a lot of desktop or derived web projects build upon those underlying libraries and tools.
Hide Abstract
- SVG in GIS:
- Neutze, Michael
Show Biography
Michael is known to the SVG community for the animated population pyramids that he developed with the National Statistical Institutes of the UK and Germany. He currently explores the use of SVG on his own and maintains a related website for data visualisation at http://vis.uell.net where he is focused on mapping german election data. Michael attended SVGopen 2003, 2005 and 2008 before.
- The strengths of SVG in web mapping :
Show Abstract, Paper (Separate Tab)The strengths of SVG in web mapping
A real world comparison against Flash and ArcIMS
Papertopic: SVG for Webmapping and Online GIS/GML
Author(s): Neutze, Michael
Aim of the presentation
This presentation will compare the use of SVG in thematic mapping on the web against Flash and ArcIMS. We are in a unique situation to be able to evaluate these three technologies in the real world, as there will be similar web-applications for thematic mapping in Germany in 2009 (mostly election data) with each of these technologies. In fact I deliberately built a new and improved election atlas based on SVG to compare it to existing offerings, after the national statistical institute had decided to not use SVG (any longer).
The comparison
All web mapping applications will be introduced with the reasoning behind the technology choice and will then be compared in terms of usability, performance, intended audience and how the chosen technology benefits those characteristics.
Abandoning plugins and Internet Explorer completely
At the end of 2008 with the advent of Google Chrome and even the iPhone being fully SVG capable and in face of the end of life situation of Adobe’s SVG plugin I decided to go for a native only SVG solution. On the one hand there is fallback content available with the website of the Federal Returning Officer (Flash) and the Federal Statistical Office (ArcIMS) on the other hand I assume that thematic mapping is a geeky enough topic that caters to internet users who are less likely to use Internet Explorer. Finally Germany has among the highest Firefox market share in Europe.
Back in 2002 I was always envious that Internet Explorer on Windows could talk to the embedded SVG content that was displayed with ASV3 and thus using native interface elements of the OS. The native look and feel of GUI widgets is always a blessing let alone that it saves you a lot of time. Fortunately once you abandon IE and go with the browser generation of 2009, mixing SVG and XHTML works the way it was always intended.Aim and capabilities of the SVG based atlas
With the above prerequisites my intention was also to try out web mapping without the de-facto standard of carto.net building blocks. Zooming and panning is implemented a la Google Maps with mouse and scroll wheel and a new “comparison view” is introduced where two maps can be juxtaposed.
CSS3 transitions instead of SMIL
Some experiments with the proposed CSS3 transitions will be discussed for interface animation instead of SMIL as they degrade a lot better on unsupported browsers.
Printing vectors
For a long time (ASV3, Firefox 2, Opera 9.5) browsers would always rasterize SVG content for printing. While ASV3 provided some attributes for controlling the resolution of printed output the advantages of using vector graphics didn’t really pan out. Luckily Safari 3 and Firefox 3 (even on Windows) are able to print vectors that can then be further used in Illustrator, InDesign or similar for high quality print materials. The state of client side vector export capabilities of current browsers will also be discussed in this regard.
Good timing
SVGopen 2009 takes place the weekend after the general election in Germany and the papers will be due after the European Election (June 7th), therefore at the time of the conference information will be available on how the different web mapping applications were received by the public. As of May 20th all three mapping sites discussed here for the comparison are publicly available, see the supporting link section: SVG [1], Flash[2], ArcIMS[3].
SVG Election Atlas
My SVG based election atlas is already accessible at http://wahlatlas.net (German for Election Atlas) for both the geographies of the European Election (administrative boundaries for 413 “Kreise”) and the General Election (299 electoral districts). Actual data has been posted starting May 17th as it became publicly available (demographics, election results from previous election recalculated for the current geography). Updates and feedback for this election atlas is handled via Twitter (@wahlatlas) and screencasts are hosted at http://vimeo.com/visuell (Flash based video player, Quicktime downloads for registered users). As the data is of interest mostly to a German speaking audience, the atlas application and website are in German but should be self explanatory. There will be a screencast with english narration soon (check my blog for entries in english http://vis.uell.net/blog/labels/en.html) and everybody feel free to ask in english on http://twitter.com/wahlatlas.
Links:
- [1] Entry page for the SVG based election atlas (in German)
- [2] Flash based election atlas from the Federal Returning Officer
- [3] ArcIMS based Atlas at Statistics Germany (destatis.de)
- English language blog posts on my visualisation blog
- Screencasts about the SVG based election atlas (Flash and QuickTime video)
- Twitter feed for communication about the SVG based election atlas
Hide Abstract
- The strengths of SVG in web mapping :
- Paksula, Matti (Department of Computer Science / University of Helsinki, Assistant)
Show Biography
Lectured "Digital Media Technology" course about modern web standards at spring 2009. Lecturing "Agile Web Development With Ruby on Rails" course at fall 2009 Assistant on User Interfaces course spring 2009. Web development professional, various projects with Ruby on Rails.
- SVG vs. Canvas on Trivial Drawing Application:
Show AbstractSVG vs. Canvas on Trivial Drawing Application
Papertopic: Interactivity and Scripting
Author(s): Kaipiainen, Samuli (Department of Computer Science / University of Helsinki) and Matti Paksula (Department of Computer Science / University of Helsinki)
We have created a small a) vector drawing application with SVG and b) pixel drawing application with Canvas. Both were easy and straight-forward web app developments. The assumption is, that these are the stereotypical "made-fit" applications for both standard.
What will be interesting, though, is when we swap the platforms: we'll create a c) pixel drawing application with SVG, and a d) vector drawing application with Canvas. Now the assumption is, that each takes considerably more work than the "made-fit" plan, and consequently works worse, too.
However, this "butt ahead into a tree" experiment gives useful info on the limits of each standard. If it would turn out, that either of these "wrong" approaches works better than the other one, that would suggest the concerning standard to be "better", or at least to have wider limits on its usefulness.
On top of this, we'll attempt to layer the pixel Canvas and vector SVG on top of each other, so that we can attach the best of both standards into one small standards-compliant non-Flash drawing web application. Here the assumption is, though, that it's easier to stay in one standard, as there is no useful interface between SVG and Canvas.
SVG's native "file format" is naturally SVG, while Canvas' is bitmap, such as PNG. It will be interesting to experiment on in/outputting e) SVG from Canvas and f) bitmap from SVG. This would be required for the standards to be attached into one useful drawing application.
The hidden agenda here is to also demystify whole SVG vs. Canvas situation, as it now seems that "general public" thinks Canvas is so sexy, not realizing that SVG might be better suited for their vector-based needs.
We'll create a complete (while small) web 2.0 savvy web drawing application, which we'll publish and document in full SVG and Canvas detail goriness. All which hopefully gives a useful starting point in choosing the correct standard for any new graphical web application.
Links:
Hide Abstract
- SVG vs. Canvas on Trivial Drawing Application:
- Pally, Joseph (ZCubes, Inc., CEO)
Show Biography
Joseph founded BitsOfCode, a Houston based consulting and web-applications company in 1998. He has functioned in the CEO position for the last eleven years at BitsOfCode. Joseph founded ZCubes in 2006 and Spider in 2008, and leads both companies as their CEO. He has about 20 years experience in the software development industry. He holds a Bachelor degree in Engineering (1988) from Indian Institute of Technology, Madras, India, and a Masters in Engineering (1993) and a Masters in Computer Science (1996) from Texas A&M University. After graduating from IIT, Madras, Joseph joined Mecon (Metallurgical Engineering Consultants (I) Ltd.) as a consultant. After three years, he left for Texas A&M where he did two advanced degrees. He worked for the Texas Transportation Institute (TTI) as a Research Assistant for two years. Then he joined at TTI as an Assistant Research Scientist and Software Engineer for seven years. He left TTI to start BitsOfCode Software Systems, Inc. in Houston, TX, serving several companies of all sizes. Joseph has been credited with various inventions over the last twenty years. Starting with DART, TexSIM and Pagents in 1996, he followed it with MDI and Real-Time Browser in 2002, ZCubes in 2006, CALCI in 2007, Spider Technology in 2008 – as well as many other inventions. He also leads about 60 software engineers. He is also a well-known speaker and author. He is the author of Fail Fast, Move Faster, a book on a winner’s attitude and The Thinking Things, a history of computing spanning several millennia in short story format. He gave the keynote speech at the 2nd Media Day at City University of New York, New York, and has spoken at many venues as diverse as Kansas State University to Katy ISD – with audiences including professionals to high-school students. He also has more than 10 patents filed in his name.
- ODF and SVG: Evolving Standards for the Future:
Show Abstract, Paper (Separate Tab), Presentation (Separate Tab)ODF and SVG: Evolving Standards for the Future
Papertopic: SVG Authoring Tools and Techniques
Author(s): Pally, Joseph (ZCubes, Inc.)
With the advent of the Web -- based on HTML -- markup languages have been replacing proprietary formats. Productivity applications have been coalescing around two standards, namely ODF and OOXML. Vector markup languages (such as SVG and VML) have been adopted by most browsers to support reusable vector graphics. However, the use of vector graphics has been limited in browsers, due to the lack of consistent universal standards-support among all browsers. This has been one of the most significant missing-link in expressivity in web-pages including annotations, drawings, paintings, clip-arts, etc.; resulting in raster images holding up as the lingua-franca of graphical rendering at the moment.
ODF has adopted SVG as the graphics representation standard. Interoperability among productivity applications is currently limited to the least common denominator of the features in most cases, since the standards themselves have lagged behind the requirements of the users, as well as future needs. There is no reason why documents that specialize in drawings, handwriting, annotations, sketches (as well as web-pages themselves) be treated as a separate class of documents, if the standards are directed appropriately.
This paper highlights the strong and weak points of ODF and SVG compared to other standards, and points out significant areas of attention to bring these standards to be the best, and to be the very forefront of the industry. Focus on aspects of SVG graphics as it relates to ODF is expanded upon. Such gap-analysis would be extremely helpful in directing the standards bodies on both ODF and SVG side to take further steps to minimize the issues and maximize their potential for the future. Such analysis may also help browser vendors to adopt more ODF and SVG standards into content rendering, which may help converging of all applications into the browser.
Examples of the use of vector graphics into web-pages and documents as against conventional techniques are also given. The experience of adopting standards (specifically detailed compatibility with respect to ODF and SVG) to productivity software that exhibits omni-functionality is also included for detailed examination.
Hide Abstract
- ODF and SVG: Evolving Standards for the Future:
- Perri, Reno (Slippery Rock University)
Show Biography
Slippery Rock University Student working with Dr. David Dailey.
- Grapher – an open source, SVG-based web application for graph theorists:
Show AbstractGrapher – an open source, SVG-based web application for graph theorists
Papertopic: Interactivity and Scripting
Author(s): Dailey, David (Slippery Rock University), Elder, Eric (Slippery Rock University Web Communications Dept.) and Reno Perri (Slippery Rock University)
We will be presenting the current state of a twenty year project that allows graphs to be easily drawn, modified, analyzed, saved and restored using SVG as well as some earlier technologies. When a graph theorist attempts to investigate a hypothesis about graphs, one of the things he or she often does is to draw a picture of the graph on paper or a blackboard. In attempting to prove a theorem about graphs, the graphs one uses to test one’s conjecture are often small and easy to visualize. Nevertheless, certain hypotheses are difficult to investigate even on small graphs. Determining whether or not a given graph has a certain property, of high computational complexity, is something for which the mathematician may need to rely on software to answer the question, even for small graphs. Software can aid the mathematician by providing relatively fast analysis of a graph according to many different properties. The remaining problem, then, is in getting the graph, as drawn or visualized, into machine readable form.
Grapher is a web-based graph-drawing user interface, done in JavaScript and SVG, previously undertaken in several languages (most recently JavaScript with VML). It is designed so that the task of designing a graph is fairly simple: nodes may be drawn, connected, disconnected and relocated with a minimum of effort through the use of context-sensitive drawing actions. It allows multiple nodes to be selected, copied, pasted or extruded. It allows for simple graph theoretic investigations, such as minimal path, node domination, and node coloration. It works with a simplified XML language for exporting and importing graphs. It is also extensible, by virtue of being both an open source project but it is also hoped that JavaScript functions can be defined and executed dynamically by the user.
Hide Abstract
- Grapher – an open source, SVG-based web application for graph theorists:
- Piepel, Lars (Vodafone)
- SVG in Vodafone Widgets:
Show AbstractSVG in Vodafone Widgets
Papertopic: Mobile SVG Solutions
Author(s): Herzog, Daniel (Vodafone) and Lars Piepel (Vodafone)
SVG in Vodafone Widgets
Preface: Vodafone and SVG
Vodafone is taking part in W3C working groups for a long time now, related to SVG that is mostly the Tiny 1.2 spec and WICD 1.0 spec. There is a huge demand for SVG in a lot of ways in the company, and it became the number one format for vector-graphics, especially when doing data-exchange. For these reasons, Vodafone as well demands SVG support from numerous vendors, partners and manufactures.
Product-wise, there is a history in doing SVG-only clients. Having walked that path, we gained a lot of experience and in parallel there was already a lot of work on the WICD standard which became W3C Candidate Recommendation on 18 July 2007. The work of this initiative is all about defining and sorting out the gaps between SVG, CSS and HTML and it brought in a lot of extra opportunities to use SVG in clever ways.Widgets Basics
The term "widget" has a lot of meanings. But in this case, and that is at the same time what the W3C Widget spec is all about, we mean web-content that gets packaged as a zip-file under certain rules and with some nice extras added to them.
There is a root document, it can be HTML, XHTML or SVG; and all extras like images, CSS files and JavaScript are added and can be referenced from inside the zip file or the web. This package will be a standard, and there are more, for example about „API and Events“, Security, Signatures, and Updates of the widgets. The widget concept enables a web-developer to make an offline web page that runs multi-platform and just connects to online resources when it's needed. This includes multiple device-classes as well, today that means desktop computers and smart-phones and also consoles like the Nintendo Wii, in the future it will expand to lower-end phones and I would guess coffee machines.The Vodafone Widgets project
An installable S60 client is done by Opera, based on their core rendering engine and their initial widget spec that was created in 2006. As a customer you can get the client as a download for you S60 smart-phone, as a developer you can get a special version to try and debug your widget as you create it.
More information is available on http://www.betavine.net/resources/widgetsDeveloper support
SVG in Widgets
In a typical Vodafone widget, SVG will be used for buttons and all sorts of others graphics that make sense to be vector. By the use of clever CSS and Media Queries it helps a lot to design for multiple platforms, resolutions, screen-sizes and aspect-ratios.
The level of SVG support in the run-times, especially in the Vodafone widget run-time coming from Opera, is pretty decent. This means SVG can be animated, styled by CSS, modified by JavaScript, ether through HTML (parent-to-child) or in the SVG itself.
Technically there are a couple of ways of bringing SVG to widgets:SVG as background image
Using SVG as background-image in HTML enables complex background artwork, like rounded corners or tabs overlapping the actual widget, which still proportionally adapts to different display resolutions, aspect ratio change, user zoom etc.
[sample: SVG as widget/HTML background]
[sample: SVG as button/div background]SVG as object
Referenced from HTML via object tag, SVG can be used for fancy and dynamic reusable components.
[sample: animating dynamic stock graph]
Child to parent script access allows this SVG object to get data (name, graph-values etc.) from its parent HTML document.
[sample: busy bee / progress bar]
Parent to child script access lets you manipulate the graphic (i.e. the progress-bar) directly from HTML, and as any vector graphic format, SVG allows for complex animations with small file-size.SVG as fullscreen widget
[sample: simple 2D-game]
Using HTML just as a wrapper, SVG objects can be used fullscreen/full-canvas/full-window, which allows for 2D-game programming. Listening to both, key and mouse events, lets this sample play on touchscreen as well as directional input devices. The current draft of the w3c widget spec also features direct usage of an SVG root document.Hide Abstract
- SVG in Vodafone Widgets:
- Potier, Christine (Télécom ParisTech, Associate Professor)
- SVG Checker:
Show AbstractSVG Checker
A helper to live with SVG
Papertopic: Accessibility of SVG
Author(s): Danzart, Annie (Télécom ParisTech), Moissinac, Jean-Claude (Télécom ParisTech) and Christine Potier (Télécom ParisTech)
Why a SVG checker?
All of us have encountered an SVG file which doesn't play in our favorite player. And then, we are faced with the problem to find in the file what is wrong: syntax error, player lack of support for a given feature, SVG version...
All of us should make an effort to improve accessibility of its SVG production. Many of us will want to soon be able to convert a SVG 1.1 Full file to a SVG 1.2 Tiny file.
And we do not want to know every detail of each specification version of SVG.
We propose an environment to help to do all of that:
- Analyze the characteristics of an SVG file
- Find the characteristics to be changed to meet defined constraints
- Have a track on how to perform these modifications while doing only few changes in the original
This paper presents a work in progress.
Elementary level
At a very first level, we check a file against available DTD or schema and produce some diagnosis. That check is just about what is expressed by these formal specification.
A variant of that check is to check a file against several formal specification and the diagnosis says what specification is best suited for the file.
Tools to become conformant with a specification version of SVG
That level uses the results from the elementary level and adds:
- diagnosis about some sophisticated constraints of a version like limitations on external use in SVG Tiny 1.2
- proposals to modify a file based on a diagnosis; for example, if a file uses a gradiant not supported by SVG Tiny 1.2, the tool proposes solutions like using a simple gradiant or replacing the gradiant by a bitmap image; the principle is
1) identify the problem and
2) if there are known solutions, propose them to the user
3) apply automatically the 'patch'
Tools to become conformant with a player
The first level of check is against the published table of elements supported by a list of players (ref). We are looking for the best tools to express some problems and some solutions (ex: problem with text size in Firefox). Then, these tools work like the previous tool (identify the problem, propose solutions and apply a chosen solution).
Tools for accessibility
We propose an environment to ensure the accessibility of SVG files: this means that the SVG file must have a good textual description which can be transmit "as is" or by an audio tool.
Our tools helps the SVG creator to take account of the W3C recommendations and proposes solutions :1st level of accessibility: detection of the presence/absence of the desc attribute in the definition of shapes
To define textualy a geometric graphic description, the accessibility needs that every part (i.e. rect, g, ...) has a desc attribute. Our tool detects if this attribute exists for each shape and proposes to add one in case of absence
For a good description of the SVG file, it has to use styles to reflect the hierarchy of the shapes if any exists.2nd level : detection of the presence/absence of styles
In order to be accessible, the styles of a SVG file have to be in a CSS file. Then, the user will be able to replace it by another (others fonts, bigger, ...).
If styles are described in the file itself, our tool proposes to make an external CSS containig all the styles. Moreover, it will also propose new styles according to the hierarchy of the shapes.3rd level : simplification and readability of the shapes
In a too complex shape (i.e. a long path), it detects (if possible) simpler shapes in it and proposes to replace the previous ones by these new definitions. Those new shapes will also respect the accessibility constraints.
Hide Abstract
- SVG Checker:
- Rosina, Maurizio (Sogei s.p.a.)
- GEOPOI – SVG API-Oriented WebMapping Framework :
Show AbstractGEOPOI – SVG API-Oriented WebMapping Framework
Papertopic: SVG for Webmapping and Online GIS/GML
Author(s): Minuti, Fabrizio (Sogei s.p.a.) and Maurizio Rosina (Sogei s.p.a.)
SVG has been identified as standard reference for the development of a framework (named GEOPOI ® GEOcoding Points Of Interest) based on geographical data, used by an Italian institutional community.
The Framework has been developed in fully compliant svg / javascript (using browsers latest technology available) and a set of library of API has been published to manipulate maps and georeferred data.
The geographical data(streets, parks, rivers, lakes, etc) is the main layer available to every customer; the visual effect is similar to pre-calculated raster maps (like Google Maps, Microsoft Maps, etc), but everything in the GEOPOI map is vectorial and context-aware. It is possible, also, to add background aerial or satellite raster images (provided by an institutional repository of georeferenced raster maps or by customer external repository). Included in the APIs there are also the routing functions to compute complex route directions.
Customers can embed GEOPOI in their own WEB applications and, by using published APIs, can develop customized user interfaces and can integrate the main geographical data with georeferenced POIs and Polygons.
Files:
Hide Abstract
- GEOPOI – SVG API-Oriented WebMapping Framework :
- Russell, Robert (Late Night PC)
- Planet SVG: Rallying the SVG Community:
Show AbstractPlanet SVG: Rallying the SVG Community
Papertopic: SVG Authoring Tools and Techniques
Author(s): Schiller, Jeff (Motorola), Russell, Robert (Late Night PC) and Doug Schepers (W3C)
Planet SVG: Rallying the SVG Community
The W3C SVG Interest Group has been working on a website that provides resources, information and tools for the SVG community. Beyond the traditional services that social websites offer such as forums/blogs/gallery, the website also offers several SVG-specific tools that focus on getting new developers started immediately with SVG. This talk will give an overview of the website as well as an online demo of some of these specific services:- Cleaning SVG Files: the SVG format is extremely flexible and extensible and has a large number of domains in which it can be used, only one of which is the web. It is not uncommon for graphical editors to inject a lot of extra data that is not needed for web pages and applications. PlanetSVG provides a form in which an SVG file can be cleaned up without modifying the visual
- SVG MIME Type checker - one challenge in deploying SVG files for the first time on the web is that web servers have not been configured to serve the right MIME type. PlanetSVG provides a simple form that checks what MIME type a given SVG file is being served
- One-click login to SVG developer IRC channel. There are a lot of people willing to help out new developers on the #svg IRC channel on freenode. IRC can often be intimidating to new users who must usually first install an IRC client, learn how to join channels, IRC conventions. A web interface has been provided on PlanetSVG to let users log into the #svg channel directly in the browser without any plugins/extensions. It is our hope that this lower barrier to entry will make it easier for new developers to seek out advice from the community in real-time.
Links:
Hide Abstract
- Planet SVG: Rallying the SVG Community:
- Schepers, Doug (W3C, Web Standards Specialist)
Show Biography
Doug has been involved in the SVG community for far too long.
- Lightning Talks:
Show AbstractLightning Talks
Papertopic: Business Cases and Case Studies
Author(s): Schepers, Doug (W3C)
A series of 5 minute short talks on various issues and use cases of SVG.
Hide Abstract
- Planet SVG: Rallying the SVG Community:
Show AbstractPlanet SVG: Rallying the SVG Community
Papertopic: SVG Authoring Tools and Techniques
Author(s): Schiller, Jeff (Motorola), Russell, Robert (Late Night PC) and Doug Schepers (W3C)
Planet SVG: Rallying the SVG Community
The W3C SVG Interest Group has been working on a website that provides resources, information and tools for the SVG community. Beyond the traditional services that social websites offer such as forums/blogs/gallery, the website also offers several SVG-specific tools that focus on getting new developers started immediately with SVG. This talk will give an overview of the website as well as an online demo of some of these specific services:- Cleaning SVG Files: the SVG format is extremely flexible and extensible and has a large number of domains in which it can be used, only one of which is the web. It is not uncommon for graphical editors to inject a lot of extra data that is not needed for web pages and applications. PlanetSVG provides a form in which an SVG file can be cleaned up without modifying the visual
- SVG MIME Type checker - one challenge in deploying SVG files for the first time on the web is that web servers have not been configured to serve the right MIME type. PlanetSVG provides a simple form that checks what MIME type a given SVG file is being served
- One-click login to SVG developer IRC channel. There are a lot of people willing to help out new developers on the #svg IRC channel on freenode. IRC can often be intimidating to new users who must usually first install an IRC client, learn how to join channels, IRC conventions. A web interface has been provided on PlanetSVG to let users log into the #svg channel directly in the browser without any plugins/extensions. It is our hope that this lower barrier to entry will make it easier for new developers to seek out advice from the community in real-time.
Links:
Hide Abstract
- Lightning Talks:
- Schiller, Jeff (Motorola, Software Engineer)
- Planet SVG: Rallying the SVG Community:
Show AbstractPlanet SVG: Rallying the SVG Community
Papertopic: SVG Authoring Tools and Techniques
Author(s): Schiller, Jeff (Motorola), Russell, Robert (Late Night PC) and Doug Schepers (W3C)
Planet SVG: Rallying the SVG Community
The W3C SVG Interest Group has been working on a website that provides resources, information and tools for the SVG community. Beyond the traditional services that social websites offer such as forums/blogs/gallery, the website also offers several SVG-specific tools that focus on getting new developers started immediately with SVG. This talk will give an overview of the website as well as an online demo of some of these specific services:- Cleaning SVG Files: the SVG format is extremely flexible and extensible and has a large number of domains in which it can be used, only one of which is the web. It is not uncommon for graphical editors to inject a lot of extra data that is not needed for web pages and applications. PlanetSVG provides a form in which an SVG file can be cleaned up without modifying the visual
- SVG MIME Type checker - one challenge in deploying SVG files for the first time on the web is that web servers have not been configured to serve the right MIME type. PlanetSVG provides a simple form that checks what MIME type a given SVG file is being served
- One-click login to SVG developer IRC channel. There are a lot of people willing to help out new developers on the #svg IRC channel on freenode. IRC can often be intimidating to new users who must usually first install an IRC client, learn how to join channels, IRC conventions. A web interface has been provided on PlanetSVG to let users log into the #svg channel directly in the browser without any plugins/extensions. It is our hope that this lower barrier to entry will make it easier for new developers to seek out advice from the community in real-time.
Links:
Hide Abstract
- Planet SVG: Rallying the SVG Community:
- Schmucker, Hans (University of Applied Sciences, Heidelberg, Student)
- SVG Filters - Shaders for the web:
Show AbstractSVG Filters - Shaders for the web
Transforming huge amounts of data in one go
Papertopic: SVG Authoring Tools and Techniques
Author(s): Schmucker, Hans (University of Applied Sciences, Heidelberg)
SVG Filters - Shaders for the web
The presentation will take a look at how SVG filter programs can be used to very perform different kinds of calculations on huge amounts of data at once.
Filters are often seen as a way to simply apply one of the SVG filter primitives like blur to an image of some kind. And they are, but they're so much more.
Looking at SVG filters from a different perspective
SVG filters are a self contained shading language that can easily be implemented anywhere where an image needs to be processed. Firefox 3.5 introduces SVG filters for HTML, but that's just a start. Think of image editors where with a few clicks even novice users can create stunning new effects and distribute them to other users who can then use them, even if they do not come from a trustworthy source. SVG filters don't actually depend on SVG, making them extremely portable.
The power of SVG filters lies in the fact that filter primitives can be combined to form new "programs". At its core, a typical filter primitive is no different from a call in a normal programming language (complete with arguments). Some primitives even allow you to pass in a second channel, so that the operation can take up to 8 byte-sized arguments which differ from pixel to pixel.
Benefits over Javascript based image processing
Filter primitives are applied to the whole surface at once in native code or even using hardware acceleration, which gives them an important edge over the HTML5 Canvas when it comes to raw speed.
Also, filters are secure. You can safely unleash unverified filter code on a trusted domain without worrying about the consequences.
Combine them with other technologies
However you are not limited to using just either one. Combine them. If a problem isn't solvable with just filters, or only with much overhead, you can still benefit by doing only what's necessary in software and performing the remaining calculations with filters.
Remember that your source images don't have to be static. Use animations or videos with different filters for stunning effects.
Learning to write filters
Writing these filter programs can be challenging as the naming of a filter primitive often suggests a particular graphical effect, when you have to keep in mind the actual mathematical operation taking place. But when you master it, you can write filter programs that outperform any solution implemented in interpreted code 100 to 1, and that's not even considering hardware acceleration.
We'll take a look at how you can express some programs that you would not normally consider for implementation as a filter
- Perspective texture mapping
- Anaglyph 3D rendering from a grayscale video
- Audio visualization from spectrogram data
Outlook
Filters are here today and they are a great opportunity for web developers, but there are still limitations that make creating powerful filters more difficult than it has to be. During the course we'll see how limiting input data and buffering to flat 32bit surfaces creates challenges that currently require a lot of hacking. Hopefully future SVG specs will make room for additional buffers,
Also simple calculations can currently create huge filter chains as there's no way to define even simple equations. We'll take a look at how even a simple extension could create more compact and therefore faster filters.
Links:
- Voxels via SVG filters
- Dynamically texturing a prerendered animation
- Rotating world
- Perspective rendering
Hide Abstract
- SVG Filters - Shaders for the web:
- Schnabel, Bryan (Tektronix, XML Information Architect)
Show Biography
Bryan Schnabel is the XML Information Architect for Tektronix Inc. He is a seasoned XML practitioner. He embraces XML as a portable, scalable, platform, and vendor independent means to best utilize and protect a company’s valuable data. Bryan began as an Information Architect in the Automotive Industry. He solved problems with standards based technology early on, first with SGML, then with XML. He regularly contributes to many open standards, and currently serves as co-chair of the OASIS XLIFF Technical Committee. He holds a Bachelor of Science and Master’s degree from Central Michigan University.
- SVG Processing: Efficient Language Translation:
Show Abstract, Paper (Separate Tab)SVG Processing: Efficient Language Translation
Solving the classic challenge with Open Standards
Papertopic: File Format Conversion
Author(s): Schnabel, Bryan (Tektronix)
Translating text strings in graphics has traditionally been error prone, time consuming, and expensive. Technical Publishers have tried several resourceful, creative ways of getting the job done. Through complex tools, training, and rigorous attention to procedure, people have managed to translate text in graphics. But as soon as any of the key components (personnel, tools, procedures, policies) changes, the whole system is at risk.
The solution is to use Open Standards. With the emergence of SVG, XLIFF, and TMS, an efficient solution is realized. Since SVG (Scalable Vector Graphics) files (http://www.w3.org/Graphics/SVG/) are XML, and since XML-based open standards are now in place to facilitate efficient translation, the challenge has a solution.
Bryan Schnabel will demonstrate, in detail, step by step, how to solve this age-old challenge. Using the OASIS XLIFF (XML Localization Interchange File Format) 1.2 open standard (http://www.oasis-open.org/committees/tc_home.php?wg_abbrev=xliff), and SVG, a concrete solution will be demonstrated. It will be demonstrated how the use of these two open standards increases quality and consistency of translation. The use of these XML formats will show a standardized method, the "extract and merge" approach, a traditional approach for XML documents, adapted for graphics.
It will be shown that using industry supported open standards like XLIFF allows localization service providers to focus on the translation aspect, using localization tools (their core competency), rather than training translators to use complex graphic tools, results in measurable savings in cost and time.
Attendees will see how traditional devices like translation memory can be efficiently harnessed by combining SVG with XLIFF. Additional translation, localization, and internationalization standards will be addressed as well, including LISA (Localization Industry Standard Association, http://www.lisa.org/Homepage.8.0.html), OASIS DITA (Darwin Information Typing Architecture, http://www.oasis-open.org/committees/tc_home.php?wg_abbrev=dita), and W3C ITS (Internationalization Tag Set, http://www.w3.org/International/its/). Attendees will be shown how the use of SVG graphics in technical documentation, in conjunction with powerful XML formats like W3C XHTML (Extensible HyperText Markup Language, http://www.w3.org/TR/xhtml1/), OASIS Docbook (http://www.oasis-open.org/committees/tc_home.php?wg_abbrev=docbook) and DITA can be translated in a standardized way, with support from the toolmakers and localization service providers. This concept will be demonstrated through use of commercial tools, and also through the use of open source tools.
This is a dynamic, nut and bolts, fun presentation. Attendees experience a minimal amount of slides, but the real learning is accelerated through the use of real-world examples and real-time demonstrations. The depth and duration of the demonstrations is easily adapted to the available time, and the direction and wishes of the audience.
Hide Abstract
- SVG Processing: Efficient Language Translation:
- Sledd, Andrew (IKIVO AB)
- SVG Mobile UI and Widgets:
Show AbstractSVG Mobile UI and Widgets
Papertopic: Mobile SVG Solutions
Author(s): Sledd, Andrew (IKIVO AB)
Mobile devices have had SVG capabilities for more than 6 years. Early device capabilities were limited to simple dynamic and static SVG, with limited use cases like background pictures and messaging attachments. Not long thereafter, developers looking for advanced interactive graphically rich application frameworks turned to SVG and many SVG based applications were launched on smartphones such as Mobile TV and rich community portals. Recent advancements in the capabilities of mobile devices have escalated the use of SVG. Today SVG is being used extensively not only for stand alone applications, but also widgets and device UI. These use cases require not only the interactive rich graphical capabilities of SVG but also interaction capabilities with the underlying device data and services. The capability to retrieve device status, the feature to leverage the device storage resources, and the ability to retrieve user data like contact information from the device are elemental in these use cases.
This session presents case studies and device demonstrations showing a mobile telephone UI including widgets, and a Mobile Internet Device UI created with SVG and JavaScript. The advanced capabilities of these user interfaces include 3D and device API. The method of implementing the key capabilities will be described and discussed.
For the expansion and proliferation of these capabilities it is important to establish technology which enables interoperability for implementers and developers alike. With that goal in mind, groups such as the W3C and OMTP are producing and maintaining specifications for standard markup and programming interfaces beyond those specified in SVG. A review of the relevant existing and developing standards covering the relevant capabilities will be presented.
Hide Abstract
- SVG Mobile UI and Widgets:
- Trinh, Anh (San Jose State Grad Student/ Developer)
Show Biography
Anh Trinh is Computer Science graduate student at San Jose State University. He's current working as intern at NASA AMES Research Center. Area of interests includes Software Engineering, Network Programming, SVG, XML, Web technologies, and security
- StatsVG - Visualize statistical data through Vector Graphic:
Show Abstract, Paper (Separate Tab), Presentation (Separate Tab)StatsVG - Visualize statistical data through Vector Graphic
Mapping Classroom Enrollment Occupancy Data By Time
Papertopic: Interactivity and Scripting
Author(s): Trinh, Anh
StatsVG - Visualize statistical data through Vector Graphic
Mapping Classroom Enrollment Occupancy Data By Time
Native SVG-in-browser is used to visualize the enrollment data from San Jose State University (SJSU) 2009 Spring meeting time schedule and building locations. SVG renders a SJSU campus map. Each building is fully or partially gradient filled to show percentage occupancy. At the bottom below the map, there is slider bar with markings from 07:00 to 22:00 representing the class meeting time in hours. When the slider moves, the gradient-fill dynamically update the filled region according to the calculated schedule information data. A click event on a building shows more detailed information about that building. A detail-view, a low-opacity layer representing information will display on top of the map. The detail-view contains a pie chart and textual data related to the building occupancy.
The application also uses Javascript to accomplish interactivity:
- Hiding text element whenever the slider activates
- Bringing up or dismissing the detail view
- Sliding the time-slider
- Updating building gradient-fill
- Updating pie chart
- Update detail-view information
Architecture
1. Preprocessing - data acquisition
2. Post processing - building XML data files
3. Pre-Rendering SVG via Javascript onload()
4. Transforming Inkscape-generated SVG to render and support interactivity via Javascript
5. Javascript Event processing
Some details of each architectural component are given below.
1. Preprocessing - Data Acquisition
XML data is assembled by “scraping” the SJSU official 2009 Spring schedule found at http://info.sjsu.edu/web-dbgen/soc-spring-courses/all-departments.html. The data was pulled and saved into files by a Java program. The Java program implements a web crawler which will fetch pages. Each page presents one course, so the crawler must visit all the departments pages and parse all the HTML pages and save into disk.
2. Post processing - building XML data files
When the Java crawler saves all data into the disk, a Perl script will combine all the department XML data into one big XML file. This one big file will have all the courses in all departments presenting the entire 2009 Spring schedule data.
3. Pre-Rendering SVG via Javascript onload()
During the onload() event, the system will load the XML data file into XML DOM and perform data structuring. The system accesses DOM object and creates an associative array of schedule data.
4. Transforming Inkscape-generated SVG to render and support interactivity via Javascript
I used Inkscape to import SJSU map PDF file in order to obtain exactly shape and scale of buildings. To ease DOM manipulation, I inserted
elements liberally in the .svg file for grouping buildings, text, and unique id attributes for each path and text element. 5. Javascript Event processing
Now the buildings are grouped and id'ed; click on the slider, buildings that are used for class meeting will fill with gradient. On mouse up, the gradient will disappear. The gradient contains two colors which are yellow and blue. The yellow color represents the vacancy while blue one represents the occupancy of the building. When slider moves, Javascript code will update offset value with class occupancy percentage. In addition to the general view of all building's occupancy, users also can activate detail-view mode for more information about a building by clicking in a building area. In detail mode, users are able to view a pie chart representation of the occupancy percentage and textual detail of the building. Information in detail mode also update dynamically as slider moves.
About Anh Trinh
He's a Computer Science graduate student at San Jose State University. He's currently interning at NASA AMES research center. Area of interests include software engineering, networking programming, SVG, XML, web technologies.
Files:
- initial display of the map
- update occupancy on mouse click and drag the time bar
- detail pie chart of a clicked building, detail information on building's occupancy
Hide Abstract
- StatsVG - Visualize statistical data through Vector Graphic:
- Valentin, Bianca (University of Bayreuth)
- Interactive SVG with JSXGraph:
Show Abstract, Paper (Separate Tab)Interactive SVG with JSXGraph
Papertopic: Interactivity and Scripting
Author(s): Valentin, Bianca (University of Bayreuth) and Michael Gerhaeuser (University of Bayreuth)
JSXGraph (http://jsxgraph.org) is a client-side web application/library for
- interactive drawings,
- interactive function plotting,
- interactive charts and data visualization,
- interactive Mathematics: Statistics, Geometry, Calculus
in a web browser.
Visualization is realized with SVG which is supported by most major web browsers. The only notable exception is Microsoft Internet Explorer where JSXGraph uses its own rendering engines based on VML or Silverlight.
The library is completely implemented in JavaScript, no further plug-ins (like Java or Flash) are required. Thus, JSXGraph is browser and platform independent.
JSXGraph is easy to embed and has a small footprint: less than 60 KB if compressed by the web server. JSXGraph is released under the "Lesser GNU General Public License", the source code is available at http://sourceforge.net/projects/jsxgraph.
The main focus of JSXGraph lies on the interactive exploration of scientific constructions and the intended audience are universities and schools. But the library also offers widespread visualization and scripting capabilities which are useful for many other interactive web applications based on data presentation.
JavaScript still has the reputation of being slow. But meanwhile, the execution speed of JavaScript in the web browsers has been improved by some orders of magnitude and speed is still one of the big issues in the competition between the web browsers.
A big advantage over - for example - Java programs is the much reduced download time and the zero initialization time. A further reason for the use of JavaScript is that the future support of Java plug-ins by the web browsers - especially on mobile devices - seems to be more than uncertain.
By now JSXGraph contains objects and methods for
- curve plotting: function graphs, parametric curves, polar curves, data plots, tangents, normals,
- spline interpolation,
- Euclidean Geometry: Points, lines, circles, intersections, perpendicular lines, angles,
- turtle graphics,
- charts,
- modelling: Epidemiology, L-systems in Biology,
- sliders, gliders
- on- and offline reading of files from dynamic geometry software (DGS).
At the moment JSXGraph supports the XML based GEONExT and the European Intergeo file formats. Further file formats are under development.
Since JSXGraph itself is implemented in JavaScript the canonical scripting language for JSXGraph is JavaScript. This eases the integration of interactive graphics in a web page and the connection via AJAX to server based data sources like data bases or ERP systems and mathematical tools like R (Statistics) or Matlab (Numerical Mathematics).
Therefore, almost everything is scriptable.
In our talk we will show the possibilities of JSXGraph and explain implementation hurdles, e.g. speed issues and alternative usage of SVG and VML, and how we solved them.
The wiki pages of the project (http://jsxgraph.uni-bayreuth.de/wiki/) contain many examples and showcases:
- http://jsxgraph.uni-bayreuth.de/wiki/index.php/Category:Examples
- http://jsxgraph.uni-bayreuth.de/wiki/index.php/Showcases
Links:
Hide Abstract
- Interactive SVG with JSXGraph:
- Vangheluwe, Hans (McGill University, Associate Professor)
- Modelling the Reactive Behaviour of SVG-based Scoped User Interfaces with Hierarchically-linked Statecharts:
Show AbstractModelling the Reactive Behaviour of SVG-based Scoped User Interfaces with Hierarchically-linked Statecharts
Papertopic: Interactivity and Scripting
Author(s): Beard, Jacob (McGill University Modelling, Simulation and Design Lab) and Hans Vangheluwe (McGill University)
There are many challenges that developers face during the development of a complex User Interface (UI). Desired behaviour may be autonomous or reactive, and possibly real-time. Each UI component may be required to exhibit a radically different behaviour from that of any other component and the behaviour of components may be inter-related. These complex behavioural relationships between components are often difficult to express, and are even more difficult to encode and maintain.
There are also difficulties related to the development process: the developer must be able to rapidly adapt the structure and behaviour of the UI to changing system requirements. Unfortunately, conventional code-centric approaches fall short. We suggest that a developer should specify the behaviour of a UI using a representation which minimizes "accidental complexity".
Our solution uses Model-Driven Engineering (MDE). By modelling every aspect of the system-to-be-built, at the most appropriate level of abstraction, using the most appropriate formalism(s), it becomes possible to completely capture the behaviour of a UI, to rapidly generate prototype implementations, to easily adapt the UI as project requirements change, and, finally, to synthesize a UI and maintain it.
More specifically, in this paper, we introduce a class of UIs known as Scoped User Interfaces, and illustrate how one may model them using Hierarchically-linked Statecharts (HlS). A Scoped User Interface is one in which reactive visual components (widgets) such as buttons and windows are hierarchically nested. Statecharts is a modelling formalism initially proposed by David Harel as an extension of Finite State Machines. It was intended as a solution for modelling complex, state-based behaviour, and is now included as a part of the OMG Unified Modeling Language (OMG UML) Superstructure specification. HlS applies an actor-based approach to modelling the behaviour of UIs, explicitly modelling each hierarchically-scoped UI component. A default event model that implements hierarchical event capturing and bubbling is used to bind the system together, and allows widgets at the highest level of the hierarchy to exhibit a general behaviour, while widgets deeper in the hierarchy exhibit more specific behaviour.
We have used the techniques described in this paper to develop AToM3-Redux, an experimental, SVG-based visual modelling environment. SVG has provided a complete platform for the development of this application. In our approach, we use the SCCJS compiler to translate our Statechart models to ECMAScript. Because SVG supports scripting interactivity, it has been possible to bind each Statechart instance to a newly-created, SVG-based widget, with minimal "glue" code. The SVG DOM is inherently hierarchical, and was hence used to encode hierarchical relationships between UI components. The SVG event model then, has enabled the hierarchical event handling for arbitrarily complex, dynamically created widgets. Finally, the SVG event model also provides an event "vocabulary" that we have used as triggers in our Statechart models.
The paper will give a step-by-step description of our approach by means of a concrete example, as we illustrate the work we have done to develop, using HlS, an SVG-based environment for visually editing and simulating Statechart models.
Links:
Hide Abstract
- Modelling the Reactive Behaviour of SVG-based Scoped User Interfaces with Hierarchically-linked Statecharts:
- Vibber, Brion (Wikimedia Foundation, CTO)
Show Biography
Brion is the CTO of the not-for-profit Wikimedia Foundation, the organization which maintains Wikipedia and the software and hardware infrastructure underlying its amazing community-driven educational resource development. Having spent a few years in the thick of Wikipedia's software backend, he's seen some scary things -- and some wonderful things!
- SVG in Wikipedia and Wikimedia Commons:
Show Abstract, Presentation (Separate Tab)SVG in Wikipedia and Wikimedia Commons
Benefits, limitations, and potential of SVG in the collaborative web
Papertopic: Server-side SVG Generators and Manipulators
Author(s): Vibber, Brion (Wikimedia Foundation)
Wikimedia Commons hosts over a quarter million freely-licensed SVG graphics alongside four million photos and other raster images. Bolstered by key uses as icons, charts, and maps, SVG graphics are widely used within the Wikimedia Foundation's ecosystem, making up 64% of images used in the English-language Wikipedia edition.
SVG's status as an open standard and the support of the format in both free and commercial illustration packages makes it an ideal format for the community creation of graphics which can be further edited, localized to other languages, and scaled to arbitrary sizes as required without loss of quality.
And yet... even 6 years after SVG 1.1 the most widely used web browser doesn't support it natively, and rendering and markup differences between the browsers, plugins, and rasterizers that do support it mean that display output can be inconsistent, especially when internationalized text adds requirements for complex text layout and fonts with appropriate Unicode coverage.
Wikimedia's infrastructure today allows SVG graphics to be uploaded, edited and placed inline just like raster graphics, but silently rasterizes them to flat PNG images to be served to browsers. This ensures compatibility with Internet Explorer, guarantees a consistent display for all visitors, and frequently reduces download size for images such as highly detailed maps. As a trade-off, the benefits of clean client-side scaling are currently lost, and the potential of SVG to create interactive animations remains untapped. Third-party MediaWiki installations are also burdened with additional dependencies to enable SVG support, adding a rendering package such as librsvg or Batik.
Key interests for current and planned future development include:
* Providing online interfaces for vector graphics editing and localization of label text
* Programmatic data manipulation such as compositing or extraction of objects
* More active support of SVG's localization features such as language switching
* Improved font and text rendering compatibility
* Vector decimation to allow highly-detailed maps and charts to be optimized for reasonable inline download sizes while retaining decent scalability for printing and client-side page zooming
* Better scripting safety verification to allow for interactive graphics without opening cross-site scripting and other security dangers to the site
Hide Abstract
- SVG in Wikipedia and Wikimedia Commons:
- Watt, Jonathan (Software Developer)
Show Biography
Employed by the Mozilla Corporation to work on Mozilla's SVG implementation.
- SVG Activity at Mozilla:
Show AbstractSVG Activity at Mozilla
Current status, work in progress, and demos
Papertopic: SVG Viewer Implementations
Author(s): Watt, Jonathan
This paper will discuss recent SVG developments at Mozilla, including improvements to the SVG implementation as most recently released in Mozilla Firefox 3.5. Future work that is underway or that will shortly be underway will also be discussed, and demos of the new and in-development features will be presented.
In addition to the development work that is ongoing at Mozilla, this paper will explain Mozilla's position on current standards related work and standards work that we would like to see happen. Since the last SVG Open conference, Mozilla has joined the W3C's SVG working group and has been ramping up its involvement in this area.
Finally, the paper will discuss the steps that Mozilla is taking to improve the interoperability and uptake of SVG on the Web.
Hide Abstract
- SVG Activity at Mozilla:
- Withall, Stephen (Self-employed, Systems architect)
Show Biography
From the back cover of my book "Software Requirement Patterns": Stephen Withall has been working as a software professional since 1979, in a range of roles from programmer to chief technical officer. Along the way he has accumulated many years experiencing both the satisfactions and the frustrations of business analysis, systems analysis and specifying requirements. He has worked in diverse environments in companies big and small, in seventeen countries across four continents. The first half of his career found him roaming the world of banking and finance, and the second half (so far) in diverse kinds of e?commerce. He actively maintains his hands-on software development skills. Stephen holds a BSc in Mathematical Sciences from Bristol University, U.K. He lives in Sydney, Australia and he enjoys going to places where few others are. You can reach him at http://www.withallyourequire.com.
- SVG Off Road and Stretched:
Show Abstract, Paper (Separate Tab)SVG Off Road and Stretched
Papertopic: Business Cases and Case Studies
Author(s): Withall, Stephen (Self-employed)
SVG can do more than just display exciting graphic content. SVG can also be the vehicle for widespread use of graphics throughout an otherwise ‘traditional’ software application—alongside and interacting with other types of display components, modified dynamically, and extended with custom elements. Stephen Withall presents an application that does just this: a product to assist business analysts specify the requirements of a system (from which his book “Software Requirement Patterns” is a spin-off).
Taking SVG off road means venturing beyond a dedicated piece of screen real estate where SVG rules—where an SVG document defines everything that’s displayed, and SVG software is in complete control. SVG off road encounters non-SVG content displayed in various ways, and must react sensibly to it. This talk shows the use of SVG-based ‘overlays’ of several types to display graphical material over the top of documents of various kinds—to provide animated guidance on writing a specification, to display feedback from document reviewers, and to animatedly walk through a use case (or workflow). This application can also give PowerPoint-like presentations defined in SVG, which will be demonstrated by using it for the whole of this talk.
SVG off road faces new challenges: moving and adjusting elements as an underlying document changes; dynamically creating SVG documents (sometimes by using a document as a ‘template’ and creating ‘instances’ from it); resizing and repositioning elements when the display window is resized; displaying large quantities of text defined externally; and more complex interaction, event handling and animation environments. (In compensation, this ‘layered’ approach yields major savings in complexity in other parts of the software.)
Meeting all these challenges with standard SVG is difficult (if not impossible), so this application has stretched SVG with a wide range of enhancements. Actually, these are far from the only ways in which it has stretched SVG. The second part of this talk discusses various new elements and other features. But first it considers the main reasons for wanting to extend SVG—because if motivations aren’t clear, results are liable to lack coherence.
The SVG stretchings to be demonstrated here are: richly styled, shaped, multi-lingual text; elements for combining or manipulating shapes (boundary, multiplicity, mosaic and tile); elements for specific shapes (including cloud, cylinder, regular polygon and star); fancy strokes; special kinds of animations; and element positions and sizes defined relative to other objects, using expressions. (A future SVG 2.0 hints it will offer some of these things.)
All of this is built on a wholly home-grown implementation of SVG, and Stephen has a few words to say on the relative merits of such an undertaking. Obviously it involves considerable effort, but once implemented it offers many benefits—especially when you want to stretch it to do things the developers of publicly available implementations (or, indeed, the writers of the SVG standard) never thought of. One conclusion is that it is more practical than even before for organizations to add sophisticated graphics to the software they develop.
Hide Abstract
- SVG Off Road and Stretched:
- Yang, Li (Student)
- Dynamic Shading Algorithm Visualization:
Show Abstract, Paper (Separate Tab)Dynamic Shading Algorithm Visualization
Papertopic: SVG Authoring Tools and Techniques
Author(s): Yang, Li
Visualizing shading algorithms require specialized hardware and software support. Direct-X and OpenGL lack portability and often require specialized libraries. Modern browsers provide limited support for 3D visualization. SVG is a booming technology that is interactive and portable. Combined with JavaScript, a program can visualize 3D shading algorithms. The proposed program implements two Shading algorithms in SVG. The purpose of this paper is the implement a portable method to test shading algorithms. Scalable Vector Graphics renders 2D graphics efficiently, but there is a strong lack of support for 3D visualization. Java, X3D, VRML support 3D visualization, but each requires plug-in or specialized browsers. The solution is a 3D engine developed with JavaScript and SVG. JavaScript is supported by most modern browsers and SVG is an open standard fully/partially supported by the latest versions of Firefox, Opera, Safari and Chrome. JavaScript enables programmers to directly modify the DOM (Document Object Model) with SVG. JavaScript provides flexibility with organizing logic models into objects. 3D graphics implementation in SVG and JavaScript display in most modern browsers, and enable users to modify JavaScript code to enhance functionality. This mechanism enables a 3D shading application to dynamically change shading algorithms. The proposed project provides orthogonal view of mesh models affected by a single point light source. Transformations are outside the scope of this project because the purpose of the project is to show the portability and modifiability of 3D application written in SVG and JavaScript. The mesh loader uses AJAX (Asynchronous JavaScript and XML) to load x, y, z, coordinate points and three point faces. The program implements interactive controls to dynamically change material properties of the model. The project implements two shading algorithms that both rely on the Phong Light Model. The flat shading algorithm uses illumination values calculated from the Phong Light Model to color mesh faces. Cartoon shading algorithm contains a two part algorithm consisting of silhouette and illumination values based on a threshold system.
Files:
Hide Abstract
- Dynamic Shading Algorithm Visualization:
- Zafirovski, Gjokica (Google Inc., UX Designer)
- Rich Media Advertising with SVG and JavaScript:
Show Abstract, Paper (Separate Tab), Presentation (Separate Tab)Rich Media Advertising with SVG and JavaScript
Introducing SVG with HTML5 VIDEO element to the mainstream advertising
Papertopic: Interactivity and Scripting
Author(s): Zafirovski, Gjokica (Google Inc.)
With introducing the CANVAS and VIDEO elements as part of the HTML5 Specification, a new opportunity is open to introduce SVG and web standards as platform for rich media online advertising (interactive and video content in adverts).
The tools and apps build around rich media online advertising provided nowadays are all build around the Flash technology, depending on one vendor, Adobe to provide IDE, API and Frameworks.
This project will present rich media creatives produced using Flash, ActionScript and Flash Video, and show complete equivalent of the same creative produced with SVG, JavaScript, CANVAS and VIDE0 elements.
The aim is to compare latency, file sizes, accessibility, tools and workflows of this two technologies, and hopefully provide blue print to introduce SVG and web standards (HTML, CSS and JavaScript) to the mainstream advertising as equivalent if not better delivery platform.
This idea is long time with me, and I see SVG Open 2009 as a motivator for me to finalize this project during the summer and present it on the conference.
Hide Abstract
- Rich Media Advertising with SVG and JavaScript:
- Zhang, Hugh (Oracle, Senior Software Engineer)
Show Biography
Hugh Zhang works at Oracle as a software engineer in the Data Visualization Tools group, which provides rich graphical components for Oracle's ADF Faces application development framework. Prior to joining Oracle, Hugh received a Bachelors of Science and Masters of Engineering from Cornell University.
- Using SVG in Oracle Business Visualizations:
Show AbstractUsing SVG in Oracle Business Visualizations
How SVG is used to import, export rich business graphics and support advanced, interactive visualizations
Papertopic: Business Cases and Case Studies
Author(s): Hardy, Vincent (Oracle) and Hugh Zhang (Oracle)
This session discusses how SVG is used in different visualization efforts at Oracle. In a first part, this session will discuss the use of SVG as an export format for business graphics, as well as the use of SVG as an import format for inserting custom graphics into visualizations. This first part will present the advantages of using SVG, discuss the issues met and show examples of SVG's usage in Oracle's ADF visualization components, the Data Visualization Tools components. In a second part, the session will present how SVG is leveraged for animated, interactive visualization components to provide features as rich as competing technologies. That part will discuss the pros and cons of using SVG for advanced visualization components, talk about some of the shortcomings and hopes for the future of SVG and the Canvas API.
Hide Abstract
- Using SVG in Oracle Business Visualizations:
