AEM CQ 56 - Using HTML 5 Smart Image, Image Map Tools for Text Hot Spots

Goal


Create Text Hotspots on Images configured using HTML 5 Smart Image, Image Map tools. Check the demo, Demo on GeometrixxPackage Install of component available for download

This extension uses jquery position() function. When you have too many components/pars, in Edit mode, the hotspots may not appear in expected place, so use wcmmode=disabled in the browser or Sidekick Preview mode to verify if the hotspots are showing up in the right place. Make sure you do thorough testing on various screens/browsers/surfaces before you activate any pages with this component

Create Hotspots

                                       
       


Display Hotspots with Text

                                 
               

Solution


1) In CRXDE Lite, copy /libs/foundation/components/image to /apps/imagehotspot

2) Set the componentGroup property of /apps/imagehotspot/image to My Components

3) Set the jcr:title of /apps/imagehotspot/image to Image Hotspot

4) Add the following css to /apps/imagehotspot/image/clientlibs/image.css used to style the hovering texts on image

.spotText{
    position: absolute;
    color: white;
    background: #222;
    padding: 5px;
    font-family: verdana;
    font-size: 10px;
    font-weight: bold;
    opacity:0.6;
}

5) Create node /apps/imagehotspot/image/clientlibs/js.txt of type nt:file and add the following

                          textspots.js

6) Create node /apps/imagehotspot/image/clientlibs/textspots.js of type nt:file and add the following logic

var TextSpots = {
    Spot: function(coords, title){
        coords = coords.split(",");

        //only circles are supported
        if(!coords || coords.length !== 3){
            return;
        }

        this.left = parseInt(coords[0]) + parseInt(coords[2]);
        this.top = parseInt(coords[1]) + parseInt(coords[2]);
        this.title = title;
    },

    getCircles: function(html){
        var obj = $.parseHTML(html);
        var spots = [];

        if(!obj || (obj.length == 0)){
            return;
        }

        $.each(obj[0].childNodes, $.proxy(function(i, v){
            spots.push(new this.Spot(v.coords, v.title));
        }, this));

        return spots;
    },

    addHotSpots: function(id, circles){
        var imageDiv = $("#" + id);
        $.each(circles, function(i, c){
            imageDiv.append($("<div>" + c.title + "</div>").addClass("spotText").css("top", c.top + "px").css("left", c.left + "px"));
        });
    }
};

7) Add the following code to /apps/imagehotspot/image/image.jsp

<%@include file="/libs/foundation/global.jsp" %>
<%@ page import="com.day.cq.wcm.foundation.Image,
                 java.io.PrintWriter" %>
<%@ page import="com.day.cq.wcm.foundation.ImageMap" %>

<%
    try {
        Resource res = null;

        if (currentNode.hasProperty("fileReference")) {
            res = resource;
        }

        if (res == null) {
%>
            Configure Image
<%
        } else {
            Image img = new Image(res);
            img.setItemName(Image.PN_REFERENCE, "fileReference");
            img.setSelector("img");

            String mapDefinition = properties.get(Image.PN_IMAGE_MAP, "");
            ImageMap imageMap = ImageMap.fromString(mapDefinition);

            String map = imageMap.draw("someid");
            String src = img.getSrc();

%>
        <div id="textOnImage">
            <img src='<%=src%>'/>
        </div>

        <script>
            $(function(){
                var circles = TextSpots.getCircles('<%=map%>');
                TextSpots.addHotSpots("textOnImage", circles);
            });
        </script>

<%
        }
    } catch (Exception e) {
        e.printStackTrace(new PrintWriter(out));
    }
%>




9 comments:

  1. This comment has been removed by the author.

    ReplyDelete
    Replies
    1. Hello Ajay, from what i know DAM editor generates an entirely new image (previous image stored as version) when cropped or rotated; so are you trying to generate an entirely new image with the map text inscribed on image?

      Delete
  2. This comment has been removed by the author.

    ReplyDelete
    Replies
    1. Ajay, i now understand your requirement, not sure if CQ has the support to create new images with text embed

      Delete
  3. This comment has been removed by the author.

    ReplyDelete
  4. This comment has been removed by the author.

    ReplyDelete
  5. Do you know how we approach if we want to override CQ5 user interface for only one website?

    Normally we add apps/cq/gui and apps/dam/gui, but it will override CQ5 interface for all websites. How we can make sure only for one website, user see one interface, other websites default one.

    ReplyDelete
    Replies
    1. declaratively using overlays ( in /apps ), i dont think its possible, you may have to code...

      Delete
  6. Is there any way by which we can add more textfields to imageMap ?

    ReplyDelete