As I mentioned before, getting zoom to work was pretty easy. Implementing panning/dragging was the hard part. The major issues I encountered and subsequently fixed were the following:

1. Panning continues indefinitely in all directions.
2. When you zoom and then pan, stop, and then start again, the view jerks to a new position instead of panning from the existing position.
3. Excessive panning towards the left and top can be constrained, but panning towards the right and bottom is not so easily constrained.

Once I fixed all the problems, I figured that it would be nice to document it for future reference, and I also think it would be a useful resource for others who have the same problem. Now a little disclaimer before I go any further: I’m not an Android expert and I’m really not that great with graphics; I just started it learning to program for Android this semester for one of my Masters electives. So there might be a better way of doing all this, and if there is, please let me know! Also, if you want to skip all the explanations and just see the code, you can skip to the last page.

Let’s start with the simple stuff first, that is implementing pinch-zoom. To implement pinch-zoom, we make use of the ScaleGestureDetector class. This class helps you detect the pinch-zoom event. Using it is pretty simple:

public class ZoomView extends View {

    private static float MIN_ZOOM = 1f;
    private static float MAX_ZOOM = 5f;

    private float scaleFactor = 1.f;
    private ScaleGestureDetector detector;

    public ZoomView(Context context) {
        super(context);
        detector = new ScaleGestureDetector(getContext(), new ScaleListener());
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        detector.onTouchEvent(event);
        return true;
    }

    @Override
    public void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        canvas.save();
        canvas.scale(scaleFactor, scaleFactor);

        // ...
        // your canvas-drawing code
        // ...

        canvas.restore();
    }

    private class ScaleListener extends ScaleGestureDetector.SimpleOnScaleGestureListener {
        @Override
        public boolean onScale(ScaleGestureDetector detector) {
            scaleFactor *= detector.getScaleFactor();
            scaleFactor = Math.max(MIN_ZOOM, Math.min(scaleFactor, MAX_ZOOM));
            invalidate();
            return true;
        }
    }
}

Your view class has four private members: MIN_ZOOM, MAX_ZOOM, detector, and scaleFactor. The first two are static constants that define the maximum and minimum zoom allowed. The third is of type ScaleGestureDetector and does all the heavy lifting as far as zooming is concerned. The fourth member holds the scaling factor i.e., a number that represents the amount of “zoom”.

Now what does this do?

In the constructor, you initialize the detector. The constructor to ScaleGestureDetector takes two parameters: the current context, and a listener. Our listener is defined inside the class ScaleListener which extends the abstract class ScaleGestureDetector.SimpleOnScaleGestureListener. Inside the onScale method, we get the current scale factor from the detector. We then check to see if it is greater or smaller than our upper and lower bounds. If so, we make sure that it we limit the value to be between those bounds. We then call invalidate() which forces the canvas to redraw itself.

The actual scaling happens inside the onDraw method. There, we save the canvas, set its scaling factor (which is the one we got from the detector), draw anything we need to draw, and then restore the canvas. What happens now is that anything you draw on the canvas is now scaled by the scaling factor. This is what gives you the “zoom” effect.

Initially I was going to call the render(…) method of MappingJacksonJsonView but that didn’t work because the content-type had already been set to application/json. The solution I came up with was to duplicate some of the code (ugh) inside MappingJacksonJsonView to get the JSON as a string and to then write that to the response:

@RequestMapping
public void processFileUpload(HttpServletResponse response, Model model, ...) {

    ...

    //Set the content-type and charset of the response
    response.setContentType("text/plain");
    response.setCharacterEncoding("UTF-8");

    //I need to use another OutputStream here; I cannot use the response's OutputStream because that will cause errors
    //later on when the JSP needs to render its content (recall that getOutputStream() can only be called exactly once
    //on a response). Therefore I'm writing the data to a ByteArrayOutputStream and then writing the byte array from
    //the ByteArrayOutputStream to the response manually.

    ByteArrayOutputStream byteArrayOutputStream = new ByteArrayOutputStream();
    ObjectMapper objectMapper = new ObjectMapper();
    JsonGenerator generator = objectMapper.getJsonFactory().createJsonGenerator(byteArrayOutputStream, JsonEncoding.UTF8);

    //Before I can convert the data into JSON, I will need to filter some attributes out of the model (namely BindingResult)
    Map<String, Object> result = new HashMap<String, Object>();

    for(Map.Entry<String, Object> entry : model.asMap().entrySet()) {
        if(!(entry.getValue() instanceof BindingResult)) {
            result.put(entry.getKey(), entry.getValue());
        }
    }

    objectMapper.writeValue(generator, result);
    response.getWriter().write(new String(byteArrayOutputStream.toByteArray(), "UTF8"));
}

This still seems a little hacky to me. A possible improvement is to annotate the action with @ResponseBody and return the JSON as a string without involving the response at all. If anyone has a better solution, I’m all ears!

Although I pulled my hair out for an hour or two (I was getting a 404 when hitting my controller with with a .jsonp extension; I’ll explain why, later), the resulting solution is actually pretty simple. First, you need to extend MappingJacksonJsonView to create your own view. Since MappingJacksonJsonView already handles the creation of JSON, all we need to do is pad it with our callback. The way to do this is to override the MappingJacksonJsonView#render(Map model, HttpServletRequest request, HttpServletResponse response) method (This method is actually defined in AbstractView, a Spring-provided abstract class that you can override in your own view). The full source is below:

package net.vivin.mvc.spring.view.jsonp;

import org.springframework.web.servlet.view.json.MappingJacksonJsonView;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.util.Map;

public class MappingJacksonJsonpView extends MappingJacksonJsonView {

	/**
	 * Default content type. Overridable as bean property.
	 */
	public static final String DEFAULT_CONTENT_TYPE = "application/javascript";

    @Override
    public String getContentType() {
        return DEFAULT_CONTENT_TYPE;
    }

 	/**
	 * Prepares the view given the specified model, merging it with static
	 * attributes and a RequestContext attribute, if necessary.
	 * Delegates to renderMergedOutputModel for the actual rendering.
	 * @see #renderMergedOutputModel
	 */
    @Override
	public void render(Map<String, ?> model, HttpServletRequest request, HttpServletResponse response) throws Exception {

        if("GET".equals(request.getMethod().toUpperCase())) {
            @SuppressWarnings("unchecked")
            Map<String, String[]> params = request.getParameterMap();

            if(params.containsKey("callback")) {
                response.getOutputStream().write(new String(params.get("callback")[0] + "(").getBytes());
                super.render(model, request, response);
                response.getOutputStream().write(new String(");").getBytes());
                response.setContentType("application/javascript");
            }

            else {
                super.render(model, request, response);
            }
        }

        else {
            super.render(model, request, response);
        }
    }
}

The DEFAULT_CONTENT_TYPE public static property and the getContentType() method are important. Spring uses this method (among other things) to find the best candidate view. I spent at least an hour trying to figure out why I was getting 404′s. It was because I hadn’t overridden the property and the accessor to return the correct content-type. Going back to the render method itself, you can see that it’s pretty simple. First I make sure that the request method is GET. Then I get the request parameter-map and check for the callback parameter. If this parameter exists, I write out the name of the callback with an open parenthesis. Then I call the parent class’s render method. This method belongs to MappingJacksonJsonView and will write out JSON to the response. Finally, I write out a closing parenthesis and a semicolon to the response and set the content type to application/javascript. So as you can see, I’ve converted JSON into JSONP.

