Show Image Coordinates while mouse over

Sir ,


I am using Vaadin 6.8.4 in my Application. I need to show the coordinates of the image (X and Y position ) while user mouse over the image . There is any way to do this ?

You need custom client side code to do this as mouse move events are not transmitted to the server. You might also want to limit the rate of sending them if implementing this so that not every pixel move is immediately sent to the server but only e.g. the latest one within a short time window (tens or hundreds of milliseconds). You could also not send the coordinates to the server but just display them directly from the client side code depending on how you want to display them and what you want to do with them.

In Vaadin 7, this would be easy to implement as an Extension. In Vaadin 6, some more work is required.

Sir,
You said that i need Custom client side code and in Vaadin 6, some work is required. Can you give some example code to do this . Actually I don’t know how to do this .

Sorry but I don’t have time to implement any larger example on this. See
Vaadin 7 tutorials
and
Book of Vaadin
, especially the tutorials on extending UIs and components and those on client side development. Also the JavaScript tutorials might be of interest.

If you need more hands-on help, there are also
commercial services
available.

Sir ,
I am using Embedded component with StreamResource . I don’t want to convert the Project to Vaadin 7 for now because of some Addon restrictions and i have to add these features in my project as soon as possbile. I tried the Colorpicker widgetset and i have included the Image component of the GWT and i get the coordinates of the image while mouseover but I want to change the content of the image at runtime . How do i achieve this?. Since i am not familiar with GWT and Custom widgetset , how to add a mouseover listener to Embedded component and get the X and Y value .

As I wrote before, I can’t spend the time to write an example - so either you need to get familiar with GWT widget development (the relevant book section for Vaadin 6 is
here
or pay someone else to do it.

For Vaadin 6, you would need to subclass both the server side component Embedded and its client side counterpart VEmbedded (if I remember correctly), update the annotation linking the two and add the listener on the client side. Then call client.updateVariable(…) in the listener to send the mouse move events to the server, and override Embedded.changeVariables() to catch and react to those changes in addition to calling the superclass method.

If you want a listener on the server side, there are some helper mechanisms for implementing that (see how other components implement listeners) or you can write your own listener registration and dispatch methods, which should not be complicated.

Reloading the image is somewhat heavy so you don’t want to do that for every mouse move. If you want to make more extensive or very rapid interactive changes to the image, using the Canvas (see related add-ons in the directory) and more custom client side code might make more sense. If you just want to display a label on top of the image or something like that, you could use an AbsoluteLayout and overlap the components, or maybe some overlay add-on.

Sir,
I can’t pay someone to do this task . I have to do myself. Here i tried this quote


"For Vaadin 6, you would need to subclass both the server side component Embedded and its client side counterpart VEmbedded (if I remember correctly), update the annotation linking the two and add the listener on the client side. Then call client.updateVariable(…) in the listener to send the mouse move events to the server, and override Embedded.changeVariables() to catch and react to those changes in addition to calling the superclass method. "

Following is the code.


VMycomponent.java



package com.example.embeddedwp.client.ui;

import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.MouseMoveEvent;
import com.google.gwt.event.dom.client.MouseMoveHandler;
import com.google.gwt.user.client.Event;
import com.vaadin.terminal.gwt.client.ApplicationConnection;
import com.vaadin.terminal.gwt.client.Paintable;
import com.vaadin.terminal.gwt.client.UIDL;
import com.vaadin.terminal.gwt.client.ui.VEmbedded;

/**
 * Client side widget which communicates with the server. Messages from the
 * server are shown as HTML and mouse clicks are sent to the server.
 */
public class VMyComponent extends VEmbedded implements Paintable, MouseMoveHandler 
{

	/** Set the CSS class name to allow styling. */
	public static final String CLASSNAME = "v-mycomponent";

	public static final String CLICK_EVENT_IDENTIFIER = "click";
	
	public static final String MOUSE_EVENT_IDENTIFIER = "mouse";

	/** The client side widget identifier */
	protected String paintableId;

	/** Reference to the server connection object. */
	protected ApplicationConnection client;

	
	
	/**
	 * The constructor should first call super() to initialize the component and
	 * then handle any initialization relevant to Vaadin.
	 */
	public VMyComponent() 
	{
		super();		
		// TODO This example code is extending the GWT Widget class so it must set a root element.
		// Change to a proper element or remove this line if extending another widget.
//		setElement(Document.get().createDivElement());
		
		// This method call of the Paintable interface sets the component
		// style name in DOM tree
		setStyleName(CLASSNAME);
		
		// Tell GWT we are interested in receiving click events
		
		// Tell GWT we are interested in receiving mouse events
		sinkEvents(Event.ONMOUSEMOVE);
		// Add a handler for the click events (this is similar to FocusWidget.addClickHandler())		
		addDomHandler(this, MouseMoveEvent.getType());
	}

    /**
     * Called whenever an update is received from the server 
     */
	public void updateFromUIDL(UIDL uidl, ApplicationConnection client) 
	{
		super.updateFromUIDL(uidl, client);
		// This call should be made first. 
		// It handles sizes, captions, tooltips, etc. automatically.
//		if (client.updateComponent(this, uidl, true)) 
//		{
//		    // If client.updateComponent returns true there has been no changes and we
//		    // do not need to update anything.
//			return;
//		}
		// Save reference to server connection object to be able to send
		// user interaction later
		this.client = client;
		// Save the client side identifier (paintable id) for the widget
		paintableId = uidl.getId();
		// Process attributes/variables from the server
		// The attribute names are the same as we used in 
		// paintContent on the server-side
//		int clicks = uidl.getIntAttribute("clicks");
//		String message = uidl.getStringAttribute("message");		
//		getElement().setInnerHTML("After <b>"+clicks+"</b> mouse clicks:\n" + message);
		
	}

    /**
     * Called when a native click event is fired.
     * 
     * @param event
     *            the {@link ClickEvent} that was fired
     */
   

	@Override
	public void onMouseMove(MouseMoveEvent event) 
	{
		// TODO Auto-generated method stub
		String button = "X IS: "+event.getX()+" Y IS: "+	event.getY();
		// The last parameter (immediate) tells that the update should be sent to the server
		// right away
		client.updateVariable(paintableId, MOUSE_EVENT_IDENTIFIER, button, true);
	}
}


Mycomponent.java



package com.example.embeddedwp;

import java.util.Map;

import com.vaadin.terminal.PaintException;
import com.vaadin.terminal.PaintTarget;
import com.vaadin.terminal.Resource;
import com.vaadin.ui.Embedded;

/**
 * Server side component for the VMyComponent widget.
 */
@com.vaadin.ui.ClientWidget(com.example.embeddedwp.client.ui.VMyComponent.class)
public class MyComponent extends Embedded 
{

	private String message = "Click here.";
	private int clicks = 0;
    private String user = "I am from server";
    
    
    
    
    public MyComponent(String caption, Resource res) 
    {
		// TODO Auto-generated constructor stub    	
    	super(caption, res);    	
	}
    
    
    
	@Override
	public void paintContent(PaintTarget target) throws PaintException 
	{
		super.paintContent(target);

		// Paint any component specific content by setting attributes
		// These attributes can be read in updateFromUIDL in the widget.
		target.addAttribute("clicks", clicks);
		target.addAttribute("message", message);
        target.addAttribute("User",user);
		// We could also set variables in which values can be returned
		// but declaring variables here is not required
	}

	/**
	 * Receive and handle events and other variable changes from the client.
	 * 
	 * {@inheritDoc}
	 */
	@Override
	public void changeVariables(Object source, Map<String, Object> variables) 
	{
		super.changeVariables(source, variables);
		// Variables set by the widget are returned in the "variables" map.		
		if (variables.containsKey("mouse"))
		{
			// When the user has clicked the component we increase the 
			// click count, update the message and request a repaint so 
			// the changes are sent back to the client.
			clicks++;
			message += "<br/>" + variables.get("mouse");
			requestRepaint();
		}
	}

}




EmbeddedwpApplication.java



package com.example.embeddedwp;

import com.vaadin.Application;
import com.vaadin.terminal.Resource;
import com.vaadin.terminal.ThemeResource;
import com.vaadin.ui.Label;
import com.vaadin.ui.Window;

public class EmbeddedwpApplication extends Application 
{
	/**
	 * 
	 */
	private static final long serialVersionUID = 1L;
	

	@Override
	public void init() 
	{
		Window mainWindow = new Window("Embeddedwp Application");
		Label label = new Label("Hello Vaadin user");
		mainWindow.addComponent(label);
		setMainWindow(mainWindow);
		setTheme("reindeer");
		Resource res = new ThemeResource("../reindeer/Bgnd1.bmp");		
		MyComponent myc = new MyComponent("Theme Resource",res);
		myc.setWidth("2048px");
		myc.setHeight("200px");		
		myc.requestRepaint();
		mainWindow.addComponent(myc);
	}

}


I have loaded the image into the browser. But how to add label to display the X and Y pixel value ?