WWDC 2007 WebKit SVG Demos

Following an invitation from Apple, Dean Jackson and myself joined the crowds of developers who participated at WWDC 2007 to co-present two sessions about the latest advanced of the WebKit Web rendering engine, focusing first on vector graphics and then on rich media. Unfortunately, all the contents of the sessions were under the WWDC NDA and we won't be able to discuss the exact points that were delivered to the audience. We can however share the demos that we presented there as these do not require any specific software covered by the NDA, indeed they'll run just fine in a recent WebKit nightly or even the recent Safari 3 beta for Mac OS X. The demos presented were:

• A scalable search box user interface widget combining XHTML, CSS and SVG
• Animated graphs generated from SVG.org Google Analytics data feeds using AJAX and SVG
• Rich media Web interface for a Delicious Library database using XHTML, CSS and SVG
• A simple set of introductory demos to the <canvas> APIs

We will be putting up more information, such as screencasts and cleaned-up code, in the future but in the spirit of getting something out there in a timely manner, you can now get most of the demos wrapped in a single archive with all the code and various data resources. The code is covered by the MIT license, for more details see the LICENSE.txt file in the package. Also, make sure you read the README.txt as some demos require you to do a tiny bit of work to get them to work.

Feel free to use the commenting system to share any issue that you may have with this code, Dean and I will make sure anyone who wants to check it out actually gets the code running. Shake and bake!

Speaking Engagements

Following January's Mobile SVG extravaganza in New York City, I'll be speaking about SVG a few times in the coming months. First off, I'm flying out to Sydney to attend the first W3C SVG WG meeting of 2007, and incidentally speak briefly about Rich Mobile Experiences with SVG at MoMo Sydney, where some fellow Working Group members (Nandini Ramani from Sun, Andrew Emmons from BitFlash and Andrew Sledd from Ikivo) should be lending a hand presenting some very nice services that have been shipping in the last few weeks. Fast forwarding in May, I will be presenting about a session called Putting SVG and CDF to Use in an Internet Desktop Application at XTech 2007, the European XML Conference, held in Paris, my hometown. This talk will be about our experience with front-end XML languages in Joost:

The goal of this talk is to present how client-side XML technologies (SVG, (X)HTML, XUL, CSS, RDF, DOM and ECMAScript) were put to use to create a killer, multi-platform desktop application built around the Internet allowing television-watching via peer-to-peer networks: The Venice Project. The main points of this presentation will be to illustrate how the various XML grammars were put to use for different tasks, all within a unified XML presentation layer:

• SVG, DOM and ECMAScript for finely tuned, animated and highly interactive user interfaces that scale gracefully to any resolution and screen aspect ratio
• HTML, XUL and CSS for flexible control of the display of text content coming from remote data sources
• RDF, SPARQL and remote requests for data retrieval

The common thread within this talk will be to show as well that this technology mix is directly applicable within browser-based Web 2.0 applications as well.

There is another amazing event at which I'll be appearing in June, but it's too early to give out specifics, so I'll save that for a future post.

UPDATE: The MoMo Sydney website has a wrap-up of the event with pictures.

Rich Mobile Experiences with SVG Series

Monday next week, MobileMonday NY will host the first event of what I hope will be a long-lasting Rich Mobile Experiences with SVG series. I have pointed out before that I think initiatives promoting Mobile SVG to smaller companies and eager individuals are still somewhat lacking. This is what I hope will be a way to spread the word throughout the world about Mobile SVG. The point of this series of events is to go to all the major cities around the world where a significant mobile community is established, and have a lineup of speakers, putting forward locals, that will give concrete examples of how they make use of Mobile SVG for live mobile services and applications, but also highlight the next evolutions of this technology. I want first and foremost for these events to give attendees pragmatic information that they will be able to put to use straight away.

So for our New York event next week on Monday January 29th at the Samsung Experience, for which you have to register for free, we have put together the following great lineup including browser makers (Opera), SVG viewer vendors (BitFlash and Ikivo), authoring tool makers (Hyperion, Ikivo, QUALCOMM), developer tool providers (Sun), mobile services creators (Ikivo, Hyperion, BitFlash and Vodafone) and a major carrier (Vodafone). The goal here is to show attendees the diversity of the Mobile SVG offering, and the full lineup is as follows below. Hope to see some of you in New York next week, there will even be some free authoring licenses to win at the end of the event, courtesy of Ikivo and Hyperion!