The next thing you need to do is include an entry for your new view in the springmvc-servlet.xml file. This part also took a little work. I wasn’t sure how to include my new view within the ContentNegotiatingViewResolver bean. But this post proved to be remarkably helpful. The post actually talks about returning XML or JSON (based on the extension), but I was able to adapt it to return JSON or JSON. Here’s what it looks like:

    <bean class="org.springframework.web.servlet.view.ContentNegotiatingViewResolver">
        <property name="favorPathExtension" value="true"/>
        <property name="mediaTypes">
            <map>
                <entry key="json" value="application/json"/>
                <entry key="jsonp" value="application/javascript"/>
            </map>
        </property>
        <property name="defaultViews">
            <list>
                <bean class="org.springframework.web.servlet.view.json.MappingJacksonJsonView"/>
                <bean class="net.vivin.mvc.spring.view.jsonp.MappingJacksonJsonpView"/>
            </list>
        </property>
    </bean>

If you notice, the value property for jsonp has been set to application/javascript. Spring uses this value and checks it against the view class to figure out the best candidate view. If you didn’t override the DEFAULT_CONTENT_TYPE property and the associated getter, you would get a 404.

Finally, you need a url-pattern entry under servlet-mapping in your web.xml file so that the new .jsonp extension is recognized:

    <servlet-mapping>
        <servlet-name>springmvc</servlet-name>
        <url-pattern>*.json</url-pattern>
        <url-pattern>*.jsonp</url-pattern>
        ...
    </servlet-mapping>

That’s pretty much it. With this code in place, you can hit your controller with http://my.domain.com/controllerName/actionName.jsonp?callback=myCallback and you’ll get your data back as JSONP! I thought this solution was pretty simple and a little less invasive than creating a filter. Comments/suggestions/criticisms for improvement are welcome!

I’m assuming that you already have Cygwin installed. If you don’t, you can get it from here. In addition to whatever other packages you have selected to customize your install, you also need development packages (gcc and friends), Xorg packages (headers, includes, and libraries), and a few graphics libraries (for aterm):

• Devel
  • gcc-core
  • gcc-g++
  • libXaw3d-devel (for xv)
  • libjpeg-devel (for aterm)
  • libpng12-devel (for aterm)
• Libs
  • jpeg (for aterm)
  • libXaw3d-devel
  • libXaw3d-7
  • libfreetype6
  • libjpeg-devel
  • libjpeg62 (for aterm)
  • libjpeg6b (for aterm)
  • libpng12 (for aterm)
  • libpng12-devel (for aterm)
  • libtiff5 (for aterm, xv)
  • zlib-devel (for aterm)
  • zlib0 (for aterm)
• Utils
  • bzip2 (to handle .bz2 files)
• X11
  • libX11-devel
  • xinit
  • xsetroot (if xv doesn’t work for you)

After Cygwin finishes installing those packages, grab the sources for libAfterImage, aterm, and xv. Unpack the sources perform the requisite steps to build and install from source (./configure, make, and make install should work if all goes well).

libAfterImage:

If you get “parse error before XErrorEvent” errors while building libAfterImage, make sure that you didn’t forget to select the X11 development package.

aterm:

gcc on Cygwin expects –rdynamic and not -rdynamic. If you’re seeing these errors, edit the Makefiles under src and src/graphics within the aterm source directory. Change the “-rdynamic” to “–rdynamic”. The changes should be on line 54 for both files.

xv:

Under the tiff directory within the xv sources, there is a file called RANLIB.csh. Edit this file and make sure that you ONLY have the following line in there:

ranlib $1 >& /dev/null

Otherwise the build process will fail. Additionally, you need to edit xv.h. This file lives right at the root of your xv source directory. If you do not perform the following change, you’ll get errors from gcc complaining that “sys_errlist has previously been defined”. Change line 119 of xv.h to:

/*extern char *sys_errlist[]; */    /* this too... */

What you’re doing is commenting out the definition for sys_errlist so that it doesn’t conflict with what has already been defined in the Cygwin header files. These changes should be the only ones you need to get xv compiling and running.

Now you need to set up two batch files. One to start up X rootlessly, and another to start up aterm. Before you do that, make sure you add C:\cygwin\usr\bin and C:\cygwin\X11R6\usr\bin to your PATH variable. You can do this by going to My Computer > Properties > Advanced > Environment Variables. If you don’t do this, you’ll get “cygwin1.dll not found” errors while trying to run these batch files. The X windows binaries used to live in C:\cygwin\usr\X11R6\bin, but have since been moved to C:\cygwin\usr\bin. Therefore, the start-up batch-file now looks like this:

xwin.bat:

C:\cygwin\usr\X11R6\bin\run.exe C:\cygwin\usr\bin\xwin.exe -multiwindow -clipboard -silent-dup-error
C:\cygwin\usr\X11R6\bin\run.exe C:\cygwin\usr\local\bin\xv.exe -display :0 -root -quit -be -max /cygdrive/c/Documents\ and\ Settings/vivin/My\ Documents/My\ Pictures/Wallpapers/01707_spectrumofthesky_1920x1200.jpg

The first line starts up the X windowing system. The second line sets the wallpaper using aterm. You now need another batch file to run aterm, and that looks like this:

aterm.bat

C:\cygwin\usr\X11R6\bin\run.exe C:\cygwin\bin\bash.exe --login -i -c "aterm -sh 80 -tr -trsb -fade 20 -tint gray -sb -st -sr -sl 1000 -tn xterm"

This file starts aterm with the background image at 50% brightness, transparent background, transparent scrollbar, 20% fading on losing focus, gray tint, scrollbar, trough-less scrollbar, scrollbar on the right, 1000 scrollback lines, and with xterm terminal emulation. Like I mentioned in my original guide. xv will sometimes fail to start with xwin. If that is the case, you can modify aterm.bat to look like this:

aterm.bat:

C:\cygwin\usr\X11R6\bin\run.exe C:\cygwin\bin\bash.exe --login -i -c "xv -display :0 -root -quit -be -max /cygdrive/c/Documents\ and\ Settings/vivin/My\ Documents/My\ Pictures/Wallpapers/01707_spectrumofthesky_1920x1200.jpg && aterm -sh 80 -tr -trsb -fade 20 -tint gray -sb -st -sr -sl 1000 -tn xterm"

Slightly inefficient, but it works. Now if you have a dual-monitor display, you’ll notice that the background image is stretched across both screens when you run aterm. This is probably not what you want. To fix this problem you need to change a few invocation options for xv. For this to work properly (meaning, not look crappy) both screens should be running at the same resolution:

xv -display :0 -root -quit -be -maxpect -rmode 1 /cygdrive/c/Documents\ and\ Settings/vivin/My\ Documents/My\ Pictures/Wallpapers/01707_spectrumofthesky_1920x1200.jpg

Notice the -maxpect and -rmode 1 options. -maxpect expands the image to fill the screen while maintaining the aspect ratio, while -rmode 1 sets the display mode on xv to tiled. So you should now have your wallpaper displaying on both screens now (under X) without being distorted.

Here’s what it looks like on my machine:

This is on a dual-monitor setup with both screens running at 1920×1200 resolution. I’ve set X’s background to be the same as my windows Wallpaper so that it looks cooler. Notice how the background image (inside aterm) is not stretched, but tiled across the two screens. That’s all there is to it. Seems like a bit of work, but I think it’s worth it. My main reason for going through all this trouble was to get a decent terminal running in windows. I guess I could have just used xterm, but aterm looks so much nicer, doesn’t it?

On any system that I plan to use for an extended period of time, I will always install Cygwin. This is mainly because I like have UNIX tools on Windows, and also so that I can use the console to do things that DOS is not able to do. I started using Cygwin in 2000, and I’ve continued using it since. One of the cool things you can do with Cygwin is run X, which means that you can have X applications running on the Windows desktop. When I was interning at Motorola, I used to run eXceed, with fvwm. This was where I first ran into aterm. What I liked most about aterm is the eye-candy. You can have transparent windows with shading effects and all sorts of other cool stuff. I tried to get aterm running on my machine at home by compiling it from source under Cygwin. I was eventually able to do this (install libjpeg, libpng, libAfterImage, zlib, and the X includes and libraries first), but what I didn’t like was the fact that you had to start up a Cygwin console to open up X, and then aterm. I wanted aterm to start up and run directly without that ugly DOS/Cygwin console window. Of course, you can’t simply run the aterm executable because it needs X and Cygwin to be running. I eventually figured it out (actually a few months before leaving on my “extended vacation”) by starting out with X running with a rootless window. Oh, and run.exe proved to be very helpful. Anyway, here is how you do it:

First you need to add C:\cygwin\bin to your PATH Environment Variable. You can do this from My Computer > Properties > Advanced > Environment Variables. You might also have to add C:\cygwin\usr\X11R6\bin to PATH.

Then you need to create two batch files. The first one is to start X, and the second one is to start aterm (or whatever X app you want to start). The example I’m going to show includes starting up X with a wallpaper (using xv), and then running aterm. I run aterm with a transparent background, using the X wallpaper. However, you can also load aterm with a background image of your choice.

The batch file to start X, which I call xwin.bat looks like this:

C:\cygwin\usr\X11R6\bin\run.exe C:\cygwin\usr\X11R6\bin\xwin.exe -multiwindow -clipboard -silent-dup-error
C:\cygwin\usr\X11R6\bin\run.exe C:\cygwin\usr\local\bin\xv.exe -display :0 -root -quit -be -maxpect /cygdrive/c/Wallpapers/upper_limit_wp_dark_1600.jpg

This will start up X in a rootless window with upper_limit_wp_dark_1600.jpg as your X wallpaper. Next, you write a batch file (aterm.bat) that will load aterm:

C:\cygwin\usr\X11R6\bin\run.exe C:\cygwin\bin\bash.exe --login -i -c "aterm -sh 50 -tr -trsb -fade 20 -tint gray -bl -sb -st -sr -sl 1000 -tn xterm"

This batch file will load aterm with the background image at 50% brightness, transparent background, transparent scrollbar, 20% fading on losing focus, gray tint, borderless window (sometimes works), scrollbar, trough-less scrollbar, scrollbar on the right, 1000 scrollback lines, and with xterm terminal emulation. One issue I have had with this, is that aterm may load up with the default (checkered) X background. This is because the xv did not properly execute in xwin.bat. I have no idea why this happens, sometimes it works, and sometimes it doesn’t. If it doesn’t, you can modify aterm.bat:

C:\cygwin\usr\X11R6\bin\run.exe C:\cygwin\bin\bash.exe --login -i -c "xv -display :0 -root -quit -be -max /cygdrive/c/Wallpapers/upper_limit_wp_dark_1600.jpg && aterm -sh 50 -tr -trsb -fade 20 -tint gray -bl -sb -st -sr -sl 1000 -tn xterm"

This batch file will load xv every time you start aterm, so there is a slight performance hit on startup. However, it’s not that big of a deal because the xv instance quits right after it sets up the wallpaper, and so you’re not loading a new instance of xv into the memory every time.

Well, there you have it. I hope it was helpful!

Screenshot of my XP desktop, with aterm, xcalc, xclock, xeyes, and xterm running

You should be able to get it to work using any Jabber client. I’ve been trying to get it to work on Trillian, but I’ve been having some trouble. I’ve set my username as [my gmail id]@gmail.com and the server as talk.google.com. Trillian authenticates, but then quits after receiving “iq errors”:

[Tuesday, August 23, 2005 - 17:04:55] *** Creating connection "[my gmail id]@gmail.com/"
[Tuesday, August 23, 2005 - 17:04:56] *** Server supports TLS encryption...
[Tuesday, August 23, 2005 - 17:04:56] *** Negotiating XMPP SSL connection...
[Tuesday, August 23, 2005 - 17:04:57] *** Connection established using EDH-RSA-DES-CBC3-SHA (TLSv1/SSLv3)
[Tuesday, August 23, 2005 - 17:05:05] *** Attempting to authenticate using PLAIN
[Tuesday, August 23, 2005 - 17:05:06] *** Authenticated.
[Tuesday, August 23, 2005 - 17:05:15] *** You have successfully connected to Jabber.
[Tuesday, August 23, 2005 - 17:05:15] *** ERROR: iq error 501
[Tuesday, August 23, 2005 - 17:05:15] *** Retrieved user roster from server.
[Tuesday, August 23, 2005 - 17:05:16] *** ERROR: iq error 501
[Tuesday, August 23, 2005 - 17:05:16] *** ERROR: iq error 503 from gmail.com
[Tuesday, August 23, 2005 - 17:05:16] *** ERROR: iq error 503 from gmail.com

