Windows 8 apps performance helper: Speed at a glance

Nov 28, 2012

Windows 8 Apps have this nice awesome property that you can set in order to show framerate counters:

Application.Current.DebugSettings.EnableFrameRateCounter = true;

Just call it in your MainPage() constructor after the InitializeComponent() call.

To make it easier to figure out which number is which, put this grid somewhere in your root grid on MainPage:

<Grid HorizontalAlignment="Left" VerticalAlignment="Top"  IsHitTestVisible="False">
    <Rectangle Fill="#88F4F4F5" HorizontalAlignment="Left" Height="91" VerticalAlignment="Top" Width="40" Opacity="0.5"/>
    <Rectangle Fill="#3F5B71FF" HorizontalAlignment="Left" Height="68" VerticalAlignment="Top" Width="43" Margin="45,0,0,0"/>
    <Rectangle Fill="#88F4F4F5" HorizontalAlignment="Left" Height="35" VerticalAlignment="Top" Width="79" Opacity="0.5" Margin="93,0,0,0"/>
    <Rectangle Fill="#88F4F4F5" HorizontalAlignment="Left" Height="47" VerticalAlignment="Top" Width="43" Opacity="0.5" Margin="177,-2,0,0"/>
    <Rectangle Fill="#88F4F4F5" HorizontalAlignment="Left" Height="56" VerticalAlignment="Top" Width="43" Opacity="0.5" Margin="225,0,0,0"/>
    <Rectangle Fill="#3F0E9DFF" HorizontalAlignment="Left" Height="35" VerticalAlignment="Top" Width="43" Margin="273,0,0,0"/>
    <Rectangle Fill="#3F0E9DFF" HorizontalAlignment="Left" Height="18" VerticalAlignment="Top" Width="126" Margin="316,17,0,0"/>
    <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="UI CPU Time (ms), must be &lt;=15 " VerticalAlignment="Top" Margin="278,20,0,0"/>
    <Rectangle Fill="#44F4F4F5" HorizontalAlignment="Left" Height="18" VerticalAlignment="Top" Width="102" Margin="268,38,0,0"/>
    <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="Composition CPU Time (ms)" VerticalAlignment="Top" Margin="230,41,0,0" Width="140"/>
    <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="Batch Count" VerticalAlignment="Top" Margin="179,17,0,0" Width="41" Height="28"/>
    <Rectangle Fill="#3F5B71FF" HorizontalAlignment="Left" Height="28" VerticalAlignment="Top" Width="70" Margin="88,40,0,0"/>
    <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" VerticalAlignment="Top" Margin="48,42,0,0" Width="110" Text="UI Thread FPS&#13;must be 60+ if update" />
    <Rectangle Fill="#44F4F4F5" HorizontalAlignment="Left" Height="18" VerticalAlignment="Top" Width="86" Margin="40,73,0,0"/>
    <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="Composition Thread FPS" VerticalAlignment="Top" Margin="4,75,0,0" Width="122"/>
    <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="Mem Usage" VerticalAlignment="Top" Margin="98,17,0,0" Width="69" Height="16"/>
</Grid>

You will end up with something like this at runtime (default Grid app template):

image

Performance should be considered since the start of app development.

Hope that helps!

AppRating Updated For Mango

Feb 1, 2012

Download source code here: http://nokola.com/sources/apprating.zip

Under MS-RL License: http://www.opensource.org/licenses/ms-rl

The app is available at the marketplace too!

Many thanks to Erwin Seinen for updating it and sending me back the source code! Check out his apps (as of this writing, Latitude and Hand Warmer, maybe more) here: Nenies Apps

The Fastest Way to Switch Free/Paid and NoDo/Mango App Build in Visual Studio

Oct 1, 2011

Edit: Added NoDo/Mango switching as well. Simplified changes to .csproj files

How would you like to be able to switch from Free/Paid and NoDo/Mango  for your Windows Phone 7 projects in VS?

image   image

