Windows Hand Cursor: How to show a pointing finger for mobile demos

Wouldn’t it be cool to turn the Windows cursor into realistic finger for touch software demos and general fun?

That’s what I thought to myself while I was preparing for my latest webinar presentation. I’m not sure if I dreamed the idea or I saw someone do it on a Mac but I thought it would make the demo more interesting if I could pull it off.

CursorAttention to the rescue

Luckily, there is a great piece of free and open-source .NET software called PenAttention.

PenAttention is a free Windows program that displays a highlight, pencil, or pointer at the location of the pen. It’s intended for use in presentations on a Tablet PC so your audience can see what you’re pointing at on the screen, since most programs show the pen’s location with an eensy-weenie-teenie-tiny dot that is almost impossible to see on a projector screen. For a demo, see the overview video.

However, since Tablet PC are no longer the norm, you likely want to get CursorAttention:

The sister program, CursorAttention, is designed to run on Windows machines that are not Tablet PC’s. This may be useful if you wish to highlight the mouse location or use a non-active digitizer (e.g. an external tablet).

CursorAttention is not exactly like PhoneFinger because it was created for a different purpose. However, by adding one file, we can get the same functionality as PhoneFinger to demo mobile apps on a Microsoft Windows machine.

Steps

  1. Download CursorAttention and install it.
  2. In the CursorAttention install folder, add a file called CustomPen.png.
    1. The folder on a Windows 7 machine is typically located here:
      C:\Program Files (x86)\CursorAttention
    2. What is CustomPen.png? This is a custom image that is attached to the mouse cursor. In our case, we’ll want a PNG image of a hand with a pointing finger.
    3. I took a diagonal picture of my own hand:
      CustomPen
      It didn’t actually look like that. The picture above is the final product after my friend Drew used his mad Photoshop skillz to create a transparent background and clean up the image.
    4. I simply took that image above and dropped it into the CursorAttention folder and renamed the image CustomPen.png.
  3. That’s it. Now, run CursorAttention.
    1. Right click on the system tray menu.
    2. Select ‘Show Pencil’ and enjoy Smile

      image

Of course, the CustomPen.png image can be anything, a lolcat or bunny but it makes sense to use a hand for mobile device demos. In fact, I used this technique in a recent webinar to show the slick DevExpress ASP.NET solution to developing apps for the iPad.  Watch the webinar video below:

Mehul Harry DevExpress ASP.NET iPad Apps Webinar

 

I had a lot of fun using CursorAttention and found that the hand cursor really helped the viewers to better visualize iPad touch apps when demoed from Microsoft Windows.

Level Up

The CursorAttention solution with a custom hand image works really well except for one small problem:

image

At the tip of the finger, it kept the native Windows cursor too which ended up overlapping on top of the finger.

Here’s an easy workaround, use these free “Small Dot” cursors. They are small enough not to overlap. Simply download and install them. Unfortunately, you have to manually set each cursor in windows. However, once that is done, you have a tiny dot that is hardly noticeable with the main finger cursor.

Try this solution the next time you have demo mobile app on Windows and would like to use a hand/finger cursor. Then leave me a comment below with your thoughts. Thanks.

Advertisements

3 comments

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s