Conference Schedule

See also listing of presentations below for abstracts and biographies

Listing of all Presentations and Courses

Quick jump to: keynotes | regular presentations | workshops

Keynotes

• A journey through the graphical Web

  Vincent Hardy (Adobe Systems)

  Abstract

  The Web has become more graphical in many ways. There are more graphical features in CSS (such as gradients or more powerful backgrounds and borders), there are new features in the works (such as CSS compositing and blending and CSS filter effects) and there is a broader graphical foundation with improved support for SVG and Canvas across browsers and on a wide array of devices. Vincent will talk about the present and future of the graphical web and show demonstrations of the not so distant graphical web future to come.

  Presentation Video

• Beyond Play

  Joshua Davis (Joshua Davis Studios, Artist)

  Joshua Davis is a New York based artist and designer, creating public and private works for clients, collectors and museums. A TED 2005 speaker and winner of the 2001 Prix Ars Electronica Golden Nica in the category “Net Excellence”. In December 2006, His work was inducted into the Smithsonian’s Cooper-Hewitt, National Design Museum’s "National Design Triennial: Design Life Now" exhibit. Besides running his own studio, with Offices in New York and Chicago, Mr. Davis also teaches graduate students at New York's School of Visual Arts.

  Abstract

  Having spent 15 years in love with the vector format, in 2012 I left one vector based tool for a new environment which would expand my sandbox and push me into the SVG format. For the past six months I have engaged in Creative Play with this new process and tool set... showcasing that you can move Beyond Play. That Play and Work are synonyms, not antonyms.

  Presentation Video

• Bringing the Power of the GPU to the Web

  Neil Trevett (Nvidia, Vice president of Mobile Content)

  Abstract

  This session explores three open standard initiatives by which the power of the GPU is being bought to the Web, and will show cutting edge examples of each:

  • WebGL is a significant advance in the evolution of 3D on the Web, enabling foundational, GPU-accelerated 3D to be delivered by the browser without the need for a plug-in. WebGL can be used by directly applications or by a widening variety of higher-level frameworks and middleware
  • WebCL is a direct JavaScript binding to the OpenCL standard framework for heterogeneous parallel computation, enabling JavaScript applications to compile and execute C kernels across parallel CPUs and GPUs
  • Mark Kilgard at NVIDIA has spearheaded research and development into innovative OpenGL functionality that enables full GPU acceleration of vector based APIs such as SVG and enables next generation merging of 2D and 3D functionality.

  Presentation Video

• Designing the modern web

  Jacob Surber (Adobe Systems, Product Manager HTML Design)

  Abstract

  Users demand a highly engaging web experience regardless of where they consume the web. With the explosion of devices sizes, high-speed data networks and rapidly evolving web technologies, how can you design and build a high quality web experience? Modern browsers support features like CSS, SVG and canvas. Combining these three pillars of technology, a talented designer and developer can create amazing, optimized web experiences. Unfortunately, much of that work has to be done by hand with relatively little support. Adobe has been hard at work evolving existing tools like Adobe Illustrator, Fireworks and even Flash Professional to enable designers to creating using SVG, CSS and Canvas. Meanwhile, we're creating a whole new generation of tools starting with Adobe Edge and Shadow that, when combined, aid designers and developers to create fluid designs, optimize assets, and design animations that can engage any user on any device. A craftsman in any field is an expert in their own toolbox. Discover how the right tool for the right job will have you creating next generation experiences today.

  Presentation Video

• Google Swiffy: Converting SWF files to open web technologies

  Pieter Senster (Google, Software Engineer)

  Pieter Senster is the tech lead of the Swiffy team at Google, where he’s been working as a software engineer since he started the Swiffy project in 2010. Pieter received a bachelor’s degree with honors in computer science from Delft University of Technology.

  Abstract

  Google Swiffy converts SWF files (the output format of Adobe Flash) to a combination of open web technologies such as SVG, JavaScript and HTML that run natively in modern browsers. Millions of web users visit pages with rich, animated SVG content created using Swiffy on a daily basis. In this talk, we will discuss the technological difficulties we have faced when building Swiffy and discuss the capabilities and limitations of the web platform for Flash style animations.

  Presentation Video

• New rendering features in HTML

  Rik Cabanier (Adobe Systems, Sr Computer Scientist)

  Abstract

  For a long time, web graphics could not be used on the web and designers had to resort to workarounds such as prerendered images to express their creativity. However, with the advent of HTML5, the web browser is turning into a graphics powerhouse. Today, people can use express animations, drop shadows and gradients natively in the browser to get pleasing effects that apply to existing HTML element. On top of that, Canvas and SVG give developers a rich graphics model that enable things from simple graphics to complex games. Adobe is keen on helping people out in this area and contributes to enhancing expressivity on the web. In the past year, we’ve contributed to specifications for CSS regions, CSS compositing and blending and proposed CSS shaders. We are participating in the W3C working groups to build consensus on these and other features. We are also contributing some of these features in browsers or collaborating with browser vendors on their implementation. CSS filters is a new module that enables the application of shorthand filters, SVG filters and custom (CSS shaders) filters to any HTML content (not just SVG). It enables advanced effects such as color manipulation, blurring and true drop shadows. These advanced effects are specifically designed for hardware acceleration so the output won’t slow down your browsing experience. To allow more expressivity Adobe has proposed the CSS shaders as an addition to CSS filters, and this proposal was accepted by the W3C. Shaders are small programs that allow you to warp the rendering ‘box’. They also give you the ability to combine the content with generated light maps or custom textures. CSS compositing and blending is a small yet powerful module that gives you the ability to apply a blend mode to an HTML or SVG element. In the case of HTML, you can control the blending of the different element layers (background, shadow, foreground) independently. Since design applications use these same blend modes, designers are already familiar with them so they can reuse their existing skills. We also would like to propose additional blend modes to canvas. The presentation will provide a detailed overview of CSS blending and compositing and CSS filters, explain their use and go over real world examples.

  Presentation Video

• SVG and SVG Open – a retrospective

  David Dailey (Slippery Rock University, Professor)

  Having taught in various disciplines across a goodly part of North America, I've now settled into Computer Science in Western Pennsylvania. I continue to dabble in mathematics, art and cognitive science as well as SVG.

  Abstract

  Since the first meetings of the SVG Working Group in 1999, it was not long before Andreas Neumann and others organized the first SVG Open in Zurich in 2002. Since that time, SVG has grown from a W3C standard implemented only as a browser plug-in and a handful of eclectic implementations, to a technology that is embraced by all major web browsers, is native on a billion mobile devices and is a cornerstone of several major JavaScript libraries. It is deployed in worldwide mapping projects, data visualization, entertainment, airline scheduling, manufacturing and design, and in applications ranging from science to business to art and military applications. SVG has become so ubiquitous that people have stopped noticing that it is there. For the tenth and final SVG Open, it is fitting that we consider the importance of SVG Open toward building the SVG community during times both challenging and optimistic.

  Presentation Video

• Wow: Compelling Visual Experiences from the frontiers of Open Web

  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.

  Divya Manian (Adobe)

  Divya Manian works for the Adobe Web Platform Team in San Francisco. She made the jump from developing device drivers for Motorola phones to designing websites and has not looked back since. She takes her duties as an Open Web vigilante seriously which has resulted in collaborative projects such as HTML5 Readiness and HTML5 Boilerplate.

  Abstract

  This session highlights some of the more creative and well executed uses of open web graphics in the past year. A few new demos created by the presenters will also be showcased. Each of the examples will be given a high-level overview, to show how they were made. A range of open web standards, such as HTML5, CSS3, SVG, WebGL will be examined, with highlights on filter effects, 3D, audio and video as well as some surprises.

  Presentation Video

Quick jump to: keynotes | regular presentations | workshops

Regular Presentations

• Area of Interest Based Interaction and GeoVisualization with WebGL

  Kenan Bektas (University of Zurich Institute of Geography (GIVA), Research Assistent)

  Arzu Coltekin (University of Zurich)

  Show Abstract

  There is a clear demand for ubiquitous location based services with the widespread use of the Internet and the smart phones. This demand is met with an enthusiastic supply: we have so much data that it is difficult to process or distribute it quickly and meaningfully. This relatively new ‘data overload’ calls for testing new approaches to manage the level of detail for transmission and visualization. In this paper we present an experimental approach and a prototype implementation to manage level of detail in geovisualizations. The approach is based on identifying the area of interest of the user (mouse location or gaze point) and removing perceptually irrelevant detail in the visual field. Prototype implementation achieves this in real time using WebGL and paves the way for further testing.

  The human eyes do not process visual information in a uniform fashion. Certain psychophysical properties of the human eye, coupled with the mechanisms that control attention, determine the limits of our visual perception. The color sensitive photoreceptor cells, the so called cones, are highly concentrated on the foveal region and almost half of the primary visual cortex (i.e. V1) is dedicated to processing signals transmitted from this particular region on retina (Ware, 2004). This simply leads to the fact that, in contrast to the uniform resolution displays, we perceive the scenes with significantly higher resolution at the point of gaze than in the peripheral region. Inspired from this, foveation has been developed as an image coding and visualization technique with the objective of addressing technical and perceptual issues in reducing information intensity (Burt, 1988). In that sense, foveation is a one-to-one mapping of fovea’s structure on to any visualization. When a display is rendered based on this idea, it is called a ‘gaze-contingent display’ (GCD) (Perry and Geisler, 2002). Ideally, a GCD leads to perceptually lossless image coding (Çöltekin, 2009), and can be used for visualization and analysis of multi-layered raster and vector types of geo-data (Bektas and Çöltekin, 2011). We call this approach geofoveation.

  Geofoveation is an experimental concept and is currently being tested for offline and online environments. The approach has great potential for online use because of its aggressive yet ‘perceptually lossless’ data reduction ability. To implement web based geofoveation, WebGL appears to be a promising tool. WebGL is a recently developed JavaScript API that allows developers to access graphical processing unit (GPU) on the client side and to control the graphics rendering pipeline. It employs dedicated graphics hardware resources for the computationally intensive visualization tasks (e.g. information visualization or online games) that are performed on a web browser (Williams, 2011). It is supported by many modern web browsers including Chrome, Firefox, Opera and Safari. While WebGL offers possibilities to make geofoveation computationally more efficient, to test the gaze-contingency paradigm, we need to have a software module that collects and communicates the gaze point data. For this purpose, we utilize a software development kit (SDK) distributed by Tobii. The Tobii SDK 3.0 enables the developers to implement applications that use the functionalities of the Tobii eye tracking devices. The SDK includes libraries written in .NET, Python, C++ and Objective C languages. In this paper we present the alpha version of our test-environment. The foveated image coding is implemented as a fragment shader (i.e. WebGL API). Once the user’s area of interest is determined (e.g. gaze point or mouse pointer), the scene is foveated accordingly. That is, the detail is removed from the periphery based on a model of the foveal vision. The input graphics can be in raster or vector formats (system can also handle an overlay of raster and vector formats, e.g. city models with textures or road network over aerial imagery). The output can be considered as a composition of some input images from the same region of interest. The beta version will include a) the shader for processing and visualization of the multi-layered graphics data and b) the eye tracking module for the gaze based interaction (i.e. Tobii SDK 3.0 Python). Our tests will systematically reveal the potential of integrating gaze based interaction modalities to the mobile webmapping applications and hopefully contribute to managing the visualization of large volumes of geographic data online.

  References

  • Bektas K and Çöltekin A. An Approach to Modeling Spatial Perception for Geovisualization, In: Procedia Social and Behavioral Sciences, Volume 21; 2011; p. 53-62; Proceedings of STGIS 2011, Tokyo.
  • Burt PJ. Attention Mechanisms For Vision in a Dynamic World. In: 9th International Conference on Pattern Recognition, Rome; 1988, p. 977-987
  • Coltekin A. Space-Variant Image Coding for Stereoscopic Media. Proceedings, IEEE Picture Coding Symposium, Chicago, US, May 6-8, 2009
  • Perry J S, Geisler W. Gaze-contingent real-time simulation of arbitrary visual fields. In: Proceedings of SPIE, Human vision and electronic imaging VII, 2002, 4662:57-69
  • Ware C. The Environments, Optics, Resolution, and the Display. In: Information Visualization: Perception for Design. 2nd ed. San Francisco, Morgan Kaufman; 2004, Chapter 2, p. 29-68.
  • Williams L J. Learning HTML5 Game Programming: A Hands-on Guide to Building Online Games Using Canvas, SVG, and WebGL, Addison Wesley 2011.

  Hide Abstract

  Paper | Presentation | Presentation Video

