New Fantasia Painter, Windows Phone 7 Source Code Pack 1, New License

Mar 25, 2011

I’m back from the fields of Fantasia's [software development]!

This post contains:

  1. New Fantasia Painter available, with 20 effects, an "alive" Fairy Lights brush, Text, symbols and photo functionality
  2. Source code for Fantasia’s high-usability controls tuned for WP7: color pickers, improved slider and easing progress bar.
  3. My new license (NNCL), which promotes fair commercial and personal use while protecting IP and ensures giving back to the community

New Fantasia Painter

The new app has just been released to the marketplace. There’s a free, ad-sponsored version too! People are thrilled by the updates!

Get Fantasia Painter

wp7_152x50_blue 

Get Fantasia Painter Free (Ad Sponsored)

wp7_152x50_blue

Here are the new intro videos and short description of new effects – and I’m just scratching the surface:

Mold tool to change body shape, smiles, enlarge eyes, etc (similar to Liquify in Photoshop), 20 effects, Text, 500+ symbols, speech bubbles.

Higher quality effects and brushes – see “Makeup, Eye color and Eye Shape in 60 seconds” below 

Two and a half minute overview of many effects, new “alive” Fairy Lights brush. Complex (and unique) photo effects that do amazing job, like Color Balance to fix tints due to poor lighting (it’s smarter than the typical balance algorithms), Lifelike Colors.

The power of Fantasia Painter’s effects is that they can all be selectively applied to part of an image. Fantasia also combines effect by usage: for example, instead of having 3 separate effects for Brightness/Contrast, Saturation and Exposure, you have one – this can save you a lot of time when editing pictures.

The 4 image enhancements (Color balance, Lifelike Colors, Bright/Contr/Sat/Expo, White Point/Rebalance) effects are roughly equivalent to 7 or 8 effects from other photo editing tools, plus multiple Photoshop enhancement steps (in the case of Lifelike Colors).

Here are some things I’ve done with Fantasia on an actual device in the last day or so:

Painted from scratch in < 2 minutes, starting with Rainbow background and using Makeup brushes and Recolor effect:

cool

Auto Color balance reveals hidden parts of this sky picture!

Original (left), Auto Balance (Right)

1331500_41770898auto balance

 

Gentle Painter effect:

gentle (2)

Source Code – Windows Phone Controls Pack 1

The source code is licensed under NNCL (see below). It means that you must get permission from me in order to use it in any project (commercial, even when released for free).

I will likely allow it, but will require you to contribute code (or article, or something else) to either me or the community in return. In case you’re direct competitor, I will most likely flat out refuse, or ask you to either trade me some of your source code or release it publicly.

I spent 2 months doing usability testing of the controls, and they are highly usable for all my tested age groups (4 to 70), by people with different levels of computer knowledge and different finger width. They are also very UI-friendly (just put them in StackPanel with Margin 0 and you’re good), lightweight, and fast.

Download Nokola Windows Phone Source Pack 1

The pack includes:

imageimageimageimage

