Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles
(untagged)

LooLoo eCard Editor for Pocket PC

0.00/5 (No votes)
19 May 2004 1  
Send a personalized Flash e-card from your Pocket PC.

Sample Image - looloo_editor.gif

Introduction

This application aims to personalize your e-card. With it, you can paint your card with "Chinese Brush", of course simulated with the stylus pen, and send it to your friend from your PocketPC. In several seconds, your friend will receive this special e-card. Here is an example e-card (click this link) which I sent from my Pocket PC simulator. I have not yet tested it with a real PDA. If you could do it, please give me some feedback or maybe a bug report.

How It Works?

An overview of its workflow may help you well understand this application. At first, you paint your e-card with a stylus pen, which will be simulated as a Chinese Brush. It is said that the PocketPC screen will be "pressure sensitive". More strongly you press on the screen, bigger the brush stroke becomes. This is a key algorithm in the application. I will explain it briefly in the next section. You can change the brush size and the brush color at runtime (refer to Figure 1).

Figure 1. Interface

When you paint your card, your painting trace will be recorded in background. If you think your card is not wonderful enough, click the button "New" to discard it and start a new one. The function "Clear" is different from it, it does not discard the current card, but just clears the screen for painting more. You can preview your card by clicking the button "Playback" at anytime. When you are satisfied with your card, click the button "Send", a Send Form will pop up (refer to Figure 2). Here, you enter some necessary information to send your e-card.

Figure 2. Send Form

Now, your card will be sent with a webservice, check this URL to find more details about it.

Your card will be saved in the database and two emails will be sent, one for you, and the other for your friend. If your friend opens this email with Outlook or some other email software supporting embedded Flash, he/she could read your card directly, look at Figure 3:

Figure 3. Open a LooLoo eCard with Outlook Express

If he/she could not view the Flash animation, he/she can click the URL (look at line 2, there is a link "OpenVue.net") and a LooLoo eCard will be opened by Internet Explorer or other web navigators (refer to Figure 4), of course a Flash Player plug-in should be already installed.

Figure 4. Open a LooLoo eCard with Internet Explorer

Attention, from this page, he/she can also download the e-card as a single Flash file (.swf) by clicking the link "Download". Really cool, isn't it?

Algorithm

How to simulate a pressure sensitive pad/screen may be an interesting issue for you. Now, I would like to introduce this algorithm briefly.

Several years ago, when I used the Corel Painter, I was astonished by its rich art brushes. As a curious man, I tried to search such an algorithm from Google and I failed. It seems a secret. Two weeks ago, I have an idea to design an e-card system which allows you to paint an e-card with a Chinese Brush, now I have to develop an art brush algorithm myself. Fortunately, I wrote one within a weekend and it seems to work well.

Of course, with a normal mouse/stylus pen, no pressure information could be available. But we can suppose that there is a scaling relation between the pressure and the interval the mouse/stylus pen stays at the same position. Now, for each point in the mouse/stylus pen trace, we should store two information : its coordinate (x, y) and the interval the mouse/stylus pen stays on it. Look at Figure 5. Let's suppose there are three points along the mouse move trace: P1, P2 and P3. Their respective mouse staying intervals are 0.002ms, 0.001ms and 0.003ms. It is the first step, storing necessary information.

Figure 5. Theory of Simulated Pressure Sensitive Pad/Screen

Now step 2, we calculate some circles around these three points, their radii have a scaling relation with their mouse staying intervals. Final step, connect these circles and fill them with an assigned color. This is the basic theory behind. However, when you check my C# code, you may find some differences. It is because I have done some optimization on this algorithm.

Conclusion

I wrote this application for the Mobile Developer competition. If you find it useful and interesting, it would be a great pleasure for me.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here