Quantcast
Channel: Experiencing Adobe Experience Manager (AEM, CQ)
Viewing all articles
Browse latest Browse all 525

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

$
0
0

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) ;
}







Viewing all articles
Browse latest Browse all 525

Trending Articles