Using D3 or third party libraries with Polymer – simple example

Off late I have been exploring and working with Polymer a lot. One thing I tried recently was to create a custom element (a custom tag) that has a d3 chart integrated into it. So whenever I use this element in an application the chart renders.

For those who are not familiar with Polymer, let me tell you, it’s a game changer for the next generation of web applications. The web is getting componentized with the new standards that are coming along – Shadow DOM, custom elements, templating, HTML imports e.t.c. Polymer is a polyfill layer or as they call it a SUGARING layer on top of these web standards that allow you create custom web components easily. You do not need to go the the low level API’s to create a custom element. Just use the Polymer library and start creating your own components. Also it provides a heck of other features that can be used, such as two way data bindings. So go over to the Polymer site and check it out.

Coming back to our topic of discussion, one thing that can be a bit confusing to Polymer beginners is to use a third party javascript library with your polymer element. Here I have an example of using the D3 js charting library to create a custom chart component. Let’s call our custom element  my-custom-d3-chart. By the end of this discussion we will have a custom tag – <my-custom-d3-chart />. Yes a custom HTML tag. Our own tag. Yo!!!

Continue reading

Animated growing pie chart with Rapahel JS

This is my first post after a long gap – almost one year. During this period I got busy with my regular work, family and other commitments. It was really hard to keep writing although I wanted to do that.
One of the tasks that I worked on a few months back was animating a pie chart as if it is growing from 0 to 360 degrees. And this post will share that with you. So let’s get started….
You might already be knowing that Raphael JS is a great JavaScript library to work with SVG in your web projects. So did I to create the pie chart. I am using Raphael and its features to create the pie chart and animate it. Here’s the demo link. Run this in your browser http://pompomlabs.com/blog/demo/svg/growing_pie/

growing_pie

Quick Concepts: 
Most important functionality in the growing pie chart code is defining a custom Raphael paper attribute. So here’s the concept. If you have an attribute that you want to represent as a function and add your logic to it, you can create a custom attribute. For details you can see the official reference here. But here’s how I defined a custom sector attribute that represents a pie slice sector. Continue reading

Save HTML5 Canvas Image to Gallery – Phonegap Android plugin

Update

Readers of this post have raised issues with the plugin. I have to personally check for the issues but while using the plugin if you find any issues, you might want to debug it in ADT. I will come up with a working plugin soon. Thanks.

Sometime back I worked on a Phonegap Android plugin that helps to save an HTML5 Canvas Image to the device’s gallery. Well, the title of this post may be misleading but note that when you save an image, you actually have to save it on the SD Card or the device’s memory. The Gallery is just an app that shows the collection of images from various locations on the SD Card. So, there’s nothing like saving an image directly to the Gallery.
I had this working with Phonegap 2.2.0 (the version that I used). Newer versions of Phonegap/Cordova are available and things might have changed a bit, specially in the way custom plugins are written. Hence, if you are using newer versions of Phonegap you should have a look at the official documentation before proceeding.
Alright, here is what I did. I tried to save an image using the FileWriter – Phonegap API, but as it turned out, it can save only text data on the device’s memory. So, only way to do it was write a Phonegap plugin, pass the Canvas details from JavaScript interface to the Java side and let the Java class save the Canvas image on the SD Card.
Note that I am not a Java developer, and there may be better ways of writing this plugin.

How to install the plugin?
You need to get hold of two files :
1) The Java class – SavePhotoPlugin.java
2) The JavaScript interface – SavePhotoPlugin.js

Continue reading

Getting CSS3 Transformations Matrix values for Android/Firefox

Quick snippet of code that will return the CSS3 Transformations Matrix values for Firefox browsers. We make use of the window.getComputedStyle() method for retrieving the style values for our element which has been moved using CSS3 Transformations.

