Today I was disappointed discovering that this bundle is no longer working on Textmate 2, so I forked the original repository and made the necessary changes to bring back to work this bundle.

You can install with this simple instructions:

mkdir -p ~/Library/Application\ Support/Avian/Pristine\ Copy
cd ~/Library/Application\ Support/Avian/Pristine\ Copy/
git clone -b textmate-2 https://github.com/sandropaganotti/copy-with-style-tmbundle.git "Copy with Style.tmbundle"

To make this work remember to switch Textmate 2 chosen theme at least once in order to make the necessary preference be saved in .plist file (it’s still in alpha .

While working on a new visualization algorithm I discovered how easy it is to make mobile browsers crash trying to display a relative small amount of images.  I’ve used an IPad 1 with IOs 5 for my tests, so with other devices the results may vary but I think the point is the same, there are two main problems while handling a lot of images from a mobile browser:

Loading rate:

If I load this simple javascript code in my IPad mobile safari just crash, this is because (imho) the device is not able to handle such a big image loading rate and goes into some form of buffer overflow.

Image quantity:

Using the same image (notice how in the previous example I’ve appended a random number after each image URL in order to force its download) I was able to hit another limit, the maximum number of images a mobile device can display simultaneously, this code which tries to print 500 images made my mobile browser freeze:

A workaround:

I’ve managed to load and show thousands of images using canvas, in the following example each image is loaded, printed on canvas and the discarded, also the number of concurrent loads is limited to avoid browser crash, this example uses 10000 images but I think higher image quantities can be easily reached:

Some refinements:

It seems that mobile Safari cannot handle canvas bigger than a certain value (try this), to handle this problem one solution could be using the ‘toDataUrl‘ method when the canvas is full of pics in order to extract a screenshot. Then this screnneshot can be added to the page before the canvas so the canvas can be cleaned and reused for the upcoming pics.

To create the view I used Processing.js, which is very easy and simple to work with. Here’s a screenshot of the completed application:

The application is also featured in Processing.js exhibition page and a guide (in italian) is undergoing with all the technical details about its implementation.

Here’s an example:

input:required + label:after {
  content: ' *';
  color: black;
}

By this way you are able to dynamically append the classic ‘*’ to the labels that belongs to input tags with the required flag. Obviously you have to put the label after the input tag but then you can revert this structure by using some CSS float instructions.

Here’s the running example:

I used some of the amazing CSS 3D transformations to archieve this effect under WebKit based browsers. Here’s a snippet from the page:

 
  #container{
     margin: 0 auto;
     width: 100%;
     height: 90%;
     max-width: 1024px;
     -webkit-transform-style: preserve-3d;
     -webkit-perspective: 900;
     -webkit-perspective-origin: 100% 30%;
  }

The container, which is the div that hold the rest of the elements, has some -webkit-* experimental properties that set the position and the distance of the point of view of the user from the scene, as much as it happens with 3D software.

After this each card needs to be rotated against its Y axes; here comes to rescue another CSS3 property:

  .card{
     -webkit-transform: rotateY( 120deg);
  }

Then, all you need is find a way to trigger a change of CSS properties in your .card elements while specifying a transition which handles this change smoothly. So first let’s add this transition:

  .card{
     -webkit-transition: all 1s ease-out;
  }

And then let’s use the :target pseudoclass which gets applied to an <a> element when its name became part of the URL (either because clicked or typed):

  .card:target{
    -webkit-transform: rotateY( 0deg);
  }

The trickiest part is then try to make this thing works also under Firefox which doesn’t have 3D transformations. It turns out that you can emulate them by using wisely the skew(xdeg, ydeg) transform, so you can do the following:

  .card{
     -moz-transform: skew(0deg,-35deg) scale(0.70);
  }
  .card:target{
     -moz-transform: skew(0deg,0deg) scale(1);
  }

Good, but now there’s another challenge: how to solve this ?

The elements on the right side of the selected one have two issues: they should be inclined on the opposite angle and the way they overlap each other should also be reversed.

To solve the first part we can rely on the ~ selector to tell the browser that each element following the selected one must obey to a different skew angle:

  .card:target ~ .card{
    -moz-transform: skew(0deg,20deg) scale(0.70);
  }

The only solution I found to archive the second issue is to use the + selector iteratively in order to assign a z-index to an element based on its distance from the selected one:

  .card:target + .card{
    z-index: 10;
  }

  .card:target + .card + .card{
    z-index: 9;
  }

  .card:target + .card + .card + .card {
    z-index: 8;
  }

  .card:target + .card + .card + .card + .card{
    z-index: 7;
  }

  .card:target + .card + .card + .card + .card + .card{
    z-index: 6;
  }

  .card:target + .card + .card + .card + .card + .card + .card{
    z-index: 5;
  }

  .card:target + .card + .card + .card + .card + .card + .card + .card{
    z-index: 4;
  }

  .card:target + .card + .card + .card + .card + .card + .card + .card + .card{
    z-index: 3;
  }

  .card:target + .card + .card + .card + .card + .card + .card + .card + .card + .card{
    z-index: 2;
  }

  .card:target + .card + .card + .card + .card + .card + .card + .card + .card + .card + .card{
    z-index: 1;
  }

Here’s the final result:

You can have a working demo at this address:
http://sandropaganotti.com/wp-content/goodies/demos/cards/index.html#aela

To archive this result I played a bit with clear and float properties by adding them to some specific elements, here’s a sample:

The .cestello HTML structure:

<div class="cestello">
    <div>
        <a href="#arancia" onclick="PB.to('#arancia');return false;">
            <img src="img/arancia-small.png" alt="arancia">
        </a>
    </div>
    <div>
        <a href="#banana" onclick="PB.to('#banana');return false;">
            <img src="img/banana-small.png" alt="banana">
        </a>
    </div>
    <!-- other divs -->
</div>

And the corresponding CSS code:

.cestello{
  float:left;
  width: 100%;
}

@media screen and (min-width:480px) and (max-width:960px){
  .cestello div{
     width: 33%;
  }
  .cestello div:nth-of-type(3){
    clear: right;
  }
  .cestello div:nth-of-type(4){
    clear: left;
  }
}

@media screen and (max-width:480px){
  .cestello{
    float:none;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
  }

  .cestello div{
     width: 50%;
  }
  .cestello div:nth-of-type(even){
    clear: right;
  }
  .cestello div:nth-of-type(odd){
    clear: left;
  }
}

Here you find the three statuses in which the ‘.cestello’ structure may be found. By using some clever CSS3 selector I’m able to inject ‘clear:right’ and ‘clear:left’ and change the aspect of the page.

Then I write this code:

Demo1 = function(){
  var demo1 = {};

  demo1.generatePoints = function(numero,dimensioni_box){
    var points = [];
    for(var i=0;i < numero; i++){
      var x0 = Math.floor((Math.random()-0.5)*(dimensioni_box)),
          y0 = Math.floor((Math.random()-0.5)*(dimensioni_box)),
          z0 = Math.floor((Math.random()-0.5)*(dimensioni_box)),
          x1 = x0 + 5;
          y1 = x1 + 5;
          z1 = z0;

      points.push(
        [$M([[x0],[y0],[z0]]), $M([[x1],[y1],[z1]])]
      );
    }
    return points;
  }

  demo1.init = function(evento){
    // #drawboard is a canvas element
    demo1.canvas = document.querySelector('#drawboard');
    demo1.canvas.width  = 320;
    demo1.canvas.height = 480;
    demo1.context = demo1.canvas.getContext('2d');
    demo1.points =  demo1.generatePoints(200, 100);
  };

  demo1.resetCanvas = function(){
     demo1.context.fillStyle = '#FFFFFF';
     demo1.context.fillRect(0,0, demo1.canvas.width, demo1.canvas.height);
     demo1.context.fillStyle = '#000000';
  }

  demo1.cambioOrientamento = function(evento){
    demo1.resetCanvas();

    var heading  = ((evento.alpha > 180 ? evento.alpha - 360 : evento.alpha) * Math.PI) / 180.0;
    var attitude = (evento.beta  *  Math.PI)     / 180.0;
    var bank     = (evento.gamma * (Math.PI/2.0)) / 90.0;

    var ch = Math.cos(heading),     sh = Math.sin(heading),
        ca = Math.cos(attitude),    sa = Math.sin(attitude),
        cb = Math.cos(bank),        sb = Math.sin(bank);

    var rotation_matrix = $M([
          [ch*ca  , -ch*sa*cb + sh*sb , ch*sa*sb + sh*cb    ],
          [sa      , ca*cb             , -ca*sb             ],
          [-sh*ca , sh*sa*cb + ch*sb  , -sh*sa*sb + ch*cb   ]
    ]);

    for(var i=0; i < demo1.points.length; i++){
      var pr  = rotation_matrix.x(demo1.points[i][0]);
      var x   = 160 + ((640*pr.e(1,1)) / (pr.e(3,1)));
          y   = 240 - ((640*pr.e(2,1)) / (pr.e(3,1)));
      demo1.context.fillRect(x,y,10,10);
    }
  };
  return demo1;
}();

window.addEventListener('load',Demo1.init,false);
window.addEventListener('deviceorientation',Demo1.cambioOrientamento,false);

If you have a device which supports the deviceorientation API (eg: iPhone4) you can test the running example here: http://sandropaganotti.com/wp-content/goodies/mobile/demo1.html as you might notice is still far from perfect but at the moment I've no time to refine it and so I have to leave it 'as is' ( still somehow nice IMHO ).

If someone got a clues on this please e-mail me at: sandro.paganotti@gmail.com

To accomplish that I set-up a two-page structure: a dashboard, used to choose which files to play and to control the grid size (other controls may came next), and the mosaic page itself: in this way one page can be projected in full-screen while the other one can be viewed on the second monitor.

In the dashboard lays a drop-area where video files can be dropped, dropping one or more file cause afunction ‘caricaIlVideo’ to be called:

caricaIlVideo = function(evento){
  var files = evento.dataTransfer.files;
  for(var x=0; x < files.length; x++){
    console.log("wooo");
    worker.port.postMessage("comando-verso-mosaic:carica-video:" +
      window.webkitURL.createObjectURL(files[x]));
  }
}

The function uses Drag And Drop API and File API to recover the dropped files, then a message is sent to a SharedWebWorker for each of the dropped files containing a string like :

"comando-verso-mosaic:carica-video:blob:http://sandropaganotti.com/ecba59ec-d1cc-435c-9bd3-ba50e2bf0eab"

the blob* part is the most interesting: it contains the URL of the File dropped. The SharedWebWorker then unfold the message removing the ‘comando-verso-mosaic’ part and sends the rest to the mosaic page.

When the mosaic page receives a message like this it launch a function called ‘caricaVideo’:

caricaVideo = function(blob_url){
  var video  = document.createElement('video');
  var source = document.createElement('source');
  video.muted = true;
  video.volume = 0.0;
  video.loop  = true;
  source.src = blob_url;
  source.type= "video/webm";
  video.appendChild(source);
  document.querySelector("#videos").appendChild(video);
  video.addEventListener('canplaythrough', iniziaLaProiezione, false);
}

The function basically creates a new video element using the blob URL as a source and then attach to the element a listener for the ‘canplaythrough’ event, which occurs when the video buffer reach enough capacity to guarantee a full-play performance.

The mosaic has a looping function, called ‘aggregaVideo’ which takes care of the drawing stuff: it iterates over all the video elements created and it draws them over a canvas according with the tessellation configuration:

aggregaVideo = function(canvas_context, videoboxes){
    canvas_context.canvas.width = canvas_context.canvas.width;
    for(var i=0; i < tassello['tassellazione-y']; i++){
      for(var k=0; k < tassello['tassellazione-x']; k++){
        if(videoboxes[k + i*tassello['tassellazione-y']] != undefined){
          canvas_context.drawImage(videoboxes[k + i*tassello['tassellazione-y']],
            tassello.width * k, tassello.height * i,
            tassello.width , tassello.height
          );
        }
      }
    }
    setTimeout(function(){aggregaVideo(canvas_context,  document.querySelectorAll('#videos video'))},0);
}