QUALCOMM’S SVG Solution
Brent Sammons, Product Manager, QUALCOMM

Learn about QUALCOMM’s SVG solution, how to make use of SVG within the CMX® file format, and about QUALCOMM’s developer and OEM support activities for SVG.

Combining the Power of Java ME and SVG: Developing JSR 226 Applications Using the NetBeans IDE
Brian Leonard, Java TechnologyEvangelist, Sun Microsystems

This presentation will cover the advantages of combining the full functionality of the Java ME platform, with access to all the phone functionality provided by the Mobile Services Architecture set of APIs, with rich user interfaces based on SVG Tiny. The talk will include demonstrations of the support for developing such applications using the NetBeans Mobility Pack and will include demonstrations of JSR 226 applications.

Rich Media Comes Alive With Mobile SVG
Brad Sipes, CTO, Ikivo

2007 is poised to be the year when widespread availability of rich mobile multimedia experiences becomes a reality and not just a marketing exercise. Deployment of mobile services based on music, video on demand, live TV, etc. are now occurring at an accelerating rate introducing consumers to a new way of interacting with a world of information and entertainment by allowing them to do so without sacrificing mobility. Ultimate success or failure depends on delivering a quality experience in a timely manner. With its inherent open standards based eco-system and functional advantages such as true vector scalability, advanced graphics and OTA logic and UI updates, Mobile SVG provides the perfect platform for enabling operators and service providers to realize the dream of brining the promise of rich media to mobile.

SVG - Going Everywhere With the Web
Charles McCathieNevile, Chief Standards Officer, Opera

This presentation will present SVG as a format that can be applied everywhere, helping to ensure that the power of the web can be offered on all devices.

Growing the Ecosystem, Evolving the Web
Daniel Appelquist, Senior Technology Strategist, Vodafone

Why is a British phone company so excited about graphical user experiences? At Vodafone, we envision a future where the Web is accessed from the phone as much if not more than it is accessed from a PC. Indeed, in some parts of the world, this is already true. We’re working on a number of initiatives and standards efforts to help grow this mobile Web ecosystem. However, the Web is also evolving and becoming a dynamic application platform. What will this intersection of Web 2.0 and the Mobile Web mean both to the users and developers of Web applications?

SVG Tiny Solutions to Empower the Mobile Professional
Don Liberty, Director of Business Development, BitFlash

With more than 160 Million SVG-enabled mobile devices on the market today, combined with the new and powerful feature set offered by the SVG tiny 1.2 specification, mobile solution providers are beginning to offer innovative SVG-based applications. This presentation will touch on productivity applications and use cases targeted at the mobile business professional.

Accessing and Displaying Data on a Mobile Device Using SVG
Marc Verstaen, Senior Director Software Development, Hyperion Solutions

Developing custom applications for the corporate world on mobile devices is often considered as a very difficult task. Applications need to be adapted for each device, results is most the time not attractive at all and impact usability. Using SVG-T 1.2, some basic AJAX concepts and the Mobile Designer authoring tool can solve this problem.

SVG Screen Savers in S60 with Carbide.ui

Forum Nokia, Nokia's ultimate resource for developers, published today a video tutorial showing how to create screen savers for S60 3.0 Feature Pack 1 devices using their Carbide.ui user interface customization tool. This is a great example of the kind of simple tutorials that people need to see to understand what can be done concretely with a versatile technology such as Mobile SVG.

The Venice Project is Now Joost!

Today was a big day at work as the code-name we operated under for a year now, The Venice Project, was put to rest for the official brand name that we will be using from now on: Joost! This does not mean that we're quite ready to let the cat entirely out of the bag about our "TV meets the Web" venture: we are still in a closed, invite-only beta program for a while. However, to celebrate on this auspicious day, I will send an invite to the first few people who drop a comment here with their first name, last name and email address. Also, now that we have reached a more public level, I will try to post about some of the cool things that we are doing with SVG and other sweet XML technologies in the client application, which is the part of the application I work on.