Yes! This will switch my Fantasia Painter app from Paid to Free, and it’s just a build configuration change.

I’ve been using it for the past 6 months or so. Here’s how to do it:

  1. Open Configuration Manager and add a “Free – Release” and “Free – Debug”. Add the Mango configurations above if needed.
  2. Create a Manifest/Free and Manifest/Paid folders in your project. If needed, duplicate these for Mango/NoDo to get 4 total!
  3. Copy the WMAppManifest.xml from Properties to the two folders you just created. The build action for the new files is None and Copy is Don’t Copy (from the item properties window)

image

4. Edit the free WMAppManifest to contain the GUID (Product ID) of your free version. Also change the Title and other fields in the XML as needed

5. Create a Pre-build event command line (from project properties) to copy the manifests based on the build configuration name:

if "$(ConfigurationName)" == "Free - Release" copy "$(ProjectDir)\Manifest\NoDo\Free\WMAppManifest.xml" "$(ProjectDir)\Properties\WMAppManifest.xml"
if "$(ConfigurationName)" == "Free - Debug" copy "$(ProjectDir)\Manifest\NoDo\Free\WMAppManifest.xml" "$(ProjectDir)\Properties\WMAppManifest.xml"
if "$(ConfigurationName)" == "Release" copy "$(ProjectDir)\Manifest\NoDo\Paid\WMAppManifest.xml" "$(ProjectDir)\Properties\WMAppManifest.xml"
if "$(ConfigurationName)" == "Debug" copy "$(ProjectDir)\Manifest\NoDo\Paid\WMAppManifest.xml" "$(ProjectDir)\Properties\WMAppManifest.xml"
if "$(ConfigurationName)" == "Mango Free - Release" copy "$(ProjectDir)\Manifest\Free\WMAppManifest.xml" "$(ProjectDir)\Properties\WMAppManifest.xml"
if "$(ConfigurationName)" == "Mango Free - Debug" copy "$(ProjectDir)\Manifest\Free\WMAppManifest.xml" "$(ProjectDir)\Properties\WMAppManifest.xml"
if "$(ConfigurationName)" == "Mango Release" copy "$(ProjectDir)\Manifest\Paid\WMAppManifest.xml" "$(ProjectDir)\Properties\WMAppManifest.xml"
if "$(ConfigurationName)" == "Mango Debug" copy "$(ProjectDir)\Manifest\Paid\WMAppManifest.xml" "$(ProjectDir)\Properties\WMAppManifest.xml"

image

6. If you’re using the AdControl or other DLLs that are different between Free and Paid, edit the .csproj file to conditionally include them like so:

<ItemGroup Condition=" $(Configuration.Contains('Free'))">
  <Reference Include="Microsoft.Advertising.Mobile.UI">
    <HintPath>C:\Program Files\Microsoft SDKs\Advertising for Phone\Microsoft.Advertising.Mobile.UI.dll</HintPath>
  </Reference>
</ItemGroup>

7. You can also define a conditional variable in project properties FREE_WITH_ADS and then use it from the source file using #if FREE_WITH_ADS. Similarly, define a MANGO variable for Mango so you can do #if MANGO Smile

 

This concept naturally extends to NoDo/Mango switching. Just make sure to have 4 manifest files and have the word “Mango” in each of the solution/project configurations. Then change the .csproj like so:

<TargetFrameworkProfile Condition=" $(Configuration.Contains('Mango')) ">WindowsPhone71</TargetFrameworkProfile>
<TargetFrameworkProfile Condition=" !$(Configuration.Contains('Mango')) ">WindowsPhone</TargetFrameworkProfile>

Make sure to keep NoDo users happy by providing them with NoDo updates! A lot of people rarely update their phone (just search about the % of iPhone users that updated to the latest version online.) It’s very important to keep your app NoDo-ish and Mango-ish in my opinion.

Hope that helps! Please comment!

Moving to BlogEngine.Net 2.5+Disqus to Stop Spam

Oct 1, 2011

Deleted 100K+ comments (again!)