If anyone has had anymore success, please let me know. I’m not sure how popular this is going to be; people usually tend to stay within a particular “IM clique” (with AIM, MSN Messenger, and Yahoo! Chat being the major players). I use Trillian so that I can talk people in any one of these “cliques”.

This ends months of speculation and rumours about Google’s foray into the IM arena. I wonder what’s next?

UPDATE #1

I tried it again, this time with “Trillian” in the “Resource” field, no luck – Trillian still loses connection to the server. It comes up with a bunch of “Connection lost to server” errors.

[Tuesday, August 23, 2005 - 17:44:00] *** Creating connection "[my gmail id]@gmail.com/Trillian"
[Tuesday, August 23, 2005 - 17:44:01] *** Server supports TLS encryption...
[Tuesday, August 23, 2005 - 17:44:01] *** Negotiating XMPP SSL connection...
[Tuesday, August 23, 2005 - 17:44:02] *** Connection established using EDH-RSA-DES-CBC3-SHA (TLSv1/SSLv3)
[Tuesday, August 23, 2005 - 17:44:10] *** Attempting to authenticate using PLAIN
[Tuesday, August 23, 2005 - 17:44:16] *** Authenticated.
[Tuesday, August 23, 2005 - 17:44:21] *** Connection lost to server.
[Tuesday, August 23, 2005 - 17:44:21] *** Connection lost to server.
[Tuesday, August 23, 2005 - 17:44:21] *** Connection lost to server.
[Tuesday, August 23, 2005 - 17:44:21] *** Connection lost to server.
[Tuesday, August 23, 2005 - 17:44:22] *** Connection lost to server.
[Tuesday, August 23, 2005 - 17:44:22] *** Connection lost to server.
[Tuesday, August 23, 2005 - 17:44:22] *** Connection lost to server.

UPDATE #2

I found this site that has instructions on getting Google IM to work through Jabber on Trillian. It has the same settings that I use, but they claim to have gotten it to work; although I see the same “Connection lost to server” errors on their status window as well. I also noticed that their status window shows the authentication being done with “username@talk.google.com” as oppsed to “username@gmail.com”, which is what I’m seeing.

UPDATE #3

Success (sort of)! It works now – I didn’t do anything different, I tried disconnecting and reconnecting, and now the connection seems to be stable. However, I’m unable to add anyone, or IM them. I tried adding myself, but was unable to do so. I’ll keep playing around anyway… Here are a few screenshots:

UPDATE #4

It looks like it’s working now – I still lose connection occasionally, but it seems much more stable than before. I have also been able to add people and IM them.

I remember when I used to use Internet Explorer because I didn’t think there were any good browsers out there. I also remember when I even flamed Mozilla (I knew this would bite me in the ass later), but that was because this guy I didn’t like, who I used to work with, used it and it was kinda like a “guilty by association” thing. But anyway, this right here, is really noteworthy. I don’t think any other Open Source project has even grabbed the attention of your every day computer user as much as Firefox has.

Ever since I downloaded Firefox I’ve had a markedly better browsing experience. No pop-ups, no browser hijacks, and tabbed browsing! I don’t even know how I got along without it! Firefox wins hands down over IE with its simplicity, speed, functionality and inuitive browsing experience. Why don’t you Open Source critics take a look at this? If they think Open Source can’t produce anything worthwhile, they should take a look at this. This is what Open Source can achieve. Firefox is well on its way to being a household name.

Congratulations to the Firefox team! Also, if you don’t have Firefox, go and get it now!