canvas on SWiK

Drag and Drop without Drag and Drop

Wed, 03 Sep 2008 20:59:10 -0700

Mootools Mocha UI

Thu, 04 Sep 2008 13:01:13 -0700

Aflax: The Ajax Library for the Adobe Flash_ Platform

Wed, 03 Sep 2008 20:57:16 -0700

ExplorerCanvas

Wed, 03 Sep 2008 12:58:48 -0700

Drag and drop via sneaky Textarea hack

Wed, 03 Sep 2008 05:54:47 -0700

Ernest Delgado put together work from an earlier project, and the realization that textareas are native drop targets, to create Drag and Drop without Drag and Drop.

Something that I never realized before is that text areas are drop targets by default. Using this property alone (without registering drag events on the source elements), we can emulate drag and drop behavior of non-linked images between different documents.

Put together the layers, with canvas, and a hidden transparent text area, and you get the following architecture:

Then, check out the demo that allows you to drag between gadgets. Take images from the right hand magnet, and paste them onto the fridge!

Coverflow again…. with Canvas

Wed, 03 Sep 2008 05:54:47 -0700

For some reason, we like to implement Coverflow to see if the technology of choice is decent enough to do so. This latest version works with Canvas, and does a nice job of smoothly doing the animations at hand. All you have to do is:

PLAIN TEXT

JAVASCRIPT:

Coverflow.init(
[
{src: 'img/img-0-lo.jpg', label: {album: 'All That I Am', artist: 'Santana'}},
{src: 'img/img-1-lo.jpg', label: {album: 'August & Everything After', artist: 'Counting Crows'}},
{src: 'img/img-2-lo.jpg', label: {album: 'Back to Bedlam', artist: 'James Blunt'}},
{src: 'img/img-3-lo.jpg', label: {album: 'Carnival of Rust', artist: 'Poets of the Fall'}},
{src: 'img/img-4-lo.jpg', label: {album: 'Collision Course', artist: 'Linkin Park'}},
{src: 'img/img-5-lo.jpg', label: {album: 'Crossfade', artist: 'Crossfade'}},
{src: 'img/img-6-lo.jpg', label: {album: 'Dexter', artist: 'Rolfe Kent'}},
{src: 'img/img-7-lo.jpg', label: {album: 'Life for Rent', artist: 'Dido'}},
{src: 'img/img-8-lo.jpg', label: {album: 'Say I Am You', artist: 'The Weepies'}},
{src: 'img/img-9-lo.jpg', label: {album: 'Signs of Life', artist: 'Poets of the Fall'}},
{src: 'img/img-10-lo.jpg', label: {album: 'Viva la Vida', artist: 'Coldplay'}},
{src: 'img/img-11-lo.jpg', label: {album: 'We Were Here', artist: 'Joshua Radin'}}
],
{
createLabel: function(item)
{
return item.label.album +'<br />'+ item.label.artist;
},
onSelectCenter: function(item, id)
{
var img = new Image();
img.onload = function()
{
Lightbox.show(this.src, id);
};
img.src = item.src.replace('-lo.jpg', '-hi.jpg');
}
});

MochaUI - A web applications user interface library

Sun, 31 Aug 2008 19:59:21 -0700

Canvasを使ったフレームワーク。 mootools使用。

MooCanvas, MooTools-style excanvas

Thu, 28 Aug 2008 23:58:40 -0700

The State of SVG Browser Support + Using Flash for SVG in Internet Explorer

Thu, 28 Aug 2008 18:01:08 -0700

As part of the Open Web Advocacy work I've started with Dion and others at Google, one of my goals right now is to help increase awareness and support around doing 2-D/vector graphics on the open web. This includes tools such as the Canvas tag, SVG (Scalable Vector Graphics, an XML markup language for vector graphics), and open source cross-browser drawing toolkits such as Dojo GFX, ExplorerCanvas, and Raphael.

One of the big reasons for this is that 2-D drawing/vector graphics is the top requested feature by double the amount of other feature requests in the recent Open Ajax Alliance Browser Feature Wish List vote-off. As part of this effort I'm doing a bootcamp right now to come up to speed on the latest developments in both Canvas and SVG. I've been using Shelley Powers excellent Painting the Web book to find out the state of vector graphics on the web in 2008. During this education I've run across two interesting things.

First, I wanted to know what the status of SVG support is across the different browsers. I found Jeff Schiller's very complete SVG Test Suite results that are actively kept up to date:

SVG 1.1 became a W3C recommendation on January 13, 2003. Five years later, this page records my results of running various SVG implementations (web browsers and browser plugins) through the official SVG Test Suite. Last updated 2008-06-18.

A screenshot with some of the results:

SVG Test Results Against Browsers for SVG 1.1

Things are pretty good with Firefox 3, Safari 3, and the winner, Opera. There is a strong subset of SVG that can be used cross-browser with these. Of course, Internet Explorer is the limiting factor here, with a grand score of 0% for all tests:

Internet Explorer SVG Support

