Conference Speakers
Keynotes
New rendering features in HTML
CSS filters, blending and compositing
Rik Cabanier (Adobe Systems, Sr Computer Scientist)
Show 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.
Hide Abstract
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.
Show 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.
Hide Abstract
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.
Show 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.
Hide Abstract
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.
Show 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.
Hide Abstract
A journey through the graphical Web
Vincent Hardy (Adobe Systems)
Show 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.
Hide Abstract
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.
Show 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.
Hide Abstract
Designing the modern web
Jacob Surber (Adobe Systems, Product Manager HTML Design)
Show 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.
Hide Abstract
Bringing the Power of the GPU to the Web
Neil Trevett (Nvidia, Vice president of Mobile Content)
Show 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.
Hide Abstract
All Presentations
including regular presentations, keynotes and panel discussions
- Aisch, Gregor
- Kartograph: A Framework for Creating Beautiful, Interactive Vector Maps:
Show AbstractKartograph: A Framework for Creating Beautiful, Interactive Vector Maps
Papertopic: 3D Visualization
Format: regular presentation (30 minutes)
Web technologies used: CSS-general,ECMAScript,SVG
Javascript frameworks: RaphaelJS
Author(s): Aisch, Gregor
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.
Links:
Hide Abstract
- Kartograph: A Framework for Creating Beautiful, Interactive Vector Maps:
- Akdeniz, Onur (Sabancı University)
Show Biography
Senior Undergraduate at Sabancı University
- Visualization of Soccer Statistics:
Show AbstractVisualization of Soccer Statistics
Decision Support System for Soccer Betting
Papertopic: Serverside Graphic Generators
Format: short presentation (15 minutes)
Web technologies used: ECMAScript,SVG
Keywords: multivariate, data, visualization, SVG, serverside, DOM, soccer, iddaa, decision, support
Author(s): Yıldırım, Alpan (Sabancı University), Akdeniz, Onur (Sabancı University) and Selim Balcisoy (Sabancı University)
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
- Visualization of Soccer Statistics:
- Almario, Paolo (UQAC, Student)
- Expand or contract the Universe:
Show AbstractExpand or contract the Universe
Performative and participatory project using Web technologies
Papertopic: Web Graphics in the Real World (production examples)
Format: regular presentation (30 minutes)
Web technologies used: CSS-general,CSS-Canvas,ECMAScript
Javascript frameworks: jQuery
Other technologies used: PHP, MySql
Keywords: Performative Art, Web-based solutions, iOS, GPS
Author(s): Almario, Paolo (UQAC)
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.
Links:
Hide Abstract
- Expand or contract the Universe:
- Álvarez-Leiva, Sergio (Vizzuality, Lead Designer, Founder)
- Dynamic, interactive vector maps for the new web :
Show AbstractDynamic, interactive vector maps for the new web
Papertopic: Web-GIS and Web-Mapping
Format: regular presentation (30 minutes)
Web technologies used: CSS-general,CSS-Canvas,SVG
Javascript frameworks: D3, Vecnik
Other technologies used: CartoDB
Keywords: geospatial data, open web, vector graphics, data visualization, vector maps, cartodb
Author(s): Álvarez-Leiva, Sergio (Vizzuality)
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.
Links:
Hide Abstract
- Dynamic, interactive vector maps for the new web :
- Bah, Tavmjong (Inkscape, Developer)
- Inkscape Update, 2012 Edition:
Show AbstractInkscape Update, 2012 Edition
Papertopic: Authoring Tools and Techniques
Format: regular presentation (30 minutes)
Web technologies used: CSS-general,SVG
Author(s): Bah, Tavmjong (Inkscape)
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
- Inkscape Update, 2012 Edition:
- Balcisoy, Selim (Sabancı University, Assist. Prof.)
- Visualization of Soccer Statistics:
Show AbstractVisualization of Soccer Statistics
Decision Support System for Soccer Betting
Papertopic: Serverside Graphic Generators
Format: short presentation (15 minutes)
Web technologies used: ECMAScript,SVG
Keywords: multivariate, data, visualization, SVG, serverside, DOM, soccer, iddaa, decision, support
Author(s): Yıldırım, Alpan (Sabancı University), Akdeniz, Onur (Sabancı University) and Selim Balcisoy (Sabancı University)
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
- Visualization of Soccer Statistics:
- Ballabio, Carlo
- WebGL - Fashion buttons prototyping from 3D Design to Production:
Show AbstractWebGL - Fashion buttons prototyping from 3D Design to Production
Case study on how HTML5 have reduced the time-to-market in button prototyping
Papertopic: Business Cases and Case Studies
Format: regular presentation (30 minutes)
Web technologies used: WebGL
Keywords: webgl, case study, fashion, rapid prototyping
Author(s): Roggero, Giulio (Intre Srl), Ballabio, Carlo, Volpi, Claudio (Intré srl) and Fabio Ghislandi (Intré srl)
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
- youSCADA©, SCADA as a Service: Monitoring and Controlling Devices and Objects via Cloud:
Show AbstractyouSCADA©, SCADA as a Service: Monitoring and Controlling Devices and Objects via Cloud
How SVG, WebSockets and Cloud can be adopted in Industrial Automation (and not only...)
Papertopic: Web Graphics in the Real World (production examples)
Format: regular presentation (30 minutes)
Web technologies used: ECMAScript,HTML5-Video,SVG
Other technologies used: WebSockets, Cloud, Node.js
Author(s): Roggero, Giulio (Intre Srl), Ballabio, Carlo, Mufatti, Alex and Gianni Bombelli (Intre S.r.l.)
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
- WebGL - Fashion buttons prototyping from 3D Design to Production:
- Baranovskiy, Dmitry (Adobe Systems)
Show Biography
Dmitry started his journey over a decade ago as a back-end developer, then a designer and has now finally settled and accepted his fate as a front-end develoepr. Despite his deep knowledge of CSS and HTML, he mainly specializes in JavaScript and is well known as the creator of Raphaël as well as other JavaScript libraries. Currently he pushes web standards forward as a Senior Computer Scientist at Adobe.
- Web Animations:
Show AbstractWeb Animations
Physics engine meets Raphaël
Papertopic: Interactivity and Scripting
Format: regular presentation (30 minutes)
Web technologies used: ECMAScript,SVG
Javascript frameworks: Raphaël, box2d
Keywords: physics, svg, raphaël, javascript
Author(s): Baranovskiy, Dmitry (Adobe Systems)
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
- Web Animations:
- Bektas, Kenan (University of Zurich Institute of Geography (GIVA), Research Assistent)
- Area of Interest Based Interaction and GeoVisualization with WebGL:
Show AbstractArea of Interest Based Interaction and GeoVisualization with WebGL
Papertopic: Graphical Effects (e.g. Filters, Transitions, etc.)
Format: short presentation (15 minutes)
Web technologies used: CSS-general,ECMAScript,WebGL
Javascript frameworks: jQuery
Other technologies used: Eye Tracking (Tobii)
Keywords: foveation, WebGL, gaze based interaction, web mapping
Author(s): Bektas, Kenan (University of Zurich Institute of Geography (GIVA)) and Arzu Coltekin (University of Zurich)
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
- Area of Interest Based Interaction and GeoVisualization with WebGL:
- Birtles, Brian (Mozilla Japan, Software Engineer)
- Next generation SVG & CSS animation:
Show AbstractNext generation SVG & CSS animation
Papertopic: Animated Graphics
Format: regular presentation (30 minutes)
Web technologies used: CSS-general,CSS-transforms,CSS-animations,SVG
Author(s): Danilo, Alex (Google), Cabanier, Rik (Adobe Systems) and Brian Birtles (Mozilla Japan)
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
- Next generation SVG & CSS animation:
- Bombelli, Gianni (Intre S.r.l., Network Manager)
- youSCADA©, SCADA as a Service: Monitoring and Controlling Devices and Objects via Cloud:
Show AbstractyouSCADA©, SCADA as a Service: Monitoring and Controlling Devices and Objects via Cloud
How SVG, WebSockets and Cloud can be adopted in Industrial Automation (and not only...)
Papertopic: Web Graphics in the Real World (production examples)
Format: regular presentation (30 minutes)
Web technologies used: ECMAScript,HTML5-Video,SVG
Other technologies used: WebSockets, Cloud, Node.js
Author(s): Roggero, Giulio (Intre Srl), Ballabio, Carlo, Mufatti, Alex and Gianni Bombelli (Intre S.r.l.)
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
- youSCADA©, SCADA as a Service: Monitoring and Controlling Devices and Objects via Cloud:
- Cabanier, Rik (Adobe Systems, Sr Computer Scientist)
- New rendering features in HTML:
Show AbstractNew rendering features in HTML
CSS filters, blending and compositing
Papertopic: 3D Visualization
Format: regular presentation (30 minutes)
Web technologies used: CSS-general,SVG
Author(s): Cabanier, Rik (Adobe Systems)
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.
Links:
Hide Abstract
- Next generation SVG & CSS animation:
Show AbstractNext generation SVG & CSS animation
Papertopic: Animated Graphics
Format: regular presentation (30 minutes)
Web technologies used: CSS-general,CSS-transforms,CSS-animations,SVG
Author(s): Danilo, Alex (Google), Cabanier, Rik (Adobe Systems) and Brian Birtles (Mozilla Japan)
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
- New rendering features in HTML:
- Christen, Martin
- Processing and Rendering Massive 3D Geospatial Environments using WebGL:
Show AbstractProcessing and Rendering Massive 3D Geospatial Environments using WebGL
The examples of OpenWebGlobe and SmartMobileMapping
Papertopic: 3D Visualization
Format: regular presentation (30 minutes)
Web technologies used: CSS-general,HTML5-Video,WebGL
Javascript frameworks: jquery
Other technologies used: gdal, postgis
Keywords: virtual globes, mobile mapping, geospatial webservices, cloud computing, webgl, glsl, sdk, geodata processing, multiprocess rendering, stereovision
Author(s): Wüest, Robert (University of Applied Sciences Northwestern Switzerland), Christen, Martin, Nebiker, Stephan (FHNW University of Applied Sciences Northwestern Switzerland) and Hannes Eugster
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.
Links:
Hide Abstract
- Processing and Rendering Massive 3D Geospatial Environments using WebGL:
- Coltekin, Arzu (University of Zurich)
- Area of Interest Based Interaction and GeoVisualization with WebGL:
Show AbstractArea of Interest Based Interaction and GeoVisualization with WebGL
Papertopic: Graphical Effects (e.g. Filters, Transitions, etc.)
Format: short presentation (15 minutes)
Web technologies used: CSS-general,ECMAScript,WebGL
Javascript frameworks: jQuery
Other technologies used: Eye Tracking (Tobii)
Keywords: foveation, WebGL, gaze based interaction, web mapping
Author(s): Bektas, Kenan (University of Zurich Institute of Geography (GIVA)) and Arzu Coltekin (University of Zurich)
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
- Area of Interest Based Interaction and GeoVisualization with WebGL:
- Dagan, Samuel (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".
- Math education with SVG. Part 2: Three dimensions:
Show AbstractMath education with SVG. Part 2: Three dimensions
Papertopic: 3D Visualization
Format: regular presentation (30 minutes)
Web technologies used: ECMAScript,SVG
Author(s): Dagan, Samuel (Tel-Aviv University)
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:
- The rotation (by scripting) of a three-dimensional cartesian coordinate system and its projection on a static cartesian plane.
- Simple geometrical forms build by straight segments, are easily rotated and projected on a plane.
- 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.
- A circular disk projected on a plane represents an ellipse, depending on its direction in space. The ellipse is obtained by scripting.
- As will be shown orthogonal projection of opaque object is also possible and enhances the visual perception.
- Curves in space can be represented by Bezier paths in three dimensions, which opens new horizons for SVG.
Hide Abstract
- Math education with SVG. Part 2: Three dimensions:
- Dahlström, Erik (Opera Software ASA)
Show Biography
Erik Dahlström is the SVG team leader at Opera Software ASA, where he's been working as a software developer since 2001. He holds an MSc degree in Computer Science and Engineering from the Institute of Technology at Linköping University (LiTH), Sweden. Since 2005 Mr Dahlström has been the primary representative of Opera Software on the W3C SVG Working Group. He is currently the co-chair of the group.
- Wow: Compelling Visual Experiences from the frontiers of Open Web:
Show AbstractWow: Compelling Visual Experiences from the frontiers of Open Web
Papertopic: Wow Session (Cool Demos)
Format: keynote (45 minutes)
Web technologies used: CSS-general,CSS-transforms,CSS-transitions,CSS-animations,CSS-Canvas,ECMAScript,HTML5-Video,HTML5-Audio,SVG,WebGL,XML
Author(s): Dahlström, Erik (Opera Software ASA) and Divya Manian (Adobe)
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.
Hide Abstract
- Wow: Compelling Visual Experiences from the frontiers of Open Web:
- Dailey, David (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.
- SVG and SVG Open – a retrospective:
Show AbstractSVG and SVG Open – a retrospective
Papertopic: Graphic Design
Format: regular presentation (30 minutes)
Web technologies used: SVG
Author(s): Dailey, David (Slippery Rock University)
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.
Hide Abstract
- Declarative Randomness for Scene Drawing in SVG:
Show AbstractDeclarative Randomness for Scene Drawing in SVG
Extensions of the Replicate Proposal
Papertopic: Graphical Effects (e.g. Filters, Transitions, etc.)
Format: regular presentation (30 minutes)
Web technologies used: ECMAScript,SVG,XML
Keywords: SVG, declarative, randomness, standards, replicate
Author(s): Elder, Eric (Slippery Rock University) and David Dailey (Slippery Rock University)
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
- SVG and SVG Open – a retrospective:
- Danilo, Alex (Google, Developer Advocate)
- Next generation SVG & CSS animation:
Show AbstractNext generation SVG & CSS animation
Papertopic: Animated Graphics
Format: regular presentation (30 minutes)
Web technologies used: CSS-general,CSS-transforms,CSS-animations,SVG
Author(s): Danilo, Alex (Google), Cabanier, Rik (Adobe Systems) and Brian Birtles (Mozilla Japan)
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
- Next generation SVG & CSS animation:
- Davidson, Gilmore (Atlassian, JavaScript Developer)
- Screenshot annotations in the browser:
Show AbstractScreenshot annotations in the browser
Papertopic: Business Cases and Case Studies
Format: regular presentation (30 minutes)
Web technologies used: CSS-Canvas,ECMAScript,SVG
Javascript frameworks: Raphaël 2.1.0, Simplify.js
Author(s): Zhang, Edward (Atlassian), Grunert, Ian (Atlassian) and Gilmore Davidson (Atlassian)
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.
Links:
Hide Abstract
- Screenshot annotations in the browser:
- Denmead, Grant (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.
- Using Gravity to Navigate the Internet and other Graphs :
Show AbstractUsing Gravity to Navigate the Internet and other Graphs
Papertopic: Scientific Visualization
Format: regular presentation (30 minutes)
Web technologies used: ECMAScript,SVG
Author(s): Dailey, David (Slippery Rock University), Whitfield, Deborah (Slippery Rock University), Weidman, Jake (Slippery Rock University) and Grant Denmead (Slippery Rock University of Pennsylvania)
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
- Using Gravity to Navigate the Internet and other Graphs :
- Elder, Eric (Slippery Rock University, Student)
- Declarative Randomness for Scene Drawing in SVG:
Show AbstractDeclarative Randomness for Scene Drawing in SVG
Extensions of the Replicate Proposal
Papertopic: Graphical Effects (e.g. Filters, Transitions, etc.)
Format: regular presentation (30 minutes)
Web technologies used: ECMAScript,SVG,XML
Keywords: SVG, declarative, randomness, standards, replicate
Author(s): Elder, Eric (Slippery Rock University) and David Dailey (Slippery Rock University)
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
- Declarative Randomness for Scene Drawing in SVG:
- Eugster, Hannes
- Processing and Rendering Massive 3D Geospatial Environments using WebGL:
Show AbstractProcessing and Rendering Massive 3D Geospatial Environments using WebGL
The examples of OpenWebGlobe and SmartMobileMapping
Papertopic: 3D Visualization
Format: regular presentation (30 minutes)
Web technologies used: CSS-general,HTML5-Video,WebGL
Javascript frameworks: jquery
Other technologies used: gdal, postgis
Keywords: virtual globes, mobile mapping, geospatial webservices, cloud computing, webgl, glsl, sdk, geodata processing, multiprocess rendering, stereovision
Author(s): Wüest, Robert (University of Applied Sciences Northwestern Switzerland), Christen, Martin, Nebiker, Stephan (FHNW University of Applied Sciences Northwestern Switzerland) and Hannes Eugster
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.
Links:
Hide Abstract
- Processing and Rendering Massive 3D Geospatial Environments using WebGL:
- Fraser, Neil (Google, Software Engineer)
- Building Interactive Environments with SVG for Google Blockly:
Show AbstractBuilding Interactive Environments with SVG for Google Blockly
Papertopic: Web Graphics in the Real World (production examples)
Format: short presentation (15 minutes)
Web technologies used: ECMAScript,SVG
Keywords: SVG, UI
Author(s): Fraser, Neil (Google)
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.
Links:
Files:
Hide Abstract
- Building Interactive Environments with SVG for Google Blockly:
- Gasser, Loïc (swisstopo)
- Web mapping with vector data. Is it the future?:
Show AbstractWeb mapping with vector data. Is it the future?
Papertopic: Web-GIS and Web-Mapping
Format: regular presentation (30 minutes)
Web technologies used: Canvas, SVG,WebGL
Author(s): Gasser, Loïc (swisstopo)
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
- Web mapping with vector data. Is it the future?:
- Ghislandi, Fabio (Intré srl, Project Leader)
- WebGL - Fashion buttons prototyping from 3D Design to Production:
Show AbstractWebGL - Fashion buttons prototyping from 3D Design to Production
Case study on how HTML5 have reduced the time-to-market in button prototyping
Papertopic: Business Cases and Case Studies
Format: regular presentation (30 minutes)
Web technologies used: WebGL
Keywords: webgl, case study, fashion, rapid prototyping
Author(s): Roggero, Giulio (Intre Srl), Ballabio, Carlo, Volpi, Claudio (Intré srl) and Fabio Ghislandi (Intré srl)
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
- WebGL - Fashion buttons prototyping from 3D Design to Production:
- Grunert, Ian (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.
- Screenshot annotations in the browser:
Show AbstractScreenshot annotations in the browser
Papertopic: Business Cases and Case Studies
Format: regular presentation (30 minutes)
Web technologies used: CSS-Canvas,ECMAScript,SVG
Javascript frameworks: Raphaël 2.1.0, Simplify.js
Author(s): Zhang, Edward (Atlassian), Grunert, Ian (Atlassian) and Gilmore Davidson (Atlassian)
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.
Links:
Hide Abstract
- Screenshot annotations in the browser:
- Hayama, Takanari (IGEL Co.,Ltd.)
- Bender: A Declarative, Dynamic Framework for Web Application User Interfaces:
Show AbstractBender: A Declarative, Dynamic Framework for Web Application User Interfaces
Papertopic: GUI frameworks for Web Applications
Format: regular presentation (30 minutes)
Web technologies used: ECMAScript,SVG,XML
Author(s): Quint, Julien (IGEL Co., Ltd.) and Takanari Hayama (IGEL Co.,Ltd.)
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.
Links:
Hide Abstract
- Bender: A Declarative, Dynamic Framework for Web Application User Interfaces:
- Hønsi, Torstein (Highsoft Solutions AS, CTO, Founder)
Show Biography
Author of Highcharts JS and Highslide JS. CTO and founder of Highsoft Solutions.
- Highcharts implementation and architecture:
Show AbstractHighcharts implementation and architecture
Papertopic: Charting Frameworks and Libraries
Format: regular presentation (30 minutes)
Web technologies used: CSS-general,ECMAScript,SVG
Javascript frameworks: jQuery
Keywords: javascript,charting,svg,vml,animation
Author(s): Hønsi, Torstein (Highsoft Solutions AS)
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
- Highcharts implementation and architecture:
- Hopgood, Paul
- SVG-Editor:
Show AbstractSVG-Editor
An On-line SVG Only Editor
Papertopic: Authoring Tools and Techniques
Format: regular presentation (30 minutes)
Web technologies used: SVG
Keywords: SVG, Edit, Animation
Author(s): Hopgood, Paul
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/)
Links:
Files:
Hide Abstract
- SVG-Editor:
- Hunt, Sarah (Adobe Systems, Adobe Edge Product Manager)
- The Future of HTML5 Motion Design:
Show AbstractThe Future of HTML5 Motion Design
Papertopic: Improving Standards (e.g. SVG, CSS, HTML5, Canvas, WebGL, declarative 3D)
Format: regular presentation (30 minutes)
Web technologies used: CSS-general,ECMAScript
Keywords: HTML5
Author(s): Hunt, Sarah (Adobe Systems)
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.
Links:
Hide Abstract
- The Future of HTML5 Motion Design:
- Jansen, Marc (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.
- WebGIS with vector data using OpenLayers and GeoExt:
Show AbstractWebGIS with vector data using OpenLayers and GeoExt
Papertopic: Web-GIS and Web-Mapping
Format: regular presentation (30 minutes)
Web technologies used: ECMAScript,SVG,WebGL
Javascript frameworks: OpenLayers, GeoExt
Other technologies used: VML
Author(s): Jansen, Marc (terrestris GmbH & Co. KG)
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
- WebGIS with vector data using OpenLayers and GeoExt:
- Johnson, Ian (Mainstem Collective, Data Visualization Consultant)
Show Biography
Bachelors in Applied Math and Chinese, Masters in Scientific Computing. Pixel flipper since the age of 16.
- Tributary: See What You Get:
Show AbstractTributary: See What You Get
Papertopic: Authoring Tools and Techniques
Format: regular presentation (30 minutes)
Web technologies used: CSS-Canvas,ECMAScript,SVG
Javascript frameworks: d3.js, tributary
Keywords: d3.js, svg, live coding
Author(s): Johnson, Ian (Mainstem Collective)
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.
Links:
Hide Abstract
- Tributary: See What You Get:
- Köbben, Barend (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).
- Using the Open Web Platform for Thematic Mapping in a Geo-Webservices Environment:
Show AbstractUsing the Open Web Platform for Thematic Mapping in a Geo-Webservices Environment
Papertopic: Web-GIS and Web-Mapping
Format: regular presentation (30 minutes)
Web technologies used: ECMAScript,SVG
Javascript frameworks: D3
Other technologies used: Geo-webservices (WFS)
Keywords: Web-based cartography, Webservices, Open Web Platform
Author(s): Köbben, Barend (University of Twente – Faculty of Geo–Information Science and Earth Observation (ITC))
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.
Files:
Hide Abstract
- Using the Open Web Platform for Thematic Mapping in a Geo-Webservices Environment:
- Konno, Tomoaki
- Introduction of SVG Map Platform and its Application:
Show AbstractIntroduction of SVG Map Platform and its Application
Papertopic: Improving Standards (e.g. SVG, CSS, HTML5, Canvas, WebGL, declarative 3D)
Format: lightning talk
Web technologies used:
Author(s): Konno, Tomoaki and Satoru Takagi (KDDI)
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
- Introduction of SVG Map Platform and its Application:
- Lang, Ruth (uismedia, CEO)
- Mappetizer Web Mapping Application goes Mobile:
Show AbstractMappetizer Web Mapping Application goes Mobile
Papertopic: Web-GIS and Web-Mapping
Format: regular presentation (30 minutes)
Web technologies used: ECMAScript,SVG,XML
Javascript frameworks: Dojo Toolkit
Other technologies used: Web services
Keywords: web-mapping, smartphone, mobile, geolocation
Author(s): Lang, Ruth (uismedia) and Armin Müller (uismedia)
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.
Links:
Hide Abstract
- Mappetizer Web Mapping Application goes Mobile:
- Lavrovsky, Oleg (Swiss Federal Institute of Technology, Software Engineer)
- Web graphics from research to apps to action:
Show AbstractWeb graphics from research to apps to action
Papertopic: Web Graphics in the Real World (production examples)
Format: regular presentation (30 minutes)
Web technologies used: CSS-general,CSS-Canvas,ECMAScript,SVG,XML
Javascript frameworks: Raphael.js, THREE.js, OpenLayers, jQuery
Author(s): Lavrovsky, Oleg (Swiss Federal Institute of Technology)
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.
Links:
Hide Abstract
- Web graphics from research to apps to action:
- Mufatti, Alex
- youSCADA©, SCADA as a Service: Monitoring and Controlling Devices and Objects via Cloud:
Show AbstractyouSCADA©, SCADA as a Service: Monitoring and Controlling Devices and Objects via Cloud
How SVG, WebSockets and Cloud can be adopted in Industrial Automation (and not only...)
Papertopic: Web Graphics in the Real World (production examples)
Format: regular presentation (30 minutes)
Web technologies used: ECMAScript,HTML5-Video,SVG
Other technologies used: WebSockets, Cloud, Node.js
Author(s): Roggero, Giulio (Intre Srl), Ballabio, Carlo, Mufatti, Alex and Gianni Bombelli (Intre S.r.l.)
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
- youSCADA©, SCADA as a Service: Monitoring and Controlling Devices and Objects via Cloud:
- Müller, Armin (uismedia)
- Mappetizer Web Mapping Application goes Mobile:
Show AbstractMappetizer Web Mapping Application goes Mobile
Papertopic: Web-GIS and Web-Mapping
Format: regular presentation (30 minutes)
Web technologies used: ECMAScript,SVG,XML
Javascript frameworks: Dojo Toolkit
Other technologies used: Web services
Keywords: web-mapping, smartphone, mobile, geolocation
Author(s): Lang, Ruth (uismedia) and Armin Müller (uismedia)
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.
Links:
Hide Abstract
- Mappetizer Web Mapping Application goes Mobile:
- Nebiker, Stephan (FHNW University of Applied Sciences Northwestern Switzerland, Professor)
- Processing and Rendering Massive 3D Geospatial Environments using WebGL:
Show AbstractProcessing and Rendering Massive 3D Geospatial Environments using WebGL
The examples of OpenWebGlobe and SmartMobileMapping
Papertopic: 3D Visualization
Format: regular presentation (30 minutes)
Web technologies used: CSS-general,HTML5-Video,WebGL
Javascript frameworks: jquery
Other technologies used: gdal, postgis
Keywords: virtual globes, mobile mapping, geospatial webservices, cloud computing, webgl, glsl, sdk, geodata processing, multiprocess rendering, stereovision
Author(s): Wüest, Robert (University of Applied Sciences Northwestern Switzerland), Christen, Martin, Nebiker, Stephan (FHNW University of Applied Sciences Northwestern Switzerland) and Hannes Eugster
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.
Links:
Hide Abstract
- Processing and Rendering Massive 3D Geospatial Environments using WebGL:
- Neumann, Andreas
- The Graphical Web 2013 and Beyond:
Show AbstractThe Graphical Web 2013 and Beyond
Papertopic: Panel Discussions
Format: regular presentation (30 minutes)
Web technologies used: CSS-general,CSS-transforms,CSS-transitions,CSS-animations,ECMAScript,HTML5-Video,HTML5-Audio,SVG,WebGL,XML
Author(s): Dailey, David (Slippery Rock University) and Andreas Neumann
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
- The Graphical Web 2013 and Beyond:
- Neutze, Michael
Show Biography
Michael is known to the SVG community for the animated population pyramids that he developed with the National Statistical Institutes of the UK and Germany. He currently explores the use of SVG on his own and maintains a related website for data visualisation at http://vis.uell.net where he is focused on mapping german election data. 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.
- SVG in eBooks – Packaging the Graphical Web for Offline Use:
Show AbstractSVG in eBooks – Packaging the Graphical Web for Offline Use
Resolution independence, interactivity and device diversity
Papertopic: Authoring Tools and Techniques
Format: regular presentation (30 minutes)
Web technologies used: CSS-general,ECMAScript,SVG
Keywords: eBook, epub, mobi, KF8, ibooks, Sigil, KindleGen, InDesign
Author(s): Neutze, Michael
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
- SVG in eBooks – Packaging the Graphical Web for Offline Use:
- Parshin, Alexander (RDC ScanEx, Software Developer)
- Satellite Images Color Adjustment Using HTML5 Technologies:
Show AbstractSatellite Images Color Adjustment Using HTML5 Technologies
Papertopic: Web-GIS and Web-Mapping
Format: regular presentation (30 minutes)
Web technologies used: CSS-Canvas,ECMAScript
Javascript frameworks: Leaflet library
Keywords: color adjustment, satellite images, canvas, html5
Author(s): Parshin, Alexander (RDC ScanEx)
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
- Satellite Images Color Adjustment Using HTML5 Technologies:
- Pridal, Petr (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.
- Georeferencer & WebGL Earth:
Show AbstractGeoreferencer & WebGL Earth
Visualization of scanned maps in a web browser
Papertopic: Web-GIS and Web-Mapping
Format: regular presentation (30 minutes)
Web technologies used: CSS-general,CSS-transforms,ECMAScript,SVG,WebGL
Javascript frameworks: CSS-Animation
Author(s): Pridal, Petr (Klokan Technologies GmbH)
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).
Links:
Hide Abstract
- Georeferencer & WebGL Earth:
- Quint, Julien (IGEL Co., Ltd., Web Interaction Expert)
- Bender: A Declarative, Dynamic Framework for Web Application User Interfaces:
Show AbstractBender: A Declarative, Dynamic Framework for Web Application User Interfaces
Papertopic: GUI frameworks for Web Applications
Format: regular presentation (30 minutes)
Web technologies used: ECMAScript,SVG,XML
Author(s): Quint, Julien (IGEL Co., Ltd.) and Takanari Hayama (IGEL Co.,Ltd.)
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.
Links:
Hide Abstract
- Bender: A Declarative, Dynamic Framework for Web Application User Interfaces:
- Reichel, Julien (SpinetiX)
- SpinetiX hardware SVG players and its applications to Digital Signage:
Show AbstractSpinetiX hardware SVG players and its applications to Digital Signage
Papertopic: Business Cases and Case Studies
Format: regular presentation (30 minutes)
Web technologies used: ECMAScript,HTML5-Video,SVG
Javascript frameworks: jQuery, jSignage
Other technologies used: iCalendar, WebDAV
Author(s): Reichel, Julien (SpinetiX)
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.
Links:
Hide Abstract
- SpinetiX hardware SVG players and its applications to Digital Signage:
- Reiss, Tobias (Uxebu, Software Developer)
Show Biography
http://uxebu.com/team/reiss.html
- BonsaiJS – A Graphics and Animation Library:
Show AbstractBonsaiJS – A Graphics and Animation Library
Previously known as Bikeshed
Papertopic: Animated Graphics
Format: regular presentation (30 minutes)
Web technologies used: CSS-general,CSS-transforms,CSS-transitions,CSS-animations,ECMAScript,HTML5-Video,SVG
Keywords: Flash, Bikeshed, HTML5
Author(s): Reiss, Tobias (Uxebu)
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.
Links:
Hide Abstract
- BonsaiJS – A Graphics and Animation Library:
- Ressler, Sandy (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.
- Web-based Declarative 3D Graphics for Anthropometry Visualization and Education:
Show AbstractWeb-based Declarative 3D Graphics for Anthropometry Visualization and Education
Papertopic: 3D Visualization
Format: short presentation (15 minutes)
Web technologies used: WebGL
Javascript frameworks: jQuery
Other technologies used: X3DOM
Keywords: anthropometry, x3dom, declarative 3D graphics
Author(s): Ressler, Sandy (National Institute of Standards and Technology)
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.
Links:
Hide Abstract
- Web-based Declarative 3D Graphics for Anthropometry Visualization and Education:
- Roggero, Giulio (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
- WebGL - Fashion buttons prototyping from 3D Design to Production:
Show AbstractWebGL - Fashion buttons prototyping from 3D Design to Production
Case study on how HTML5 have reduced the time-to-market in button prototyping
Papertopic: Business Cases and Case Studies
Format: regular presentation (30 minutes)
Web technologies used: WebGL
Keywords: webgl, case study, fashion, rapid prototyping
Author(s): Roggero, Giulio (Intre Srl), Ballabio, Carlo, Volpi, Claudio (Intré srl) and Fabio Ghislandi (Intré srl)
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
- WebGL - Fashion buttons prototyping from 3D Design to Production:
- Schulze, Dirk (Adobe Systems)
- Web Graphics Symbiosis:
Show AbstractWeb Graphics Symbiosis
Papertopic: Web Graphics in the Real World (production examples)
Format: regular presentation (30 minutes)
Web technologies used: CSS-general,CSS-transforms,CSS-transitions,CSS-animations,CSS-Canvas,ECMAScript,SVG,WebGL
Author(s): Schulze, Dirk (Adobe Systems)
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
- Web Graphics Symbiosis:
- Siemen, Stephan (European Centre for Medium-Range Weather Forecasts (ECMWF), Head Meteorological Visualisation Section)
- Generating interactive meteorological maps and graphs for the web:
Show AbstractGenerating interactive meteorological maps and graphs for the web
Papertopic: Web-GIS and Web-Mapping
Format: regular presentation (30 minutes)
Web technologies used: CSS-general,ECMAScript,SVG
Javascript frameworks: jQuery
Keywords: Meteorology, GIS, maps
Author(s): Siemen, Stephan (European Centre for Medium-Range Weather Forecasts (ECMWF))
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
- Generating interactive meteorological maps and graphs for the web:
- Takagi, Satoru (KDDI)
- SVG Map Panel:
Show AbstractSVG Map Panel
Papertopic: Improving Standards (e.g. SVG, CSS, HTML5, Canvas, WebGL, declarative 3D)
Format: panel discussion
Web technologies used: SVG
Author(s): Takagi, Satoru (KDDI)
Discussion on introducing an open SVG Map standard. See two short presentations before.
Hide Abstract
- Introduction of SVG Map Platform and its Application:
Show AbstractIntroduction of SVG Map Platform and its Application
Papertopic: Improving Standards (e.g. SVG, CSS, HTML5, Canvas, WebGL, declarative 3D)
Format: lightning talk
Web technologies used:
Author(s): Konno, Tomoaki and Satoru Takagi (KDDI)
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
- SVG Map Panel:
- Volpi, Claudio (Intré srl, Developer)
- WebGL - Fashion buttons prototyping from 3D Design to Production:
Show AbstractWebGL - Fashion buttons prototyping from 3D Design to Production
Case study on how HTML5 have reduced the time-to-market in button prototyping
Papertopic: Business Cases and Case Studies
Format: regular presentation (30 minutes)
Web technologies used: WebGL
Keywords: webgl, case study, fashion, rapid prototyping
Author(s): Roggero, Giulio (Intre Srl), Ballabio, Carlo, Volpi, Claudio (Intré srl) and Fabio Ghislandi (Intré srl)
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
- WebGL - Fashion buttons prototyping from 3D Design to Production:
- Weidman, Jake (Slippery Rock University, Student)
Show Biography
Undergraduate student at Slippery Rock University.
- Using Gravity to Navigate the Internet and other Graphs :
Show AbstractUsing Gravity to Navigate the Internet and other Graphs
Papertopic: Scientific Visualization
Format: regular presentation (30 minutes)
Web technologies used: ECMAScript,SVG
Author(s): Dailey, David (Slippery Rock University), Whitfield, Deborah (Slippery Rock University), Weidman, Jake (Slippery Rock University) and Grant Denmead (Slippery Rock University of Pennsylvania)
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
- Using Gravity to Navigate the Internet and other Graphs :
- Whitfield, Deborah (Slippery Rock University, Professor)
- Using Gravity to Navigate the Internet and other Graphs :
Show AbstractUsing Gravity to Navigate the Internet and other Graphs
Papertopic: Scientific Visualization
Format: regular presentation (30 minutes)
Web technologies used: ECMAScript,SVG
Author(s): Dailey, David (Slippery Rock University), Whitfield, Deborah (Slippery Rock University), Weidman, Jake (Slippery Rock University) and Grant Denmead (Slippery Rock University of Pennsylvania)
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
- Using Gravity to Navigate the Internet and other Graphs :
- Wüest, Robert (University of Applied Sciences Northwestern Switzerland, Research Associate)
- Processing and Rendering Massive 3D Geospatial Environments using WebGL:
Show AbstractProcessing and Rendering Massive 3D Geospatial Environments using WebGL
The examples of OpenWebGlobe and SmartMobileMapping
Papertopic: 3D Visualization
Format: regular presentation (30 minutes)
Web technologies used: CSS-general,HTML5-Video,WebGL
Javascript frameworks: jquery
Other technologies used: gdal, postgis
Keywords: virtual globes, mobile mapping, geospatial webservices, cloud computing, webgl, glsl, sdk, geodata processing, multiprocess rendering, stereovision
Author(s): Wüest, Robert (University of Applied Sciences Northwestern Switzerland), Christen, Martin, Nebiker, Stephan (FHNW University of Applied Sciences Northwestern Switzerland) and Hannes Eugster
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.
Links:
Hide Abstract
- Processing and Rendering Massive 3D Geospatial Environments using WebGL:
- Yıldırım, Alpan (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.
- Visualization of Soccer Statistics:
Show AbstractVisualization of Soccer Statistics
Decision Support System for Soccer Betting
Papertopic: Serverside Graphic Generators
Format: short presentation (15 minutes)
Web technologies used: ECMAScript,SVG
Keywords: multivariate, data, visualization, SVG, serverside, DOM, soccer, iddaa, decision, support
Author(s): Yıldırım, Alpan (Sabancı University), Akdeniz, Onur (Sabancı University) and Selim Balcisoy (Sabancı University)
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
- Visualization of Soccer Statistics:
- Zhang, Edward (Atlassian, Developer)
- Screenshot annotations in the browser:
Show AbstractScreenshot annotations in the browser
Papertopic: Business Cases and Case Studies
Format: regular presentation (30 minutes)
Web technologies used: CSS-Canvas,ECMAScript,SVG
Javascript frameworks: Raphaël 2.1.0, Simplify.js
Author(s): Zhang, Edward (Atlassian), Grunert, Ian (Atlassian) and Gilmore Davidson (Atlassian)
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.
Links:
Hide Abstract
- Screenshot annotations in the browser:
