Andrej Tozon's blog

In the Attic

NAVIGATION - SEARCH

Starting with Nokia Imaging SDK

A couple of days ago, Nokia announced their new Lumia phone, Lumia 1020, that features a powerful 41 MP camera sensor. letting you shoot photos in incredible details, or as they’ve put it, “shoot first, zoom later” (nods to Lytro, I guess). Of course that kind of beast would require some serious needs for editing photos, taken by those lenses (there’s 6 in Lumia 1020 to be exact), and as it just happens, Nokia yesterday also released their Imaging SDK that allows Windows Phone (8) developers to create apps that manipulate pictures by applying various filters, resizing, etc. An SDK, that, if you will, will let you develop your next best-to Instagram app.

What can the Nokia Imaging SDK do?

The main feature of the SDK are 50+ image filters with adjustable settings, that you can apply to any image. The filters are listed here. Besides filters, there are APIs for manipulating images, like resizing, cropping and rotating.

Where do I find It?

Nokia Imaging SDK is freely downloadable from here. The SDK is free to use, but check the license here. You can skip the publisher entry form by clicking the “No thanks” button, but if you’re already a Windows Phone publisher, you can leave your publisher details to increase the chance Nokia spotting your next great app featuring their imaging SDK Smile

Installing the SDK will get you a local version of Nokia’s libraries, as well as a demo / sample project.

Note that you can also totally skip installing the SDK manually and rather pull the required libraries into existing projects through NuGet (always a good option).

How do I start?

If you installed the SDK through the installer, there’s a simple sample project included in the package (look in Program Files (x86)\Nokia\Nokia Imaging SDK\tutorial\TutorialNokiaImagingSDK\ImagingSDKTutorial folder).

If you want more samples, Nokia has got you covered. There are currently 3 more sample projects you can download from their sample projects page:

1. Filter Effects (project download here) lets you apply different filters to photos

2. Filter Explorer (project download here) is quite powerful image editor with extensive effects gallery.

3. Real-Time Filter Demo (project download here) shows how to apply included effects to a real-time camera stream.

Hands-on

I’ve created a new Windows Phone 8 project from scratch, using the installed libraries. There are some manual steps to take when adding references and I trust these will be addressed in the forthcoming releases. You can review these steps for both manual and NuGet install here.

What I wanted to try for this post, was a few simple tasks: take the photo, apply one of the photo filters, crop the image and save it to the library.

And implementing them was quite straightforward.

First, here’s some XAML:

<Grid Background="Transparent"
      Tap="OnChangePhoto">
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <Image x:Name="Source" 
           Width="480" 
           Height="400" />
    <Image x:Name="Altered" 
           Width="480" 
           Height="400" 
           Grid.Row="1" />
</Grid>

It’s basically to Images stacked onto the page, each set to explicit size (more on that later). I want the “Source” image to display unaltered, raw captured photo, and “Altered” to display the manipulated image.

The code is simple too. Capture the photo:

var task = new CameraCaptureTask();
task.Completed += OnCapture;
task.Show();

Now we’re get to more exciting stuff. The meat of Nokia’s Imaging SDK lies in the EditingSession class that takes either a Bitmap class as a constructor, or an IBuffer implementation. And because we’re reading from a captured stream, IBuffer seems a closer fit:

Windows.Storage.Streams.IBuffer buffer;
using (var stream = new MemoryStream())
{
    await e.ChosenPhoto.CopyToAsync(stream);
    buffer = stream.GetWindowsRuntimeBuffer();
}

Once we get hold of the buffer, we can start the editing session:

using (var session = new EditingSession(buffer))
{

Except all you do in this session does not necessarily apply to “editing”. For example, there’s a helper method that will set the source of an image in a single statement:

await session.RenderToImageAsync(Source, OutputOption.PreserveAspectRatio);

Just don’t forget to set initial size of the image (see the XAML snippet above). The method will throw an exception if initial size is not set.

Source image is displayed, time for filters!

session.AddFilter(FilterFactory.CreateLomoFilter(.5, .5, LomoVignetting.High, LomoStyle.Neutral));

Every filter is created through Filter Factory and has different options you can set. Filter are also not just fancy artistic manipulations you can add to photo, there are also filters for mirroring, flipping, or rotating, to name a few. This is how you apply a cropping filter that cuts photos edges a bit. First, calculate the cropping rectangle and use it as a parameter:

var width = session.Dimensions.Width;
var height = session.Dimensions.Height;
var rect = new Windows.Foundation.Rect(width * .1, height * .1, width * .8, height * .8);

session.AddFilter(FilterFactory.CreateCropFilter(rect));

Done manipulating, display the “Altered” image:

await session.RenderToImageAsync(Altered, OutputOption.PreserveAspectRatio);

One task left. Save the image as JPEG:

var jpegBuffer = await session.RenderToJpegAsync();
var library = new MediaLibrary();
library.SavePicture("SDKSample.jpg", jpegBuffer.ToArray());

There are other RenderToJpeg method overloads that let you resize the image when writing to the output buffer, or specify the destination image quality.

Sounds fun, should I use it?

Nokia’s Imaging SDK is mostly valuable for its collection of filters, but it also takes the additional complexity away from working with compressed image files so it’s definitely worth looking at it.

And if you come up with a cool idea for an app that could make use of this SDK, don’t forget to enter the Nokia Future Capture competition (closes July 31st 2013).

Announcing a new user group

Dear Slovenian developers and UI enthusiasts, mark your calendars for 8th of November 2011 as that’s the day we’re launching a new user group targeting the UI/UX professionals.

SIUX LogoSIUX – Slovenian UX User Group – a sister user group (or a Siamese twin group as we fondly call it Smile) of now years-running SLODUG, Slovenian Developers User Group (SLODUG), where we’ll focus on technologies and areas like WPF, Silverlight, HTML5, Kinect, Windows Phone, Windows 8; talk through their visual and interaction design aspects; explore user interface examples, usability and related factors.

SLODUG and SIUX will share their members and meeting place. As mentioned, the first, inaugural meeting, will take place on Tuesday, 8th of November 2011, starting at 17h. Two talks are scheduled for the meeting: Developing for XBox Kinect by Sašo Zagoranski and Metro: the UI of the future?  by me. The meeting will take place in Microsoft Lecture room at Šmartinska 140.

Full agenda:

17:00: Intro & announcements
17:15 – 18:00: Developing for XBox Kinect, Sašo Zagoranski / Semantika d.o.o.
18:15 – 19:00: Metro: UI of the future?, Andrej Tozon / ANT Andrej Tozon s.p.
19:00: Discussion over pizza &  beer

We’re also looking for speakers – if you’re interested or  know anybody from the field, please contact me and we’re schedule your talk in one of our next meetings.

Hope to see you!

Until then, you can follow us on Twitter or join our Facebook group.



New Windows Phone App: MapSnapper

My latest Windows Phone application was published to the marketplace a few days ago:

MapSnapper is a simple utility application that utilizes static Bing maps feature to capture a favorite piece of Earth with your Windows Phone.

In its essence, the application lets you navigate a map of the world, using aerial or roads view, zoom in and out until you find  that perfect place you wanted to take a snap of. After taking a snap, the application serves you with not a bitmap image of the snapped location, but the link to a static Bing image that will correspond to the specific view you were looking at when taking a snap. You can specify the dimensions of the final snap and share the link through the email.

MapSnapper_10-10-2011_9.27.36.416   MapSnapper_10-10-2011_9.27.47.822

I developed the application because I needed to get to a number of specific links to certain Bing static images for some other application I’m doing. This application helped me a lot so I decided to make it public. It’s free and you can download it from the Windows Phone marketplace right now!

 

  Get MapSnapper

 

 

Please let me know if you find the application useful.



Bikes, a Windows Phone application for bike sharing systems

My latest Windows Phone application found its way to the Microsoft marketplace.

Bikes is designed to help bicyclists that use city bicycle sharing systems across Europe to find nearest stations, provide some basic info about available bikes and free parking slots for each of those stations.

Here’s a short video:

[Short note: the video about shows how the next version will look like (v1.0.1), current marketplace version is v1.0.0]

The main purpose I’ve decided to create this app was to support the new bicycle sharing system in my city (started May this year), but since the same system is use in other (mostly) European cities as well, I added some of those as well. I’m planning to support other systems and adding more cities in future releases.

You can follow the following twitter account – bikeswp7 – for latest news regarding the app, send suggestions, bug reports and any comments you have.

You can download application directly from the marketplace. If you can’t access the Marketplace link with your desktop browser, here’s another link.



Localizing the August 2011 Windows Phone Toolkit

Great news! A new version of Windows Phone Toolkit was released today. These bits target the “Mango” OS (which translates to SDK v7.1). The “pre-Mango” version (7.0) will follow in a short-while.

Download the Toolkit from Codeplex. Available also on NuGet.

One of the new features coming with this release is localization support. Localized strings are there mostly to support brand new Date and Time converters, but they also include a few strings used by Date and Time picker controls that were available in the previous release.

The strings are localized to 22 languages that are the languages, available the “Mango” OS. Chances are you’re going to be writing an application localized to a “non-Mango” language (yes, there are us who are still waiting!), so here’s a tip how to extend the toolkit localization features to your “unsupported” language. I’ll be using the Slovenian (my native) language as the example.

1. Download the toolkit binaries and source code from Codeplex:

2. Unzip the source code package and open the solution (PhoneToolkit.sln).

3. In Solution Explorer, locate the LocalizedResources folder. Copy the neutral language (US English) control resources file and rename it by appending target culture code to the filename (sl-SI is for Slovenian language):

loc1

4. Open the new ControlResources file by double clicking on it in Solution Explorer. Managed Resources Editor should appear, listing original strings.

5. Take some time and translate all strings into the target language. It will probably take an iteration or two to get it right (have to test it in a real case example). In case of Slovenian language, there’s also a slight problem with missing dual  forms (e.g. there are singular and plural, like 1 hour and >1 hours, but I can’t specify the string for 2 hours), plus some other language specifics I have yet to figure out how to work around them.

loc2

6. Build the project. It should compile (make sure you’re using tools for v7.1).

7. Go to the Bin\Debug folder (or Bin\Release, depending on your build configuration) and locate the sl-SI folder (or the one that matches your culture code). In it, there should be a Microsoft.Phone.Controls.Toolkit.resources.dll file. Copy folder to the safe place on your disk. You’ll need it whenever you start a new project leveraging the Windows Phone Toolkit..

8. You’re done with the Toolkit. Start a new Windows Phone project, add a reference to the new Toolkit, add resource files, etc., and start developing your localized application.

9. Because you’re targeting the unsupported language, don’t forget to add the following line to the application start:

Thread.CurrentThread.CurrentUICulture = Thread.CurrentThread.CurrentCulture;

That’s usually the first line in my App constructor. The other usual localization steps apply: Edit .csproj file to add supported cultures, set the neutral language, …

10. After building your application, you’ve got the application package (.Xap file). Before deploying it on your device or marketplace, copy the culture-specific folder containing the new localized dll (from step 7) into it. If you’ve chosen English as the neutral language, the folder with your culture code (sl-SI in my case) should already be in place.

Note: I didn’t have to change the AppManifest.xml file in Xap to include the new localized resource dll, but perhaps it’s a good idea to do so. You may also choose a more convenient method of including the resource file at design time to avoid file copying and changing the manifest file after each build.

11. That’s it! With localized resource file in place, your application should now display Toolkit’s resources in your own language.

loc3

This is a screen shot from the Sample application that comes with the new Toolkit.



On a path to a generic About page

Since every Windows Phone application should have some kind of About page, I wanted to see if I could build a generic page that I would reuse in my other apps. These are a few tips I picked up during building such a page:

1. The About page is rarely accessed so I put it in a separate assembly. This way I took some initial load off the main assembly and the About assembly can now easily be shared with other apps.

2. If you want to display the application icon on your About page, there is no need to create new graphics. Depending on your target size, you can choose from either ApplicationIcon.png (62x62) or Background.png (173x173) icons. To put the icon on your About page, use:

<Image Source="/ApplicationIcon.png" Stretch="None" />

And of course you can specify your own size and adjust the stretching attribute.

But don’t worry about the ApplicationIcon.png not being included in the About page project. With application icons being marked as Content, the contents of a Xap should look something like this:

image

By specifying an external link reference to the ApplicationIcon.png, the icon will be displayed regardless of it not being part of the project that contains it.

3. Static text. This includes titles, labels and text that will likely be the same across every application. If you’re not localizing your apps, you may as be well hard-coding strings into your XAML. But if you are, you would most definitely want to pull them from your resource files. In latter case, the standard localization guidelines apply. Again, don’t worry if your if your localization files are in your main assembly. The application will pick them up correctly regardless (even at design time).

<TextBlock x:Name="PageTitle" 
           Text="{Binding Strings.AboutTitle, 
                  Source={StaticResource LanguageResources}}" 
           Margin="9,-7,0,0" 
           Style="{StaticResource PhoneTextTitle1Style}"/>

4. Dynamic text. This includes the version number, application title and other text that will be unique to every application or its version. Some of these texts could be stored in resource files as well, but let’s look at the alternative options.

If you take a look at the AssemblyInfo.cs file of your main project (you’ll find it in the Properties folder), you’ll see it’s populated with some weird assembly attributes you don’t even care about (that’s because you’re setting and changing them from Visual Studio’s dedicated project properties page, but that’s not the point).
The point is that you can access all of these strings from code. All you have to do is get to the main assembly and read its custom attributes (which is what those lines from the AssemblyInfo file really). Here’s how:

Getting the main / entry assembly

The first thing is getting access to the correct – main (or entry) assembly. There are many ways to do that. At least one of those listed below should play nice with your your application architecture :

Assembly.GetExecutingAssembly() will get a reference to an assembly that’s executing that same code.

Assembly.GetCallingAssembly()will get a reference to an assembly of the method that called into this code.

The above methods don’t work well if the call is originating from the same dll. Exploring further…

Deployment.Current.EntryPointAssembly returns a name of the main assembly in pure string. You can use that to load the assembly with Assembly.Load(System.Windows.Deployment.Current.EntryPointAssembly). This will get you the main assembly, but it doesn’t feel right, so I finally settled with:

Application.Current.GetType().Assembly depends on using the Application static class, but since this is only used for a simple About page, that shouldn’t be  a significant problem.

Reading the attributes

I created the following helper method to read the attributes off an assembly:

private string GetAttribute<T>(Func<T, string> selector)
    where T: Attribute
{
    object[] attributes = assembly.GetCustomAttributes(typeof(T), true);
    if (attributes.Length == 0)
    {
        return "N/A";
    }
    T attribute = attributes[0] as T;
    return attribute == null ? "N/A" : selector(attribute);
}

GetCustomAttributes method overload above will return the only specified type of attribute you’re requesting, and the selector Func will read the value off of it. In the example of getting the Version attribute, here’s how you would use the function:

private string version;
public string Version
{
  get 
  {
    return version ?? 
      (version = GetAttribute<AssemblyFileVersionAttribute>(a => a.Version)); 
  }
}

For the application title, you would use the AssemblyTitle attribute:

private string title;
public string Title
{
  get 
  {
    return title ?? 
       (title = GetAttribute<AssemblyTitleAttribute>(a => a.Title)); 
  }
}

And so on…

And if you’d like, you can even create your own attributes, for example:

[AttributeUsage(AttributeTargets.Assembly, Inherited = false)]
[ComVisible(true)]
public class AssemblyContactAttribute : Attribute
{
    public string Email { get; private set; }
    public AssemblyContactAttribute(string email)
    {
        Email = email;
    }
}

Put that into the AssemblyInfo.cs file, as seen with other assembly attributes:

[assembly: AssemblyContact("myapp@tozon.info")]

and use the GetAttribute method similar to above examples.

You have just decorated your assembly with a new custom attribute that you can pull out at runtime.

By following those four points I was able to completely isolate my About page from main app(s) and adding the About page in my new apps is a matter of seconds. There is some convention involved of course (like the name of resources reference holding class), but I don’t see this as a problem. What do you think?



Windows Phone Pivot and loading content

Rewatching the Windows Phone Application Performance MIX10 talk by Jeff Wilcox, I took a note of one particular part where he clearly answers a question I’ve been asked a few times by now already. This question is based around the confusing statement that Pivot controls are supposed to be lazy loading their content pages, in contrast to Panoramas, which, at startup, would load all pages at once. The part that confuses developers the most is that when they start debugging their apps, they find out that Pivots load all their pages at startup too! How come? Aren’t Pivots loading pages only when needed?

Jeff explains this very clearly (fast forward to approx. minute 25) : “So the instant you go to a page, we pop up the Pivot, we’ll load  the content there. … …  Trouble is, we need to load more, because we want to provide a smooth experience when you pivot around. So we’re actually also loading, right after that first page comes up, we’ll kick off a load for both items on the left and the right.

See Jeff’s talk on the Channel 9 site.

What this means is that if your Pivot has only 2 or 3 pages, the startup performance won’t be that much different than when using a Panorama. If those 3 content pages are heavy on the load, use a lot of bindings etc., you can get into trouble. In some cases, loading a single content page on startup (and the rest when pivoted to) might actually result in a better experience than preloading all 3 pages.

Is there a way to override the default Pivot behavior and load only one content page on startup?

Of course there is.

The trick is to create a user control for each content page (which is a good idea anyway) and start it off with a Pivot control by specifying empty pages:

<controls:Pivot Title="My Pivot"
                LoadingPivotItem="OnLoadingPivotItem">
    <controls:PivotItem Header="Page 1" />
    <controls:PivotItem Header="Page 2" />
    <controls:PivotItem Header="Page 3" />
</controls:Pivot>

The LoadingPivotItem event will fire each time the Pivot would load a new content page. From MSDN documentation: “[LoadingPivotItem is an] Event for offering an opportunity to dynamically load or change the content of a pivot item before it is displayed.”

What you do during this event is check whether the content is loaded yet and if it isn’t, kick off the load. Something like:

private void OnLoadingPivotItem(object sender, PivotItemEventArgs e)
{
    if (e.Item.Content != null)
    {
        // Content loaded already
        return;
    }

    Pivot pivot = (Pivot)sender;

    if (e.Item == pivot.Items[0])
    {
        e.Item.Content = new Page1Control();
    }
    else if (e.Item == pivot.Items[1])
    {
        e.Item.Content = new Page2Control();
    }
    else if (e.Item == pivot.Items[2])
    {
        e.Item.Content = new Page3Control();
    }
}

One thing to have in mind though: make sure that any data you want to display on those content pages are loaded on the background thread (again – always a good idea) to allow the pages to load as quickly as possible.



NTK2011: Slides and sample code: MVVM

MVVM is a topic that can easily take hours of discussion. Unfortunately, I only had less then one to talk about (at least some of) its goals, parts and possible implementations. Below is my slide deck:

And the code: download

The code is structured in a way that helps you see the changes in the code while progressing through the samples. Just follow the numbers (e.g. MainPage1, MainPage2, and so on). It’s mainly Silverlight code, with the last example being example of an easy transition to Windows Phone.

The sample application is a conference app that lets you see available sessions. I removed the online data endpoint so the online samples won’t work, but you’ll get the feel using the offline data provider. Speaking of data providers, there are three (online/Ntk, using OData endpoint, Offline (loads Xml file from resources), and Json (same as Ntk, just for getting data in Json format – you know, for the phone Winking smile).

Once again, I have to stress out that code is for demo purposes only - while it’s minimized one end, it may be overly complicated on the other. Also, Silverlight Toolkit and JSON.NET libraries that were added through Nuget are not included in the zip.

Ah yes, the slides are in Slovenian language.



Dynamic Forms Redux 2: Windows Phone 7

One of the more popular posts on my blog here were the Dynamic Forms for Silverlight series I did a couple of years ago. Dynamic forms are useful for cases when you want to compose a form on the server and the client just renders it based on the provided field types.

This days it’s all about Windows Phone 7 so I updated the sample to show how the same technique of creating custom forms on the client can work on the phone as well. The attached project contains both Silverlight and Windows Phone 7 projects, both sharing resources from the same shared project.

Source code for this article is available.

How it works

You compose your fields collection on the server, like in the following snippet:

Collection<DynamicFormField> form = new Collection<DynamicFormField>
{
    new DynamicFormField()
        {
            Caption = "Name: ",
            Type = typeof (string).FullName
        },
    new DynamicFormField()
        {
            Caption = "Last name: ",
            Type = typeof (string).FullName
        },
    new DynamicFormField()
        {
            Caption = "Email: ",
            Type = "#Email#"
        },
    new DynamicFormField()
        {
            Caption = "Phone: ",
            Type = "#Phone#"
        },
    new DynamicFormField()
        {
            Caption = "Birth date: ",
            Type = typeof (DateTime).FullName
        },
    new DynamicFormField()
        {
            Caption = "Is employed: ",
            Type = typeof (bool).FullName,
            Value = false.ToString()
        },
    new DynamicFormField()
        {
            Caption = "Signature: ",
            Type = "#Signature#"
        }
};

The above collection contains:

  • Name and Last name fields, which are regular strings (System.String),
  • Email and Phone fields, for which we want them to be special kinds of a string so we mark them as “#Email#” and #Phone#,
  • Birth date field – a regular Date,
  • Is Employed field, that is of type Boolean, and
  • Signature field, which will contain an actual written signature, therefore we mark it as "#Signature#-

On the client size, we use the same template selector I used in my previous posts, and templates for the above fields are defined as:

<Shared:FormFieldTemplateSelector DataType="{Binding Type}">
    <Shared:FormFieldTemplateSelector.DataTemplates>
        <Shared:TemplateSelectorDataTemplate DataType="System.String">
            <TextBox Text="{Binding Value, Mode=TwoWay}" Width="400" />
        </Shared:TemplateSelectorDataTemplate>
        <Shared:TemplateSelectorDataTemplate DataType="#Email#">
            <TextBox Text="{Binding Value, Mode=TwoWay}" Width="400" 
                     InputScope="EmailUserName" />
        </Shared:TemplateSelectorDataTemplate>
        <Shared:TemplateSelectorDataTemplate DataType="#Phone#">
            <TextBox Text="{Binding Value, Mode=TwoWay}" Width="400" 
                     InputScope="TelephoneNumber" />
        </Shared:TemplateSelectorDataTemplate>
        <Shared:TemplateSelectorDataTemplate DataType="System.DateTime">
            <Controls:DatePicker Value="{Binding Value, Mode=TwoWay}"
                                 Width="400" />
        </Shared:TemplateSelectorDataTemplate>
        <Shared:TemplateSelectorDataTemplate DataType="System.Boolean">
            <CheckBox IsChecked="{Binding Value, Mode=TwoWay}" />
        </Shared:TemplateSelectorDataTemplate>
        <Shared:TemplateSelectorDataTemplate DataType="#Signature#">
            <Shared:SignaturePanel Width="400" Height="100" 
                    Strokes="{Binding Value, Mode=TwoWay, 
                    Converter={StaticResource strokesConverter}}" />
        </Shared:TemplateSelectorDataTemplate>
    </Shared:FormFieldTemplateSelector.DataTemplates>
</Shared:FormFieldTemplateSelector>

If you questioned the use of #Email# and #Phone# custom types instead of regular strings, the above snippet should make it clear – those were hints, intended for the (Windows Phone) client, so it can set the right input scopes for those fields.

This is how the form looks after the user fills it up:

image

Source code is available. Note that it’s only intended for showcasing the specific features and it’s far from production quality. Silverlight Toolkit for Windows Phone 7 (v4.2011.2) binary is not included, but was pulled in through NuGet.



Top 5 blog posts of mine in 2010

Thought I’d give this one a try – 5 posts that were accessed by visitors of my blog the most and were posted in 2010:

1. Add version 4 components to your Silverlight 3 application with MEF: I wrote about using MEF (Managed Extensibility Framework) to import and offer additional capabilities to users that have Silverlight 4 installed (over the ones that only have Silverlight 3).
2. Reactive Extensions #3: Windows Phone 7: First look at Reactive Extensions for Windows Phone 7. I (re)used the same code I used with my Silverlight / WPF demos show ItemsControl items appearing with a nice animated way.
3. Silverlight Layout States with Reactive Extensions: This post laid the ground for the previous post, showing, how the effect is done.
4. Named & optional parameters in Silverlight 4: I wrote about named & optional parameters that were in the latest Silverlight 4 release. Mostly useful when dealing with Office interop.
5. Display “My Pictures” in Silverlight application at design time: An attempt to hack up a Silverlight design-time ViewModel that would look into your Pictures folder and display any pics that were there.

Thanks for visiting my blog!