Sorry, no more invites for the moment.

Logging In and Out of Adium, iChat and Skype using AppleScript

Even though I'd rather not, I use not one, not two but three instant messaging applications on my main machine: Adium, iChat and Skype. While Adium allows to connect to almost all IM networks in a slick little interface that feels right at home on Mac OS X, iChat has some unique features going for it, for instance Bonjour as well as audio and video chat, and Skype of course is the only app that can run Skype. Besides, everyone at work uses Skype, so I just have to have it running at all time. Using all three together it not a big problem to me, at and even less of a problem since I wrote two little pieces of AppleScript that allow me to connect and disconnect from all the applications using a command-line scripts. Here are the scripts, both wrapped in an executable (chmod +x) script called either online or offline using the osascript command.

Going offline:

on IsSkypeRunning()
  tell application "System Events" to (name of processes) contains "Skype"
end IsSkypeRunning

on IsAdiumRunning()
  tell application "System Events" to (name of processes) contains "Adium"
end IsAdiumRunning

if IsSkypeRunning() then
  tell application "Skype"
    send command "SET USERSTATUS OFFLINE" script name "Make Skype go offline"
  end tell
end if

tell application "iChat"
  log out
end tell

if IsAdiumRunning() then
  tell application "Adium" to disconnect every account
end if

Going online:

on IsSkypeRunning()
  tell application "System Events" to (name of processes) contains "Skype"
end IsSkypeRunning

on IsAdiumRunning()
  tell application "System Events" to (name of processes) contains "Adium"
end IsAdiumRunning

if IsSkypeRunning() then
  tell application "Skype"
    send command "SET USERSTATUS ONLINE" script name "Make Skype go online"
  end tell
end if

tell application "iChat"
  log in
end tell

if IsAdiumRunning() then
  tell application "Adium" to connect every account
end if

Getting an SVG Element's Full Bounding Box

Getting the fully-transformed bounding box of a given SVG element is something quite handy and not given for free by the SVG DOM right now. However, the SVG DOM provides all the required foundations to compute such a bounding box, by providing the SVGLocatable::getBBox(), SVGLocatable::getScreenCTM() and SVGPoint::matrixTransform() methods mostly. So, with no further ado, here's the code to a utility getScreenBBox(element) function:

function getScreenBBox (element) {

  // macro to create an SVGPoint object
  function createPoint (x, y) {
    var point = document.documentElement.createSVGPoint();
    point.x = x;
    point.y = y;
    return point;
  }

  // macro to create an SVGRect object
  function createRect (x, y, width, height) {
    var rect = document.documentElement.createSVGRect();
    rect.x = x;
    rect.y = y;
    rect.width = width;
    rect.height = height;
    return rect;
  }

  // get the complete transformation matrix
  var matrix = element.getScreenCTM();
  // get the bounding box of the target element
  var box = element.getBBox();

  // create an array of SVGPoints for each corner
  // of the bounding box and update their location
  // with the transform matrix
  var corners = [];
  var point = createPoint(box.x, box.y);
  corners.push( point.matrixTransform(matrix) );
  point.x = box.x + box.width;
  point.y = box.y;
  corners.push( point.matrixTransform(matrix) );
  point.x = box.x + box.width;
  point.y = box.y + box.height;
  corners.push( point.matrixTransform(matrix) );
  point.x = box.x;
  point.y = box.y + box.height;
  corners.push( point.matrixTransform(matrix) );
  var max = createPoint(corners[0].x, corners[0].y);
  var min = createPoint(corners[0].x, corners[0].y);

  // identify the new corner coordinates of the
  // fully transformed bounding box
  for (var i = 1; i < corners.length; i++) {
    var x = corners[i].x;
    var y = corners[i].y;
    if (x < min.x) {
      min.x = x;
    }
    else if (x > max.x) {
      max.x = x;
    }
    if (y < min.y) {
      min.y = y;
    }
    else if (y > max.y) {
      max.y = y;
    }
  }
  
  // return the bounding box as an SVGRect object
  return createRect(min.x, min.y, max.x - min.x, max.y - min.y);
}