function getMatrix() {
var style = window.getComputedStyle(your_element, null);
var moz_transform = style.getPropertyValue("-moz-transform") || style.getPropertyValue("transform");
if(moz_transform){
var values = moz_transform.split('(')[1];
values = values.split(')')[0];
values = values.split(',');
var a = values[4];
return a;
}

An example to follow…

orientationchange does not work in Mobile Firefox for Androids… WTF !

Yes, orientation change does not work in mobile Firefox. Strange!, but it is. So, when you rotate your mobile device from portrait to landscape mode and back to portrait mode, the orientationchange event is not fired in Firefox browsers for Android devices.

Normally for mobile browsers we detect the orientation change happening by registering to the orientationchange event.

window.addEventListener('orientationchange', function() {
  alert('orientation: ' + orientation);
}, true);

where the orientation property of the global object gives the current orientation that the device has been tilted to. For eg. 0 for portrait and 90/-90 for landscape.

However, when you run this code in firefox browsers for Android, the event is not fired (I tested it on Firefox 20/Galaxy S3). And this happens to be a bug. I mean how can you miss such a common thing in a big big browser!!

But there is an alternative way to detect the orientation changes in firefox browsers and that is by using Media Query detection technique. Also to let you know, I used the window.resize event to detect the orientation but it did not give correct results. The Media Query method worked perfectly. Here it is,

var test = window.matchMedia("(orientation: portrait)");
test.addListener(function(m) {
  if(m.matches) {
    // Changed to portrait
    alert('portrait');
  }else {
    // Changed to landscape
    alert('landscape');
  }
});

Still the window.orientation property is undefined for firefox browsers. So, you can use that to detect if it actually supports orientation change event. Who knows later they might start supporting. This is how you can do that,

if(typeof window.orientation === 'undefined') {
  //use media query technique
} else {
  //use orientationchange event handler
}

JavaScript typeof and instanceof – the concept and differences

As a JavaScript developer you must have used the typeof and the instanceof operator sometime in your code to detect the the type of a variable in your program logic. And most often or not you might have been confused with the different results that show up while expecting a desired result. In this post I am gonna show you an easy technique to determine the type and instance of a variable. Let’s see some examples first.

The typeof operator

var str1 = "Hello, how are you?";
typeof str1;
Output: "string"

So, we have a string literal str1, and when we find the typeof str1, it gives “string”. Remember string is a primitive data type in JavaScript. Let’s see another example,

var str2 = new String("I am doing good. Thank you!");
typeof str2;
Output: "object"

Now, we have a String Object and we have created an instance of that Object using the new operator, which is str2. Now if we do a typeof, it gives object. Remember that in JavaScript, other than the primitive data types (and null, undefined, function), everything else is an Object. So as expected you get the type as object.

Now, let’s work with Array’s and try the same thing,

var arr1 = [2,3,4]; //defining an array literal
typeof arr1;
Output: "object"

var arr2 = new Array(4,5,6); //creating an Array Object instance
typeof arr2;
Output: "object"

Firstly, we have an Array literal – arr1 and if we do a typeof it gives “object”. Why? Since Array’s are Objects and they are not part of the primitive data set.
The next example is more obvious, we create an Array Object instance – arr2, and then do a typeof. As expected we get a “object”. So we have seen, if the typeof does not return a primitive data type (which are number, boolean, string), it will return an object. There are some special cases though, look at the bottom of this page to find out.

The instanceof operator

Now let’s take up some examples of the instanceof operator.

var str1 = "Hello, how are you?"; //defining a string literal, same as above
str1 instanceof String;
Output: false

If you see above, we have a string literal and when we do a instanceof to check if the variable is an instance of the String Object, it returns false. Since a string literal belongs to the string primitive data type. Now, consider the example below,

var str2 = new String("I am doing good. Thank you!"); //defining a String object instance
str2 instanceof String;
Output: true

Here, str2 is actually an instance, so the test returns true.
But What’s up with the Array’s though? Let’s see,

var arr1 = [2,3,4]; //defining an array literal
arr1 instanceof Array;
Output: true

var arr2 = new Array(4,5,6); //creating an Array Object instance
arr2 instanceof Array;
Output: true

Both returns true as both arr1 and arr2 are Array objects and they are not part of the primitve data set.

In fact the following test also returns true

arr1 instanceof Object;
Output: true

arr2 instanceof Object;
Output: true

This is because the Array object inherits from the more generic Object object. (Yes, you heard it right Object object!).

Still confused about finding types and instances? Here is the rule to do it easily.

Rule for the test
So, how do you guess if a variable is an instance of its Object or Type. Here is the rule,
1) First check the type of the variable using typeof.
2) Now do the instanceof test.
3) a) If the typeof test returns a primitive type – number, boolean, string. Then instanceof test will return false. Because these are just primitive type data. They are not instances of any Object.
b) But if typeof returns an object, then instanceof test will return true. So you know that you are dealing with objects and instances.
For eg.

var regexp = /d{3}/; //define a regular expression object
typeof regexp; -> "object", not a primitive type
regexp instanceof RegExp; -> true
regexp instanceof Object; -> true

Take another,

var str = "Hello, me again!";
typeof str; ->  "string" , a primitive type
str instanceof String; -> false

Now, you can think of some examples and put the rule to a test.

Special cases
1) typeof null = “object” , since null is a special value in JavaScript which represents emptyness and it does not have any type.
2) typeof undefined = “undefined”, as expected
3) typeof NaN = number, since NaN is actually a special number, although it says Not a Number. Confusing? Just keep in mind.
4) typeof Function = “function”
5) typeof xmlObj = “xml”

References
1) typeof operator : https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Operators/typeof
2) instanceof operator: https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Operators/instanceof

HTML5 SVG Support check using JavaScript – the simple way

My last post talked about how you can detect whether your browser supports HTML5 Canvas or not using simple JavaScript technique. Based on the same principles, this post illustrates how you can detect if your browser supports SVG elements. You may note SVG is Scalable Vector Graphics and HTML5 has native support for SVG tags. The difference with Canvas is that in case of SVG elements, they become a part of the DOM and you can manipulate each SVG elements, whereas in case of Canvas, the entire <canvas></canvas> tag becomes one node in the DOM and anything inside the Canvas <canvas> tag (for eg. a Rectangle) cannot be manipulated individually using standard DOM methods. Browse the web and you will find a hell lot of topics on this.

Alright, now back to the detection code. Just copy/paste this inside your window load / body load or in case of JQuery the $(document).ready() method,

