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

Part 1 – Introduction to Microsoft Kinect Sensor

In this very first blog post of my Kinect programming series, I am going to talk about the fundamentals of Kinect sensor followed by other posts in which I’ll be discussing Kinect from a developer perspective.

In my spare time I like to develop & play with the Kinect. Kinect for Windows is a technology that is not very much adopted in my country, specifically Academia side. Most people see it as a toy but I see it as opportunities for mankind, making our lives easier. For example, doctors use it to help people that are disabled, make life more enjoyable for them and so on.

Building computer vision based applications had always been a difficult task for majority of application developers, since it requires lots of mathematics & similar algorithm information that researchers use in Computer vision, Signal processing and other fields of technology. Microsoft Kinect reduces a lot of development and hardware restriction that developers faces in past but still “What to do” & “How to do” purely depends on the developer.

You will see a lot of stuff on internet regarding Kinect integration with other systems (i.e. Arduino Platform) & using Kinect with other computer vision frameworks & libraries, I’ll try to discuss as much as possible in my future posts, but for now let’s get started to have basic understanding of Microsoft Kinect sensor.

Background

Kinect is a motion sensing input device by Microsoft for the Xbox 360 video game console and Windows PCs. Based around a webcam-style add-on peripheral for the Xbox 360 console, it enables users to control and interact with the Xbox 360 without the need to touch a game controller, through a natural user interface using gestures and spoken commands.

The project is aimed at broadening the Xbox 360’s audience beyond its typical gamer base. A version for Windows was released on February 1, 2012.

After selling a total of 8 million units in its first 60 days, the Kinect holds the Guinness World Record of being the “fastest selling consumer electronics device”. 18 million units of the Kinect sensor had been shipped as of January 2012.

Microsoft released Kinect software development kit for Windows. This SDK will allow developers to write Kinect enabled apps in C++/CLI, C#, or Visual Basic .NET.

The Sensor

The Kinect sensor is a horizontal bar connected to a small base with a motorized pivot and is designed to be positioned lengthwise above or below the video display. The device has two versions i.e. Kinect for Xbox 360 and Kinect for Windows (for commercial purpose).1

The device features

  • RGB camera.
  • Depth sensor (IR).
  • Multi-array microphone.
  • Motor to adjust camera angle.

In addition to the above features, Kinect for Windows offer few extra features i.e.

  • Facial recognition
    enables to track multiple points in your face like Skeleton Tracking.
  • Near Mode
    enables the camera to see objects as close as 40 centimeters in front of the device without losing accuracy or precision, with graceful degradation out to 3 meters.
  • Seated or 10 Joints Mode
    skeletal tracking which provides the capability to track the head, neck and arms of either a seated or standing user.

RGB Camera

The default RGB video stream uses 8-bit VGA resolution (640 × 480 pixels) with a Bayer color filter, but the hardware is capable of resolutions up to 1280×960 (at a lower frame rate) and other formats such as UYVY

Depth Sensor (IR)

The depth sensor consists of an infrared laser projector combined with a monochrome CMOS sensor, which captures video data in 3D under any ambient light conditions. The sensing range of the depth sensor is adjustable, and the Kinect software is capable of automatically calibrating the sensor based on gameplay and the player’s physical environment, accommodating for the presence of furniture or other obstacles.2

The monochrome depth sensing video stream is in VGA resolution (640 × 480 pixels) with 11-bit depth, which provides 2,048 levels of sensitivity. The Kinect sensor has a practical ranging limit of 3.9 – 11 ft. distance when used with the Xbox software.

Field View

The area required to play Kinect is roughly 6 m2, although the sensor can maintain tracking through an extended range of approximately 2.3 – 20 ft.

The horizontal field of the Kinect sensor at the minimum viewing distance of ~0.8 m (2.6 ft.) is therefore ~87 cm (34 in), and the vertical field is ~63 cm (25 in), resulting in a resolution of just over 1.3 mm (0.051 in) per pixel.

Microphone Array

The microphone array features four microphone capsules and operates with each channel processing 16-bit audio at a sampling rate of 16 KHZ.

What’s Next?

In my next post, I’ll be discussing about

  • Installation of SDK
  • Beginning with Kinect programming
  • RGB camera stream
  • 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!

 

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. 

Follow

Get every new post delivered to your Inbox.

Join 608 other followers