How to show tooltip on the dynamic images using KineticJS

Question

I want to show the tooltip on the dynamic images inside the canvas. Here is path of the image on which I want to show the tooltip.(I want to show the tooltip on the Green and Gray images). enter link description here

Here is my code I am using to do the so with the help of kinetic.js.

 $("#tabs li").each(function () {
            $(this).live("click", function () {
                var tabname = $(this).find("a").attr('name');
                tabname = $.trim(tabname.replace("#tab", ""));
                var tabId = $(this).find("a").attr('href');
                tabId = $.trim(tabId.replace("#", ""));

                $.ajax({
                    url: "/Home/GetTabsDetail",
                    dataType: 'json',
                    type: 'GET',
                    data: { tabId: tabId },
                    cache: false,
                    success: function (data) {
                        var bayStatus = [];
                        var i = 0;
                        var image_array = [];
                        var BayExist = false;
                        var BayCondition;
                        var imgSrc;
                        var CanvasBacgroundImage;
                        var _X;
                        var _bayNumber;
                        var _Y;
                        var _ZoneName;
                        $(data).each(function (i, val) {
                            i = i + 1;
                            if (!BayExist) {
                                bayStatus = val.BayStatus;
                                CanvasBacgroundImage = val.TabImageLocation;
                                BayExist = true;
                            }
                            $.each(val, function (k, v) {
                                if (k == "BayNumber") {
                                    BayCondition = bayStatus[v];
                                    _bayNumber = v;
                                    if (BayCondition == "O")
                                        imgSrc = "../../images/Parking/OccupiedCar.gif"
                                    else if (BayCondition == "N")
                                        imgSrc = "../../images/Parking/OpenCar.gif";
                                }
                                if (k == "BayX")
                                    _X = v;
                                if (k == "BayY")
                                    _Y = v;
                                if (k == "ZoneName")
                                    _ZoneName = v;
                            });
                            image_array.push({ img: imgSrc, xAxis: _X, yAxis: _Y, toolTip: _bayNumber, ZoneName: _ZoneName });
                        });
                        var imageUrl = CanvasBacgroundImage;

                        $('#tab' + tabId).css('background-image', 'url("../../images/Parking/' + imageUrl + '")');
                        var _timer = setInterval(function () {
                            var stage = new Kinetic.Stage({
                                container: 'tab' + tabId,
                                width: 700,
                                height: 308
                            });
                            var layer = new Kinetic.Layer();
                            var planetOverlay;
                            function writeMessage(message) {
                                text.setText(message);
                                layer.draw();
                            }
                            var text = new Kinetic.Text({
                                x: 140,
                                y: 0,
                                fontFamily: 'Arial',
                                fontSize: 20,

                                text: '',
                                fill: '#000',
                                width: 740,
                                height: 60,
                                align: 'left',
                                padding: 40,


                            });
                            for (i = 0; i < image_array.length; i++) {
                                img = new Image();
                                debugger;
                                img.src = image_array[i].img;
                                planetOverlay = new Kinetic.Image({
                                    x: image_array[i].xAxis,
                                    y: image_array[i].yAxis,
                                    image: img,
                                    height: 18,
                                    width: 18,
                                    id: image_array[i].toolTip,
                                    name: image_array[i].ZoneName
                                });

                                planetOverlay.on('mouseover', function () {
                                    writeMessage("Bay: " + this.getId() + " , Zone: " + this.getName());
                                });
                                planetOverlay.on('mouseout', function () {
                                    writeMessage('');
                                });
                                planetOverlay.createImageHitRegion(function () {
                                    layer.draw();
                                });

                                layer.add(planetOverlay);
                                layer.add(text);
                                stage.add(layer);
                            }

                            clearInterval(_timer);
                            //$("#tab3 .kineticjs-content").find("canvas").css('background-image', 'url("' + imageUrl + '")');
                        }, 1000)


                    },
                    error: function (result) {
                        alert('error');
                    }
                });
            });
        });

Here is the html section for this.

<div style="background-position: center center; margin: 0px auto; padding-top: 50px; background-repeat: no-repeat; width: 700px; height: 308px; display: block; background-image: url(&quot;../../images/Parking/Garage-Floor-Plan.png&quot;);" id="tab3"><div style="position: relative; display: inline-block; width: 700px; height: 308px;" class="kineticjs-content" role="presentation"><canvas style="padding: 0px; margin: 0px; border: 0px none; background: none repeat scroll 0% 0% transparent; position: absolute; top: 0px; left: 0px; width: 700px; height: 308px;" width="700" height="308"></canvas></div></div>

This above mentioned code is working now for single message to be shown on every image mouseover but on the mentioed co-oridinates , Here I want to show the unique message on mouseover of every single image(Green/Gray in the pic) as in given pic and just above the images I want to show the tooltip.

Moreover it takes double clicks to bind the images to canvas of the tab.

Thanks for any help in advance.

Answer 1

Instead of that crazy confusing script. Why don't you just use plain JavaScript? It is best if you paint your canvas in the correct order. Here is a simple Demo of what I think you are looking for. Feel free to edit the code and add Functionality: Live Demo: Codepen Demo

Click the Edit button and take a look into the code.

Or check out the code here:

var canvas = document.getElementById('myCanvas');
canvas.width = 500;
canvas.width = 500;
var ctx = canvas.getContext('2d');



var image1 = new Image();
image1.onload = function() {
        // Image is Loaded, let's start the render() function!
        render();
};
image1.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';

