Microsoft has some pretty cool WPF/e samples available here. One of them is an onscreen piano that boasts some finely rendered images of a piano. The applet is simple enough: Type the letter C and the C key is shown pressed and a C note is played. Type an E and an E is played. After playing with this applet a bit, I began to wonder about touch-enabling the program for something like a touch-enabled Lenovo X60 or even better yet a UMPC.
In the case of the UMPC, the first issue that you encounter when trying out the GrandPiano sample is that the images are all too big. They span 1024 pixels in width, which is too wide for many UMPCs. Most UMPCs have a native resolution of 800×480. So the first thing I did was resize the images. I reduced the image widths down to 760.
Next up I needed some code to determine when a user has pressed or clicked on one of the keyboard keys. This is done simply enough by defining closed polygons for the areas of each key and testing whether a given mouse event occurs inside one of those polygons. If it does, then that corresponding key is pressed and its node is played. Now I just needed a routine to determine if a given point is inside a polygon. Google time. Sure enough there are some code samples online. All I needed to do was port one to Javascript and define a polygon for each key. (This is where Gavin Gear’s PathMaker utility would have been useful. I built some polygons by hand.)
With these simple changes I was ready to try out the touch-enabled version of the GrandPiano. It loaded up and played well on a Tablet PC as I clicked with the mouse. Good so far. Then I tried tapping the keys with the stylus. The notes played, but the image of the keypress didn’t occur. Hmmm.
Time to try out the UMPC. What do you know? The same thing. When I touch the keys, the notes play, but the images don’t update. (I also noticed some event sequencing problems in the program that need to be fixed, but I’ll get to those once I figure out these other rendering issues.)
I did some experimenting: tapping fast, slow, sliding a stylus across the keys rather than just tapping, and so on. Some worked better than others. I tried placing some alert messages in the code. The images started rendering. Interesting. Looks like the stylus or touch is supressing the rendering some how. This was all in Vista. I tried an XP system running an external Wacom digitizer. Same thing. Hmmm.
I’m using the February CTP of WPF/e so clearly we’re talking beta code here. That could explain everything. I’ll play with things to see if I can get the images to update as well as create some simple test apps to better understand what is going on.