if(!document.createElement('svg').getAttributeNS){
  document.write('Your browser does not support SVG!');
  return;
}

So, if your browser does not support SVG, then it will not process further (in case your application cannot live without SVG). But if you have a back up plan and you can live without SVG in your browser, then you can add an else block along with the if so that you can write your backup logic.

Explanation
Well, the code is very simple. Inside the if condition I create a SVG element using the standard DOM createElement() method. Now this will create a <svg></svg> object. Now next thing I do is to check if the getAttributeNS() method is defined or not. If you browser does not support <svg> then there is no way it will understand getAttributeNS() and that’s the catch.

HTML5 Canvas Support check using JavaScript – the simple way

This is how you can check for HTML5 Canvas support in your browser by using JavaScript, there’s no need of an external library like Modernizer to do a simple check like this. In fact most of the feature checks can be done natively, that’s what I prefer.

Here is the code,

var canvasEl = document.createElement('canvas'); //create the canvas object
if(!canvasEl.getContext) //if the method is not supported, i.e canvas is not supported
{ 
  document.write("HTML5 Canvas Not Supported By Your Browser");
  return;
}

As you can see in the first line I create a HTML5 Canvas element by using createElement() DOM method. As you might know that to work with Canvas, you have to get it’s context object (2d for now), which can be retrieved by the getContext() method. So, if a browser does not support the <canvas> tag or the canvas element, then no way the getContext() method will be defined for it. That’s what I check in the second line – the if condition. Remember that a function/method name is a variable which holds a reference to the function block. So we can check whether it is defined or not, in a normal way like we do for object properties. IE8 doesn’t support HTML5 Canvas. So try this code in IE8 for a quick test.

How can I use it with my code?
Use this code block inside the window load event handler or when the DOM ready event is triggered (using document.onreadystatechange, more). You can modify it as per your need.
Leave behind a comment if you are upset with this attempt.

RIA Lab is Pom Pom Labs now

Only the name has changed. The spirit still remains the same.

But just to let you know RIA Lab (http://jbkflex.wordpress.com) is moving to its new home base – Pom Pom Labs (http://pompomlabs.wordpress.com/). We are currently in the process of moving our stuff and things might be here and there till we settle down, which is normally what happens when you are shifting your house isn’t it? 4 to 5 days of random crap lying everywhere.

Augmenting the String object by extending its prototype – JavaScript

Every function in JavaScript has the prototype property which enables you to enhance the functionality of the current Object definition (the Class definition) either through adding properties or through methods. This stands true for both custom Objects as well as JavaScript defined Objects like Strings, Arrays.
Using prototypes to add functionality also has one more advantage and is performance optimized. Whatever methods or properties are defined using prototypes, they belong at the class level which means that all the instance of the Object (or rather the Class, in JavaScript there is no concept of Class, we say it Objects) will share the same copy of the method or property, rather than having their own individual copies.

In this post I am going to enhance the String Object which is already defined in JavaScript and has a lot of useful methods already available such as the split(), indexOf(), replace() etc and properties like length etc.

Now let’s add our new method to the String Object just to enhance its functionality. Let’s add a method that will remove the empty spaces between the words of a string value. For eg.

input value = The weather is very nice
output value = Theweatherisverynice

Defining our custom method
As you guessed it right we will be using the prototype property. Let’s try this thing out,

I have named our custom method as – removeEmptySpaces()

if(typeof(String.prototype.removeEmptySpaces) !== 'function'){ //you expect it to be a function if it is already there
    String.prototype.removeEmptySpaces = function(){                    
        return this.replace(/\s+/g,'');                   
    }
}

As you can see above, first we check if the removeEmptySpaces() method is already defined. If not (which is true in this case since we are adding out custom method. But the check is good to have if you do not want to overwrite a predefined method) then we define it inside the if block. So using the prototype property we add the custom method and from now on it is available to all the instances of the String Object. Inside the method definition we have a String.replace() method implemented. This will remove every occurrence of space between the words and will join them. I am using a regular expression inside the replace() method to match the spaces between the words. Once the match is found, it will be removed. You can also see the use of this keyword. This will represent the current instance that is calling our custom method – removeEmptySpaces(). 
You can learn more about the replace() method from w3schools.com

Putting it to test
Now let’s use our new method and see if it is actually doing the stuff that we wanted.

 var testStr = new String("The weather is very nice");   //create a new instance
 var newStr = testStr.removeEmptySpaces(); //call our custom method
 alert("New string after removing empty spaces is : " + newStr);

First we create a String Object instance – testStr and pass it a value. Then we call our custom method and store the returned value in newStr. Now if you alert the new value you can see that the empty spaces between the words have been removed. Here we have seen using our customized method with a String instance. What about String literals or constants? Well, we can use for them as well. Here is an example,

  var strConstant = "I am a String constant"; //defining our string literal
  var newStrConstant = strConstant.removeEmptySpaces(); 
  alert(newStrConstant); //alerts "IamaStringconstant"

So, we have seen how using prototypes we can add new functionality to our Objects. This was a simple example that I presented. You can customize any Objects as per your need.