• Bender: A Declarative, Dynamic Framework for Web Application User Interfaces

  Julien Quint (IGEL Co., Ltd., Web Interaction Expert)

  Takanari Hayama (IGEL Co.,Ltd.)

  Show Abstract

  At SVG Open 2011, we presented a first prototype of Bender, an open source, experimental Web application authoring framework. Bender is focused on implementing rich graphical user interfaces using Web technologies (HTML5, SVG, CSS, Javascript, &c.) Since then, Bender has considerably evolved and expanded, and we present these new developments here. Bender differs from most of the currently available Web application frameworks in that it is declarative. Its goal is to describe not just the layout and appearance of the application, but its logic as well, through structured markup rather than code. Because XML is easier to parse, transform and generate than source code, we expect to be able to build better tools to facilitate the development of Web applications. The XML markup used is simple enough that it is possible to author content manually while the framework and its tools are being developped. The building blocks in Bender are "components", which may be combined together to build more complex components, up to the application which is itself a component. In this respect, Bender shares similarities with XBL or Web Components, and uses XML namespaces to mix different XML vocabularies to describe the appearance of a component. For instance, a button can be built from SVG shapes and filters; a tool bar can be built from several buttons, and so on. Additionally, Bender provides markup to describe a component's behavior. "Properties" can be defined to parametrize a component and maintain its internal state (e.g., size and color of a graphical UI element, status flags, &c.). A property can be any Javascript value. A <script> element allows customzing the Javascript object backing up a component in the running application by writing additional Javascript code. Bender also introduces "watches" to monitor property changes and event notifications from other components. A <watch> element contains zero or more <get> and <set> child elements. <get> elements define the watch's input: DOM events from a DOM element (e.g., "mousedown" or "touchstart" from an HTML element), custom Bender events component(e.g., "@pushed" from a custom button control), or property changes from another component (or itself); and associate a value to that input. <set> elements then associate actions to that input, such as setting another property or executing some Javascript code (much like an event handler.) Watches are used to respond to user events and maintain a consistent state throughout the application, allowing to write event-driven as well as rule-based applications. Another specificty of Bender is that since it uses XML to describe components, the DOM tree of any component may be manipulated while the application is running. The Bender runtime monitors and renders changes as they happen, just like browsers update a page's rendering when its DOM tree is modified. A first application of this is simply to add, remove and reorder components as needed. In the "Arrows" example (see link below), each arrow is an instance of a Bender component using SVG for rendering that follows the mouse pointer and updates its rotation and color accordingly. The number of arrows can be modified at runtime through the width and height parameters and thus components are added or removed as necessary when these parameters change. The change is triggered by a watch (see link to the Bender source file.) The same example shows another application: since properties are defined declaratively, we can automatically create the parameter bar at the top to let the user make these changes. For instance, if a Bender application has a number parameter (like "width", "height" or "size"), then a number input box can be added to the parameter bar, and a watch can monitor the changes to modify the application accordingly. The watches work both way, so this is useful for debugging as well. A last application, currently being implemented, is an editable display of a running application tree (similar to DOM inspectors provided by Web browser debuggers), useful for debugging an application, but also for developping it: any change to the tree is immediately mirrored by the runtime.

  Hide Abstract

  Presentation | Presentation Video

• BonsaiJS – A Graphics and Animation Library

  Tobias Reiss (Uxebu, Software Developer)

  Show Biography

  http://uxebu.com/team/reiss.html

  Hide Biography

  Show Abstract

  Developing interactive and beautiful apps and websites has been difficult and limited in the past - if you wanted to go fancy, Adobe Flash was the way to go. With BonsaiJS, an open-source Graphics and Animation Library built in JavaScript, you now can create stunning content similar to Adobe Flash. BonsaiJS's simple API makes optimal use of different “HMTL5” technologies such as SVG, CSS3, WebWorkers and even nodejs. During this talk we will look into the unique architecture of BonsaiJS, including the separation of rendering and script execution. We will explore the rendering engine(s), such as the SVG renderer and the environment agnostic script runner (running in the window thread, WebWorker or even on nodejs). BonsaiJS is also the JavaScript-Library that powers Pixelplant, our new Flash (including ActionScript 3) to JavaScript Converter. After this talk you will have a good overview of BonsaiJS's intuitive and simple JavaScript API and how we use the open web to draw interactive graphics.

  Hide Abstract

  Presentation Video

• Building Interactive Environments with SVG for Google Blockly

  Neil Fraser (Google, Software Engineer)

  Show Abstract

  Google Blockly is a visual programming language that allows users to write code by plugging blocks together. After creating parallel test implementations using SVG and Canvas for the display layer, we selected SVG based primarily on performance. Creating a richly interactive application in SVG presented a number of challenges. In this presentation we examine some of these issues and explore work-arounds.

  Filters do not render consistently.

  One of SVG’s strengths is the rich filter system. The ability to create beautifully embossed and shadowed elements was one reason for choosing SVG. However each browser renders these filters completely differently. Safari has no support, Firefox looks washed out, Chrome looks muddy, and only Opera looks right. Additionally, the computational cost for feGaussianBlur was prohibitive. For consistency and performance reasons we dropped all the filters and created custom algorithms for drawing highlights and shadows.

  UI widgets such not directly supported.

  SVG lacks basic UI widgets such as input boxes, dropdown lists, scrollbars, and tooltips. Since these are required for a richly interactive application, each widget needs to be either recreated in SVG or embedded within a foreignObject tag. The downside of recreated SVG widgets is that they do not look like or behave like the user’s set of native widgets. In particular, on some systems scrollbar directionality can be toggled by the user, leading to poor user experience if an SVG-rendered scrollbar operates in the reversed direction from the system.

  The foreignObject element has severe usability issues.

  Existing SVG implementations often make the foreignObject element virtually unusable. Opera does not support UI widgets in the foreignObject element, thus defeating the main purpose of this element. Safari fails to render these elements in the correct Z-order, leading to background SVG objects obscuring the UI widgets. Chrome renders these elements correctly, but fails to track mouse clicks in the correct Z-order, leading to background SVG objects stealing events from the UI widgets. Only Firefox consistently implements foreignObject correctly. In several cases the defective nature of foreignObject caused us to shy away from using traditional interface widgets, thereby forcing us to create novel UI elements which we would not have otherwise considered.

  Overall we have been delighted with SVG and its various implementations. It has proven to be a stable, powerful, and scalable system upon which to build Blockly. The number of severe issues we encountered have been few. It is our hope that shining a light upon the issues which hurt us most will encourage implementors to improve support in those areas.

  Hide Abstract

  Presentation Video

• Declarative Randomness for Scene Drawing in SVG

  Eric Elder (Slippery Rock University, Student)

  David Dailey (Slippery Rock University, Professor)

  Show Biography

  Having taught in various disciplines across a goodly part of North America, I've now settled into Computer Science in Western Pennsylvania. I continue to dabble in mathematics, art and cognitive science as well as SVG.

  Hide Biography

  Show Abstract

  Several authors have suggested that the ability to declare and define collections of random elements which vary in shape, position, size, orientation, color, and opacity could be extremely valuable for the use of SVG for scene generation. In this paper we combine our previous proposal to add <replicate> to SVG with a new proposal for declarative randomness. In combination with <replicate>, randomness adds the capacity for bounded variation of the values of attributes of repeated elements of a scene. Generating images from a high level description of similar repeated scene elements having random values simplifies an author’s goal to represent natural effects and real world settings. The use of a declarative <random> element allows authors to generate images whose characteristics are constraint-based rather than fixed. For example, scenes such as those depicting gardens, cityscapes, rain, or trees could be produced using this method. Patterns that exhibit irregular repetition, such as the markings of select animal species, can also be represented concisely using declarative repetition and randomness. Several considerations have been made to ensure that the basic conceptual model for <random> elements will be robust enough to cover many use cases. Authors can determine the distribution of random values to be uniform or normal based on their individual needs. An author can also supply a list of potential values to be randomly selected from. Resulting values of <random> elements include numbers, angles, lengths, paints, and various lists. In addition, <random> elements can be supplied a seed to initialize the pseudorandom number generator ensuring consistent results. We will be using JavaScript to implement the <random> element as a proof of concept. The implementation should demonstrate that <random> vastly extends SVG's declarative drawing capabilities. In a similar fashion to <replicate>, the values of the xml element’s attributes will be parsed and handled on the document’s load event. DOM properties of the affected SVG elements will be overwritten with the calculated result of the <random> element. Randomness can be useful when introducing noise into a graphical model is desirable. This could be particularly useful for modeling communication networks. InkML trace groups can be represented with high quality in SVG using <replicate> and randomization. Included will be an analysis of the use cases of InkML: applying <replicate> with <random> to introduce randomness into trace groups to make handwriting or other typography appear more natural.

  Hide Abstract

  Paper | Presentation Video

• Dynamic, interactive vector maps for the new web

  Sergio Álvarez-Leiva (Vizzuality, Lead Designer, Founder)

  Show Abstract

  Every day, a huge amount of geospatial data is created by governments, companies and personal-location devices and services. Data have swept into every industry and already plays a key role in a new breed of efforts and initiatives such as data journalism reporting and applications, civic media, online activism, open government, biomedical and scientific research, and humanitarian aid. It is estimated that server loads are doubling nearly every two years, and the amount of digital data being created and consumed is increasing at a rapid pace. Much of the data being generated is unstructured, thus making it difficult to handle and visualize it effectively in order to understand the dynamics of a complex situation, or to diagnose and find solutions to complex problems. We need a productive approach to link, analyze and get a meaning of all this enormous quantity of spatial information, and build a new data-based narrative presented in a compelling visualization. The talk will present some examples of how to address this challenge using open source geospatial solution CartoDB in combination with the latest javascript technologies for drawing maps on the client. The combination of these tools allow developers to retrieve vector data from their tables using the SQL API on geojson format, and perform realtime analysis and customization on the client. Having the browser rendering geospatial data opens a new world of possibilities in terms of interactivity and volume of data displayed in realtime, with no need of proprietary technology.

  Hide Abstract

  Presentation Video

• Expand or contract the Universe

  Paolo Almario (UQAC, Student)

  Show Abstract

  Within the frame of the conference The Graphical Web2012 I decided to create this document to present the project "Expand or contract the universe III" of the artist Constanza Camelo, in which I had the pleasure to work as a technical assistant. This project was possible thanks to Web technologies, covering HTML5 and its Canvas element, Javascript and its jQuery library and the PHP language with MySQL support. It is a project that is within the scope of interest of the conference because it is a testament of how a participation art project can use the web infrastructure to finally achieve that reality contact so sought by artists. In this case, the impact was of larger proportions due to its social involvement. The project took place during the first two weeks of November 2011 in the city of Tijuana, Mexico and involved direct participation of deported Mexican immigrants. The work itself is described as performative and participatory. It was a series of actions near the border led by the artist and involved 5 deported immigrants and 2 police agents from the immigration service. Each immigrant made an action blindfolded, while being escorted by one officer and guided by the artist. The intention was to direct them to walk over a previously written word in the floor, which described the situation of immigrants involved in the action. The technical challenge was to be able to track the movement of the participants as they walked by the words, using GPS technology the artist also wanted to leave a digital trace of the action. The technical solution was the creation of 3 web-based applications for iOS devices, which allowed access to the built-in GPS. The position data was transmitted to a server which kept them in a database, at the same time, on the project’s website, several canvas elements drew that data in real-time. It is important to consider my position as a technical assistant; I was the one who created the whole web platform that allowed the actions and their real time diffusion. However, this must not be seen as a display of my knowledge, because my testimony is within a self-learning process. My academic background involves architecture, design and art and my knowledge of web technologies have been won thanks to determination and hours of free time dedicated to this task. Therefore, the technologies used here were learned and applied during the development of the project itself. This project is the evidence of how an ordinary person is able to access technical knowledge of the technologies that are changing our world today, because of its very free, popular and increasingly ubiquitous nature. It is a testimonial of how the web can be used by creative professionals to extend their capabilities to achieve a significant change in the life of some and of many.

  Hide Abstract

  Paper | Presentation | Presentation Video

• Generating interactive meteorological maps and graphs for the web

  Stephan Siemen (European Centre for Medium-Range Weather Forecasts (ECMWF), Head Meteorological Visualisation Section)

  Show Abstract

  The European Centre for Medium-Range Weather Forecasts (ECMWF) is an international organisation providing its member organisations 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 visualise its data. The Magics graphics library, freely available under the Apache licence, is developed by ECMWF to display numerical weather forecast fields and observational data on geographical maps and statistical plots. For more than seven years now it has supported SVG as one of its many output formats. This talk will present examples of complex meteorological maps and graphs which show new possibilities users have gained by using the web as a medium. Compared to the traditional output formats of PostScript and PNG, SVG enables users to edit, publish and interact with their visualisation. These possibilities are now also available directly to users of Metview, the meteorological workstation developed by ECMWF which uses Magics as its plotting engine. Magics is also the basis of ECMWF's new web service, ecCharts, to display recent numerical forecasts to forecasters in its associated weather services. Beside the interactive user interface built using jQuery the service also offers a machine-to-machine web map service based on the OGC Web Map Service (WMS) standard. The main challenge was to achieve fast response times even though the data volume and processing effort is quite high. PNG is the main format served but SVG is being investigated as a vector alternative. The talk will present and demo the developed systems and discuss the challenges encountered in their development.

  Hide Abstract

  Presentation Video

• Georeferencer & WebGL Earth

  Petr Pridal (Klokan Technologies GmbH)

  Show Biography

  Petr Pridal is the founder and CEO of Klokan Technologies GmbH. He is working on several exciting mapping and geo projects with global impact and leading a small team of programmers who are developing software tools for culture heritage institutions.

  Hide Biography

  Show Abstract

  There is an enormous amount of old maps and other historical documents in the collections of libraries and archives all over the world. This paper presents published open-source projects, labs experiments, and ongoing research related to client side georeferencing, rectification, generation of map overlays and 3d visualizations of scanned old maps in a web browser in a scalable way.

  The presented tools are utilizing JavaScript with WebGL, SVG and CSS web technologies to move maximal of the computation and raster processing normally done on a server to the client side, and providing an alternative to traditional OpenGIS Web Map Service (OGC WMS).

  A project called Georeferencer, and especially the pilot which was launched in the beginning of this year in the British Library, will be practically demonstrated. Thanks to crowdsourcing and the help of online visitors several thousands of scanned maps were enriched with correct geolocation and are now visualizable in 3D, findable geographically and accompanied by the cartometric accuracy analysis.

  An open-source project WebGL Earth, released in 2010, is a fast 3D virtual globe implemented fully in JavaScript, which pioneered some of the innovative approaches in this area including application of Google open-source Closure Tools for the complete JavaScript development. The source code, documentation and simple to use API for this project are available on GitHub for anybody interested in development with this component. We have released also open-source tools for related raster geodata processing and online map publishing (GDAL2Tiles, MapTiler.org).

  Hide Abstract

  Presentation Video

• Highcharts implementation and architecture

  Torstein Hønsi (Highsoft Solutions AS, CTO, Founder)

  Show Biography

  Author of Highcharts JS and Highslide JS. CTO and founder of Highsoft Solutions.

  Hide Biography

  Show Abstract

  Since JavaScript/HTML5 took over the web charting market, Highcharts has been among the most popular charting APIs. Highcharts is loved by web developers for the low entry level, slick default design and behaviour, scalable license model, numerous configuration options and an extensive documentation with hands-on examples for each option. In this presentation, author Torstein Hønsi will go quickly through the basics of Highcharts, then elaborate on the choice of using SVG over canvas for the drawing engine. For an in-depth course in implementing Highcharts, make sure to visit the Highcharts workshop on Friday as well.

  Hide Abstract

  Presentation Video

• Inkscape Update, 2012 Edition

  Tavmjong Bah (Inkscape, Developer)

  Show Abstract

  I will present an update of Inkscape development including the results of the 2012 GSOC projects. More details will be given as the conference date approaches.

  Hide Abstract

  Presentation Video

• Introduction of SVG Map Platform and its Application

  Tomoaki Konno

  Satoru Takagi (KDDI)

  Show Abstract

  W3C is developing the next generation standard for SVG as “SVG 2”, and we have contributed SVG Map technique to be included in SVG 2. Our contribution consists of two parts. 1) We have implemented SVG Map displaying function into prototype web browser based on Chromium in order to display SVG Map content natively. 2) We have developed SVG Map platform that runs with JavaScript in order to view it on some major browsers. In this presentation, we focus on the latter and introduce a development framework JavaScript-based SVG Map, in which traditional SVG is enhanced with tiling and layering approach. Furthermore, we demonstrate information displaying system in the case of disasters based on SVG Map.

  Hide Abstract

  Presentation | Presentation Video

• Kartograph: A Framework for Creating Beautiful, Interactive Vector Maps

  Gregor Aisch

  Show Abstract

  The purpose of Kartograph is to simplify the creation of interactive web map applications that don't need to scale up to every street on the world. The Kartograph SVG renderer (written in Python) allows you to create static SVG maps from raw geo data (such as ESRI shapefiles or PostGIS databases). In contrast to existing vector renderers, Kartograph is optimized to create re-usable SVG by retaining map layers in separate groups and storing the metadata of the rendered map features. The Kartograph JavaScript library helps turning the SVGs into interactive web maps, that runs on every major browser (using the powerful RaphaelJS framework). It supports a range of common visualization techniques such as choropleth maps or symbol maps and makes Kartograph the perfect solution for interactive, thematic maps. Kartographs unique architecture frees you from many limitations of the usual tile map rendering stack. It gives you the freedom to choose a map projection you like and to style your map using the full power of CSS and SVG. Finally you can easily self-host your map on any given web server.

  Hide Abstract

• Mappetizer Web Mapping Application goes Mobile

  Ruth Lang (uismedia, CEO)

  Armin Müller (uismedia)

  Show Abstract

  Mappetizer Web Mapping Application goes Mobile

  Mappetizer SVG Web Mapping Applications are now on the market since 10 years. Within the new release of our software, we also offer a particular SVG web mapping application for smartphones.

  SVG support within mobile browsers

  In the meanwhile multiple mobile browsers support SVG natively, such as the Opera Mobile Browser (for Android and Iphone) or the Safari Browser (IPhone) as well as Firefox Mobile (Android). So it was time for us to develop a browser based SVG web mapping application for smartphones.

  The main advantage of this approach is that there is no need to develop different apps for all mobile platforms but one application which runs on all mobile browsers. This reduces development expenses as well as there is no need for the user to download another app for another application.

  Dojo Mobile as the main Javascript Library behind the application

  Mappetizer uses the open source modular JavaScript library Dojo Toolkit and the Dojo widgets system for the desktop web mapping application. As Dojo also offers a Dojo Mobile package for smartphone applications we use this library to build up the mobile version of our mapping applications.
  The Dojo Mobile package provides a number of widgets that can be used for mobile devices such as iPhone, Android, or BlackBerry. The main idea is that an HTML page is divided into multiple "Views" but only one view is visible at a time. So the user can navigate through views with animated transition effects. Navigation bars, which usually appear at the top of the application and rounded rectangle lists, which can be used to display a group of items, are provided.
  Furthermore Dojo Mobile offers an automatic device detection and theme loading. When this is enabled, Dojo Mobile will insert appropriate stylesheet links dynamically into the header, based on user agent sniffing. With all these features you can get the native look-and-feel of an app for iPhone/iPad/Android but viewed within a browser.

  Geolocation

  Mappetizer for Mobile uses the navigator.geolocation object to retrieve the geographic location of a hosting device. Using the Geolocation API the user's position on a map can be shown and other use cases can be implemented (e.g. points of interest in the user's vicinity)

  One link, two applications

  The goal is to provide two different solutions behind one hyperlink. So Mappetizer knows, whether you surf the web with a PC or with a smartphone and loads automatically the appropriate application. So on the PC the user can view a web mapping application with perhaps many interactive features, but a simpler version on mobiles which responds to the less possibilites on smartphones. But each application uses the same sources (e.g. SVG, XML, javascript files) to reduce file sizes as well as redundancy.

  As an example please have a look on : http://www.mappetizer.de/mapp/ which loads automatically the desktop solution on PC (http://www.mappetizer.de/mapp/index_svg.html) or the smartphone solution on mobiles (http://www.mappetizer.de/mapp/index_mob.html)

  In our paper/talk we want to give more insights about the Mappetizer mobile web mapping application based on SVG.

  Hide Abstract

  Paper | Presentation Video

• Math education with SVG. Part1: Two dimensions

  Samuel Dagan (Tel-Aviv University, professor of physics (retired))

  Show Biography

  Samuel Dagan, Professor of Physics, Tel-Aviv University Samuel Dagan got his PhD degree of physics in 1964. On 1967 he was appointed at the Tel-Aviv University as member of the academic staff, where he spent most of his time in research as high-energy physics experimentalist and in teaching undergraduate students. On 1999 he became professor emeritus and decided to make use of his long experience in teaching for developing new educational tools for sciences. He is involved at present in a project of a course-ware for teaching and learning mathematics. Course-ware web site: "http://mathanimated.com". Author's web site: "http://alzt.tau.ac.il/~dagan/". Email: "dagan@post.tau.ac.il".

  Hide Biography

  Show Abstract

  Math education with SVG. Part 1: Two dimensions

  Abstract of a paper to be presented at the SVG Open 2012

  Samuel Dagan, Tel-Aviv University

  ---

  Since my previous presentation at SVG Open 2003, things happened:

  • The rendering of SVG changed and improved drastically, which I had to follow.
  • The applications of SVG in my math course-ware became more demanding and I had to invest more in developments.
  • The course-ware of Math Animated is on the Web.

  This presentation will cover the following topics illustrated with demonstrations:

  1. Why are the pan and zoom controls important for math education, and how can they be implemented?
  2. Use of Quadratic Bezier splines for exact graphing.
  3. A free catalog of elementary functions expressed by Quadratic Bezier paths.
  4. The advantage of scripted animations over "SMIL".
  5. The use of adding Quadratic Bezier paths in math education.
  6. How to express a cubic polynomial as a single Cubic Bezier paths.

  Hide Abstract

  Presentation Video

• Math education with SVG. Part 2: Three dimensions

  Samuel Dagan (Tel-Aviv University, professor of physics (retired))

  Show Biography

  Samuel Dagan, Professor of Physics, Tel-Aviv University Samuel Dagan got his PhD degree of physics in 1964. On 1967 he was appointed at the Tel-Aviv University as member of the academic staff, where he spent most of his time in research as high-energy physics experimentalist and in teaching undergraduate students. On 1999 he became professor emeritus and decided to make use of his long experience in teaching for developing new educational tools for sciences. He is involved at present in a project of a course-ware for teaching and learning mathematics. Course-ware web site: "http://mathanimated.com". Author's web site: "http://alzt.tau.ac.il/~dagan/". Email: "dagan@post.tau.ac.il".

  Hide Biography

  Show Abstract

  Math education with SVG. Part 2: Three dimensions

  Abstract of a paper to be presented at the SVG Open 2012

  Samuel Dagan, Tel-Aviv University

  ---

  How to project a three-dimensional object on a plane? The advantages and disadvantages of conic over orthogonal projections will be discussed. The choice of loosing perspective, but gaining simplicity, points to the orthogonal solution.

  This presentation will cover the following topics illustrated with demonstrations:

  1. The rotation (by scripting) of a three-dimensional cartesian coordinate system and its projection on a static cartesian plane.
  2. Simple geometrical forms build by straight segments, are easily rotated and projected on a plane.
  3. A curved two dimensional surface (defined in the three dimensional coordinate system), sliced by orthogonal planes, represents two sets of curves. The projected rotation of the all, gives a visual perception of the curved two dimensional surface. This is achieved also by scripting.
  4. A circular disk projected on a plane represents an ellipse, depending on its direction in space. The ellipse is obtained by scripting.
  5. As will be shown orthogonal projection of opaque object is also possible and enhances the visual perception.
  6. Curves in space can be represented by Bezier paths in three dimensions, which opens new horizons for SVG.

  Hide Abstract

  Presentation Video

• Next generation SVG & CSS animation

  Alex Danilo (Google, Developer Advocate)

  Brian Birtles (Mozilla Japan, Software Engineer)

  Rik Cabanier (Adobe Systems, Sr Computer Scientist)

  Show Abstract

  With the rise of the open web, each generation of browser introduces new exciting features from many web standard areas. One of the most useful capabilities for web developers is animation in the browser. SVG defined animation based on the SMIL model from the very first recommendation, whilst CSS animations were introduced more recently and are widely in use. The obvious thing that is really needed in a web browser is a proper unified animation model to support both CSS, SVG and HTML content. We have been developing an improved model for animation on the web which includes a Javascript API for convenience, CSS style rules for cascading control of animations as well as a powerful declarative syntax. The new model is aimed to simplify the developer experience, being amenable to hardware acceleration as well as maintaining compatibility with existing animation in deployed browsers today. We will cover the new animation model features, explain the APIs and present real world examples of it in use.

  Hide Abstract

  Presentation Video

• Processing and Rendering Massive 3D Geospatial Environments using WebGL

  Robert Wüest (University of Applied Sciences Northwestern Switzerland, Research Associate)

  Martin Christen

  Hannes Eugster

  Stephan Nebiker (FHNW University of Applied Sciences Northwestern Switzerland, Professor)

  Show Abstract

  Processing and Rendering Massive 3D Geospatial Environments using WebGL– The examples of OpenWebGlobe and SmartMobileMapping

  Robert Wüest, Hannes Eugster, Stephan Nebiker and Martin Christen

  Institute of Geomatics Engineering, FHNW University of Applied Sciences and Arts Northwestern Switzerland, Muttenz, Switzerland – (robert.wueest, hannes.eugster, stephan.nebiker, martin.christen)@fhnw.ch

  iNovitas AG – Mobile Mapping Solutions, Gründenstrasse 40, 4132 Muttenz, Switzerland – hannes.eugster@inovitas.ch

  Generating and exploiting rich and interactive (geospatial) 3D contents over the World Wide Web (WWW) has been a constant ambition, ever since the creation of the WWW almost 20 years ago. Despite some early formats and standards such as VRML (Bell 1995) and GeoVRML (Reddy et al. 2000), most efforts of delivering interactive and scalable geospatial contents over the Web required the installation of (proprietary) applications, specific run-time environments (e.g. Java Virtual Machine) or of browser-specific plugins. The emerging WebGL standard (Marrin 2011) finally promises to provide a universal mechanism for exploiting even massive geometry-based 3d virtual worlds as well as 3d vision-based urban models directly within most Web browsers.

  WebGL is a cross-platform, royalty-free web standard for a low-level 3D graphics API based on OpenGL ES 2.0. It is exposed through the HTML5 Canvas element as Document Object Model interfaces. WebGL is a shader-based API using the OpenGL Shading Language (GLSL), with constructs that are semantically similar to those of the underlying OpenGL ES 2.0 API, adapted for JavaScript, which needs some special considerations as a memory-managed language (Khronos 2012). In March 2011 Version 1.0 of the WebGL specification was released. Today WebGL runs in desktop and mobile web-browsers like Mozilla Firefox, Google Chrome, Safari, and Opera. In the Internet Explorer WebGL can currently only be used through plugins.

  Data processing algorithms have been developed with a focus on scalability to very large data volumes – including imagery, such as orthophotos, georeferenced high resolution 3d imagery along street or rail corridors, as well as map and terrain data – and have been optimized for parallelism. We adapted the algorithms to support as many cores as possible and came up with a set of processing tools. All commands run on normal computers (regular laptops and work stations) and on HPC systems, including cloud computing services. We use the Message Passing Interface (MPI) to communicate and distribute the workload on our HPC cluster and use OpenMP for multiprocessing.

  Our development and test platform runs on the Microsoft Windows HPC Server 2008 R2. However, our code is cross platform and runs on Linux, too. Commercial clouds, for example Amazon Elastic Compute Cloud (Amazon EC2) are also supported for data processing.

  With the advent of WebGL it is possible to use out-of-core rendering algorithms in the web browser, which allows rendering massive geometries and textures, including city models, digital elevation models, or even virtual globes which must be capable to stream huge amounts of imagery, elevation data and other geospatial contents over the Internet. The OpenWebGlobe project (www.openwebglobe.org) was initiated by the Institute of Geomatics Engineering of the FHNW University of Applied Sciences and Arts Northwestern Switzerland (IVGI). It started in April 2011 as an Open Source Project following nearly a decade of 3d geobrowser development at the Institute. Together with developers from industry and from other universities, the functionality of the SDK is continuously being extended. The OpenWebGlobe SDK consists of two main parts: first, the OpenWebGlobe Viewer part, a JavaScript Library which allows the integration of the OpenWebGlobe into custom web-applications. Second, the OpenWebGlobe Processing Tools, a bundle of tools for bulk data processing, e.g. tiling, resampling or rectifying large geospatial data sets.

  While the primary focus in 3d geoinformation solutions had been on explicit 3d modelling, recently introduced image-based modelling approaches offer interesting alternatives. Stereovision-based Mobile Mapping systems, for example, enable the efficient and highly detailed image-based digitizing of street or railway corridors (Burkhard et al. 2012, Eugster et al. 2012, Nebiker et al. 2012). Additionally, recent dense stereo matching algorithms allow the automatic extraction of real 3d images from the captured stereo image pairs. The captured imagery can be directly georeferenced with the additionally recorded INS/GNSS-based navigation data. The resulting precisely georeferenced 3d images allow the accurate 3d mapping of arbitrary street or rail infrastructure objects or the precise overlaying of existing geodata. The developed HTML5/WebGL-based 3DCityTV-WebSDK encapsulates the 3d measurement functionality, the overlaying of geospatial content, the spatial and time-based navigation within the image database and the streaming of the high-resolution 3d imagery over the web. Based on this architecture, for example, distributed web-based road infrastructure asset management solutions can be implemented. In such a solution, the 3d imagery can be fully integrated into existing geoinformation services and exploited by the various domains experts throughout major organisations such as national or regional departments of transportation. For this kind of application, we propose a cloud based hosting of the service. In combination with the 3DCityTV-WebSDK the cloud service can easy and flexibly be integrated with various existing (Web-) GIS and geo web services on different end user devices.

  Hide Abstract

  Paper | Presentation Video

• Satellite Images Color Adjustment Using HTML5 Technologies

  Alexander Parshin (RDC ScanEx, Software Developer)

  Show Abstract

  ScanEx Research and Development Center (ScanEx R&D Center) operates geographically distributed ground receiving stations network for Earth observation satellites' data reception. Acquisition centers are located in 4 Russian cities: Magadan, Irkutsk, Megion and Moscow. Satellite images processing and delivery to end-users is a very complex multistage process. It includes many steps such as rectification, registration, color enhancement, etc. Traditionally all these operations are performed in offline mode using central processing servers. In case of distributed network of ground receiving centers all the raw data are copied to central processing servers. It results in significant delay between receive and delivery points of time because of data-transmission network restrictions. This delay is especially critical in operational services. Distributed processing can solve this problem by significant decrease of transmitting data amount. For example, the size of tiles in JPEG format is 5-20 times smaller than the size of original data. The use of Web as the main delivery platform enables to simplify operational access to data. The next step is to move processing steps to the Web to provide manual processing when the result of automatic processing doesn't meet quality requirements. The examples of such steps are color adjustment and image registration. Implemented prototype of color adjustment service includes server and client parts. Server processes raw data by creating composite images with maximum stretched histograms, cuts images into tiles and encode them in browser's supported formats. Client side is implemented using HTML5 Canvas element. Received tiles are placed into canvas element and processed in pixel level according to adjustment parameter set that can be defined by users through GUI or taken from other source, such as meta parameters files. The use of Web-based visualization client together with interactive online color adjustment allows end-users to use satellite images in many new types of operational services, which were not possible within classical offline method. Our plans include more intensive use of web technologies, in particular: * Full color-precision images based on widely supported images format (PNG, JPEG, etc.) transfer to client; * Implementation of web based image rectification and registration.

  Hide Abstract

  Presentation Video

• Screenshot annotations in the browser

  Edward Zhang (Atlassian, Developer)

  Gilmore Davidson (Atlassian, JavaScript Developer)

  Ian Grunert (Atlassian, Developer)

  Show Biography

  Ian currently works at Atlassian where he was been on the Bonfire team since it's formation, before recently moving to the GreenHopper team. He has previously worked for Rising Sun Pictures and Maptek, and dabbled in some research, whilst completing his degree at Adelaide University. Ian enjoys discussing code over beer, and writing in the third person in speaker bios.

  Hide Biography

  Show Abstract

  Bonfire is a web application testing tool by Atlassian. Using browser extensions we have built deep integration with the major web browsers, making it possible to raise detailed bug reports. As part of this, we allow a user to annotate a screenshot with useful information. They can highlight problem areas with text, visual annotations, crop, magnification, and blur. This presentation will detail our choice of technology and implementation of this annotation system, using a combination of both Canvas and SVG in order to build a dynamic and powerful solution.

  Hide Abstract

  Presentation Video

• SpinetiX hardware SVG players and its applications to Digital Signage

  Julien Reichel (SpinetiX)

  Show Abstract

  SpinetiX hardware SVG players and its applications to Digital Signage

  SpinetiX has designed and manufactured hardware SVG players, called the Hyper Media Player (HMP130 and HMP200) tailored for the Digital Signage (DS) market. The award winning HMP models have been used by more than 10'000 customers and offer the following features:

  • Native support of industry standards, such as SVG, JavaScript, iCalendar to simplify integration
  • A robust, compact and professional design
  • A very low power consumption
  • Real time rendering and high quality decoding of multi-media content
  • Simplicity in network connectivity

  The rendering engine of the players has been fully developed by SpinetiX and is mostly based on SVG, JavaScript and video decoding. Using SVG as a main description language for creating the content to be displayed has many advantages, such as flexibility, ease of integration with other Content Management Software (CMS) and leverage of the knowledge of designers creating content for the Web. The SVG language is used for the following:

  • Static background, media and icons
  • Description of the location of all the media element in the scene
  • Transitions and effects
  • Interactivity
  • Retrieving information from external resource and dynamic formatting on the screen

  One of the main difficulties of the DS market is that it is located at the border between three worlds: The IT people, the AV (Audio Visual) industry and the Web designers. Any of this three kind of people should be able to create content, manage an installation and install devices. To solve this issue, SpinetiX had to develop a robust hardware player, easy to configure and many tools to help the creation of the content, such as templates, JavaScript libraries, editing software and web interfaces.

  In addition the DS market requires features not easily done using the SVG language, such as playlist generation, news tickers, display of RSS news feeds and scheduling information or screen synchronization. For this aspect SpinetiX developed an authoring tool, the Hyper Media Director (HMD) and templates based on JavaScript. This allowed the user to create DS content in SVG using mostly drag and drops. The HMD can be downloaded directly from the SpinetiX web site (www.spinetix.com) and use for trial for 30 days.

  Recently SpinetiX has also launched a complete JavaScript library (jSignage) based on the jQuery library to help creating DS content for Web designed. The library allows for the creation of typical DS content, such as playlist, slideshows or even carousel display. It also integrate many tools for text layers such as news tickers. The jSignage library is also fully compatible with HMTL5 browser allowing for content preview in the browsers. The library is available at the following address: http://support.spinetix.com/wiki/JSignage:JSignage_API

  All the tools created by SpinetiX and the rendering power of the HMPs let SpinetiX customer create powerful and reliable content for their Digital Signage applications all around the world. The players are running in a synchronized environment in the Sony Shop in the USA, in all the 3 Italia retails stores in Italy, in the Kuala Lumpur Petronas twin tower, in the Federal territory mosque in Malaysia, in the senate of Spain, in universities, churches, museum, cable cars and many other places.

  Hide Abstract

  Presentation Video

• SVG2 for the artist

  Tavmjong Bah (Inkscape, Developer)

  Show Abstract

  I will present a number of SVG2 features that give artists new possibilites such as mesh gradients, hatched fills, text wrapping, and a pattern filter primitive. Both design rational and examples will be given.

  Hide Abstract

  Presentation Video

• SVG-Editor

  Paul Hopgood

  Show Abstract

  SVG-Editor: An On-line SVG Only Editor

  Paul Hopgood (Independent Software Engineer & Music Composer).

  Paul Hopgood uses SVG for real-time visualisation and SVG animations, he has also composed music to accompany SVG animations [1].

  After over ten years of SVG development and with SVG support by web browsers much improved, the time is right for an on-line SVG drawing tool aimed at the SVG developer. SVG-Editor only edits SVG: it does not add other markup to a SVG document. It provides precise graphical control of the SVG elements and their attributes.

  Unlike Inkscape, SVG-Editor uses a browser's native SVG renderer (or Adobe SVG-Viewer with IE 8). This  makes SVG-Editor a true WYSIWYG (bugs 'n' all) editor.

  SVG-Editor can create SVG documents from scratch. Unlike Google's SVG-Edit, SVG-Editor also provides for the uploading of existing documents for editing. Markup of an uploaded SVG document that is not edited by SVG Editor will be left intact including any javascript or animation. Thus SVG-Editor can be used to graphically edit the graphical parts of an SVG application while a favourite text editor can be used to develop interaction and animation.

  SVG-Editor is a work in progress and in time may support declarative animation. Currently, SVG-Editor allows creation of animation-friendly SVG by providing precise and clear control of transformations and primitive attributes around user defined shape origins.

  The presentation will demonstrate how SVG-Editor's user interface allows for all the common tasks involved in declaring SVG suitable for animation or control:

  • Graphically define all SVG primitives, lines, rectangles, circles,ellipses, polylines, polygons and paths. All commands available in paths can be defined graphically and can be defined with either relative or absolute coordinates.
  • Style SVG shapes by applying any combination of attributes and CSS properties, declared with style attributes or a stylesheet. SVG-Editor will follow the correct inheritance rules (if the browser does).
  • Modify shapes by changing their nodes or by applying translate, scale, rotate or skew transformations. The origin of the shape can easily be changed to achieve the desired transformation. Discrete tools are provided for transformation and node editing so it is always clear if the user is changing the nodes of the shape or the transformation.
  • Group and ungroup primitive shapes. Once grouped, SVG-Editor lets users apply transformations and styling to the groups which have their own origin. It also provides a tree view of the document that shows the hierarchy and allows for the selection of otherwise invisible shapes.
  • Define symbols in definition layers and reuse these symbols across other layers on the page. SVG-Editor lets the user apply transformations and styling to definitions of symbols or on use of the symbols.
  • Easily undo and redo edits. SVG-Editor provides the user with multilevel undo and redo tools, and lets the user revert to any of the last ten saved copies of the document.
  • Copy, cut and paste tools across layers. This allows the user to make copies of shapes or groups of shapes for further editing.
  • Enter and transform text. Style sub-sections of text with tspans.

  A full version of SVG-Editor will be available at www.svg-editor.org.uk for SVG Open 2012.

  References

  [1] SVG Animation in 2D and 3D, Bob Hopgood, David Duce and Paul Hopgood. SVGOpen 2009 (https://www.svgopen.org/2009/papers/65-SVG_Animation_in_2D_and_3D/)

  Hide Abstract

  Paper | Presentation Video

• SVG in eBooks – Packaging the Graphical Web for Offline Use

  Michael Neutze

  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. Starting in 2012 he considers native SVG support in browsers a given and offers users of his maps the Google Chrome Frame plugin in situations where they might have to use legacy versions of IE. Recently the combination of touch and accelerometer events in data driven graphics has spured his interest as he is a fond iPad and iPhone user. Michael has been attending SVGopen since 2003.

  Hide Biography

  Show Abstract

  Long-form reading on traditional graphics capable computers has never caught on. In contrast a widespread popularity of electronic books came with the advent of e-ink based reading devices, but at the cost of interactivity and graphic fidelity. With the increasing proliferation of the ’tablet’ as a hardware device category (e.g. iPad, Kindle Fire, BlackBerry PlayBook) that comes at a lot less weight and with much longer battery life than the traditional laptop computer, but with nearly equal graphical power, the concept of the eBook is expanding. Reading instead of browsing has become more feasible on tablets than on desktop or laptop computers and at the same time tablets offer most of the graphical web that e-ink reading devices do not. It's not yet clear what exactly makes up an eBook and if the metaphor of the book really is in need for additional features. But there certainly are use-cases that benefit from the tablet's capabilities, be it graphically rich content such as colorful comics or data visualizations or added audio and video. The modern eBook sure is more closely related to the webpage than to the Multimedia CD-ROM of the late 20th century (cf. Macromedia Director) or the still ubiquitous PDF. It therefore is no coincidence that eBook formats inherit many concepts of the web such as HTML, CSS and lately also SVG. Although so far a bit neglected in real world eBooks, SVG’s strength of resolution independence holds a special place right now as we are witnessing the transition from standard to high-dpi ('retina') displays. Secondly interactive content for textbooks in education could perfectly be implemented using SVG and JavaScript. The latter comes close to what "apps" (e.g. natively written software) are used for today but with the advantage of circumventing the app-approval process and hopefully the chance of interoperability on as many software platforms as possible. While it is difficult to predict which role eBooks will play compared to the Open Web, it is clear that there is a need for packaged content that can be used when being offline, that may provide a more linear structure or may be just better suited to form a paid product (with or without DRM). The talk will discuss the merits of SVG in those different use cases of eBooks and will show how different vendors (ecosystems) facilitate or restrict the use of SVG in their products. eBook (container) formats such as the open .epub standard, Amazon’s .mobi or KF8 and Apple’s .ibooks will be evaluated and suggestions for possible workflows (master and derivative formats) will be made. Finally available authoring tools shall be examined, ranging from the vendor specific KindleGen (Amazon) and Apple's iBooks Author to open source Sigil and – as an extension to the print-world – Adobe's InDesign plugin.

  Hide Abstract

  Paper | Presentation | Presentation Video

• SVGTL: Proposal of web standard by SVG applicable as Mapping Platform

  Satoru Takagi (KDDI)

  Show Abstract

  SVGTL: Proposal of web standard by SVG applicable as Mapping Platform

  Satoru Takagi , KDDI

  Abstract

  The long preparatory interval expired and SVG survived as declarative 2D graphics which should be supported by all the web browsers. And KDDI valued the possibility of SVG as a web mapping platform, and has promoted polish and the standardization activity of the technology over ten years. On the other hand, mapping and GIS still have the issue of interoperability and it is worried that it may become a much more serious issue with the emergence of new strong players.

  Under these backgrounds, KDDI carried out member submission to W3C in 2011. Proposed mapping platform by SVG has the following characteristics. It has open and vendor neutral interoperability of mapping by carrying out full utilization of characteristics of WWW. It is single declarative map format included in SVG. By it, map becomes primitive data of web browsers. Needless to say, it will become a base functionality of various webApps by JavaScript.

  The purpose of this proposal is to make mapping into the basic function of WWW, instead of proprietary expanded function. Since we wanted both geo and web community to understand the significance of this proposal, we wish the discussion about that.

  Slides

  Slideshare: Proposal of SVG Map

  References

  • Tiling and Layering Module for SVG 1.2 Tiny
  • W3C Staff Comment
  • SVG Working Group Charter
  • The Map is not Proprietary
  • developer information

  Hide Abstract

  Presentation | Presentation Video

• SVG Map Panel

  Satoru Takagi (KDDI)

  Show Abstract

  Discussion on introducing an open SVG Map standard. See two short presentations before.

  Hide Abstract

  Presentation Video

• The Future of HTML5 Motion Design

  Sarah Hunt (Adobe Systems, Adobe Edge Product Manager)

  Show Abstract

  HTML5 and CSS3 are hot, driven by an explosion of new, Internet connected devices. While they offer many new features that should allow you to do the types of things that you previously did in Flash, actually making it happen is really hard. Until now! Creating interactive and engaging experiences using web standards today largely includes hand coding the animations which forces designers and developers to work in a way that is far more complex, frustrating and iterative than what they are used to. The designer feels that he/she has lost control over the design while the developer would rather spend time in making the content more interactive than adjust motion design flows. We understand this pain point and have created a new motion and interaction design tool called Adobe Edge that would work natively with HTML, JS, CSS. We can now give the power back to the designers to create cinematic experiences while the developers can easily add interactivity on their own terms, to create experiences that users will enjoy. In this talk, we will discuss how you can use Adobe Edge to create engaging and interactive experiences while enabling integration into real-world workflows. This is a rare opportunity to not only learn about Adobe Edge but also about Adobe’s plans for addressing the pain points of designers and developers in the area of HTML5 design in general.

  Hide Abstract

  Presentation Video

• The Graphical Web 2013 and Beyond

  David Dailey (Slippery Rock University, Professor)

  Show Biography

  Having taught in various disciplines across a goodly part of North America, I've now settled into Computer Science in Western Pennsylvania. I continue to dabble in mathematics, art and cognitive science as well as SVG.

  Hide Biography

  Andreas Neumann

  Show Abstract

  This is a planning session for those interested in helping to be involved in the future of this conference. Our community of practitioners of the arts and sciences of web graphics has an interesting history and, we might hope, an interesting future. This session will consist of three parts: a brief overview of the issues involved in offering annual conferences; structured brainstorming; and the development of a list of “action items” to begin the plans for next year’s conference. To run a conference, one needs a topic: a reason to get together. One needs a community devoted enough to the topic to actually assemble. We need a venue (periodic or aperiodic), web hosting services, conference and peer-review software, sponsors, bank accounts, and the facility to plan, including the possibility of governance agreements and organizational status. Most significantly one needs the energy of volunteers who are willing to take on the responsibilities for shepherding all these things into the future. This session will seek to bring together a range of suggestions on these topics and, if successful, will result in the establishment of a planning committee willing to begin work now on defining the future of the conference.

  Hide Abstract

  Presentation Video

• Tributary: See What You Get

  Ian Johnson (Mainstem Collective, Data Visualization Consultant)

  Show Biography

  Bachelors in Applied Math and Chinese, Masters in Scientific Computing. Pixel flipper since the age of 16.

  Hide Biography

  Show Abstract

  The process of creating visual artifacts with code is fraught with many perils, not least of which is fear of the unknown. When writing code to produce something visual, we often have to imagine what the result might be as we type along innocent to the bugs we are producing. Following Bret Victor’s principle of immediate feedback, Tributary provides an environment for prototyping and developing interactive visualizations using d3.js and SVG. When writing code in Tributary one sees the results immediately. Combining this responsiveness with the expressiveness of d3.js can lead to extremely rapid development cycles, almost to the point of performance. Tributary works by taking advantage of one of javascripts less respected features: the eval function. With the increased performance of modern javascript engines, we can afford to re-evaluate the code on every keystroke. When the code is evaluated, the SVG on the page is emptied of content. While from a Computer Science perspective this seems heretical, it is actually a very effective way to develop many practical SVG visualizations. Some additional measures are taken to provide a smooth development experience and avoid flickering of the screen and provide the user with error feedback. Tributary is actually a collection of different “views” on code, the first of which assumes one is developing an SVG visualization with d3.js. This view makes it easy to explore parameter spaces or data that one includes in the code as JSON. The main Tributary view does not, however, help when attempting to explore transitions. Transitions are a powerful feature of d3.js which enable animations and interactions, and to explore those requires separating initialization code from animation code. To do this Tributary has a view called Delta which assumes that the user has defined two functions: init() and run(). Delta provides a play button and timeline which goes from 0 to 1. Users can use or write their own interpolation functions to experiment with how their transitions will look, and can interactively change parameters while the transition is playing. There is also a method inspired by Bret Victor which allows the user to see the past, present and future of their transition all at once. Tributary is an experimental environment which encourages play. This is especially powerful when exploring new areas of visualization where unexpected results are often welcome. Tributary has already been used in professional settings to produce prototypes with immediate feedback from domain experts. Because of the rapid nature of development it is possible to sit next to a non-programmer expert and get their opinions in real-time. This presentation will demonstrate practical and entertaining uses of Tributary to develop data visualizations and digital art with d3.js and SVG. The goal is to show both what’s possible and what’s possible to create quickly using the latest in web standards graphics.

  Hide Abstract

  Presentation Video

• Using Gravity to Navigate the Internet and other Graphs

  David Dailey (Slippery Rock University, Professor)

  Show Biography

  Having taught in various disciplines across a goodly part of North America, I've now settled into Computer Science in Western Pennsylvania. I continue to dabble in mathematics, art and cognitive science as well as SVG.

  Hide Biography

  Grant Denmead (Slippery Rock University of Pennsylvania, Student)

  Show Biography

  My name is Grant Denmead and I am currently a 2nd year student at Slippery University of Pennsylvania, in which I am double majoring in Information Technology and Information Systems.

  Hide Biography

  Jake Weidman (Slippery Rock University, Student)

  Show Biography

  Undergraduate student at Slippery Rock University.

  Hide Biography

  Deborah Whitfield (Slippery Rock University, Professor)

  Show Abstract

  Water flows downhill, but its route is not always the shortest path to the sea. Might we find some analog to gravity in more abstract metric spaces, like graphs, that would allow a simple algorithm to always find shortest paths to arbitrary destinations? That is, might we “flavor” graphs with field effects like gravity and magnetism so as to motivate simple navigation between all pairs of points? Such questions have inspired the investigators to; • look for categories of graphs that can be navigated using a single numeric piece of data • look for a tighter upper bound on the amount of information needed to determine the shortest path • consider the type of information that a human navigating a web site can and do use as cues The questions being investigated concern how little information can be provided locally at a node in a graph for determining the shortest path to a destination node? And, to what extent does a topological graph theoretic solution to a problem predict what humans might actually do when faced with identical problems of navigating graphs? A graph on N nodes is “gravitational” if there exists an assignment (or “flavoring”) to each node of unique integers (gravity values) in the range 1 to N such that between any pair of nodes a shortest path may be found by a simple greedy algorithm that chooses the next node from among those neighbors which have gravity values closest to that of the destination node. From a graph perspective, only adjacent nodes from the source node can be examined to determine which node to visit next to find the shortest route to the destination node. From an Internet user’s perspective, what link should be followed on a page to get to a desired page the fastest? Gravitational analysis of even very small graphs proves too difficult to analyze by hand, so a C program was written to perform calculations of gravitational flavorings. It was quickly determined that a non-textual (i.e., graphical ) program was needed in order to visualize the graphs and investigate possible path information. The C program was translated from C to Javascript and SVG; this code was then integrated into the Grapher program discussed at SVG Open 2009. We then generate artificial web sites based on graphs of differing gravitational properties. The nodes of the graphs become web pages in which the edges are represented as hyperlinks leading to adjacent nodes. Hyperlinks can contain hints such as a color, object, word, or the gravitational value. In order to investigate how human subjects navigate a web site, a variety of tasks such as puzzles or games are created in which web pages are rooms. Subjects then attempt to navigate the graph by visiting all rooms or by finding a “prize” while avoiding obstacles. Sites that differ in terms of the availability of gravitational cues will be compared for relative navigability. The time subjects spend navigating the graph and the path that is taken is being collected for analysis.

  Hide Abstract

  Paper | Presentation Video

• Using the Open Web Platform for Thematic Mapping in a Geo-Webservices Environment

  Barend Köbben (University of Twente – Faculty of Geo–Information Science and Earth Observation (ITC), Senior Lecturer)

  Show Biography

  I hold an MSc in Geography, specialising in Cartography, from Utrecht University in The Netherlands. I worked for 9 years as a Lecturer in cartography at that university and then moved to the International Institute for Geo-information Sciences and Earth Observation (ITC) in 1997. The ITC is an international school providing courses on GIS and Remote Sensing to students from all around the world, ranging from short courses, through 12 month Professional Master and 18 month MSc degree courses, as well as a PhD programmes. Since 1 January 2010, ITC is a Faculty of the University of Twente. Here I am at present Senior Lecturer in GIS and cartographic visualisation in the Department of Geo-Information Processing (GIP). My teaching subjects include Cartographic Theory, WebCartography and WebGIS, Geo-webservices, 3D visualisation and web application building. Furthermore, I'm involved in supervision of PM Case Study and Final Assignments and MSc theses. I participate in the research activities of the departemental Research Theme STAMP (Spatio–Temporal Analytics, Maps and Processing). I have been involved in various consultancy projects in The Netherlands, India, Iran, Italy, Malaysia, South Africa, Thailand and Zambia. I am Map Editor and member of the Editorial Board of Geografie (Journal of KNAG - Koninklijk Nederlands Aardrijkskundig Genootschap, ISSN 0926-3837); External Officer (webmaster) of the Council of the Association of Geographic Information Laboratories for Europe (AGILE); Member of the ICA Commission on Open Source Geospatial Technologies and Publications Chair of this commission in combination with the Open Source Geospatial Foundation (OSGEO).

  Hide Biography

  Show Abstract

  In this paper we describe the use of the Open Web Platform for creating thematic maps from data that is available from geo-webservices. At ITC, we are interested in facilitating the production of maps from spatio–temporal data to a format suitable for internet dissemination, automatically and directly. To achieve that, we look specifically into the possibilities of the loose coupling of distributed geo- webservices with interactive vector maps. For that we need maps to be generated on–the–fly from the data, without conversion or pre-processing needed. This is necessary because the map generation should fit in an interoperable GeoData Infrastructure. Following the current development of the Web, a logical step was to look for map viewer components based on the Open Web Platform. The primary goal of the Open Web Platform is to create a comprehensive range of advanced, open Web standards (W3C 2012), enabling us to create web applications without the need for proprietary technology. As a use case, we decided to work on the National Atlas of the Netherlands map viewer. The current experimental third edition of the Dutch National Atlas was our first attempt to implement a digital atlas client as part of the Netherlands Geodata Infrastructure (NGDI), a project described in Kraak et al. (2009). Its map viewer was pragmatically based on existing components, implemented using the proprietary Adobe Flash technology. To convert this viewer to the Open Web Platform, we used the D3 Javascript API, which allows you to bind arbitrary data to a Document Object Model (DOM), and then apply data-driven transformations to the document (Bostock et al. 2011). The resulting map viewer uses SVG and HTML5 to offer interactive map views of socio-economic data from the NGDI. In the paper, we describe our set–up (see figure 1) in terms of performance, compatibility and adherence to standards, flexibility and extensibility.

  Hide Abstract

  Paper | Presentation | Presentation Video

• Visualization of Soccer Statistics

  Alpan Yıldırım (Sabancı University, Student)

  Show Biography

  Fourth year Computer Science and Engineering undergraduate student at Sabancı University, pursuing a Bachelor of Science degree under the supervision of Dr. Selim Balcısoy.

  Hide Biography

  Onur Akdeniz (Sabancı University)

  Show Biography

  Senior Undergraduate at Sabancı University

  Hide Biography

  Selim Balcisoy (Sabancı University, Assist. Prof.)

  Show Abstract

  In this paper we present a decision support system for soccer betting. The proposed software analyzes with data mining techniques and displays results on mobile and desktop browsers using SVG. The data in question is related to a betting system, IDDAA, that revolves around correctly guessing the outcome of matches in certain sports leagues and competitions, most prominently soccer. Players of IDDAA do their betting in a studious fashion, making use of widely available match and team statistics to evaluate past performance of teams as a way of making more informed choices, hedging their risks, and increasing chances of a money payout. This statistical analysis, taking into account multiple variables such as the number of past wins, draws, losses, the average goals scored, is often performed by looking at web-based or paper-based listings and can increase the amount of time required for deliberation significantly. The system presented in this paper intends to assist IDDAA players’ decision making by first algorithmically performing this analysis of multivariate data, using a scoring system to mark bets up, and then formatting this data in a visual, glyphed representation resembling a matrix heatmap, prepared using SVG, that points to favorable betting options at a brief glance. The inputs to the system are two-fold. One input is the bet data for a given week, which includes the matches to be played that week and the corresponding bets with their ratios. The other input contains the teams and their past match outcomes for a parameterized number of weeks. The output is a generated web page that displays a data visualization scheme that signifies the scores assigned to the bets, alongside glyphs that represent other relevant information such as the given bet ratio or a statistic relevant to the bet type. All visual elements of the final web page representation are generated using SVG, including textual elements, and using both path-based and primitive shapes, various styling elements and translation and scaling functions. The resulting visual data representation easily scales with the number of bets, teams and leagues, ensuring a tidy presentation while retaining a similar layout to what IDDAA players currently make use of to make their analyses. The system at its current incarnation is a fairly traditional desktop application, though no component of the system is platform-specific, and automatic SVG generation and the scalable nature of SVG renders the system feasible for multiplatform implementation, including mobile devices where it can find a home among the actual IDDAA players. Initial testing and prototyping on mobile and tablet devices have also been favorable, presenting a visually pleasing and informative view similar to the desktop performance, with further optimization made possible by JavaScript. Possibilities for multi-touch interactivity with SVG are also being investigated as an avenue for improving the current presentation and to explore SVG-related possibilities in that regard.

  Hide Abstract

  Paper | Presentation | Presentation Video

• W3C Panel

  Erik Dahlström (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.

  Hide Biography

  Show Abstract

  After a short introduction in the current work of the W3C CSS and SVG working groups there will be the opportunity to ask questions and provide feedback.

  Hide Abstract

  Presentation Video

• Web Animations

  Dmitry Baranovskiy (Adobe Systems)

  Show Biography

  Dmitry star­ted his jour­ney over a dec­ade ago as a back-end developer, then a designer and has now finally settled and accep­ted his fate as a front-end develoepr. Des­pite his deep know­ledge of CSS and HTML, he mainly spe­cial­izes in JavaS­cript and is well known as the cre­ator of Raphaël as well as other JavaS­cript lib­rar­ies. Cur­rently he pushes web stand­ards for­ward as a Senior Com­puter Sci­ent­ist at Adobe.

  Hide Biography

  Show Abstract

  The session will cover existing animation models from declarative (CSS, SVG/SMIL) and scripting (jQuery, D3, Raphaël) points of view. Their strengths and weaknesses. What requirements developers have and how those model satisfy them.

  Hide Abstract

  Presentation Video

• Web-based Declarative 3D Graphics for Anthropometry Visualization and Education

  Sandy Ressler (National Institute of Standards and Technology, Computer Specialist)

  Show Biography

  Mr. Ressler is currently performing research into information visualization for a variety of scientific applications at the National Institute of Standards and Technology (NIST) where he has been for over twenty five years. Prior to NIST he was at a video game startup, and at Bell Labs. During his over thirty year career he has always been involved in interactive computer graphics. His research work appears frequently in a variety of scientific and technical venues, and his columns, editorials, and articles have chronicled Web3D standards and contributed to the field of Digital Human Modeling. Mr. Ressler is a pioneer and visionary in the development of 3D computer graphics for use on the Internet, primarily via work with the Virtual Reality Modeling Language (VRML), the ISO standard for 3D on the World Wide Web. Over the last ten years, Ressler has been one of the central figures in this field. He was on the Web3D Consortium’s Board of Directors for 6 years, two of which as Vice President. This organization is responsible for both VRML and X3D, its successor. Ressler has been a leader, ensuring that the X3D standard has moved through to completion. From 1997-2001, he created and ran the world’s leading web site for 3D on the web at About.com. Ressler’s activities as co-chair and program committee member of a series of Web3D Symposiums and his running of several Web3D Showcase events (demonstration events) at SIGGRAPH (the premier conference for the computer graphics industry) has exposed tens of thousands of people to Web3D applications. Nearly 3000 people attended Ressler’s highly successful “demo” event for industry during 2004. Ressler has also been a leader in applying visualizations for 3D anthropometry (human measurement) data, resulting in safer children’s products. His more recent work with Web3D has involved broadening it's applicability for medical imaging, co-chairing a working group on medical extensions to X3D. He is widely regarded as one of the leading figures in the industry as illustrated by articles in the press including the NY Times, Federal Computer Week, and Popular Mechanics. Ressler has also authored three books, two on electronic publishing and coauthored the classic "Life with UNIX". Ressler's formal education is in the visual arts with an MFA degree when he produced computer animation in the stone ages of the mid 70s.

  Hide Biography

  Show Abstract

  Web-based Declarative 3D Graphics for Anthropometry Visualization and Education A system to educate users of human anthropometry was developed using a declarative 3D graphics system that is integrated seamlessly with web browsers. Users can select anthropometric landmarks and learn their names, view the body from many points of view, and highlight specific landmarks. The 3D graphics capabilities are implemented via a system called X3DOM and is integrated with the web browser utilizing standard jQuery UI interface elements. X3DOM is “...an experimental open source framework and runtime to support the ongoing discussion in the Web3D and W3C communities how an integration of HTML5 and declarative 3D content could look like.” In addition standard DOM click events are used to react to user actions resulting in information displays presented using standard jQuery dialogs. In addition to using an idealized computer generated model, we can also display bodies taken from real humans via laser scans produced by the CAESAR project. The CAESAR project was the first large scale anthropometric survey produced using whole body laser scanners in the mid 1990s. We have the ability to take the original 3D scans and via a not-atypical production chain display them, with their anthropometric landmarks, on an interactive web page. The scans for each subject were taken in three poses, two of which are standing. We can interactively flip between the two standing poses, another illustrative technique for examining the bodies. The 3D graphics appearing in a portion of the web page is not an isolated area. Buttons or sliders can cause actions in the 3D world. Likewise selection of 3D objects in the 3D world can cause native HTML dialogs to appear and trigger DOM events. The actions of HTML buttons can affect 3D viewpoints, and the scale of certain graphic elements in the 3D world. All of this is possible because the graphic elements themselves appear in the DOM of the web page. Imperative type graphics can of course perform similar functionality however the author must use various “tricks” to inject content to the DOM and interact with web page elements. Using a declarative approach graphic elements are simply another type of page content and existing development tools work quite naturally. As a simple example examine the JavaScript/jQuery code: $('sphere').attr('scale','10 10 10'); In pseudo-English this means: select all of the “sphere” type elements, then set the “scale” attribute for those elements to values ‘10 10 10’, the x,y,z scaling factors. This is a very simple and straightforward method to program web pages with 3D graphic content. X3DOM uses “declarative” markup which has several advantages over “imperative” graphics. Chief among these is 1) ease of authoring by using standard HTML tools, 2) ease of debugging, using standard debugging tools, and 3) ability to insert text for use by screen readers and other web accessibility tools. The overall system does not require any “plug-ins” and given the import of the appropriate JavaScript libraries, the 3D world is seamlessly integrated with the rest of the 2D web page. Rendering is accomplished via WebGL, however it is not a requirement as rendering can be performed via Flash, for those browsers that do not support WebGL. The architecture of X3DOM explicitly separates the rendering functionality, an additional benefit of the declarative markup approach. Anthropometry is but one example of the types of applications that can use declarative 3D graphics. The clean integration of 3D graphics with web pages offers the potential for wide and ubiquitous dissemination of applications via dynamic web pages and reduces the complexity of prior integration techniques. The inclusion of graphic content to the DOM allows authors and content providers the ability to leverage the rich environment of web development tools for their own applications.

  Hide Abstract

  Paper | Presentation Video

