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:
      
      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

      

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:

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.

Endless Pagination – Load content using DevExpress ASP.NET while scrolling

Check out this solution to provide an ‘endless pagination’ feature to your DevExpress ASP.NET enabled websites:

A DevExpress ASP.NET Approach

You can achieve the above sample using these DevExpress ASP.NET controls:

• ASPxCallback
• ASPxLoadingPanel
• ASPxPanel
• JavaScript methods from our ASPxClientUtils object

Take a look at this code central sample here:

ASPxCallback – How to load the content while scrolling – Auto page growth on scrolling down (online demo)

I’ll talk about the magic of the JavaScript code below but first, let’s look at the general problem and why using an ‘endless pagination’ solution can help.

Large Datasets

Large datasets on the web are not uncommon anymore. So how do you deal with these large amounts of data without overwhelming the user with a ton of information at once? You paginate the data into smaller chunks:

Endless pagination or infinite scrolling

Endless pagination (or infinite scrolling) is used by many companies like Facebook.com, Bing.com, twitter.com, etc.

This behavior is useful when there is a lot of data to be presented on a page. But it is not necessary to load and display all the data at once since most of it may not be needed. However, load a small set of data and then if the user scrolls down the then then automatically load more data. (See the animated gif above for a sample).

Why use endless pagination?

I recommend this approach for 2 reasons:

1. Performance – Your websites are faster when you don’t have to display thousands of rows and hundreds of columns at once.
2. Flow – The end-user is presented with information they can scan/read and then seamlessly load more information using AJAX to continue their experience.

Jeff Atwood (aka CodingHorror.com) has a fantastic blog post titled “The End of Pagination“. Here are some key quotes from the post:

In a perfect world, every search would result in a page with a single item: exactly the thing you were looking for.

Pagination is also friction.

I’m not necessarily proposing that all traditional pagination be replaced with endless pagination. But we, as software developers, should avoid mindlessly generating a list of thousands upon thousands of possible items and paginating it as a lazy one-size-fits-all solution. This puts all the burden on the user to make sense of the items. Remember, we invented computers to make the user’s life easier, not more difficult.

The end-user does usually prefer to see all the data as this Google research confirms:

User testing has taught us that searchers much prefer the view-all, single-page version of content over a component page containing only a portion of the same information with arbitrary page breaks.

Interestingly, the cases when users didn’t prefer the view-all page were correlated with high latency (e.g., when the view-all page took a while to load, say, because it contained many images). This makes sense because we know users are less satisfied with slow results. So while a view-all page is commonly desired, as a webmaster it’s important to balance this preference with the page’s load time and overall user experience.

And endless-scrolling does come with its own drawbacks like scrollbar issues, deep linking, back button position, and other issues mentioned in Jeff’s excellent article:

The End of Pagination

Experiment, iterate, experiment…

Iterating and testing various usability scenarios is key to good UI. I recommend that you try the endless-pagination using the DevExpress ASPxCallBack, ASPxLoadingPanel, etc. In fact, this feature is built into the ASPxGridView: Demo ASPxGridView Virtual scrolling/paging

Above all else, you should strive to make pagination irrelevant because the user never has to look at more than a few items to find what they need. -Jeff Atwood

Perhaps the best approach for you might be to simply provide your end-users with one search box that loads the results of a search keyword (yes, like Google.com or Bing.com). Take a look at the ASPxGridLookup’s Incremental filtering in Server Mode feature.

Sample code flow

The code central sample has the following flow of actions:

1. After rendering, the user scrolls down the page and we handle the ‘scroll’ event of the browser window.
2. When scrolling reaches the page’s bottom, we generate a callback (using ASPxCallback) to obtain a new data portion from the server.
3. Then, we add the received items to the end of the dataContainerElement DIV element.

Take a look at the JavaScript code in the default.aspx to learn more.

 

Please leave me a comment below as I’d love to hear your thoughts on how you help your users with larges amounts of data presentation. Thanks!

iPhone Slow To Respond When Playing A Song?

My iPhone 4 has this annoying issue when playing a song. It freezes and locks up the iPhone while the song continues to play. The iPhone would not respond to ANY of the buttons for a good 30 seconds or so.