Noticed that BlogEngine.NET 2.5 supports Disqus.

After upgrading I used this tool (http://ithoughthecamewithyou.com/post/Convert-BlogML-comments-to-XWR-for-Disqus.aspx) to move my comments over!

And also had to apply this BlogEngine Disqus Comment Count Fix

The last part I had to do was update scripts/blog.js to put the div.appendChild(p) below the (ul) in order for the rating text to appear as expected

showRating: function (container, id, raters, rating) {
    var div = document.createElement('div');
    div.className = 'rating';

    var p = document.createElement('p');
    if (raters == 0) {
        p.innerHTML = BlogEngine.i18n.beTheFirstToRate;
    }
    else {
        p.innerHTML = BlogEngine.i18n.currentlyRated.replace('{0}', new Number(rating).toFixed(1)).replace('{1}', raters);
    }

    var ul = document.createElement('ul');
    ul.className = 'star-rating small-star';
    div.appendChild(ul);
    div.appendChild(p);

Let’s see how spam will (hopefully) not be present anymore!

Please comment! (to double check that the system works)

I’ll be able to blog nicely and regularly again! Yay! Smile

Detecting if Zune is Connected From Your NoDo/Mango App

Oct 1, 2011

Edit 2001/10/10: I noticed that I actually get InvalidOperationException on Mango (seems like all the time now, but I’m not 100% sure). Updated code in CaptureTask_Completed to check for this.

Rene had a great blog post about How to detect the Zune software about an year ago. Unfortunately, the method he describes no longer works in Mango.

Moreover, when you get the Cancel event from the PhotoChooserTask in Mango, neither OnNavigatingFrom nor OnNavigatedTo is called for your page.

This can cause crashes, grief and unhappy customers who think “I can’t open a picture from this app”.

Here is my current solution that works for NoDo and Mango. It’s very simple, I just check if the request to open the picture happened less than 1 second after the Cancel event occurred.

In real life testing (you should have seen me frantically hitting the back button!), one second seems to work great.

 

Here’s some code to illustrate this:

private void btnOpenFromPhone_Click(object sender, RoutedEventArgs e)
{
    if (Globals.PhotoChooserTask == null)
    {
        Globals.PhotoChooserTask = new PhotoChooserTask();
    }

    Globals.PhotoChooserTask.Completed += CaptureTask_Completed;
    Globals.PhotoChooserTask.ShowCamera = true;
    try
    {
        Globals.PhotoChooserStarted = DateTime.Now;
        Globals.PhotoChooserTask.Show();
    }
    catch (InvalidOperationException) // will be thrown in case we double-tap and other navigation is in progress
    {
    }
}

void CaptureTask_Completed(object sender, PhotoResult e)
{

if (e.Error != null)
{
    if (e.Error is InvalidOperationException)
    {
        MessageBox.Show("The Zune software is running and prevents opening pictures. Please close Zune or disconnect the phone from your computer and try again.", "Information", MessageBoxButton.OK);
    }
    return;
}

    if (e.TaskResult == TaskResult.OK)
    {

// yay we’re done!


        return;
    }

    if (e.Error is InvalidOperationException)
    {
        throw e.Error;
    }

    if (e.TaskResult == TaskResult.Cancel)
    {
        AvailableTools.Brush.SetImage(Globals.MainImage); // set the image back to the brush again, because in case of Zune connected to PC OnNavigatingFrom and OnNavigatedTo will not be called!

        if ((DateTime.Now - Globals.PhotoChooserStarted) < TimeSpan.FromSeconds(1)) // returned too fast, assume Zune is causing problems
        {
            MessageBox.Show("The Zune software is running and prevents opening pictures. Please close Zune or disconnect the phone from your computer and try again.", "Information", MessageBoxButton.OK);
        }
    }
}

If anyone knows a better solution, please let me know!

How I Deleted 100000 Comments!

May 23, 2011

Finally, no spam! My blog was slowly becoming dysfunctional, after getting more than 2000 spam comments per day!

I moved to the new version 2.0 of http://dotnetblogengine.net last night, and it has super easy built in reCAPTCHA which stops spam and helps read books. Pretty cool! The reCAPTCHA settings are accessed by hovering over Tools and selecting Edit in .NET Blog Engine 2.0 – it was very hard and non-intuitive to find the setting, but once I did it worked like a charm!

There was one "small glitch" though – about a hundred thousand spam comments left to "moderate", which I did.

 

peace Now I feel at peace like the picture on the left

I made a small program, which anyone can use to mass-delete blog engine’s comments after specific date. Hopefully this will help anyone unspam themselves.

private void button1_Click(object sender, RoutedEventArgs e)
{
    string[] files = Directory.GetFiles(@"D:\TEMP\blog\App_Data\posts", "*.xml");
    foreach (string file in files)
    {
        FixPost(file);
    }
}

private void FixPost(string fileName)
{
    XDocument doc;
    using (FileStream stream = File.OpenRead(fileName))
    {
        doc = XDocument.Load(stream);
    }

    var list = from XElement el in doc.Descendants(XName.Get("comment", String.Empty)) 
               select el;

    // convert the list to an array so that we're not modifying the collection that we're iterating over    
    XName date = XName.Get("date");
    foreach (XElement el in list.ToArray())
    {
        string data = ((XElement)el.FirstNode).Value;

        if (data.StartsWith("2011") || data.StartsWith("2010-12") || data.StartsWith("2010-11") || data.StartsWith("2010-10"))
        {
            el.Remove();
        }
    }

    using (XmlWriter writer = XmlWriter.Create(fileName))
    {
        doc.WriteTo(writer);
    }
}

That code deleted all comments from Oct 2010 onward (sorry, I had to do it), but yay! No spam! I can finally blog normally. Smile

Hope you like it! Please comment in a nice and clean environment! Smile

App Rating for Windows Phone 7 Source Code Released

Mar 31, 2011

I’m releasing the App Rating app source code today, under MS-RL license (http://www.opensource.org/licenses/ms-rl). In summary, you can use the App Rating's source for commercial (even directly competitive) projects and are required to provide updates to the source code back to me and the community.

The nice part that you can get from AppRating’s code is the WebApi.cs class, which is optimized for network REST requests, dynamically changing priority of requests, cancelling, etc, and is very lightweight.

Download source code here: http://nokola.com/sources/apprating.zip

I’m still figuring out the correct license for the rest of my sources. Until then they are all under NNCL (http://nokola.com/nncl). btw I’m very open to giving it out to people, per the terms of the license. Already approved few requests.

Hope you like it! Please comment!

  

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.

    

App Ratings Updated with search and 6-10x times faster

Dec 22, 2010

I updated App Rating to have search for apps, show rating since last update, and be much faster. Unlike other similar rating apps on the marketplace, App Rating shows a single-screen per-market score so you can compare your app in different markets easily. To use, search the marketplace for “App Rating” or click here to get the app

wp7_152x50_blue

Video of the new functionality:

Unless I get strong feedback for new features, I’m not planning to invest more in App Ratings. It’s good enough for me Smile

  

Games for Windows Phone 7 Resources: Reducing Load Times, RPG Kit; Other

Dec 11, 2010

Microsoft released the new games education pack including a multi-platform tutorial, RPG starter kit ported to Windows Phone 7.

I really like the comparisons of the isostore reads in MB/sec in the “reducing load times paper”, and the game samples that’s why blogging it.

Here’s the pack:

http://create.msdn.com/en-US/home/news/new_education_dec_2010

 

Kind of off topic: I got few asks “how do you make the mouse cursor in your videos?”

I created my own mouse cursor (just a circle .PNG, then convert to .cur) and I set the OS system default cursor to it. You can download the cursor here: http://nokola.com/sources/circle.cur

I use Windows Movie Maker for the video editing – does someone have better (free/cheap) suggestions? What do you use?

    

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.