Conference Speakers
Keynotes
SVG Wow 2010
Pushing the envelope of SVG development
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
The focus of this session is on showcasing the many different ways SVG can be used for creating interactive and visually attractive web content, web apps and more!
A range of open web standards that integrate and complement SVG will be examined, in previous years this has touched upon HTML5, CSS3, Widgets, advanced features in SVG such as filters, video and audio as well as other surprises.
Hide Abstract
OpenStreetMap
The challenges and opportunities that OpenStreetMap presents for SVG
George James (George James Software Limited, CEO)
Show Abstract
OpenStreetMap (OSM) is a community created free and open map of the world. Data is collected by volunteers and made available under a share-alike license. With continuous exponential growth it surpasses many commercially available map sources in both extent and level of detail. Uniquely the vector data is seen as the primary output from OSM, rather than a rendered map. This enables everyone to use the data to make maps and to use the data in other innovative and interesting ways.
George became involved in the OpenStreetMap project at a very early stage and contributed some of the early technical innovations as well as proving the concept by vigourously mapping his home town using a cheap GPS unit and a bicycle. As a founding board member of the OpenStreetMap Foundation George has helped the project grow from small beginnings into the global asset that it now is.
George will talk about the origins and growth of the OpenStreetMap phenonema, explain the various toolchains involved, and highlight some the ways that SVG is used. As author of the first map rendered for OSM he'll talk first hand about some of the challenges of rendering maps from OpenStreetMap data and the problems and opportunities that OSM presents for SVG.
Hide Abstract
From Zero to SVG in One Year
SVG 1.1 in Internet Explorer 9
Ted Johnson (Microsoft Corporation, Partner Program Manager, Web Graphics)
Ted Johnson has been involved in the development of end-user graphics applications since 1985 when he joined Aldus Corporation as employee #12. Johnson participated in the design and development of Aldus PageMaker 1.0 for Windows 1.0 and subsequent versions for Macintosh, Windows, and IBM OS/2 Presentation Manager. In 1990, Johnson co-founded Visio Corporation and created Visio, a market-leading business drawing and diagramming program. Microsoft acquired Visio in 2000 and Johnson accepted a role overseeing Visio, Microsoft Project, Publisher, and MapPoint in Microsoft's Office organization. Following the release of the Office 2003 family, Johnson left Microsoft and co-founded Trumba, a Web start-up that created an events calendar publishing system. Johnson rejoined Microsoft in the summer of 2008 to lead the graphics investments for Internet Explorer 9.
Show Abstract
When Johnson attended SVG Open 2009 less than one year ago, no production code had yet been written to support SVG in Internet Explorer 9. In March 2010, Microsoft stunned the SVG community by announcing and demonstrating its GPU-accelerated SVG implementation. Though not complete at the time, the commitment Microsoft exhibited provided further evidence that SVG would indeed become ubiquitous as the next generation of browsers support HTML5.
At SVG Open 2010, Johnson will describe Internet Explorer 9's implementation of SVG and share insights from the team's experience implementing it as part of its GPU-powered HTML5 effort. He will provide an overview of the SVG modules implemented in IE9 with a focus on cross-browser interoperability and demonstrate SVG in various contexts: XHTML documents, HTML5 documents, and standalone SVG files.
Johnson will share 'war stories' from the IE9 implementation experience including a discussion of those features most difficult to implement. He will share what Microsoft would like to see in future SVG versions as SVG becomes an essential part of HTML5 and Web application development.
Hide Abstract
Efficient SVG
Robert Russell (Google, Inc, Developer Programs Engineer)
Rob Russell is a long-time enthusiastic supporter of SVG. As an occasional blogger and a developer on platforms from embedded systems to web servers, he has a unique insight on the changing landscape of software on the web. Rob continues to promote open web standards in practical applications in his role as an engineer at Google supporting external developers on Google APIs.
Show Abstract
As more developers have adopted SVG, questions have shifted from suitability as a format to more subtle questions about the best way to build with SVG in applications where it shines. Best practices are evolving for building applications, compatibility across implementations in different user agents, and for integrating SVG components as moving parts in larger HTML5 applications. The time has come to dive more deeply into efficient SVG applications.
Google has been a part of building the current generation of broadly-adopted SVG applications. Google Maps and Google Docs rely on SVG for interactivity and a robust document format. Google contributions to WebKit are helping to build one of the best open source implementations for rendering SVG. However, it is the community of developers, like the SVG Open community who are building the next generation of domain-specific tools using SVG and the rest of the open web stack.
Rob will compare real and perceived performant SVG coding practices, helping along the conversation around best practices for coding with dynamic SVG.
Hide Abstract
All Presentations
including regular presentations, keynotes and panel discussions
- Andersson, Ola (Ericsson AB)
- SVG for IPTV:
Show Abstract, Paper (Separate Tab), Presentation (Separate Tab)SVG for IPTV
Papertopic: SVG and Digital Television
Author(s): Andersson, Ola (Ericsson AB)
Within the IP Television industry the interest for using solutions based on web technology is strongly increasing. SVG is currently the top requirement from most IPTV operators that want to deliver a rich user experience with a technology that allows customization and is future proof.
This paper gives a brief introduction to IPTV. It explains the rationale behind using web technologies for IPTV and in particular why SVG is an important part of many IPTV solutions. It describes the ongoing IPTV related standardization efforts, in particular OIPF (Open IPTV Forum), and how they include SVG as part of their work.
Finally it addresses some of the missing parts within SVG that are needed to make SVG really useful for IPTV and mentions how Ericsson are working with defining these missing parts.
Hide Abstract
- SVG for IPTV:
- Arguillere, Thibaud (4D SAS, Senior Software Evangelist)
Show Biography
A former emergency medical doctor, Thibaud Arguillère spent many years programming with 4D (http://www.4d.com) and C++ for his own small software engineering company. He joined the 4D R&D team in 2008, and is now Senior Software Evangelist, traveling around the world to demonstrate solutions developed by 4D SAS.
- Mixing Dynamic SVG with User Input:
Show Abstract, Presentation (Separate Tab)Mixing Dynamic SVG with User Input
Dynamic SVG in a desktop application
Papertopic: Workflow for Creating and Using SVG
Author(s): Arguillere, Thibaud (4D SAS), de LACHAUX, Vincent (4D SAS) and Thomas Fitch (4D, Inc.)
Numerous APIs exist which allow developers to build images based on dynamic data. Thanks to the features SVG offers, these images can be interactive and allow users to drill down into that data. There are also tools which empower users to create their own SVG images. By mixing these two different ideas, a new paradigm can be created wherein the user can actively update dynamic data by interacting with an SVG image. This presentation will illustrate the needs, challenges and benefits of building upon dynamic SVG with user input, and demonstrate the concept using existing technologies.
Requirements
A functional workflow for the dynamic generation and subsequent user manipulation of SVG images requires the following:
- An API adapted to the development environment of choice: For SVG to be adopted by more developers, its functions need to be easily accessed programmatically.
- An integrated drawing tool: While a good developer can use the API to create their own SVG drawing/editing tool, providing a plug- and-play solution will open the doors to SVG adoption more quickly.
- Fast SVG rendering and code execution: As everything is dynamically generated, SVG creation and display must happen on the fly.
Benefits
The obvious benefit of dynamic data visualization is that images can truly represent the most up-to-date information with little to no user intervention. By adding interactivity, users can get richer information from an image – embedded links, for example – or add their own annotations or visuals. Finally, this presents an all new way for users to update data: By manipulating the image itself.
Challenges
One of the questions that arises when talking about user-driven, data-manipulating imagery is: How do you limit data control? In other words, one needs to be sure that the user – while being given the power to modify data via an image – cannot destroy or alter sensitive, original data. On the other hand, data transfer speed needs to be high enough so that user changes are instantly validated on the server side for instantaneous updates.
Examples
Recognizing the potential for user-manipulated SVG, there are projects under way to bring it to greater eminence. Raphaël, for example, is a JavaScript library to create and manipulate SVG across browsers, allowing developers to attach JavaScript event handlers to DOM-based graphic objects. Inkscape, an open-source SVG drawing tool, allows users to create links out of SVG content, as recommended by the W3C. Adobe has created an SVG Draw demo (http://www.adobe.com/svg/demos/devtrack/svgdraw.html) for annotating SVG graphics, also based on JavaScript. This begs the question: Is there any solution out there that can do all of the above?
Implementation Demo
To demonstrate SVG’s utility in an enterprise scenario, we will use a 4D application and its SVG capabilities to:
- Dynamically generate a floor-plan for a construction project
- Display various fixtures and elements (sinks, faucets, etc.) as interactive SVG with rich information
- Allow the user to move or change elements and make notes
- Save these changes to data
- Send the SVG to contractors in the field via email or Web.
Hide Abstract
- Mixing Dynamic SVG with User Input:
- Baek, Nakhoon (Kyungpook National University, professor)
- Accelerating SVG Tiny with multimedia hardware on mobile phones:
Show Abstract, Paper (Separate Tab)Accelerating SVG Tiny with multimedia hardware on mobile phones
Papertopic: Mobile SVG Solutions
Author(s): Baek, Nakhoon (Kyungpook National University), Lee, Hwanyong (HUONE Inc.), Lee, Inkyun (HUONE) and Jiyoung Yoon (Huone)
Hardware acceleration of the SVG mobile player is required for larger screens and better user experiences. Currently, a feasible way of this acceleration would be realized on the OpenGL, OpenGL ES or OpenVG hardware, while these high-end hardware chips are so expensive and need much higher power consumption. In this paper, we suggest another cost-effective way of accelerating SVG mobile players, based on the wide-spread and inexpensive multimedia hardware of mobile phones. We first accelerated OpenVG with the fundamental features of multimedia hardware including bit-block transfer, image processing and blending operations, and then modified the SVG mobile player to use these accelerated OpenVG features. Our final implementation shows remarkable performance enhancement for displaying vector contents and impressive enhancements for displaying bitmap contents. Reducing a great amount of CPU work load is another important advantage of our implementation, and now CPU can be actively used for other tasks. Conclusively, our implementation delivers much better performance and reduced CPU work load to the SVG mobile players, without any additional hardware to the mobile phone devices.
Hide Abstract
- Accelerating SVG Tiny with multimedia hardware on mobile phones:
- Bah, Tavmjong
Show Biography
Inkscape developer and documenter. Author of "Inkscape: Guide to a Vector Drawing Program."
- Drawing Freely with Inkscape:
Show AbstractDrawing Freely with Inkscape
Presentation of Inkscape 0.48 and plans for the future.
Papertopic: SVG Authoring Tools and Techniques
Author(s): Bah, Tavmjong
I will present an overview of Inkscape, an SVG drawing program, focusing on the new features in the soon to be released version 0.48. These features include an overhauled Node Tool, a new Spray Tool, and a new Text toolbar. I will also cover Inkscape's future plans. These include the 2010 Google Summer of Code projects such as implementing Cairo-based rendering and adding Power Strokes (a Live-Path-Effect), as well as the implementation of Diffusion Curves for smooth color transitions. Finally, I will give an Inkscape prospective on the SVG standards work.
Links:
Hide Abstract
- Graphical Effects Beyond SVG 1.1:
Show AbstractGraphical Effects Beyond SVG 1.1
Papertopic: Panel Discussions
Author(s): Neumann, Andreas (City of Uster), Lilley, Chris (W3C), Schepers, Doug (W3C) and Tavmjong Bah
Panelists will briefly introduce some advanced topics that may be released as modules for SVG 2.0. Among others, the following topics will be covered: "vector effects", "SVG parameters", advanced markers or the extension of the "path" elements with mathematical construction methods. Tav will discuss potential enhancements of the SVG language from the perspective of the Inkscape team, that works on an SVG authoring tool. Some of the topics are already in draft state, some are just ideas.
The goal is to detect missing pieces and useful additions and to gather use cases for them. In addition, technical issues around the proposal will be discussed or if the problem can be solved with existing SVG 1.1 mechanisms.
Attendees may prepare by reading the following already existing resources:
Hide Abstract
- Drawing Freely with Inkscape:
- Beard, Jacob (McGill University, Master's Student)
- Developing a Statechart-to-ECMAScript Compiler Optimized for SVG User Interface Development for the World Wide Web:
Show Abstract, Paper (Separate Tab), Presentation (Separate Tab)Developing a Statechart-to-ECMAScript Compiler Optimized for SVG User Interface Development for the World Wide Web
Papertopic: Interactivity and Scripting
Author(s): Beard, Jacob (McGill University) and Hans Vangheluwe (University of Antwerp and McGill University)
There are many challenges that software developers face during the development of complex User Interfaces (UIs). 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.
A solution may be found in Model-Driven Engineering. In particular, Statecharts, a formalism for describing complex, reactive, timed, state-based behaviour, is highly suited to model UI behaviour.
At the same time, SVG, in combination with ECMAScript is becoming increasingly popular as a platform for application development. The ECMAScript language is used to implement interactivity and dynamic behaviour in SVG visual objects. It is thus possible to create browser-based, SVG UIs which are rich in both their visual appearance and in their interactive behaviour.
A Statechart-to-ECMAScript compiler allows developers of SVG+ECMAScript-based web applications to use Statecharts to describe the behaviour of their UIs, followed by simulation and application synthesis.
Statecharts was developed in order to be intuitive for modellers. Translating Statechart models correctly into ECMAScript is a nontrivial task however. A Statecharts compilation strategy must choose how to encode the various features of the Statecharts semantics, including: Events, Event Parameters, States, Transitions, Event Dispatch, State Hierarchy, Orthogonality, History, Actions and Guards. Additionally, it is desirable to optimize target code for execution speed, memory usage and compiled code size, all of which are important in the development of rich UIs, often running in constrained environments such as a browser on a mobile device.
Because ECMAScript is a flexible, dynamic, multi-paradigm language, the space of possible Statechart compilation strategies is quite large. In general, it is desirable to map the high-level features of Statecharts onto the high-level language features of ECMAScript. Additionally, it is important to take into consideration the constraints imposed by the Web browser environment.
This paper has three goals. The first goal is to discuss four strategies that may be employed for implementing Statecharts in ECMAScript, and the tradeoffs that each approach entails with respect to execution speed, memory usage, and compiled code size. Second, it will be shown how these techniques influenced the development of our new Statechart-to-ECMAScript compiler. Finally, the paper will demonstrate how the Statechart-to-ECMAScript compiler may be used to accelerate the development of fast, robust, and richly interactive SVG UIs.
Hide Abstract
- Developing a Statechart-to-ECMAScript Compiler Optimized for SVG User Interface Development for the World Wide Web:
- Bellessort, Romain (Canon CRF)
- Compressing SVG with EXI:
Show AbstractCompressing SVG with EXI
Papertopic: Mobile SVG Solutions
Author(s): Fablet, Youenn (Canon Research France), Fujisawa, Jun (Canon, Inc.), Ruellan, Hervé (Canon Research Centre France SAS), Bellessort, Romain (Canon CRF) and Anthony Grasso (Canon)
EXI is a binary format for encoding XML Infosets. It is currently in Candidate Recommendation, one of the last steps of the W3C standardization process. The main goal of this format is to provide very good compaction for a wide range of XML documents, applications and devices. To meet this goal, several encoding options are defined within the EXI format. Those encoding options must be selected with care to meet the requirements of an application in terms of compression, processing efficiency and memory usage.
This study describes the possibilities and achievements obtained by the EXI format for SVG applications. The impacts of the encoding options, in particular schema-less and schema-informed encoding (i.e. whether schema information is available) and compression (i.e. a further generic compression step is applied on the encoded data) are evaluated in this context.
Comparison with existing technologies and practices (SVGZ and BiMSVG) is also conducted in the study to show the strengths and weaknesses of the EXI technology applied to SVG. While clearly being an improvement over SVGZ, EXI, in its most interoperable form and without the use of compression option, is less compact than BiMSVG. Indeed, BiMSVG has built-in support for very efficient encoding of SVG textual content, whereas the most interoperable form of EXI only relies on schema information. However, as EXI enables the definition of built-in data types, the addition of specific SVG support to an EXI processor is evaluated in the study, demonstrating largely improved results.
This study also highlights specific benefits and issues: interoperability (lack of a convenient well-known XML Schema for SVG document encoding, SVG versions and modules), impact of the compression option on SVG progressive rendering, usefulness of features like schema deviation support (i.e. enabling the efficient encoding of items not described in the schema), self-contained elements (i.e. encoding parts of the SVG document independently of each other) or datatype representation map (i.e. mapping dedicated codecs to specific SVG textual content).
To conclude the study, recommendations on the best use of EXI for SVG (notably for both open and closed environments) and a look at the future are made. SVG 2.0 being on the way, some features like the definition of a more structured syntax for some SVG constructs (path or animation elements notably) have a very positive impact on the compaction results. This is assessed within the study. The study also raised questions for which the SVG community feedback is sought. Is there a need for a common compact format for all SVG applications? Is there a need to define an interoperable EXI SVG support? Should SVG 2.0 syntax be assessed in terms of EXI compaction results? Is there a need to define a common SVG schema for EXI processors? How should be handled the different SVG versions (1.0, 1.1, 1.2 and future 2.0)?
Hide Abstract
- Compressing SVG with EXI:
- Bovens, Andreas (Opera Software, Group Leader Developer Relations)
- SVG in the Opera browser:
Show AbstractSVG in the Opera browser
Papertopic: SVG Viewer Implementations
Author(s): Bovens, Andreas (Opera Software)
Over the last couple of years, Opera has been committed to implementing SVG in its browser, making it an excellent tool for SVG viewing. In addition, the built-in Opera Dragonfly developer tools turn it into a powerful debugging environment as well.
In this presentation, I will give an overview of the status of Opera's SVG implementation on desktop and mobile, and introduce some of the latest changes to the Opera Presto engine.
I will also explore and demo how SVG can be used in combination with other technologies present in the Opera browser, such as CSS3, widgets and more, and showcase how to debug SVG on desktop and mobile using Opera's developer tools.
Hide Abstract
- SVG in the Opera browser:
- Chi, Guobin (South China Normal University, Vice Chairman of Academic Board of Spatial Information Research Center)
- Teaching Multimedia Course by using SVG:
Show AbstractTeaching Multimedia Course by using SVG
Papertopic: SVG for Multimedia Presentations
Author(s): Chi, Guobin (South China Normal University), LI, Yan (South China Normal University), LI, Hui (School of Computer, South China Normal University) and Xingfang Wang (School of Computer, South China Normal University)
Multimedia is media and content that uses a combination of different content forms. Teaching the basic characteristics of media in the Multimedia course is more theory-oriented and designed to give students fundamental knowledge of how digital data is stored, digital media are created and how information is transmitted over a network. To cement these concepts students are given hands-on experiences. Usually, teaching this part of the media in the course is broken into five sections (text, images (include graphics), animation, audio and video) each with a theoretical and practical component. In order to fit the new development of delivery multimedia in network, SVG was involved in teaching basic concepts of five media.
As is well known to all, SVG (Scalable Vector Graphics) is an open standard enabling high quality, dynamic, interactive, stylable graphic and delivering over the Web and wireless communication and recommended by W3C. It can also support the text, image, animation, audio and video except the graphics using accessible, human-readable XML. Therefore, we introduced it into the curriculum design of multimedia system course that bridges the gap between digital media and programmers for the students from both software engineering and digital media with digital art. The project develops curriculum material including a teaching material for oral presentation and a studying website of SVG subject.
The teaching material is arranged around a Primer of material relevant to both computer science and digital art students for a bilingual course of multimedia system; an advanced Computer Science (CS) Module emphasizing the mathematics and technology underlying digital media; and an advanced Art Module emphasizing aesthetics and design. The learning units of the media characteristics mainly focused on topic areas are digital graphics, image and color model, text, audio, video and multimedia programming etc. And the studying website was developed as a part of the bilingual course of multimedia system in order to improve Student Learning through the Use of Web Simulation Activities and Case Studies in Multimedia Programming". The Web material is divided in a fine-grained manner into recombined topics, interactive exercises and demonstrations. Through the studying Website of the SVG subject, it introduces the basic concepts of media and programming for multimedia system, students will learn the principles of object oriented programming and how to create scripts for the manipulation of video, graphics, image and text to construct a complete multimedia presentation or system.
In the project, the curriculum was redesigned in three core courses in the Multimedia Programming, Multimedia storing and Networking, and Multimedia Applications. Historically, the students have had difficulty learning the basic concepts, and then applying these concepts and programming to the process of developing their own projects. Thus, the project also addresses these issues by adapting and implementing exemplary educational materials and pedagogical strategies to revise the three core courses of the major mentioned above. At the same time, as a part of our project, a tutoring program and a faculty development SVG script1ing were instituted to extend student learning and ensure integration of the newly developed courseware into the teaching practices of the faculty. The course guides students through developing applications and also introduces them to programming in a networked and multiple user environments with SVG JAVA Scripts and SVG Media Server. The SVG Media Server is used to provide the multiple user environments and allow the students to build on their Action Script skills from the Multimedia Programming class. To help explain the concepts in the class and to link them to real-world applications, the Case Study method developed at the multiple choice in their daily life and own knowledge for Case Study Teaching in Science is used.
The case studies are divided into two parts including the monomial or validated experiment and integrated experiment. The purpose of the former one just lets students familiarized with the document format of SVG, storing solution, drawing approaches and scripting of SVG basic graphic elements such as line, rectangle, circle, ellipse, polygon and polyline etc.; And understanding the media characteristics and interactivity of SVG and creating interactive animation. These monomial experiments are involved the basic knowledge of computer graphics, animation, audio and video etc. Students are asked to make a creative and original works thus the topics of the experiment are not limited. The integrated experiment try to make a story of the multimedia project in which a SVG work must be included in the presentation or system.
As a result, the new knowledge and technique of SVG introduces to the students as a special lecture in the course of multimedia system, in which students can have 1) a systemic and in depth studying platform with the studying Website of SVG subject and related courseware; 2）A combination of SVG and basic concepts of media, it enhances the departed knowledge and technique during the study. 3) Especially, it is very important to study the new technique such as SVG through practice. In conclusion, new technology is in progress with each passing day, SVG introduces into the multimedia system course that is a tendency to promote teaching quality and an important part of teaching reformation in teaching multimedia course.
KEYWORDS: Multimedia System Course, SVG, Text, Animation, Graphics, and moving pictures
Hide Abstract
- 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 (South China Normal University) and Guobin Chi (South China Normal University)
A SVG WebGIS is a studying hotspot in recent years, and many people try to make a XML-GML-SVG solution to develop a WebGIS. 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 side will be sent to the server side for executing and answering. Obviously, when a lot of concurrent user requests occurred, the efficiency of the system must be slowed down sharply. And then, because of 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 and decorating styles. Whereas, SVG is defined as a graphic standard in the network environment it can not be properly represented the spatial information. After SVG is extended its representation of spatial information such as map position, map analysis, map decoration and its data structure it can be used to satisfy the characteristics of spatial information (We have presented in former conference, 2008).
Even so, there is still one more problem met in developing procedure, which is how to update or change datasets for various projects in the system of the SVG WebGIS. This means that it is important to develop an architecture of spatial service system and an applied framework of SVG WebGIS in order to organize all the definitions, functions and extensions of SVG to fit or update for various applications after SVG (Scalable Vector Graphics) specification is extended the representation of spatial information. This paper proposed a SVG standardized document as a framework to implement a WebGIS project on the client side. It proceeds with using the SVG-based spatial representation model to support a complete representation of spatial information for SVG first, and then a SVG standardized document is defined to a spatial delivery framework on the client side of the system. This framework is regarded to be SVG WebGIS system or a project which can be used to execute all the functionalities such as: defining map position, transforming map projection, spatial analyzing of the maps, and decorating maps etc. Users can only prepare or transform their data according to the standardized document of SVG spatial model, thus, just update or load their own spatial data into the framework, and then, they can implement the system with all the functions mentioned above. In order to give a complete solution it is also important to mention some storage strategies such as SVG visualizing database and the standardized document of GML application schema and its management needed to be improved the efficiency of the system. Finally, the workflow of a case study is showed by using the SVG standardized document for implementing 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.
Keywords: SVG WebGIS; SVG Standardized document; spatial information, GML data module
Hide Abstract
- Teaching Multimedia Course by using SVG:
- Colbrant, Audrey (INRIA)
- Sound Objects for SVG:
Show AbstractSound Objects for SVG
Papertopic: Mobile SVG Solutions
Author(s): Lemordant, jacques (INRIA), Colbrant, Audrey (INRIA), Razafimahazo, Mathieu (Inria) and Yohan Lasorsa
Sound Objects for SVG
A.Colbrant, Y.Lasorsa, J.Lemordant, M.Razafimahazo
EPI WAM, INRIA, http://wam.inrialpes.fr
A2ML and Sound Objects
A sound object [1] is a time structure of audio chunks whose duration is on the time scale of 100 ms to several seconds. These sound objects have heterogeneous and time-varying properties. Sound objects, also called audio cues, are the basic elements of any format for interactive audio. We have designed an XML language (A2ML[8]) for interactive audio on mobiles which offers, concerning the sequencing of sounds, a level of capabilities similar to that of iXMF, the interactive audio file format defined by the Interactive Audio Special Interest Group (IASIG) [2]. A2ML uses SMIL [3] timing attributes to control sound objects and supports not only sequencing like iXMF but also 3D sound rendering and declarative parameters's animation, DSP and positional parameters, by embedding the SMIL animation module. Like in a traditional mixing console, mix groups can be used to regroup multiple cues and apply mix parameters to all of them at the same time.
SVG and TCDL Dispatching language
We have to find a way to transfer events in the SVG world into cue events. We don’t want sound objects to be positioned in the SVG world but activated indirectly through events. This is done through TCDL, a Tag-based Cue Dispatching Language, reminiscent from NVDL (Namespace-based Validation Dispatching Language) [4]. Requests for instanciation of sound objects are done through TCDL. As TCDL allows you to build groups of sound objects, selective rendering of sound layers is possible depending on the user's preferences. Then A2ML can be thought as an audio style sheet for SVG, this separation of modeling and audio rendering being similar to what is done for the web of documents with HTML and CSS style sheets.
Sound Manager
TCDL sends requests to a sound manager with A2ML reading capability. The sound manager’s response to a given cue instantiation may be simple, such as playing or halting a 3D sound source, or it may be complex, such as dynamically manipulating various DSP parameters over time. The sound manager is also offering an API through which all instance parameters can be manipulated such as positions of the sound sources and the auditor. An A2ML sound manager for the iPhone has been implemented. This sound manager will be ported to OpenSymbian and Android phones when OpenSL ES [5] will be available.
SVG-A2ML Applications
We will demonstrate two kinds of mobile applications running on the iPhone based on one hand on WebKit framework for the SVG part, and on the other hand on FMOD API for the A2ML part. The first one will be an interactive audio-visual jungle and the second one an indoor guidance of visually impaired people:
. The construction of an A2ML sound model for an interactive jungle is explained in An Interactive Audio System for Mobile [6]. We will show how this A2ML sound model can be used with an SVG model of a jungle. The glue between these two similar languages is done through rules expressed in TCDL which are activated by SVG DOM Events.
. The sonification of an indoor SVG map [8] for the guidance of visually impaired people will be explained and we will show how SVG SMIL animations can be used in conjunction with A2ML SMIL animations allowing us to test and adjust the sound mixing parameters.
[1] Sound Objects, based on Pierre Schaeffer’s work, http://en.wikipedia.org/wiki/Pierre_Schaeffer
[2] Interactive XMF, Interactive Audio Special Interest Group, http://www.iasig.org./wg/ixwg/
[3] Synchronized Multimedia Integration Language (SMIL 2.1), W3C, http://www.w3.org/TR/SMIL2/
[4] NVDL (Namespace-based Validation Dispatching Language), http://www.nvdl.org
[5] OpenSL ES, http://www.khronos.org/opensles/
[6] An Interactive Audio System for Mobile. Yohan Lasorsa, Jacques Lemordant, 127th AES Convention.
[7] Augmented Reality Audio Editing, Jacques Lemordant, Yohan Lasorsa, 128th AES Convention.
[8] A2ML specification, https://gforge.inria.fr/projects/iaudio
Hide Abstract
- Sound Objects for SVG:
- Concolato, Cyril
- SVG Electronic Program Guides:
Show Abstract, Presentation (Separate Tab)SVG Electronic Program Guides
Papertopic: SVG and Digital Television
Author(s): Concolato, Cyril
With the development of convergent video codecs such as MPEG-4 AVC|H.264, it is now possible to view television progams on many types of devices, including mobile devices (e.g. iPhone). However, given the high number of available television programs, electronic program guides are required. There are many ways to provide electronic program guides applications on mobile devices. One way is to develop and deploy new native applications on each of the mobile plateforms (e.g. iPhone, Android, Windows Mobile). Another way is to rely on convergent Web standards such as SVG to leverage already deployed browsers. Following this second way, this paper presents the results of some investigations and experiments for the display of EPG data using SVG. In particular, we investigated different ways to generate and deliver EPG data. One traditional approach uses AJAX and SVG. On the client, some Javascript code pulls some XML representing the EPG data from a server and converts it into presentable SVG. Another approach consists in directly streaming SVG data, using 3GPP DIMS RTP format, to the client. We report on those two approaches showing the benefits and drawbacks of each. Finally, we demonstrate the EPG application on different clients such as PC equiped with GPAC or Opera, iPhone using Safari.
Hide Abstract
- SVG Electronic Program Guides:
- Connan, Christophe (SMA Netagis, Ingénieur conception)
- Links between SVG and open or free tools in an online GIS:
Show Abstract, Paper (Separate Tab), Presentation (Separate Tab)Links between SVG and open or free tools in an online GIS
Papertopic: SVG for Webmapping and Online GIS/GML
Author(s): Connan, Christophe (SMA Netagis)
Introduction : SVG and GIS, external tools.
This presentation will start with a quick explanation about the choice to use SVG as a displaying tool in a online GIS (easy generation, vector/raster displaying, scripting, free technology...). This introduction will also underline the central place of SVG in such type of software architecture and the potentials links between SVG and others open or free tools.
SVG / LAMP : A server side story.
LAMP (for Linux-Apache-Mysql-Php) is a solid, free and easily installable stack to build the SVG generator that will be use for webmapping. SVG fragments are created by PHP scripts from datas extracted from a MySQL database. Various PHP libraries can be used to manipulate SVG as text or as DOM element. The LAMP architecture also allows transmitting the generated SVG toward the client using HTML protocol.
SVG / Mapserver : If you want something done right, let the others doing it themselves.
Mapserver is a free software – its first use is to generate geo-localized images from bigger images or GIS files and databases. Depending on the layers displayed in the SVG and on the position of the map, the images urls are generated and sent to mapserver. The resulting image is then inserted in the svg document.
SVG / Batik : An useful but strict rasterizer.
It is sometimes difficult to re-use generated svg once it has been parsed and displayed by the client svg-viewer, especially when you need a bitmap picture. In this case it’s possible to use a rasterizering tool. The one we illustrate here is the Batik Rasterizer. Batik is a Java based program that procures tools to manipulate SVG documents.
SVG / Viewers and plugins : Doing everything but not with everything.
There are many tools to display svg in a web browser but they are not all equals. One objective during the implementation of a SVG based GIS is to find the good SVG viewer with enough capabilities (display or script) compatible with the most of users’ materials. Then multiples scripts can be written to add interactivity to the map like zooms, pan or client sided svg creation
Case studie : Generating a A0 PDF document.
A good way to summarize this presentation is to show a complete example. We will generate a PDF document using a SVG based GIS and the four tools listed above.
Conclusion : Others tools, advantages and drawbacks.
Quick presentation of few others free and opens tools that can be used with SVG. Highlighting of multiples possibilities but warning about the difficulties and incompatibilities that can be encountered.
Hide Abstract
- Links between SVG and open or free tools in an online GIS:
- Couthures, Alain (<agenceXML>)
Show Biography
XML/XSLT/XForms Expert Project owner of XSLTForms (open source client-side XForms implementation embedded in MarkLogic Server and eXistdb) Invited Expert at XML Prague 2010 Twitter Account: AlainCouthures
- Dynamic SVG graphs for XForms:
Show Abstract, Paper (Separate Tab), Presentation (Separate Tab)Dynamic SVG graphs for XForms
Papertopic: Business Cases and Case Studies
Author(s): Couthures, Alain (<agenceXML>)
Context
XForms (XForms 1.1 is a W3C Recommendation since October 20th 2009) is very powerful for writing rich forms for effective web applications and the XRX architecture (http://en.wikibooks.org/wiki/XRX) is the perfect fit for a full XML approach with native XML databases.
Today, there are a lot of small, or not that small, applications built with spreadsheets products or small frameworks with an embedded database engine and they integrate a graph facility. Any business application is providing pie-charts, histograms,...
Use of SVG with XForms is to be considered for having the same level of presentation from user point of view.
XSLTForms: an open source XForms client-side implementation
Based on XSLT 1.0 and Javascript, XSLTForms (http://www.agencexml.com/xsltforms) is a cross-browser XForms solution. It can easily be extended for different purposes.
From dynamic graph data to SVG image
Graph2svg product (http://graph2svg.jinak.cz/about_en.html ; http://www.dpawson.co.uk/graph2svg/) is a convenient way to obtain graphs with a spreadsheet quality from minimal data in XML format. Graph2svg is composed of stylesheets originally written in XSLT 2.0. Three kinds of graphs are defined: one-serie, multi-series and curves.
SVG support in browsers
Native SVG support in browsers is good enough for that purpose except in Internet Explorer which now has VML and XAML (via SilverLight) instead. A Flash solution (such as SVGWeb) can also be considered for Internet Explorer. svg2xaml conversion already exists as an XSLT 1.0 stylesheet (http://sanpaku72.blogspot.com/2007/09/having-fun-with-xaml-silverlight-and.html) to be improved for text rendering.
SVG and XForms
XForms usually comes with a host language. Even if the XForms Recommendation considers (X)HTML and SVG, implementations are now available only with (X)HTML.
Nevertheless, SVG can be considered as an image format for (X)HTML.
Dynamic data are stored as instances in XForms, so SVG images can. Instances can be loaded and submitted. Instance nodes can be added, removed, edited or displayed. The binding mechanism allows to calculate node values. Actions can also be performed according to events (DOMActivate, DOMFocusIn, xforms-value-changed,…).
xf:output control element in XForms comes with an attribute named "mediatype" allowing to render, in principle, not just text but also (X)HTML elements, binary images or any kind of element as (X)HTML object element can. The value itself has to be inline text or uri via an src attribute.
Required XForms extensions
First, a serialize() XPath extension function is required to serialize SVG data instance into text.
For a rewritten graph2svg client-side XSLT 1.0 transformation, a transform() XPath extension is also required.
Implementation in XSLTForms
- add serialize() function
- add mediatype="image/svg+xml" support for browsers via OBJECT element in HTML and directly in XHTML
- improve svg2xaml.xsl stylesheet and call it for Internet Explorer support
- convert graph2svg XSLT 2.0 stylesheets into XSLT 1.0 stylesheets defining math functions, rewriting complex XPath 2.0 expressions,...
- add transform() function
- illustrate with different kinds of graphs with some XForms controls interactions
Hide Abstract
- Dynamic SVG graphs for XForms:
- 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
David Dailey has been working with SVG since about 2003. He previously held appointments at Williams College, Vassar, and the Universities of Alaska, Tulsa, and Wyoming. In addition to SVG, his research interests include graph theory, semantics and cognition.
- A proposal for adding declarative drawing to SVG:
Show Abstract, Paper (Separate Tab)A proposal for adding declarative drawing to SVG
<replicate>:space = <animate>:time (approximately)
Papertopic: Graphic Design with SVG
Author(s): Dailey, David (Slippery Rock University) and Eric Elder (Slippery Rock University)
This paper will focus upon recent investigations into the possibility of extending the SVG spec to include a <replicate> tag for the purposes of extending functionality into three primary areas: 1. richer classes of gradients, 2. extensions to new classes of patterns and 3. new types of 2.5 dimensional objects. The <replicate> tag (and allied tags like <replicateTransform> and <replicateMotion>) are seen as having a similar relationship to 2D space that <animate> and its cousins from the SMIL family have to time. That is, <replicate> can be used to perform declarative construction of clusters of related shapes.
The paper will present experiments and suggestions concerning plausible syntax, a proof-of-concept involving the implementation in JavaScript of some of these ideas, lots of visual examples to illustrate the power of such a construct, and speculation about how <replicate> might be implemented and how it might combine with other aspects of SVG like gradients, groups, animation, the DOM, and with other instances of <replicate> as in nesting.
Various discussions concerning extension of the class of gradients available to SVG have taken place over the years both within the SVG WG, at conferences, in discussion lists and in private conversations. A variety of approaches have been outlined varying from experiments with gradients that are neither linear nor radial, to proposed gradients that would behave like contour maps, to diffusion curves. All share a frustration with the current limited set and with the difficulty of extending those (even via script) to richer classes. Much of the current proposal is based on analogy to how SMIL allows declarative animation of objects over time. Let us allow declarative replication of objects over space.
SMIL enables objects to change attributes like opacity, color, size, shape and location over time. Suppose instead of changing the attributes of a single object, we were to superimpose freeze frames of those changes atop one another in the drawing space, This is what <replicate> is intended for. While we may vary several attributes at once of the same object using SMIL, and each of these attributes may have its own timing frequency, spatial replication requires drawing an object at certain intervals, hence requiring a synchronization and flattening of the temporal diversity. That is, while we might replicate and interpolate several attributes of any object as multiple snapshots of it are taken, all attributes will be present during each of those snapshots. Hence, rather than borrowing syntax from animate that would suggest:
<object>
<replicate attributeName="P" spatialfrequency="7" values="x,y,z"/>
<replicate attributeName="Q" spatialfrequency="12" values="a,b,c"/>
</object>
as it is done with the <animate> tag, the spatialfrequecy or repeatCount of snapshots will remain constant for all attributes being varied by the author. That is, the syntax of the examples, I have explored follows the following paradigm (resembling that of filters somewhat) instead:
<object>
<replicate repeatCount="12">
<replicateAttribute attributeName="P" values="x,y,z"/>
<replicateAttribute attributeName="Q" values="a,b,c"/>
</replicate>
</object>
That is, all attributes will be present during each snapshot made of the object.
I will present examples of replications of objects by varying their x and y positions, changing their colors, their sizes and shapes and show results of investigations of how these types of variations can interact with gradients, patterns, animations and filters.
Already, I have accumulated a good amount of evidence that this class of declarative drawing would indeed add considerable diverseness and richness to SVG. It will also be argued that because of the direct parallels to SMIL, a) many browsers will already have some of the relevant code base developed b) authors conversant with SMIL will find its acquisition easy c) that code written using such tags will be remarkable concise and succinct, and d) that development time for rich, complex and useful graphics may be shortened as a result.
Links:
Hide Abstract
- Generating Random SVG Elements in Polynomial Time:
Show AbstractGenerating Random SVG Elements in Polynomial Time
Papertopic: Graphic Design with SVG
Author(s): Whitfield, Deborah (Slippery Rock University), Dailey, David (Slippery Rock University) and George Shirk
Generating Random SVG Elements in Polynomial Time
Dr. Deborah Whitfield (deborah.whitfield@sru.edu)
Dr. David Dailey (david.dailey@sru.edu)
Mr. George Shirk (gws9396@sru.edu)
The ability to generate dynamic graphical content is a major asset of SVG. Accordingly, a natural question that has caught the attention of computer scientists for some time is how to efficiently generate "interesting" random shapes. The generation of random shapes could be used to mimic scenery found in nature which appears to the human eye to be truly random. Trees grow at apparently random angles, water bodies such as lakes, and oceans have random contours edges. Furthermore, streams have unusual edges and meander randomly. Random polygons with a large number of edges can be smoothed, filtered and given gradients to resemble natural entities such as clouds, lakes and land formations. An efficient algorithm for generating poly-gons has been created and implemented in SVG. The paper will demonstrate its use to create random shapes.
The SVG code is implemented so that the user simply needs to select the number of points and the bounding size of the n-gon to be created. The algorithm is provably random - it can generate any possible n-gon within the specified bounding box. Furthermore, it is fair and representative - it does not tend toward a typical shape as other techniques do (e.g., convex hull, star-shaped polygons). Unlike other techniques (Auer, Held), it does not require a given set of vertices, but rather generates the vertices randomly as the polygon is constructed. Additionally, taking advantage of newly discovered methods (Dailey & Whitfield), it draws these polygons in time polynomially related to the number of vertices, unlike the previous exponential-time techniques that have been explored for this problem from a given set of vertices.
This paper will introduce the algorithm and its implementation, and provide numerous examples of the utility of the technique. The technique may be used for creating interesting random shapes and elements of nature. SVG gradients, filters, noise, and patterns are used to make the dynamic images more realistic. In addition, the polygons can be smoothed using cubic splines and Bezier curves. The authors intend to extend this work to improve the efficiency of the algorithm for generating random polygons.
Hide Abstract
- A proposal for adding declarative drawing to SVG:
- Damjanovic, Andja (IPAK Institute, researcher)
Show Biography
Afer working in industry and service sector A. Damjanovic started to work as researcher at IPAK institute working on project with young people, helping them to learn easier and better. She is strongly interested to change the education of young people with smart use of technologies.
- Use of SVG in Art Education:
Show AbstractUse of SVG in Art Education
Papertopic: SVG Viewer Implementations
Author(s): Damjanovic, Andja (IPAK Institute)
The SVG can be successful used in art education. There are several elements, which are not so easy to explain to pupils at primary educational institutions like perspective, colour contrast, colour wheel, complementary colours, primary, secondary and tertiary colours. However using SVG it is easy to demonstrate all that important elements for art education in primary and secondary education. Even more pupils and students can develop own examples using simple SVG files. Programming this simple SVG and changing the parameters they can make simple experiments, which are helping them to understand better the theory of art.
In proposed article our experience in using of SVG in the art education at primary schools at Velenje. We have organized several short workshops on, which pupils from elementary schools got basic knowledge of SVG and were using it to develop simple SVG files which demonstrate some important elements from colour and art theory.
Such approach is nice example of cross curricular teaching, an approach to teaching where the teacher attempts to present a specific content/issue in a comprehensive way so that she/he tries to illustrate it from different aspects. In this example the art content is presented using programming.
Pupils like this approach and results of this experiment were very nice. We hope that in future SVG will be more used in this and other field of education giving pupils and students opportunity to do something creative using computers and going away from “copy and paste” culture, which makes strong damage to education because technology did not make added value but opposite. Approach we used in SVG courses at Velenje elementary schools could make difference, support development of creativity, smart use of technology and cross curricular teaching in primary and secondary education.
Hide Abstract
- Use of SVG in Art Education:
- Danilo, Alex (Abbra, CTO)
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. Currently he heads Abbra, a company providing world-leading SVG rendering technology to customers across the globe.
- All Good Things Come in Threes:
Show Abstract, Presentation (Separate Tab)All Good Things Come in Threes
A Tale of Three Screens
Papertopic: SVG and Digital Television
Author(s): Danilo, Alex (Abbra)
For years, technology pundits have craved convergence and interoperability.
In recent times, there has been a big push for the 'three' screens nirvana. The three screens ideal, encompasses mobile phone, PC and TV screen.
From a content supplier point of view, the three screen approach means building content for the consumer and delivering it to the three screens - those being the mobile phone, the PC client and the TV in the living room.
In order to make this three screen ideal a reality, there needs to be an enabling technology to make it happen.
This is the stumbling block. How to make content from one source adaptable to threee screens?
Enter SVG.
With SVG, content can be authored to apply to any size screen. Scalability makes it possible.
Industry has recognized this, and in response industry has put into place a number of derived specifications that make the three screen ideal a possibility.
On the mobile front, the American ATSC body has adopted SVG Tiny 1.2 as the standard overlay for interactive TV on mobile phones.
In the TV front, the Open IPTV forum has also chosen SVG Tiny 1.2 as the primary interactice layer for video delivered over the internet directly to TVs in the living room.
At the same time, we see SVG based video enabling total interactivity for PC application areas.
Maybe SVG is the glue that can finally make this video convergence a reality?
Demonstrations of Open IPTV forum interactive video alongside ATSC M/H video as deployed for USA interactive Mobile DTV and accompanying PC based applications will be showcased along with examples of the convergence and business cases for SVG as the main enabling technology to make interactive video distribution a reality on all devices today.
Hide Abstract
- All Good Things Come in Threes:
- de LACHAUX, Vincent (4D SAS)
- Mixing Dynamic SVG with User Input:
Show AbstractMixing Dynamic SVG with User Input
Dynamic SVG in a desktop application
Papertopic: Workflow for Creating and Using SVG
Author(s): Arguillere, Thibaud (4D SAS), de LACHAUX, Vincent (4D SAS) and Thomas Fitch (4D, Inc.)
Numerous APIs exist which allow developers to build images based on dynamic data. Thanks to the features SVG offers, these images can be interactive and allow users to drill down into that data. There are also tools which empower users to create their own SVG images. By mixing these two different ideas, a new paradigm can be created wherein the user can actively update dynamic data by interacting with an SVG image. This presentation will illustrate the needs, challenges and benefits of building upon dynamic SVG with user input, and demonstrate the concept using existing technologies.
Requirements
A functional workflow for the dynamic generation and subsequent user manipulation of SVG images requires the following:
- An API adapted to the development environment of choice: For SVG to be adopted by more developers, its functions need to be easily accessed programmatically.
- An integrated drawing tool: While a good developer can use the API to create their own SVG drawing/editing tool, providing a plug- and-play solution will open the doors to SVG adoption more quickly.
- Fast SVG rendering and code execution: As everything is dynamically generated, SVG creation and display must happen on the fly.
Benefits
The obvious benefit of dynamic data visualization is that images can truly represent the most up-to-date information with little to no user intervention. By adding interactivity, users can get richer information from an image – embedded links, for example – or add their own annotations or visuals. Finally, this presents an all new way for users to update data: By manipulating the image itself.
Challenges
One of the questions that arises when talking about user-driven, data-manipulating imagery is: How do you limit data control? In other words, one needs to be sure that the user – while being given the power to modify data via an image – cannot destroy or alter sensitive, original data. On the other hand, data transfer speed needs to be high enough so that user changes are instantly validated on the server side for instantaneous updates.
Examples
Recognizing the potential for user-manipulated SVG, there are projects under way to bring it to greater eminence. Raphaël, for example, is a JavaScript library to create and manipulate SVG across browsers, allowing developers to attach JavaScript event handlers to DOM-based graphic objects. Inkscape, an open-source SVG drawing tool, allows users to create links out of SVG content, as recommended by the W3C. Adobe has created an SVG Draw demo (http://www.adobe.com/svg/demos/devtrack/svgdraw.html) for annotating SVG graphics, also based on JavaScript. This begs the question: Is there any solution out there that can do all of the above?
Implementation Demo
To demonstrate SVG’s utility in an enterprise scenario, we will use a 4D application and its SVG capabilities to:
- Dynamically generate a floor-plan for a construction project
- Display various fixtures and elements (sinks, faucets, etc.) as interactive SVG with rich information
- Allow the user to move or change elements and make notes
- Save these changes to data
- Send the SVG to contractors in the field via email or Web.
Hide Abstract
- Mixing Dynamic SVG with User Input:
- Dengler, Patrick (Microsoft, Senior Program Manager)
Show Biography
Patrick Dengler has been at Microsoft working on technologies ranging from developer tools and frameworks, extensibility and web technologies spanning products such as Visual Studio, Office, Microsoft Business Solutions, Windows and Internet Explorer. The author of "Introducing .NET" and "XML Databases" who has previously presented at PDC, DevDays and TechEd is now focusing his efforts on SVG. Most recently he spoke at MIX with W3C Staff Member for SVG Doug Schepers.
- The Future of SVG and HTML5:
Show AbstractThe Future of SVG and HTML5
How will SVG impact the Web
Papertopic: Business Cases and Case Studies
Author(s): Dengler, Patrick (Microsoft)
Patrick Dengler will take you through a quick tour of SVG's potential impact on the web with its incorporation into the HTML5 specification and support from Internet Explorer 9. The talk will include examination of emerging web site design, the pros and cons of SVG and <canvas>, as well as how to code for the interoperable set of SVG across the browser spectrum. This is expected to be an interactive discussion.
Hide Abstract
- The Future of SVG and HTML5:
- De Sesa, Jayne (Dotuscomus, Creative Director)
Show Biography
Jayne De Sesa is the creative director of Dotuscomus, a web consulting firm, founded in 2000, which designs and develops custom web sites and rich internet applications. In 2006 Dotuscomus was co-organizer of the SVG European Workshop in Zurich, Switzerland. Ms. De Sesa is also noted as artistic director of Tabula Rasa, a print magazine consecrated to SVG. Her professional background includes award winning advertising art direction at international agencies based in New York, Paris and Milan. Ms. De Sesa majored in painting and printmaking at The Maryland Institute College of Art and holds a Bachelor of Arts degree in Visual Arts and Human Development from the State University of New York, Empire State College.
- GEMï :
Show AbstractGEMï
The Web Operating System Open Project
Papertopic: GUI Frameworks for Web Applications
Author(s): Strazzullo, Domenico (Dotuscomus) and Jayne De Sesa (Dotuscomus)
GEMï is a Web Operating System composed of an Application Environment Manager and a Graphical User Interface, using the library of SVG implementations as Virtual Device Interface.
The purpose of this presentation is to survey and demonstrate its features and capabilities, as well as its possible domains of application; to review the techniques employed for its construction; to present the Open Project proposals for evolution available at the time of the conference.
The system
GEMï is a cross-browser Web Operating System. It consists of an Application Environment Manager and a Graphical User Interface using SVG as Virtual Device Interface. The version 2 of the software has been entirely rewritten using a class inheritance architecture with the objective to make its source code easy to extend and maintain by the collaborative crew of programmers in an Open Project context.
GEMï has the systemic features commonly found in window based operating systems, including a system menu. The windows are fully featured and have the particularity of carrying in their tool bars sophisticated tools, proper to SVG transformation capabilities, for zooming and panning their contents.
Two notable features are Preferences and Session which can both be saved in remote mode. The Preferences relate to display options. The Session relates to the windows with their status and their current layout.
Domains of application
The range of domains of application is wide and includes engineering, cartography, scientific, educational, illustration, presentations, etc.
A practical example would be a project consisting of several documents, each containing, for instance, SVG drawings of molecules (latest experiments carried out by my son prove that a GEMï window can carry 3D objects with their animations and transformation tools, which can be used in conjunction with the window's SVG transformation tools. This finding is the subject of a separate presentation), and a set of informational, interactive documents.
Technical aspects
The architecture of GEMï is based on the principle of class inheritance. Its structure is composed of a placeholder object, named “gemi”, where properties and methods proper to the interface are defined, and which provides a “namespace” for the superclass and subclasses.
The superclass defines properties and methods in its prototype which are then inherited by the subclasses. The superclass also defines some class methods.
The subclasses, which constitute an internal library, may have private methods or override the superclass methods. Basically, the subclasses are specialized constructor for compound physical objects which in most cases use several SVG elements.
Here we come to a fundamental particularity of GEMï: it does not have any classes for SVG elements. Instead, for those it uses the library that is constituted by the browser's implementation of SVG. To achieve this the “gemi” object defines a method (node builder) which acts as an interface between the internal library and the implementation's library. This methods expects exactly 1 argument, an object where the property/value pairs use SVG grammar, the property names containing JavaScript illegal characters for variable/property name being specified in string notation. Examples:
Building the interface
The section in the DOM tree restituting the interface is organized in the following manner:
Initially it contains a “gemi_windowstree” group which is hard-codedthe gemi.svg document in order to allow the embedding of those inner <svg> fragments that are intended to be rendered at runtime.
A desktop group is created and the “gemi_windowstree” group appended to it, followed by the other system components groups stacked in a judicious manner –the drag-area being on the topmost layer for example.
Finally, the other system components are created and appended to their respective groups.
GEMï has a reusable skin engine. The concept is similar to that of CSS with some notable advantages; these are:
– The possibility of having several definitions of “selectors” in one single file.
– The “selectors” are properties which are assigned objects, and their names are correlated with the names of the constructors.
– The possibility of using expressions and references for values.
– The use of a theme color, which can be processed on request to produce shades for the painting attributes and/or gradients, patterns and filters.
– The skin is a method that creates an object representing the current skin.
– The skin object defines the gradients, patterns and filters for the current skin.
– The names of the properties of the objects (the “selectors”) defined by the skin object are SVG attribute names, using string syntax where it applies, and other pseudo-attribute names may be used, as needed.
– The properties of objects (class instances, or orphan or volatile objects) reference the properties of the skin.
Hide Abstract
- GEMï :
- Elder, Eric (Slippery Rock University, Student)
Show Biography
I am a student of computer science, physics and mathematics at Slippery Rock University. I attended the 2009 SVG Open presenting, with Dr. David Dailey, "Grapher – an open source, SVG-based web application for graph theorists".
- A proposal for adding declarative drawing to SVG:
Show AbstractA proposal for adding declarative drawing to SVG
<replicate>:space = <animate>:time (approximately)
Papertopic: Graphic Design with SVG
Author(s): Dailey, David (Slippery Rock University) and Eric Elder (Slippery Rock University)
This paper will focus upon recent investigations into the possibility of extending the SVG spec to include a <replicate> tag for the purposes of extending functionality into three primary areas: 1. richer classes of gradients, 2. extensions to new classes of patterns and 3. new types of 2.5 dimensional objects. The <replicate> tag (and allied tags like <replicateTransform> and <replicateMotion>) are seen as having a similar relationship to 2D space that <animate> and its cousins from the SMIL family have to time. That is, <replicate> can be used to perform declarative construction of clusters of related shapes.
The paper will present experiments and suggestions concerning plausible syntax, a proof-of-concept involving the implementation in JavaScript of some of these ideas, lots of visual examples to illustrate the power of such a construct, and speculation about how <replicate> might be implemented and how it might combine with other aspects of SVG like gradients, groups, animation, the DOM, and with other instances of <replicate> as in nesting.
Various discussions concerning extension of the class of gradients available to SVG have taken place over the years both within the SVG WG, at conferences, in discussion lists and in private conversations. A variety of approaches have been outlined varying from experiments with gradients that are neither linear nor radial, to proposed gradients that would behave like contour maps, to diffusion curves. All share a frustration with the current limited set and with the difficulty of extending those (even via script) to richer classes. Much of the current proposal is based on analogy to how SMIL allows declarative animation of objects over time. Let us allow declarative replication of objects over space.
SMIL enables objects to change attributes like opacity, color, size, shape and location over time. Suppose instead of changing the attributes of a single object, we were to superimpose freeze frames of those changes atop one another in the drawing space, This is what <replicate> is intended for. While we may vary several attributes at once of the same object using SMIL, and each of these attributes may have its own timing frequency, spatial replication requires drawing an object at certain intervals, hence requiring a synchronization and flattening of the temporal diversity. That is, while we might replicate and interpolate several attributes of any object as multiple snapshots of it are taken, all attributes will be present during each of those snapshots. Hence, rather than borrowing syntax from animate that would suggest:
<object>
<replicate attributeName="P" spatialfrequency="7" values="x,y,z"/>
<replicate attributeName="Q" spatialfrequency="12" values="a,b,c"/>
</object>
as it is done with the <animate> tag, the spatialfrequecy or repeatCount of snapshots will remain constant for all attributes being varied by the author. That is, the syntax of the examples, I have explored follows the following paradigm (resembling that of filters somewhat) instead:
<object>
<replicate repeatCount="12">
<replicateAttribute attributeName="P" values="x,y,z"/>
<replicateAttribute attributeName="Q" values="a,b,c"/>
</replicate>
</object>
That is, all attributes will be present during each snapshot made of the object.
I will present examples of replications of objects by varying their x and y positions, changing their colors, their sizes and shapes and show results of investigations of how these types of variations can interact with gradients, patterns, animations and filters.
Already, I have accumulated a good amount of evidence that this class of declarative drawing would indeed add considerable diverseness and richness to SVG. It will also be argued that because of the direct parallels to SMIL, a) many browsers will already have some of the relevant code base developed b) authors conversant with SMIL will find its acquisition easy c) that code written using such tags will be remarkable concise and succinct, and d) that development time for rich, complex and useful graphics may be shortened as a result.
Links:
Hide Abstract
- A proposal for adding declarative drawing to SVG:
- Fablet, Youenn (Canon Research France)
- Compressing SVG with EXI:
Show Abstract, Paper (Separate Tab)Compressing SVG with EXI
Papertopic: Mobile SVG Solutions
Author(s): Fablet, Youenn (Canon Research France), Fujisawa, Jun (Canon, Inc.), Ruellan, Hervé (Canon Research Centre France SAS), Bellessort, Romain (Canon CRF) and Anthony Grasso (Canon)
EXI is a binary format for encoding XML Infosets. It is currently in Candidate Recommendation, one of the last steps of the W3C standardization process. The main goal of this format is to provide very good compaction for a wide range of XML documents, applications and devices. To meet this goal, several encoding options are defined within the EXI format. Those encoding options must be selected with care to meet the requirements of an application in terms of compression, processing efficiency and memory usage.
This study describes the possibilities and achievements obtained by the EXI format for SVG applications. The impacts of the encoding options, in particular schema-less and schema-informed encoding (i.e. whether schema information is available) and compression (i.e. a further generic compression step is applied on the encoded data) are evaluated in this context.
Comparison with existing technologies and practices (SVGZ and BiMSVG) is also conducted in the study to show the strengths and weaknesses of the EXI technology applied to SVG. While clearly being an improvement over SVGZ, EXI, in its most interoperable form and without the use of compression option, is less compact than BiMSVG. Indeed, BiMSVG has built-in support for very efficient encoding of SVG textual content, whereas the most interoperable form of EXI only relies on schema information. However, as EXI enables the definition of built-in data types, the addition of specific SVG support to an EXI processor is evaluated in the study, demonstrating largely improved results.
This study also highlights specific benefits and issues: interoperability (lack of a convenient well-known XML Schema for SVG document encoding, SVG versions and modules), impact of the compression option on SVG progressive rendering, usefulness of features like schema deviation support (i.e. enabling the efficient encoding of items not described in the schema), self-contained elements (i.e. encoding parts of the SVG document independently of each other) or datatype representation map (i.e. mapping dedicated codecs to specific SVG textual content).
To conclude the study, recommendations on the best use of EXI for SVG (notably for both open and closed environments) and a look at the future are made. SVG 2.0 being on the way, some features like the definition of a more structured syntax for some SVG constructs (path or animation elements notably) have a very positive impact on the compaction results. This is assessed within the study. The study also raised questions for which the SVG community feedback is sought. Is there a need for a common compact format for all SVG applications? Is there a need to define an interoperable EXI SVG support? Should SVG 2.0 syntax be assessed in terms of EXI compaction results? Is there a need to define a common SVG schema for EXI processors? How should be handled the different SVG versions (1.0, 1.1, 1.2 and future 2.0)?
Hide Abstract
- Compressing SVG with EXI:
- Fitch, Thomas (4D, Inc., Technical Services Team Member)
Show Biography
I am a native Californian who's been immersed in the tech culture here since the 1990's and even went to school here at San Jose State University. I've been in the industry since an internship at Compaq then, but my SVG experience began at 4D Inc. (www.4d.com) four 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 working internally on it. 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 two years ago at 4D Summit, October 2008 in Long Beach, California, 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 I presented again on the new features of SVG available in 4D v12 at last year's 4D Summit in Atlanta, Georgia. This will be my second SVG Open. Last year I was a speaker and talked about using SVG in Desktop applications at the Google campus for SVG Open 2009.
- Mixing Dynamic SVG with User Input:
Show AbstractMixing Dynamic SVG with User Input
Dynamic SVG in a desktop application
Papertopic: Workflow for Creating and Using SVG
Author(s): Arguillere, Thibaud (4D SAS), de LACHAUX, Vincent (4D SAS) and Thomas Fitch (4D, Inc.)
Numerous APIs exist which allow developers to build images based on dynamic data. Thanks to the features SVG offers, these images can be interactive and allow users to drill down into that data. There are also tools which empower users to create their own SVG images. By mixing these two different ideas, a new paradigm can be created wherein the user can actively update dynamic data by interacting with an SVG image. This presentation will illustrate the needs, challenges and benefits of building upon dynamic SVG with user input, and demonstrate the concept using existing technologies.
Requirements
A functional workflow for the dynamic generation and subsequent user manipulation of SVG images requires the following:
- An API adapted to the development environment of choice: For SVG to be adopted by more developers, its functions need to be easily accessed programmatically.
- An integrated drawing tool: While a good developer can use the API to create their own SVG drawing/editing tool, providing a plug- and-play solution will open the doors to SVG adoption more quickly.
- Fast SVG rendering and code execution: As everything is dynamically generated, SVG creation and display must happen on the fly.
Benefits
The obvious benefit of dynamic data visualization is that images can truly represent the most up-to-date information with little to no user intervention. By adding interactivity, users can get richer information from an image – embedded links, for example – or add their own annotations or visuals. Finally, this presents an all new way for users to update data: By manipulating the image itself.
Challenges
One of the questions that arises when talking about user-driven, data-manipulating imagery is: How do you limit data control? In other words, one needs to be sure that the user – while being given the power to modify data via an image – cannot destroy or alter sensitive, original data. On the other hand, data transfer speed needs to be high enough so that user changes are instantly validated on the server side for instantaneous updates.
Examples
Recognizing the potential for user-manipulated SVG, there are projects under way to bring it to greater eminence. Raphaël, for example, is a JavaScript library to create and manipulate SVG across browsers, allowing developers to attach JavaScript event handlers to DOM-based graphic objects. Inkscape, an open-source SVG drawing tool, allows users to create links out of SVG content, as recommended by the W3C. Adobe has created an SVG Draw demo (http://www.adobe.com/svg/demos/devtrack/svgdraw.html) for annotating SVG graphics, also based on JavaScript. This begs the question: Is there any solution out there that can do all of the above?
Implementation Demo
To demonstrate SVG’s utility in an enterprise scenario, we will use a 4D application and its SVG capabilities to:
- Dynamically generate a floor-plan for a construction project
- Display various fixtures and elements (sinks, faucets, etc.) as interactive SVG with rich information
- Allow the user to move or change elements and make notes
- Save these changes to data
- Send the SVG to contractors in the field via email or Web.
Hide Abstract
- Mixing Dynamic SVG with User Input:
- Fournier, Laurent (Rockwell Collins France, Senior Software Engineer)
- SVG Diagram Editor/Viewer for Requirements Engineering:
Show Abstract, Paper (Separate Tab), Presentation (Separate Tab)SVG Diagram Editor/Viewer for Requirements Engineering
...a path to a SVG Wiki
Papertopic: SVG for Technical Documentation
Author(s): Fournier, Laurent (Rockwell Collins France)
Requirements Engineering (RE) is a domain where actors are requesting the ability to capture, share and verify more or less formalized artifacts within graphical 2D diagrams. We present in this paper a prototype web tool/service, part of the next coming open-source project Formose (FOrmal Requirements Modelling in an Open-Source Environment). This tool tries to fill gaps detected in the today tool offering for RE. It is a full SVG application using Graphviz service for layout and Git for version management. The main principle is to provide in SVG for graphics editing what Wiki use to provide for text editing in order to make easy nested diagrams. These diagrams are both editable following a simple text syntax or buildable with a SVG graphic interface. We also discuss the need in Requirement Engineering for a mechanism to insure integrity of connected diagrams in documents to avoid transformation from SVG to images. The paper is concluding on a demonstration of the early prototype tool/service.
Links:
Hide Abstract
- SVG Diagram Editor/Viewer for Requirements Engineering:
- Fujisawa, Jun (Canon, Inc.)
- Compressing SVG with EXI:
Show AbstractCompressing SVG with EXI
Papertopic: Mobile SVG Solutions
Author(s): Fablet, Youenn (Canon Research France), Fujisawa, Jun (Canon, Inc.), Ruellan, Hervé (Canon Research Centre France SAS), Bellessort, Romain (Canon CRF) and Anthony Grasso (Canon)
EXI is a binary format for encoding XML Infosets. It is currently in Candidate Recommendation, one of the last steps of the W3C standardization process. The main goal of this format is to provide very good compaction for a wide range of XML documents, applications and devices. To meet this goal, several encoding options are defined within the EXI format. Those encoding options must be selected with care to meet the requirements of an application in terms of compression, processing efficiency and memory usage.
This study describes the possibilities and achievements obtained by the EXI format for SVG applications. The impacts of the encoding options, in particular schema-less and schema-informed encoding (i.e. whether schema information is available) and compression (i.e. a further generic compression step is applied on the encoded data) are evaluated in this context.
Comparison with existing technologies and practices (SVGZ and BiMSVG) is also conducted in the study to show the strengths and weaknesses of the EXI technology applied to SVG. While clearly being an improvement over SVGZ, EXI, in its most interoperable form and without the use of compression option, is less compact than BiMSVG. Indeed, BiMSVG has built-in support for very efficient encoding of SVG textual content, whereas the most interoperable form of EXI only relies on schema information. However, as EXI enables the definition of built-in data types, the addition of specific SVG support to an EXI processor is evaluated in the study, demonstrating largely improved results.
This study also highlights specific benefits and issues: interoperability (lack of a convenient well-known XML Schema for SVG document encoding, SVG versions and modules), impact of the compression option on SVG progressive rendering, usefulness of features like schema deviation support (i.e. enabling the efficient encoding of items not described in the schema), self-contained elements (i.e. encoding parts of the SVG document independently of each other) or datatype representation map (i.e. mapping dedicated codecs to specific SVG textual content).
To conclude the study, recommendations on the best use of EXI for SVG (notably for both open and closed environments) and a look at the future are made. SVG 2.0 being on the way, some features like the definition of a more structured syntax for some SVG constructs (path or animation elements notably) have a very positive impact on the compaction results. This is assessed within the study. The study also raised questions for which the SVG community feedback is sought. Is there a need for a common compact format for all SVG applications? Is there a need to define an interoperable EXI SVG support? Should SVG 2.0 syntax be assessed in terms of EXI compaction results? Is there a need to define a common SVG schema for EXI processors? How should be handled the different SVG versions (1.0, 1.1, 1.2 and future 2.0)?
Hide Abstract
- Compressing SVG with EXI:
- Gardner, John (ViewPlus, President)
Show Biography
January 22, 2008 short bio John Gardner is Professor Emeritus of Physics at Oregon State University and is founder and president of ViewPlus Technologies, Inc. He is internationally recognized as a leading expert on the physics of defects in materials. He has won a number of scientific awards including the Humboldt Prize awarded by the German Alexander von Humboldt Foundation, and awards for his accessibility contributions including the Distinguished Service Award bestowed by Oregon State University for Exceptional Contributions to Society, and the Oregon Governor’s Award in recognition of outstanding achievements in improving access to education and employment through technology. His physics research has been supported by the National Science Foundation, the Department of Energy, the Office of Naval Research, the Department of Defense, NASA, and several private corporations and foundations. After losing his sight in 1988 in mid-career, John Gardner formed the Science Access Project (http://dots.physics.orst.edu) to do research and development on new technologies for access to complex information by people with print disabilities. ViewPlus Technologies (http://www.ViewPlus.com) is a spin-off company formed to commercialize the Tiger tactile graphics embosser technology and other technologies developed in the Science Access Project. It has grown to become a major access technology company with worldwide sales of millions of dollars per year. It is represented by distributors in all major countries, and in 2009 ViewPlus is expanding to Europe with a sales and support facility in Venlo, NL. ViewPlus has been able to maintain a high level of product research and development because of numerous Small Business Innovation Research grants from the US National Institutes of Health and National Science Foundation. John Gardner has presented hundreds of seminars, colloquia, workshops, contributed and invited conference talks on physics and on information access by people with disabilities throughout the US, Europe, and Asia. He is considered a leading expert on access to STEM (Science, Technology, Engineering, Math) information.
- Highly Accessible Scientific Graphical Information through DAISY SVG:
Show Abstract, Paper (Separate Tab)Highly Accessible Scientific Graphical Information through DAISY SVG
Improving SVG for Perfect Accessibility
Papertopic: Accessibility of SVG
Author(s): Gardner, John (ViewPlus)
INTRODUCTION
The DAISY (Digital Accessible Information SYstem, www.daisy.org) organization has developed an XML specification designed for excellent accessibility of a wide range of written literature. Math is included in the form of the math markup language MathML. DAISY uses SVG as the markup language of choice for accessible graphics. A DAISY SVG Working Group is developing authoring guidelines and expanding SVG to permit excellent accessibility to graphics by people who are blind, dyslexic, or have other severe print disabilities. This talk will discuss these developments from the point of view of an end user.
BRIEF DESCRIPTION
DAISY is an international consortium of libraries and other organizations serving needs of blind and dyslexic people. ViewPlus is a commercial Friend of DAISY and a leading presence on the DAISY SVG working group. ViewPlus' "Hands-On Learning" IVEO technology (http://www.viewplus.com/solutions/touch-audio-learning/) is being expanded to develop authoring end user access tools encompassing the DAISY developments.
The American Physical Society (APS), the world's leading publisher of physics journals, is a DAISY Friend and a member of the DAISY SVG Working Group. APS is developing infrastructure to permit it to begin publishing its journals in DAISY XML.[1] Transforming the current APS XML, which includes math as MathML, into this DAISY format is straightforward, but making its graphics accessible as DAISY SVG is not. APS presently accepts figures in Encapsulated PostScript (EPS) format. APS, ViewPlus, and other organizations are collaborating to develop software that can convert EPS automatically to DAISY SVG. The APS publication project is in practice the test procedure to assure that the DAISY SVG specifications are practical and robust and that they meet the needs of mainstream users as well as users with disabilities.
Basic SVG 1.0 and 2.0 include two features, title and description properties for graphical objects, intended to promote accessibility. ViewPlus has exploited these two fields in its IVEO technology to permit SVG images to be accessible to blind readers. Its IVEO Viewer is used along with a tactile copy of the image to allow "Audio-Touch" access to graphical information. The blind reader typically has a tactile copy (made by printing from IVEO Viewer to a ViewPlus embosser) mounted on a touchpad
When a text span or graphical object is tapped, it is selected and the text span or object title respectively is spoken by the computer. An object description is spoken by double tapping the object.
The IVEO Creator software permits graphic object titles and descriptions to be created and inserted into SVG files. It also has editing capabilities for improving the SVG text information to be most useful to the end user. Typically most graphical authoring applications do not export text in semantically meaningful spans, so the end user will have difficulty understanding text labels on "as-exported" graphics. Assuring that text labels are semantically meaningful and that important graphical objects have titles and, if necessary, descriptions, can make most graphical information equally accessible to people with and without print disabilities. Some graphics, in particular scientific graphics, are not equally accessible with these simple enhancements however. Equations appearing in text labels often cannot be coded in SVG. Even if they could be, speech engines cannot transform such coded equations into understandable speech.
DAISY SVG is being expanded to include a number of tag and attributes to ensure equal accessibility to scientific graphics, in fact to make them even more accessible to all users whether print disabled or not. A number of data-containing fields are being added so that figures can be their own data archives. Including the data in figures as well as images of the data makes those images far more accessible to everybody. Such smart figures have been a dream of foresighted scientists for decades. It is ironic that this dream is reaching reality through a project originally begun to serve needs of blind people. Smart figures will become a practical reality in a few years after authoring applications develop "save-as" capabilities that will automatically include data, titles of data collections, descriptions of fitting curves, etc. Initial APS journals will have no data and will not include titles and descriptions of graphical objects in SVG, but they will have MathML associated with equations. Full accessibility of scientific labels makes many physics graphics moderately accessible, but some editing by sighted associates will still be needed for many images. However the human effort to make articles accessible is minimal compared to the extraordinarily high cost in time and labor of "making scientific information accessible" today.
REFERENCE
1. Making journals accessible to the visually impaired: the future is near. John A. Gardner, Vladimir Bulatov, and Robert A. Kelly. Learned Publishing 22(4) 2009 pp. 314-319. http://www.viewplus.com/about/abstracts/09learnpubgardner.html
Hide Abstract
- Highly Accessible Scientific Graphical Information through DAISY SVG:
- Girow, Andrew
- Drawing SVG in the Cloud :
Show Abstract, Paper (Separate Tab), Presentation (Separate Tab)Drawing SVG in the Cloud
SVG Tiny for Google Application Engine
Papertopic: GUI Frameworks for Web Applications
Author(s): Girow, Andrew
Google Application Engine is a cloud-computing infrastructure for creating and running web applications. Google Application Engine does not allow all Java classes to be used, For example, no graphics classes are allowed. At the same time, there is a need for the server side graphics on Google App Engine. TinyLine fills the gap and brings in the vector graphics to Google App Engine.
We discuss some technical basic behind TinyLine and Google App Engine and show how Google App Engine Java developers could use and benefit from TinyLine.
We go from the simple to more complex examples, starting the basic 2D drawing capabilities demos and SVG thumbnail images service.
Then we show that thumbnail images are convenient way to present SVG previews to users. The thumbnail images could be used for the SVG listings, SVG directories or for SVG result lists of search engines.
We give an example how TinyLine could help to port other graphical Java applications to Google App Engine platform.
The more advanced example of using TinyLine and Google App Engine brings together full text search of SVG images and visual representation of search results by thumbnail images.
Links:
Hide Abstract
- Drawing SVG in the Cloud :
- Grasso, Anthony (Canon, Software Engineer)
- Compressing SVG with EXI:
Show AbstractCompressing SVG with EXI
Papertopic: Mobile SVG Solutions
Author(s): Fablet, Youenn (Canon Research France), Fujisawa, Jun (Canon, Inc.), Ruellan, Hervé (Canon Research Centre France SAS), Bellessort, Romain (Canon CRF) and Anthony Grasso (Canon)
EXI is a binary format for encoding XML Infosets. It is currently in Candidate Recommendation, one of the last steps of the W3C standardization process. The main goal of this format is to provide very good compaction for a wide range of XML documents, applications and devices. To meet this goal, several encoding options are defined within the EXI format. Those encoding options must be selected with care to meet the requirements of an application in terms of compression, processing efficiency and memory usage.
This study describes the possibilities and achievements obtained by the EXI format for SVG applications. The impacts of the encoding options, in particular schema-less and schema-informed encoding (i.e. whether schema information is available) and compression (i.e. a further generic compression step is applied on the encoded data) are evaluated in this context.
Comparison with existing technologies and practices (SVGZ and BiMSVG) is also conducted in the study to show the strengths and weaknesses of the EXI technology applied to SVG. While clearly being an improvement over SVGZ, EXI, in its most interoperable form and without the use of compression option, is less compact than BiMSVG. Indeed, BiMSVG has built-in support for very efficient encoding of SVG textual content, whereas the most interoperable form of EXI only relies on schema information. However, as EXI enables the definition of built-in data types, the addition of specific SVG support to an EXI processor is evaluated in the study, demonstrating largely improved results.
This study also highlights specific benefits and issues: interoperability (lack of a convenient well-known XML Schema for SVG document encoding, SVG versions and modules), impact of the compression option on SVG progressive rendering, usefulness of features like schema deviation support (i.e. enabling the efficient encoding of items not described in the schema), self-contained elements (i.e. encoding parts of the SVG document independently of each other) or datatype representation map (i.e. mapping dedicated codecs to specific SVG textual content).
To conclude the study, recommendations on the best use of EXI for SVG (notably for both open and closed environments) and a look at the future are made. SVG 2.0 being on the way, some features like the definition of a more structured syntax for some SVG constructs (path or animation elements notably) have a very positive impact on the compaction results. This is assessed within the study. The study also raised questions for which the SVG community feedback is sought. Is there a need for a common compact format for all SVG applications? Is there a need to define an interoperable EXI SVG support? Should SVG 2.0 syntax be assessed in terms of EXI compaction results? Is there a need to define a common SVG schema for EXI processors? How should be handled the different SVG versions (1.0, 1.1, 1.2 and future 2.0)?
Hide Abstract
- Compressing SVG with EXI:
- Kaipiainen, Samuli (Department of Computer Science / University of Helsinki)
Show Biography
Doing part-time teaching.
- From SVG to Canvas and Back:
Show Abstract, Paper (Separate Tab), Presentation (Separate Tab)From SVG to Canvas and Back
Papertopic: Interactivity and Scripting
Author(s): Kaipiainen, Samuli (Department of Computer Science / University of Helsinki) and Matti Paksula (University of Helsinki)
As demonstrated last year in SVG Open 2009 California [1], it's possible to transfer pixel data from Canvas to SVG and other way round, but with limitations. The SVG->Canvas transfer was done server-side with Imagemagick, as there were no acceptable client-side method available.
Lately, it has become possible to rasterize SVG into a data url pixel data client-side, but still with limitations [2]. Currently, it only works with Safari and Opera. Also, it's possible to only transfer the data once from SVG to Canvas. After that, the security method of [not allowing arbitrary stuff to be rendered and possibly sent to third party] kicks in, and the route is locked.
The preferred way of how this data transfer should work, is for SVG to also have a toDataUrl or similar method, which exposes the rasterized image to Ecmascript.
In this paper we propose a SVG.toDataURL() -method and give a reference implementation with JavaScript until native support is available. In our JavaScript library we show that the implementation for SVG.toDataURL()-support is possible right now.
REFERENCES
[1] http://www.svgopen.org/2009/papers/54-SVG_vs_Canvas_on_Trivial_Drawing_Application/
[2] http://ajaxian.com/archives/todataurl-canvas-and-svg#comment-275765
Hide Abstract
- From SVG to Canvas and Back:
- Katrumane Manjunath, Naidele (Graduate Student)
- Gene Cluster Analysis with GenomeVectorizer:
Show Abstract, Paper (Separate Tab), Presentation (Separate Tab)Gene Cluster Analysis with GenomeVectorizer
Papertopic: Interactivity and Scripting
Author(s): Katrumane Manjunath, Naidele and Elena Kochetkova (San Jose State University)
Genome study requires information pertaining to every gene in a chromosome. Visualising information of how a gene is related to other genes in the same chromosome or to genes in other chromosomes will make the understanding of the relations more clear. Available genome visualization tools provide mainly the view of the overall genome [Websites 2,3,4] and some tools have features like zooming into a particular chromosome and viewing the gene in detail [2].
In this paper we present a new capability of "Genome Vectorizer" (formerly known as "Genome Pixelizer SVG-fied") where a gene can be dragged out of a chromosome for more detailed analysis. This feature is an extension to 'Genome Pixelizer SVG-fied' which is a genome visualization tool that has been developed by Elena Kochetkova [1].
"Genome Vectorizer" is a re-designed version of GenomePixelizer, written in 2002 in TCL/TK, a tool that allows for the detection of duplication events in genomes. It capitalizes on the benefits of using XML, XSLT, and SVG technologies combined with JavaScript scripting “to provide users with simpler interface, maximized interactivity; as well as, improved efficiency of genetic data analysis” [1].
Gene dragging capability, which is presented in this paper, will provide users much more interactivity, since often the users focus on a particular gene rather than the entire chromosome. Once the common genes are matched between chromosomes the user can drag the gene of interest out along with all the details pertaining to it.
Bibliography
Articles
[1] Elena Kochetkova. “GenomePixelizer SVG-fied”.
[2] Kozik, A., Kochetkova, E., Michelmore, R. GenomePixelizer - a visualization program for comparative genomics within and between species. Bioinformatics 2002. 18:335-336.
[3] Benjamin G.S. Horsman. “A New Horizon for SVG: Bioinformatics” . 2003.
[4] Dr. William Rutherford. “SVG Bioinformatics Collaboration Tool”. 2003.
[5] Christopher T Lewis, Steve Karcz, Andrew Sharpe, and A.P. Parkin Isobel. “BioViz: Genome Viewer”. Development of an SVG GUI for the visualization of genome data. 07-Nov-2003.
[6] Andrei L. Turinsky, Andrew C. Ah-Seng, Paul M. K Gordon, Julie N. Stromer, Morgan L. Taschuk, Emily W. Xu, Christoph W. Sensen,. “ Bioinformatics visualization and integration with open standards: The Bluejay genomic browser ”. Copyright © 2004 Bioinformation Systems e.V.
Websites
[1] GD::SVG - Seamlessly enable SVG output from GD scripts. Todd W. Harris. Copyright © 2003 Todd Harris and the Cold Spring Harbor Laboratory. "http://toddot.net/projects/GD-SVG/index.shtml"
[2] Argo Genome Browser. BROAD Institute. 7 July 2008. 22 May 2009. "http://www.broad.mit.edu/annotation/argo/"
[3] Circos. May 22 2009. "http://mkweb.bcgsc.ca/circos/"
[4] Alfresco. Sanger Institute. 27 May 2008. 22 May 2009. "http://www.sanger.ac.uk/Software/Alfresco/"
Hide Abstract
- Gene Cluster Analysis with GenomeVectorizer:
- Kochetkova, Elena (San Jose State University)
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 Arabidopsis, 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.
- Gene Cluster Analysis with GenomeVectorizer:
Show AbstractGene Cluster Analysis with GenomeVectorizer
Papertopic: Interactivity and Scripting
Author(s): Katrumane Manjunath, Naidele and Elena Kochetkova (San Jose State University)
Genome study requires information pertaining to every gene in a chromosome. Visualising information of how a gene is related to other genes in the same chromosome or to genes in other chromosomes will make the understanding of the relations more clear. Available genome visualization tools provide mainly the view of the overall genome [Websites 2,3,4] and some tools have features like zooming into a particular chromosome and viewing the gene in detail [2].
In this paper we present a new capability of "Genome Vectorizer" (formerly known as "Genome Pixelizer SVG-fied") where a gene can be dragged out of a chromosome for more detailed analysis. This feature is an extension to 'Genome Pixelizer SVG-fied' which is a genome visualization tool that has been developed by Elena Kochetkova [1].
"Genome Vectorizer" is a re-designed version of GenomePixelizer, written in 2002 in TCL/TK, a tool that allows for the detection of duplication events in genomes. It capitalizes on the benefits of using XML, XSLT, and SVG technologies combined with JavaScript scripting “to provide users with simpler interface, maximized interactivity; as well as, improved efficiency of genetic data analysis” [1].
Gene dragging capability, which is presented in this paper, will provide users much more interactivity, since often the users focus on a particular gene rather than the entire chromosome. Once the common genes are matched between chromosomes the user can drag the gene of interest out along with all the details pertaining to it.
Bibliography
Articles
[1] Elena Kochetkova. “GenomePixelizer SVG-fied”.
[2] Kozik, A., Kochetkova, E., Michelmore, R. GenomePixelizer - a visualization program for comparative genomics within and between species. Bioinformatics 2002. 18:335-336.
[3] Benjamin G.S. Horsman. “A New Horizon for SVG: Bioinformatics” . 2003.
[4] Dr. William Rutherford. “SVG Bioinformatics Collaboration Tool”. 2003.
[5] Christopher T Lewis, Steve Karcz, Andrew Sharpe, and A.P. Parkin Isobel. “BioViz: Genome Viewer”. Development of an SVG GUI for the visualization of genome data. 07-Nov-2003.
[6] Andrei L. Turinsky, Andrew C. Ah-Seng, Paul M. K Gordon, Julie N. Stromer, Morgan L. Taschuk, Emily W. Xu, Christoph W. Sensen,. “ Bioinformatics visualization and integration with open standards: The Bluejay genomic browser ”. Copyright © 2004 Bioinformation Systems e.V.
Websites
[1] GD::SVG - Seamlessly enable SVG output from GD scripts. Todd W. Harris. Copyright © 2003 Todd Harris and the Cold Spring Harbor Laboratory. "http://toddot.net/projects/GD-SVG/index.shtml"
[2] Argo Genome Browser. BROAD Institute. 7 July 2008. 22 May 2009. "http://www.broad.mit.edu/annotation/argo/"
[3] Circos. May 22 2009. "http://mkweb.bcgsc.ca/circos/"
[4] Alfresco. Sanger Institute. 27 May 2008. 22 May 2009. "http://www.sanger.ac.uk/Software/Alfresco/"
Hide Abstract
- Gene Cluster Analysis with GenomeVectorizer:
- Kuntz, Michel (Fachhochschule Kaiserslautern, Professor)
- Clustering SVG Shapes:
Show Abstract, Paper (Separate Tab), Presentation (Separate Tab)Clustering SVG Shapes
Integrating SVG with Data Mining and Content-Based Image Retrieval
Papertopic: Workflow for Creating and Using SVG
Author(s): Kuntz, Michel (Fachhochschule Kaiserslautern)
1. Introduction
Clustering bitmap images has become an active research area, especially in the context of multimedia Data Mining [RTZ] and Content-Based Image Retrieval [LewEtAl]. Clustering visual data expressed by means of the SVG language was till now unexplored. Being ubiquitous normally implies enjoying the status of a fully 1st-class MIME-type, which includes being data-minable and content-based retrievable. SVG documents have not yet achieved such minability and retrievability -- this leaves important work still to be done. The research reported here did some of it.
SVG documents are output from authoring tools and input to rendering engines, but they are no longer only that: they are also information resources, the contents of which need to be analysed, organised, and retrieved on demand. Providing the ability to cluster SVG shapes is one step towards support for these kinds of functionality and one contribution to filling the gap in analytical tools for SVG data.
Why would SVG authors and designers be interested in having such a capability at their disposal ? A query-answering functionality such as is usually available in Content-Based Image Retrieval software is obviously appropriate, when one already knows what one is looking for. When this is not (yet) the case and one still wishes to obtain assistance in exploring a given body of data, then clustering is a valuable exploratory technique. What are its benefits for SVG users ? More and better reusability of existing SVG code. Reinventing what already exists should be avoided, both for creativity and efficiency reasons. Finding out just what actually does already exist can be an open-ended problem, if no means are available to help solve it.
We have designed and implemented a software system that (a) collects shapes (as defined below) from the data structures generated by an SVG user agent (i. e. the Batik GVT tree), (b) represents the shapes as optimised sequences of polygon vertices, (c) computes sets of Fourier descriptors for these sequences, (d) applies well-known clustering algorithms to organise these descriptor sets into perceptually similar groups, and (e) enables interactive display and manipulation of the resulting tree of clusters and individual cluster contents.
2. Background and Related Work
Pertinent (non-SVG) background involves three major topics: modelling shape, the discrete Fourier transform, and clustering (unsupervised classification). Each is a field in itself. Chapters 4 to 7 of [CosCes09] are a good initial resource for the first topic. Chapter 2.7 there as well as chapters 5 to 7 of [Bigun] provide a pertinent introduction to Fourier analysis. [JaiMurFly] is still the standard overview of clustering.
Vector-graphics images are only beginning to be considered as objects of analysis. Only two published pieces of research have already started to break the ground in this area: [DSDM] initiated content-based retrieval of SVG images, and [KeyWin99] pioneered grouping shapes derived from vector-graphics data by means of visual inspection of plots of descriptive values.
3. Problem Space and Abstract Architecture
At the top level the overall problem can be broken down into four main subproblems: shape acquisition, description generation, the clustering algorithm, and inspection and manipulation of results by users. The very first prerequisite however is to clarify the term "shape".
A shape as understood here is a connected set of points, further restricted to constitute a closed non-overlapping polygonal path, invariant under translation, rotation, and scaling (but not shearing). This characterisation excludes lines and typical polylines from being shapes but includes anything expressed by the SVG elements: rect, circle, ellipse, polygon, and path. Note that the same perceptual shape can be embodied in various syntactic formulations and depend on the document context higher up in the tree. Similarity as computed here is perceptual and not syntactic.
4. SVG-adequate Solutions
The complete set of solutions developed can best be organised and explained according to the four subtasks involved: (a) getting polygon vertices from SVG source syntax, (b) computing Fourier Descriptors from / for these vertices, (c) applying the clustering algorithm, and (d) displaying and manipulating the cluster tree structure and cluster contents.
The derivation of the necessary geometric information from raw SVG documents is carried out on the basis of the Batik API. The source file is parsed and a GVTBuilder object creates the corresponding GVT tree, which is then walked recursively down from its root, retaining only and all the ShapeNode objects for further processing.
How Fourier descriptors represent a polygon is nicely summarised in chapter 17.5 of [Bigun] and the accompanying figures. The basic idea is that the vertex coordinates constitute a sequence of complex numbers, to which the Discrete Fourier Transform can be applied, to produce raw coefficients, which can then be normalised to obtain the desired descriptors.
Among the various known clustering algorithms hierarchical agglomerative techniques (cf. section 5.1 of [JaiMurFly]) are the ones best adapted to our application goals of data exploration.
Displaying and manipulating the cluster tree structure and cluster contents are very important GUI-related capabilities. However, users first interact with two other visual components: the main application window and (optionally) the Clustering Candidate Inspectors (one per loaded document), which provide two additional informative, clustering-relevant views of the SVG documents.
5. Experiments in Three Application Areas
We have to date experimented mainly with data taken from three application areas: clip art, technical drawings, and the glyphs of Chinese characters. The usefulness of clustering as a tool for analysis and discovery can be demonstrated intuitively by running through a simple concrete example taken from the clip art domain. Please refer to the screen snapshot in the accompanying JPEG file.
You are looking for thunderbolt-style arrows. A keyword-based search has not produced useful results, so you try our software. You go to http://openclipart.org, grab the 105 files in the ".../shapes/arrows" directory, and cluster their contents. Our system finds 236 shape instances in all and immediately shows you the top of the cluster tree.
Now you have two (non-exclusive) options. (a) You can expand the tree, level by level, and visually inspect the results. In this case, a cluster with four thunderbolts comes into view at the tenth level down. (b) You can cut the tree at some threshold and thus discover which clusters and outliers exist at that degree of cluster compactness. A typical value to begin with is 0.1. In this case, we get seven outliers and 24 clusters, the 8th best of which is the one with four thunderbolts.
6. Conclusion
For the time being we have only developed a proof-of-concept prototype, but the system demonstrates the feasibility of integrating SVG with Data Mining and Content-Based Image Retrieval, and begins to show what benefits can be gained by doing so.
7. References
[Bigun] Bigun, Josef: Vision with Direction: A Systematic Introduction to Image Processing and Computer Vision, Springer, 2006, isbn 9783540273226
[CosCes09] Costa, Luciano Da Fontoura & Cesar, Roberto Marcondes Jr.: "Shape Analysis and Classification: Theory and Practice", 2nd ed., Taylor & Francis, 2009, isbn 9780849379291
[DSDM] Di Sciascio, Eugenio, Donini, Francesco & Mongiello, Marina: "A Knowledge Based System for Content-based Retrieval of Scalable Vector Graphics Documents", Proc. ACM Symposium on Applied Computing, pp. 1040-1043, March 2004, Nicosia, Cyprus
[JaiMurFly] Jain, A. K., Murty, M. N., & Flynn, P. J.: "Data Clustering: A Review", ACM Computing Surveys, Vol. 31, No.3, September 1999, pp. 264-322
[KeyWin99] Keyes, L. & Winstanley, A.C.: Fourier Descriptors as a General Classification Tool for Topographic Shapes, IMVIP '99 Proc. Irish Machine Vision and Image Processing Conference, pp. 193-203, Dublin City University, September 1999
[LewEtAl] Lew, Michael et al.: "Content-Based Multimedia Information Retrieval: State of the Art and Challenges", ACM Trans. Multimedia Computing, Comm. Appli., Vol. 2, No. 1, February 2006, pp. 1-19
[RTZ] Ras, Zbigniew; Tsumoto, Shushaku; Zighed, Djamel (eds): Mining Complex Data, Springer, 2008, isbn 3-540-68415-8
Links:
Hide Abstract
- Clustering SVG Shapes:
- Lang, Ruth (uismedia)
Show Biography
Ruth Lang is a landscape architect specialising in GIS and worked with SVG since 2002. Co-founder of uismedia (1998), developing Web Mapping and GeoWeb solutions based on the SVG technology (expl. Mappetizer).
- Mappetizer Tourist- and City-Info and Mappetizer Travel Diary:
Show Abstract, Paper (Separate Tab)Mappetizer Tourist- and City-Info and Mappetizer Travel Diary
SVG Web Mapping Applications
Papertopic: SVG for Webmapping and Online GIS/GML
Author(s): Lang, Ruth (uismedia) and Armin Müller (uismedia)
Introduction
Mappetizer "Tourist Info", "City Info" and "Travel Diary" are SVG based web mapping applications, which directly can read GPS data (GPX files).
As Mappetizer "Tourist Info" and "City Info" are for public use on the internet (whether municipality, county or city), "Travel Diary" can be seen as an application for everybody's use. But the philosophy and technique behind all the applications are the same.
Main goals and ideas of the products are:
- Quasi-direct import of GPS data (GPX files)
- Displaying of any information based on geograpic data, like points (= waypoints, e.g. hotels, schools, places of interest, underground stations), lines (= tracks, e.g. bicycle and hiking tours, online guided city tours) and polygons.
- Extended scope on descriptive information about the tracks and waypoints, including text, pictures, links, addresses, ranking and rating.
- Support of multilingualism.
- Analyses of the tracks (e.g. length, duration, elevation).
- Not depending on any specific web server technologies or database.
- Not depending on Google Maps and their terms of use.
- Full control on layout and design.
- Expandability and flexibility.
All web mapping solutions simply bases on open standards like HTML, SVG and XML.
So they can be used on a local machine, published on the web or be given away on CD-ROM or DVD and be viewed within a web browser.Underlaying Technique
Dojo Toolkit (http://www.dojotoolkit.org)
The application uses the open source modular JavaScript library Dojo Toolkit (http://www.dojotoolkit.org) and the Dojo widgets system. These are prepackaged components of JavaScript code, HTML markup and CSS style declarations that can be used to enrich websites with various interactive features that work across browsers.
SVG elements, Map and Legend
The map and the legend of the application are (embedded) SVG elements.
OpenStreetMap (http://www.openstreetmap.org)
The web application uses OpenStreetMap (OSM) as a background layer. OSM data are directly imported via the OSM Mapnik Tile Server (http://tile.openstreetmap.org/), so the user benefits from perpetual up-to-dateness without having to concern about. The slippy map application rendered by Mapnik provides 18 zoom levels. Depending on the choosen extent the appropriate zoom level is calculated, and displayed then.
OSM Mapnik data are in a Mercator projection, so all GPS data have to be transformed from longitude/latitude values to the Mercator projection.The GPX-files then are overlaid on this background layer, organized in different groups (<g/>) and displayed as SVG paths (<path/>), circles (<circle/>) or images (<image/>).
Importing the GPX Files
The XMLHttpRequest object is used for making asynchronous calls to the server to retrieve data. Dojo Toolkit offers for this the dojo.xhrGet() function and does all the work.
The data returned from the server are then handled as an XML object. To avoid problems with MIME types, the filename extension .gpx has to be changed to .xml and the gpx tag has to be cleaned from its attributes. Beside being aware of the appropriate character encoding, these are all changes which has to be done with the gpx file so the application can visualize it.Using and Extending the GPX 1.1 Schema Documentation (http://www.topografix.com/gpx/1/1) for describing the GPS data
The GPS/XML files take over the GPX 1.1 Schema Documentation and uses different existing tags for further information about the track or waypoint, like the name <name/>, comment <cmt/>, description <desc/> or type <type/>.
Further information which are requested within a city and tourist information system (like rendering options, symbology, images, specifications, addresses) are described within the tag. This tag is explicitly implemented to extend the GPX schema. As the application supports multilingualism, the tags can be expanded with different language tags, like:
<name>
<en>English name</en>
<de>Deutscher Name</de>
</name>
GeoNames WebServices (http://www.geonames.org)
To expand the functionalities, the application uses different Geonames WebServices, like "findNearbyWikipedia" or "countryInfo".
Dojo Toolkit offers cross-site data access with the function dojo.io.script.get() for JSON objects.Next Steps
- Support of geotagged photos
- Implementing other GeoNames WebServices (e.g. findNearByWeather, findNearbyStreet)
- Extending the analyses tools, e.g. providing altitude profiles
Links:
- Example: Ruthle's Travel Diary
- Homepage: Mappetizer Travel Diary
- Homepage: Mappetizer Web Mapping Software
Hide Abstract
- Mappetizer Tourist- and City-Info and Mappetizer Travel Diary:
- Lasorsa, Yohan
- Sound Objects for SVG:
Show AbstractSound Objects for SVG
Papertopic: Mobile SVG Solutions
Author(s): Lemordant, jacques (INRIA), Colbrant, Audrey (INRIA), Razafimahazo, Mathieu (Inria) and Yohan Lasorsa
Sound Objects for SVG
A.Colbrant, Y.Lasorsa, J.Lemordant, M.Razafimahazo
EPI WAM, INRIA, http://wam.inrialpes.fr
A2ML and Sound Objects
A sound object [1] is a time structure of audio chunks whose duration is on the time scale of 100 ms to several seconds. These sound objects have heterogeneous and time-varying properties. Sound objects, also called audio cues, are the basic elements of any format for interactive audio. We have designed an XML language (A2ML[8]) for interactive audio on mobiles which offers, concerning the sequencing of sounds, a level of capabilities similar to that of iXMF, the interactive audio file format defined by the Interactive Audio Special Interest Group (IASIG) [2]. A2ML uses SMIL [3] timing attributes to control sound objects and supports not only sequencing like iXMF but also 3D sound rendering and declarative parameters's animation, DSP and positional parameters, by embedding the SMIL animation module. Like in a traditional mixing console, mix groups can be used to regroup multiple cues and apply mix parameters to all of them at the same time.
SVG and TCDL Dispatching language
We have to find a way to transfer events in the SVG world into cue events. We don’t want sound objects to be positioned in the SVG world but activated indirectly through events. This is done through TCDL, a Tag-based Cue Dispatching Language, reminiscent from NVDL (Namespace-based Validation Dispatching Language) [4]. Requests for instanciation of sound objects are done through TCDL. As TCDL allows you to build groups of sound objects, selective rendering of sound layers is possible depending on the user's preferences. Then A2ML can be thought as an audio style sheet for SVG, this separation of modeling and audio rendering being similar to what is done for the web of documents with HTML and CSS style sheets.
Sound Manager
TCDL sends requests to a sound manager with A2ML reading capability. The sound manager’s response to a given cue instantiation may be simple, such as playing or halting a 3D sound source, or it may be complex, such as dynamically manipulating various DSP parameters over time. The sound manager is also offering an API through which all instance parameters can be manipulated such as positions of the sound sources and the auditor. An A2ML sound manager for the iPhone has been implemented. This sound manager will be ported to OpenSymbian and Android phones when OpenSL ES [5] will be available.
SVG-A2ML Applications
We will demonstrate two kinds of mobile applications running on the iPhone based on one hand on WebKit framework for the SVG part, and on the other hand on FMOD API for the A2ML part. The first one will be an interactive audio-visual jungle and the second one an indoor guidance of visually impaired people:
. The construction of an A2ML sound model for an interactive jungle is explained in An Interactive Audio System for Mobile [6]. We will show how this A2ML sound model can be used with an SVG model of a jungle. The glue between these two similar languages is done through rules expressed in TCDL which are activated by SVG DOM Events.
. The sonification of an indoor SVG map [8] for the guidance of visually impaired people will be explained and we will show how SVG SMIL animations can be used in conjunction with A2ML SMIL animations allowing us to test and adjust the sound mixing parameters.
[1] Sound Objects, based on Pierre Schaeffer’s work, http://en.wikipedia.org/wiki/Pierre_Schaeffer
[2] Interactive XMF, Interactive Audio Special Interest Group, http://www.iasig.org./wg/ixwg/
[3] Synchronized Multimedia Integration Language (SMIL 2.1), W3C, http://www.w3.org/TR/SMIL2/
[4] NVDL (Namespace-based Validation Dispatching Language), http://www.nvdl.org
[5] OpenSL ES, http://www.khronos.org/opensles/
[6] An Interactive Audio System for Mobile. Yohan Lasorsa, Jacques Lemordant, 127th AES Convention.
[7] Augmented Reality Audio Editing, Jacques Lemordant, Yohan Lasorsa, 128th AES Convention.
[8] A2ML specification, https://gforge.inria.fr/projects/iaudio
Hide Abstract
- Sound Objects for SVG:
- Lee, Inkyun (HUONE, Senior Research Engineer)
- Accelerating SVG Tiny with multimedia hardware on mobile phones:
Show AbstractAccelerating SVG Tiny with multimedia hardware on mobile phones
Papertopic: Mobile SVG Solutions
Author(s): Baek, Nakhoon (Kyungpook National University), Lee, Hwanyong (HUONE Inc.), Lee, Inkyun (HUONE) and Jiyoung Yoon (Huone)
Hardware acceleration of the SVG mobile player is required for larger screens and better user experiences. Currently, a feasible way of this acceleration would be realized on the OpenGL, OpenGL ES or OpenVG hardware, while these high-end hardware chips are so expensive and need much higher power consumption. In this paper, we suggest another cost-effective way of accelerating SVG mobile players, based on the wide-spread and inexpensive multimedia hardware of mobile phones. We first accelerated OpenVG with the fundamental features of multimedia hardware including bit-block transfer, image processing and blending operations, and then modified the SVG mobile player to use these accelerated OpenVG features. Our final implementation shows remarkable performance enhancement for displaying vector contents and impressive enhancements for displaying bitmap contents. Reducing a great amount of CPU work load is another important advantage of our implementation, and now CPU can be actively used for other tasks. Conclusively, our implementation delivers much better performance and reduced CPU work load to the SVG mobile players, without any additional hardware to the mobile phone devices.
Hide Abstract
- Accelerating SVG Tiny with multimedia hardware on mobile phones:
- Lee, Hwanyong (HUONE Inc., CTO and Technocal Marketing Director)
Show Biography
BS Computer Science at KAIST in 1990, MS Computer Engineering at POSTECH in 1992, PhD Candidate at POSTECH and KNU, since 2004, CTO and Technical Marketing Director of HUONE Inc.
- Accelerating SVG Tiny with multimedia hardware on mobile phones:
Show AbstractAccelerating SVG Tiny with multimedia hardware on mobile phones
Papertopic: Mobile SVG Solutions
Author(s): Baek, Nakhoon (Kyungpook National University), Lee, Hwanyong (HUONE Inc.), Lee, Inkyun (HUONE) and Jiyoung Yoon (Huone)
Hardware acceleration of the SVG mobile player is required for larger screens and better user experiences. Currently, a feasible way of this acceleration would be realized on the OpenGL, OpenGL ES or OpenVG hardware, while these high-end hardware chips are so expensive and need much higher power consumption. In this paper, we suggest another cost-effective way of accelerating SVG mobile players, based on the wide-spread and inexpensive multimedia hardware of mobile phones. We first accelerated OpenVG with the fundamental features of multimedia hardware including bit-block transfer, image processing and blending operations, and then modified the SVG mobile player to use these accelerated OpenVG features. Our final implementation shows remarkable performance enhancement for displaying vector contents and impressive enhancements for displaying bitmap contents. Reducing a great amount of CPU work load is another important advantage of our implementation, and now CPU can be actively used for other tasks. Conclusively, our implementation delivers much better performance and reduced CPU work load to the SVG mobile players, without any additional hardware to the mobile phone devices.
Hide Abstract
- Accelerating SVG Tiny with multimedia hardware on mobile phones:
- Lee, Kwee Hui (Ecava Sdn. Bhd.)
- SVG animations' constrain in SCADA application:
Show Abstract, Paper (Separate Tab)SVG animations' constrain in SCADA application
Papertopic: SVG for Multimedia Presentations
Author(s): Lee, Kwee Hui (Ecava Sdn. Bhd.) and Foot Yow Wong (Ecava Sdn Bhd)
SCADA/HMI, a real time monitoring system is recently developed to be working on web. It is very common for people nowaday, to be able to monitor and control their home/office and plant remotely using a web client.
SCADA/HMI, which is characterized by rich mimic, has traditionally functioned as a desktop application. When SCADA/HMI is required to run on intranet or Internet, Java technologies and ActiveX technologies, which are not W3C standard, were mainly used to handle the extensive graphical animations over this media.
SVG has made rich animations possible over the net without using proprietary technologies. Ecava has developed and delivered its first SVG based SCADA system called “IntegraXor” as early as 2003. Ecava further developed XSAC (IntegraXor SCADA Animation Code) which allows animations to be done easily by linking a JavaScript animation library instead of doing JavaScript programming. XSAC is a series of animation attributes written in JSON format which can be easily generated. Ecava has developed SAGE (Scada Animation GUI Editor) based on Inkscape for such purpose.
The JSON syntax contains the animation to work, a tag name to be listen, and the parameters to take action. For example a circle created in Inkscape is given a COLOR animation, and the color of the object shall change according to a predefined parameter associated with the tag value, which update from server. The update procedure requires a Javascript library to loop and make HTTP request to server.
Major Animations for SCADA application are Color, Level, Movement, Opacity, Rotate and Text. They are all tied to at least one variable which is normally associated with data from an external field equipment. The animations shall correspond to the actual status of the field equipments.
Below are some samples of XSAC as compared to native SVG animation elements which are extracted from SVG specification 1.1.
<table>
<tr>
<th>
XSAC
</th>
<th>
SVG Animations Elements
</th>
</tr>
<tr>
<td>
{attr:'color', list:[{tag:VARm, data:NUMm, param:COLORm}, {tag:VARn, data:NUMn, param:COLORn}/*, ...*/]}
</td>
<td>
<animateColor attributeName="fill" attributeType="CSS" from="rgb(0,0,255)" to="rgb(128,0,0)" begin="3s" dur="6s" fill="freeze" />
</td>
</tr>
<tr>
<td>
{attr:'level', tag:VAR1, from:NUM1, to:NUM2}
</td>
<td>
<animate attributeName="height" attributeType="XML" begin="0s" dur="9s" fill="freeze" from="100" to="300" />
</td>
</tr>
<tr>
<td>
{attr:'move', tag:VAR1, from:NUM1, to:NUM2, readonly:0, path:ID}
</td>
<td>
<animateMotion path="M 0 0 L 100 100" begin="3s" dur="6s" fill="freeze" />
</td>
</tr>
<tr>
<td>
{attr:'opacity', tag:VAR1, from:NUM1, to:NUM2}
</td>
<td>
<set attributeName="visibility" attributeType="CSS" to="visible" begin="3s" dur="6s" fill="freeze" />
</td>
</tr>
<tr>
<td>
{attr:'rotate', tag:VAR1, from:NUM1, to:NUM2}
</td>
<td>
<animateTransform attributeName="transform" attributeType="XML" type="rotate" from="-30" to="0" begin="3s" dur="6s" fill="freeze" />
</td>
</tr>
</table>
SVG has animation elements and it is sufficient to support simple animations needed in SCADA mimic. However, a limitation in the design is the adaptation for external interaction. Moreover, the animation is designed to be time-oriented but not condition based or state orientated that reflects the value of a variable. As such, SCADA applications will not be able to utilize the built in design directly but they have to use JavaScript and DOM access to achieve some simple animation which involved colors, transformation, opacity and movements. In some scenario, SCADA applications need to remove an object, and append a new one in order to achieve simple animations.
We could do a workaround by using beginElementAt() and endElementAt() to freeze the animation at the desired position, but it could be confusing and it does not simplify the work required.
We propose to add state-oriented animation to the existing time-oriented animation, so that SVG native animations can be access directly. The state-oriented animation will preset a number of animations into an attribute, and the execution is determined by another attribute. A sample of this proposal is shown below:
<animateColor attributeName="fill" attributeType="CSS" fill="freeze" colors="rgb(0,0,255), rgb(128,0,0)" state="0" />
Numerous colors can be preset into an animateColor tag, where the color to be shown depends on the attribute "state". In this scenario, external interaction will only need to change the property of "state", the animation will change accordingly. Similarly, animateMotion, animateTransform and animate itself can be inserted with 2 new attributes for state-oriented animation as well.
A state-oriented SVG animation has a lot of advantages, for instance it can be used by office/home applications that generates bar chart, pie chart, or any other type of data-oriented (hence state-oriented) presentations. Below are the examples of implementation after adding 'state' attributes.
<table>
<tr>
<th>
SVG Animations Elements with additional 'state' attribute
</th>
<th>
Effect
</th>
</tr>
<tr>
<td>
<animateColor attributeName="fill" attributeType="CSS" values="rgb(0,0,255),rgb(128,0,0),rgb(0,255,0)" state="0" fill="freeze" />
</td>
<td>
'state' default value is 0, so color shall start by first color 'rgb(0,0,255)'. When value of 'state' change to 1, then color shall change to 'rgb(128,0,0), and so on and so forth.
</td>
</tr>
<tr>
<td>
<animate attributeName="height" attributeType="XML" dur="9s" fill="freeze" from="100" to="400" state="200"/>
</td>
<td>
'state' initial value is 200, so initial height is 33%. And when state value increase to 300, 'dur' still functioning for animation effect whereby it shall consume 3 seconds which is interpolated to 9 seconds.
</td>
</tr>
<tr>
<td>
<animateMotion path="M 0 0 L 100 100" dur="6s" fill="freeze" state="10%"/>
</td>
<td>
'state' initial value is 10%, so it will be started at 10% of the total path. And it shall take 6 seconds to travel from 0 to 100%.
</td>
</tr>
<tr>
<td>
<set attributeName="visibility" attributeType="CSS" to="visible" dur="6s" fill="freeze" from="0" to="100" state="10"/>
</td>
<td>
'state' initialized with value of 10, it shall be proportional to 'from' and 'to' values. Total time needed to animate from 'from' to 'to' shall be 6 seconds.
</td>
</tr>
<tr>
<td>
<animateTransform attributeName="transform" attributeType="XML" type="rotate" from="-30" to="10" dur="6s" fill="freeze" state="-10"/>
</td>
<td>
'state' initialized with value of -10 which is at 180 degree. When value is at 'from', the position is 0 degree, when the value is at 'to' the position is at 360 degree.
</td>
</tr>
</table>
Hide Abstract
- SVG animations' constrain in SCADA application:
- Le Feuvre, Jean (Telecom ParisTech, Research Scientist)
- SVG Extensions for 3D displays:
Show Abstract, Paper (Separate Tab)SVG Extensions for 3D displays
Papertopic: SVG for Multimedia Presentations
Author(s): Le Feuvre, Jean (Telecom ParisTech)
3D displays, allowing natural perception of depth by the viewer, are increasingly gaining acceptance, on mobile as well as on digital TV markets, and standardization bodies such as MPEG or ITU have produced several technologies to transmit and compress video content for such systems. In this race to 3D, user interface and interactive services have been left aside, and no standard tool exists to allow authors using the display’s 3D capabilities in their user interface. While pure 3D interface languages such as X3D or Collada have intrinsic 3D information, common standard languages used in interactive services such as (X)HTML or SVG lack depth information.
In this paper, we will present a prototype of a hardware accelerated, depth-aware 2D rendering engine. This underlying hardware uses a Depth-Image Base Representation model and can render RGBA bitmaps with a depth component, either uniform or variable, in which case the depth component is usually called “depth map”. The hardware is in charge of composing the different input images into the different views depending on the screen characteristics. The main advantage of this method is to avoid doing multiple rendering passes for each view.
Currently, the prototype hardware doesn’t handle hardware accelerated vector graphics such as OpenVG, therefore the rasterization process is performed in software on off-screen surfaces which are then passed to the hardware. The rendering engine supports several declarative formats for interactive services, which have all been extended to allow for depth information. Although our prototype also supports 3D languages such as X3D, in the rest of this paper we will focus on the SVG language, especially the SVG 1.2 Tiny profile since our prototype is more oriented towards embedded systems.
Objects in a depth-aware typical 2D interactive service can be separated in two categories: objects with a constant depth where all pixels are at the same distance from the viewer, later called flat objects, and objects with non-uniform depth.
Obviously, depth positioning of flat objects on the screen is quite trivial and only needs depth value information to be added to the language; we defined a new attribute “depth-offset” for that purpose.
Objects with non-uniform depth are either bitmap-based objects coming from <video> or <image> elements, or synthetic graphics. In order to generate synthetic graphics with depth information, we added a “depth-map” attribute to grouping elements in an approach similar to SVG filters. This depth-map attribute may point to a gradient, in which case the depth component of the group will be composed of the alpha plane of the gradient. The depth-map attribute may also point to another grouping element, in which case the depth component will be the alpha component of this grouping component. In both cases, color information of the referenced element is ignored. This technique enables computing complex synthetic depth maps uncorrelated with the color information.
Similarly to 2D affine transformation, depth information can be modified at composition time with the depth-offset parameter, which will translate the object closer or further from the user. Moreover, since our prototype supports non-uniform depth objects, we also introduced a depth scaling effect, which is a scaling factor applied to each depth value. This enables flattening or strengthening the depth effect of individual objects in a composition.
The depth values are by default in the range -1.0 (farthest point viewable on the display’s axis) to 1.0 (nearest point). This calibration can however be modified at run-time by the content, by modifying a “depth-viewbox”.
The impact on the SVG viewing model have been discussed in the elaboration of the SVG Transform specification. Several approaches are possible:
A: let the author organise the elements as needed, strictly following the painter’s algorithm.
B: Let the player organise the elements as needed, with a z-sorting of all elements present in the composition
C: allow a mix of both cases, where only subparts of the composition are z-sorted.
In our prototype we support these scenario by adding a “z-sorted” attribute on grouping elements.
Hide Abstract
- SVG Extensions for 3D displays:
- Lemordant, jacques (INRIA, Researcher)
- Sound Objects for SVG:
Show Abstract, Paper (Separate Tab)Sound Objects for SVG
Papertopic: Mobile SVG Solutions
Author(s): Lemordant, jacques (INRIA), Colbrant, Audrey (INRIA), Razafimahazo, Mathieu (Inria) and Yohan Lasorsa
Sound Objects for SVG
A.Colbrant, Y.Lasorsa, J.Lemordant, M.Razafimahazo
EPI WAM, INRIA, http://wam.inrialpes.fr
A2ML and Sound Objects
A sound object [1] is a time structure of audio chunks whose duration is on the time scale of 100 ms to several seconds. These sound objects have heterogeneous and time-varying properties. Sound objects, also called audio cues, are the basic elements of any format for interactive audio. We have designed an XML language (A2ML[8]) for interactive audio on mobiles which offers, concerning the sequencing of sounds, a level of capabilities similar to that of iXMF, the interactive audio file format defined by the Interactive Audio Special Interest Group (IASIG) [2]. A2ML uses SMIL [3] timing attributes to control sound objects and supports not only sequencing like iXMF but also 3D sound rendering and declarative parameters's animation, DSP and positional parameters, by embedding the SMIL animation module. Like in a traditional mixing console, mix groups can be used to regroup multiple cues and apply mix parameters to all of them at the same time.
SVG and TCDL Dispatching language
We have to find a way to transfer events in the SVG world into cue events. We don’t want sound objects to be positioned in the SVG world but activated indirectly through events. This is done through TCDL, a Tag-based Cue Dispatching Language, reminiscent from NVDL (Namespace-based Validation Dispatching Language) [4]. Requests for instanciation of sound objects are done through TCDL. As TCDL allows you to build groups of sound objects, selective rendering of sound layers is possible depending on the user's preferences. Then A2ML can be thought as an audio style sheet for SVG, this separation of modeling and audio rendering being similar to what is done for the web of documents with HTML and CSS style sheets.
Sound Manager
TCDL sends requests to a sound manager with A2ML reading capability. The sound manager’s response to a given cue instantiation may be simple, such as playing or halting a 3D sound source, or it may be complex, such as dynamically manipulating various DSP parameters over time. The sound manager is also offering an API through which all instance parameters can be manipulated such as positions of the sound sources and the auditor. An A2ML sound manager for the iPhone has been implemented. This sound manager will be ported to OpenSymbian and Android phones when OpenSL ES [5] will be available.
SVG-A2ML Applications
We will demonstrate two kinds of mobile applications running on the iPhone based on one hand on WebKit framework for the SVG part, and on the other hand on FMOD API for the A2ML part. The first one will be an interactive audio-visual jungle and the second one an indoor guidance of visually impaired people:
. The construction of an A2ML sound model for an interactive jungle is explained in An Interactive Audio System for Mobile [6]. We will show how this A2ML sound model can be used with an SVG model of a jungle. The glue between these two similar languages is done through rules expressed in TCDL which are activated by SVG DOM Events.
. The sonification of an indoor SVG map [8] for the guidance of visually impaired people will be explained and we will show how SVG SMIL animations can be used in conjunction with A2ML SMIL animations allowing us to test and adjust the sound mixing parameters.
[1] Sound Objects, based on Pierre Schaeffer’s work, http://en.wikipedia.org/wiki/Pierre_Schaeffer
[2] Interactive XMF, Interactive Audio Special Interest Group, http://www.iasig.org./wg/ixwg/
[3] Synchronized Multimedia Integration Language (SMIL 2.1), W3C, http://www.w3.org/TR/SMIL2/
[4] NVDL (Namespace-based Validation Dispatching Language), http://www.nvdl.org
[5] OpenSL ES, http://www.khronos.org/opensles/
[6] An Interactive Audio System for Mobile. Yohan Lasorsa, Jacques Lemordant, 127th AES Convention.
[7] Augmented Reality Audio Editing, Jacques Lemordant, Yohan Lasorsa, 128th AES Convention.
[8] A2ML specification, https://gforge.inria.fr/projects/iaudio
Hide Abstract
- Sound Objects for SVG:
- LI, Hui (School of Computer, South China Normal University)
- Teaching Multimedia Course by using SVG:
Show AbstractTeaching Multimedia Course by using SVG
Papertopic: SVG for Multimedia Presentations
Author(s): Chi, Guobin (South China Normal University), LI, Yan (South China Normal University), LI, Hui (School of Computer, South China Normal University) and Xingfang Wang (School of Computer, South China Normal University)
Multimedia is media and content that uses a combination of different content forms. Teaching the basic characteristics of media in the Multimedia course is more theory-oriented and designed to give students fundamental knowledge of how digital data is stored, digital media are created and how information is transmitted over a network. To cement these concepts students are given hands-on experiences. Usually, teaching this part of the media in the course is broken into five sections (text, images (include graphics), animation, audio and video) each with a theoretical and practical component. In order to fit the new development of delivery multimedia in network, SVG was involved in teaching basic concepts of five media.
As is well known to all, SVG (Scalable Vector Graphics) is an open standard enabling high quality, dynamic, interactive, stylable graphic and delivering over the Web and wireless communication and recommended by W3C. It can also support the text, image, animation, audio and video except the graphics using accessible, human-readable XML. Therefore, we introduced it into the curriculum design of multimedia system course that bridges the gap between digital media and programmers for the students from both software engineering and digital media with digital art. The project develops curriculum material including a teaching material for oral presentation and a studying website of SVG subject.
The teaching material is arranged around a Primer of material relevant to both computer science and digital art students for a bilingual course of multimedia system; an advanced Computer Science (CS) Module emphasizing the mathematics and technology underlying digital media; and an advanced Art Module emphasizing aesthetics and design. The learning units of the media characteristics mainly focused on topic areas are digital graphics, image and color model, text, audio, video and multimedia programming etc. And the studying website was developed as a part of the bilingual course of multimedia system in order to improve Student Learning through the Use of Web Simulation Activities and Case Studies in Multimedia Programming". The Web material is divided in a fine-grained manner into recombined topics, interactive exercises and demonstrations. Through the studying Website of the SVG subject, it introduces the basic concepts of media and programming for multimedia system, students will learn the principles of object oriented programming and how to create scripts for the manipulation of video, graphics, image and text to construct a complete multimedia presentation or system.
In the project, the curriculum was redesigned in three core courses in the Multimedia Programming, Multimedia storing and Networking, and Multimedia Applications. Historically, the students have had difficulty learning the basic concepts, and then applying these concepts and programming to the process of developing their own projects. Thus, the project also addresses these issues by adapting and implementing exemplary educational materials and pedagogical strategies to revise the three core courses of the major mentioned above. At the same time, as a part of our project, a tutoring program and a faculty development SVG script1ing were instituted to extend student learning and ensure integration of the newly developed courseware into the teaching practices of the faculty. The course guides students through developing applications and also introduces them to programming in a networked and multiple user environments with SVG JAVA Scripts and SVG Media Server. The SVG Media Server is used to provide the multiple user environments and allow the students to build on their Action Script skills from the Multimedia Programming class. To help explain the concepts in the class and to link them to real-world applications, the Case Study method developed at the multiple choice in their daily life and own knowledge for Case Study Teaching in Science is used.
The case studies are divided into two parts including the monomial or validated experiment and integrated experiment. The purpose of the former one just lets students familiarized with the document format of SVG, storing solution, drawing approaches and scripting of SVG basic graphic elements such as line, rectangle, circle, ellipse, polygon and polyline etc.; And understanding the media characteristics and interactivity of SVG and creating interactive animation. These monomial experiments are involved the basic knowledge of computer graphics, animation, audio and video etc. Students are asked to make a creative and original works thus the topics of the experiment are not limited. The integrated experiment try to make a story of the multimedia project in which a SVG work must be included in the presentation or system.
As a result, the new knowledge and technique of SVG introduces to the students as a special lecture in the course of multimedia system, in which students can have 1) a systemic and in depth studying platform with the studying Website of SVG subject and related courseware; 2）A combination of SVG and basic concepts of media, it enhances the departed knowledge and technique during the study. 3) Especially, it is very important to study the new technique such as SVG through practice. In conclusion, new technology is in progress with each passing day, SVG introduces into the multimedia system course that is a tendency to promote teaching quality and an important part of teaching reformation in teaching multimedia course.
KEYWORDS: Multimedia System Course, SVG, Text, Animation, Graphics, and moving pictures
Hide Abstract
- Teaching Multimedia Course by using SVG:
- LI, Yan (South China Normal University, Associate Dean of School of Computer)
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 project “Theory and Methods of On-Line Overlay Analysis of Spatial Information” supported by the National Natural Science Foundation of China (60842007). She has been continuing to study the extension of Spatial Functionality for SVG Specification for many years. 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 (South China Normal University) and Guobin Chi (South China Normal University)
A SVG WebGIS is a studying hotspot in recent years, and many people try to make a XML-GML-SVG solution to develop a WebGIS. 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 side will be sent to the server side for executing and answering. Obviously, when a lot of concurrent user requests occurred, the efficiency of the system must be slowed down sharply. And then, because of 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 and decorating styles. Whereas, SVG is defined as a graphic standard in the network environment it can not be properly represented the spatial information. After SVG is extended its representation of spatial information such as map position, map analysis, map decoration and its data structure it can be used to satisfy the characteristics of spatial information (We have presented in former conference, 2008).
Even so, there is still one more problem met in developing procedure, which is how to update or change datasets for various projects in the system of the SVG WebGIS. This means that it is important to develop an architecture of spatial service system and an applied framework of SVG WebGIS in order to organize all the definitions, functions and extensions of SVG to fit or update for various applications after SVG (Scalable Vector Graphics) specification is extended the representation of spatial information. This paper proposed a SVG standardized document as a framework to implement a WebGIS project on the client side. It proceeds with using the SVG-based spatial representation model to support a complete representation of spatial information for SVG first, and then a SVG standardized document is defined to a spatial delivery framework on the client side of the system. This framework is regarded to be SVG WebGIS system or a project which can be used to execute all the functionalities such as: defining map position, transforming map projection, spatial analyzing of the maps, and decorating maps etc. Users can only prepare or transform their data according to the standardized document of SVG spatial model, thus, just update or load their own spatial data into the framework, and then, they can implement the system with all the functions mentioned above. In order to give a complete solution it is also important to mention some storage strategies such as SVG visualizing database and the standardized document of GML application schema and its management needed to be improved the efficiency of the system. Finally, the workflow of a case study is showed by using the SVG standardized document for implementing 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.
Keywords: SVG WebGIS; SVG Standardized document; spatial information, GML data module
Hide Abstract
- Teaching Multimedia Course by using SVG:
Show AbstractTeaching Multimedia Course by using SVG
Papertopic: SVG for Multimedia Presentations
Author(s): Chi, Guobin (South China Normal University), LI, Yan (South China Normal University), LI, Hui (School of Computer, South China Normal University) and Xingfang Wang (School of Computer, South China Normal University)
Multimedia is media and content that uses a combination of different content forms. Teaching the basic characteristics of media in the Multimedia course is more theory-oriented and designed to give students fundamental knowledge of how digital data is stored, digital media are created and how information is transmitted over a network. To cement these concepts students are given hands-on experiences. Usually, teaching this part of the media in the course is broken into five sections (text, images (include graphics), animation, audio and video) each with a theoretical and practical component. In order to fit the new development of delivery multimedia in network, SVG was involved in teaching basic concepts of five media.
As is well known to all, SVG (Scalable Vector Graphics) is an open standard enabling high quality, dynamic, interactive, stylable graphic and delivering over the Web and wireless communication and recommended by W3C. It can also support the text, image, animation, audio and video except the graphics using accessible, human-readable XML. Therefore, we introduced it into the curriculum design of multimedia system course that bridges the gap between digital media and programmers for the students from both software engineering and digital media with digital art. The project develops curriculum material including a teaching material for oral presentation and a studying website of SVG subject.
The teaching material is arranged around a Primer of material relevant to both computer science and digital art students for a bilingual course of multimedia system; an advanced Computer Science (CS) Module emphasizing the mathematics and technology underlying digital media; and an advanced Art Module emphasizing aesthetics and design. The learning units of the media characteristics mainly focused on topic areas are digital graphics, image and color model, text, audio, video and multimedia programming etc. And the studying website was developed as a part of the bilingual course of multimedia system in order to improve Student Learning through the Use of Web Simulation Activities and Case Studies in Multimedia Programming". The Web material is divided in a fine-grained manner into recombined topics, interactive exercises and demonstrations. Through the studying Website of the SVG subject, it introduces the basic concepts of media and programming for multimedia system, students will learn the principles of object oriented programming and how to create scripts for the manipulation of video, graphics, image and text to construct a complete multimedia presentation or system.
In the project, the curriculum was redesigned in three core courses in the Multimedia Programming, Multimedia storing and Networking, and Multimedia Applications. Historically, the students have had difficulty learning the basic concepts, and then applying these concepts and programming to the process of developing their own projects. Thus, the project also addresses these issues by adapting and implementing exemplary educational materials and pedagogical strategies to revise the three core courses of the major mentioned above. At the same time, as a part of our project, a tutoring program and a faculty development SVG script1ing were instituted to extend student learning and ensure integration of the newly developed courseware into the teaching practices of the faculty. The course guides students through developing applications and also introduces them to programming in a networked and multiple user environments with SVG JAVA Scripts and SVG Media Server. The SVG Media Server is used to provide the multiple user environments and allow the students to build on their Action Script skills from the Multimedia Programming class. To help explain the concepts in the class and to link them to real-world applications, the Case Study method developed at the multiple choice in their daily life and own knowledge for Case Study Teaching in Science is used.
The case studies are divided into two parts including the monomial or validated experiment and integrated experiment. The purpose of the former one just lets students familiarized with the document format of SVG, storing solution, drawing approaches and scripting of SVG basic graphic elements such as line, rectangle, circle, ellipse, polygon and polyline etc.; And understanding the media characteristics and interactivity of SVG and creating interactive animation. These monomial experiments are involved the basic knowledge of computer graphics, animation, audio and video etc. Students are asked to make a creative and original works thus the topics of the experiment are not limited. The integrated experiment try to make a story of the multimedia project in which a SVG work must be included in the presentation or system.
As a result, the new knowledge and technique of SVG introduces to the students as a special lecture in the course of multimedia system, in which students can have 1) a systemic and in depth studying platform with the studying Website of SVG subject and related courseware; 2）A combination of SVG and basic concepts of media, it enhances the departed knowledge and technique during the study. 3) Especially, it is very important to study the new technique such as SVG through practice. In conclusion, new technology is in progress with each passing day, SVG introduces into the multimedia system course that is a tendency to promote teaching quality and an important part of teaching reformation in teaching multimedia course.
KEYWORDS: Multimedia System Course, SVG, Text, Animation, Graphics, and moving pictures
Hide Abstract
- Applied Standardization for implementing SVG WebGIS:
- Lilley, Chris (W3C, Technical Director)
- Graphical Effects Beyond SVG 1.1:
Show AbstractGraphical Effects Beyond SVG 1.1
Papertopic: Panel Discussions
Author(s): Neumann, Andreas (City of Uster), Lilley, Chris (W3C), Schepers, Doug (W3C) and Tavmjong Bah
Panelists will briefly introduce some advanced topics that may be released as modules for SVG 2.0. Among others, the following topics will be covered: "vector effects", "SVG parameters", advanced markers or the extension of the "path" elements with mathematical construction methods. Tav will discuss potential enhancements of the SVG language from the perspective of the Inkscape team, that works on an SVG authoring tool. Some of the topics are already in draft state, some are just ideas.
The goal is to detect missing pieces and useful additions and to gather use cases for them. In addition, technical issues around the proposal will be discussed or if the problem can be solved with existing SVG 1.1 mechanisms.
Attendees may prepare by reading the following already existing resources:
Hide Abstract
- Graphical Effects Beyond SVG 1.1:
- Maddox, Jerrold (Penn State University, Professor of Art)
Show Biography
Jerrold Maddox is a professor of art at Penn State University where he teaches on line courses. As well has having been involved in SVG since the first SVG Open in Zurich he is also a photographer and a web designer.
- Color and design for mobile devices - Update:
Show AbstractColor and design for mobile devices - Update
Papertopic: Mobile SVG Solutions
Author(s): Maddox, Jerrold (Penn State University)
Color and design for mobile devices - Update
Jerrold Maddox
One of the most exciting opportunities to explore, to me at least, is the interaction of color using SVG on the small screens of mobile devices. By that I mean exploring the ways color can be varied through hue, value and intensity and the interactions between them to make images which are interesting, surprising and satisfying to look at.
As an example, here is an image which works with reds and blacks in a stack of rectangles scaled at 350px and 125px:
Both the reds and blacks (most really dark reds from hex #900 to #100) become progressively darker and create a deepening color space. The reds (#f00 to #700) in this image are the same reds in the three variations on the design. The apparent changes in them is due to the altered context around them.
The first variation is the same design with instead of the deep reds for the dark, there are greens (the complimentary color of the red - hex from #0a0 to #010).
In it the contrast of the colors across the color wheel make a livelier image and because, scaled to this size—225px x 225px—the lines are narrow enough for the optical mixture of the colors to be evident.
The first of the next two examples above uses colors that take a step away from the red—to either side, a red-violet, #e09 to #601, and an yellow-orange, #f90 to #710, and the last variation is a split compliment—#09f – #02a and #089 – #031—from the opposite side of the color wheel
The possibilities, I hope these few examples make clear, are many, exciting, easy to do, scalable and light weight. For my presentation I would extend these through at least four addition designs showing other ways to explore color and shape on a small scale.
•
Links:
Hide Abstract
- Color and design for mobile devices - Update:
- Magalhães, Helder (Efacec)
Show Biography
Helder is a software engineer at the Power Systems Automation unit of Efacec, in Maia, Portugal. He is an SVG enthusiast and has been involved with the technology since 2005. He is an active committer in Apache Batik and an invited expert on the SVG Interest Group. In his spare time, he tries to help out in several open-source projects, mostly SVG-related.
- Plotting and Navigating through Data using Dynamic Charts:
Show Abstract, Presentation (Separate Tab)Plotting and Navigating through Data using Dynamic Charts
An SVG-based approach
Papertopic: Interactivity and Scripting
Author(s): Magalhães, Helder (Efacec), Sousa, A. Augusto (FEUP) and Aníbal Pinto (Efacec)
Graphical representation of values over time using charts is one of the most popular and effective ways of displaying data, easing establish of a correlation between measurements, creation of trends, prediction of system evolution and more.
Plotting data acquired in real-time and archived (historical) data are two important aspects, allowing use-cases such as system monitoring and post-crisis analysis, respectively. The differences between the use-cases pose challenges in both visualization (plot) and interaction (navigation). While the former use-case is reasonably addressed by an increasing number of software libraries, the latter is sparsely covered in the current state-of-the-art.
In this article a solution which addresses the problem is presented, based in SVG (Scalable Vector Graphics) and other Web-related technologies. A prototype which implements the solution proposal is demonstrated, as well as the currently existent system. A set of tests allows evaluating whether the established goals were achieved.
Links:
- Related work: Displaying Web Statistics in an SVG Web Application
- Related work: Electricity Distribution (press the "Output" button; requires Silverlight)
Hide Abstract
- Plotting and Navigating through Data using Dynamic Charts:
- Malleron, Vincent (PhD Student)
- SVG for Historical Documents:
Show Abstract, Paper (Separate Tab)SVG for Historical Documents
Layout Encoding and Transcript Rendering
Papertopic: Business Cases and Case Studies
Author(s): Malleron, Vincent
The number of digitized documents is in constant growth since ten years. Document enrichment and enrichment is a key point : documents have to be easily accessible and additional information have to be provided to the reader without any alteration to the original document. Moreover, navigation through and in documents have to be intuitive.
Our study is mainly dedicated to handwritten documents which are hard to render in a way that make the document understandable by any reader, but can be generalized to any type of document.
A textual document is generally composed of two kinds of informations : substance and style. The style is composed of all the layout, style and shape informations. The substance is composed of the text transcription and the additional informations.
SVG can be used to encode the style and also to render the substance in relation with the style. Usage of SVG in combination with TEI (Text Encoding Initiative) for transcription encoding allow to create a real digital document and not a simple facsimile of the original document.
1-Style encoding
A document page is composed of many structural informations : text line, paragraphs, graphic zones, etc.
In order to perform an efficient encoding of the page we choose to use SVG elements. Text lines and fragments are represented by the PATH tag, allowing to fit as well as possible with the real shape of the line. In state of the art applications, text zones are generally described by geometric shapes such as rectangle or ellipsis. Those geometric shapes do not allow to describe text zone well in most of the case. If we take the example of a 30 degree skewed line, a rectangle will include lines positioned up and down the line of interested whereas a SVG PATH will allow to follow the edges of the line. The vectorial format also allow to adapt easily the page structure description to the rendering scale. Moreover, we give an unique ID to each of the SVG elements. Communication with the TEI transcription is made simple and clear.
2-Substance Rendering
Each structural element is designated by an unique ID. Textual elements from the TEI transcription and Structural elements from the SVG are sequentially matched. After that step, each line and each fragment is associated with its corresponding zone on the image. Based on this fact we designed an application to help the reader using SVG and javascript included inside the SVG.
The principle is quite simple : SVG file is made reactive to mouse events using javascript and when the user place the mouse over a text zone, the corresponding transcription is displayed on a dedicated zone. The dedicated zone can be placed on the pointed line or on a dedicated box. A working demonstration is available the following website :
http://www.malleron.info/index.php?page=demos
Improvements to this application can be foresee : the text transcription in not the only part of a digital documents. Some definitions or annotations are also included in the document in order to improve the reader experiment and understanding. All those informations can be include in the SVG file in order to provide easy access to the whole set of informations.
Our approach to substance rendering can be compare to rendering application using Silverlight proposed by Microsoft for the congress library :
http://www.myloc.gov/Exhibitions/creatingtheus/interactives/declaration/index.html.
Usage of an Open and Inter-operable format will allow to apply this approach to any document and improve digital document reading and understanding : digital documents will no longer be considered as simple copies of the originals.
Links:
Files:
- SVG Demonstration_ Le bateau ivre
- Corresponding image file
- SVG Demonstration_Flaubert
- Corresponding image file
Hide Abstract
- SVG for Historical Documents:
- Martin, Johnny (San Jose State University)
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. Johnny holds a Ph.D. in Computer Science from the University of Minnesota.
- Mutation and Evolution of Animated SVG Figures:
Show AbstractMutation and Evolution of Animated SVG Figures
Papertopic: Graphic Design with SVG
Author(s): Martin, Johnny (San Jose State University) and Ignatius Yuwono (PayPal)
Inspired by a similar program introduced by Richard Dawkins, our program provides a dynamic updating display of primitive animated SVG biomorphs. Our SVG biomorphs evolves on the screen under the influence of mouse interactions that guide mutations along an evolutionary path. Genes control organism traits which are realized in SVG with JavaScript animation. JavaScript events trigger selective mutation forming the interface for user interaction. This paper describes a system of dynamic shape-based organisms with quantitative traits, evolving from simple to complex organisms through user selection.
Background
In The Blind Watchmaker[1], Richard Dawkins describes a computer program to simulate the evolution of biomorphs. The program presented is an example of a genetic algorithm (GA). Dawkins's program simulates biological evolution in the computer by attempting to modeling a complex structure's evolutionary development via cumulative selection.
Dawkins models an unfolding evolution with a specific goal provide by user input. In contrast to Darwinist selection the program uses user controlled selection. The biomorphs that evolve in the program develop, and their embodiment is controlled by a number of trait factors encoded in "genes" which mutate in each generation. Mutations result from user input. This alters biomorph development and leads to new biomorph forms.
The program functions as follows. A parent is selected. The subroutine REPRODUCTION runs, and generates random mutations in each of the 9 genes of the parent; the new genes are passed to the subroutine DEVELOPMENT, which draws new biomorphs based on the new genes. The result is a set of 9 offspring, each with a variation of one of the parent's genes. One offspring is selected to be the parent of the next generation. This process, repeated multiple times, gives birth to the program EVOLUTION.
Several implementations of biomorph generating programs can be found in the literature [2,3,4]. Ours offers an interesting feature that encodes traits for biomorphs to animate. The animation trait is controlled by one of several genes.
Living Biomorphs in SVG
Our version of biomorph includes genes that control for animation or movement of joints between shape structures. Effectively this allows for the development of biomorphs that are jointed with movable joints. Each successive iteration provides the biomorph with grouped sub-structures. Both shape structures, their groupings, and their movement will morph and mutate also with each successive iteration.
SVG is the ideal medium for expressing biomorph mutation since SVG allows for transforming of shape structures and their groupings--via scaling, rotation, and translation--with much less programming effort compared to other graphics systems. Since each joint allows for relative movement, SVG is also ideally suited to express biomorph animation, which can be achieved using JavaScript.
In conclusion, by using SVG as a medium, we have been able to effectively visualize systems of animated biomorphs with quantitative traits, evolving from simple to complex--having multi-jointed limbs and other complex natural and unnatural appearances--through simple user selection.
References
[1] Dawkins, R. The Blind Watchmaker, W. W. Norton & Company, 1996, ISBN-13: 978-0393315707
[2] Sims, K. Artificial evolution for computer graphics, ACM SIGGRAPH Computer Graphics, v.25 n.4, p.319-328, July 1991
[3] Bai L., Eyiyurekli M., and Breen, D.E. Self-organizing primitives for automated shape composition. In Proc. IEEE International Conference on Shape Modeling & Applications, 2008.
[4] Bai L., Eyiyurekli M., and Breen, D.E. Automated shape composition based on cell biology and distributed genetic programming. In Proc. of the 10th annual conference on Genetic and evolutionary computation, July 12-16, 2008.
[5] Moles A.A. Théorie de l'information et perception esthétique. Denoel, 1958.
[6] Gagné, C., Parizeau, M. Genericity in evolutionary computation software tools: Principles and case-study. International Journal on Artificial Intelligence Tools, 15(2):173--194, 2006.
[7] Fleischer, K.W., Barr, A.H. A multiple-mechanism developmental model for defining self-organizing geometric structures, 1995
[8] Klein, J., Spector, L. Unwitting distributed genetic programming via asynchronous JavaScript and XML. In Proc of the 9th annual conference on Genetic and evolutionary computation, July 07-11, 2007.
Hide Abstract
- An SVG Rendering Extension for Swing:
Show AbstractAn SVG Rendering Extension for Swing
Papertopic: SVG Viewer Implementations
Author(s): Yuwono, Ignatius (PayPal) and Johnny Martin (San Jose State University)
Motivation
Recent advances in toolkits make SVG a friendlier development platform, yet SVG continues to lack a mature widget library. Java Swing[1], however, offers many standard widgets organized into 17 public JFC packages and is arguably the most widely used widget library. Yet there remain some applications that are better expressed in SVG. Until now using SVG and Swing together has not been possible.
We have built a Swing, SVG interoperability framework. Although conceptually easy to state, there are considerable challenges adapting Swing to work with SVG. Swing's 2D Java rendering is designed to abstract hardware specifics, but unfortunately makes serious assumptions about the abstracted hardware layer. Swing's designers did not intend to support SVG DOM rendering. Re-hosting Swing to SVG turns out to be challenging. Architecturally, SVG and Swing are worlds apart. Our framework sets about to marry these two worlds and overcome these challenges.
Why Widgets?
Swing's TextBox widget provides control over, rich, Unicode, and multi-directional text, caret handling, accessibility, localization, keymaps, focus handling, tooltips, vertical and horizontal alignment, fonts, scroll offset, listeners, color, input methods, margins, scrollable viewport size, scrollable tracks, block, and unit increments, read-write edibility, selection regions, colorization, and highlights, and enabling dragables.
Building a mature, Swing-like native SVG widget library is theoretically possible, yet to date, this hasn't happened; and designers have shared their desire for features found in Swing and .Net[9,10].
The Framework
Our framework brings mature widgets to SVG by re-hosting Swing in SVG. A user opens a Swing application through an SVG viewport and interacts exclusively via SVG DOM events. We strip out Swing's platform-specific 2D rendering layer and re-host it via SVG. Our framework allows any existing Java Swing application to be re-hosted without source code changes by only altering Java bytecodes and augmenting the default Swing run-time library with our run-time.
Integration with custom SVG is also possible. SVG-specific application components can be added and will co-exist with Swing SVG seamlessly, although the SVG designer must be mindful of some framework constraints.
Architecture
Painting and eventing model differences between the SVG and Swing worlds present considerable challenges. In spite of the declarative-procedural impedance mismatch of these two worlds, our architecture marries them with a build-time and a run-time.
Build-time Architecture
The framework uses introspection and class re-writing at the bytecode level using BCEL[2] through the JMangler runner[3]. We achieve a goal of hosting unmodified existing Java Swing applications, since class rewriting is done post compilation. Batik[4] libraries are used to rewrite 2D Java Graphics API calls yielding a parallel Swing API hierarchy, so that for each Swing GUI component, we instantiate a mechanism for composing a group of primitive SVG shapes corresponding to the Swing visual. A wrapper-concierge BCEL does bytecode rewriting, surgically altering bytecodes of the Swing component, e.g., a Swing JTree component gets replaced with our own JTree component version.
Run-time Architecture
The run-time architecture handles events and redraws. Our framework replaces Swing's low-level 2D Java rendering, however, these cannot be used directly to generate SVG. We cannot blindly paint by adding more DOM nodes. Instead, the framework must make intelligent decisions about adding, deleting, or mutating the currently displayed SVG DOM. This is accomplished by:
- Assigning a ID to each SVG component.
- Faking maximal damage so to cause Swing to repaint all of the Swing visuals. This is because the Swing library's optimization assumptions about underlying hardware do not work correctly for the SVG DOM.
- Intercepting Swing repaints, coalescing primitive draw commands, resorting to SVG shapes, and delivering selective changes (adds, deletes, mutations) to the SVG DOM.
- Repainting is done by the SVG Viewer upon receiving our SVG DOM mutations.
SVG events are translated Swing's screen coordinates, targeted to the appropriate Swing component widget, and artificially injected into the Swing event queue.
A benefit of the run-time processing is that we always produce minimal change set to be applied to the SVG DOM, which improves SVG redraw time.
Conclusion and Future Work
Extensions we are considering:
- We would like to improve facilities to accommodate custom Swing classes, so they can be integrated more naturally as SVG Java components. Currently only built-in Swing components are handled seamlessly. User defined custom Swing components must be handled manually.
- SVG styled widget components that take advantage of SVG, but employ model on Java side for managing abstract widget state in model.
Our framework provides an alternative to native SVG widgets and offers a mature widget library, Swing. Combining this with custom SVG components, offering application developers the best of both worlds. We hope our framework addresses SVG widget libraries' immaturity concerns, and can be used to bring Java Swing applications into the DOM.
References
[1] Oracle Corporation, "Trail: Creating a GUI With JFC/Swing," 1/12/2010. [Online]. Available: http://java.sun.com/docs/books/tutorial/uiswing/index.html.
[2] The Apache Jakarta BCEL Project Team, "The Byte Code Engineering Library," Jun 3, 2006. [Online]. Available: http://jakarta.apache.org/bcel/
[3] Austermann, M. "The JMangler Project," October 28, 2004. [Online]. Available: http://roots.iai.uni-bonn.de/research/jmangler/.
[4] The Apache Software Foundation, "Batik Java SVG Toolkit," February 2010. [Online]. Available: http://xmlgraphics.apache.org/batik/.
[5] Lindsey, K. "Home page - Kevin Lindsey," 2004. [Online]. Available: http://www.kevlindev.com.
[6] Lewis, C. T., Karcz, S., Sharpe, A., Parkin, I.A.P., Development of an SVG GUI for the visualization of genome data. In Proceedings of SVG Open 2002 (Zurich, Switzerland, 2002)
[7] Baranovskiy, D., "Raphael Javascript Library," [Online]. Available: http://raphaeljs.com/. [Accessed: Mar. 7, 2010].
[8] Wood, K. "jQuery SVG Plugin," January 23, 2010. [Online]. Available: http://keith-wood.name/svg.html.
[9] SPARK, C. Lewis, A. Fettes, P. Mansfield, 2nd Annual Conference on Scalable Vector Graphics, July 2003. Available at http://www.svgopen.org/2003/
[10] SVG-Based User Interface Framework, Alastair Fettes and Philip Mansfield, 3rd Annual Conference on Scalable Vector Graphics 2004 SVG Open Conference 2004,Sept 7-10, 2004. Available at http://www.svgopen.org/2004/
[11] Chatty, S., Sire, S., Vinot, J., Lecoanet, P., Lemort, A., and Mertz, C. 2004. Revisiting visual interface programming: creating GUI tools for designers and programmers. In Proceedings of the 17th Annual ACM Symposium on User interface Software and Technology (Santa Fe, NM,USA,October 24 - 27, 2004). UIST '04. ACM Press, New York, NY, 267-276.
[12] Marriott, K., Meyer, B., and Tardif, L. 2002. Fast and efficient client-side adaptivity for SVG. In Proceedings of the 11th international Conference on World Wide Web (Honolulu, Hawaii, USA, May 07 - 11, 2002). WWW '02. ACM Press, New York, NY, 496-507.
[13] Antoniou, B., Tsoulos, L. 2004. Converting raster images to XML and SVG. In Proceedings of SVG Open 2004 (Tokyo, Japan, 2004).
[14] World Wide Web Consortium, "Document Object Model (DOM) Level 2 Core Specification," November 13, 2000. [Online]. Available: http://www.w3.org/TR/DOM-Level-2-Core/
[15] World Wide Web Consortium, "Document Object Model (DOM) Level 3 Core Specification," April 7, 2004. [Online]. Available: http://www.w3.org/TR/DOM-Level-3-Core/.
[16] Fowler, A., "Painting in AWT and Swing," [Online]. Available: http://java.sun.com/products/jfc/tsc/articles/painting/. [Accessed: Mar. 7, 2010].
[17] Lindholm, T., and Yellin, F., "The Java Virtual Machine Instruction Set," Reading, MA: Addison-Wesley, 1999.
[18] Oracle Corporation, "How to Use Tabbed Panes," 1/12/2010. [Online]. Available: http://java.sun.com/docs/books/tutorial/uiswing/components/tabbedpane.html
[19] The Eclipse Foundation, "SWT: The Standard Widget Toolkit," February 2010. [Online]. Available: http://www.eclipse.org/swt/.
Links:
Hide Abstract
- Mutation and Evolution of Animated SVG Figures:
- Matseevskiy, Andrey (programmer)
Show Biography
I was born in Riga in 1954, former part of USSR. I have studied physic in university of Riga. 3 years in an institut there, 3 years in geology in my favorite peninsula named Kamchatka. 10 years in the institute of volcanology, 8 years in military organisation, where we tested our long- range missiles. After it some unsignicant shit for 2 years, now I'm working for cartographs from Moskow- write some soft for satellite images processing.
- Fourier transform in SVG graphics:
Show Abstract, Paper (Separate Tab)Fourier transform in SVG graphics
Papertopic: File Format Conversion
Author(s): Matseevskiy, Andrey
In this paper author proposes one efficient method of raster to vector conversion, based on the Fast Fourier Transform (FFT). Let's consider a problem of conversion of photorealistic raster images to vectors and back transform- rasterization of vectors. A raster image to be converted to vector file can be represented as a combination of three components: (sharp) contours, which separate more or less smoothly colored regions with low color gradients, and hi-frequency noise or texture. This paper focuses on highly efficient method of raster-to-vector conversion of contours and gradient fills. Hi-frequency noise or texture probably should be converted to vector objects with the aid of fractals. On the one hand, the goal is to create a vector file looking similar to its raster prototype, and on the other, this file must be as small and compact as possible. Let's speak for simplicity about grayscale images. The first step is to replace the original raster with the matrix of the same size, containing color gradients. For the grayscale image, this gradient is a vector, one component of which is a derivative of brightness along X-axis, and the other is a derivative of a brightness along Y-axis. This matrix can be converted to raster image by convolution with Cauchy kernel. The best way to perform this operation is by using FFT. The essence is that this matrix of gradients can be efficiently compressed with only minor losses. Such a matrix, obtained from a general raster, will be filled mostly with low gradients, and only small part of it would contain high gradients, corresponding to contours of the source raster image. These high gradients will be located along narrow lines, like fences between plots of land. Therefore, they can be converted into well-known Bezier curves that have one additional feature. This feature is a non-constant parameter distributed along each curve that designates the color discontinuity across this curve. Corresponding type of record in SVG is well-known. The residual matrix contains low gradients; corresponding distribution of colors is smooth. Thus, this object can be converted to a small vector file. Common methods for this operation are based on meshes: triangular, rectangular or distorted rectangular ones. However, there is no need to use them because interpolation from a set of vertices is able to perform this op much better. There are two problems: where to place these vertices and how to interpolate these colors to the whole image. FFT can be used here as well. Let's smooth a grayscale image a little and compare the source and smoothed output. The source matrix is somewhere brighter, somewhere darker then the smoothed one. It means, that the difference between these two matrices looks like a mosaic: it contents regions with negative difference and regions with positive one. One needs to put a vertex at the center of each of such regions and to assign a color value to it. Interpolation from the set of vertices to the whole image is based on a biharmonic equation. Solution of this equation is a sum of fundamental solutions of the biharmonic equation, multiplied by some coefficients. To obtain these coefficients, one needs to solve a system of linear equations. If number of vertices is not very large (up to 500, approximately), this method is rather efficient. After these coefficients are obtained, result of interpolation is in fact convolution too. Therefore, FFT can be used here as well. Otherwise (if number of vertices is too large) some methods, based on sparse matrices can be used. To convert such a vector image to raster, some operations are to be performed. Two matrices with the size of output image are to be created: the first one is a gradient matrix, the second matrix is a color matrix. Both of them are initially filled with zeros. Color gradient from the set of curves is to be placed onto the first matrix. Then direct FFT is to be performed. Result is to be multiplied by Cauchy kernel and transformed back. Then vertices are to be placed onto the second matrix. Colors are to be interpolated from the set of vertices to the whole matrix and both matrices are to be superimposed. Using FFT is really fast, may be fast enough to perform a real-time video (25 frames per second). This method being incorporated into SVG offers a possibility to obtain small vector files with almost photographic quality.
Let's look at the process of conversion. The first image- http://www.smartfills.com/Html/Images/contour.png represents set of contours, obtained from the source raster. The second image- http://www.smartfills.com/Html/Images/harm.jpg
is the result of convolution of density, distributed along these contours, with Cauchy kernel. The rest is suppressed. The third image- http://www.smartfills.com/Html/Images/harm_plus_biharm.jpg
is the second one plus a smooth color distribution (low gradients), based on set of vertices, placed onto image's canvas. Of course, each intermediate variant is possible too- when one decreases number of vertices, the third image is getting more and more like image two.
Hide Abstract
- Fourier transform in SVG graphics:
- Moissinac, Jean-Claude (Telecom ParisTech)
- A new primitive for SVG: extending the path:
Show AbstractA new primitive for SVG: extending the path
Why and how
Papertopic: SVG Authoring Tools and Techniques
Author(s): Moissinac, Jean-Claude (Telecom ParisTech)
Most 2D graphic languages deployed on the Internet today lack the ability to represent the topology of contiguous regions efficiently. This is becoming problematic with the growing number of map-based applications. In this paper, we introduce a new graphical primitive, called SuperPath, to extend existing languages for 2D vector graphics, such as SVG. This primitive provides a way to represent the contours in a 2D graphic with a set of reusable chunks of contour. Superpath is similar to the one proposed by David Dailey. We present the motivations for this work with examples of 2D maps and some associated problems related to their editing, rendering, or adaptation. We give some results, which were obtained using the new primitive.
With the increasing diversity of terminals and networks, modern multimedia technologies need to address multi-publication and adaptation of multimedia services and documents to environmental contexts such as terminals and user preferences. Some previous works have shown that the more structured a document is, with rich meta-information, the greater the capability to process it, to modify or adapt it is.
In our work on multimedia documents, we usually work with common 2D graphic formats such as SVG. SVG is becoming a common representation for 2D graphic documents (web browsers, Linux distributions) and, it is expected to become a central format on mobile devices among which phones and, portable media players.
SVG uses a representation of 2D vector graphics based on the use of contours with filling and stroking properties. However, SVG has limitations when editing, adapting or interacting with complex graphic content. More precisely, SVG lacks the ability to define an area as a list of references to pieces of contour. This feature is present, for example, in the MapInfo Interchange Format (MIF/MID) [8] dedicated to map representation. In this paper, we present an extension to the SVG language called SuperPath, which makes it possible to define a region as a set of contours.
We will first present the interest of such a primitive through an example. We then highlight a series of benefits of its adoption.
Then, we present the solution offered by SuperPath to the aforementioned problems and then details the proposed syntax for the SVG language.
Hide Abstract
- A new primitive for SVG: extending the path:
- Müller, Armin (uismedia)
Show Biography
Armin Müller is a landscape ecologist specialising in GIS and worked with SVG since 2002. Co-founder of uismedia (1998) which develop Web Mapping and GeoWeb solutions based on the SVG technology (expl. Mappetizer).
- Mappetizer Tourist- and City-Info and Mappetizer Travel Diary:
Show AbstractMappetizer Tourist- and City-Info and Mappetizer Travel Diary
SVG Web Mapping Applications
Papertopic: SVG for Webmapping and Online GIS/GML
Author(s): Lang, Ruth (uismedia) and Armin Müller (uismedia)
Introduction
Mappetizer "Tourist Info", "City Info" and "Travel Diary" are SVG based web mapping applications, which directly can read GPS data (GPX files).
As Mappetizer "Tourist Info" and "City Info" are for public use on the internet (whether municipality, county or city), "Travel Diary" can be seen as an application for everybody's use. But the philosophy and technique behind all the applications are the same.
Main goals and ideas of the products are:
- Quasi-direct import of GPS data (GPX files)
- Displaying of any information based on geograpic data, like points (= waypoints, e.g. hotels, schools, places of interest, underground stations), lines (= tracks, e.g. bicycle and hiking tours, online guided city tours) and polygons.
- Extended scope on descriptive information about the tracks and waypoints, including text, pictures, links, addresses, ranking and rating.
- Support of multilingualism.
- Analyses of the tracks (e.g. length, duration, elevation).
- Not depending on any specific web server technologies or database.
- Not depending on Google Maps and their terms of use.
- Full control on layout and design.
- Expandability and flexibility.
All web mapping solutions simply bases on open standards like HTML, SVG and XML.
So they can be used on a local machine, published on the web or be given away on CD-ROM or DVD and be viewed within a web browser.Underlaying Technique
Dojo Toolkit (http://www.dojotoolkit.org)
The application uses the open source modular JavaScript library Dojo Toolkit (http://www.dojotoolkit.org) and the Dojo widgets system. These are prepackaged components of JavaScript code, HTML markup and CSS style declarations that can be used to enrich websites with various interactive features that work across browsers.
SVG elements, Map and Legend
The map and the legend of the application are (embedded) SVG elements.
OpenStreetMap (http://www.openstreetmap.org)
The web application uses OpenStreetMap (OSM) as a background layer. OSM data are directly imported via the OSM Mapnik Tile Server (http://tile.openstreetmap.org/), so the user benefits from perpetual up-to-dateness without having to concern about. The slippy map application rendered by Mapnik provides 18 zoom levels. Depending on the choosen extent the appropriate zoom level is calculated, and displayed then.
OSM Mapnik data are in a Mercator projection, so all GPS data have to be transformed from longitude/latitude values to the Mercator projection.The GPX-files then are overlaid on this background layer, organized in different groups (<g/>) and displayed as SVG paths (<path/>), circles (<circle/>) or images (<image/>).
Importing the GPX Files
The XMLHttpRequest object is used for making asynchronous calls to the server to retrieve data. Dojo Toolkit offers for this the dojo.xhrGet() function and does all the work.
The data returned from the server are then handled as an XML object. To avoid problems with MIME types, the filename extension .gpx has to be changed to .xml and the gpx tag has to be cleaned from its attributes. Beside being aware of the appropriate character encoding, these are all changes which has to be done with the gpx file so the application can visualize it.Using and Extending the GPX 1.1 Schema Documentation (http://www.topografix.com/gpx/1/1) for describing the GPS data
The GPS/XML files take over the GPX 1.1 Schema Documentation and uses different existing tags for further information about the track or waypoint, like the name <name/>, comment <cmt/>, description <desc/> or type <type/>.
Further information which are requested within a city and tourist information system (like rendering options, symbology, images, specifications, addresses) are described within the tag. This tag is explicitly implemented to extend the GPX schema. As the application supports multilingualism, the tags can be expanded with different language tags, like:
<name>
<en>English name</en>
<de>Deutscher Name</de>
</name>
GeoNames WebServices (http://www.geonames.org)
To expand the functionalities, the application uses different Geonames WebServices, like "findNearbyWikipedia" or "countryInfo".
Dojo Toolkit offers cross-site data access with the function dojo.io.script.get() for JSON objects.Next Steps
- Support of geotagged photos
- Implementing other GeoNames WebServices (e.g. findNearByWeather, findNearbyStreet)
- Extending the analyses tools, e.g. providing altitude profiles
Links:
- Example: Ruthle's Travel Diary
- Homepage: Mappetizer Travel Diary
- Homepage: Mappetizer Web Mapping Software
Hide Abstract
- Mappetizer Tourist- and City-Info and Mappetizer Travel Diary:
- Muppalla, Ravikiran (Qualcomm, Lead Engineer)
- Advantages of Hardware Accelerated SVG:
Show AbstractAdvantages of Hardware Accelerated SVG
Developer benefits
Papertopic: Mobile SVG Solutions
Author(s): Sledd, Andrew (IKIVO AB), Sammons, Brent (Qualcomm Inc.) and Ravikiran Muppalla (Qualcomm)
Qualcomm and Ikivo have together accelerated SVG with dedicated 2D hardware on mobile devices – for the first time in the mobile market. From the combined strengths of both companies, SVG is now being distributed more broadly at higher quality levels with more developers empowered to make money developing and distributing high-end SVG content on mobile devices than ever before. This session will be a chance to learn what Qualcomm and Ikivo are doing and specifically how developers are able to take advantage of the improved SVG capabilities available on Qualcomm chipsets.
Hide Abstract
- Advantages of Hardware Accelerated SVG:
- Neumann, Andreas (City of Uster, GIS manager)
- SVG and OpenLayers:
Show Abstract, Presentation (Separate Tab)SVG and OpenLayers
Enhancing OpenLayers with SVG
Papertopic: SVG for Webmapping and Online GIS/GML
Author(s): Neumann, Andreas (City of Uster)
OpenLayers (http://www.openlayers.org/) is one of the most popular Web-GIS (or webmapping) client. Starting from a simple tile map client that integrated commercial offerings like Google Maps or Virtual Earth (now Bing maps) it grew into a versatile GIS client for various data sources and with multiple plugins for interacting with the data.
OpenLayers not only supports raster data, but also vector data sources, such as WFS. SVG and VML are currently used to render such data.
The presentation shows where SVG is used within OpenLayers and how it could be used in the future to include further functionality, interactivity and better map symbolization. Examples are better point symbols, labeling, a profile tool, charts, diagrams, etc.
Hide Abstract
- SVG and OpenLayers:
- 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. One of his election maps is featured on the Internet Explorer 9 testdrive site. Michael attended SVGopen 2003, 2005, 2008 and 2009 before.
- SVG in Internet Explorer:
Show Abstract, Paper (Separate Tab), Presentation (Separate Tab)SVG in Internet Explorer
an independent perspective
Papertopic: SVG Viewer Implementations
Author(s): Neutze, Michael
In recent years Internet Explorer has been like handcuffs to SVG development. There have been several attempts to find keys to loosen the chains. After Adobe’s abandonment of the plugin, those were mainly JavaScript libraries. Leveraging VML or Flash to draw vectors in Internet Explorer these attempts have been quite successful but had to remain their shim status. Then with Microsoft’s announcement of Internet Explorer 9 (ie9) on March 16, 2010 at their MIX conference, the commitment to native SVG support in Internet Explorer came as a long awaited relief. The testdrive site for the ie9 platform preview [1] showcases one of the election maps that were presented at SVGopen 2009 and had been adapted in time for the MIX announcement to work with the early state of the implementation. From this experience it became clear that SVG in Internet Explorer needs to be a topic at SVGopen 2010 and independent views should counter possible marketing ploys.
The presentation will try to evaluate what this might mean for practical SVG deployment currently and in the near future. Emphasis will be throughout on mixing SVG with HTML. I will discuss the state and and advantages of some of those shim technologies (SVG Web, Raphaël, dojox.gfx, JSXGraph) together with already published showcases of the technology in question. Furthermore I will analyze the current state of the SVG implementation, that can be witnessed in the evolving Internet Explorer 9 platform preview. The focus will be on availability of features with regard to practical use cases as well as standard conformity. The initial release of the IE9 platform preview suffered among other things the lack of the viewbox attribute thus making GIS applications very hard to implement.
Since browser adoption in large organizations takes significant time periods – think of the longevity of Internet Explorer 6 – and the non-availability of Internet Explorer 9 on Windows XP, SVG developers will face a long transition period. On the other hand the European Union mandated browser ballot on Windows operating systems might further erode market share for non standard compliant browsers. I will argue therefore that the SVG Web strategy of supporting standard SVG markup instead of JavaScript constructs – despite possible performance benefits of the latter – is the way to go. The transition from an SVG Web enhanced application to pure standard conformity is as simple as removing two script tags.
Finally sufficient time will be devoted to showing examples that already work in the Internet Explorer 9 platform preview with special emphasis if they worked right out of the box [2] or what kind of adaptations were needed to make them work [3]. Additionally the discussion will focus on mixing SVG with HTML. Microsoft claims that IE9 will be the first browser to support SVG right inside plain HTML, an approach that the SVG Web toolkit is mimicking already (in contrast to namespacing in XHTML that is used in Firefox, Webkit and Opera).
Links:
- [1] Micrsoft Internet Explorer 9 Site - Featuring special edition of election atlas
- [2] GPS elevation profile for Google Maps
- [3] A "viewbox-less" version of the election atlas for the ie9 preview
Hide Abstract
- SVG in Internet Explorer:
- Paksula, Matti (University of Helsinki, Research Assistant)
- From SVG to Canvas and Back:
Show AbstractFrom SVG to Canvas and Back
Papertopic: Interactivity and Scripting
Author(s): Kaipiainen, Samuli (Department of Computer Science / University of Helsinki) and Matti Paksula (University of Helsinki)
As demonstrated last year in SVG Open 2009 California [1], it's possible to transfer pixel data from Canvas to SVG and other way round, but with limitations. The SVG->Canvas transfer was done server-side with Imagemagick, as there were no acceptable client-side method available.
Lately, it has become possible to rasterize SVG into a data url pixel data client-side, but still with limitations [2]. Currently, it only works with Safari and Opera. Also, it's possible to only transfer the data once from SVG to Canvas. After that, the security method of [not allowing arbitrary stuff to be rendered and possibly sent to third party] kicks in, and the route is locked.
The preferred way of how this data transfer should work, is for SVG to also have a toDataUrl or similar method, which exposes the rasterized image to Ecmascript.
In this paper we propose a SVG.toDataURL() -method and give a reference implementation with JavaScript until native support is available. In our JavaScript library we show that the implementation for SVG.toDataURL()-support is possible right now.
REFERENCES
[1] http://www.svgopen.org/2009/papers/54-SVG_vs_Canvas_on_Trivial_Drawing_Application/
[2] http://ajaxian.com/archives/todataurl-canvas-and-svg#comment-275765
Hide Abstract
- From SVG to Canvas and Back:
- Pinto, Aníbal (Efacec)
- Plotting and Navigating through Data using Dynamic Charts:
Show AbstractPlotting and Navigating through Data using Dynamic Charts
An SVG-based approach
Papertopic: Interactivity and Scripting
Author(s): Magalhães, Helder (Efacec), Sousa, A. Augusto (FEUP) and Aníbal Pinto (Efacec)
Graphical representation of values over time using charts is one of the most popular and effective ways of displaying data, easing establish of a correlation between measurements, creation of trends, prediction of system evolution and more.
Plotting data acquired in real-time and archived (historical) data are two important aspects, allowing use-cases such as system monitoring and post-crisis analysis, respectively. The differences between the use-cases pose challenges in both visualization (plot) and interaction (navigation). While the former use-case is reasonably addressed by an increasing number of software libraries, the latter is sparsely covered in the current state-of-the-art.
In this article a solution which addresses the problem is presented, based in SVG (Scalable Vector Graphics) and other Web-related technologies. A prototype which implements the solution proposal is demonstrated, as well as the currently existent system. A set of tests allows evaluating whether the established goals were achieved.
Links:
- Related work: Displaying Web Statistics in an SVG Web Application
- Related work: Electricity Distribution (press the "Output" button; requires Silverlight)
Hide Abstract
- Plotting and Navigating through Data using Dynamic Charts:
- Priyadarshi, Sushant
Show Biography
Masters student at San Jose State University
- SVGMed - SVG for Medical Science:
Show Abstract, Paper (Separate Tab)SVGMed - SVG for Medical Science
Papertopic: Business Cases and Case Studies
Author(s): Priyadarshi, Sushant
The "Human Systems Explorer" is a web based teaching tool developed by "Center for Educational Technology" for Harvard Medical School for explaining difficult concepts in the field of medical science. It comprises of many interactive diagrams which are made available through Harvard Medical School's web portal. The basic goal of this tool is to help students to visualize the clinical relevance of all the concepts they learn rather than just studying static diagrams through books. Diagrams play a very pivotal role in medical science and with the advancement of electronic media, online resources have become indispensable part of medical students. Web based interactive diagrams not only serves the purpose of easy availability but also gives a visual cue for the concept to the students. Currently all the diagrams in the "Human Systems Explorer" are made first using Adobe Illustrator, Adobe Fireworks, or Adobe Photoshop and then imported into Flash. Majority of tools/sites offering interactive diagrams are based on flash players and quite a few uses JavaScript for interactivity with a very limited scope. There are other famous online resources which offer medical illustrations with use of static picture diagrams (e.g. www.netterimages.com). This creates a void between the student’s expectations and what is being offered because a medical student may wish to get an image that has lot of interactivity features such as an image becomes more detailed as the resolution changes (as by a user-initiated zoom event). In a medical diagram, as you zoom in, a heart for example may resolve into a more complex network of arteries and veins having labels show up only at a certain level of zooming which is basically known as LOD (Level of Detail). And this is the area where SVG can do wonders for medical science. With the increasing support of SVG in a wide variety of browsers, it seems very feasible and beneficial to use SVG for complex diagrams in medical science. I propose an application called "SVGMed" which shows the benefits of using SVG technologies combined with JQuery, XML and JavaScript scripting in making the diagrams involved in medical science more interactive, dynamic and accurate. For my paper I have chosen a relatively complex and important field in biology/medical science -study of "Human Body Blood Circulation System" which requires very high degree of precision labeling and interactivity. The main components of circulatory system are the heart, the blood and the blood vessels. The veins are the blood vessels that carry deoxygenated blood towards the heart and arteries are blood vessels that carry oxygenated blood away from the heart. A typical diagrammatic representation of circulatory system consists of intertwined veins and blood vessels making it very difficult to distinguish. In this paper, I intend to report on my effort to convert the existing system of medical diagram representation into a more interactive, accurate and efficient way using SVG, prototype development of human circulatory system, and future benefits of using SVG for the medical science. These kind of effective interactive diagrams when channelized into proper online resource will reap huge benefits for students as well as for industry.
Links:
Files:
Hide Abstract
- SVGMed - SVG for Medical Science:
- Quint, Julien (consulting.romulusetrem.us, Consultant)
- SVG Implementors Panel:
Show AbstractSVG Implementors Panel
Papertopic: Panel Discussions
Author(s): Quint, Julien (consulting.romulusetrem.us)
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.
Hide Abstract
- SVG Implementors Panel:
- Razafimahazo, Mathieu (Inria)
- Sound Objects for SVG:
Show AbstractSound Objects for SVG
Papertopic: Mobile SVG Solutions
Author(s): Lemordant, jacques (INRIA), Colbrant, Audrey (INRIA), Razafimahazo, Mathieu (Inria) and Yohan Lasorsa
Sound Objects for SVG
A.Colbrant, Y.Lasorsa, J.Lemordant, M.Razafimahazo
EPI WAM, INRIA, http://wam.inrialpes.fr
A2ML and Sound Objects
A sound object [1] is a time structure of audio chunks whose duration is on the time scale of 100 ms to several seconds. These sound objects have heterogeneous and time-varying properties. Sound objects, also called audio cues, are the basic elements of any format for interactive audio. We have designed an XML language (A2ML[8]) for interactive audio on mobiles which offers, concerning the sequencing of sounds, a level of capabilities similar to that of iXMF, the interactive audio file format defined by the Interactive Audio Special Interest Group (IASIG) [2]. A2ML uses SMIL [3] timing attributes to control sound objects and supports not only sequencing like iXMF but also 3D sound rendering and declarative parameters's animation, DSP and positional parameters, by embedding the SMIL animation module. Like in a traditional mixing console, mix groups can be used to regroup multiple cues and apply mix parameters to all of them at the same time.
SVG and TCDL Dispatching language
We have to find a way to transfer events in the SVG world into cue events. We don’t want sound objects to be positioned in the SVG world but activated indirectly through events. This is done through TCDL, a Tag-based Cue Dispatching Language, reminiscent from NVDL (Namespace-based Validation Dispatching Language) [4]. Requests for instanciation of sound objects are done through TCDL. As TCDL allows you to build groups of sound objects, selective rendering of sound layers is possible depending on the user's preferences. Then A2ML can be thought as an audio style sheet for SVG, this separation of modeling and audio rendering being similar to what is done for the web of documents with HTML and CSS style sheets.
Sound Manager
TCDL sends requests to a sound manager with A2ML reading capability. The sound manager’s response to a given cue instantiation may be simple, such as playing or halting a 3D sound source, or it may be complex, such as dynamically manipulating various DSP parameters over time. The sound manager is also offering an API through which all instance parameters can be manipulated such as positions of the sound sources and the auditor. An A2ML sound manager for the iPhone has been implemented. This sound manager will be ported to OpenSymbian and Android phones when OpenSL ES [5] will be available.
SVG-A2ML Applications
We will demonstrate two kinds of mobile applications running on the iPhone based on one hand on WebKit framework for the SVG part, and on the other hand on FMOD API for the A2ML part. The first one will be an interactive audio-visual jungle and the second one an indoor guidance of visually impaired people:
. The construction of an A2ML sound model for an interactive jungle is explained in An Interactive Audio System for Mobile [6]. We will show how this A2ML sound model can be used with an SVG model of a jungle. The glue between these two similar languages is done through rules expressed in TCDL which are activated by SVG DOM Events.
. The sonification of an indoor SVG map [8] for the guidance of visually impaired people will be explained and we will show how SVG SMIL animations can be used in conjunction with A2ML SMIL animations allowing us to test and adjust the sound mixing parameters.
[1] Sound Objects, based on Pierre Schaeffer’s work, http://en.wikipedia.org/wiki/Pierre_Schaeffer
[2] Interactive XMF, Interactive Audio Special Interest Group, http://www.iasig.org./wg/ixwg/
[3] Synchronized Multimedia Integration Language (SMIL 2.1), W3C, http://www.w3.org/TR/SMIL2/
[4] NVDL (Namespace-based Validation Dispatching Language), http://www.nvdl.org
[5] OpenSL ES, http://www.khronos.org/opensles/
[6] An Interactive Audio System for Mobile. Yohan Lasorsa, Jacques Lemordant, 127th AES Convention.
[7] Augmented Reality Audio Editing, Jacques Lemordant, Yohan Lasorsa, 128th AES Convention.
[8] A2ML specification, https://gforge.inria.fr/projects/iaudio
Hide Abstract
- Sound Objects for SVG:
- Ruellan, Hervé (Canon Research Centre France SAS, Research Scientist)
- Compressing SVG with EXI:
Show AbstractCompressing SVG with EXI
Papertopic: Mobile SVG Solutions
Author(s): Fablet, Youenn (Canon Research France), Fujisawa, Jun (Canon, Inc.), Ruellan, Hervé (Canon Research Centre France SAS), Bellessort, Romain (Canon CRF) and Anthony Grasso (Canon)
EXI is a binary format for encoding XML Infosets. It is currently in Candidate Recommendation, one of the last steps of the W3C standardization process. The main goal of this format is to provide very good compaction for a wide range of XML documents, applications and devices. To meet this goal, several encoding options are defined within the EXI format. Those encoding options must be selected with care to meet the requirements of an application in terms of compression, processing efficiency and memory usage.
This study describes the possibilities and achievements obtained by the EXI format for SVG applications. The impacts of the encoding options, in particular schema-less and schema-informed encoding (i.e. whether schema information is available) and compression (i.e. a further generic compression step is applied on the encoded data) are evaluated in this context.
Comparison with existing technologies and practices (SVGZ and BiMSVG) is also conducted in the study to show the strengths and weaknesses of the EXI technology applied to SVG. While clearly being an improvement over SVGZ, EXI, in its most interoperable form and without the use of compression option, is less compact than BiMSVG. Indeed, BiMSVG has built-in support for very efficient encoding of SVG textual content, whereas the most interoperable form of EXI only relies on schema information. However, as EXI enables the definition of built-in data types, the addition of specific SVG support to an EXI processor is evaluated in the study, demonstrating largely improved results.
This study also highlights specific benefits and issues: interoperability (lack of a convenient well-known XML Schema for SVG document encoding, SVG versions and modules), impact of the compression option on SVG progressive rendering, usefulness of features like schema deviation support (i.e. enabling the efficient encoding of items not described in the schema), self-contained elements (i.e. encoding parts of the SVG document independently of each other) or datatype representation map (i.e. mapping dedicated codecs to specific SVG textual content).
To conclude the study, recommendations on the best use of EXI for SVG (notably for both open and closed environments) and a look at the future are made. SVG 2.0 being on the way, some features like the definition of a more structured syntax for some SVG constructs (path or animation elements notably) have a very positive impact on the compaction results. This is assessed within the study. The study also raised questions for which the SVG community feedback is sought. Is there a need for a common compact format for all SVG applications? Is there a need to define an interoperable EXI SVG support? Should SVG 2.0 syntax be assessed in terms of EXI compaction results? Is there a need to define a common SVG schema for EXI processors? How should be handled the different SVG versions (1.0, 1.1, 1.2 and future 2.0)?
Hide Abstract
- Compressing SVG with EXI:
- Rusnak, Pavol
Show Biography
Pavol Rusnak is a software engineer from Slovakia, but he's been living in the Czech Republic for the last 7 years. Currently he is employed at Novell/SUSE where he takes care of various issues regarding the openSUSE project. Back in June 2009 he discovered a small proof-of-concept project called SVG-edit and helped it to develop into a complete vector graphics editor in the browser.
- SVG-edit:
Show AbstractSVG-edit
A complete vector graphics editor in the browser
Papertopic: SVG Authoring Tools and Techniques
Author(s): Rusnak, Pavol and Jeff Schiller
SVG-edit is a fast, web-based, Javascript-driven SVG editor that works in any modern browser. It is inspired by Inkscape and despite its youth (slightly more than a year of development) already provides a good set of features to create advanced vector drawings. Open-source components like jQuery are used and SVG-edit itself is also licensed under a liberal Apache License 2.0, which makes it very easy to embed the editor in both commercial and non-commercial projects. The talk will focus on a short history plus overview of the project and the new features implemented in the last SVG-edit releases. We will mention various challenges we faced during the development and also describe the browser missing features which would make life a lot easier. We'll conclude the talk with a live demonstration of the editor and other projects that already use embedded SVG-edit.
Links:
Hide Abstract
- SVG-edit:
- Sammons, Brent (Qualcomm Inc., Product Manager)
- Advantages of Hardware Accelerated SVG:
Show AbstractAdvantages of Hardware Accelerated SVG
Developer benefits
Papertopic: Mobile SVG Solutions
Author(s): Sledd, Andrew (IKIVO AB), Sammons, Brent (Qualcomm Inc.) and Ravikiran Muppalla (Qualcomm)
Qualcomm and Ikivo have together accelerated SVG with dedicated 2D hardware on mobile devices – for the first time in the mobile market. From the combined strengths of both companies, SVG is now being distributed more broadly at higher quality levels with more developers empowered to make money developing and distributing high-end SVG content on mobile devices than ever before. This session will be a chance to learn what Qualcomm and Ikivo are doing and specifically how developers are able to take advantage of the improved SVG capabilities available on Qualcomm chipsets.
Hide Abstract
- Advantages of Hardware Accelerated SVG:
- Schepers, Doug (W3C, Team Contact)
Show Biography
Doug Schepers has been an active member of the SVG community for a decade, with a particular focus on building SVG-based Web applications. Doug works at the W3C as a Team Contact and specification editor for the SVG and WebApps Working Groups.
- Graphical Effects Beyond SVG 1.1:
Show AbstractGraphical Effects Beyond SVG 1.1
Papertopic: Panel Discussions
Author(s): Neumann, Andreas (City of Uster), Lilley, Chris (W3C), Schepers, Doug (W3C) and Tavmjong Bah
Panelists will briefly introduce some advanced topics that may be released as modules for SVG 2.0. Among others, the following topics will be covered: "vector effects", "SVG parameters", advanced markers or the extension of the "path" elements with mathematical construction methods. Tav will discuss potential enhancements of the SVG language from the perspective of the Inkscape team, that works on an SVG authoring tool. Some of the topics are already in draft state, some are just ideas.
The goal is to detect missing pieces and useful additions and to gather use cases for them. In addition, technical issues around the proposal will be discussed or if the problem can be solved with existing SVG 1.1 mechanisms.
Attendees may prepare by reading the following already existing resources:
Hide Abstract
- Graphical Effects Beyond SVG 1.1:
- Schiller, Jeff
- SVG-edit:
Show AbstractSVG-edit
A complete vector graphics editor in the browser
Papertopic: SVG Authoring Tools and Techniques
Author(s): Rusnak, Pavol and Jeff Schiller
SVG-edit is a fast, web-based, Javascript-driven SVG editor that works in any modern browser. It is inspired by Inkscape and despite its youth (slightly more than a year of development) already provides a good set of features to create advanced vector drawings. Open-source components like jQuery are used and SVG-edit itself is also licensed under a liberal Apache License 2.0, which makes it very easy to embed the editor in both commercial and non-commercial projects. The talk will focus on a short history plus overview of the project and the new features implemented in the last SVG-edit releases. We will mention various challenges we faced during the development and also describe the browser missing features which would make life a lot easier. We'll conclude the talk with a live demonstration of the editor and other projects that already use embedded SVG-edit.
Links:
Hide Abstract
- SVG-edit:
- Schulze, Dirk (Research In Motion (RIM))
- SVG and Webkit:
Show AbstractSVG and Webkit
Papertopic: SVG Viewer Implementations
Author(s): Schulze, Dirk (Research In Motion (RIM)) and Nikolas Zimmermann (RIM)
Introduction
- What is WebKit?
- Where is WebKit used?
- The roots of the SVG implementation
New in WebKit SVG
New features in WebKit's SVG implementation, demonstrated by examples.- SMIL Animations
- SVG Filter
- Non-scaling stroke
- other features
CSS3 and SVG
- CSS3 in combination with SVG
- CSS3 Transitions
- CSS3 Animations
- CSS Shadows
- Future plans:
- CSS3 2D Transforms
- CSS3 3D Transforms
- Limits of CSS3 in SVG
- Can CSS3 replace SMIL animations?
HTML5
- HTML5 and innerSVG
- SVG and MathML
Hide Abstract
- SVG and Webkit:
- Shirk, George
- Generating Random SVG Elements in Polynomial Time:
Show AbstractGenerating Random SVG Elements in Polynomial Time
Papertopic: Graphic Design with SVG
Author(s): Whitfield, Deborah (Slippery Rock University), Dailey, David (Slippery Rock University) and George Shirk
Generating Random SVG Elements in Polynomial Time
Dr. Deborah Whitfield (deborah.whitfield@sru.edu)
Dr. David Dailey (david.dailey@sru.edu)
Mr. George Shirk (gws9396@sru.edu)
The ability to generate dynamic graphical content is a major asset of SVG. Accordingly, a natural question that has caught the attention of computer scientists for some time is how to efficiently generate "interesting" random shapes. The generation of random shapes could be used to mimic scenery found in nature which appears to the human eye to be truly random. Trees grow at apparently random angles, water bodies such as lakes, and oceans have random contours edges. Furthermore, streams have unusual edges and meander randomly. Random polygons with a large number of edges can be smoothed, filtered and given gradients to resemble natural entities such as clouds, lakes and land formations. An efficient algorithm for generating poly-gons has been created and implemented in SVG. The paper will demonstrate its use to create random shapes.
The SVG code is implemented so that the user simply needs to select the number of points and the bounding size of the n-gon to be created. The algorithm is provably random - it can generate any possible n-gon within the specified bounding box. Furthermore, it is fair and representative - it does not tend toward a typical shape as other techniques do (e.g., convex hull, star-shaped polygons). Unlike other techniques (Auer, Held), it does not require a given set of vertices, but rather generates the vertices randomly as the polygon is constructed. Additionally, taking advantage of newly discovered methods (Dailey & Whitfield), it draws these polygons in time polynomially related to the number of vertices, unlike the previous exponential-time techniques that have been explored for this problem from a given set of vertices.
This paper will introduce the algorithm and its implementation, and provide numerous examples of the utility of the technique. The technique may be used for creating interesting random shapes and elements of nature. SVG gradients, filters, noise, and patterns are used to make the dynamic images more realistic. In addition, the polygons can be smoothed using cubic splines and Bezier curves. The authors intend to extend this work to improve the efficiency of the algorithm for generating random polygons.
Hide Abstract
- Generating Random SVG Elements in Polynomial Time:
- Siemen, Stephan (ECMWF, Head of Graphics Section)
- Generation and use of SVG weather maps:
Show Abstract, Paper (Separate Tab)Generation and use of SVG weather maps
Papertopic: SVG for Webmapping and Online GIS/GML
Author(s): Siemen, Stephan (ECMWF)
The European Centre for Medium-Range Weather Forecasts (ECMWF) is an international organisation providing its member organizations with forecasts in the medium time range of 3 to 15 days. As part of its mission, ECMWF also provides software to access, manipulate and visualize its data. The Magics++ graphics library, freely available under the Apache license, is developed by ECMWF to display numerical weather forecast fields and observational data on geographical maps.
Currently, the main graphical output format for web pages is PNG and PostScript for print. To offer a more interactive format for the web, a vector format is required to enable zooming in the detailed displays of data. The possibility of integrating SVG output directly into web pages and the ability to add interactivity to the displays through JavaScript, and the format's openness are all advantages.
The presentation will show examples of SVG weather maps generated with Magics++ and discuss how these SVG files are planned to be used on the web directly or indirectly through an OGC web map service (WMS). Examples are shown how SVG maps can reduce the client-server communication. Issues on developing the SVG output driver in Magics++ are also discussed.
SVGs generated by Magics++ also contain additional information to separate the various parts of the plot as layers as understood by inkscape. This makes the editing of weather maps easier for publication.
Hide Abstract
- Generation and use of SVG weather maps:
- Sledd, Andrew (IKIVO AB)
- Advantages of Hardware Accelerated SVG:
Show AbstractAdvantages of Hardware Accelerated SVG
Developer benefits
Papertopic: Mobile SVG Solutions
Author(s): Sledd, Andrew (IKIVO AB), Sammons, Brent (Qualcomm Inc.) and Ravikiran Muppalla (Qualcomm)
Qualcomm and Ikivo have together accelerated SVG with dedicated 2D hardware on mobile devices – for the first time in the mobile market. From the combined strengths of both companies, SVG is now being distributed more broadly at higher quality levels with more developers empowered to make money developing and distributing high-end SVG content on mobile devices than ever before. This session will be a chance to learn what Qualcomm and Ikivo are doing and specifically how developers are able to take advantage of the improved SVG capabilities available on Qualcomm chipsets.
Hide Abstract
- Advantages of Hardware Accelerated SVG:
- Sousa, A. Augusto (FEUP, Professor)
- Plotting and Navigating through Data using Dynamic Charts:
Show AbstractPlotting and Navigating through Data using Dynamic Charts
An SVG-based approach
Papertopic: Interactivity and Scripting
Author(s): Magalhães, Helder (Efacec), Sousa, A. Augusto (FEUP) and Aníbal Pinto (Efacec)
Graphical representation of values over time using charts is one of the most popular and effective ways of displaying data, easing establish of a correlation between measurements, creation of trends, prediction of system evolution and more.
Plotting data acquired in real-time and archived (historical) data are two important aspects, allowing use-cases such as system monitoring and post-crisis analysis, respectively. The differences between the use-cases pose challenges in both visualization (plot) and interaction (navigation). While the former use-case is reasonably addressed by an increasing number of software libraries, the latter is sparsely covered in the current state-of-the-art.
In this article a solution which addresses the problem is presented, based in SVG (Scalable Vector Graphics) and other Web-related technologies. A prototype which implements the solution proposal is demonstrated, as well as the currently existent system. A set of tests allows evaluating whether the established goals were achieved.
Links:
- Related work: Displaying Web Statistics in an SVG Web Application
- Related work: Electricity Distribution (press the "Output" button; requires Silverlight)
Hide Abstract
- Plotting and Navigating through Data using Dynamic Charts:
- Strazzullo, Domenico (Dotuscomus)
- GEMï :
Show Abstract, Paper (Separate Tab)GEMï
The Web Operating System Open Project
Papertopic: GUI Frameworks for Web Applications
Author(s): Strazzullo, Domenico (Dotuscomus) and Jayne De Sesa (Dotuscomus)
GEMï is a Web Operating System composed of an Application Environment Manager and a Graphical User Interface, using the library of SVG implementations as Virtual Device Interface.
The purpose of this presentation is to survey and demonstrate its features and capabilities, as well as its possible domains of application; to review the techniques employed for its construction; to present the Open Project proposals for evolution available at the time of the conference.
The system
GEMï is a cross-browser Web Operating System. It consists of an Application Environment Manager and a Graphical User Interface using SVG as Virtual Device Interface. The version 2 of the software has been entirely rewritten using a class inheritance architecture with the objective to make its source code easy to extend and maintain by the collaborative crew of programmers in an Open Project context.
GEMï has the systemic features commonly found in window based operating systems, including a system menu. The windows are fully featured and have the particularity of carrying in their tool bars sophisticated tools, proper to SVG transformation capabilities, for zooming and panning their contents.
Two notable features are Preferences and Session which can both be saved in remote mode. The Preferences relate to display options. The Session relates to the windows with their status and their current layout.
Domains of application
The range of domains of application is wide and includes engineering, cartography, scientific, educational, illustration, presentations, etc.
A practical example would be a project consisting of several documents, each containing, for instance, SVG drawings of molecules (latest experiments carried out by my son prove that a GEMï window can carry 3D objects with their animations and transformation tools, which can be used in conjunction with the window's SVG transformation tools. This finding is the subject of a separate presentation), and a set of informational, interactive documents.
Technical aspects
The architecture of GEMï is based on the principle of class inheritance. Its structure is composed of a placeholder object, named “gemi”, where properties and methods proper to the interface are defined, and which provides a “namespace” for the superclass and subclasses.
The superclass defines properties and methods in its prototype which are then inherited by the subclasses. The superclass also defines some class methods.
The subclasses, which constitute an internal library, may have private methods or override the superclass methods. Basically, the subclasses are specialized constructor for compound physical objects which in most cases use several SVG elements.
Here we come to a fundamental particularity of GEMï: it does not have any classes for SVG elements. Instead, for those it uses the library that is constituted by the browser's implementation of SVG. To achieve this the “gemi” object defines a method (node builder) which acts as an interface between the internal library and the implementation's library. This methods expects exactly 1 argument, an object where the property/value pairs use SVG grammar, the property names containing JavaScript illegal characters for variable/property name being specified in string notation. Examples:
Building the interface
The section in the DOM tree restituting the interface is organized in the following manner:
Initially it contains a “gemi_windowstree” group which is hard-codedthe gemi.svg document in order to allow the embedding of those inner <svg> fragments that are intended to be rendered at runtime.
A desktop group is created and the “gemi_windowstree” group appended to it, followed by the other system components groups stacked in a judicious manner –the drag-area being on the topmost layer for example.
Finally, the other system components are created and appended to their respective groups.
GEMï has a reusable skin engine. The concept is similar to that of CSS with some notable advantages; these are:
– The possibility of having several definitions of “selectors” in one single file.
– The “selectors” are properties which are assigned objects, and their names are correlated with the names of the constructors.
– The possibility of using expressions and references for values.
– The use of a theme color, which can be processed on request to produce shades for the painting attributes and/or gradients, patterns and filters.
– The skin is a method that creates an object representing the current skin.
– The skin object defines the gradients, patterns and filters for the current skin.
– The names of the properties of the objects (the “selectors”) defined by the skin object are SVG attribute names, using string syntax where it applies, and other pseudo-attribute names may be used, as needed.
– The properties of objects (class instances, or orphan or volatile objects) reference the properties of the skin.
Hide Abstract
- GEMï :
- Strazzullo, Federico (Dotuscomus)
Show Biography
Federico Strazzullo is a graduate in graphic arts from Creapole, Paris. He is a member of the Dotuscomus crew since February 2010 and he is in charge of the company’s 3D department.
- WebGL & SVG:
Show Abstract, Paper (Separate Tab)WebGL & SVG
Embedding WebGL documents in SVG
Papertopic: Interactivity and Scripting
Author(s): Strazzullo, Federico (Dotuscomus)
The objective of this presentation is to show how it is possible to combine SVG and WebGL –3D file in the .dae format– into one single SVG document and demonstrating some level of interactivity.
This presentation would require a slot of 5 to 15 minutes. It is articulated around three major points:
– What is WebGL
– How it functions
– How a Collada document can be embedded into a SVG document and made to work.
The demonstration will be made using the GEMï Web OS version 2 and the WebGL document will run into one of its windows.
WebGL is a specification based on Open GL ES 2.0, with JavaScript binding. It is designed to display 3D content on the web without the need of a plug–in. Nightly builds of web browsers like Minefield (Firefox), Chromium (Chrome), Webkit (Safari) and soon Opera, are able to render 3D.
WebGL enabled browsers use the computer’s hardware resources for rendering 3D contents. This is currently not available for SVG contents. Whole scenes like those in video games can be rendered, and the interactivity with Human Interface Devices is fully implemented (keyboard for navigating in the scene or for changing parameters, the mouse to look around, etc.). At time of writing there are already several libraries, most of which are free, to help authors integrate their works with WebGL.
It is very easy to anticipate on the terrific possibilities that can result by combining the two technologies: powerful applications in the scientific, educational, architecture or any other domain. For example, the creation of real life places for virtual visit, combining the SVG and WebGL animation and transformation tools. Instead of targeting desktop environments only, web browsers of the next generation will do the job, without the need of installing anything.
Follows then the demonstration, which will show the chosen WebGL document embedded within GEMï and wrapped into one of its windows. I will then use the keyboard and the mouse to control the 3D scene, the window's zoom and pan tools which will act concurrently, while not having negative effects, with the 3D scene, as well as the window's commands (minimize, restore, full, close) and the menu commands reopen closed document.
The WebGL document format that will be used is Collada (.dae), an XML dialect, which seems to be the most recurrent format used to import models and which is able to incorporate all the scene’s elements.
The demo will be shown in the latest available build of Minefield (Firefox) and possibly Chromium.
Hide Abstract
- WebGL & SVG:
- Strehl, Manuel (Port 8000)
Show Biography
Manuel Strehl is a German web developer. He holds a diploma (equiv. master) in Physics from the University of Regensburg. Since 2008 he is a member of the W3C's SVG Interest Group.
- Scientific Publishing with XHTML, MathML and SVG:
Show Abstract, Paper (Separate Tab), Presentation (Separate Tab)Scientific Publishing with XHTML, MathML and SVG
Papertopic: Publishing and Printing with SVG
Author(s): Strehl, Manuel (Port 8000)
The web, and with it HTML, started as a platform for scientific information exchange. Now, more than 20 years later, the de facto standard for scientific publishing is PDF, generated mostly via word processors or various TeX idioms, less commonly via other XML languages, or auto-generated by publishers from the most heterogeneuos sources.
Since more than ten years MathML and SVG provide the technical base and a well-defined extension to HTML, so that publications, even if they are long on complex formulae, could be published in a combined XHTML+MathML+SVG format. However, beyond the display of short abstracts, HTML doesn't play any role in current web-based scientific databases unless as carrier medium for the download links of papers in other formats.
The talk examines the current state of composing natural science papers with XHTML, MathML and SVG and, on the other hand, the display possibilities in current browser engines. The target is to provide information as a baseline for future improvements in both fields, editors/generators as well as display applications.
The analysis breaks down in three parts. Firstly, the combination of the three XML formats is compared to existing and often-used techniques for composing as well as publishing. We will focus on word processors as WYSIWYG editors for one, and LaTeX as text based format for the other method for composing and editing papers. For publishing and displaying, we compare XHTML+MathML+SVG with PDF and, again, with file formats of word processors.
Methods for writing directly or generating from a source format are the most important factor for the acceptance of HTML and its companions and an extended usage on the web. Without simple possibilities to generate result documents, the adaption of HTML is very unlikely. Beyond direct or WYSIWYG editing of XHTML+MathML+SVG documents, we show the current state of transformation methods from various other input formats. The editing doesn't necessarily need to combine the three techniques in place, so single transformations for formulae, graphics and text are examined, too.
Finally, only slightly less important than editing is viewing of resulting documents. We survey the current landscape of browser implementations with a strong attention to MathML, CSS and SVG support. Where any of the implementations lacks support, we try to examine external technologies to take the place of native capabilities.
The findings provided in the talk will diverge. While display capabilities got pretty good with Mozilla Firefox and Opera as best performers with native SVG and MathML support, the composing and generation of XHTML+MathML+SVG is a vast landscape. Lots of island solutions exist for various examined problems, but the work to be done to join them into a single and simple workflow is not acceptable for people not familiar with either of XHTML, MathML or SVG. For a combined format of these three languages to re-take ground in scientific publishing on the web, many efforts will have to be put in generation tools.
Hide Abstract
- Scientific Publishing with XHTML, MathML and SVG:
- Toderici, Annie
- Low Cost Interactive Area of Interest Locator:
Show Abstract, Paper (Separate Tab), Presentation (Separate Tab)Low Cost Interactive Area of Interest Locator
Papertopic: SVG for Webmapping and Online GIS/GML
Author(s): Toderici, Annie
Introduction
This project focuses on a subset of the mapping problems. We focus on localization problems applied to physical structure where there exists a depiction of the map, which has some area of interest that has to be quickly accessible and made obvious. For instance, a shopper in a mall may want to know where a specific store is located. Usually they need to look up the directory of the mall, and spend a significant time locating the numbers presented in the index onto the map. Another case is locating the shelf for a specific book in a library.
As a specific example, we focus on book location. Libraries have their books, journals, articles, multimedia collections, and various other items categorized and placed on the shelves with related topics. However, when someone who is not familiar with the shelves' location, finding the needed book or item will be time consuming or even frustrating. There is an open research field trying to address this problem. Some approaches used Radio Frequency Identification (RFID) technology with Bluetooth [ChoiOh05], while others used Infrared Data (IrDA) Association communication modules with Light Emitting Diode (LED)[ChoiOh09], or use GPS [Aittola03]. However, these methods will be costly since libraries need to install these systems on all the shelves and books in the library. Therefore, I propose to use the library's existing unique barcode system which identifies books within the library.
This research is conducted at the Mountain View Public Library. All the ID ranges of the books are read and stored in a database, and then the data would be used to generate the exact shelves on the library. We use SVG to display the aisle and shelf of the book or library item. I introduced a new way to locate each of the items in the library by utilizing the existing library's items' IDs.
Development and Implementation
We incorporate the existing maps data with SVG and JavaScript to create a lower cost interactive mapping system. The main advantage of using SVG is that it is scalable, which means the ability to zoom in and out without losing quality. Moreover, the free Inkscape software can be used to draw the map into SVG file and assign for each region of interest a unique ID. Inkscape is fairly simple to use, and it allows users to set attributes and properties in the region drawn. Another reason is that SVG is available directly in the browser, so there is no other download tool needed. Microsoft has also joined other browsers and announced that they are going to start supporting SVG in their Internet Explorer 9.
The mapping between ID codes and location is stored in a MySQL database. An Apache server running PHP provides the pages where the administrators can update or add locations for items. Behind the scenes, SVG, HTML, and JavaScript update the map after processing user input.
In addition, another special web page allows users to interact with the map. When looking up an item of interest (in the case of a library this could be a book, whereas in the case of a mall, it could be a store), users are able to type in names, IDs, or aisle numbers into the application and the specific area of the map will be highlighted.
The lookup and highlighting is implemented in JavaScript, using the jQuery and jQuery.svg libraries. AJAX allows refreshing the map without needing to reload the page. When queried by jQuery, a PHP page sends an XML response which contains the error code, and if no error occurred, it has the ID of the element to be highlighted in the SVG map.
Example 1: The queried book was found in asile with the id "aisle50":
<response>
<error>0</error>
<location>aisle50</location>
</response>
Example 2: The querried book was not found in the database:
<response>
<error>1</error>
<message>Item Not Found</message>
</response>
This application is useful since libraries or stores rearrange their aisles from time to time, and items could be moved to a different area without notice. In addition, since we allow item-level granularity, if the library upgrades to a RFID tagging system, then the location of the books could be updated automatically.
The only requirements needed for this application to work are: a map of the library or store must be available, and if not created and saved in the SVG file format with the appropiate IDs set for the areas of interest (i.e., aisles); and a database which maps the item ID to an area ID (i.e., book number to aisle ID). For the Mountain View library case study, it took about three hours to collect the aisle range data for each one of the floors. The total estimated time to create the map, and the mapping from scratch is under a day (assuming that a graphic artist is available to draw the map). The setup time of the software is less than an hour, which makes our software very appealing for non-profit organizations.
Bibliography
[ChoiOh09] Jung-Wook Choi and Dong-Ik Oh. "Tag-only aging-counter localization for the R-LIM2 system". Springer Netherland. March 10, 2009.
[ChoiOh05] Jung-Wook Choi and Dong-Ik Oh. "Development of an RFID based library management and search system". Journal of the Korean Academic Industrial Society. June 2005. pp. 105-109.
[Aittola03] Markus Aittola, Tapio Ryhanen, and Timo Ojala. "SmartLibrary - Location-Aware Mobile Library Service". Springer-Verlag. September 2003. pp. 411-416.
[ChoiOh06] Jung-Wook Choi, Dong-Ik Oh, and Il-Yeol Song. "R-LIM: an Affordable Library Search System Based on RFID". 2006 International Conference on Hybrid Information Technology. November 11, 2006. pp. 103-108.
[Raubal02] Martin Raubal and Stephan Winter. "Enriching Wayfinding Instructions with Local Landmarks". Springer Berlin / Heidelberg. vol. 2478. September 2002. pp. 243-259.
[Elias03] Birgit Elias. "Extracting Landmarks with Data Mining Methods". Springer Berlin / Heidelberg. vol. 2825. October 2003. pp. 375-389.
Links:
Files:
Hide Abstract
- Low Cost Interactive Area of Interest Locator:
- Valentin, Bianca (University of Bayreuth)
- Lightning fast data plotting and graphics with JSXGraph:
Show Abstract, Presentation (Separate Tab)Lightning fast data plotting and graphics with JSXGraph
Papertopic: Interactivity and Scripting
Author(s): Valentin, Bianca (University of Bayreuth) and Peter Wilfahrt (University of Bayreuth)
The JavaScript based library JSXGraph enables a wide range of interactive data visualizations from complex mathematical content like geometry constructions or curve plotting to online charts and maps. Thereto it does not rely on any other library but uses SVG for drawing on most browsers and VML on the Internet Explorer. JSXGraph is easy to embed and has a small footprint: less than 100 KByte if embedded in a web page. Special care has been taken to optimize the performance. JSXGraph is developed at the Lehrstuhl für Mathematik und ihre Didaktik, University of Bayreuth, Germany.
JSXGraph was originally developed for educational purposes. Dynamic geometry systems are used more and more widely in schools to visualize geometry and calculus interactively. It is possible to create a geometric construction or a function graph, drag them around with the mouse, and observe the dependencies between the objects. With the accelerating speed of JavaScript in web browsers and the diminishing importance of Java in web there was need to have a tool for viewing mathematical content without a slow Java plug-in. So it is able to run also on small multimedia devices where Java based systems are not supported that most other dynamic geometry systems are using. Starting with version 0.80 JSXGraph also supports multitouch devices like the Apple iPhone and devices running Opera mini or Mozilla Fennec.
JSXGraph can read several file formats that are used by the most popular dynamic geometry systems as well as the European standard Intergeo format. As it is completely written in JavaScript it is also possible to script an own construction using JavaScript with few commands. A new development is the opportunity of parsing geometric constructions and do function plots from a well known and very easy and short mathematical syntax so that even very complex constructions can be done within one line.
With having all the mathematical objects and the possibility of dragging them around and influencing them interactively, it is easy to use JSXGraph as a charting tool. One application is to have interactive charts or charts in connection with a server that provides data at certain points of time that has to be visualized simultaneously. An example is a stock chart that shall be displayed together with its regression line to visualize the trend of data. JSXGraph provides a server module that eases such applications.
A further new application of JSXGraph is displaying maps that are given in the ArcView shape format.
It is possible to reduce the size of the transmitted data considerably by suitable rounding and thinning out data points with the Ramen-Douglas-Peukert algorithm, i.e., data points defining a border that nearly lie on the same straight line as its neighbours can be removed.
The wiki pages of the project (JSXGraph wiki) contain many examples and showcases, e.g.
Links:
Hide Abstract
- Lightning fast data plotting and graphics with JSXGraph:
- Vangheluwe, Hans (University of Antwerp and McGill University, Professor)
- Developing a Statechart-to-ECMAScript Compiler Optimized for SVG User Interface Development for the World Wide Web:
Show AbstractDeveloping a Statechart-to-ECMAScript Compiler Optimized for SVG User Interface Development for the World Wide Web
Papertopic: Interactivity and Scripting
Author(s): Beard, Jacob (McGill University) and Hans Vangheluwe (University of Antwerp and McGill University)
There are many challenges that software developers face during the development of complex User Interfaces (UIs). 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.
A solution may be found in Model-Driven Engineering. In particular, Statecharts, a formalism for describing complex, reactive, timed, state-based behaviour, is highly suited to model UI behaviour.
At the same time, SVG, in combination with ECMAScript is becoming increasingly popular as a platform for application development. The ECMAScript language is used to implement interactivity and dynamic behaviour in SVG visual objects. It is thus possible to create browser-based, SVG UIs which are rich in both their visual appearance and in their interactive behaviour.
A Statechart-to-ECMAScript compiler allows developers of SVG+ECMAScript-based web applications to use Statecharts to describe the behaviour of their UIs, followed by simulation and application synthesis.
Statecharts was developed in order to be intuitive for modellers. Translating Statechart models correctly into ECMAScript is a nontrivial task however. A Statecharts compilation strategy must choose how to encode the various features of the Statecharts semantics, including: Events, Event Parameters, States, Transitions, Event Dispatch, State Hierarchy, Orthogonality, History, Actions and Guards. Additionally, it is desirable to optimize target code for execution speed, memory usage and compiled code size, all of which are important in the development of rich UIs, often running in constrained environments such as a browser on a mobile device.
Because ECMAScript is a flexible, dynamic, multi-paradigm language, the space of possible Statechart compilation strategies is quite large. In general, it is desirable to map the high-level features of Statecharts onto the high-level language features of ECMAScript. Additionally, it is important to take into consideration the constraints imposed by the Web browser environment.
This paper has three goals. The first goal is to discuss four strategies that may be employed for implementing Statecharts in ECMAScript, and the tradeoffs that each approach entails with respect to execution speed, memory usage, and compiled code size. Second, it will be shown how these techniques influenced the development of our new Statechart-to-ECMAScript compiler. Finally, the paper will demonstrate how the Statechart-to-ECMAScript compiler may be used to accelerate the development of fast, robust, and richly interactive SVG UIs.
Hide Abstract
- Developing a Statechart-to-ECMAScript Compiler Optimized for SVG User Interface Development for the World Wide Web:
- Vibhandik, Rohan (San Jose State University, San Jose, CA, USA, Graduate Student - MS in Computer Science)
Show Biography
This is Rohan Vibhandik, a Graduate Student in Computer Science. I am pursuing my Master's Degree (MS) from San Jose State University, San Jose, CA, USA. I born (May 26, 1984) and brought up in India. After completing my undergraduate (bachelor's) study in Computer Engineering, to focus on quality research in Computer Science, Web Technologies I came to USA. In India, I own a Cyber Security Company "CYWHIZ Consulting Private Limited." My profile can be viewed at "www.linkedin.com/in/rohanv" It is my immense pleasure to do contribute for a ongoing research in SVG. I am very thankful to SVG Open Conference for providing me a platform to present my work.
- Automobile Crash Testing Simulation Using ‘SVG Authoring Tools and SVG 3D Virtualization’ for Academic Purposes:
Show Abstract, Paper (Separate Tab)Automobile Crash Testing Simulation Using ‘SVG Authoring Tools and SVG 3D Virtualization’ for Academic Purposes
Interactive Portable Application development using Authoring Tools, Scripting and Animation
Papertopic: Interactivity and Scripting
Author(s): Vibhandik, Rohan (San Jose State University, San Jose, CA, USA)
Abstract: Scalable Vector Graphics (SVG, a W3C recommendation) is an XML grammar for describing 2D vector graphics, filter effects, and animation.
The main purpose of this research is to demonstrate an effective way of implementing NetBeans IDE with JAVA for developing a portable and interactive desktop application having rich UI; which can render SVG 3D Animations and combine it with SVG authoring tools. The implementation will ease the importing of Web Statistics, Database to the application designed using JAVA Scripting.
In my efforts, using a simple example of animated Automobile Crash Testing; the proposed transformation module will also be capable of allowing vector paths to portray a desired 3D effect on an object in order to simulate the vehicle crash testing. Although SVG does not support 3D geometry, for this crash test simulation implementation, 3D effects are achieved by effective use of filters and transformations. The SVG Filters Module allows a series of graphic operations to be performed on a given 2D. The compositing module allows layered objects to be combined in various ways to produce different 3 dimensional effects using JQuery, Transformations, and Translations for vectored graphics. Physical Engine Algorithms with filtering effects and transformations will provide a computing realism.
In this paper, a crash testing application denotes safety statistics and measures by progress bar and percentage. It is allowing ‘user customization’ i.e. interactivity for selecting various speed limits for a vehicle to force front collision on a rigid and fixed obstacle. As an output it will provide statistics for repercussions of a frontal impact on driver and the quality or strength of metal to be used to comply with safety measures of a vehicle. These statistics will be from a fixed database maintained with this simulation software. It manipulates data on user input, processes it, and displays animation depending on user defined parameters. Further using SVG pictorial representation; the test result (such as progress bar, charts) can be integrated to GUI.
As the main focus is on implementing the powerful use of SVG Graphics/ Animation with NetBeans IDE development tool, the functionality of Vehicle Crash Testing Simulation is limited to academic purposes only. It will provide students and self-learners with a crisp overview of Crash Testing as per lab conditions. Using this interactive SVG Graphics application, students will find it easier to learn the use of filters, transformations, translations, and physical engines implemented in SVG which is finally imported to Desktop application using IDE.
Future Scope: Learners will get acquainted with the various industrial implementations of SVG techniques in diversified fields. Similarly other day-to-day life applications can be developed with this implementation. Alternatively, even though using Batik JAVA SVG Toolkit, similar implementation is possible; there is an added advantage of using JAVA NetBeans. Using it the current Portable Desktop Application can also be enhanced for Mobile Applications using J2ME. Since most of the devices support SVG API for J2ME (JSR226); Rich SVG GUI widgets can be developed very effectively using NetBeans IDE with JAVA ME Runtime Libraries.
Files:
Hide Abstract
- Automobile Crash Testing Simulation Using ‘SVG Authoring Tools and SVG 3D Virtualization’ for Academic Purposes:
- Wang, Xingfang (School of Computer, South China Normal University)
- Teaching Multimedia Course by using SVG:
Show AbstractTeaching Multimedia Course by using SVG
Papertopic: SVG for Multimedia Presentations
Author(s): Chi, Guobin (South China Normal University), LI, Yan (South China Normal University), LI, Hui (School of Computer, South China Normal University) and Xingfang Wang (School of Computer, South China Normal University)
Multimedia is media and content that uses a combination of different content forms. Teaching the basic characteristics of media in the Multimedia course is more theory-oriented and designed to give students fundamental knowledge of how digital data is stored, digital media are created and how information is transmitted over a network. To cement these concepts students are given hands-on experiences. Usually, teaching this part of the media in the course is broken into five sections (text, images (include graphics), animation, audio and video) each with a theoretical and practical component. In order to fit the new development of delivery multimedia in network, SVG was involved in teaching basic concepts of five media.
As is well known to all, SVG (Scalable Vector Graphics) is an open standard enabling high quality, dynamic, interactive, stylable graphic and delivering over the Web and wireless communication and recommended by W3C. It can also support the text, image, animation, audio and video except the graphics using accessible, human-readable XML. Therefore, we introduced it into the curriculum design of multimedia system course that bridges the gap between digital media and programmers for the students from both software engineering and digital media with digital art. The project develops curriculum material including a teaching material for oral presentation and a studying website of SVG subject.
The teaching material is arranged around a Primer of material relevant to both computer science and digital art students for a bilingual course of multimedia system; an advanced Computer Science (CS) Module emphasizing the mathematics and technology underlying digital media; and an advanced Art Module emphasizing aesthetics and design. The learning units of the media characteristics mainly focused on topic areas are digital graphics, image and color model, text, audio, video and multimedia programming etc. And the studying website was developed as a part of the bilingual course of multimedia system in order to improve Student Learning through the Use of Web Simulation Activities and Case Studies in Multimedia Programming". The Web material is divided in a fine-grained manner into recombined topics, interactive exercises and demonstrations. Through the studying Website of the SVG subject, it introduces the basic concepts of media and programming for multimedia system, students will learn the principles of object oriented programming and how to create scripts for the manipulation of video, graphics, image and text to construct a complete multimedia presentation or system.
In the project, the curriculum was redesigned in three core courses in the Multimedia Programming, Multimedia storing and Networking, and Multimedia Applications. Historically, the students have had difficulty learning the basic concepts, and then applying these concepts and programming to the process of developing their own projects. Thus, the project also addresses these issues by adapting and implementing exemplary educational materials and pedagogical strategies to revise the three core courses of the major mentioned above. At the same time, as a part of our project, a tutoring program and a faculty development SVG script1ing were instituted to extend student learning and ensure integration of the newly developed courseware into the teaching practices of the faculty. The course guides students through developing applications and also introduces them to programming in a networked and multiple user environments with SVG JAVA Scripts and SVG Media Server. The SVG Media Server is used to provide the multiple user environments and allow the students to build on their Action Script skills from the Multimedia Programming class. To help explain the concepts in the class and to link them to real-world applications, the Case Study method developed at the multiple choice in their daily life and own knowledge for Case Study Teaching in Science is used.
The case studies are divided into two parts including the monomial or validated experiment and integrated experiment. The purpose of the former one just lets students familiarized with the document format of SVG, storing solution, drawing approaches and scripting of SVG basic graphic elements such as line, rectangle, circle, ellipse, polygon and polyline etc.; And understanding the media characteristics and interactivity of SVG and creating interactive animation. These monomial experiments are involved the basic knowledge of computer graphics, animation, audio and video etc. Students are asked to make a creative and original works thus the topics of the experiment are not limited. The integrated experiment try to make a story of the multimedia project in which a SVG work must be included in the presentation or system.
As a result, the new knowledge and technique of SVG introduces to the students as a special lecture in the course of multimedia system, in which students can have 1) a systemic and in depth studying platform with the studying Website of SVG subject and related courseware; 2）A combination of SVG and basic concepts of media, it enhances the departed knowledge and technique during the study. 3) Especially, it is very important to study the new technique such as SVG through practice. In conclusion, new technology is in progress with each passing day, SVG introduces into the multimedia system course that is a tendency to promote teaching quality and an important part of teaching reformation in teaching multimedia course.
KEYWORDS: Multimedia System Course, SVG, Text, Animation, Graphics, and moving pictures
Hide Abstract
- Teaching Multimedia Course by using SVG:
- Whitfield, Deborah (Slippery Rock University, Professor)
- Generating Random SVG Elements in Polynomial Time:
Show Abstract, Paper (Separate Tab)Generating Random SVG Elements in Polynomial Time
Papertopic: Graphic Design with SVG
Author(s): Whitfield, Deborah (Slippery Rock University), Dailey, David (Slippery Rock University) and George Shirk
Generating Random SVG Elements in Polynomial Time
Dr. Deborah Whitfield (deborah.whitfield@sru.edu)
Dr. David Dailey (david.dailey@sru.edu)
Mr. George Shirk (gws9396@sru.edu)
The ability to generate dynamic graphical content is a major asset of SVG. Accordingly, a natural question that has caught the attention of computer scientists for some time is how to efficiently generate "interesting" random shapes. The generation of random shapes could be used to mimic scenery found in nature which appears to the human eye to be truly random. Trees grow at apparently random angles, water bodies such as lakes, and oceans have random contours edges. Furthermore, streams have unusual edges and meander randomly. Random polygons with a large number of edges can be smoothed, filtered and given gradients to resemble natural entities such as clouds, lakes and land formations. An efficient algorithm for generating poly-gons has been created and implemented in SVG. The paper will demonstrate its use to create random shapes.
The SVG code is implemented so that the user simply needs to select the number of points and the bounding size of the n-gon to be created. The algorithm is provably random - it can generate any possible n-gon within the specified bounding box. Furthermore, it is fair and representative - it does not tend toward a typical shape as other techniques do (e.g., convex hull, star-shaped polygons). Unlike other techniques (Auer, Held), it does not require a given set of vertices, but rather generates the vertices randomly as the polygon is constructed. Additionally, taking advantage of newly discovered methods (Dailey & Whitfield), it draws these polygons in time polynomially related to the number of vertices, unlike the previous exponential-time techniques that have been explored for this problem from a given set of vertices.
This paper will introduce the algorithm and its implementation, and provide numerous examples of the utility of the technique. The technique may be used for creating interesting random shapes and elements of nature. SVG gradients, filters, noise, and patterns are used to make the dynamic images more realistic. In addition, the polygons can be smoothed using cubic splines and Bezier curves. The authors intend to extend this work to improve the efficiency of the algorithm for generating random polygons.
Hide Abstract
- Generating Random SVG Elements in Polynomial Time:
- Wilfahrt, Peter (University of Bayreuth, Developer)
- Lightning fast data plotting and graphics with JSXGraph:
Show AbstractLightning fast data plotting and graphics with JSXGraph
Papertopic: Interactivity and Scripting
Author(s): Valentin, Bianca (University of Bayreuth) and Peter Wilfahrt (University of Bayreuth)
The JavaScript based library JSXGraph enables a wide range of interactive data visualizations from complex mathematical content like geometry constructions or curve plotting to online charts and maps. Thereto it does not rely on any other library but uses SVG for drawing on most browsers and VML on the Internet Explorer. JSXGraph is easy to embed and has a small footprint: less than 100 KByte if embedded in a web page. Special care has been taken to optimize the performance. JSXGraph is developed at the Lehrstuhl für Mathematik und ihre Didaktik, University of Bayreuth, Germany.
JSXGraph was originally developed for educational purposes. Dynamic geometry systems are used more and more widely in schools to visualize geometry and calculus interactively. It is possible to create a geometric construction or a function graph, drag them around with the mouse, and observe the dependencies between the objects. With the accelerating speed of JavaScript in web browsers and the diminishing importance of Java in web there was need to have a tool for viewing mathematical content without a slow Java plug-in. So it is able to run also on small multimedia devices where Java based systems are not supported that most other dynamic geometry systems are using. Starting with version 0.80 JSXGraph also supports multitouch devices like the Apple iPhone and devices running Opera mini or Mozilla Fennec.
JSXGraph can read several file formats that are used by the most popular dynamic geometry systems as well as the European standard Intergeo format. As it is completely written in JavaScript it is also possible to script an own construction using JavaScript with few commands. A new development is the opportunity of parsing geometric constructions and do function plots from a well known and very easy and short mathematical syntax so that even very complex constructions can be done within one line.
With having all the mathematical objects and the possibility of dragging them around and influencing them interactively, it is easy to use JSXGraph as a charting tool. One application is to have interactive charts or charts in connection with a server that provides data at certain points of time that has to be visualized simultaneously. An example is a stock chart that shall be displayed together with its regression line to visualize the trend of data. JSXGraph provides a server module that eases such applications.
A further new application of JSXGraph is displaying maps that are given in the ArcView shape format.
It is possible to reduce the size of the transmitted data considerably by suitable rounding and thinning out data points with the Ramen-Douglas-Peukert algorithm, i.e., data points defining a border that nearly lie on the same straight line as its neighbours can be removed.
The wiki pages of the project (JSXGraph wiki) contain many examples and showcases, e.g.
Links:
Hide Abstract
- Lightning fast data plotting and graphics with JSXGraph:
- Wong, Foot Yow (Ecava Sdn Bhd, Business Development Manager)
Show Biography
NA
- SVG animations' constrain in SCADA application:
Show AbstractSVG animations' constrain in SCADA application
Papertopic: SVG for Multimedia Presentations
Author(s): Lee, Kwee Hui (Ecava Sdn. Bhd.) and Foot Yow Wong (Ecava Sdn Bhd)
SCADA/HMI, a real time monitoring system is recently developed to be working on web. It is very common for people nowaday, to be able to monitor and control their home/office and plant remotely using a web client.
SCADA/HMI, which is characterized by rich mimic, has traditionally functioned as a desktop application. When SCADA/HMI is required to run on intranet or Internet, Java technologies and ActiveX technologies, which are not W3C standard, were mainly used to handle the extensive graphical animations over this media.
SVG has made rich animations possible over the net without using proprietary technologies. Ecava has developed and delivered its first SVG based SCADA system called “IntegraXor” as early as 2003. Ecava further developed XSAC (IntegraXor SCADA Animation Code) which allows animations to be done easily by linking a JavaScript animation library instead of doing JavaScript programming. XSAC is a series of animation attributes written in JSON format which can be easily generated. Ecava has developed SAGE (Scada Animation GUI Editor) based on Inkscape for such purpose.
The JSON syntax contains the animation to work, a tag name to be listen, and the parameters to take action. For example a circle created in Inkscape is given a COLOR animation, and the color of the object shall change according to a predefined parameter associated with the tag value, which update from server. The update procedure requires a Javascript library to loop and make HTTP request to server.
Major Animations for SCADA application are Color, Level, Movement, Opacity, Rotate and Text. They are all tied to at least one variable which is normally associated with data from an external field equipment. The animations shall correspond to the actual status of the field equipments.
Below are some samples of XSAC as compared to native SVG animation elements which are extracted from SVG specification 1.1.
<table>
<tr>
<th>
XSAC
</th>
<th>
SVG Animations Elements
</th>
</tr>
<tr>
<td>
{attr:'color', list:[{tag:VARm, data:NUMm, param:COLORm}, {tag:VARn, data:NUMn, param:COLORn}/*, ...*/]}
</td>
<td>
<animateColor attributeName="fill" attributeType="CSS" from="rgb(0,0,255)" to="rgb(128,0,0)" begin="3s" dur="6s" fill="freeze" />
</td>
</tr>
<tr>
<td>
{attr:'level', tag:VAR1, from:NUM1, to:NUM2}
</td>
<td>
<animate attributeName="height" attributeType="XML" begin="0s" dur="9s" fill="freeze" from="100" to="300" />
</td>
</tr>
<tr>
<td>
{attr:'move', tag:VAR1, from:NUM1, to:NUM2, readonly:0, path:ID}
</td>
<td>
<animateMotion path="M 0 0 L 100 100" begin="3s" dur="6s" fill="freeze" />
</td>
</tr>
<tr>
<td>
{attr:'opacity', tag:VAR1, from:NUM1, to:NUM2}
</td>
<td>
<set attributeName="visibility" attributeType="CSS" to="visible" begin="3s" dur="6s" fill="freeze" />
</td>
</tr>
<tr>
<td>
{attr:'rotate', tag:VAR1, from:NUM1, to:NUM2}
</td>
<td>
<animateTransform attributeName="transform" attributeType="XML" type="rotate" from="-30" to="0" begin="3s" dur="6s" fill="freeze" />
</td>
</tr>
</table>
SVG has animation elements and it is sufficient to support simple animations needed in SCADA mimic. However, a limitation in the design is the adaptation for external interaction. Moreover, the animation is designed to be time-oriented but not condition based or state orientated that reflects the value of a variable. As such, SCADA applications will not be able to utilize the built in design directly but they have to use JavaScript and DOM access to achieve some simple animation which involved colors, transformation, opacity and movements. In some scenario, SCADA applications need to remove an object, and append a new one in order to achieve simple animations.
We could do a workaround by using beginElementAt() and endElementAt() to freeze the animation at the desired position, but it could be confusing and it does not simplify the work required.
We propose to add state-oriented animation to the existing time-oriented animation, so that SVG native animations can be access directly. The state-oriented animation will preset a number of animations into an attribute, and the execution is determined by another attribute. A sample of this proposal is shown below:
<animateColor attributeName="fill" attributeType="CSS" fill="freeze" colors="rgb(0,0,255), rgb(128,0,0)" state="0" />
Numerous colors can be preset into an animateColor tag, where the color to be shown depends on the attribute "state". In this scenario, external interaction will only need to change the property of "state", the animation will change accordingly. Similarly, animateMotion, animateTransform and animate itself can be inserted with 2 new attributes for state-oriented animation as well.
A state-oriented SVG animation has a lot of advantages, for instance it can be used by office/home applications that generates bar chart, pie chart, or any other type of data-oriented (hence state-oriented) presentations. Below are the examples of implementation after adding 'state' attributes.
<table>
<tr>
<th>
SVG Animations Elements with additional 'state' attribute
</th>
<th>
Effect
</th>
</tr>
<tr>
<td>
<animateColor attributeName="fill" attributeType="CSS" values="rgb(0,0,255),rgb(128,0,0),rgb(0,255,0)" state="0" fill="freeze" />
</td>
<td>
'state' default value is 0, so color shall start by first color 'rgb(0,0,255)'. When value of 'state' change to 1, then color shall change to 'rgb(128,0,0), and so on and so forth.
</td>
</tr>
<tr>
<td>
<animate attributeName="height" attributeType="XML" dur="9s" fill="freeze" from="100" to="400" state="200"/>
</td>
<td>
'state' initial value is 200, so initial height is 33%. And when state value increase to 300, 'dur' still functioning for animation effect whereby it shall consume 3 seconds which is interpolated to 9 seconds.
</td>
</tr>
<tr>
<td>
<animateMotion path="M 0 0 L 100 100" dur="6s" fill="freeze" state="10%"/>
</td>
<td>
'state' initial value is 10%, so it will be started at 10% of the total path. And it shall take 6 seconds to travel from 0 to 100%.
</td>
</tr>
<tr>
<td>
<set attributeName="visibility" attributeType="CSS" to="visible" dur="6s" fill="freeze" from="0" to="100" state="10"/>
</td>
<td>
'state' initialized with value of 10, it shall be proportional to 'from' and 'to' values. Total time needed to animate from 'from' to 'to' shall be 6 seconds.
</td>
</tr>
<tr>
<td>
<animateTransform attributeName="transform" attributeType="XML" type="rotate" from="-30" to="10" dur="6s" fill="freeze" state="-10"/>
</td>
<td>
'state' initialized with value of -10 which is at 180 degree. When value is at 'from', the position is 0 degree, when the value is at 'to' the position is at 360 degree.
</td>
</tr>
</table>
Hide Abstract
- SVG animations' constrain in SCADA application:
- Yaremchuk, Oksana (San Jose State University, Student)
- Applications of SVG to study developmental dyscalculia:
Show AbstractApplications of SVG to study developmental dyscalculia
Papertopic: Business Cases and Case Studies
Author(s): Yaremchuk, Oksana (San Jose State University)
Abstract
SVG can contribute to advancing our understanding of the way children acquire math skills, towards individually tailored math instruction programs. The Stanford MathBrain Project (http://mathbrain.stanford.edu) conducts cutting edge research using neuroscience methods to investigate the development of cognitive abilities, including math reasoning. A recent research initiative, “Dyscalculia and Math Disabilities”, is funded by NIH (National Institute of Health) to study structural and functional brain differences among children with varying math ability. Brain measurements are taken before and after a special training program with a promise of remediation of math difficulties. We propose that individualized math instruction and practice materials for this and similar studies can be delivered in game format.
Interactive multimedia games can be a fun and efficient way to practice math skills. First, children are naturally motivated more to learning while playing games, compared to many other learning formats. Second, immediate performance feedback can greatly contribute to learning effectiveness. Third, the mobility of modern gaming devices creates easy access to learning tools any time, anywhere.
SVG is vector graphics format that can incorporate animation and interaction in math reasoning and learning games. Children with math disabilities will benefit from a variety of games designed for improving their math and spatial reasoning, quantity sense, goal focusing, and attention span. With SVG we create a series of games providing a course of intensive math learning.
We integrate CSS to allow game changes without changing the application’s structure. By making changes only to CSS we can offer larger spectrum of color and texture of outcomes. In our application, SVG will be used for a vast range of purposes from interactive imaging to data transfer.
Implementing games using SVG will allow for describing math (mathml) in the browser, on screen rendering, and global data transferring between vector based applications. SVG allows for extension through other XML-based languages, scripting languages, CSS, and the DOM. Dynamically resizing vector graphics in a browser is possible via macro-media's flash plug-in. However, compared to macro-media flash, SVG belongs to XML family so any graphics program can have an export module for writing out SVG files that allows transferring files between vectors based applications. Because XML parser can be obtained for free, many applications can have SVG interpreter added to them. This means that our own application can be transferred to any software or hardware, form desktop to iphone. By integrating SVG features into our games we will provide flexibility for our users who may do their lessons anywhere at convenient for them time. In addition, our games will we provide student reports and feedback during the course.
All games are implemented in SVG and use CSS for styling. The jQuery Javascript framework helps animation. We believe the use of SVG and CSS allows for the creation of new frontiers for scientific investigation of dyscalculia and math disability, providing tools for designing training program materials, to collect data about dyscalculia symptoms and responses. The system is being offered to dyscalculia researchers at Stanford University. We hope to have clinical data and analysis to report in later half of 2010.
Bibliography
Elchi3, "SVG," blog, 23, Mar. 2010; https://developer.mozilla.org/en/SVG
Elena Rykhlevskaia, Lucina Q. Uddin, Leeza Kondos and Vinod Menon, "Neuroanatomical correlates of developmental dyscalculia: combined evidence from morphometry and tractography," Frontiers In Human Neoruscience, May 2009; http://www.frontiersin.org/neuroscience/humanneuroscience/paper/10.3389/neuro.09/051.2009/html/.
Kris Rockwell, “SVG Smart Graphics”, AICC Pittsburgh 6.14.01; http://www.aicc.org/docs/meetings/11jun2001/svg.pdf
Ola Andersson, ZOOMON AB, Phil Armstrong, Corel Corporation, Henric Axelsson, Ericsson AB, Robin Berjon, Expway, Benoît Bézaire, Corel Corporation
, John Bowler, Microsoft Corporation, Craig Brown, Canon Information Systems Research Australia, Mike Bultrowicz, Savage Software
, Tolga Capin, Nokia, Milt Capsimalis, Autodesk Inc., Mathias Larsson Carlander, Ericsson AB, Jakob Cederquist, ZOOMON AB
, Charilaos Christopoulos, Ericsson AB, Richard Cohn, Adobe Systems Inc., Lee Cole, Quark, Don Cone, America Online Inc.
, Alex Danilo, Canon Information Systems Research Australia, Thomas DeWeese, Eastman Kodak, David Dodds, Lexica, Andrew Donoho, IBM
, David Duce, Oxford Brookes University, Jerry Evans, Sun Microsystems, Jon Ferraiolo, Adobe Systems Inc.
, Darryl Fuller, Schema Software, ?? ? (FUJISAWA Jun), Canon, Scott Furman, Netscape Communications Corporation
, Brent Getlin, Macromedia, Peter Graffagnino, Apple, Rick Graham, BitFlash, Vincent Hardy, Sun Microsystems Inc.
, ???? (HAYAMA Takanari), KDDI Research Labs, Lofton Henderson, OASIS, Jan Christian Herlitz, Excosoft,
Alan Hester, Xerox Corporation, Bob Hopgood, RAL (CCLRC), ?? ?? (ISHIKAWA Masayasu), W3C., Dean Jackson, W3C/CSIRO (W3C Team Contact)
, Christophe Jolif, ILOG S.A., Lee Klosterman, Hewlett-Packard, ?? ?? (KOBAYASHI Arei), KDDI Research Labs
, Thierry Kormann, ILOG S.A., Yuri Khramov, Schema Software, Kelvin Lawrence, IBM, Håkon Lie, Opera, Chris Lilley, W3C (Working Group Chair)
, Philip Mansfield, Schema Software, Kevin McCluskey, Netscape Communications Corporation, ?? ? (MINAKUCHI Mitsuru), Sharp Corporation
, Luc Minnebo, Agfa-Gevaert N.V., Tuan Nguyen, Microsoft Corporation, ?? ??? (ONO Shuichiro), Sharp Corporation,
Antoine Quint, Fuchsia Design (formerly of ILOG), ?? ? (SAGARA Takeshi), KDDI Research Labs, Troy Sandal, Visio Corporation
, Peter Santangeli, Macromedia, Haroon Sheikh, Corel Corporation, Brad Sipes, ZOOMON AB, Peter Sorotokin, Adobe Systems Inc.
, Gavriel State, Corel Corporation, Robert Stevahn, Hewlett-Packard, Timothy Thompson, Eastman Kodak
, ?? ?? (UEDA Hirotaka), Sharp Corporation, Rick Yardumian, Canon Development Americas, Charles Ying, Openwave Systems Inc.
, Shenxue Zhou, Quark. "W3C Recommendation," 14, Januarry 2003; http://www.w3.org/TR/SVG11/.
Stanford math Brain, http://smp.stanford.edu/?q=mathgames .
Files:
Hide Abstract
- Applications of SVG to study developmental dyscalculia:
- Yoon, Jiyoung (Huone, Ressearch Engineer)
- Accelerating SVG Tiny with multimedia hardware on mobile phones:
Show AbstractAccelerating SVG Tiny with multimedia hardware on mobile phones
Papertopic: Mobile SVG Solutions
Author(s): Baek, Nakhoon (Kyungpook National University), Lee, Hwanyong (HUONE Inc.), Lee, Inkyun (HUONE) and Jiyoung Yoon (Huone)
Hardware acceleration of the SVG mobile player is required for larger screens and better user experiences. Currently, a feasible way of this acceleration would be realized on the OpenGL, OpenGL ES or OpenVG hardware, while these high-end hardware chips are so expensive and need much higher power consumption. In this paper, we suggest another cost-effective way of accelerating SVG mobile players, based on the wide-spread and inexpensive multimedia hardware of mobile phones. We first accelerated OpenVG with the fundamental features of multimedia hardware including bit-block transfer, image processing and blending operations, and then modified the SVG mobile player to use these accelerated OpenVG features. Our final implementation shows remarkable performance enhancement for displaying vector contents and impressive enhancements for displaying bitmap contents. Reducing a great amount of CPU work load is another important advantage of our implementation, and now CPU can be actively used for other tasks. Conclusively, our implementation delivers much better performance and reduced CPU work load to the SVG mobile players, without any additional hardware to the mobile phone devices.
Hide Abstract
- Accelerating SVG Tiny with multimedia hardware on mobile phones:
- Yuwono, Ignatius (PayPal, Staff Software Engineer)
Show Biography
Ignatius currently does next-gen web tooling for PayPal's Technology Environments Group, where he holds the position of Staff Software Engineer. Ignatius holds a Masters in Computer Science from San Jose State University.
- An SVG Rendering Extension for Swing:
Show AbstractAn SVG Rendering Extension for Swing
Papertopic: SVG Viewer Implementations
Author(s): Yuwono, Ignatius (PayPal) and Johnny Martin (San Jose State University)
Motivation
Recent advances in toolkits make SVG a friendlier development platform, yet SVG continues to lack a mature widget library. Java Swing[1], however, offers many standard widgets organized into 17 public JFC packages and is arguably the most widely used widget library. Yet there remain some applications that are better expressed in SVG. Until now using SVG and Swing together has not been possible.
We have built a Swing, SVG interoperability framework. Although conceptually easy to state, there are considerable challenges adapting Swing to work with SVG. Swing's 2D Java rendering is designed to abstract hardware specifics, but unfortunately makes serious assumptions about the abstracted hardware layer. Swing's designers did not intend to support SVG DOM rendering. Re-hosting Swing to SVG turns out to be challenging. Architecturally, SVG and Swing are worlds apart. Our framework sets about to marry these two worlds and overcome these challenges.
Why Widgets?
Swing's TextBox widget provides control over, rich, Unicode, and multi-directional text, caret handling, accessibility, localization, keymaps, focus handling, tooltips, vertical and horizontal alignment, fonts, scroll offset, listeners, color, input methods, margins, scrollable viewport size, scrollable tracks, block, and unit increments, read-write edibility, selection regions, colorization, and highlights, and enabling dragables.
Building a mature, Swing-like native SVG widget library is theoretically possible, yet to date, this hasn't happened; and designers have shared their desire for features found in Swing and .Net[9,10].
The Framework
Our framework brings mature widgets to SVG by re-hosting Swing in SVG. A user opens a Swing application through an SVG viewport and interacts exclusively via SVG DOM events. We strip out Swing's platform-specific 2D rendering layer and re-host it via SVG. Our framework allows any existing Java Swing application to be re-hosted without source code changes by only altering Java bytecodes and augmenting the default Swing run-time library with our run-time.
Integration with custom SVG is also possible. SVG-specific application components can be added and will co-exist with Swing SVG seamlessly, although the SVG designer must be mindful of some framework constraints.
Architecture
Painting and eventing model differences between the SVG and Swing worlds present considerable challenges. In spite of the declarative-procedural impedance mismatch of these two worlds, our architecture marries them with a build-time and a run-time.
Build-time Architecture
The framework uses introspection and class re-writing at the bytecode level using BCEL[2] through the JMangler runner[3]. We achieve a goal of hosting unmodified existing Java Swing applications, since class rewriting is done post compilation. Batik[4] libraries are used to rewrite 2D Java Graphics API calls yielding a parallel Swing API hierarchy, so that for each Swing GUI component, we instantiate a mechanism for composing a group of primitive SVG shapes corresponding to the Swing visual. A wrapper-concierge BCEL does bytecode rewriting, surgically altering bytecodes of the Swing component, e.g., a Swing JTree component gets replaced with our own JTree component version.
Run-time Architecture
The run-time architecture handles events and redraws. Our framework replaces Swing's low-level 2D Java rendering, however, these cannot be used directly to generate SVG. We cannot blindly paint by adding more DOM nodes. Instead, the framework must make intelligent decisions about adding, deleting, or mutating the currently displayed SVG DOM. This is accomplished by:
- Assigning a ID to each SVG component.
- Faking maximal damage so to cause Swing to repaint all of the Swing visuals. This is because the Swing library's optimization assumptions about underlying hardware do not work correctly for the SVG DOM.
- Intercepting Swing repaints, coalescing primitive draw commands, resorting to SVG shapes, and delivering selective changes (adds, deletes, mutations) to the SVG DOM.
- Repainting is done by the SVG Viewer upon receiving our SVG DOM mutations.
SVG events are translated Swing's screen coordinates, targeted to the appropriate Swing component widget, and artificially injected into the Swing event queue.
A benefit of the run-time processing is that we always produce minimal change set to be applied to the SVG DOM, which improves SVG redraw time.
Conclusion and Future Work
Extensions we are considering:
- We would like to improve facilities to accommodate custom Swing classes, so they can be integrated more naturally as SVG Java components. Currently only built-in Swing components are handled seamlessly. User defined custom Swing components must be handled manually.
- SVG styled widget components that take advantage of SVG, but employ model on Java side for managing abstract widget state in model.
Our framework provides an alternative to native SVG widgets and offers a mature widget library, Swing. Combining this with custom SVG components, offering application developers the best of both worlds. We hope our framework addresses SVG widget libraries' immaturity concerns, and can be used to bring Java Swing applications into the DOM.
References
[1] Oracle Corporation, "Trail: Creating a GUI With JFC/Swing," 1/12/2010. [Online]. Available: http://java.sun.com/docs/books/tutorial/uiswing/index.html.
[2] The Apache Jakarta BCEL Project Team, "The Byte Code Engineering Library," Jun 3, 2006. [Online]. Available: http://jakarta.apache.org/bcel/
[3] Austermann, M. "The JMangler Project," October 28, 2004. [Online]. Available: http://roots.iai.uni-bonn.de/research/jmangler/.
[4] The Apache Software Foundation, "Batik Java SVG Toolkit," February 2010. [Online]. Available: http://xmlgraphics.apache.org/batik/.
[5] Lindsey, K. "Home page - Kevin Lindsey," 2004. [Online]. Available: http://www.kevlindev.com.
[6] Lewis, C. T., Karcz, S., Sharpe, A., Parkin, I.A.P., Development of an SVG GUI for the visualization of genome data. In Proceedings of SVG Open 2002 (Zurich, Switzerland, 2002)
[7] Baranovskiy, D., "Raphael Javascript Library," [Online]. Available: http://raphaeljs.com/. [Accessed: Mar. 7, 2010].
[8] Wood, K. "jQuery SVG Plugin," January 23, 2010. [Online]. Available: http://keith-wood.name/svg.html.
[9] SPARK, C. Lewis, A. Fettes, P. Mansfield, 2nd Annual Conference on Scalable Vector Graphics, July 2003. Available at http://www.svgopen.org/2003/
[10] SVG-Based User Interface Framework, Alastair Fettes and Philip Mansfield, 3rd Annual Conference on Scalable Vector Graphics 2004 SVG Open Conference 2004,Sept 7-10, 2004. Available at http://www.svgopen.org/2004/
[11] Chatty, S., Sire, S., Vinot, J., Lecoanet, P., Lemort, A., and Mertz, C. 2004. Revisiting visual interface programming: creating GUI tools for designers and programmers. In Proceedings of the 17th Annual ACM Symposium on User interface Software and Technology (Santa Fe, NM,USA,October 24 - 27, 2004). UIST '04. ACM Press, New York, NY, 267-276.
[12] Marriott, K., Meyer, B., and Tardif, L. 2002. Fast and efficient client-side adaptivity for SVG. In Proceedings of the 11th international Conference on World Wide Web (Honolulu, Hawaii, USA, May 07 - 11, 2002). WWW '02. ACM Press, New York, NY, 496-507.
[13] Antoniou, B., Tsoulos, L. 2004. Converting raster images to XML and SVG. In Proceedings of SVG Open 2004 (Tokyo, Japan, 2004).
[14] World Wide Web Consortium, "Document Object Model (DOM) Level 2 Core Specification," November 13, 2000. [Online]. Available: http://www.w3.org/TR/DOM-Level-2-Core/
[15] World Wide Web Consortium, "Document Object Model (DOM) Level 3 Core Specification," April 7, 2004. [Online]. Available: http://www.w3.org/TR/DOM-Level-3-Core/.
[16] Fowler, A., "Painting in AWT and Swing," [Online]. Available: http://java.sun.com/products/jfc/tsc/articles/painting/. [Accessed: Mar. 7, 2010].
[17] Lindholm, T., and Yellin, F., "The Java Virtual Machine Instruction Set," Reading, MA: Addison-Wesley, 1999.
[18] Oracle Corporation, "How to Use Tabbed Panes," 1/12/2010. [Online]. Available: http://java.sun.com/docs/books/tutorial/uiswing/components/tabbedpane.html
[19] The Eclipse Foundation, "SWT: The Standard Widget Toolkit," February 2010. [Online]. Available: http://www.eclipse.org/swt/.
Links:
Hide Abstract
- Mutation and Evolution of Animated SVG Figures:
Show AbstractMutation and Evolution of Animated SVG Figures
Papertopic: Graphic Design with SVG
Author(s): Martin, Johnny (San Jose State University) and Ignatius Yuwono (PayPal)
Inspired by a similar program introduced by Richard Dawkins, our program provides a dynamic updating display of primitive animated SVG biomorphs. Our SVG biomorphs evolves on the screen under the influence of mouse interactions that guide mutations along an evolutionary path. Genes control organism traits which are realized in SVG with JavaScript animation. JavaScript events trigger selective mutation forming the interface for user interaction. This paper describes a system of dynamic shape-based organisms with quantitative traits, evolving from simple to complex organisms through user selection.
Background
In The Blind Watchmaker[1], Richard Dawkins describes a computer program to simulate the evolution of biomorphs. The program presented is an example of a genetic algorithm (GA). Dawkins's program simulates biological evolution in the computer by attempting to modeling a complex structure's evolutionary development via cumulative selection.
Dawkins models an unfolding evolution with a specific goal provide by user input. In contrast to Darwinist selection the program uses user controlled selection. The biomorphs that evolve in the program develop, and their embodiment is controlled by a number of trait factors encoded in "genes" which mutate in each generation. Mutations result from user input. This alters biomorph development and leads to new biomorph forms.
The program functions as follows. A parent is selected. The subroutine REPRODUCTION runs, and generates random mutations in each of the 9 genes of the parent; the new genes are passed to the subroutine DEVELOPMENT, which draws new biomorphs based on the new genes. The result is a set of 9 offspring, each with a variation of one of the parent's genes. One offspring is selected to be the parent of the next generation. This process, repeated multiple times, gives birth to the program EVOLUTION.
Several implementations of biomorph generating programs can be found in the literature [2,3,4]. Ours offers an interesting feature that encodes traits for biomorphs to animate. The animation trait is controlled by one of several genes.
Living Biomorphs in SVG
Our version of biomorph includes genes that control for animation or movement of joints between shape structures. Effectively this allows for the development of biomorphs that are jointed with movable joints. Each successive iteration provides the biomorph with grouped sub-structures. Both shape structures, their groupings, and their movement will morph and mutate also with each successive iteration.
SVG is the ideal medium for expressing biomorph mutation since SVG allows for transforming of shape structures and their groupings--via scaling, rotation, and translation--with much less programming effort compared to other graphics systems. Since each joint allows for relative movement, SVG is also ideally suited to express biomorph animation, which can be achieved using JavaScript.
In conclusion, by using SVG as a medium, we have been able to effectively visualize systems of animated biomorphs with quantitative traits, evolving from simple to complex--having multi-jointed limbs and other complex natural and unnatural appearances--through simple user selection.
References
[1] Dawkins, R. The Blind Watchmaker, W. W. Norton & Company, 1996, ISBN-13: 978-0393315707
[2] Sims, K. Artificial evolution for computer graphics, ACM SIGGRAPH Computer Graphics, v.25 n.4, p.319-328, July 1991
[3] Bai L., Eyiyurekli M., and Breen, D.E. Self-organizing primitives for automated shape composition. In Proc. IEEE International Conference on Shape Modeling & Applications, 2008.
[4] Bai L., Eyiyurekli M., and Breen, D.E. Automated shape composition based on cell biology and distributed genetic programming. In Proc. of the 10th annual conference on Genetic and evolutionary computation, July 12-16, 2008.
[5] Moles A.A. Théorie de l'information et perception esthétique. Denoel, 1958.
[6] Gagné, C., Parizeau, M. Genericity in evolutionary computation software tools: Principles and case-study. International Journal on Artificial Intelligence Tools, 15(2):173--194, 2006.
[7] Fleischer, K.W., Barr, A.H. A multiple-mechanism developmental model for defining self-organizing geometric structures, 1995
[8] Klein, J., Spector, L. Unwitting distributed genetic programming via asynchronous JavaScript and XML. In Proc of the 9th annual conference on Genetic and evolutionary computation, July 07-11, 2007.
Hide Abstract
- An SVG Rendering Extension for Swing:
- Zaiss, Rainer (IRD, geographer)
- FAUNAFRI:
Show AbstractFAUNAFRI
Online GIS to map and compare the geographical distribution of fresh and brackish waters fish species in Africa
Papertopic: SVG for Webmapping and Online GIS/GML
Author(s): Zaiss, Rainer (IRD)
Biodiversity of fresh and brackish waters fish species in Africa is both highly diverse and of great regional importance to livelihoods and economies. Many areas in Africa are still not well surveyed such that available information on fish species is insufficient for environmental and development planning. Lack of basic information on species distribution and threatened status has long been a key obstacle facing freshwater ecosystem managers in Africa. Therefore, IRD has initiated a project to put in place an online GIS to collate, store, manage, and make widely available information about the distributions of fresh and brackish waters fish species in Africa.
The build up of the GIS required identifying and collating fundamental data themes for the entire African continent, which are point locations on all known species, hydrography, hypsography, international boundaries, geographic names and land cover. Lack of accurate, reliable and up-to-date fundamental geo-spatial data sets as well as problems caused by error, inaccuracy, and imprecision were the main challenge to put in place the application. The database holds actually around 7000 sample sites spread all over the continent, 3300 distinct species, and about 120 000 records.
The architecture and the GUI to map and compare the geographical distribution of fish species on the continental level down to the sample site is based upon an api developed by carto:net. PostgreSQL is used as object-relational database management system, PostGIS adds support for geographic objects, and the UMN MapServer provides raster data layers. The graphical user interface is entirely designed in SVG. Data from the server is retrieved asynchronously in the background without interfering with the display and behaviour of the existing page whenever the user interacts with the GUI. The first beta version of the application is accessible at the address http://www.ird.fr/poissons-afrique/faunafri/. We recommend at present using Microsoft Internet Explorer with Adobe svg viewer installed for viewing the page.
In the current version, each time the user zooms or pans the application extracts from the database for each visible layer a new SVG fragment containing the geometry for the current area of interest. Prior to appending the content to the layer groups on the client side, the old content is deleted. If the user goes back in the view history to return to a previous visited area the application reloads the content again from the database. The same structural design is used for the raster data.
The presentation will introduce a tile-based method to request the geometry from the database in order to avoid loading the same content twice. We intend to put into practice the tile-based approach in the final version of the application FAUNAFRI for the vector and the raster layers.
The project has received funds from IRD under the scientific responsibility of D. Paugy. Here, we would like in particular to acknowledge the major contributions to the project provided by N. Rahmani, L. Ruhier, J.J. Troubat and M. Vienne.
Links:
Files:
- Geographical distribution of Alestidae Alestes (red) and Galaxiida (blue) by drainage bassins
- Geographical distribution of Alestidae Alestes (red) and Galaxiida (blue) by 400 km squaring
- Implemented level of Detail (Lac Upemba, The Democratic Republic of the Congo)
Hide Abstract
- FAUNAFRI:
- Zhang, Xinjun
- GVG - Visualize GDML data in SVG:
Show Abstract, Paper (Separate Tab)GVG - Visualize GDML data in SVG
Papertopic: SVG for Webmapping and Online GIS/GML
Author(s): Zhang, Xinjun
GVG (Governmental data visulization in SVG) is an application running in most of the popular web browsers. This application is aim to visualize data from Government mapping statistical data for each state by time, using SVG to display and interact. It is useful for users, especially for the governors, to review governmental statistical data and predict the trends of economy, employment, even the spread of disease and etc.
In this paper, a new XML format called GDML (Governmental Data Markup Language) is introduced to stored governmental statistical data like unemployment rate, inflation rate and so on. Users can upload a validated GDML file to this browser-based application, in which SVG renders a map of the country consisted of all the states. In this map, each state would be fully or partially gradient filled to represent the statistical data. Below the map, there is a slider bar with markings of a time period (e.g.: from Jan. 2009 to Dec. 2009). When the slider moves, the gradient dynamically updates the filled region according to the GDML file uploaded. A click event on a state shows more detailed information about that location. For detail-view feature, low-opacity layer representing information will display on top of the map. The detail-view contains textual data about the selected state, which is able to help the users to well understand the data and make a precise prediction.
Overview
What is GDML
GDML is a language for describing governmental statistical data in XML. For the use of GVG, GDML can describe Rate of Unemployment, Inflation (in term of gas or house or others) and Pay & Benefits. Since GDML is a XML-based language, it is well defined in DTD (Document Type Definition) and GDML file becomes a productive tool to describe, store and transmit governmental statistical data, which can be easily created and modified. Moreover, as a prime advantage of XML-based file, GDML document consists entirely of characters from the Unicode repertoire. In other words, any character defined by Unicode may appear within the content of an GDML document, which is very important for governments form different country using different language, like English, French and Chinese.
Architecture
1. Pre rendering - building GDML data files
2. Rendering SVG via Javascript
3. Javascript Event HandlingPre-rendering - building GDML data files
The GDML data could be easily fetched from Government's website, for instance: United States Department of Labor at http://www.dol.gov . The data could be pulled form its database and saved into files (in txt or xls format). According to these data, a GDML file could be created, including key information and all statistical data about each state, such as: country-name, state-name, data-type, data-time and data-value. A validated GDML, which conforms to the GDML DTD, is ready to be uploaded and displayed in GVG application.
Rendering SVG via Javascript
In GVG, a svg country map is included, consisting of all states indicated by its abbreviation. And during the onload() event of this svg map, the application will load the GDML data file into an JavaScript XML DOM object and perform data loading. The application accesses the DOM object and creates an associative object for each state in the country, in which all statistical data would be stored in different arrays as members of the object based on the category of data. The objects' names are associated with the state in its abbreviation (e.g. CA, TX, etc), so then a function called render() would be fired to render every state in map according to objects created above. First, it would locate each single state in map using SVG DOM function, and then according to the data-type selected to display, it would fetch the data value from the corresponding object, at last, base-on those value, each state would in map be applied gradient fills to rendered differently and clearly show varied situation and status.
Javascript Event Handling
Now all states are identified and rendered. Dragging or clicking on the time slider bar below the map would change gradient fills representing different situation or status in time, according to the value of data in different time period. When the mouse is released as the time slider moves, the render() function would be called again to render each state as the value of selected data change. While the slider moves and the gradient fills are changed, a clearly trend would be clearly shown.
In addition, clicking on each state would activate a view for detailed information for that location. On the right side of the map, there is a rectangle box holding text data, javascript would update those detailed information according to the mouse event onClick().
Reference
[1] United States Department of Labor. http://www.dol.gov/
[2] SVG slider. http://www.carto.net/svg/gui/slider/
[3] Map of USA form Wikipedia. http://en.wikipedia.org/wiki/File:Map_of_USA_with_state_names.svg
[4] Anh Trinh. StatsVG - Visualize statistical data through Vector Graphy. SVG Open 2009
[5] Nikolas Rathert, Vladimir Geroimenko, Chaomei Chen. Springer. Knowledge Visualization Using Dynamic SVG Charts.
[6] Shane Aulenback, Vladimir Geroimenko, Chaomei Chen. Springer. SVG as the Visual Interface to Web Services.
[7] DTD Tutorial. http://www.w3schools.com/dtd/default.asp
Files:
Hide Abstract
- GVG - Visualize GDML data in SVG:
- Zimmermann, Nikolas (RIM, Software Architect)
- SVG and Webkit:
Show AbstractSVG and Webkit
Papertopic: SVG Viewer Implementations
Author(s): Schulze, Dirk (Research In Motion (RIM)) and Nikolas Zimmermann (RIM)
Introduction
- What is WebKit?
- Where is WebKit used?
- The roots of the SVG implementation
New in WebKit SVG
New features in WebKit's SVG implementation, demonstrated by examples.- SMIL Animations
- SVG Filter
- Non-scaling stroke
- other features
CSS3 and SVG
- CSS3 in combination with SVG
- CSS3 Transitions
- CSS3 Animations
- CSS Shadows
- Future plans:
- CSS3 2D Transforms
- CSS3 3D Transforms
- Limits of CSS3 in SVG
- Can CSS3 replace SMIL animations?
HTML5
- HTML5 and innerSVG
- SVG and MathML
Hide Abstract
- SVG and Webkit:
