Images and Scaling with Windows Runtime #WinRT #WPDev #Windev

With the advent of Windows Phone 8.1, developers have the option of using WinRT native XAML stack as opposed to the Silverlight XAML the only option with early Windows Phone iterations.

One of the differences between WinRT XAML and Silverlight XAML is scaling and like with fonts, & images, scaling can have a significant effect on the look and feel of an app.

The default behavior with Windows Phone 8 was the inherent Silverlight behavior of scaling the image to fit. This meant that unless a high-resolution image was used, the image would end up looking blurred. Windows Runtime takes a different approach.

Windows 8x supports multitudes of screen sizes, resolutions and DPI. Windows Phone now supports 4 resolutions. The way Windows Runtime deals with this is by allowing developer to specify multiple images to match certain scale factors.

Windows Store Apps Windows Phone Store Apps
1.0 (100% no scaling) 1.0 (100% no scaling)
1.4 (140% scaling) 1.4 (140% scaling)
1.8 (180% scaling) 2.4 (240% scaling)

The runtime would determine the scaling factor to use depending upon the screen size, resolution, DPI and the form factor of device in question. The developer is required to supply images for scaling 1; the other scale factors are optional. If they are supplied, they will be used if necessary.

There are two ways of supplying images to support multi-scaling support.

  • Specify image scale within the file name e.g. Image.scale-100.png or Image.scale-140.png
  • Create direct for each image scale and place images inside without specifying scaling like in 1. E.g. scale-100/Image.png or scale-140/Image.png

The attached project includes examples of both ways.

To use this and enable auto-scaling support, you specify the image as specified below

<Image Source="Assets/Iris.png" />
<Image Source="Assets/Iris2.png" />

Occasionally it is necessary to set the images from code. In those instances, one should query the windows runtime to determine the current scaling factor and return appropriate image resource.

var uri = new System.Uri("ms-appx:///Assets/Iris.png");
var file = await StorageFile.GetFileFromApplicationUriAsync(uri);

This will correctly detect the scaling factor and get appropriate file.

Alternatively, for Windows 8x, we can use DisplayProperties.ResolutionScale to determine current scaling and for Windows Phone, we can use DisplayInformation.RawPixelsPerViewPixel.

Uri uri = null;
#if WINDOWS_PHONE_APP
    var rawpixelperview = Windows.Graphics.Display.DisplayInformation.GetForCurrentView().RawPixelsPerViewPixel; 

    var Width = Convert.ToInt32(Window.Current.Bounds.Width * rawpixelperview); 
    var Height = Convert.ToInt32(Window.Current.Bounds.Height * rawpixelperview); 

    if(Width == 480 && Height == 800)
    {
        uri2 = new System.Uri("ms-appx:///Assets/scale-100/Iris2.png");
    }
    else if((Width == 720 && Height == 1280 ) || (Width == 768 && Height == 1280))
    {
        uri2 = new System.Uri("ms-appx:///Assets/scale-140/Iris2.png");
    }
    else
    {
        uri2 = new System.Uri("ms-appx:///Assets/scale-240/Iris2.png");
    }
#else
    switch (DisplayProperties.ResolutionScale)
    {
        case ResolutionScale.Scale100Percent:
            uri2 = new System.Uri("ms-appx:///Assets/scale-100/Iris2.png");
            break;

        case ResolutionScale.Scale140Percent:
            uri2 = new System.Uri("ms-appx:///Assets/scale-140/Iris2.png");
            break;

        case ResolutionScale.Scale180Percent:
            uri2 = new System.Uri("ms-appx:///Assets/scale-180/Iris2.png");
            break;
    }
#endif

var file = await StorageFile.GetFileFromApplicationUriAsync(uri);

It worth noting that images set in xaml and those done codebehind behave differently at least as far as size on screen is concerned. The only way to achieve correct size as visible in xaml is to set size to that of scale 1.0 image.

Supporting Accessibility

Windows Store apps support high contrast mode. The two available options are

  • Black background and white foreground
  • White background and black foreground.

To additionally support these two accessible image formats, you need to provide scale factor 1 images named / placed appropriately. I have excluded the high contrast images from sample as windows phone was using that by default.

Assets/Iris.scale-100_contrast-black.png

Assets/Iris.scale-100_contrast-white.png

or

Assets/scale-100_contrast-black/Iris2.png

Assets/scale-100_contrast-white/Iris2.png

Downloadable sample code can be downloaded here

End of line for CineworldMetro

Last night I did something I wasn’t sure I should do!! I removed (unpublished) my cineworld app from Windows Phone and Windows 8 stores.

In just over 2 years it has had 90K on phone and 40K on Windows8. It has come a long way and like a few other of my projects, it gave me a chance to try various scenarios in terms of design and performance.

Sadly one thing I never thought significantly was sustainability of the app in long term. My azure hosting had been free till date and from next week I start paying real money towards it. I have spend many many hours towards its dev and since the app doesn’t make any money for me so I can’t justify giving it a life line.

It has been good fun. Thanks for all the fish.

Lumia 930 – 1 week on #ConnectsTrial

For good part of last 6 months, I ensured that I took a moment to bug @Connects team w.r.t Lumia 930. Of course it wasn’t available back then.. they knew it, I knew it but that had to be done. I even reminded them that they never sent me a 1520 to review :) and I suppose it worked :)

On 14th of this month, I got an email stating that they have 930 and I could be the first one to get my hands on it.. quickly filled out the form.. bang bang.. they dispatch the device the next day. I patiently waited good part of the morning for DHL to bring it in… At noon, I get an email stating package awaiting to be collected!!

The packaging isn’t brick box like earlier Lumia models but a flatter version like the one for Lumia 630.. I suppose this is the packaging for gen 2 devices.
930-Pic1 930-Pic2 930-Pic3 930-Pic4

The device is striking.. even without switching it on that much is clear.. the screen reminds me of Lumia 800’s curved glass and it is ever so slightly curved. The aluminium and the back shell remind me of Lumia 925 but its significantly flatter.. in fact the dimensions of 930 are about the same as Nexus 5. The back is tapered to give a feeling of thinness. I am not a big fan of green but I’d take the green or orange models instead of white or black ones. The green gives a nice neon lightening effect on a white table.. it is remarkably pleasant.

The first thing I did after powering it on was restored a Lumia 1020 backup on it. The device did warm up during this time and while all Lumia devices do warm up, I think aluminium chassis aids heat flow. The AMOLED display is just gorgeous.. At 441 dpi, it is significant ahead of any other devices out there oh and its full HD – 1080p. The device use Snapdragon 800 chipset and comes with 2GB of RAM. The outcome, its snappy.

It comes with 20MP CMOS as opposed to 40MP CMOS in Lumia 1020 but the combination of faster SoC and smaller CMOS means that taking pictures is a pleasure.. Here is a test capture showing speed differences.. both 1020 and 930 are set on 10 second delay.. I have tried best to tap at same time

the lens in 930 is wide though not as much as that of 1020. min focus distance is similar to that of Lumia 1020. You can view some of the pictures I have uploaded and judge for yourself

https://www.facebook.com/media/set/?set=a.10152213561226921.1073741827.543056920&type=1&l=d8d7d8ce45

The battery life is similar to that of Lumia 1020.. my usage gives me just enough to last through the day. I have occasionally seen it warming up but I think a firmware might be due to fix that issue. Another side note, on a white background, I have seen the screen flicker a bit.. again a firmware update should sort that out.

I did power my 1020 a few times and I find it offensively slow and laggy. except for the 40 MP sensor I don’t cant think of anything that would pull me back.. I would trade it all in for a Lumia 930. Infact I am seriously thinking how on earth are @Connects team planning to get this device back.. they really think I am joking.. sigh.. I suppose they are in for a surprise :)

 

My thoughts on Lumia 630

Towards the end of May 2014, Microsoft Mobile aka Nokia Devices released their first / last windows phone device. Its was different on many scales – it was the first device to feature Windows Phone 8.1 – Windows Phone Blue. Prior to that only developers had access to the Blue builds thanks to the Dev Preview Program.

Thanks to @Connects team I had a Lumia 630 at my desk on 2nd June.
 1Shot_20140602_100914 1Shot_20140624_143725

It comes in a very compact box as compared to previous Lumia devices. The colour of the device I got was gorgeous orange. Its very bright and nice at the same time. This is the first device that my daughter wanted.. She has played with a variety of Lumia devices before – 800, 620, 820, 920, 925 and 1020 (cyan, black, yellow, white & silver) and never asked for one

The device resembles previous Lumia devices in terms of over all layout. Micro USB at the bottom, the power and volume buttons on the side. Headphone jack at the top. The few missing ones at the camera button and hardware buttons for back, windows and search. Soft buttons make appearance when the screen is powered and provide haptic feedback. Camera can be launched by using camera app or by pinning camera to notifications bar – quick launch area.

1Shot_20140624_143858 1Shot_20140624_143939

Hardware:

  • Quad core Snapdragon S400 1.2GHz
  • 4.5 inch IPS LCD display with Gorilla Glass 3.
  • 5MP rear camera
  • 512MB RAM

It does not come with Ambient Light Sensor, Proximity Sensor or Front facing camera. Rear camera does not have flash of any sorts. Even Lumia 520 shipped with Ambient Light Sensor and Proximity sensors. 620 had LED flash to go along. Not this one. Lack of ambient sensor means no automatic brightness control – you need to manually keep a lid on it.. With camera and brightness control occupying 2 of the 4 quick launch buttons, you’d start wishing for more.

The only hardware issue I had was that it refused to see my home Wi-Fi network. I have it set on 802.11n which works fine on Lumia 920 / 925 and 1020 but not on 630.. oh well. Camera is okay for most  casual snappers – simple 5MP snapper.

Its not a bad device – most apps start just fine. The processor handles most tasks easily. 512MB RAM limitation however does hit many apps and games and there’s just nothing you can do about it. This device would have fit perfectly to match Moto E and Moto G devices with other low-end devices adding to the mix.

However I have been disappointed to an extent.. the device isn’t available at advertised £89.99. Recently MicroMax India announced 2 Windows phone device that will be priced better than Lumia 630. Both of these devices run Snapdragon 200 (Dual core) with 1GB RAM. Beyond the hype, most should go for larger memory than more cores. Earlier today morning Microsoft launched Nokia X2 – the 2nd iteration of the android line up. Spec-wise even that has a better setup than 630 and is priced lower.

From being happy about a decent low-end device, today I am left unsure about what’s its place would be in the market. Nokia Lumia 520 captured 30% of Windows Phone market in a month and helped Windows Phone in many markets. I am not so sure of 630.. lets hope Microsoft Mobile has more tricks up its sleeves.

1Shot_20140624_143908 1Shot_20140624_144042

 

 

 

Cineworld – Transparent tiles and Uri Schema

Traditionally Windows Phone allowed Tile images to be transparent or otherwise. With advent of Windows Phone 8.1 and start screen background, devs are pretty hyped up about using transparent images.

For once I myself received a request for cineworld app. so the cycle tile is been done away with (if you have it pinned, cycle tile will continue to update as was before.. ) if you repin you get flip tile with primary background transparent.

I was also asked for Uri Schema for cineworld app. I have added 3.

cineworld:film?1234

cineworld:cinema?22

cineworld:search?xmen days of

the film uri schema takes EDI value.

Photography with Lumia 1020

Thank for Nokia Connects I had a Lumia 1020 to test for about 2 weeks. Being a phone camera enthusiast I was delighted to try it.

The Lumia 1020’s main attraction is the massive 41 megapixel camera and the design of the phone itself conveys the fact that its a camera with a phone and not the other way. The camera indeed takes awesome pictures – I do however miss the increase in minimum focus distance as compared to 925. Here are some of the oversample (resized / reduced size) saved and synced to SkyDrive – I don’t have full res at hand as they are not synced to SkyDrive (my main issue with the implementation).

WP_20130923_08_36_28_Pro

WP_20130923_08_37_07_Pro

WP_20130923_17_31_40_Pro

WP_20130924_08_10_05_Pro

WP_20130926_08_03_54_Pro

WP_20130926_17_46_39_Pro

WP_20130927_08_34_05_Pro

WP_20130927_08_34_05_Pro (1)

WP_20130929_13_27_32_Pro WP_20130929_13_26_47_Pro

WP_20130929_13_32_10_Pro

WP_20131001_08_47_49_Pro

WP_20131001_08_48_09_Pro (1)

WP_20131001_08_55_21_Pro (1)

WP_20131001_08_56_07_Pro

WP_20131001_08_56_32_Pro (1)

Happy Photography