Click here to Skip to main content
15,895,606 members
Articles / Mobile Apps

LooLoo eCard Editor for Pocket PC

Rate me:
Please Sign up or sign in to vote.
4.31/5 (28 votes)
19 May 2004CPOL4 min read 61.9K   157   15   6
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

Image 2

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

Image 3

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

Image 4

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

Image 5

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

Image 6

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, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Web Developer
China China
Xinjie ZHANG is a mobile solution developer. His expertise includes .NET/.NET CE Framework, ATL/WTL/MFC, J2ME, Hibernate+Spring Framework, Symbian SDK etc. Welcome to his XrossOne Studio.

Comments and Discussions

 
Generalhi ZHANG Pin
Member 450944022-Nov-08 20:26
Member 450944022-Nov-08 20:26 
GeneralSourcecode File Empty Pin
noyaar14-Mar-06 10:27
noyaar14-Mar-06 10:27 
GeneralPlz tell me how can I develop & test application on my Palm PDA from my Desktop Pin
Member 159626016-Dec-04 21:19
Member 159626016-Dec-04 21:19 
GeneralFlash version is available Pin
Xinjie ZHANG17-Jul-04 23:14
Xinjie ZHANG17-Jul-04 23:14 
GeneralExcellent ! Pin
pxp10-Jun-04 23:17
pxp10-Jun-04 23:17 
GeneralRe: Excellent ! Pin
Xinjie ZHANG13-Jun-04 13:52
Xinjie ZHANG13-Jun-04 13:52 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.