With the help a good friend, we investigated the issue and found something very unusual. (Btw, when I say we, he did 99% of the work).

Mashups, FTW!

First, let’s take a look at the specific songs and album. It’s a great mashup  album from the one-man band called Girl Talk.

Check out this great website that gives you a visualization of the many tracks that are used in the mashups. And, you can listen online too:

You can download it for free here (click on the image):

Album Art – The Culprit

Turns out the problem is not the mp3 but the album art that somehow got embedded in it. A few of the tracks had a JPEG album art file with embedded information from the original TIFF file. That’s not so much the problem. The problem was that the image size was 3744×3744. The image was taken with a Canon EOS 5D Mark II and the TIFF was created from Adobe Photoshop CS4 Mac.

How did we find all this info?

1. Using a different MP3 player (MediaMonkey) loaded the mp3s and viewed their properties.
2. Then saved the artwork to hard drive.
3. Viewed that artwork in an image viewer.

The Fix

Fix, is very simple.

Remove all embedded images in the mp3. Then, add a new image, with a smaller size.

I’m not sure whether the original mp3s had the large image issue or perhaps I accidentally added the large album art myself.

Lesson here, check your mp3s if your iPhone is slow to respond when playing certain songs.

Google Photos Screensaver on Windows 7 x64

I really like the Google Photos Screensaver because of it’s excellent visual effects options like the “Ken Burns effect” aka “Pan and Zoom“:

And it works great on dual monitors too by showing different pictures on both. As you can see from the settings image above, it can load images from the web, rss, or your local machine.

Oh and it’s free! Get the screensaver by installing Picasa, Google’s awesome photo manager: http://picasa.google.com/ (The Google Photos screensaver used to be part of the now defunct “Google Pack”.)

Unfortunately, the Google Photos screensaver has an annoying issue if you run it on a Windows 7 64 bit machine. It will cause screen flickering and not show any of the images you asked for!

Why? Because of the “On resume, display logon screen” option:

The solution is to uncheck that the “On resume…” box. This sucks if you like to have your machine auto-locked when the screensaver kicks in. Not a big deal for me since I’m used to using the “Window+L” keys to lock my machine.

Sadly, Google has known about this bug for almost 3 year now and it’s still not fixed. Since they’ve started focusing more on their profitable products (right move, imho), it’s unlikely that we’ll see bugs like this get fixed. Oh well. Google Photos Screensaver is still fantastic. Better than the Windows Live Photo Gallery screensaver, imho.

Free data sets – Northwind alternatives

At my day job, I write a lot of demos for videos, webinars and basically to help customers/developers. And the number one source of data used for these demos? Northwind.

Why?

1. Great set of various data to bind to different things like grids, reports, and charts.
2. It is used by many Microsoft samples.
3. Available for SQL Server and Microsoft Access.
4. Easily distributable.

So what’s problem? It’s a bit boring to always use the same set of data. In fact, Scott Hanselman even tried to stir the community with a call to action to come up with sources other than Northwind. That was back in 2008 and unfortunately, not many other sources were offered.

So, I’ve scoured the internet and below are several resources that I’ve found. Warning: You may need to “clean-up” this data. And you may also need to import it to your database of choice.

Fresh Data For Free

Good news, it’s easy these days to find interesting sources of data. And for free. If you’re willing to dig around and clean up some of the data, it’s right there for the taking.

Here’s a few:

 FreeBase.com Freebase is a large collaborative knowledge base consisting of metadata composed mainly by its community members.

Freebase data is available for free/libre for commercial and non-commercial use under a Creative Commons Attribution License, and an open API, RDF endpoint, and database dump are provided for programmers. –Wikipedia

Download the latest dumps directly from here:

http://download.freebase.com/datadumps/ – Browse the latest dumps

Government Data

The US government has made available lots of government data. Not all of it is interesting or even ‘clean’. However, there is lots of data:

• http://www.itdashboard.gov/data_feeds
• http://gbk.eads.usaidallnet.gov/data/detailed.html
• http://explore.data.gov/Foreign-Commerce-and-Aid/U-S-Overseas-Loans-and-Grants-Greenbook-/5gah-bvex
• http://www.usa.gov/
• http://www.usaspending.gov/data
• http://gsociology.icaap.org/data.htm

Other sources

For reference – Stackoverflow –

• Free Large datasets to experiment with Hadoop
• Datasets for Running Statistical Analysis on
• Freely available example datasets of hierarchical information, and realistic names

Amazon Web Services offers some public data sets as well. Though you will need an Amazon EC2 account.

Tim Berners-Lee on the next web

Here’s an interesting talk about data and the next web from the father of the internet, Tim Berners-Lee:

Do you have other sources of data? Drop me a note below. Thanks!

ASP.NET HTML Editor – Keyboard Shortcuts

Keyboard shortcuts are great. Especially when you’re writing in an online HTML editor, because they don’t require you to take your hands off the keyboard!

The DevExpress ASPxHtmlEditor editor provides many popular keyboard shortcuts as defaults.

And in the latest release of DXperience v2011.2, we added the ability for you to customize these keyboard shortcuts for your end-users (S38048).

Default Shortcuts

Here’s the list of the default ASPxHtmlEditor keyboard shortcuts.

Notice that the ASPxHtmlEditor provides a way for you to create hyperlinks using the common ‘Control + K’ keyboard shortcut found in many popular office products. Personally, I love that shortcut!

Try it now online: http://demos.devexpress.com/ASPxHTMLEditorDemos/Features/General.aspx

Shortcut	ActionName	Description
Ctrl+A	selectall	Selects the entire content
Ctrl+B	bold	Applies bold formatting to the selected text
Ctrl+C	kbcopy	Copies the selection
Ctrl+E	justifycenter	Justifies text center
Ctrl+G	insertimagedialog	Invokes the Insert Image Dialog
Ctrl+I	italic	Applies italic formatting to the selected text
Ctrl+J	justifyfull	Justifies text
Ctrl+K	insertlinkdialog	Invokes the Insert Link Dialog for the selection
Ctrl+L	justifyleft	Justifies text left
Ctrl+P	print	Prints the editor’s content
Ctrl+R	justifyright	Justifies text right
Ctrl+U	underline	Underlines the selected text
Ctrl+V	kbpaste	Pastes content from the clipboard
Ctrl+X	kbcut	Cuts the selection
Ctrl+Y	redo	Redoes the last undone action
Ctrl+Z	undo	Undoes the last action
Ctrl+Ins	kbcopy	Copies the selection
Ctrl+Shift+K	unlink	Unlinks the selection
F11	fullscreen	Activates/deactivates the full-screen mode
Shift+Del	kbcut	Cuts the selection
Shift+Ins	kbpaste	Pastes content from the clipboard

 

Customization

There are two ways to customize the keyboard shortcuts, at design-time and runtime.

Design-time

In fact, you can redefine default shortcuts and create custom shortcuts at design time in two ways: using a shortcut editor or directly in a markup. To display the shortcut editor, click the Shortcuts property’s ellipsis button in the Properties window while designing.

The code sample below demonstrates how you can specify shortcuts in markup. The first shortcut invokes a MyDialog custom dialog. The second shortcut redefines a default Ctrl+B shortcut. The third shortcut assigns the default command bold to custom shortcut.

Note that other default shortcuts (except Ctrl+B) are still in effect.

<dx:ASPxHtmlEditor ID="MyHtmlEditor" runat="server">
     <CustomDialogs>
          <dx:HtmlEditorCustomDialog Caption="My Custom Dialog" 
          FormPath="~/CustomDialogs/MyCustomDialog1.ascx" Name="MyDialog" />
     </CustomDialogs>
     <Shortcuts>
          <dx:HtmlEditorShortcut ActionName="MyDialog" ActionType="ShowCustomDialog" Shortcut="Ctrl+D" />
          <dx:HtmlEditorShortcut ActionName="backcolor" Shortcut="Ctrl+B" />
          <dx:HtmlEditorShortcut ActionName="bold" Shortcut="Alt+B" />
     </Shortcuts>
</dx:ASPxHtmlEditor>

 

Runtime

