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