What’s so good about the color pickers above? It’s the fact that most colors can be selected with single finger. This is a significant usability improvement. I found out that the “typical” color picker (like the one on http://fantasia.nokola.com) is very hard for phone users to choose color from. Especially for non-developers. In most cases, they would drag their finger on the hue selector on the right, and wonder “why didn’t the color change?” (it didn’t, because the left rect was set to white, for example). The color picker above resolves the issue since a combination of hue/saturation/value is presented in 2D, while the side rectangle allows to further customize color to be able to choose from the full color range. This allows for single-finger selection from most used colors.

The “better slider”, has the following features:

  • significantly easier to choose value (try it on an actual device)
  • larger hit test area
  • shows slider value
  • carefully engineered so you can easily select minimum and maximum value too

It also has a drawback – it is not very usable with scrolling UI. But for non-scrolling UI it’s the bomb Smile

Easing progress bar: after much experimentation, I found out that when a particular easing function is applied to a progress bar, it appears that the progress takes less time. Try the two progress bars in the demo one after the other and see for yourself Smile

Nokola-NCL (Nokola Non-Competitive License or NNCL)

Last but not least all of my source code is now licensed under NNCL (http://nokola.com/nncl), which stands for “Nokola Non-Competitive License.” (I expect other people to come up with similar <your name>-NCL licenses btw).

I was wondering: how do I share my source code, and allow non-competitive programs to use it, while protecting myself from competitors? How do I make sure that when the code I release is improved, others can benefit from it too (including commercial use)?

The MS-PL license does not protect me from competitors, and it also does not ensure that improvements are returned back to the community. For example, one could pick up my Silverlight slider control, which used to be licensed under MS-PL, redo it for Windows Phone 7, and use it privately.

The GPL does not allow commercial use with competitor protection.

The reason while I was “in the dark” for few months, not releasing any code was due to the above dilemmas.

Thus the need of NNCL Smile

NNCL License Summary
The NNCL License has the following goals:

  • improve source code sharing and availability to community. Many people, including MVPs just don’t release any of their source code in fear that it might be (and in fact, it will be) used by direct competitors. In mind mind, the choices are: 1. release the source under MS-PL, which means anyone can use and (morally) abuse it. 2. don’t release it at all (which is what a lot of people do today – just check how much high-quality and novel Silverlight vs Windows Phone 7 code articles are being released) 3. Release it under commercial, but reciprocal license line NNCL.
  • ensure direct and indirect competitors only use code and assets if they provide something back to the software community of the original code author

You have to contact me (Nokola: nikola.mihaylov@gmail.com) for permission before using source or images on Windows Phone 7 or other mobile device.
I am very likely to allow you to use it, with certain requirements, depending on the situation. For example, I might ask you to release specific source publicly to the community.
Sometimes I might just flat out refuse (if you're a direct competitor), unless you have something to offer me or the community in return.

Any changes you make to improve the controls, must be made available to me (and likely to the community) for commercial use, licensed under NNCL.
All derivative works have to be licensed under NNCL as well. You can include a <your name here>-NCL license if you create derivative works too.

Read the full license text here: http://nokola.com/nncl

And I hope the NNCL is fair – what do you think?

Hope you like the updates! Please comment!

Remember to search for Fantasia Painter on the marketplace, get it, use it, tweet it, rate it, and comment here if you see issues.

    

Fantasia Painter Released for Windows Phone 7 + Tips

Dec 5, 2010

Edit Dec 8, 2010: Updated tips (I was too excited the first release and missed some important info in the “how to speed load/save state tip #3)

Yes! See the 1-minute intro HD video of the drawing app below. In this version, you can add makeup to someone’s face, change eye color (or other colors). It also comes with all-new fur smudge, and color reveal/hide brushes as well as rainbow mode for all existing Fantasia brushes. Pinch to zoom and move with 2 fingers.

Click here to try or buy Fantasia Painter for your Windows Phone 7

Here is a little longer (2 minutes) video that shows some of the Fantasia Painter’s drawing capabilities in action:

Note: I forgot to mention that you can pinch to Zoom to paint small details (this allows you to draw the small details on the birdie on an actual device, not just the emulator).

Click here to buy Fantasia Painter for your Windows Phone 7 (trial mode supported as well)

Please feel free to send link to this blog to everyone, try, buy, and/or play with the app! I appreciate it!

 

Technical Details and Tips

The phone version also supports “painting with effect” like the desktop version. For now I have a couple of simple effects that are only exposed through brushes (such as Saturation and Tint). I also added blending modes, which allow for “lighter” and “darker” makeup. The new brushes/effects share the same code (I add reference to the same DLL) as the web Silverlight version of Fantasia and go through the same effect pipeline, which is great! Smile

While developing Fantasia for Windows Phone 7, I noticed collected some useful tips for developers that will hopefully make your life easier. There were some nasty crashes that were hard to find.

Tip 1: Preventing crash/hangup when using TouchPanel and Touch classes

I’m using TouchPanel and Touch for the pinch-to-zoom and move with 2 fingers capabilities. Can you tell what’s wrong with this code:

public partial class MainPage : PhoneApplicationPage
{
    // Constructor

    public MainPage()
    {
        InitializeComponent();

        Touch.FrameReported += Touch_FrameReported;

If you do something like what I did above, you’ll face a very weird issue – when navigating using NavitationService.Navigate() instead of using the back button on the phone, you’ll get a seemingly-random exception for a missing element. What’s going on?

In Windows Phone 7 your page can be created/destroyed whenever it’s not visible (read about Tombstoning). What is interesting though is that if you use NavigationService.Navigate(), your page may be re-created if it was not visible for long time even if your application is still running. The old page should get garbage collected – right? Actually it’s not, since you have the static Touch class referencing a function from your page. Thus, whenever the user taps on the phone, you’ll get a function call in a page that is invalid.

To fix the above issue, override OnNavigatedTo and OnNavigatedFrom and Touch.FrameReported += Touch_FrameReported; and Touch.FrameReported -= Touch_FrameReported; This way your page will get recycled correctly

Tip 2: Use Windows Snippping Tool to get perfect 480x800 screenshots of the Windows Phone 7 emulator.

This really saved me a lot of time. In the Windows start menu search, type “snip” and open the snipping tool. Open the “New” menu and select “Window Snip”. Click on the emulator window (the emulator zoom should be at 100%). You’re done!

Tip 3: Faster state load/save using isolated storage

I noticed an interesting issue: the first time I deployed Fantasia on a real device, loading the state using IsolatedStorageSettings (8 int variables and the picture bitmap), took about 8 seconds! Way too long Smile

Using IsolatedStorageFile to do the same thing takes <0.2 sec on my Samsung Focus.

IsolatedStorageFile storage = IsolatedStorageFile.GetUserStoreForApplication();
IsolatedStorageFileStream file = storage.OpenFile(“myfile.dat”, System.IO.FileMode.Open);
byte[] data = new byte[file.Length];
file.Read(data, 0, data.Length);
file.Close();

Tip 4: WriteableBitmap render speed

WriteableBitmap.Render() was considerably slow on the device compared to PC, to the point where a single stroke would have 0.5 seconds lag for several lines. Thus I had to completely redo the Silverlight line rendering in code, which managed to speed up the whole drawing quite a bit (somewhere between 10 and 100 times). I also improved my brush rendering by avoiding redrawing pixels when they are already drawn and by using optimizations such as drawing one pixel with opacity X*10 instead of 10 pixel with opacity X (another huge speed improvement there.)

Invalidate(): Turns out, the performance here wasn’t too bad. It’s still wise to avoid Invalidate() I could achieve noticeably faster speed by reducing the number of Invalidate() calls per second.

Tip 5: Preventing the panorama and pivots from scrolling

I needed this functionality in order to have the color pickers work as expected and not scroll the view.

This post has sample code: http://blogs.msdn.com/b/luc/archive/2010/11/22/preventing-the-pivot-or-panorama-controls-from-scrolling.aspx

Unfortunately, the above code suffers a similar crashing issue like in Tip 1 above. It’s fairly easy to fix by ensuring the events are unhooked as appropriate. I will likely post the fixed version sometime soon (unless someone else does).

I did 1 month of usability testing (let’s hope it was worth it!) Will publish more info at a later date. There are some very interesting findings such as what is a good color picker, slider, etc.

That’s all for now! Please remember to try out Fantasia Painter, if you’d like it buy it, review, send it to friends, tweet it, facebook it, etc!

I appreciate it! Please send me comments here or in the reviews on the Phone!

    

nokola.com | Terms | Log in

Recent

About the author

Happy & enjoying life. Software enthusiast.
The opinions I express here and on nokola.com are mine and not my employeer's (Microsoft).
This is the official blog of nokola.com. You can find Silverlight samples, coding stuff, and hopefully other interesting things here.