AEM 6 SP2 - Classic UI Show Html5 Smart Image Mouse Coordinates

Goal

Show the (X,Y) coordinates of Mouse on Html5 Smart Image (CQ.html5.form.SmartImage) added in Image Component. Mousemove on the image to add coordinates in a textfield added to map tool. Note, this is plain vanilla, may not work as expected if image is processed using crop, zoom, rotate etc.

Demo | Package Install

Solution

1) Login to CRXDE Lite, create folder (nt:folder) /apps/classic-ui-smart-image-coordinates

2) Create clientlib (type cq:ClientLibraryFolder) /apps/classic-ui-smart-image-coordinates/clientlib and set a property categories of String type to cq.widgets

3) Create file ( type nt:file ) /apps/classic-ui-smart-image-coordinates/clientlib/js.txt, add the following

                         coords.js

4) Create file ( type nt:file ) /apps/classic-ui-smart-image-coordinates/clientlib/coords.js, add the following code

(function(){
    if (typeof window.ExperienceAEM == "undefined") {
        window.ExperienceAEM = {};
    }

    ExperienceAEM.showMouseCoordinates = function(image){
        if(!image || !image.imagePanel || !image.imageToolDefs){
            return;
        }

        var imgTools = image.imageToolDefs,
            mapTool, imageOffsets = image.imagePanel.imageOffsets;

        for(var x = 0; x < imgTools.length; x++){
            if(imgTools[x].toolId == 'smartimageMap'){
                mapTool = imgTools[x];
                break;
            }
        }

        var mapCoords = mapTool.userInterface.findBy(function(comp){
            return comp["itemId"] == "areaDefCoords";
        })[0];

        var coords = new CQ.Ext.form.TextField({
            fieldLabel: "Mouse"
        });

        mapCoords.ownerCt.add(coords);
        mapCoords.ownerCt.doLayout();

        var $img = $(image.imagePanel.el.dom).find("img");

        $img.mousemove(function(event) {
            var offset = $(this).offset(),
                relX = (event.pageX - offset.left),
                relY = (event.pageY - offset.top);

            relX = relX - imageOffsets.x;
            relY = relY - imageOffsets.y;

            coords.setValue("(" + relX + "/" + relY + ")");
        });
    }
}());

5) To test the above logic, add a listener on image. In the demo loadimage listener was added on foundation image component widget /libs/foundation/components/image/dialog/items/image, which is bad; Ideally the foundation components should never be modified; did it for demonstration purposes only

6) Create node listeners (nt:unstructured) /libs/foundation/components/image/dialog/items/image/listeners, add a property loadimage with the following value (in other words, add this listener on html5 smart images needing the image mouse coordinates functionality)

function(image) { 
      ExperienceAEM.showMouseCoordinates(image) ;
}