drag Archives - SchoolofWeb.org

Interview with Sebastian Dorn, winner of the Drag and Drop Dev Derby

Sebastian Dorn won the Drag and Drop Dev Derby with Pete’s Adventure, his wonderful web-based interactive story. Recently, I had the chance to learn more about Seba: his work, his ambitions, and his thoughts on the future of web development.

The interview

How did you become interested in web development?

I think it was around the time I was in middle school. My father read an
IT magazine and since I was at least a little bit interested, I flicked
through it as well. There was a series in it about building web sites
and I thought “I want to try that, building my own site”.

So I built my first frames-using, table-layouted, GIF-plastered web
sites–every atrocity you can imagine and some more–using HTML and
CSS, but without knowing that something like CSS classes existed. Some
time later I found a free host and put my “Hello, this is me” site
online. Some years later I became interested in blogging, so I started
learning PHP and MySQL to write my own CMS.

Can you tell us a little about how Pete’s Adventure works?

My goal was to show some other aspect of Drag&Drop in each level:
Reading meta data like the file size from a dropped file, displaying a
dropped image or dragging an HTML element from inside the page around.
There isn’t really anything special in the code. Each level has its own
JS file with functions to prepare the stage by adding HTML and event
listeners.

What was your biggest challenge in developing Pete’s Adventure?

Not really anything that had to do with coding. At first, I wanted to
use better drawings. But some horribly misshapen Petes later I gave up
on that and went ahead with the pixelated look you can see now.

Then there is the sound and music. I probably sat two hours at the piano
keyboard, trying to come up with melodies which could be easily looped.
This was the first time since the recorder lessons in middle school that
I tried to compose.

Ah, well, I got a little… agitated while trying to get the drop part of
Drag&Drop to work for the level where you drag the slimey note to Pete.
It only works in Firefox when you give the dragged element some transfer
data, for example an empty string.

What makes the web an exciting platform for you?

How easy it is to create and share. Even without a server backend you
can build exciting demos in HTML/CSS/JS and then just upload it
somewhere, toss a friend the link and they can see it. To view it, other
people only need an up-to-date browser–no plugins, no worrying about
OS compatibility.

What new web technologies are you most excited about?

Basically everything that helps making plugins obsolete.

I wonder if there will be more 3D in-browser rendering with WebGL in the
future. Animated, interactive films? Games? CAD software?

Firefox OS and building apps only with JavaScript sounds interesting,
too. I’m not really that much into mobile development at the moment, but
I’m interested in how that will develop. Will it become a really good
alternative to iOS/Android? Or will it end as obscure toy for enthusiasts?

If you could change one thing about the web, what would it be?

Making the Internet immune to large scale blocking and censoring. No
government should be able to cut off the communication channels of its
people.

On a less political note: I would be very pleased to see the same audio,
video and image formats supported in every browser. Finding out that
WebKit doesn’t support APNG was as a surprise for me.

Do you have any advice for other ambitious web developers?

Learning a new language or feature thereof works better, if you put some
motivation behind it. Maybe you can build an useful browser extension
with it, or some fascinating demo to show off. Make it fun!

For other great advice I’d like to quote Jake from Adventure Time:
“Sucking at something is the first step to becoming sorta good at
something.”

Drag and Drop API [HTML5]

By SchoolofWeb.org | March 31, 2013 | Third Party Videos - HTML5 | No Comments |

HTML5 Tutorial – 46 – Finishing the Drag and Drop Program!

By SchoolofWeb.org | September 15, 2012 | Third Party Videos - HTML5 | No Comments |

HTML5 Tutorial – 45 – Working on the Drag and Drop Program

By SchoolofWeb.org | August 28, 2012 | Third Party Videos - HTML5 | No Comments |

HTML5 Tutorial – 44 – Drag and Drop

By SchoolofWeb.org | June 5, 2012 | Third Party Videos - HTML5 | No Comments |

Creating thumbnails with drag and drop and HTML5 canvas

HTML5 Canvas is a very cool feature. Seemingly just an opportunity to paint inside the browser with a very low-level API you can use it to heavily convert and change image and video content in the document. Today, let’s take a quick look at how you can use Canvas and the FileReader API to create thumbnails from images dropped into a browser document.