// Global X and Y from the MouseMove - to check if hovering over Vader
var x = 0, y = 0;
// This is a Simple Timeout. Since you want to re-draw the image often.
function render(){
  // Lets pain the Canvas Grey!
  ctx.fillStyle='grey';
  ctx.fillRect(0,0,canvas.width,canvas.height);

  // Draw Vader
  ctx.drawImage(image1, 200, 20, 200, 200);

  // These are roughly the positions of VADER, now the text will only display when you move over VADER!
  if(x > 275 && x < 540 && y > 35 && y < 210){
    ctx.fillStyle= 'black';
    ctx.fillRect(200,20,80,40);

    ctx.fillStyle= 'white';
    ctx.font="20px Georgia";
    ctx.fillText("VADER",205,45);
  }

  // Repeat every 200ms
  setTimeout(function(){
     render();
  },200);
}

window.addEventListener( 'mousemove', check_mouse_position);

// When the mouse is moved, it will call the function below:
function check_mouse_position(e){
  x = e.x;
  y = e.y;
}

This should be a lot simpler. Use the X and Y position of the Mouse to find out where to display your texts...

Answer 2

The modified code is under below which is working now as required.I managed to do that with the help of kinecticjs and Opentip. Here is the output pic here.

$("#tabs li").each(function () {
            $(this).live("click", function () {
                var tabname = $(this).find("a").attr('name');
                tabname = $.trim(tabname.replace("#tab", ""));
                var tabId = $(this).find("a").attr('href');
                tabId = $.trim(tabId.replace("#", ""));
                $.ajax({
                    url: "/Home/GetTabsDetail",
                    dataType: 'json',
                    type: 'GET',
                    data: { tabId: tabId },
                    cache: false,
                    success: function (data) {
                        var bayStatus = [];
                        var i = 0;
                        var image_array = [];
                        var BayExist = false;
                        var BayCondition;
                        var imgSrc;
                        var CanvasBacgroundImage;
                        var _X;
                        var _bayNumber;
                        var _Y;
                        var _ZoneName;
                        $(data).each(function (i, val) {
                            i = i + 1;
                            if (!BayExist) {
                                bayStatus = val.BayStatus;
                                CanvasBacgroundImage = val.TabImageLocation;
                                BayExist = true;
                            }
                            $.each(val, function (k, v) {
                                if (k == "BayNumber") {
                                    BayCondition = bayStatus[v];
                                    _bayNumber = v;
                                    if (BayCondition == "O")
                                        imgSrc = "../../images/Parking/OccupiedCar.gif"
                                    else if (BayCondition == "N")
                                        imgSrc = "../../images/Parking/OpenCar.gif";
                                }
                                if (k == "BayX")
                                    _X = v;
                                if (k == "BayY")
                                    _Y = v;
                                if (k == "ZoneName")
                                    _ZoneName = v;
                            });
                            image_array.push({ img: imgSrc, xAxis: _X, yAxis: _Y, toolTip: _bayNumber, ZoneName: _ZoneName });
                        });
                        var imageUrl = CanvasBacgroundImage;
                        $('#tab' + tabId).css('background-image', 'url("../../images/Parking/' + imageUrl + '")');
                        var _timer = setInterval(function () {
                            var stage = new Kinetic.Stage({
                                container: 'tab' + tabId,
                                width: 700,
                                height: 308
                            });
                            var layer = new Kinetic.Layer();
                            var planetOverlay;
                            function writeMessage(message, _x, _y) {
                                text.setX(_x + 20);
                                text.setY(_y + 1);
                                text.setText(message);
                                layer.draw();
                            }
                            var text = new Kinetic.Text({
                                fontFamily: 'Arial',
                                fontSize: 14,
                                text: '',
                                fill: '#000',
                                width: 200,
                                height: 60,
                                align: 'center'

                            });
                            var opentooltip = new Opentip(
                                "div#tab" + tabId, //target element 
                                "dummy", // will be replaced
                                "", // title
                                {
                                showOn: null // I'll manually manage the showOn effect
                            });
                            Opentip.styles.win = {
                                borderColor: "black",
                                shadow: false,
                                background: "#EAEAEA"
                            };
                            Opentip.defaultStyle = "win";
                            for (i = 0; i < image_array.length; i++) {
                                img = new Image();
                                debugger;
                                img.src = image_array[i].img;
                                planetOverlay = new Kinetic.Image({
                                    x: image_array[i].xAxis,
                                    y: image_array[i].yAxis,
                                    image: img,
                                    height: 18,
                                    width: 18,
                                    id: image_array[i].toolTip,
                                    name: image_array[i].ZoneName
                                });
                                planetOverlay.on('mouseover', function () {
                                    opentooltip.setContent("<span style='color:#25A0D3;'>Bay:</span> " + this.getId() + "<br> <span style='color:#25A0D3;'>Zone:</span><span>" + this.getName() + "</span>");
                                    //writeMessage("Bay: " + this.getId() + " , Zone: " + this.getName(), this.getX(), this.getY());//other way of showing tooltip
                                    opentooltip.show();
                                    //$("#opentip-1").offset({ left: this.getX(), top: this.getY() });
                                });
                                planetOverlay.on('mouseout', function () {
                                    opentooltip.hide();
                                    // writeMessage('');
                                });
                                planetOverlay.createImageHitRegion(function () {
                                    layer.draw();
                                });
                                layer.add(planetOverlay);
                                layer.add(text);
                                stage.add(layer);
                            }
                            clearInterval(_timer);
                            //$("#tab3 .kineticjs-content").find("canvas").css('background-image', 'url("' + imageUrl + '")');
                        }, 1000)
                    },
                    error: function (result) {
                        alert('error');
                    }
                });
            });
        });