Thursday, February 16, 2012

Simple Image Gallery in Dart

‹prev | My Chain | next›

Adam Smith has a very nice canvas-based image gallery written in Dart (may take a while to load) up on the githubs. I am still undecided about including SVG / canvas stuff in Dart for Hipsters, but I do think a chapter on animation is in order. I have already experimented with simple animations in Dart, this seems like a good chance to do something a little more interesting.

I start with a list of images:
var images = """
// ...
In my main entry point, I split that string list into an array and create a queue:
main() {
  var q = new Queue.from(images.split("\n"));

The showNext() function can then pop the first element off the stack, wait for a period of time, and then repeat:
showNext(queue, [last_el]) {
  if (last_el != null) {

  var el = new Element.html("""<img src="images/${queue.removeFirst()}"/>""");

  if (!queue.isEmpty()) {
    window.setTimeout(() {showNext(queue, last_el: el);}, 1500);
And that is enough to get started:

Update: I had a heck of a time getting an animation transition working with this. I factored adding and removing the element out into functions that add/remove with animation:
showNext(queue, [last_el]) {

  var el = new Element.html("""<img src="images/${queue.removeFirst()}"/>""");

  if (!queue.isEmpty()) {
    window.setTimeout(() {showNext(queue, last_el: el);}, 5*1000);
The remove effect worked fine:
removeEl(el) {
  if (el == null) return; = 'opacity 1s ease-in-out'; = "0";
  window.setTimeout(() {el.remove();}, 1000);
I am just doing a simple "ease-in-out" (start and end slow) animation. The problem is the addEl() animation:
addEl(el) { = 'absolute'; = "0";
  document.query('#gallery').nodes.add(el); = 'opacity 1s ease-in'; = "1";
The problem? There is no animation. Instead the element displays immediately. Since it is the newly added element, it immediately covers up the old element. After way too much fiddling, I find that a timeout, even of only a couple of milliseconds allows the transition to work:
addEl(el) { = 'absolute'; = "0";

  window.setTimeout(() { = 'opacity 1s ease-in'; = "1";
  }, 2);
I lack a good explanation for this. Perhaps it has something to do with adding nodes, but setting the style on elements.

Day #298


  1. Wow this image gallery is great! I need to update mine to be a bit more dynamic and friendly. Maybe something with some NoSQL store. Prob thinking of using the http.dart to run a dart http server and then have it communicate with couchdb but for storing images. The server side shouldn't be to hard to piece together

    1. Ooh! I'll be eager to see how that works. I don't anticipate playing much with server side Dart, but maybe I will if your stuff goes well :D