The final code is available on GitHub and you can see an online demo here. There is also a screencast available on YouTube:

Step 1: Getting the files into the browser

The first step to resize images in the browser is to somehow get them. For this, we can just add an element in the page and assign drag and drop event handlers to it:

s.addEventListener( 'dragover', function ( evt ) {
  evt.preventDefault();
}, false );
s.addEventListener( 'drop', getfiles, false );

Notice that we only prevent the default behaviour when we drag things over the element. This is to prevent the browser from just showing the images when we drag them in.

The getfiles() function then does the hard work of reading all the files in and sending them on to the functions that do the resizing and image generation:

function getfiles( ev ) {
  var files = ev.dataTransfer.files;
  if ( files.length > 0 ) {
    var i = files.length;
    while ( i-- ) {
      var file = files[ i ];
      if ( file.type.indexOf( 'image' ) === -1 ) { continue; }
      var reader = new FileReader();
      reader.readAsDataURL( file );
      reader.onload = function ( ev ) {
        var img = new Image();
        img.src = ev.target.result;
        img.onload = function() {
        imagetocanvas( this, thumbwidth, thumbheight, crop, background );
        };
      };
    }
  }
  ev.preventDefault();
};

The drop event gives us a property called dataTransfer which contains a list of all the files that have been dropped. We make sure that there was at least one file in the drop and then iterate over them.

If the file type was not an image (or in other words the type property of the file does not contain the string “image”) we don’t do anything with the file and continue the loop.

If the file is an image we instantiate a new FileReader and tell it to read the file as a Data URL. When the reader successfully loaded the file it fires its onload handler.

In this handler we create a new image and set its src attribute to the result of the file transfer. We then send this image to the imagetocanvas() function with the parameters to resize (in the demo these come from the form):

function imagetocanvas( img, thumbwidth, thumbheight, crop, background ) {
  c.width = thumbwidth;
  c.height = thumbheight;
  var dimensions = resize( img.width, img.height, thumbwidth, thumbheight );
  if ( crop ) {
    c.width = dimensions.w;
    c.height = dimensions.h;
    dimensions.x = 0;
    dimensions.y = 0;
  }
  if ( background !== 'transparent' ) {
    cx.fillStyle = background;
    cx.fillRect ( 0, 0, thumbwidth, thumbheight );
  }
  cx.drawImage( 
    img, dimensions.x, dimensions.y, dimensions.w, dimensions.h 
  );
  addtothumbslist( jpeg, quality );
};

This function gets the desired thumbnail size and resizes the canvas to these dimensions. This has the added benefit of wiping the canvas so that no old image data would be added to our thumbnail. We then resize the image to fit into the thumbnail using a resize() function. You can see for yourself what this one does in the source code, it just means the image gets resized to fit. The function returns an object with the width and the height of the new image and the x and y position where it should be positioned onto the canvas.

If we don’t want the full-size thumbnail but instead crop it we resize the canvas accordingly and reset x and y to 0.

If the user requested a background we fill the canvas with the colour. After that we put the image on the canvas with the x and y coordinates and the new width and height.

This takes care of creating a new thumbnail on the canvas, but we haven’t got it as an image in the document yet. To this end, we call addtothumbslist():

function addtothumbslist( jpeg, quality ) {
  var thumb = new Image(),
      url = jpeg ? c.toDataURL( 'image/jpeg' , quality ) : c.toDataURL();
  thumb.src = url;
  thumb.title = Math.round( url.length / 1000 * 100 ) / 100 + ' KB';
  o.appendChild( thumb );
};

This one creates a new image and checks if the users wanted a JPG or PNG image to be created. PNG images tend to be better quality but also bigger in file size. If a JPG was requested we call the canvas’ toDataURL() method with two parameters: the requested JPEG mime type and the quality of the image (ranging between 0 and 1 with 1 being best quality). If a PNG is wanted, we can just call toDataURL() without any parameters as this is the default.

We set the src of the image to the generated url string and add a title showing the size of the image in KB (rounded to two decimals). All that is left then is to add the thumb to the output element on the page.

That’s it, you can now drag and drop images into the browser to generate thumbnails. Right now, we can only save them one at a time (or if you have some download add-ons all at once). Would be fun to add Zip.js to the mix to offer them as a zip. I dare you! 🙂