The ASPxHtmlEditor allows you to modify any shortcuts at run time. Simply use the methods provided in the HtmlEditorShortcutCollection collection.

The code sample below demonstrates how you can modify a shortcut collection at run time:

• The first shortcut invokes a MyDialog custom dialog.
• The second shortcut redefines a default Ctrl+B shortcut.
• The third shortcut assigns the default command bold to a custom shortcut.

Note that other default shortcuts (except Ctrl+B) are still in effect.

using DevExpress.Web.ASPxHtmlEditor;

...

protected void Page_Load(object sender, EventArgs e) {
     if (!IsPostBack) {
          MyHtmlEditor.Shortcuts.Add("Ctrl+D", "MyDialog", ActionType.ShowCustomDialog);
          MyHtmlEditor.Shortcuts.Add("Ctrl+B", "backcolor");
          MyHtmlEditor.Shortcuts.Add("Alt+B", "bold");
     }
}

 

ASP.NET MVC Supported too!

These shortcuts can also customized for the DevExpress ASP.NET MVC HTML Editor extension too!

 

What custom shortcuts have you added to the ASPxHtmlEditor? Drop me a line below with your thoughts, thanks!

Save time and money…

Save time and money with high quality pre-built components for ASP.NET, Windows Forms, WPF, Silverlight and VCL as well as IDE Productivity Tools and Business Application Frameworks, all backed by world-class service and support. Our technologies help you build your best, see complex software with greater clarity, increase your productivity and create stunning applications for Windows and Web in the shortest possible time.

Try a fully-functional version of DXperience for free now: http://www.devexpress.com/Home/Try.xml

How to present PowerPoint slides with a WinForms Tiles App

Check out this slick little application I built using the new DevExpress WinForms Tile controls for my touch webinar:

Quick & fun

This app took me about 15 minutes to create. And I wrote it for 2 main reasons:

1. It’s a fun way to learn the new DevExpress WinForms Tile suite
2. And it’s a great way to show touch features

Creating a slick and useful app quickly like my TileControlPowerPoint is what DevExpress productivity is all about.

How it’s made…

This visually stunning application is simple and it follows most of the steps outlined in the following videos:

• WinForms Tile Control – Getting Started
• Watch this video – Take a tour of DXv2: Touch

Here’s the general steps:

1. I started by creating a new (blank) WinForms app.
2. Added the DevExpress XtraTile control, then 1 group and 1 tile. Watch this video to learn how.
3. Added a green metro-style background image and customized the tile to make it larger.
4. Added the code below to look for a ‘Slides’ folder and then dynamically create tiles based on the slides. This saves the trouble of manually creating each tile.
5. Finally, I set the base form is also set to maximum and without a title bar.

Note: I use the background image property of the tiles to show the slides. These images were originally developed in PowerPoint and it’s very easy to save your slides as images.

Download

Download the full source code of the TileControlPowerPoint WinForms touch application here:

TileControlPowerPoint.zip

DemoWare

Warning: This was a small fun app I wrote in 15 minutes. As such, I don’t recommend hard coding strings (the way I did). In fact, feel free to Refactor the small amount of code below. It dynamically creates tiles and uses the images for background so you don’ t need to do it at design-time:

string path = AppDomain.CurrentDomain.BaseDirectory + @"slides";
private void LoadItems()
{
    if (Directory.Exists(path))
    {
        tileControl1.BeginUpdate();
        int filesCount = Directory.GetFiles(path).Length;
        for (int i = 1; i < filesCount; i++)
        {
            string fileName = path + "\\Slide" + i + ".png";
            TileItem item = new TileItem() { IsLarge = true, BackgroundImage = Image.FromFile(fileName) };
            tileGroup2.Items.Add(item);
        }
        tileControl1.EndUpdate();
    }
    else
    {
        MessageBox.Show("Slides not found");
        if (System.Windows.Forms.Application.MessageLoop)
        {
            Application.Exit();
        }
        else
        {
            System.Environment.Exit(1);
        }
    }
}

Check out the recent touch webinar and download the app I used to present the slides. Then drop me a line below with your thoughts. Thanks!

DXperience? What’s That?

