HTML5 VideoWall Experiment

As an experiment video on HTML5, I made a VideoWall in Javascript. It copies the imageData from a video hidden outside the screen and creates some cool effects. Also added a reflection using CSS3 which makes a great effect and it's very easy. The video is in WebM format.

The developing was really straightforward, and the performance is not that bad.

Watch it here.

Only tested it on Chrome, not sure it will work on other browsers.

Video credits to Benny Benassi.

SECURITY_ERR on Chrome using getImageData()

When playing a little with Canvas HTML5, I stumbled upon a Javascript exception SECURITY_ERR. After some search I found out that Chrome throws this exception if you're running it on as local file ( file:/// ) or using on a image from different domain.

If you want to disable this for a while just to make your development, you can start Chrome from command line with the switch --allow-file-access-from-files.

Example for Mac OS X:

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --allow-file-access-from-files&

Resistor value calculator in HTML5

A resistor is a two-terminal electronic component which implements electrical resistance as a circuit element. When a voltage V is applied across the terminals of a resistor, a current I will flow through the resistor in direct proportion to that voltage. The reciprocal of the constant of proportionality is known as the resistance R, since, with a given voltage V, a larger value of R further "resists" the flow of current I as given by Ohm's law.


Most axial resistors use a pattern of colored stripes to indicate resistance. Surface-mount resistors are marked numerically, if they are big enough to permit marking; more-recent small sizes are impractical to mark. Cases are usually tan, brown, blue, or green, though other colors are occasionally found such as dark red or dark gray.
Early 20th century resistors, essentially uninsulated, were dipped in paint to cover their entire body for color coding. A second color of paint was applied to one end of the element, and a color dot (or band) in the middle provided the third digit. The rule was "body, tip, dot", providing two significant digits for value and the decimal multiplier, in that sequence. Default tolerance was ±20%. Closer-tolerance resistors had silver (±10%) or gold-colored (±5%) paint on the other end.


Four-band identification is the most commonly used color-coding scheme on resistors. It consists of four colored bands that are painted around the body of the resistor. The first two bands encode the first two significant digits of the resistance value, the third is a power-of-ten multiplier or number-of-zeroes, and the fourth is the tolerance accuracy, or acceptable error, of the value. The first three bands are equally spaced along the resistor; the spacing to the fourth band is wider. Sometimes a fifth band identifies the thermal coefficient, but this must be distinguished from the true 5-color system, with 3 significant digits.
For example, green-blue-yellow-red is 56×10⁴ Ω = 560 kΩ ± 2%. An easier description can be as followed: the first band, green, has a value of 5 and the second band, blue, has a value of 6, and is counted as 56. The third band, yellow, has a value of 10⁴, which adds four 0's to the end, creating 560,000 Ω at ±2% tolerance accuracy. 560,000 Ω changes to 560 kΩ ±2% (as a kilo- is 10³).

To try out EaselJS (a javascript library for working with the html5 canvas element) and inspired by Resistor Colour Wheel I wrote a small experiment, that can help finding the value of resistors: HTML5 Resistor calculator.

ALERT! This experiment won't work at all in Internet Explorer. You need Chrome, Firefox, Safari or any other browser supporting HTML5.

Aventail Connect VPN on Mac OS X

Here's a tip that can save you some trouble. If you use SonicWall Aventail Connect to make VPN connections on Mac OS X, you'll run into the same problem I did eventually. If you system crashes while using the Aventail it won't start again unless you cleanup some files.

The files are located in:


/Users/<YOUR USER>/Library/Application Support/Aventail/run


with the names: SEM.pid and SEM.sock.


Just remove both and Aventail will start and connect normally.

Linux / Mac OS X cleaning music library

If you love to listen to music, you'll probably have a huge MP3 library. Imagine that you gathered a lot of MP3 and you never bothered to keep the library clean until it was too late, and now you've a massive amount of folders and mp3 files all together with trash ( .txt, .url, .nfo, etc etc ... ) and you decided it was the time to clean it up.

You could do it the hard way, using OS X "Spotlight", finding and removing the stuff you don't want or you can do it the smart way with the beauty of command line shell.

Here's a simple and very useful command that will remove all unwanted files keeping only the ones you want. Just fire up the command shell to the folder which is the base of your library and run the following command:


find . ! \( -iname '*.mp3' -o -iname '*.wma' -o -iname '*.m4a' -o -iname '*.cue' -o -iname '*.wav' \) -type f -exec rm {} \;

You can add another set of file extensions to ignore by appending -o -iname '*.newExtension' inside the parentheses.

Flatr - Example of references inside Closures in PHP

Last post I wrote a small example showing how to use Closures in PHP, the recursive way. Today I'll show you how to use a paramater passed by reference to convert a complex object structure in a flat array, with elegance and simplicity.

Without delay here's the Flatr function:

// Example structure
$obj = new stdClass();
$obj->prop1 = 'hello';
$obj->prop2 = new stdClass();
$obj->prop2->prop2 = 'there';
$obj->prop2->prop3 = 'world!';
/**
 *
 * @param stdClass $obj
 * @return array
 */
function flatr($obj) {
    $ret = array();

    $recursiveWalk = function( $baseObject ) use (&$recursiveWalk, &$ret) {
        if (is_object($baseObject)) {
            foreach($baseObject as $propValue) $recursiveWalk($propValue);
        } else {
            $ret[] = $baseObject;
        }
    };
    $recursiveWalk($obj);

    return $ret;
}
var_dump(flatr($obj));

This will output:

array(3) { [0]=> string(5) "hello" [1]=> string(5) "there" [2]=> string(6) "world!" }

This little function is not ready to handle arrays inside the object structure. But the required changes are not hard to make.

Next post I'll demonstrate a practical usage for this function.

PHP Closures - a practical example - the recursive way

Something fresh and new at PHP are Closures: anonymous functions assigned to variables. Most common usage for Closures is the handling of events as Callback functions, because you can easily pass them as parameters.

In my practical example I created a function that converts any object to a simple XML string, getting the node names from the property names of the objects. Since the object structure is a tree, nothing better than a recursive function to get the job done. I use a Closure as a recursive function, which makes the code much simpler, cleaner and elegant.

/**
 *
 * @param StdClass $obj
 * @param string $baseName
 * @return string
 */
function object2xml($obj, $baseName) {
    $ret = '<' . $baseName . ">\n";

    $recursiveWalk = function( $baseObject, $level ) use (&$recursiveWalk) {
        $recRet = '';
        foreach($baseObject as $k => $child) {
            $next = $recursiveWalk($child, $level + 1);
            if ($next === '') {
                $recRet .= str_repeat(' ', $level * 4) . '<' . $k . "/>\n";
            } else {
                $recRet .= str_repeat(' ', $level * 4) . '<' . $k . ">\n" . $next;
                $recRet .= str_repeat(' ', $level * 4) . ' . $k . ">\n";
            }
            
        }
        return $recRet;
    };
    $ret .= $recursiveWalk($obj, 1);


    return $ret . " . $baseName . ">\n";
}
?>

The example usage for this code follows:

$obj = (object) array(
    'level1_1' => (object) array(
        'level2_1' => (object) array(
            'level3_1' => (object) array(

            ),
            'level3_2' => (object) array(

            )
        ),
        'level2_2' => (object) array(

        )
    )
);
print object2xml($obj, 'root'); 

?>

 Notice the "use (&$recursiveWalk)"! To be able to call the function inside itself you need to pass it by reference to the Closure.