• WebGIS with vector data using OpenLayers and GeoExt

  Marc Jansen (terrestris GmbH & Co. KG, Application Developer)

  Show Biography

  I acquired my diploma in geography in 2007 and I have been working with the web and the technologies that make it work since 2005. Currently I am employed in Bonn at terrestris, where I develop beautiful WebGIS applications (Geographic Information Systems on the web; maps, that is) and work on OpenSource Software. I am the author of a German book called "OpenLayers — Webentwicklung mit dynamischen Karten und Geodaten" in which I introduce the components of my favorite software stack like OpenLayers, GeoServer, UMN Mapserver, PostGIS, GeoExt etc. I am a core developer of the OpenSource JavaScript mapping-library OpenLayers and recently I helped kickstarting GeoExt's move to Ext JS 4.1.

  Hide Biography

  Show Abstract

  Thanks to OpenLayers (http://openlayers.org/) it is possible to render vectorial spatial data (from numerous formats such as KML, GML, GeoJSON etc.) on the web in combination with other standardized or proprietary formats for geodata (such as WMS, Bing tiles, Googles baselayers, OpenSreetMap tiles etc.) in one map on any HTML page. The digitizing capabilities of OpenLayers (including creation, modification, deletion of new vector features and snapping/splitting of vectors with other features) is powered by the vector layer and the vector controls of OpenLayers. GeoExt (http://geoext.org/), a "JavaScript Toolkit for Rich Web Mapping Applications", which is built on top of Ext JS and OpenLayers, also uses vectors to aid developers in creating beautiful WebGIS applications. GeoExt is able to show automatic legend components for all layers of a map, even vector ones. Also vectors are used to help users select and modify regions of their maps for printing. The talk will present some of the possibilities when working with vectorial data in Openlayers and GeoExt.

  Hide Abstract

  Presentation Video

• WebGL - Fashion buttons prototyping from 3D Design to Production

  Giulio Roggero (Intre Srl)

  Show Biography

  Graduated from the Politecnico of Milan in 2000 and member of IEEE and PMI. He actually cooperates with different Italian and foreigner companies as a consultant in HTML5 Web Apps and Agile Training and Coaching. He is actively involved in Project Management initiatives cooperating with the PMO3 Observatory and Project Management and Complexity LEP workgroup, initiatives of PMI-NIC (pmi-nic.org). He holds the following PM certifications: PMI-ACP, PMP, Scrum Master and Prince2 Foundation. Eclectic, he observes and studies everything innovative in the ICT sector, and with curiosity and explorative attitude he has dedicated to many Open Source projects (gwt-spring-jpa-lucene, agile-the-board-game and others) to many of which he still cooperates with unchanged interest. In 2003 he founded Isola Software, an IT consultancy web-oriented technology office. The office cooperates with small and medium companies for the coordination, architectural planning and training on Edge technologies: HTML5, AJAX, .NET 4.0, Java 6, PHP 5, Python and more. He also provides training and refreshing sessions for his cooperators with patience and optimism, showing noticeable project management skills. Exploiting his passion for boardgames, in 2004 he founded the portal www.giochidatavolo.net with his friend and cooperator Andrea Bolognini. Today this sites has got more than 11,000 members and it represents one of the main portals at a national level in its specific area. Coming from the Cusian Region, in 2004 he realizes a DVD on the Lake Orta. He is very committed to this work and he is going to release an updated, re-designed and multi-lingual version of the project. In 2008 he becomes Senior Partner at Intre’, an Italian company oriented on software for the automation. Among the various publications, we remember the IEEE project The Laser Cutting System and Real Time monitor in SVG. More details on linkedin public profile: http://it.linkedin.com/in/giulioroggero

  Hide Biography

  Carlo Ballabio

  Fabio Ghislandi (Intré srl, Project Leader)

  Claudio Volpi (Intré srl, Developer)

  Show Abstract

  Abstract

  In this paper we aim to explain and share the experience on how we implemented a product for prototyping a button in fashion industry using HTML5 WebGL technology called BCreator.

  We developed a desktop application that allows to design quickly a 3D model of the button and to export the button on a wiki. The customer can interact with the 3D button using our wiki-embedded WebGL player and provide feedbacks about it. Once the proposal is accepted by the customer the software sends the ISO programs to the machines in the shop floor to create the physical prototype to be sent to the customer for final approval.

  We use OpenGL for the 3D desktop application and then we export the model to a custom WebGL javascript player.

  Introduction

  BCreator was born to reduce the time-to-market of Gritti Group S.p.A in button prototyping. Until now customers of Gritti, before ordering a new button, have required several physical prototypes in order to evaluate which one best fit their needs. Gritti asked Intré Srl to develop a windows application that helps to create 3D Models of the buttons in an quick and easy way.

  We at Intré have developed an OpenGL application that can share the button prototype via email with an attached pdf file that snapshots of the 3D buttons in different positions.

  But something was missing... the customers want touch the buttons!

  A web application is the solution.

  Intré implements in a Wiki (Atlassian Confluence) a WebGL plugin that allows customers to rotate and zoom buttons commenting each one and approving the best prototype. The windows application publish the OpenGL button into the Wiki translating it in a format compatible with the Wiki WebGL plugin.

  Once the button is approved the Wiki sends a message to the windows application that translates the OpenGL button in ISO programs. These programs are send to the machines in the shop floor to create the physical prototype to be sent to the customer for final approval.

  The adoption of WebGL allows to be plugin free and cross platform compatible.

  During the project we face several problems related to the immaturity of WebGL technology and browser support. In particular the creation of holes in the button surface. In this paper we will describe all problems and how we solved them.

  Moreover we will discuss the performance issues related to 3D modelling published on the web and the possible evolution of the BCreator application like 3D printing and WebGL 3D editors.

  A demo will be presented.

  Hide Abstract

  Paper | Presentation Video

• Web graphics from research to apps to action

  Oleg Lavrovsky (Swiss Federal Institute of Technology, Software Engineer)

  Show Abstract

  We are developing interactive visualizations to help bridge the gap between experts and decision-makers in city and land planning: government officials, community leaders, ordinary citizens who need better access to relevant data and analysis tools. In this talk we will see how Web graphics have now shaped up to be the ideal canvas for these types of applications, even in a demanding scientific environment. In parallel, the Swiss Open Data Initiative has been championing the use of Web technologies in regular public workshops. Looking at these rapidly implemented apps and visualizations, mobile games and larger scale projects, we will run through the challenges and opportunities in store for developers and everyday users of the richly interactive Web.

  Hide Abstract

  Presentation Video

• Web Graphics Symbiosis

  Dirk Schulze (Adobe Systems)

  Show Abstract

  The presentation of content becomes more and more interesting as more multifaceted web technologies get. From simple text to floating text with web fonts, from simple images to animated Canvas, from simple tables to dynamic and detailed data visualization, the web made an impressive change in the last couple of years. And the change continues. New specifications like CSS Animations, CSS Transitions, Compositing and blending, Filter Effects and a lot more are very promising. But which of these techniques can already be used? How is it possible to emulate these features with currently existing browsers? I'll demonstrate how filters, masks and compositing can be used cross platform. How content can get transformed and animated right now. One important part of the success of the web is the symbiosis of different web technologies. Independent if it is CSS, HTML5, WebGL or SVG, everything can be combined together. In the presentation I'll talk about how SVG graphics can be embed in HTML. How CSS can help to style HTML and SVG at the same time. How SVG can be used in HTML Canvas and WebGL. The Canvas element and its two-dimensional and three-dimensional capabilities will be integrated into SVG 2.0. I'll show how to use the capabilities of WebGL and Canvas with already existing specifications and how new CSS capabilities like animations and transition impact SVG.

  Hide Abstract

  Presentation Video

• Web mapping with vector data. Is it the future?

  Loïc Gasser (swisstopo)

  Show Abstract

  Current web mapping applications display mainly images. The emergence of new Internet technologies opens the door to the use of vector data in browsers. This presentation aims to demonstrate the possibilities of Open Source technologies in this field and to compare these new opportunities with current technologies.

  Hide Abstract

  Presentation Video

• youSCADA©, SCADA as a Service: Monitoring and Controlling Devices and Objects via Cloud

  Giulio Roggero (Intre Srl)

  Show Biography

  Graduated from the Politecnico of Milan in 2000 and member of IEEE and PMI. He actually cooperates with different Italian and foreigner companies as a consultant in HTML5 Web Apps and Agile Training and Coaching. He is actively involved in Project Management initiatives cooperating with the PMO3 Observatory and Project Management and Complexity LEP workgroup, initiatives of PMI-NIC (pmi-nic.org). He holds the following PM certifications: PMI-ACP, PMP, Scrum Master and Prince2 Foundation. Eclectic, he observes and studies everything innovative in the ICT sector, and with curiosity and explorative attitude he has dedicated to many Open Source projects (gwt-spring-jpa-lucene, agile-the-board-game and others) to many of which he still cooperates with unchanged interest. In 2003 he founded Isola Software, an IT consultancy web-oriented technology office. The office cooperates with small and medium companies for the coordination, architectural planning and training on Edge technologies: HTML5, AJAX, .NET 4.0, Java 6, PHP 5, Python and more. He also provides training and refreshing sessions for his cooperators with patience and optimism, showing noticeable project management skills. Exploiting his passion for boardgames, in 2004 he founded the portal www.giochidatavolo.net with his friend and cooperator Andrea Bolognini. Today this sites has got more than 11,000 members and it represents one of the main portals at a national level in its specific area. Coming from the Cusian Region, in 2004 he realizes a DVD on the Lake Orta. He is very committed to this work and he is going to release an updated, re-designed and multi-lingual version of the project. In 2008 he becomes Senior Partner at Intre’, an Italian company oriented on software for the automation. Among the various publications, we remember the IEEE project The Laser Cutting System and Real Time monitor in SVG. More details on linkedin public profile: http://it.linkedin.com/in/giulioroggero

  Hide Biography

  Carlo Ballabio

  Gianni Bombelli (Intre S.r.l., Network Manager)

  Alex Mufatti

  Show Abstract

  This paper is the natural evolution of the paper presented at the SVG Open Day 2008 on Web HMIs. Since 2006 we are developing and studying ways for creating Web Based application for monitoring and controlling industrial machines and, more generally, any device on the field.

  During this journey we faced several problems: latency, scalability, security, reliability, field connection and ease of use.

  The aim of this paper is to share our lesson learned about this topic and explain the state of the art of the last version of our platform, youSCADA©.

  We have found a solution of our problems using WebSockets and SVG and then scaling the data pushing using Cloudfoundry. In this way many end-users are able to monitor the same data on the field without reducing performances and responsiveness.

  The SCADA a as Service is a platform, built on Cloudfoundry, that enables end users to easily create a web page and to connect the objects displayed on the page with the informations retrieved from devices on the field.

  The end user can design his own page using an online SVG editor, attaching to each SVG element the logical address of the field value to monitor. Using Cloud9 editor and node.js it’s also possible to add server-side logic. Using the SDK provided, the user can browse logical and physical addresses and convert each other. In this alpha version we support UDP and TCP sockets (by means of a custom wrapper) to exchange data with devices. More protocols, like OPC, Modbus and manufactures proprietary protocols are in development.

  Once the application stack is competed with the customer logic, if needed, the user can publish the page on the web and access if from his browser.

  SCADA as a Service platform can be used in several fields: industrial automation, building automation, domotics, finance, distributed sensors monitor but not only.

  The platform can run on a public cloud like Amazon EC2 but can also be implemented privately if the customer needs more control.

  A demo with Lego Mindstorm and TI Beagle Bone board will be shown

  Hide Abstract

  Paper | Presentation Video

Quick jump to: keynotes | regular presentations | workshops

Workshops

• Adobe Edge Introduction

  Sarah Hunt (Adobe Systems, Adobe Edge Product Manager)

  Show Abstract

  Sarah Hunt, Product Manager for Adobe Edge Animate will take you through building animated content from the ground up in this follow-along tutorial. This workshop will appeal to beginners or seasoned users of Edge Animate and Sarah will show you some tips and tricks on how to optimize your productivity when using Edge Animate. Users can preinstall preview 7 via the cloud or Adobe Labs. They will need an adobe account to download.

  Hide Abstract

• Animating the open Web

  Jeremie Patonnier

  Show Abstract

  Since the early day of the Web, designers want to have it animated. This need is what allows Flash to rise and explain why animated GIFs were so appealing not so long ago. 10 years later (Today), web designers have a whole set of techniques to build animations. However, it's pretty hard to know which technique to use. To make things a bit clearer for everyone, this workshop will dig into the main techniques available to build animations. Because there is no perfect solution, we will take the time to detail how they work and what are their side effects and limits (performance, accessibility, browser support, etc.).

  After a short introduction that will remind to the audience the "old" legacy techniques available in the early days of the Web (aGIF, DHTML) and some non technical knowledge about animation we will cover the following techniques :

  SVG (and a bit of SMIL) Animations

  First we will cover the theory: This kind of animation has the most robust model with time lock animation and event handling out of Javascript. However, it is not well supported among browsers and is mostly not allowed to interact directly with HTML contents.

  Second, We will see some examples of SVG animations, including tricky mashup with HTML and fallback support for Internet Explorer (using TimesheetsJS or RaphaelJS).

  CSS Animations & transitions

  At first, we will see the benefit and limits of CSS animations. After All, this is the new kid on the block. Designers expect a lot from this technique but it is young and far from finished.

  Second, we will explore the syntax which can be quite complex and with some weird limits. It will be the opportunity to explain it and dig through the limits of the model.

  In the end, we will discuss the browser support and the future of the specification, including the animation Events that bring some perspective.

  Javascript

  Because it is the most reliable technique, scripted animations will be the biggest part where we will see the following:

  • legacy method using setIntervall and setTimout and why it should be avoid
  • New methods through requestAnimationFrame
  • The rise of Canvas as an animation support with an introduction to some interesting libraries (PaperJS, ProcessingJS, etc.)
  • we will finish by a little insight to the future with an open discussion about the Web Animations API Proposal from Adobe, Google and Mozilla

  HTML5 Vidéo

  Video is also another way to add animation to a page. In this last part we will se how to embed and control a video in an HTML document. Once this made, we will see how it's possible to mashup a video with the any HTML content thanks to the PopcornJS library.

  In the end, you will have a full overview of the modern tools available to build all the fancy animations you could dream off.

  Hide Abstract

• An introduction to building WebGIS applications with OpenLayers and GeoExt

  Marc Jansen (terrestris GmbH & Co. KG, Application Developer)

  Show Biography

  I acquired my diploma in geography in 2007 and I have been working with the web and the technologies that make it work since 2005. Currently I am employed in Bonn at terrestris, where I develop beautiful WebGIS applications (Geographic Information Systems on the web; maps, that is) and work on OpenSource Software. I am the author of a German book called "OpenLayers — Webentwicklung mit dynamischen Karten und Geodaten" in which I introduce the components of my favorite software stack like OpenLayers, GeoServer, UMN Mapserver, PostGIS, GeoExt etc. I am a core developer of the OpenSource JavaScript mapping-library OpenLayers and recently I helped kickstarting GeoExt's move to Ext JS 4.1.

  Hide Biography

  Christian Meyer (Terrestris)

  Show Abstract

  The hands-on workshop will cover the basics of both OpenLayers and GeoExt, two JavaScript libraries that help you build great and fully functional WebGIS applications.

  OpenLayers is an already mature but sill rapidly-developing library for building mapping applications in a browser. The library lets developers integrate data from a variety of sources, provides a friendly API, and results in engaging and responsive mapping applications.

  GeoExt is a rather young (and also rapidly-developing) library for building rich, web-based GIS applications. The library is built upon Ext JS and OpenLayers. The former provides UI components for building web applications along with solid underlying data components, the latter is the de facto standard for dynamic web mapping. GeoExt provides mapping related UI components. It also unifies access to information from OGC services, OpenLayers objects and arbitrary remote data sources. This allows for easy presentation of geospatial information in a wide choice of widgets, ranging from combo boxes or grids to maps and trees.

  Hide Abstract

• Create a web-friendly realistic SVG with Inkscape

  Andreas Fritsch

  Show Biography

  I work as an social worker. As i was a child i have had a passion of design. Since 2003 i've made real world websites.

  Hide Biography

  Show Abstract

  Introduction

  With all the hype about brand-new XML formats in 2001, like the newborn SVG, it progressively became quiet. Sure, Adobe had published their plug-in, but the Flash plug-in was also on the rise. These days however,a decade later, no modern Desktop browser needs a plug-in to display SVG anymore. It’s time to use SVG in web-design.

  Preparations

  There are a lot of well-known programs in the design business. But most of these products were originally made for printing purposes, even though they were later improved to support the writing of SVG-files. In my opinion a file of 150 to 200kbyte is no issue if you want to print it, but it’s way too big for the web. In conclusion to that and because of the existing idea of the semantic web, I advise to specifically consider creating an SVG for the use in web-design. My tool of choice is Inkscape.

  For using in websites the file size must not exceed 100 KB. The jump is similar, as from vinyl to compact disc in music buisness. First of all, you should answer the question, what elements are omitted.

  The size of SVG files is determined mainly by the number of objects and their complexity. Through several layers, similar to the technique of glazing in oil painting creates a realistic picture. The objects themselves are described by coordinates (nodes). The typical operation of the designer with the calligraphy tool used with a drawing tablet produced significant numer of nodes. This is one cause for huge files. Some techniques are therefore not used in the production for the web. It makes sense to think about which objects, color definitions, filters can be used more then ones.

  Inkscape

  Inkscape is made for creating SVG. It’s the native format and it may seem like it might not be completely ready yet. Don’t let yourself be fooled by the version number. A number like 0.48 is the understatement by GPL, but there are some limitations you should know and work around that.

  The Swiss knife - always a path

  Inkscape mostly saves simple forms as paths, but a person can grasp the command to create of circle better than understand the exact same shape as a couple of points in a path. Change the markup at the end again in the simple form. On top of that, the size of the file becomes smaller.

  Use gradients and filters twice or more

  An object gets properties. As an standard in Inkscape any filter or gradient is bound to one object. The blur-filter is often used. To change the standard behaviour open the filter dialog which contains a powerful filter editor. You can use all of the filters on more than one object, the process will also reduce the size of the SVG-file.The same feature would be nice for gradients.

  No clone wars

  In a lot of cases you will take the same shape. Inkscape offers a way to duplicate the shape, but it is mostly better to use the clone tool. A clone is a use-element and will make rendering faster and the size of the file becomes even smaller, because a use is only a reference and not a couple of points.

  Use name which are describing the objects

  For further work with your editor, you should get a describing name for the objects or groups. By a right click on the object, you will get a dialog box and be able to do this.

  Save the file as optimized SVG

  With the version 0.48 Inkscape offers this. In this case unused gradients or filters will be removed from the file and saved in a compact way.

  Optimized your code in a editor

  Clean up the doctype

  First of all, you can clean up the doctype. The rdf-declaration and the meta-tags are not really needed. I advise to you a compact version.

  Check any kind of abstraction

  Find out which gradients you can use for a couple of objects. Use styles, if it’s possible.

  Round floats

  In my experience, such a high accuracy is not really needed. You can reduce the size of a file enormously by rounding floats. In some cases you can round the point from float to integer, sometimes you need 1-2 Decimal, e.g. in the matrix-Attribute. I use some needful bash-scripts to do that and the tool 'SVG Cleaner'.

  Use the title element

  One of the advantages of the format is that each element can be equipped with a title. Because of that, you can describe the content further and maybe Google likes that, too.

  Let's go - draw your own vector

  Prepare a picture

  Load a a fruit of your choice from a free picture website - a prefer a green apple. Increase the contrast with Gimp or something like that.

  Place the picture in a background layer

  At the beginning open the layer window. First place your prepared picture, rename the layer to background (or sth. like that) After being closed by clicking the lock icon and you create additional layer. Layers are grouped elements that receive a special inkscape-label. The allocation is therefore possible only if the SVG format files are stored Inkscape SVG, which is highly recommended for the first phase. When mixed mode is set to filter effects here should therefore remain normal preference.

  Initially, I added a layer 'base', which contains the main body of the apple. First, i draw an ellipse, which I convert the object to a path, add nodes to and move them until they match with your picture template. The pipette can take the fill color directly from the original image.

  Add layer, more objects, gradients and filter

  The number of layer depends on the complexity of the drawing. I look a bit after that, what group of elements belong together.

  By gradients and transparency may already have a significant spatial effect can be produced with these two objects. I let the "Fill and Stroke" dialog appears. The use of blur should be avoided at this point. So that a filter is applied. Uncertainty is needed quite often, and thus for each item would be created a new filter. Filters can affect the processing time significantly and are better added at the end. Since Safari and Internet Explorer filter anyway (still) don't understand, the graphics should be presentable without a filter.

  Objects ore groups should get a identifiers

  It makes sense to name the objects meaningful. Inkscape provides to a dialogue that is achieved with the right mouse button. The dialogue clearly shows that each element can have a title in Inkscape and a description of what you should also use to visually impaired users also supply a description.

  Finished your work and use the Inkscape tools to reduce the filesize

  As often as you can, try 'Ctrl + L' to reduce the number of nodes. Inkscape offers a clone tool, but it can't create an object without filling and without creating a stroke. But that is a prerequisite in order to give all cloned objects (use) different colors. After all the components of the portraits were created, the image can be removed with the layer 'background'.

  Be carefully with filters

  Now may be the use of filters. All the filters you can change with 'Edit Filter'. These filters can be assigned to the desired objects. In my opinion, ranging from 4-5 blur filter. Inkscape does already with some filters that can be used as a basis for experimentation. Instead of this simple fruit with this technique can also be made more complex graphics.

  Put it together

  With the upcoming HTML5 specifiation we get a simple way the use a SVG inline in a HTML. Personally, I prefer a way to use a switch in combination with foreign objects.

  The switch-element is very powerful. If the browser understands the path command, like all modern browsers, the foreign object will not be displayed. Browsers, like Konqueror or old Internet Explorers display the content within the foreign object. You can combine this with conditional comments.

  That sounds great but...

  Yes I know, what you are going to say. There is a workaround for the Internet Explore up to version 8, you can use a VML.

  Hide Abstract

• Developing Rich, Web-based User Interfaces with SCXML and SCION

  Jacob Beard (INFICON, Software Engineer)

  Show Abstract

  Description

  User interfaces (UI) comprise reactive systems whose behaviour often involves a complex notion of timing and state, and implementing this logic directly in a general-purpose programming language such as JavaScript can be nontrivial, leading to applications which are slow to develop and error-prone. Previous work has demonstrated that Statecharts, a graphical modelling language built to capture the behaviour of complex, timed, reactive systems, is well-suited to describe complex UI behaviour, leading to more productive and robust UI development[0][1][2][3].

  SCXML is an emerging W3C specification, developed to provide an XML syntax for Statecharts. StateCharts Interpretation and Optimization eNgine (SCION), a liberally licensed open source project currently being developed on Github, provides an implementation of SCXML in JavaScript, and thus allows the expressive power of SCXML to be applied directly to the development of user interfaces built on the familiar suite of graphical Open Web technologies, such as HTML and SVG.

  This workshop will provide a practical tutorial oriented toward Web front-end developers, and will cover a general introduction to SCXML and Statecharts, an overview of current development tools and libraries, and an examination of techniques to practically apply SCXML to real-world UI development today.

  Outline

  1st hour: Introduction

  • Introduction to Statecharts
    • basic states
    • events
    • transitions
    • actions
    • hierarchy: AND and OR states
    • history
  • Getting started with Statecharts development:
    • authoring SCXML
    • simulate/test/debug using SCION
    • synthesize for deployment

  2nd hour: Application of SCXML to the Development of Web-based User Interfaces

  • Integration of SCXML with HTML and SVG
  • Case studies:
    • Vector Graphics Drawing tool
    • Modal Text editor
    • Forms-based web application
  • Integration with JavaScript toolkits:
    • Dojo
    • jQuery
    • SproutCore

  References

  [0] Developing a Statechart-to-ECMAScript Compiler Optimized for SVG User Interface Development for the World Wide Web

  [1] Modelling the Reactive Behaviour of SVG-based Scoped User Interfaces with Hierarchically-linked Statecharts

  [2] Rapid Development of Scoped User Interfaces

  [3] Constructing the User Interface with Statecharts

  Hide Abstract

• Interactive Charts with Highcharts

  Torstein Hønsi (Highsoft Solutions AS, CTO, Founder)

  Show Biography

  Author of Highcharts JS and Highslide JS. CTO and founder of Highsoft Solutions.

  Hide Biography

  Show Abstract

  Since JavaScript/HTML5 took over the web charting market, Highcharts has been among the most popular charting APIs. Highcharts is loved by web developers for the low entry level, slick default design and behaviour, scalable license model, numerous configuration options and an extensive documentation with hands-on examples for each option. In this workshop, author Torstein Hønsi will talk in detail about setting up a chart in your web page. We will discuss concepts like loading chart data by jQuery.ajax, setting up the back end, using the export server and more. Finally we will solve exercises and you will get the chance to discuss solutions around your own charting needs.

  Hide Abstract

• Introduction to d3.js

  Ian Johnson (Mainstem Collective, Data Visualization Consultant)

  Show Biography

  Bachelors in Applied Math and Chinese, Masters in Scientific Computing. Pixel flipper since the age of 16.

  Hide Biography

  Show Abstract

  D3.js is a powerful javascript library for creating data driven documents. At first glance d3 looks like a fancy chart library, but it is actually much more. This workshop will introduce you to the many tools and abstractions that d3.js provides to turn your data into live HTML and SVG representations. We will cover some basics of SVG and DOM manipulation, explore the functionality that d3 provides, and use d3 as well as standard HTML5 javascript to make interactive content.

  Hide Abstract

• Raphaël — JavaScript library

  Dmitry Baranovskiy (Adobe Systems)

  Show Biography

  Dmitry star­ted his jour­ney over a dec­ade ago as a back-end developer, then a designer and has now finally settled and accep­ted his fate as a front-end develoepr. Des­pite his deep know­ledge of CSS and HTML, he mainly spe­cial­izes in JavaS­cript and is well known as the cre­ator of Raphaël as well as other JavaS­cript lib­rar­ies. Cur­rently he pushes web stand­ards for­ward as a Senior Com­puter Sci­ent­ist at Adobe.

  Hide Biography

  Show Abstract

  Raphaël provides nice API for manipulating SVG in the browser. Due to browser support Raphaël gives you less than SVG, but it also gives you more through the utility functions. In this course I will guide you through API and show how easy is to create stunning graphics with help of Raphaël. It will include, but not be limited to: Animations — Raphaël animation model, it’s flexibility and power:

  • Transformations — not your dad’s transformations, way better that what SVG could give you now
  • Custom attributes — in combination with animation API gives you unlimited power
  • Path syntax and Raphaël additions to it for Catmull-Rom curves
  • Strokes, fills & gradients
  • Text and custom fonts
  • Importing existing SVG files
  • and much more

  The course will be put together as set of tasks that will run over all aspects of Raphaël. This is a unique opportunity to increase your skills with Raphaël or meet this amazing library by learning from the library author himself.

  Hide Abstract

Quick jump to: keynotes | regular presentations | workshops

Dinner Event

On Wednesday evening there will be a 4h boat ride with a Swiss dinner buffet. This dinner event is optional (extra registraion). People who registered for this event will receive the exact information on how to get to the dock where boarding will take at 18:45 on Wednesday evening. The boat leaves at 19:00 - so please do not arrive late! Do not forget to bring along your dinner and drinks coupons.

To get to the dock, take bus no. 69 from ETH Hönggerberg to Bucheggplatz (direction Milchbuck) and change to tram no. 11 (direction Rehalp). Get off the tram at Bürkliplatz. The dock is just across the street.