Here’s a video showing the whole thing running:

The code of this project is, as usual, on my github account.

Finally you can test the video mosaic by yourself launching both the dashboard and the mosaic; be sure to have some webm video files on your computer, you can find some here: http://www.webmfiles.org/demo-files/ or you can convert some using miro video converter. Please note that everything should work, at the moment, only on Chrome 10.

Thanks!

Talking about events, the last saturday there was UGIALT.net and I had the pleasure to share a talk with Simone Chiaretta: in just 20 minutes each of us live coded a simple application using his preferred language: Ruby on Rails for me and ASP.NET MVC for Simone. It was a really enlightening experience.

To archive this result I used FFI: the Ruby snippet used to map the native C function look like this:

module Hunspell
  module Wrapper
    extend FFI::Library
    ffi_lib(LIBRARY_PATH)
    attach_function :create,  :Hunspell_create, [:string,  :string], :pointer
    attach_function :spell,   :Hunspell_spell,  [:pointer, :string], :int
    attach_function :suggest, :Hunspell_suggest,[:pointer, :pointer, :string], :int;
  end
end

where LIBRARY_PATH is the path to the compiled hunspell library.

Then the next step was to create a Hunspell class which wraps this module creating a nice ruby-sh interface to the library:

module Hunspell
  class Hunspell

    # initialize the class and the anonymus module acting as a wrapper to
    # hunspell
    def initialize(config_obj = nil)
      @dicts = bootstrap(config_obj || CONFIGURATION)
      respawn_handler('default')
    end

    def respawn_handler(dictionary)
      # create the hunspell library object
      @hunspell = FFI::MemoryPointer.new :pointer
      @hunspell = Wrapper.create(
        @dicts[dictionary]['aff'],@dicts[dictionary]['dic']
      )
    end

    # returns true if words is not correct, false otherwise
    def spelled_correctly?(word)
      Wrapper.spell(@hunspell,word) != 0
    end

    # returns an array with suggested words of a given word ([] if no
    # suggestions)
    def suggest(word)
      suggestions = FFI::MemoryPointer.new :pointer, 1
      suggestions_number = Wrapper.suggest(@hunspell,suggestions, word)
      suggestion_pointer = suggestions.read_pointer
      if (suggestion_pointer.null?)
        []
      else
        suggestion_pointer.get_array_of_string(0,suggestions_number).compact
      end
    end

    private

    # get lib directory and default dictionary path
    def bootstrap(config_obj)
      if config_obj.nil?
        raise BootstrapError.new("No configuration info supplied to Hunspell" +
            "constructor and no default configuration file available")
      end
      return config_obj['dictionaries'].merge({
          'default' => config_obj['dictionaries'][
                          config_obj['dictionaries']['default']]
      })
    end

  end
end

Well, it’s almost all here, except for some configuration details that let you choose which language dictionary files to load. The path of these files (a pair of .dic and .aff) can be specified in a .yml file and then sent to the constructor method in a way like this:

YAML (config.yml)

dictionaries:
  default: en
  en:
    aff: '/Users/sandropaganotti/RMU/hunspell/hunspell_en_dict/en_US.aff'
    dic: '/Users/sandropaganotti/RMU/hunspell/hunspell_en_dict/en_US.dic'
  it:
    aff: '/Users/sandropaganotti/RMU/hunspell/hunspell_it_dict/it_IT.aff'
    dic: '/Users/sandropaganotti/RMU/hunspell/hunspell_it_dict/it_IT.dic'

Usage Example

module Hunspell
    LIBRARY_PATH = '/path/to/your/hunspell.lib'
end
require 'yaml'
require 'lib/hunspell'
hunspell = Hunspell::Hunspell.new(Yaml.load(File.read('config.yml')))
require 'lib/hunspell'
hunspell.respawn_handler 'it'
hunspell.suggest 'spagtti'
=> ["spaghetti", "spaginati", "spagliati", "spaghetto"]

And that’s it! You can find the source code of this library on my github account; hope it may be useful!