DXperience is the .NET developer’s secret weapon. Get full access to a complete suite of professional components that let you instantly drop in new features, designer styles and fast performance for your applications. Try a fully-functional version of DXperience for free now: http://www.devexpress.com/Downloads/NET/

Chrome – Save all tabs without a plugin

Here’s a quick and easy way to save/bookmark all Chrome tabs without using a plugin:

>> CTRL+SHIFT+D keyboard shortcut

Tip found from this thread.

How To Resize A VirtualBox VM In 3 Easy Steps

VirtualBox does not make resizing a VM easy. Luckily, I’ve collected the 3 necessary steps that you’ll need to resize your VDI files:

Step 1 – Create a New and Bigger VDI file

Use the VirtualBox ‘Virtual Media Manager’ GUI to create a new VDI file that is larger in size.

Step 2 – Use the ‘VBoxManage CloneHD’ Command

This command will copy the original to the New and larger VDI. Open a command window and call this command from the VirtualBox directory. Be sure you properly reference the correct files, for example, here the command I used:

C:\Program Files\Oracle\VirtualBox>vboxmanage clonehd –existing E:\virtualboxORIGINAL.vdi C:\Users\Mehul\.VirtualBoxHardDisksNEW_BIGGER.vdi

Sun VirtualBox Command Line Management Interface Version 3.1.8

(C) 2005-2010 Sun Microsystems, Inc. All rights reserved.

0%…10%…20%…30%…40%…50%…60%…70%…80%…90%…100%

Clone hard disk created in format ‘VDI’. UUID: 7099c645-15c2-4656-bf90-27a444444444444

Step 2 (optional) – Call ‘setvdiuuid’ in case of an issue

Try to start your VM now that points to the NEW_BIGGER.vdi file. If you get an unusual error like this one:

Cannot register the hard disk ‘PATH’ with UUID {id goes here} because a hard disk ‘PATH2’ with UUID {same id goes here} already exists in the media registry (‘PATH to XML file’).

Then use the following command on your NEW_BIGGER.vdi:

C:\Users\Mehul\.VirtualBoxHardDisks>”C:\Program Files\Sun\VirtualBoxVBoxManage.exe”
internalcommands setvdiuuid MHDXDT1_Laptop.vdi

Sun VirtualBox Command Line Management Interface Version 3.1.8
(C) 2005-2010 Sun Microsystems, Inc. All rights reserved.

UUID changed to: d4c86bf9-3739-4894-9fee-0ec8342432a

Take note that I ran that command from the directory location of the NEW_BIGGER.vdi file. For a good explanation of this command, check out this post.

Step 3 – Resize the local drive in the VM

Your NEW_BIGGER.vdi is larger than before. However, as a final step, you need to increase the local drive in the VM. Windows 7 makes it easy with the disk management.

• From control panel, bring up ‘Disk Management’.
• Right click on your local C: drive (Disk 0 usually)
• Select ‘Extend Volume’

The process is pretty easy to figure out. If you need more info and images then check out this post for a more detail.

And that’s it! You’re done. You now have a bigger drive.

Easy, wasn’t it?

Thanks to this post for majority of the initial guidance.

AutoHotKey – Easily Create An HTML Link

I’m huge fan of AutoHotKey which saves me a ton of time in not having to type repetitive keystrokes. Basically, it helps me be a better keyboard ninja.

Often for blog posts, I need to encapsulate a link with a HTML anchor tag. So that http://Mehul.net becomes http://Mehul.net

So I’ve hacked up the following AutoHotKey script which allows you to highlight a link and press Control+Shift+L and it automagically converts into an HTML anchor tag.

Copy this script into a autohotkey script. Load the script. Select an HTML link and press Control+Shift+L.

;————————————————————-
; Create A Link — Ctrl+Shift+L
;————————————————————-

^+l::
{
Send, ^c
Sleep 50
var=% “” . clipboard . “”
clipboard=% var
Send, ^v
Return
}

To learn more about AutoHotKey, check out these LifeHacker posts:

Turn Any Action into a Keyboard Shortcut

Hack Attack: Knock down repetitive email with AutoHotKey