A developer lost in the mountains

Fabric: extend Image class

Recently I came up with the need to extend Image class of Fabric js lib. I had to keep synchronized two different Fabric Canvases, with different scale.

In the code snippet below, fabric.TavImage extends fabric.Image. AddToCanvases function adds an instance of TavImage to one canvas, then clones the object and adds it, scaled, to another canvas.

//  TavImage
fabric.TavImage = fabric.util.createClass(fabric.Image, {

    type: 'tavImage',

    initialize: function (element, options) {
        options || (options = {});

        this.callSuper('initialize', element, options);
        this.set('scaleFrontCanvas', options.scaleFrontCanvas || '');
        this.set('scaleHiddenCanvas', options.scaleHiddenCanvas || '');
        this.set('id', || '');
        this.set('objFrontCloned', options.objFrontCloned || '');
        this.set('trasfParams', options.trasfParams || '');
        this.set('isBaseImage', options.isBaseImage || false);
        this.set('scaleFactor', options.scaleFactor || '');

    toObject: function () {
        return fabric.util.object.extend(this.callSuper('toObject'), {
            scaleFrontCanvas: this.get('scaleFrontCanvas'),
            scaleHiddenCanvas: this.get('scaleHiddenCanvas'),
            id: this.get('id'),
            objFrontCloned: this.get('objFrontCloned'),
            trasfParams: this.get('trasfParams'),
            isBaseImage: this.get('isBaseImage'),
            scaleFactor: this.get('scaleFactor')

    _render: function (ctx) {
        this.callSuper('_render', ctx);

    addToCanvases: function (hiddenCanvas, frontCanvas) {

        hiddenCanvas.hiddenObjectsCount += 1;

        // check if it is not already in canvs
        var objects = hiddenCanvas.getObjects();
        for (var i in objects) {
            if (objects[i].get('id') ==

        // add to frontCanvas
        // add to hidden Canvas

    addToFrontCanvas: function (frontCanvas) {

        // clone object
        this.objFrontCloned = fabric.util.object.clone(this);
        this.objFrontCloned.scaleX = this.scaleFrontCanvas || this.scaleX;
        this.objFrontCloned.scaleY = this.scaleFrontCanvas || this.scaleY;


        // center base image layer
        if (this.isBaseImage == true) {


    addToHiddenCanvas: function (hiddenCanvas) {
        // scale to hiddenCanvas
        this.scaleX = this.scaleHiddenCanvas || this.scaleX;
        this.scaleY = this.scaleHiddenCanvas || this.scaleY;


        // center base image layer
        if (this.isBaseImage == true) {
        else {


    updateCoordsForHiddenCanvas: function () {

        this.left = Math.round(this.trasfParams.s + 1/this.scaleFrontCanvas * (this.objFrontCloned.left - this.trasfParams.s1)); = Math.round(this.trasfParams.t + 1/this.scaleFrontCanvas * ( - this.trasfParams.t1));


    updateScaleForHiddenCanvas: function () {
        if(this.scaleFactor == '')
            this.scaleFactor = this.objFrontCloned.scaleX;
        this.scaleX = this.objFrontCloned.scaleX / this.scaleFactor;
        this.scaleY = this.objFrontCloned.scaleY / this.scaleFactor;

   * Creates an instance of fabric.Image from an URL string
   * @static
   * @param {String} url URL to create an image from
   * @param {Function} [callback] Callback to invoke when image is created (newly created image is passed as a first argument)
   * @param {Object} [imgOptions] Options object
fabric.TavImage.fromURL = function (url, callback, imgOptions) {
    fabric.util.loadImage(url, function (img) {
        callback(new fabric.TavImage(img, imgOptions));
    }, null, imgOptions && imgOptions.crossOrigin);

Tip: how to dinamically update a texture on a mesh in three.js

Sometimes there is the need to change the texture of a mesh at run time; for instance to change aspect of a virtual character, to create some light effects and so on.
In the code snippet below, function loadNewTexture accept the url of the new image for the texture to create a new image object. In the onload event of the image, it is drawed on the texture assigned to the material of the mesh.

Do not forget to set "needsUpdate property of the mesh to true at the end.

MyObject.prototype.loadNewTexture = function (src) {
    var that = this;
    var textureImg = new Image();
    textureImg.src = src;
    textureImg.onload = function () {
        var ctx ='2d');
        ctx.drawImage(textureImg, 0, 0, textureImg.width, textureImg.height, 
      0, 0, textureImg.width, textureImg.height); = true;

Near Field Communication in Windows 8: Part 2

In the first part of this article series we have described the main concepts of Near Field communication and how Microsoft has provided support for this technology in Windows 8. Then we have seen how to set up two Windows 8 virtual machines with a proximity driver, i.e something which allows us to simulate a tap gesture. In this second part we will learn how to use the sample proximity driver and explore the functionalities exposed by the Proximity API.

NetNfpControl: a testing tool to simulate a proximity event

As already described in the first part, we can use a sample proximity driver to simulate a tap gesture. We found the sample netnfp solution in the Windows 8 Driver Samples package. In this solution, together with the driver and the package for the driver projects, there is also a project, NetNfpControl, containing a testing tool to simulate proximity hardware.

Read all on silverlightshow:

Near Field Communication in Windows 8 = Near Field Proximity

Near Field Communication (NFC) is certainly a promising technology and some standardization processes are on-going at nfc-forum
Microsoft announced extended support for this technology in Windows 8, but renamed it as Near Field Proximity. I'm investigating on the Proximity API that developers can use to create NFC-enabled apps; it is surprisingly simple..

Read more on my first-part article: