Andrej Tozon's blog

In the Attic

NAVIGATION - SEARCH

Enable automatic daylight / night mode switch with your Windows Phone 8.1 app

Sample source code is available for download.

You know those fancy car GPS navigators that automatically switch color mode to dark when it gets dark to make it easy on your eyes? The display even turns dark when you drive into a tunnel and lights back up when you’re out…

Well, with ambient-light sensor support in the latest Windows Phone 8.1 SDK, it’s possible to build something quite like that. The new API is quite straightforward and follows the same practice as with other device sensors.

When your app starts, you should first query the device for the sensor to see if it exists. The GetDefault() method will return null if sensor isn’t present on the device or the system was unable to get a reference to it (happens when device is in a connected standby):

var sensor = Windows.Devices.Sensors.LightSensor.GetDefault();
if (sensor == null)
{
    return;
}

Once having access to the sensor, it’s recommended to set its reporting interval to default value, but in cases where you need to set it explicitly, you can do it by changing sensor’s ReportInterval, but check you’re not going below MinimumReportInterval. Here’s the code for setting it to 5 minutes, but if you need more dynamic readings, just leave it at default:

sensor.ReportInterval = Math.Max(sensor.MinimumReportInterval, 5*60*1000);

[Note: don’t forget to set it back to default – 0 – when you’re done]

To start reading, you can either perform a one-time read:

var reading = sensor.GetCurrentReading();

… or subscribe to continuous reads (with read interval set earlier):

sensor.ReadingChanged += OnLightSensorReadingChanged;

Either way, you’ll get a LightSensorReading with information about the current reading. The illuminance level returned by this is in lux so it should be easy to compare with some known values. I figured 500 – 1000 would be a good value to detect a decent daylight and in this example I’m testing against a value of 1000 lux.

We have the ambient light level, now what?

There are various cases where light sensor could come in handy, here’s a couple:

1. Allow user to have it’s theme respond to light, e.g. have light theme during the day and dark theme during the night. Reading apps, for example.
Luckily, in Windows Phone 8,1, changing theme for a page (or for any specific element) is now very simple. No more 3rd party helpers. Here’s an example of a OnLightSensorReadingChange event handler for the case, where application theme will be according to the latest sensor reading:

void OnLightSensorReadingChanged(Windows.Devices.Sensors.LightSensor sender, Windows.Devices.Sensors.LightSensorReadingChangedEventArgs args)
{
    Dispatcher.RunAsync(CoreDispatcherPriority.Normal,
        () => RequestedTheme = args.Reading.IlluminanceInLux < 1000
              ? ElementTheme.Dark
              : ElementTheme.Light
        );
}

[Notice the relevant line is wrapped in a Dispatcher call – the LightSensorReadingChanged event will always be fired on a background thread so we have to get back to the UI thread to set a visual property properly]

2. Any app that displays a map could use this feature. Navigation apps, locators, running apps, …
And the Map control has a vary handy property to support this, let’s have a look at Map’s ColorScheme:

void OnLightSensorReadingChanged(Windows.Devices.Sensors.LightSensor sender, Windows.Devices.Sensors.LightSensorReadingChangedEventArgs args)
{
    Dispatcher.RunAsync(CoreDispatcherPriority.Normal,
        () =>  Map.ColorScheme = args.Reading.IlluminanceInLux < 1000
               ? MapColorScheme.Dark
               : MapColorScheme.Light;
        );
}

One final note – the same API is available to Windows Store apps as well. Build for both, it’s great Smile

Download sample source code.

Launch Windows Phone 8.1 Podcasts app from your app

Latest Windows Phone update, called Windows Phone 8.1 will bring us a new app for managing podcasts. The Podcasts app, similar to what we previously had in Music+Videos hub’s podcasts section, will let users subscribe to their favorite shows to be played later on.

The good things for developers here is a fact that we’ll be able to integrate the new app in our applications’ workflow by launching the Podcasts app by one of the following URI schemes: itpc:, pcast: and podcast:.

For example, this is how you launch the Podcast app:

await Launcher.LaunchUriAsync(new Uri("podcast:"));

But it doesn’t end here. By specifying an Url pointing to a specific podcast feed, the app will fetch that feed and display podcast overview page and make it easy for the user to subscribe to that feed. Here’s an example of how to make it display the Hanselminutes feed:

await Launcher.LaunchUriAsync(new Uri("podcast:feeds.feedburner.com/HanselminutesCompleteMP3"));

image

Fun fact: the above screenshot was taken from my phone (device) using the Project my screen app, which was released today. Read more about it here.

Upon launching the app, the user has quick access to playing the latest episode (Podcasts app supports streaming) or subscribe to the series.

When user is done with subscribing or playing podcasts, navigating back will get her back to your app where she can continue her work with it.

Of course other apps can now move to supporting those URI protocols as well so, each user could choose her favorite podcast app to integrate with on her device.

Windows 8.1. Developers Contest–rok za prijavo podaljšan!

clip_image002

Rok za prijavo aplikacij v prvem valu je podaljšan do 6. aprila, rok za drugi krog prijav pa je 30. april!

Za vas Imamo dobre novice! J Na podlagi mnogih vprašanj, ki smo jih dobili o registraciji aplikacij in pravočasni odobritvi za Windows Store, smo prestavili rok za registracijo za en teden, tako da lahko v prvem valu prijavite vaše aplikacije do 6. aprila.

Naslednji koraki:

  • Aplikacije, registrirane v prvem valu (do 6. aprila), bodo dobile povratno informacijo in podporo pri izboljšanju uporabniškega vmesnika ter UX. Tako boste lahko izboljšali in ponovno naložili vaše aplikacije do 30. aprila. Seveda boste lahko nabrali tudi več prenosov in si s tem izboljšali možnosti za nagrade.
  • Vsi razvijalci, ki še niste uspeli narediti in objaviti aplikacij v prvem ciklu, jih boste lahko prijavili v drugem ciklu (do 30. aprila) in tekmovali za nagrade, a brez povratne informacije in dodatne podpore za izboljšanje uporabniške izkušnje.

Razdelitev nagrad:

16 Nokia Lumia 1520 bomo podelili zmagovalcem kategorij:

  • Najboljši UX design (lokalna kategorija)
  • Regionalne kategorije:
    • Najboljši UX design;
    • Največkrat prenesena aplikacija;
    • Največkrat ocenjena aplikacija;
    • Najbolje ocenjena aplikacija;

30 Prestigio Multipad Visconte Windows tablic bomo razdelili zmagovalcem vseh ostalih kategorij.

clip_image004

Več informacij o tekmovanju ter pravila najdete na spletni strani tekmovanja. Pridružite se tudi Facebook skupini, kjer bomo odgovorili na vaša vprašanja, tam boste dobili tudi vse dodatne informacije. Oglejte si brezplačne predloge za aplikacije in materiale z Windows 8 dogodka!

Še vedno je čas – ne zamudite priložnosti!

Windows 8.1 XAML: Render to Bitmap

One of my favorite features coming in Windows 8.1 for developers has got to be the ability to render a selected piece of UI to an image and allowing for further manipulation with that image (changing pixels and ultimately saving it to some permanent storage location). We have this in WPF, Silverlight and Windows Phone. And now it’s coming to Windows Store apps as well. Specifically, it’s the RenderTargetBitmap class that makes this possible.

Take for example, this piece of UI:

image

Let’s say I don’t want to send this user data in a text form, but rather send an image of the filled-out form, for a change. And I want to include the violet part only, to get just the form, pure. You know, get rid of the gradient...

So I would take the Grid element that’s topmost in XAML tree I want to capture, and name it “TheForm”.
On button click, I’d let the user pick a file location, then invoke three magical lines:

var renderTargetBitmap = new RenderTargetBitmap();
await renderTargetBitmap.RenderAsync(TheForm);
var pixelBuffer = await renderTargetBitmap.GetPixelsAsync();

Where in fact the second line is the one actually doing the hard work of capturing the snapshot… So simple!

The rest of the code I have is just about picking the right encoder and actually pushing the bytes to the file:

using (var stream = await file.OpenAsync(FileAccessMode.ReadWrite))
{
    var encoder = await BitmapEncoder.CreateAsync(BitmapEncoder.JpegEncoderId, stream);
    encoder.SetPixelData(
        BitmapPixelFormat.Bgra8,
        BitmapAlphaMode.Ignore,
        (uint)renderTargetBitmap.PixelWidth,
        (uint)renderTargetBitmap.PixelHeight,
        logicalDpi,
        logicalDpi,
        pixelBuffer.ToArray());

    await encoder.FlushAsync();
}

But wait, there’s more!

The RenderTargetBitmap class is actually a subclass of ImageSource, which means you can set it to any property accepting the same type without having to worry about encoders or moving bytes around.

In the following example, I’m going to create a fake form entry sniffer that would take a snapshot of the form once on every two user keystrokes.
Instead of secretly sending snapped image to a secret location through a secret channel, I’ll simply add an Image control next to TheForm and make it a little bigger, say twice the width of the original form. I named it MirorImage.

In Page’s constructor, I’ll initialize a new instance of RenderTargetBitmap and set it as MirrorImage’s source:

mirrorRenderTargetBitmap = new RenderTargetBitmap();
MirrorImage.Source = mirrorRenderTargetBitmap;

With that done, I only have to worry about picking the right time to capture the form. I said I’d capture once every two keystrokes, so:

private async void TextBox_TextChanged(object sender, TextChangedEventArgs e)
{
    if (mustRender)
    {
        await mirrorRenderTargetBitmap.RenderAsync(TheForm);
    }
    mustRender = !mustRender;
}

(every TextBox on TheForm is of course wired to the TextBox_TextChanged event handler)

And the result:

image

The form on the right is just a rendered image of the original “TheForm” from the left. And although I’ve set the Image’s width to be twice the one of “TheForm” (while not specifically setting the height), the image is rendered correctly and proportionally. Note that you can also set the target image size manually when invoking the RenderAsync method – its overload is accepting width and height parameters.

These are only a couple of very basic examples of RenderTargetBItmap class usages, there are numerous cases where this is going to come in handy, I’m sure. This feature will be included in forthcoming Windows 8.1 update and will not work on current Windows 8 version.

Here’s a downloadable source code for this example. You’ll Visual Studio 2013 (Preview) and Windows 8.1 to open and run the project.

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).

re//rebuild/ Slovenia, 11.12.2012: Windows Phone 8

I’ve just posted slides from today’s re//build Slovenia event, where I talked about Windows Phone 8. Download the source code from here.

Voice speech/recognition demos were the fun part and they actually worked better than I had expected. What surprised me is a lot of people still haven’t heard of (or used) the MVVM pattern, which, in one form or another, can help you a XAML world of development a lot. And lately it’s getting quite popular on the HTML side as well.

Let’s change that.

Share charm stopped working while debugging Windows Store app?

An important part of working on Windows Store apps is implementing a Share contract, which allows your app to share parts of its content with other installed apps. Those apps then act as an extension to your app, taking that content and implementing them in different ways, e.g. the Mail app will include it in the body of a new mail or an attachment, twitter and Facebook clients will post it on your timeline, etc.

Debugging your Search contract code can, however, result in system-wide shutdown of the service, meaning that no Windows Store app can share any content with other apps anymore. In such case, instead of getting a list of apps, that are available to share, you’ll be notified that:

Something went wrong with Share. Try again later.

Typically, this happens when you stop debugging (in Visual Studio) while in DataTransferManager’s DataRequested event handler. And this can happen a lot, if you’re not careful Smile

OK, here’s what you do if it does happen. [tl;dr; Restart Explorer]

1. Open Task Manager
2. Select the Details tab
3. Find Explorer.exe (easiest to sort by Name)
4. End Task (button in right lower corner will do the job).
- don’t be afraid when your taskbar disappears, you’ll get it back
5. Select File –> Run new task
6. Type Explorer.exe in the input box
7. Press OK (and taskbar is back)

Your Share charm should be working again.

Highlighting search results within Windows Store apps

Download source code

Guidelines and checklist for search page for Windows Store apps (formerly Metro) suggest using hit highlighting to “indicate why a search result matches the [search] query”, as displayed on this screenshot (taken from the linked page):

That’s a great way to show the user why results are returned from the search query, but how do you implement that?

I already hinted at the suggested approach in my previous post, where I wrote about bindable Runs. Using the same technique, the hit highlighting guideline can be implemented pretty easily.

Let’s see how.

I’ve started out with a default Windows Store Grid app template, which provides the conveniently built-in sample data source. That’s the source we’re going to search through.

image

Of course we’ll need to implement the Search contract: Project –> Add New Item –> Search Contract. That will add the search results page to the project and put search activation code snippet into the App class.

image

The details for searching through the sample data source is yours to implement(a sample is included in provided source code).

Now for the relevant part.

The trick is to create a binding service that would take 3 input parameters:

1. Full text that contains the highlighted part,
2. Search text,
3. (Optional) highlight brush.

The service would extend the TextBlock control by clearing all its inlines and replacing them with a new set of Runs that will compose the new, highlighted text.

I’ve created a service that exposes these three parameters as dependency properties, this is the relevant code that executes when either full or highlighted text changes (find full implementation in the provided source code):

private static void OnTextChangedCallback(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
    TextBlock textBlock = d as TextBlock;
    if (textBlock == null)
    {
        return;
    }
    string fullText = GetFullText(textBlock);
    string highlightedText = GetHighlightedText(textBlock);

    if (string.IsNullOrEmpty(fullText) || highlightedText == null)
    {
        return;
    }

    Brush brush = GetHighlightBrush(textBlock) ?? new SolidColorBrush(Windows.UI.Colors.Red);

    highlightedText = highlightedText.Substring(1, highlightedText.Length - 2);

    int length = highlightedText.Length;
    int lastIndex = 0;
    int index = fullText.IndexOf(highlightedText, 0, StringComparison.CurrentCultureIgnoreCase);

    textBlock.Inlines.Clear();
    while (index >= 0)
    {
        textBlock.Inlines.Add(new Run { Text = fullText.Substring(lastIndex, index - lastIndex) });
        textBlock.Inlines.Add(new Run { Text = fullText.Substring(index, length), Foreground = brush });
        lastIndex = index + length;
        index = fullText.IndexOf(highlightedText, lastIndex, StringComparison.CurrentCultureIgnoreCase);
    }
    textBlock.Inlines.Add(new Run { Text = fullText.Substring(lastIndex) });
}

To use this binding service, open StandardStyles.xaml (found in the Common folder) and search for the StandardSmallIcon300x70ItemTemplate style. This style is used to display the items in the search results page. You’ll find three TextBlocks in there – one for Title, one for Subtitle and the last one displays the Description. Instead of binding to Text property, wire those TextBlocks to the new binding service:

<TextBlock ifs:BindingService.FullText="{Binding Title}" ifs:BindingService.HighlightedText="{Binding DataContext.QueryText, ElementName=resultsPanel}" ifs:BindingService.HighlightBrush="#d9001f" Style="{StaticResource BodyTextStyle}" TextWrapping="NoWrap"/>
<TextBlock ifs:BindingService.FullText="{Binding Subtitle}" ifs:BindingService.HighlightedText="{Binding DataContext.QueryText, ElementName=resultsPanel}" ifs:BindingService.HighlightBrush="#d9001f"  Style="{StaticResource BodyTextStyle}" Foreground="{StaticResource ApplicationSecondaryForegroundThemeBrush}" TextWrapping="NoWrap"/>
<TextBlock ifs:BindingService.FullText="{Binding Description}" ifs:BindingService.HighlightedText="{Binding DataContext.QueryText, ElementName=resultsPanel}" ifs:BindingService.HighlightBrush="#d9001f"  Style="{StaticResource BodyTextStyle}" Foreground="{StaticResource ApplicationSecondaryForegroundThemeBrush}" TextWrapping="NoWrap"/>

And you’re done Smile

image

Download source code

Windows Phone 8 and our “localized” keyboard layout

This is a rant (somewhat).

Windows 8 features a nicely convenient on-screen keyboard, which is mostly useful when using on a touch device, like a tablet. I’m quite often using it on my Surface, when my touch cover is not attached.

Now, let’s take a look at a Slovenian layout of this keyboard:

win8keyboard

The keyboard layout is QUERTZ, with South Slavic layout, standardized in the 80’s and used in Slovenia, Croatia, Serbia, Bosnia and other (at that time) republics of former Yugoslavia. That means there are five additional letters on there. Letters č, š and ž (circled green) are part of all South Slavic alphabets, while đ and ć (circled red) are not in Slovenian alphabet.

Although this is a Slovenian keyboard layout, the presence of non-Slovenian characters is far from annoying or discomforting – besides the fact that there are also other (English) characters present, we’re used to this layout and have adopted it a long time ago, plus sometimes those characters come in rather handy.

But again, those red characters are not part of Slovenian language and that’s why I was surprised to see the Slovenian on-screen keyboard on my Windows Phone 8 (taken on my Nokia Lumia 920):

wp8keyboard1

It struck me weird that Microsoft would, out of five Slavic characters, pick the two that are not part of the Slovenian alphabet.

Taking another look at the above Windows 8 keyboard layout - notice how š and č are right next to  p and l? Wouldn’t it be natural to take this exact layout  to the Phone keyboard? So now, out of 28 letters on Windows Phone keyboard, there are 6 of them that aren’t in Slovenian alphabet – q, w, y, x (English), and ć, đ (Croatian/Serbian Latin/Bosnian).

Weird.

Of course, you can also (besides typing a combo of c and ˇ) access all letters by pressing and holding down the base letter, which gives you more options – and - behold č as the first option:

wp8keyboard2

Weird.

Fix please?

Windows Store apps: the case of missing StringFormat or Binding on the Run

If your previous developer experience include developing for other XAML technologies and you’re moving into the Windows Store apps space, you’ve already noticed that a lot of things you were used to in other techs, are missing from your Windows Store app development experience. One example being there’s no more StringFormat property available in your Binding markup construct. You may have been used to writing something like:

<TextBlock Text="{Binding Name, StringFormat='Name: \{0\}'}" />

(that would bind your TextBlock to the Name property, outputting “Name: [property value]” to the UI)

With StringFormat missing from WinRT’s XAML Binding, you have two options:

1. Create a StringFormat value converter and handle your string formatting there.

2. Break down your text into smaller chunks of text and bind those to the Runs, which are part of your TextBlock:

<TextBlock Style="{StaticResource BodyTextStyle}" TextWrapping="NoWrap">
  <Run Text="Name: " />
  <Run Text="{Binding Name}" Foreground="Red" />
</TextBlock>

Yes, Runs are bindable!

Not only will Runs inherit styling attributes from their parent TextBlock, you can override them in whole, or just parts of it (like changing color only, etc.) And you make your TextBlock “bind” to more than one property in one go, something not possible with StringFormat or converter workaround.

Pretty cool.