Everything was going pretty well when I discovered that wp-members store in the wp_options table some labels and sentences, such as fields labels and all the templates of the emails to be sent to the user. This behavior is not compatible with WPML and results in the same label or sentence rendered without caring of the current user language.
Luckily there’s an easy workaround, we can create an hook that intercepts the request of such labels and substitue them when necessary.

To begin we have to create a filter call to be activated upon request of these properties, that’s easy because wp-member prefixes all of its properties with ‘wpmembers_’:

if(is_plugin_active('wp-members/wp-members.php')){
	$db_options = get_alloptions();

	foreach($db_options as $name => $value){
		if(strpos($name, 'wpmembers_') === 0){
			add_filter('option_' . $name, 'i18n_wpmembers');
		}
	}
}

Now we can define a ‘i18n_wpmembers’ function which determinate what property wp-members is looking for and acts by injecting translations taken from other properties, using name conventions:

function i18n_wpmembers($value){
	global $db_options;
	$language_code = defined('ICL_LANGUAGE_CODE') ? constant('ICL_LANGUAGE_CODE') : substr(get_bloginfo("language"), 0,2);

        // load translations if available (ex: it_wpmembers_options)
	$translations = get_option($language_code . '_wpmembers_options');
	$current_option = str_replace('option_','',current_filter());

	switch($current_option){
		case 'wpmembers_fields':
			$elements_to_return = array();
			foreach($value as $i => $field){
				$new_field = $field;
				$label = $new_field[2];
				$translated_opt = $translations ? $translations[$current_option . '_' . $label] : false;
                                // inject the translation into the wp-members structured property
				$new_field[1] = ($translated_opt ? $translated_opt : $field[1]);
				$elements_to_return[] = $new_field;
			}
			return $elements_to_return;
			break;

                // continue with all the other wp-members properties

		default:
			return $value;
			break;
	}
}

Now all we have to do is create an extra admin page which let create the translated properties, we can achieve this following the theme options guidelines.

Hope it might be useful!

Here’s the HTML code:

<div id="background_gears">
<img src="svg/gear.svg" class="big_gear">
<img src="svg/gear.svg" class="small_gear">
</div>

<div id="home">
<figure>
<img src="svg/gear.svg" class="big_gear">
<img src="svg/gear.svg" class="small_gear">
<h2><a data-title="Comparto Web">Comparto Web</a></h2>
</figure>
<div>

To animate the two gears I used CSS3 animations:

.big_gear{
	position: absolute;
	opacity: 0.85;
	width: 7.6em;
	top: -3.0em;
	right: -2.7em;
	animation-name: clockwise;
	animation-duration: 20s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

.small_gear{
	opacity: 0.8;
	position: absolute;
	width: 4em;
	bottom: 0.2em;
	left: -0.8em;
	animation-name: counterclockwise;
	animation-duration: 12.808s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

@keyframes clockwise{
	from{
		transform: rotate(0deg);
	}
	to{
		transform: rotate(360deg);
	}
}

@keyframes counterclockwise{
	from{
		transform: rotate(360deg);
	}
	to{
		transform: rotate(0deg);
	}
}

and to create a text inset shadow effect I followed this beautiful example from Daniel Hug found on Dabblet.

You can check the result simply by visiting http://www.compartoweb.com

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!