This means that for open web vector graphics to be realistic we need some kind of shim for Internet Explorer (Adobe used to have a browser plugin for IE that had very high quality, but its quite large and was end of lifed in 2007). Internet Explorer actually has an earlier vector graphics standard named VML (Vector Markup Language) that can be used to 'trick' it into having 2-D graphics support that is used by a number of open source toolkits. However, VML can run into some performance issues when you start to get into a large number of nodes and animation with the available open source drawing toolkits.

One natural avenue is to emulate SVG or other 2-D graphics on Internet Explorer using Flash. I had always heard about this possibility but recently found a small company actually doing it to good effect. They have not finished yet, but their demo is impressive:

SVG Render Using Flash

Here we are viewing the source of the SVG being rendered by this Flash:

SVG Renderer in Flash (View Source)

I emailed the developers to get some more information on this Flash-based renderer and they responded:

Our SVG viewer and editor is not open source. It will be part of the new InputDraw version and with some more features - like draw recognition - will be part of the new Comics Sketch site, so users can create advanced comics strips.

We are part of a small company in Lisbon, Portugal named inEvo that works with a lot of web development, rich interfaces and other areas like computer graphics and artificial intelligence.

While I respect the hard work it took inEvo to create this and their need to charge for it, it looks like using Flash to emulate SVG is a valid approach for Internet Explorer and it would be great to have something similar available open source. Just the basic viewer being available would make sense as open source and would probably even drive more business to them for their higher level tools; it looks like inEvo has created lots of cool things above this that make sense as being commercial-only, such as an SVG editor, drawing recognition, social comics creation and sharing site, etc.

Raphaël—JavaScript Library

Thu, 28 Aug 2008 18:00:55 -0700

User:cherry0082

Thu, 21 Aug 2008 21:48:49 -0700

Canvas Photo Printing – Momentz offers canvas photo printing, printing photos to canvas, photo printing paper and pictures to canvas.

Mozilla drags IE into the future with Canvas element plugin

Tue, 19 Aug 2008 18:03:23 -0700

Life is beautiful: ianime.js: iPhoneのCanvasにVector 描画させてみる

Tue, 19 Aug 2008 03:35:09 -0700

HTML5.JP - 次世代HTML標準 HTML5情報サイト

Tue, 19 Aug 2008 03:24:30 -0700

Canvas UnderLayer

Mon, 18 Aug 2008 02:06:03 -0700

DOJO Furniture Home

Thu, 14 Aug 2008 13:12:23 -0700

bomomo

Wed, 13 Aug 2008 20:04:31 -0700

Web Kit DOM Programming Topics: Using the Canvas

Wed, 13 Aug 2008 15:04:45 -0700

Canvas Painter

Sat, 09 Aug 2008 06:09:16 -0700

The future of HTML, Part 1: WHATWG

Fri, 25 Jul 2008 06:56:23 -0700

HTML 5

Fri, 25 Jul 2008 06:53:25 -0700

Coordinate Systems, Transformations and Units - SVG 1.1 - 20030114

Fri, 25 Jul 2008 06:53:25 -0700

John Resig - Javascript Sparklines Library

Wed, 23 Jul 2008 10:52:28 -0700

XRAY :: for web developers

Tue, 22 Jul 2008 16:51:31 -0700

MooWheel: a javascript connections visualization library

Tue, 22 Jul 2008 13:54:48 -0700

Mootools/Charts

Mon, 21 Jul 2008 09:46:22 -0700

Mocha UI - A Canvas User Interface Framework

Mon, 21 Jul 2008 08:46:42 -0700

mocha-ui - Google Code

Thu, 17 Jul 2008 09:54:32 -0700

Defender of the Favicon

Thu, 17 Jul 2008 06:46:56 -0700

Mathieu Henri saw Scott Schiller's generated favicons VU meter and wanted to "push the concept of generated favicons further and pack a thrilling retro shooter in 16×16 pixels using JavaScript, canvas and data: URIs."

Wow. He went and did it. The entire game runs in the favicon!

DEFENDER of the favicon was done in 3 nights, from start to finish. Each frame of the game is generated on the fly in JavaScript into a 16×16 canvas element, then converted to a 32bits PNG image and used in place of the favicon. The core of the game act as a state machine. Notice a few details such as the pause when this window is not focused, and the resuming and game over transitions.

Obviously since this little game makes use of canvas and the toDataURL method, it does not work in Internet Explorer, and Safari does not seem to support PNG favicons. Prefer Opera or FireFox, although FireFox 3 suffers from garbage collection hick ups when playing in the favicon.

The game logic isn't really complex but remains true to the original Defender and provides enough action for 16×16 pixels. The original game mechanics would make Defender of the favicon insanely difficult. Therefore a few adjustments were done : none of the enemies fire at you, your Defender got upgraded with a shield, and finally the Landers do not mutate into unstoppable war machines after abducting a humanoid but wander in your general direction.

HTML5.JP - 次世代HTML標準 HTML5情報サイト

Tue, 15 Jul 2008 22:50:27 -0700