Wednesday, November 18, 2015

Calculating video frame average color and displaying its name

This little demo shows how to calculate the average color value of a video frame during playback. 
The color name is displayed as well as the color value. 
This can be useful when creating 508 accessible content, for example for color blinded people. 

I used the colorThief library for calculating the average color. 
Note that you can also calculate the frame average palette if you need to display more colors, 
however this results in slower performances.
After getting the color value, I use the "Name that color" library by Chirag Mehta to display the color name.

You can view the source code for this demo by right-clicking the demo and choosing "View Frame Source".

Saturday, August 29, 2015

My first commit to a Google open source project

I'm so proud that my first commit to a Google open source project was accepted and merged:
This commit enhances Google's example of a Chromecast custom receiver.
While the example demonstrates support for DRM, HLS and smooth streaming, it doesn't provide support for regular MP4 videos (progressive download).
After merging my pull request, I continue developing Kaltura custom Chromecast receiver for OTT, web and mobile.

Check out the example:

Wednesday, June 10, 2015

Using Adobe Illustrator to mark SVG elements for JavaScript targeting

Lately I've been working with complex SVG files, linking JavaScript interaction to various elements within the SVG markup. 
Its not an easy task to locate elements within the markup. Luckily, Adobe Illustrator comes to the rescue: 

  1. Within Illustrator, its very easy to use the direct selection tool to select the required element. It is automatically marked in the Layers window.
  2. Give the layer a name. This name later becomes the element ID in the SVG markup.
  3. Be carefull not to use the same names for multiple layers. While Illustrator doesn't really care, your HTML / JavaScript are much less forgiving...
  4. Use the "Save Aa" command to save your file as SVG.
  5. If you open your SVG in a text editor - you will notice that layer names are now element IDs within your SVG markup.

All you need to do now is select your element by its ID in order to assign a JavaScript interaction to it.
In this example, I wanted the sun in the picture to be clickable so I gave its layer the name "sun".
After exporting to SVG, all that remain is:

document.getElementById("sun").onclick = function(){
   alert("You clicked the sun!");

Give it a try - click the sun:

Monday, May 18, 2015

Angular JS: Manipulating SVG images

While playing around with SVG files, it seems only natural to bind them to an Angular JS controller and see what happens...

The Code:


Sunday, April 5, 2015

Bitbucket and Cloud9 - the prefect match!

For the first time, I've started a new development project without having any file setup on my computer.

I'm using Bitbucket as my source control repository.
Bitbucket is free for private repositories (as opposed to Github) and you can add up to 5 contributors for each project.

Cloud9 is a robust development environment within your browser. So wherever you are, if you have any type of Internet connected machine, you can work on your project.
The best part is that if you login into Cloud9 using your Bitbucket account, it will automatically import your project files.
It allows editing your project and automatically configures your SSH key so you can use GIT commands (with sudo rights!) from the build-in Ubuntu terminal.

So for me, Bitbucket and Cloud9 are a match made in heaven, or at least on a cloud...

About Me

My photo
I've been developing Internet and rich-media application for 15 years. In my work I emphasis usability and best user experience as well as sleek design. My main expertise are JavaScript, Flex and Flash.