Category Archives: Uncategorized

Multicolor font characters in Windows 8.1

Windows 8.1 brings alots of new API’s and support for Windows store developers and one of them which I would like to highlight today is the support of Multicolor font chars in windows 8.1

In a //Build session “Innovations in High Performance 2D Graphics with Direct X”, the speaker revealed that two new tables have been defined in the OpenType font specification that allow multi-color glyph rendering. The reason for this enhancement was primarily for rendering multicolor emoji.

The new Segoe UI Emoji font in Windows 8.1 supports these multicolor characters.

Lets write  a very basic application to demo this new capability.

    • Open your Visual Studio 2013 Preview and create a new Blank Windows Store app.
    • In your mainpage, add the following Xaml code

<ScrollViewer> 
<ItemsControl Name=”multiColorList” 
VerticalAlignment=”Center”> 
<ItemsControl.ItemTemplate> 
<DataTemplate> 
<TextBlock Text=”{Binding}” FontFamily=”Segoe UI Emoji” 
FontSize=”50″ Margin=”12″ /> 
</DataTemplate> 
</ItemsControl.ItemTemplate> 
</ItemsControl> 
</ScrollViewer> 

 

 

    • Now paste the (see below) code on your onNavigatedTo event handler in your code-behind file 

for (int code = 0x1F600; code < 0x1F700; code++) 
   { 
     multiColorList.Items.Add(Char.ConvertFromUtf32(code)); 
   } 

  • Now hit F5 to run the project and you’ll see something like this. 

 

Happy Coding – Cheers

New Controls in Windows 8.1

Windows 8.1 Preview introduces these new controls and features:

  • AppBar controls
  • CommandBar
  • DatePicker
  • Flyout
  • Hub
  • Hyperlink
  • MenuFlyout
  • SettingsFlyout
  • TimePicker

Windows 8.1 Preview includes updates for these existing controls:

  • FlipView updates
  • Headers for ComboBox, DatePicker, TimePicker, Slider, Edit controls
  • Placeholder text
  • Other control updates

AppBar controls

Windows 8.1 Preview introduces new controls for XAML that let you more easily create app bar command buttons that reflect the proper design guidelines and behaviors: the AppBarButtonAppBarToggleButton, andAppBarSeparatorcontrols.

App bar buttons for XAML

App bar buttons differ from standard buttons in several ways:

  • Their default appearance is a circle instead of a rectangle.

  • You use the Label and Icon properties to set the content instead of the Content property. The Contentproperty is ignored.

  • The button’s IsCompact property controls its size.

 

CommandBar

 

Windows 8.1 Preview introduces a new control for XAML that lets you easily create properly designed app bars: theCommandBar control.

The command bar

The CommandBar simplifies the creation of basic app bars by providing:

  • Automatic layout of commands, with primary commands on the left and secondary commands on the right.

  • Automatic resizing of app bar commands when the app size changes.

 

DatePicker

Windows 8.1 Preview introduces a new control for XAML that lets a user set a localized date in your app: theDatePickercontrol.

The date picker

 

TimePicker

Windows 8.1 Preview introduces a new control for XAML that lets a user pick a time value in your app: theTimePickercontrol.

The TimePicker

 

 

Flyout

Windows 8.1 Preview introduces a new control for XAML that lets you temporarily show UI related to what the user is currently doing: the Flyout control.

A button with a flyout

 

 

Hub

Windows 8.1 Preview introduces a new control for XAML that lets you easily create the hub design pattern that reflects the proper design guidelines and behaviors: the Hub control.

A hub page

Hub pages are the user’s entry point to your app. They display content in a rich, panning view that lets users get a glimpse of what’s new and exciting, and then dig deeper into your app’s content. The hub displays different categories of content, each of which maps to your app’s section pages. Each section should bubble up content or functionality. The Hub should offer a lot of visual variety, engage users, and draw them in to different parts of the app.

The XAML Hub control provides elements to help you more easily implement the hub design pattern for your app. Unlike a GridView or ListView control that displays data from a single source, each hub section can display data from a different source. Any XAML content can be used to create a visually rich hub page. To get started quickly creating an app with aHub page, use the Hub App template in Microsoft Visual Studio 2013 Preview.

Add a header to the Hub to let users know the context of your hub. This is often the name of your app. You can use a simple text Header, or define a HeaderTemplate that uses any XAML content. It’s important to remember that, although you can use arbitrary content in the header, the height of the header will affect the amount of vertical space available for your hub section content. The header remains fixed in position and doesn’t scroll with the hub sections.

 

Hyperlink

Windows 8.1 Preview adds the Hyperlink element to the XAML text object model in theWindows.UI.Xaml.Documents namespace.

The Hyperlink element lets you add a hyperlink to a run of text. The hyperlink is treated like the rest of the text and participates in line breaking. When marked as a hyperlink, the text is shown in a specific color and, when tapped, goes to the Uniform Resource Identifier (URI) specified in the NavigateUri property.

Here’s a block of text with a Hyperlink element embedded in it.

Text with a hyperlink

 

MenuFlyout

Windows 8.1 Preview introduces a new control for XAML that lets you temporarily show a list of commands or options related to what the user is currently doing: the MenuFlyout control.

A button with a menu flyout

 

SettingsFlyout

Windows 8.1 Preview introduces a new control for XAML that lets you easily create app settings flyouts that reflect the proper design guidelines and behaviors: the SettingsFlyout control.

The SettingsFlyout

Like a Page control, a SettingsFlyout control can be declared in XAML as a root element of a document, with anx:Class attribute specified to subclass from SettingsFlyout. You can set the width of the Settings flyout, but the height is always the full height of the screen.

 

 

Complete details of the new controls introduced in Windows 8.1 can be found at http://msdn.microsoft.com/en-us/library/windows/apps/bg182878.aspx

Using Custom Fonts in Windows store applications

While doing Windows Store application development, one might come to a point where he/she want to use a custom font to do styling in their applications rather than using a font that comes with Windows & its SDK.

The procedure to use a custom font is very simple and it can be done by following the below steps. 

  • Add your custom font (.ttf or any other format) into your application assets by right clicking on your project in Solution Explorer > Add New Item > Existing Item.
     
  • Modify the property of FontFamily of your control to 


    FontFamily=”/Assets/BuxtonSketch.ttf#Buxton Sketch” 

    Where BuxtonSketch.ttf is your font file name and its actual name (Buxton Sketch) after the “#”.

Complete code snippet is 
<TextBlock x:Name=”pageTitle” Text=”Application Name” Style=”{StaticResource PageHeaderTextStyle}” FontFamily=”/Assets/BuxtonSketch.ttf#Buxton Sketch”/>
Thanks

Windows Azure Mobile Services Resources – v1 March 2013

This blog post contains all kind of resources for Windows Azure Mobile Services.

Windows Azure Mobile Services is state of the art cloud backend for all kind of applications.

image

  • Windows Azure Mobile Services Tutorials :

Start using your free Windows Azure trial Windows Azure Free Trial for using up to ten free Windows Azure Mobile Services Instances.

If you want to read about Windows Azure Mobile Services please checkhttp://blogs.msdn.com/b/pakistan/archive/2013/03/20/windows-azure-mobile-services-state-of-the-art-cloud-backend-for-all-of-your-applications.aspx

 

Easy Access to Kinect for Windows Sample Code

Microsoft released Kinect for Windows samples under an open source license.  You can find everything on CodePlex: http://kinectforwindows.codeplex.com/.  There are total of 22 unique samples in C#, C++, and Visual Basic.

Few reasons behind this release are:

  1. Easy Access -> we will continue to release our sample applications as part of our Developer Toolkit.  However, that’s a large download & install that can be cumbersome if you just want to quickly view or access code on the web
  2. Reuse The Code -> we’re releasing all the samples under an Apache 2.0 license so that you can take the code and reuse, remix, etc.  Also, we’re using a Git repository so it’s easy clone & fork if you want
  3. Get Feedback -> we will use CodePlex’s built-in feedback & discussion tools to get community input on the samples.  We want to hear from you to understand what we can do better with the samples
  4. Faster Updates -> we will be able to update samples more quickly on CodePlex (compared to Toolkit releases).  CodePlex also has a “Subscribe” feature that enables you to follow the project and get notified when something changes, a bug gets fixed, someone says something smart in the discussions, etc.  (note:  the subscription feature doesn’t actually track the smartness of a post but one can dream :-))

Browse K4W sample code right in your browser…

 

List of Samples

This is the list of all samples included in the latest Developer Toolkit release. The table lists the name of the sample, in which languages it’s available and what technologies and additional SDKs are used.

Sample

C#

C++

VB

WPF

DirectX

Additional information

Audio Basics

Yes

Yes

Yes

Yes

Yes

Available in 1.6.0

Audio Capture Raw

No

Yes

No

No

No

Available in 1.6.0

Audio Explorer

No

Yes

No

No

Yes

Available in 1.6.0

Basic Interactions

Yes

No

No

No

No

Available in 1.6.0

Color Basics

Yes

Yes

Yes

Yes

Yes

Available in 1.6.0

Depth Basics

Yes

Yes

Yes

Yes

Yes

Available in 1.6.0

Depth

No

Yes

No

No

Yes

Available in 1.6.0

Depth with Color

No

Yes

No

No

Yes

Available in 1.6.0

Face Tracking

Yes

No

No

Yes

No

Available in 1.6.0, Require Face Tracking

Face Tracking Basics

Yes

No

No

Yes

No

Available in 1.6.0, Require Face Tracking

Face Tracking Visualization

No

Yes

No

No

Yes

Available in 1.6.0, Require Face Tracking

Green Screen

Yes

Yes

No

Yes

Yes

Available in 1.6.0

Infrared Basics

Yes

Yes

No

Yes

Yes

Available in 1.6.0

Kinect Explorer

Yes

No

No

Yes

No

Available in 1.6.0

Shape Game

Yes

No

No

Yes

No

Available in 1.6.0

Skeletal Viewer

No

Yes

No

No

Yes

Available in 1.6.0

Skeleton Basics

Yes

Yes

Yes

Yes

Yes

Available in 1.6.0

Slideshow Gestures

Yes

No

No

Yes

No

Available in 1.6.0

Speech Basics

Yes

Yes

Yes

Yes

Yes

Available in 1.6.0

Tic Tac Toe

Yes

No

No

Yes

No

Available in 1.6.0

WPF D3D Interop

Yes

Yes

No

Yes

Yes

Available in 1.6.0

XNA Basics

Yes

No

No

Yes

No

Available in 1.6.0 RequireXNA

 

Requirements

  • Visual Studio 2010 or 2012, .NET 4.0 or 4.5
  • Kinect for Windows SDK and Kinect for Windows Toolkit.
  • Some samples require additional toolkit components (e.g. Face Tracking).
  • Some samples make use of additional SDKs such as DirectX, XNA etc.
  • Note: See the full List of Samples to see if any additional SDKs are required.

 

Useful Links

Easy Access to Kinect for Windows Sample Code

Microsoft released Kinect for Windows samples under an open source license.  You can find everything on CodePlex: http://kinectforwindows.codeplex.com/.  There are total of 22 unique samples in C#, C++, and Visual Basic.

Few reasons behind this release are:

  1. Easy Access -> we will continue to release our sample applications as part of our Developer Toolkit.  However, that’s a large download & install that can be cumbersome if you just want to quickly view or access code on the web
  2. Reuse The Code -> we’re releasing all the samples under an Apache 2.0 license so that you can take the code and reuse, remix, etc.  Also, we’re using a Git repository so it’s easy clone & fork if you want
  3. Get Feedback -> we will use CodePlex’s built-in feedback & discussion tools to get community input on the samples.  We want to hear from you to understand what we can do better with the samples
  4. Faster Updates -> we will be able to update samples more quickly on CodePlex (compared to Toolkit releases).  CodePlex also has a “Subscribe” feature that enables you to follow the project and get notified when something changes, a bug gets fixed, someone says something smart in the discussions, etc.  (note:  the subscription feature doesn’t actually track the smartness of a post but one can dream :-))

Browse K4W sample code right in your browser…

 

List of Samples

This is the list of all samples included in the latest Developer Toolkit release. The table lists the name of the sample, in which languages it’s available and what technologies and additional SDKs are used.

Sample

C#

C++

VB

WPF

DirectX

Additional information

Audio Basics

Yes

Yes

Yes

Yes

Yes

Available in 1.6.0

Audio Capture Raw

No

Yes

No

No

No

Available in 1.6.0

Audio Explorer

No

Yes

No

No

Yes

Available in 1.6.0

Basic Interactions

Yes

No

No

No

No

Available in 1.6.0

Color Basics

Yes

Yes

Yes

Yes

Yes

Available in 1.6.0

Depth Basics

Yes

Yes

Yes

Yes

Yes

Available in 1.6.0

Depth

No

Yes

No

No

Yes

Available in 1.6.0

Depth with Color

No

Yes

No

No

Yes

Available in 1.6.0

Face Tracking

Yes

No

No

Yes

No

Available in 1.6.0, Require Face Tracking

Face Tracking Basics

Yes

No

No

Yes

No

Available in 1.6.0, Require Face Tracking

Face Tracking Visualization

No

Yes

No

No

Yes

Available in 1.6.0, Require Face Tracking

Green Screen

Yes

Yes

No

Yes

Yes

Available in 1.6.0

Infrared Basics

Yes

Yes

No

Yes

Yes

Available in 1.6.0

Kinect Explorer

Yes

No

No

Yes

No

Available in 1.6.0

Shape Game

Yes

No

No

Yes

No

Available in 1.6.0

Skeletal Viewer

No

Yes

No

No

Yes

Available in 1.6.0

Skeleton Basics

Yes

Yes

Yes

Yes

Yes

Available in 1.6.0

Slideshow Gestures

Yes

No

No

Yes

No

Available in 1.6.0

Speech Basics

Yes

Yes

Yes

Yes

Yes

Available in 1.6.0

Tic Tac Toe

Yes

No

No

Yes

No

Available in 1.6.0

WPF D3D Interop

Yes

Yes

No

Yes

Yes

Available in 1.6.0

XNA Basics

Yes

No

No

Yes

No

Available in 1.6.0 RequireXNA

 

Requirements

  • Visual Studio 2010 or 2012, .NET 4.0 or 4.5
  • Kinect for Windows SDK and Kinect for Windows Toolkit.
  • Some samples require additional toolkit components (e.g. Face Tracking).
  • Some samples make use of additional SDKs such as DirectX, XNA etc.
  • Note: See the full List of Samples to see if any additional SDKs are required.

 

Useful Links

Connect your Windows 8 applications to the Cloud

The Windows Azure Mobile Services (WAMS) is a new offering of Microsoft Azure cloud platform that simplifies the implementation of software architectures that addresses the type of environment and challenges that includes;

  1. Multiple devices and Operating system’s to support.
  2. Applications that rely on asynchronous Web services, typically hosted in the cloud.
  3. Variable traffic that complicates resource planning and provisioning.

Windows Azure Mobile services supports all major mobile application development platforms i.e. Windows 8, Windows Phone, IOS and Android, that is why it is termed as “Mobile Services” because it is based on open standards.

Windows Azure Mobile services empowers a developer to add a cloud based backend to their application easily & instantly, allowing users to store relational data into SQL database, binary objects into Storage/Containers, encoding of media files and so on, so that you focus on application logic instead of infrastructure.

The major features of Azure Mobile Services are

  1. Authentication 
    Provides authentication/User Login feature into your application, it supports multiple providers i.e. Microsoft Live ID, Facebook, Google and Twitter.
  2. Data 
    Provides an interface to interact with your SQL Azure database and perform CRUD operations asynchronously.
  3. Push Notifications 
    Provides a simplified way to send Push Notifications by attaching a notification channel to the inserted record.

 

Mobile Services with Windows 8

Now lets go ahead and create a simple application that will be connected to our SQL Azure database to demonstrate the simplicity and power of Mobile Services.

[Note: You can signup for Free 90 days trial of windows azure by visiting www.windowsazure.com ] 

Configuration on Azure Portal

First, we are going to create a Mobile service in our Windows Azure portal and make necessary configurations. 
Go Ahead and login to your azure developer portal,

  1. Click “NEW” at bottom left corner and go to “Compute > Mobile Services >  Create” 

    image 

  2. Provide a name(subdomain) to your Mobile Service, select “Create a new database instance” (incase you have not setup any database earlier), select your nearest region and click next. 

    image

  3. Enter the database name, and database server details, I have created a new database server to keep things simple, once everything is filled, click OK to create your Mobile Service. 

    image 

    It will take few moments to create your mobile service.

  4. After everything is completed, you will see your mobile service status as “Ready” and a URL. 
    Copy this URL, we will be needing this URL to connect our client with the mobile service. 

    image

  5. Click “Manage Keys’” at the bottom and copy “Application Key”. 
    We will be needing this Application Key to connect our client with the mobile service. 

    image

  6. Go ahead and click your Mobile Service name, and click on “DATA” tab, located at the top. 

    image

  7. Click “Add a Table” to create a new data table in our SQL database. 
    You can set permission on the table, so that only authenticated users can perform few or all operations. for now I am leaving it to default. 

    image

Connecting Windows 8 Application to our Mobile Service

Now, we have our Mobile service with a employee table UP & running, Lets move to connect our windows 8 application with the mobile service we just created to store & retrieve data.

Before we jump into the coding part, you have to install “Mobile Services SDK”.

  1. Create a new Windows Store application.
  2. Add a reference of “Windows Azure Mobile Services Managed Client” into your project.
  3. Open App.xaml.cs and add the following code. 

    public static MobileServiceClient MicMobileService  = new MobileServiceClient( “URL”, “Application Key” );

  4. Create a new class, name it “Employee” and add your desired properties. My class looks like this

    class Employee {
    public int ID { get; set; }
    public string Name { get; set; }
    public string Email { get; set; }
    public string Department { get; set; }
    public int Phone { get; set; } }
      Note: This class will represent our entities in the database, the approach similar to Entity Framework (ORM).
  5. Open your MainPage.xaml, insert few textboxes and a button to insert a new employee data into the database.

    image

  6. On the Click Event Handler of “Add Employee” button add the following code.
    private async void Button_Click_1(object sender, RoutedEventArgs e) 
    {
    MessageDialog msg; Employee item = new Employee {
    Name=name.Text, Department=dept.Text, Email=email.Text,
    Phone=Convert.ToInt32(phone.Text) };
    try
    {
    await App.MicMobileService.GetTable<Employee>().InsertAsync(item);
    msg = new MessageDialog("Employee added successfully");
    msg.ShowAsync();
    }
    catch (Exception es)
    {
    msg = new MessageDialog("Error has been occured \n" + es.Message);
    msg.ShowAsync();
    }
    }
  7. Now if you run the project and add a record, you would probably see a success message like this.

    image



  8. Just to cross check, Go back to your Azure portal, click on your Mobile Service, go to DATA tab, select your “Employee” table and under 
    Browse” tab, you will see your recently inserted data.

    image

Summary

By using Windows Azure Mobile Service (WAMS), we have hooked up our client application with windows azure by typing only few lines of code., and our application can be scaled up instantly with the help of instantly scalability features of Windows Azure.

There is another feature called “Scripts”, that allows you to perform some specific operations (server side validation, push notifications, files manipulation etc. ) on each CRUD operation into the table. (depending upon your business logic),

Part 2 – Getting started with Microsoft Kinect

Hi Folks,

In the first Part, I discussed about the fundamentals of Kinect hardware as well as technical details of the camera & microphone array.
Today in this part of my “Programming with Kinect” series I am going to guide you about how to setup the development environment for Kinect and writing code to get started with development using Kinect.

Note: I’ll be using “Kinect for Xbox 360” hardware with “Kinect for Windows SDK” in my posts until & unless I am not using specific features of Kinect for Windows hardware.

Installation of SDK

The Kinect SDK is a development toolkit that allows software developers to build applications using Kinect and expand the possibilities of application and user experience. Kinect Software development kit (SDK) provides interface to interact with Camera, Motors, Microphone array etc. It allows user to build applications through Visual C#, Visual Basic.Net and C++ language using Microsoft Visual Studio IDE.

Recent release of Kinect SDK (1.6) supports Visual Studio 2012 and Windows 8.

Prerequisites

Before you begin with the installation, make sure you have the following components

  • Microsoft Kinect Sensor
  • USB cable of Kinect Sensor.

Make sure your Kinect sensor is unplugged and previous SDK of Kinect (if any) is uninstalled properly.

Installation

The installation procedure is very simple and wizard base.

  • Go to Kinect for Windows developer’s page and download the latest SDK (v1.6) and Kinect Developer toolkit (I’ll discuss about it later).
  • Install the SDK you just downloaded.
  • After that Install the Kinect Toolkit.

After successful installation of both setup files you just downloaded, it’s time to connect the Kinect sensor with your PC.
Plug in your Kinect sensor with you PC and wait till the Windows install its driver.

Note: You may skip the “Searching Driver on Windows Update” part by clicking “Skip obtaining driver from Windows Update” while Windows is installing the driver. It will expedite the installation process and use the driver files that comes with the SDK you just downloaded.

Following components will be available after successful installation of Kinect SDK.

  • Kinect Developer Browser.
  • Kinect Studio.
  • Kinect Drivers.
  • Kinect Runtime.
  • Kinect Speech Recognition Language Pack (en-US).

Kinect for Windows Architecture

Below is the architecture diagram of Kinect for Windows, You can access Kinect microphones array using your standard audio API.

I am not going to discuss this in details, but just for a quick view, we have

  • Kinect Sensor (Physical Kinect Hardware)
  • Kinect Driver
  • Audio & Video Components
  • Direct X Media Object
  • Kinect API

More information regarding architecture can be found at http://msdn.microsoft.com/en-us/library/jj131023

Development Using Kinect

After we have our environment ready for software development using Kinect, let’s move towards using Kinect in our Project.

I’ll be using Windows Presentation Foundation (WPF) application type throughout my demos, but you can also use Win-Forms with Kinect.

Go ahead and start your Visual Studio.

  • Create a new WPF Application and name it appropriately (in my case it’s UmerKinectBlogDemo1). 
  • Add “References” of “Microsoft.Kinect” by right clicking on References folder in solution explorer and click “Add Reference”.
  • Expand the “Assemblies” list on your left and select “Extensions”.
  • Scroll down until you find “Microsoft.Kinect”, apply check on that and click OK.

After adding Kinect reference;

  • In your XAML code, add the following attribute in your Window markup code.Loaded=”MainWindow_Loaded”

  • Drag/Insert an Image Control from the Toolbox into your application, name & resize it appropriately as this image control will be used for showing the camera feeds from Kinect.

     

  • Go to your Code Behind file of Main page (MainWindows.xaml.cs) and add the following namespaces into your code behind fileusing Microsoft.Kinect;
    using System.Windows.Media.Imaging;
  • Create a global reference of “KinectSensor” class, this will hold the instance of our connected Kinect sensorKinectSensor myKinectSensor;
  • In your MainWindow_Loaded method, fetch the connected Kinect sensor object using the following code;if (KinectSensor.KinectSensors.Count != 0)
    {
    if (KinectSensor.KinectSensors[0].Status == KinectStatus.Connected)

myKinectSensor = KinectSensor.KinectSensors[0];
else
MessageBox.Show(“Kinect sensor is not yet ready”);
} else
MessageBox.Show(“Kinect sensor is not connected”);

The “KinectSensors” collection holds all the connected Kinect sensor to the machine, since we have only one sensor connected to our machine, we are directly fetching the one at “zero” index. I am also doing a little error handling that if the status of the connected sensor is not ready, notify the user.

Note: For better experience, you should use StatusChanged event of KinectSensors Collection.

 Getting RGB (Color Camera Stream)

The color stream from Kinect sensor can be used to display the camera view of Kinect and you can also use the same stream to apply different Image Processing algorithms to achieve your specific output.

Kinect provides different resolutions and Formats for Color stream and you can select the one that best suits your need.

Now as we have our Kinect sensor object, let’s move and add an event handler of “ColorFrameReady” and start the “ColorStream” of our Kinect sensor to get the Color Stream from Kinect.

myKinectSensor.ColorFrameReady += myKinectSensor_ColorFrameReady;
myKinectSensor.ColorStream.Enable(ColorImageFormat.RgbResolution640x480Fps30);

The “ColorFrameReady” event handler is used to handle the RGB images coming from our Kinect Sensor. We have the option to enable specified Video Stream (i.e. RGB, depth data etc.) in Kinect; for instance we are enabling the Color Stream and defining the Image Format of the stream in parameter.
Kinect supports different image formats including “RGB” and “YUV” and with different FPS (frame per second) and resolutions as well. We are using RGB Format of 640X480 resolution with 30 FPS. (Ideal FPS is 30, lower FPS results in slow image propagation).

  • Insert the following code snippet into your ColorFrameReady event handler.void myKinectSensor_ColorFrameReady(object sender, ColorImageFrameReadyEventArgs e)
    {
    using (ColorImageFrame es = e.OpenColorImageFrame())
    {
    if (!(es == null))
    {
    byte[] bits = new byte[es.PixelDataLength];
    es.CopyPixelDataTo(bits);
    image1.Source = BitmapSource.Create(es.Width, es.Height, 96, 96,PixelFormats.Bgr32, null, bits, es.Width * es.BytesPerPixel);
    }
    }
    }

    The image data is encapsulated in ColorImageFrame, we have to copy the image data into array of byte to use it, the “PixelDataLength” property of that ColorImageFrame has the length of pixel data buffer of the current frame.

    After that we have to create a bitmap image from the byte array (image data) so that can show it in our Image Control.

    BitmapSource.Create method is used to do that, the parameters of the methods are;

    • pixelWidth:        The width of the bitmap.
    • pixelHeight:       The height of the bitmap.
    • dpiX:                     The horizontal dots per inch (dpi) of the bitmap.
    • dpiY:                     The vertical dots per inch (dpi) of the bitmap.
    • pixelFormat:     The pixel format of the bitmap. (BGR, CMYK, Black etc)
    • Palette:               The palette of the bitmap.
    • Pixels:                  An array of bytes that represents the content of a bitmap image.
    • Stride:                  The stride of the bitmap. (Number of bytes allocated for one scan line of
      the bitmap).

After we create a bitmap image, assign that bitmap image object as the “Source” of Image Control we added in previous step.

Let the show begin

Our minimum code to display the camera stream from Kinect sensor is almost complete.

Before we run our project, there is one that that we need to do. We have to start the Kinect itself so that we can get the streams from the Kinect; to do that, add the following line at the end of your MainWindow_Loaded method.

myKinectSensor.Start();

Now run the project by pressing F5 to see the results.

Here is the result of my Kinect sensor.

It is my table where most of my stuff is found (I am bad at organizing stuff on my table 🙂 )

Summary

In this post, I’ve discussed the installation procedure, interfacing Kinect with our application and getting Color stream from the Kinect camera.

Don’t forget to do proper exception handling into your project, especially with KinectSensor object.

The complete project for your reference can be found here.

What’s next?

In my next post, I’ll be discussing about

  • Skeleton Tracking

And more.

If you have any suggestions on topics, have questions, feedback or want to help me out, feel free to contact me by posting your comments below this post and I’ll try to help you out!

       Muhammad Umer

Popcorn Time – Windows 8

Few months ago, i published the first windows 8 application from Pakistan.
Although i didn’t spent much time in coding but i really spent alot of time to build a better User Experience.

The Response from Windows 8 Store is very well as compared to the users & reach up till now.

Below is the actual blog post from “Microsoft Pakistan”

I feel really proud to share that first Windows 8 application from Pakistan is now in Windows Store. The application name is Popcorn time. It’s an ultimate movies database, which gives you exclusive information about the
latest Hollywood & Bollywood movies along with their insight reviews, ratings, trailers and movie clips.

The main features include; Latest Hollywood & Bollywood Movies, Movies Description, Budget, Studios and other relevant information along with trailers.

Please click on the below link to have the Popcorn experience:

Popcorn Time

http://apps.microsoft.com/webpdp/en-US/app/popcorn-time/9aea85a0-0c0f-45a8-bbfe-34f4304669c1

The application is developed by a young talented student of Pakistan; Muhammad Umer (https://www.facebook.com/umer.rajput?ref=ts). He is also a Microsoft Community Speaker and contributes in the IT community as Microsoft ambassador. 

Microsoft TechTalk on Kinect Programming

Dear Recipient,

 

It is with great pleasure that I would like to invite you to the Microsoft TechTalk on KINECT Programming. Following are the details of the event.

 

About TechTalk

Microsoft TechTalk is another unique initiative of Microsoft Innovation Center – Pakistan with the objective to highlight the creativity and talent of students and professionals in the local software economy. These sessions are not only focused towards the technology discussions but also showcase the achievements (demonstration) of talented students and professionals.

 

Date, Time, Location & Registration

 

Date:  Friday 8 June 2012

Time:  4:00pm – 6:00pm

Location:  Microsoft | Innovation Center – Pakistan

Fast National University of Computer and

Emerging Sciences (City Campus)

22 G, Block 6, P.E.C.H.S., Karachi.

 

For Registration kindly email at: anas_kidwai@hotmail.com with your Name, University, Email Address and Mobile Number by Thursday 7th June 2012.

 

Note: The registration of this level 200 session is based upon first come first basis and will be confirmed by the MIC-Team.

Speakers Profile

Muhammad Umer, is the runner-up of Imagine Cup 2012 Pakistan Final. He is an intelligent student from Sir Syed University of Engineering and Technology (SSUET) and Microsoft Community Speaker. His skillset include Windows Phone Development, Game Development and Kinect Programing.

 

Session Outline

·         Introduction to Microsoft Kinect.

·         Kinect Hardware Foundation.

·         Evolution of UI’s.

·         Programming with Microsoft Kinect.

o   Kinect Architecture.

o   RGB Camera.

o   Skeletal Tracking.

o   Joint’s.

o   Depth Data using IR Camera.

Showcasing

·         Introduction to “Kenection”.

·         The Imagine Cup Experience.

·         Demo of Kenection.

 

I look forward towards your kind participation in this event.

 

 

Regards

 

Haseeb Shaukat

MIC Business Manager | Microsoft Pakistan