Keerat Singh

Working with Azure Storage Blobs using .Net Core

Sat, 03 Feb 2018 02:56:00 -0800

Overview

Azure Storage is cloud service that provides storage which is fully maintained by Microsoft and is highly scalable, available and robust. Azure storage comprises mainly of Blob, File, Table and Queue storage, however, the following article discusses only block blobs.

Pre-Requisites

Microsoft Azure Storage Account

Make sure you have created a Storage Account on Azure portal, we will be needing the Access Keys to access the Storage Account. The same can also be done locally using an Azure Storage Emulator if you don’t have an Azure Subscription.

Create Azure Storage Account

You can find both access keys and connection strings under the Access Keys section. I would suggest copying one of the connection strings and using it in your application.

Connection String Azure Storage Account

Install Microsoft.WindowsAzure.ConfigurationManager NuGet Package

Make sure you have added the Microsoft.WindowsAzure.ConfigurationManager NuGet Package to your project. To add the pacakge Go to Tools > Nuget Package Manager > Package Manager Console

Install-Package Microsoft.WindowsAzure.ConfigurationManager

Install Microsoft.WindowsAzure.ConfigurationManager

Storage Account Architecture

This is what the high-level view of the Storage Account looks like. Storage Account is the first point of access. Each storage account contains various containers, and each container is further comprised of blobs and each blob can either be an append, block or page blobs.

Storage Account Architechture

Create Container

To create a container we first need to get the reference to the storage account, using the storage account reference we then create a blob client which is a client-side representation of blob storage. An important thing to note is that the name of the container must always be lowercase as per container naming rules.

// Get Reference to the storage account using the connection string
CloudStorageAccount storageAccount = CloudStorageAccount.Parse(_strStorageConnection);
// Create a client side representation of Azure Blob storage
CloudBlobClient blobClient = storageAccount.CreateCloudBlobClient();
// Get Container reference
CloudBlobContainer blobContainer = blobClient.GetContainerReference(containerName);
// We can also use CreateIfNotExistsAsync method, however it doesn't convey the information if the container
// already exists. CreateAsync on the other hand throws an exception if the container already exists.
await blobContainer.CreateAsync();

Upload Blob

We upload the blob from a file using the container reference created previously via the UploadFromFileAsync method of the CloudBlockBlob class, the blob gets overwritten by the uploaded blob if a blob with the same name already exists in the container.

// Get Blob reference using the container reference previously created
CloudBlockBlob blockBlob = blobContainer.GetBlockBlobReference(blobName);
// Upload BlockBlob
await blockBlob.UploadFromFileAsync(blobPath);

Download Blob

We download the blob to a file using the container reference created previously via the DownloadToFileAsync method of the CloudBlockBlob class, the blob gets overwritten by the downloaded blob if a blob with the same name already exists.

// Get Blob reference using the container reference previously created
CloudBlockBlob blockBlob = blobContainer.GetBlockBlobReference(blobName);
// Download Blob
await blockBlob.DownloadToFileAsync(blobPath,FileMode.Create);

Delete Blob

Delete blob operation is also performed using the container reference created previously using the DeleteAsync method of the CloudBlockBlob class.

// Get Blob reference using the container reference previously created
CloudBlockBlob blockBlob = blobContainer.GetBlockBlobReference(blobName);
// Delete Blob
await blockBlob.DeleteAsync();

Copy Blob

In order to copy the blobs, we need reference for both the source and destination container. The same can be obtained using the GetContainerReference method. If you want to copy the blob within the same container, the reference for source and destination container will be same. The copy operation takes place using the StartCopyAsync method of CloudBlockBlob class

// Get the source container reference to copy the blob from
CloudBlobContainer fromCloudBlobContainer = CreateContainer(blobClient, fromContainerName).GetAwaiter().GetResult();
// Get the source blob reference
CloudBlockBlob fromBlockBlob = fromCloudBlobContainer.GetBlockBlobReference(fromBlobName);

// Get the destination container reference to copy the blob to
CloudBlobContainer toCloudBlobContainer = CreateContainer(blobClient, toContainerName).GetAwaiter().GetResult();
// Get the destination blob reference
CloudBlockBlob toBlockBlob = toCloudBlobContainer.GetBlockBlobReference(toBlobName);

// Copy the blob
await toBlockBlob.StartCopyAsync(new Uri(fromBlockBlob.Uri.AbsoluteUri));

List Blobs

To list all the blobs in a container, we call the ListBlobsSegmentedAsync method of CloudBlobContainer class. The result is returned as a result segment containing a collection of blob items. We call the ListBlobsSegmentedAsync method until the BlobContinuationToken is null. The continuation token is returned as null when there are no more blobs to be returned.

 // Get Container reference
CloudBlobContainer blobContainer = blobClient.GetContainerReference(containerName);
List<IListBlobItem> lstBlobs = new List<IListBlobItem>();
BlobContinuationToken continuationToken = null;

// Get the list of blobs in the container and store them into a list
BlobResultSegment resultSegment = await blobContainer.ListBlobsSegmentedAsync(continuationToken);
// Update continuation token
continuationToken = resultSegment.ContinuationToken;
// Add Blobs to the list
lstBlobs.AddRange(resultSegment.Results);

Source Code

You can find the source code at Github AzureStorageBlobs repository as .Net Core solution.

Final note

There are many other operations that can be performed on azure storage blobs, which are not covered in this post, I would encourage you to explore more about them. If you have any questions or concerns, feel free to leave a comment.

Using Microsoft Azure Entity Linking Cognitive API

Sat, 26 Aug 2017 09:15:00 -0700

Microsoft Cognitive Services

Microsoft Cognitive Services, formerly known as Project Oxford are a set of APIs, SDKs and services available to developers to make their applications more intelligent, engaging and discoverable. These services let you build apps with powerful algorithms to see, hear, speak, understand and interpret using natural methods of communication, with just a few lines of code. Microsoft Cognitive Services enable the developers to easily add intelligent features such as:

Emotion and video detection
Facial, speech and vision recognition
Speech and language understanding

Microsoft Entity Linking Intelligence Service API

This API is part of the broader set of APIs provided as part of Microsoft Cognitive Services APIs. This API is designed to help developers with tasks related to Entity Linking. One of the challenges while working with Natural Language Processing is recognizing the context of a particular word within a paragraph/sentence, a word might be used differently in different contexts. For example, in the case where “times” is a named entity, it still may refer to two separately distinguishable entities, such as “The New York Times” or “Times Square”. Given a specific paragraph the Entity Linking Intelligence Service will recognize and identify each separate entity based on its context.

Install Microsoft.ProjectOxford.EntityLinking Package

Make sure you have added the Microsoft.ProjectOxford.EntityLinking NuGet Package to your project. To add the pacakge Go to Tools > Nuget Package Manager > Package Manager Console

Install-Package Microsoft.ProjectOxford.EntityLinking

Install Microsoft.ProjectOxford.EntityLinking Pacakge

Get an API Subscription Key

A subscription to Entity Linking Intelligence Service API is required to use the service. A sign up may be required if don’t already have an account. To get a subscription key you can visit the link below and follow the steps below.

Goto Try Cognitive Services
Click Get API Key, Read and Agree to Microsoft Cognitive Services Terms.
Sign-in using your preferred account.
Once Signed-in you will be redirected to a web page as seen below in the screenshot below.
Save this information and either of the keys can be used to call the API Service.

API Subscription Key

Creating an EntityLinkingServiceClient object

The very first step is to create an object of the class EntityLinkingServiceClient, there are various overloaded constructors that can be used to instantiate the object, however, we will use the version that takes only one argument as input, i.e. an API Subscription Key. This is the same subscription key that was generated in Step 1.

public static EntityLinkingServiceClient clientApplication;
clientApplication = new EntityLinkingServiceClient("Enter your Subscription Key here");

Calling the Microsoft Azure Entity Linking Cognitive API

Once we have the service client initialized, the next step is to call the LinkAsync method. Along with the text, you want to identify entities from, you can also specify a specific word within that text that you want to be entity linked. However, if you specify a specific word, you will also have to specify the location of the specific word in the given text. This method takes the following arguments:

public Task<EntityLink[]> LinkAsync(string text, string selection = "", int offset = 0);

- string text // Text that is supplied to the service to separate the entities from.
- string selection // Specific word within the text you want to be entity linked
- int offset // position of the specific word offset by the number of character within the given text.

In a case where only one argument, the input text is specified, then the service tries to recognize and identify all the entities as seen in the code below.

var linkResponse = await App.clientApplication.LinkAsync(txtRequest.Text);

Display Entity Linking API Response

The response from the method LinkAsync call is returned in the form of an array of objects of the type EntityLink. The objects in the array are traversed one by one, serialized and formatted into JSON format.

foreach (var entity in linkResponse)
{
    // Serialize and format the response into JSON.
    resultJSON.Append(JsonConvert.SerializeObject(entity) + "\n");
}

We also use a LINQ query to retrieve the WikipediaID from each Entity, these IDs are then displayed accordingly.

// Retrieve Wikipedia IDs for all the Entities.
var resultEnitites = string.Join("\n", linkResponse.Select(i => i.WikipediaID).ToList());

Display Entity Linking API response

Source Code

You can find the source code at Github AzureEntityLinkingCognitiveApi repository as Visual Studio 2017 solution.

Final note

This is a very brief introduction to get you started using the Microsoft Azure Entity Linking Cognitive API. The same method can be improvised upon and used to connect to other Cognitive APIs. If you have any questions or concerns, feel free to leave a comment.

Authenticating Microsoft Account using Microsoft Authentication Library (MSAL)

Sun, 14 May 2017 13:15:00 -0700

Overview

Microsoft recently revealed the new Graph APIs at the recent MS Build 2017. These APIs provide a single unified endpoint to access different Microsoft Products, which means you no longer have to deal with different methods of authentication across different platforms. An exciting addition to this is the new and updated Microsoft Authentication Library (MSAL), which is conveniently available across .Net, iOS, Android, and JavaScript. This consolidated library will be used to authenticate both Microsoft personal and Azure AD School and work accounts.

In order to access Microsoft Graph functionality, the first step is to authenticate and get the access token using MSAL, which will be discuss in this tutorial.

Pre-Requisites

Install Microsoft.Identity.Client Package

Make sure you have added the Microsoft.Identity.Client Nuget Package to your project. To add the pacakge Go to Tools > Nuget Package Manager > Package Manager Console

Install-Package Microsoft.Identity.Client -Pre

Install Microsoft.Identity.Client Pacakge

Register your application to get Client Id

Make sure you register your application at the Microsoft Application Registration Portal and make a note of the Client id / Application Id. This Client Id will be required later when authenticating the user account.

https://apps.dev.microsoft.com/portal/register-app

Note the Client Id/Application Id

1. Request Token

The very first step is to request a token. Once authenticated, the requesting application receives a token, which further can be used to query Microsoft Graph API. This token is used to access certain resources, such as user’s information, send emails, read OneNote notebooks and many other protected resources. We use the AcquireTokenAsync method to acquire the token interactively, as it displays the user sign-in window as seen below.

    //Set the scope
    private string[] _Scopes = new string[] { "User.Read" };
    public static PublicClientApplication clientApplication = new PublicClientApplication(_ClientID);
    authResult = await App.clientApplication.AcquireTokenAsync(_Scopes);

Interactive Sign-In

Allow permission for requested Scopes

2. Receive and Parse Token

AcquireTokenAsync method returns an object of class AuthenticationResult, which is stored in the variable authResult. The actual token is stored in the authResult.AccessToken property. We check if the object returned by the function call AcquireTokenAsync is not null and then parse the object and display it accordingly.

if (authResult != null)
{
    DisplayParseAuthResult(authResult);
    string response = await SendGetRequest(authResult.AccessToken);
    DisplayAPIResponse(response);
}

3. Send GET Request with token

Once the token is received, we send a GET request attaching the access token as a header using the HttpClient class. The GET request is sent to the https://graph.microsoft.com/v1.0/me Graph API Endpoint.

//Set the API Endpoint
string _GraphAPIEndpoint = "https://graph.microsoft.com/v1.0/me";

HttpClient httpClient = new HttpClient();
httpClient.DefaultRequestHeaders.Add("Authorization", "Bearer " + _AccessToken);
Uri GraphAPIEndpointUri = new Uri(_GraphAPIEndpoint);

4. Display Graph API Response

The response from the Graph API call is returned in the form of HttpResponseMessage object. We then serialize the HTTP content to a string using the ReadAsStringAsync method. This string is then displayed on the UI.

HttpResponseMessage response = await httpClient.GetAsync(GraphAPIEndpointUri);
var content = await response.Content.ReadAsStringAsync();

Display Token and Graph API resposne

Source Code

You can find the source code at Github MSALAuthentication repo along with the Visual Studio 2017 solution.

Final note

This is a very brief introduction to get you started using the MSAL and calling the Graph API. You can use the token received for further calls to the Graph API, as long as the token is in the header of the GET request. If you have any questions or concerns, feel free to leave a comment.

Adding appointments to Windows 10 Calendar using C#

Fri, 14 Apr 2017 13:15:00 -0700

Overview

Working different shifts? Having trouble updating the Windows 10 Calendar with repetitive tasks? I had the same issue, so I decided to make it as less painful as possible. :) This blog post is a result of my laziness to update calendar everytime I encounter a new weekly schedule. This program reads the data from a text/csv file and updates the calendar, based on the appointments in the file.

Picking a File using FileOpenPicker class

The first step is to choose a file that contains the appointments in particular format. I chose the format Subject,Date,StartTime,Duration as comma separated values.
This is what my csv file looks like.

Subject,Date,StartTime,Duration
Test1,16-04-2017,10:00,8.5
Test2,24-04-2017,14:00,4

Reading from the chosen file

I used the FileIO.ReadLinesAsync method to read from the file and store them into an enumerable list of the type string. Once the appointments are stored in a list, the items in the list are read one by and each item is split based on the delimiter.

// Store contents of the file into an enumerable List.
IList<string> lines = await FileIO.ReadLinesAsync(file);

// Split the contents of the line based on the delimiter
string[] appointmentDetails = line.Split(chDelimiter);

Choose file using FileOpenPicker

Initializing the Appointment object

Windows 10 SDK provides an API Windows.ApplicationModel.Appointments, through which we can manage appointments. Once the item in the list is split based on the delimiter, respective properties of the initialized Appointment object are set based on the values in the file.

// Create a new Appointment object
Appointment appointment = new Appointment();

// Expected format of string: Subject,Date,StartTime,Duration
appointment.Subject = appointmentDetails[0];
DateTime dateTime = DateTime.ParseExact(String.Format("{0} {1}", appointmentDetails[1], appointmentDetails[2]), 
                                        "dd-MM-yyyy HH:mm", 
                                        System.Globalization.CultureInfo.InvariantCulture);
DateTimeOffset startTime = new DateTimeOffset(dateTime);
appointment.StartTime = startTime;
appointment.Duration = TimeSpan.FromHours(float.Parse(appointmentDetails[3]));
appointment.Reminder = TimeSpan.FromHours(1);

Adding appointment to the calendar

Once the required properties of the Appointment object are set, we will invoke the method Windows.ApplicationModel.Appointments.AppointmentManager.ShowAddAppointmentAsync, with the following parameters:

Appointment object: This object contains the information regarding the appointment being added.
Rect object: As per MSDN documentation Rect is the rectangular area of user selection (for example, pressing a button), around which the operating system displays the Add Appointment UI, not within that rectangular area. For example, if an app uses a button to show the Rect, pass the Rect of the button so the Add Appointment UI displays around the button, not overlapping it.

When this method call concludes, it returns a string object containing the appointment identifier, which is used when updating or removing an appointment. If the return string is empty, it means that the appointment was not added.

String appointmentId = await AppointmentManager.ShowAddAppointmentAsync(appointment,rect);

Appointment UI

Appointment added

Once the appointment is confirmed via the Add Appointment UI, it gets added to the calendar app. Do keep in mind that you have to have an outlook account setup on windows phone for this to work. In case of Windows 10 on desktop this is not the case.

Appointments added to the calendar

Final note

Once you have everything setup, you just have to edit the file and you are just one click away from adding all the appointments. If you have any questions or concerns, feel free to leave a comment.

Setting up docker on Mac,Windows,Linux and Azure VM

Sun, 06 Nov 2016 10:05:00 -0800

Overview

Containers have been around for a while, however, Docker has made the use of the container technology simple. If you are new to Docker and container technology just like me, Docker has well detailed documentation to start with. I was pretty curious on what all the fuss about containers was, therefore I started looking into container technology. Since Docker is available on many different platforms, I thought it would be appropriate to discuss as to how to setup Docker on different platforms. I will not be going into the detail of what containers are and how Docker works, this is more of how to tutorial, and me sharing my experience of setting up docker on Mac,Windows,Linux, and Azure VM.
Docker runs natively on Linux systems and uses a virtualized docker environment on Windows and Mac, I will exlore native Docker Containers on Windows in the near future. I will be using Docker for Mac and Windows, rather than using Docker Toolbox, details of which will be discussed further in the article.

Download Docker Engine

Mac

Docker can be setup on Mac either using Docker Toolbox or Docker for Mac. The key difference between the two is that the former uses VirutalBox to setup a VM to host the Docker environment and the latter is a native application that makes use of xhyve to virtualize the Docker environment, which is pretty lightweight as compared to an actual VM.
Docker for Mac requires Hypervisor to be supported by the operation system and is, therefore, applicable mostly to the newer version of Mac OS. A detailed comparison can be found at the Docker website. Downloading is pretty straight forward, and you can download the official version here.

Windows

Similar to Mac, Docker can be setup on Windows in two ways, either using Docker Toolbox or Docker for Windows. Since Docker Engine uses some Linux-specific features, therefore the former creates a VM using VirtualBox and attaches it to the host Windows machine. This VM then hosts the Docker environment required by the Windows system. The latter uses Hyper-V to virtualize the Docker enviornment. You can download Docker for Windows from here.

Linux(uBuntu)

Since Docker Engine runs natively on Linux, therefore it can be installed directly by installing the docker-engine package from apt-get. Docker is supported across various Linux distributions, however, I will be discussing setting up on Ubuntu.

Azure VM(Docker on Ubuntu)

Setting up Docker on Azure is easiest, thanks to a pre-existing template on Azure called Docker on Ubuntu Server. Docker on Ubuntu Server template deploys a Ubuntu Server 16.04 LTS VM and then automatically installs Docker Engine on the VM. The terminal on this machine can be accessed via ssh using putty on windows, for linux/mac native terminal works.

Installing Docker

Mac

Installing Docker on Mac is fairly standard and simple, once you have downloaded the dmg package, you can double-click the package file to mount dmg file. Then drag and drop Docker.app into the Applications folder as seen below.

Installing Docker on Mac

Once you have successfully installed Docker.app, run the application. If everything goes well, you can see a whale icon pop up in the status bar citing that Docker is now up and running.

Successful installation

Windows

To install Docker on Windows, make sure Hyper-V is supported and enabled. If Hyper-V is not enabled, you can follow this tutorial to enable Hyper-V on Windows 10. Also, virtualization should be enabled on the operating system for Docker to work. Once you have both Hyper-V and virtualization enabled, run the msi installer that you downloaded, follow the instructions to install Docker and at the last dialog box tick option Launch Docker. If everything goes well, you should see a whale icon in the taskbar, which means Docker is running and ready to use.

Installing Docker on Windows

Linux(uBuntu)

Since the Docker Engine is supported natively on Linux, therefore I can just install docker by running a simple script from the official Docker website. I installed Docker on Ubuntu, it is supported across many flavors of Linux. Docker on Linux can be installed using respective native package managers, however, I chose to install Docker using curl. You will need sudo permissions to install Docker, therefore make sure you have sudo privileges. Once you make sure curl is installed, you can fetch the latest Docker package as shown below.

which curl  
curl -fsSL https://get.docker.com/ | sh

Azure VM(Docker on Ubuntu)

Docker installation is probably the easiest on Azure, since you can provision a VM with Docker pre-installed. To provision, a new Ubuntu VM with Docker pre-installed follow the instructions below.

- Click the + icon to add a new resource. 
- Choose Virtual Machines.
- Search for `Docker on Ubuntu Server`.
- Configure your server and provision it.
- Once the server is provisioned, SSH into the server using an SSH client like putty.
- You will find the Docker Engine already installed.

Installing Docker on Azure

Verifying Docker installation

In order to verify Docker installation on each platform execute docker info to see information regarding kernel version, a number of containers and images. docker version displays all the information regarding the version of the Client and the Server, you can even format the string into JSON format.

Mac

Verify Docker installation on Mac

Windows

Verify Docker installation on Windows

Linux(uBuntu)

Verify Docker installation on Linux(uBuntu)

Azure VM(Docker on Ubuntu)

Verify Docker installation on Azure VM(Docker on Ubuntu)

Running hello-world image

Execute the docker run command to run the image hello-world in the container. This image is an example of minimal dockerization. You can find more images at docker explore. Run the command docker ps -a to list all containers, both running and stopped.

Mac

Running hello world on Mac

Windows

Running hello world on Windows

Linux(uBuntu)

Running hello world on Linux(uBuntu)

Azure VM(Docker on Ubuntu)

Running hello world on Azure VM(Docker on Ubuntu)

Final note

Docker is supported mostly on all the popular platforms and setting up docker is pretty straight-forward and easy. This was just an introduction on how to setup and verify docker on various platforms. If you have any questions or concerns, feel free to leave a comment.

Customizing Microsoft Band using Band SDK and UWP

Sat, 10 Sep 2016 14:05:00 -0700

Overview

This idea was on the back burner for quite a while, and I never had the time to pursue this, until last week. I finally sat down and developed a Microsoft Band customization app, that helps you take advantage of the Band SDK and customize the BandTheme. I know the Microsoft Health app allows you to customize the BandTheme using various styles, however, I felt it was limited in terms of granular customization, which inspired me to develop this app that helps you to customize each and every Band Color class individually. Another thing I felt the Microsoft Health app lacked in terms of Band personalization was the visual UI that helped the user interpret how the theme actually affected the Band Tiles. This UWP application actually helps the user have a better understanding of the components of the Band being customized.
This post will help you guide through the Band SDK functions used to retrieve and update the BandTheme. There are 8 color classes that exist on the Band, however, only 6 of the 8 can be customized using the Band SDK.

• Base
• High Contrast
• Lowlight
• Highlight
• Muted
• Secondary

Prerequisites

Installing Nuget package Microsoft.Band

We need to install the NuGet package Microsoft.Band, in order to have the BandSDK capabilities.

Right click on the Project you want to add the package to.
Choose Manage NuGet Packages....
Seach for package called Band.
Install package Microsoft.Band by Microsoft Corporation.

Installing Microsoft.Band package

Enabling Bluetooth capability

We need to enable the Bluetooth capability of the UWP application, in order to allow the app to connect to the Microsoft band via Bluetooth.

Right click on the Package.appxmanifest and click open
Go to Capabilities tab.
Check the option Bluetooth
Save Package.appxmanifest.

Enabling Bluetooth capability

Connecting to the Band

The initial step is to connect to a paired Band to the device on which your application is running. We use the BandClientManager to get a list of paired Bands and connect to the first Band.

// Get the list of paired Bands
var pairedBands = await BandClientManager.Instance.GetBandsAsync();
// Connect to the first Band
band = pairedBands.FirstOrDefault();
// Connect to the Band and get a new BandClient object
bandClient = await BandClientManager.Instance.ConnectAsync(band);

Connecting to Microsoft Band

Retrieving the Band Theme

The PersonalizationManager allows us to retrieve the color classes currently being used on the Band device using the BandTheme class. The Band Theme is retrieved using the GetThemeAsync method and stored into an object of the BandTheme class. After the theme is retrieved, the UI is updated respectively, by converting the BandColor to SolidColorBrush and updating the Fill property of the ellipse.

// Retrieve theme from the band
BandTheme bandTheme = await bandClient.PersonalizationManager.GetThemeAsync();

// Update the UI
eBase.Fill = new SolidColorBrush(bandTheme.Base.ToColor());
eHighContrast.Fill = new SolidColorBrush(bandTheme.HighContrast.ToColor());
eHighlight.Fill = new SolidColorBrush(bandTheme.Highlight.ToColor());
eLowLight.Fill = new SolidColorBrush(bandTheme.Lowlight.ToColor());
eMuted.Fill = new SolidColorBrush(bandTheme.Muted.ToColor());
eSecondary.Fill = new SolidColorBrush(bandTheme.SecondaryText.ToColor());

Connected and successfully retrieved the theme

Personalizing the Band Theme

The application allows the user to customize all the 6 available Band color classes individually. Your can click on each class to bring out a color dialog box. This color dialog box gives you the option of either choosing a color from a predefined list of colors, included in the Windows.UI.Colors or entering a custom color Hex Code.
Each Band color class has its own row and the application UI reflects how each Band color class affects the Microsoft Band UI.

Choosing color from ComboBox

Currently, there are 141 colors to choose from Windows.UI.Colors, since the list is dynamically generated at runtime, any new colors added to Windows.UI.Colors will be added to the ComboBox automatically.

Choosing color using ComboBox

Entering a Custom color hex value

You can also define a custom color, using the hex value of the color. You can use your favorite program to get the hex value or use this wonderful site that I really like hex-color. The hex code can be entered with or without the # symbol.

Choosing color using hex value

Uploading the Band Theme

Once you have customized the UWP application UI, we need to upload the theme to the connected Band device. We do that by clicking the accept icon, which calls the SetThemeAsync method. We create a new BandTheme object using the color values set by the user and then call the SetThemeAsync, with the BandTheme object as the argument. A message is displayed on the UI once the BandTheme is uploaded successfully.

// Convert user customizations into Band theme.
BandTheme bandTheme = new BandTheme()
{
    Base = ((SolidColorBrush)eBase.Fill).Color.ToBandColor(),
    HighContrast = ((SolidColorBrush)eHighContrast.Fill).Color.ToBandColor(),
    Lowlight = ((SolidColorBrush)eLowLight.Fill).Color.ToBandColor(),
    Highlight = ((SolidColorBrush)eHighlight.Fill).Color.ToBandColor(),
    Muted = ((SolidColorBrush)eMuted.Fill).Color.ToBandColor(),
    SecondaryText = ((SolidColorBrush)eSecondary.Fill).Color.ToBandColor(),
};
// Update Band with the theme.
await bandClient.PersonalizationManager.SetThemeAsync(bandTheme);

Uploading theme to Microsoft Band

Screenshots on Microsoft Band 2

Video Walkthrough

Here is video Tutorial on how to use the app. It goes through all the steps, such as retrieving, customizing and uploading the theme. It also covers the cancel button, in case you want to discard your changes.

Source Code

You can find the source code at Github bandManager repo along with the Visual Studio 2015 solution.

Final note

This UWP application is very basic demonstration of using the Microsoft Band SDK to interact and personalize the Band. A lot more things can be done with the SDK, such as subscribe to sensors and use the data from the sensors, or update the MeTile. This is application does not use the RelativePanel or VisualState class to make the application dynamically adjust to the screen size, since that was not the motive of this app. If you still face any problems or have any questions, feel free to leave a comment and I will be happy to help. Cheers :)

Font icons in UWP using Segoe MDL2 and Segoe UI

Mon, 05 Sep 2016 05:50:52 -0700

Overview

While developing a UWP app to customize the Microsoft Band, I realized, there was no way to retrieve icons from the default band tiles, therefore I decided to go the old way of displaying icons, that is using images. Now, since it is a Universal Platform Application, it is expected to work across many different windows 10 platforms and screen sizes. One solution is to use an image file as an icon, which is pretty common, however, the image gets pixelated when the image and the screen size increases. We can use different icon files for different screen sizes, however, it is too much of hassle.
An easier solution I found is to use font icons, already predefined in the fonts Segoe MDL2 Assets and Segoe UI Symbol, the best part is you can bind the font size to a particular value, depending upon the screen size everything else is taken care of. Another benefit of using font icons is that, in case you change the theme from light to dark, the icons are updated as well, depending on the theme.

Segoe MDL2 Assets is a Windows 10 font that replaces Windows 8/8.1 font Segoe UI Symbols. Some of the Segoe MDL2 Assets icons are also available through Symbol Enumeration, which I will discuss in this post as well. For list of symbols, available refer to this MSDN article Segoe MDL2 icons

Using TextBlock

TextBlock is a FrameworkElement control that is used to display small amounts of text. We set the Text property of the TextBlock control to the Unicode Value of the symbol we want to use. In our example below we have different symbols as the Text property.

Using Segoe MDL2 Assets

<TextBlock Text="&#xEB52; &#xEB51; &#xEB68;" FontFamily="Segoe MDL2 Assets" />

Using Segoe UI Symbols

 <TextBlock Text="&#xE200; &#xE1D6; &#xE181;" FontFamily="Segoe UI Symbol" />

Using FontIcon

FontIcon is a generalized version of SymbolIcon, that inherits from IconElement class. It is pretty similar to the TextBlock control, however, we set the Glyph property instead of Text property in the case of FontIcon control. Instead of using a predefined set of symbols from Segoe MDL2 Assets, you can specify the Unicode value and choose from the list of available icons. You can even specify a different font, such as Segoe UI Symbols and specify respective Unicode value.

Using Segoe MDL2 Assets

<FontIcon Glyph="&#xEB52; &#xEB51;  &#xEB68;" FontFamily="Segoe MDL2 Assets" />

Using Segoe UI Symbols

<FontIcon Glyph="&#xE200; &#xE1D6; &#xE181;" FontFamily="Segoe UI Symbol" />

Using SymbolIcon

Both the SymbolIcon and FontIcon inherit from the same class IconElement, however SymbolIcon is constrained to a predefined set of Segoe MDL2 icons.

Using Segoe MDL2 Assets

<SymbolIcon Symbol="Favorite" />
<SymbolIcon Symbol="Camera" />
<SymbolIcon Symbol="Mail" />

Display font icons using C#

Font icons can also be displayed very easily using C# by updating the respective code behind file. Just update the respective Gylph or Text property of the control you want to display the font icons in. The only difference in C# is that the Unicode value is escaped differently using ‘\u’.

FontIconCS.Glyph += "\uE1D0";
txtFontIconCS.Text += "\uE1D0";

Icons in action

This is how Segoe MDL2 and Segoe UI font icons look on a UWP app.

Source Code

You can find the source code at Github fontIcons repo along with the Visual Studio 2015 solution.

Final note

The best part about font icons is that you don’t have to worry about pixelated icons anymore. :)
If you still face any problems or have any questions, feel free to leave a comment and I will be happy to help. Cheers :)

Get Bing Image of the Day using C# UWP Application

Sun, 21 Aug 2016 10:27:52 -0700

Overview

Bing Image of the Day has become quite popular over the years, it comprises of essentially the most spectacular user-submitted images from all over the world which have been showcased on the Bing homepage for the past 5 years. I have absolutely loved the Bing Wallpaper of the day part of the Bing desktop application. Bing desktop app changes your wallpaper every day to Bing Image of the Day, which is pretty cool and gives you a peace of mind without having to change the wallpaper every day manually. The somewhat similar concept has been used in Windows Phone as well, where you can set the lock screen to the Bing Image of the Day.

I was so interested in the idea that I wanted to try out myself building an app to retrieve the Bing Image. I knew once I could retrieve the image, I had numerous possibilities going forward. I could save it and change my desktop after a certain duration of my choice, or set it as my lock screen just as a desktop wallpaper, you get my point, the key here is to get the Bing Image of the Day.

Fortunately, Bing has a REST API to retrieve a JSON string which contains the URL to the Bing Image, which we will be making use of. That is the easy part, now the hard part is to parse and retrieve the URL from the JSON string. I will be discussing in detail the different methods that can be used for parsing and how they can be used to extract the Bing Image URL.

Step 1. Retrieve the JSON string

The first step is to retrieve the JSON string from the Bing REST API endpoint. We retrieve the string using an HttpClient,we have an option of using Windows.Web.Http or System.Net.Http namespace.
I prefer to choose Windows.Web.Http.HttpClient for the simple reason that the System.Net.Http.HttpClient might get deprecated over time. Another reason is that System.Net.Http.HttpClient supports only .Net Languages, whereas Windows.Web.Http.HttpClient was written with the aim of consolidating all the HTTP APIs for different Windows Application Languages, and therefore it supports all the Windows Store application languages. For the avid readers here is a detailed comparison between the two.

// We can specify the region we want for the Bing Image of the Day.
string strRegion = "en-US";
string strBingImageURL = string.Format("http://www.bing.com/HPImageArchive.aspx?format=js&idx=0&n={0}&mkt={1}", _numOfImages, strRegion);
string strJSONString = "";

HttpClient client = new HttpClient();

// Using an Async call makes sure the app is responsive during the time the response is fetched.
// GetAsync sends an Async GET request to the Specified URI.
HttpResponseMessage response = await client.GetAsync(new Uri(strBingImageURL));

// Content property get or sets the content of a HTTP response message. 
// ReadAsStringAsync is a method of the HttpContent which asynchronously 
// reads the content of the HTTP Response and returns as a string.
strJSONString = await response.Content.ReadAsStringAsync();

Step 2. Parse the JSON string

Now we can parse the retrieved JSON string using 3 methods
• Using Windows.Data.Json (Native Way)
• Using LINQ-to-JSON API’s JObject from JSON.NET (Newtonsoft)
• Using dynamic object and DeserializeObject method JSON.NET (Newtonsoft)
JSON.Net has existed since long before Windows.Data.Json came into existence, however, Microsoft introduced Windows.Data.Json with native support for parsing JSON. To use JSON.NET, you need to add the Newtonsoft Nuget package, which adds an additional library dependency. I personally prefer the native way, however for the purpose of this app I have discussed both the ways of parsing the JSON string using both JSON.NET and Windows.Data.Json namespaces.

Retrieved JSON string:

{"images":[

    {"startdate":"20160719","fullstartdate":"201607190700","enddate":"20160720","url":"/az/hprichbg/rb/NeonMuseum_EN-US8131993872_1920x1080.jpg","urlbase":"/az/hprichbg/rb/NeonMuseum_EN-US8131993872","copyright":"Neon Museum, Las Vegas, Nevada (© Kerrick James/Getty Images)","copyrightlink":"http://www.bing.com/search?q=neon+museum&form=hpcapt&filters=HpDate:%2220160719_0700%22","wp":false,"hsh":"96d3e7bbe87ad583a17ef765ed935d8f","drk":1,"top":1,"bot":1,"hs":[]}
    ,
    {"startdate":"20160718","fullstartdate":"201607180700","enddate":"20160719","url":"/az/hprichbg/rb/DiamondHead_EN-US10119574903_1920x1080.jpg","urlbase":"/az/hprichbg/rb/DiamondHead_EN-US10119574903","copyright":"Aerial view of Diamond Head, O’ahu, Hawaii (© Biederbick & Rumpf/Offset)","copyrightlink":"http://www.bing.com/search?q=diamond+head+hawaii&form=hpcapt&filters=HpDate:%2220160718_0700%22","wp":true,"hsh":"1aff492416f5e2fcf6e898743154fbda","drk":1,"top":1,"bot":1,"hs":[]}
    ,
    {"startdate":"20160717","fullstartdate":"201607170700","enddate":"20160718","url":"/az/hprichbg/rb/MuizenbergSA_EN-US9176714978_1920x1080.jpg","urlbase":"/az/hprichbg/rb/MuizenbergSA_EN-US9176714978","copyright":"Beach huts in Muizenberg, South Africa (© Getty Images)","copyrightlink":"http://www.bing.com/search?q=Muizenberg,+South+Africa&form=hpcapt&filters=HpDate:%2220160717_0700%22","wp":true,"hsh":"8d4bf37f9d61ab103283005264b4b8cb","drk":1,"top":1,"bot":1,"hs":[]}

    ]

    ,"tooltips":{"loading":"Loading...","previous":"Previous image","next":"Next image","walle":"This image is not available to download as wallpaper.","walls":"Download this image. Use of this image is restricted to wallpaper only."}
}

Step 2a. Parsing JSON string using Windows.Data.Json:

This Method parses the fetched JSON string and retrieves the Image URLs using Microsoft Windows.Data.Json class. We use JsonObject that implements an IMap interface, which can help in manipulating the name/value pairs like a dictionary. We use JsonObject.TryParse method to parse the JSON string into a JSON value, it returns a boolean value, indicating success or failure. The integral part of the retrieval is jsonObject["images"].GetArray()[i].GetObject()["url"].GetString(). As seen in the above JSON string, we have a root object "images", it further has 3 arrays, which are equal to the number of images specified in Step 1. Each array has an object called url, which is the part of the url to the Bing Image. We retrieve url for each image and store it into a list.

// Parse using Windows.Data.Json.
JsonObject jsonObject;
bool boolParsed = JsonObject.TryParse(_strRawJSONString, out jsonObject);

if (boolParsed)
{
    for (int i = 0; i < _numOfImages; i++)
    {
       _lstBingImageURLs.Add(jsonObject["images"].GetArray()[i].GetObject()["url"].GetString());
    }
}

Step 2b. Parsing JSON string using LINQ-to-JSON API’s JObject:

This Method parses the fetched JSON string and retrieves the Image URLs using LINQ-to-JSON API’s JObject explicitly.We use this method when we don’t know the JSON structure ahead of time. This method is recommended if only one or two values from the whole JSON string are required.

// Parse using LINQ-to-JSON API's JObject explicitly.
JObject jResults = JObject.Parse(_strRawJSONString);
foreach (var image in jResults["images"])
{
    _lstBingImageURLs.Add((string)image["url"]);
}

Step 2c. Parsing JSON string using DeserializeObject and dynamic object

This Method parses the fetched JSON string and retrieves the Image URLs using DeserializeObject method. We use JsonConvert.DeserializeObject method when already know the JSON structure and the strongly typed class we want to deserialize into. We use dynamic object, as it saves us the trouble of declaring a specific class to hold the JSON object.

// Parse using DeserializeObject method.
for (int i = 0; i < _numOfImages; i++)
{
    _lstBingImageURLs.Add(Convert.ToString((JsonConvert.DeserializeObject<dynamic>(_strRawJSONString)).images[i].url));
}

Step 3. Display images on UI using BitmapImage

Each URL is converted into a Bitmap Image and added into the Stack Panel dynamically to display as an Image Object. BitmapImage class inherits from the BitmapSource class and is specialized BitmapSource that is optimized for loading images using XAML.

foreach (string url in _lstBingImageURLs)
{
    // We use the Image control to display an image on the UI.
    Image imgbingImage = new Image();
    var bingURL = "https://www.bing.com" + url;

    BitmapSource imgbingImageSource = new BitmapImage(new Uri(bingURL));
    imgbingImage.Source = imgbingImageSource;
    
    // Add the Image control to the Stack Panel
    spImages.Children.Add(imgbingImage);
}

Working Windows 10 UWP App

Here is the screenshot of the working Windows 10 UWP app, I have hosted the Visual Studio solution file with source code at Github Repository Bing-Image-JSON which you can use to experiment yourself.

Final note:

The source code at the Github repo contains the full detailed code, which you can use to experiment and follow along. If you still face any problems or have any questions, feel free to leave a comment and I will be happy to help. Cheers :)

Setting up a Jekyll blog using Windows 10 Bash and hosting on GitHub Pages

Fri, 05 Aug 2016 14:19:52 -0700

Overview

I started on a journey to setup my personal Github.io page and I had no prior experience of Jekyll, Ruby or setting up a page on GitHub. There were some initial hurdles understanding and configuring the blog, but fortunately, I was able to overcome them all and setup my very own personal GitHub.io page :)

I watched some videos on YouTube, however most of them missed a really important part, the part of setting up Jekyll on windows 10 and compiling the source code into a static website. Jekyll is not officially supported on windows, but there are workarounds to setup Jekyll on windows, which I will discuss in this post. I figured it would be really helpful for first timers to have a useful guide on how to setup a GitHub.io page using Jekyll on Windows 10.

Pre-Requisites

Before you start, you will need Windows Subsystem for Linux aka Bash on windows feature enabled. If you have no idea on how to get the bash setup, refer to this wonderful guide

Step 1. Download the Theme

After you are done setting up, the next part is choosing a wonderful theme for your blog. Head over to Jekyll Themes to find a theme. I will be using Emerald theme for our example. Click the download link to download the zip file containing the source files.

Alternatively, you can go to github.com and download the source code from the GitHub repository KingFelix/emerald

Step 2. Setting up the Windows 10 environment

Now we will setup our local environment required to build the source code that we just downloaded on Windows 10. There are different ways to setup a Jekyll server locally which you can use as desired. The one I found most convenient was installing the packages on the bash shell and setting up a Jekyll server on Bash.

Extract the zip file and open the bash shell. We need to install ruby and jekyll before we do anything. Here are the steps to follow.

Step 2a. Switching to Root

We need root permissions to install the packages, else you will get a permission denied error.

sudo -s

Step 2b. Installing gcc and make:

Since the ubuntu bash shell is almost empty and has no packages like gcc and make installed, we will install gcc and make.

apt-get update
apt-get install gcc
apt-get install make

Step 2c. Installing Ruby from Brightbox [Recommended Method]:

We will need ruby and ruby-dev package to compile and build the Jekyll code and its dependencies. The reason why we need ruby-dev is because some Jekyll dependencies are just source files, which need to be compiled into binaries/executables.

apt-get install software-properties-common
apt-add-repository ppa:brightbox/ruby-ng
apt-get update
apt-get install ruby2.3 ruby2.3-dev

Step 2c. Installing Ruby [Alternate Method]:

Make sure the ruby version is at least 2.0 as jekyll requires a minimum ruby version 2.0. The current latest stable release is 2.3.1.

apt-get install ruby
apt-get install ruby-dev

Step 2d. Setting the Ruby version:

Just to be sure, change the default Ruby version to 2.3, we can switch the default Ruby version using the ruby-switch tool.

apt-get install ruby-switch
ruby-switch --set ruby2.3
ruby -v

Step 2e. Installing Bundler:

Bundler is an easy way to track and install the required and dependent gems which will make our life easier, therefore it is a good time now to install bundler. Once installation completes check the version using the -v flag.

gem install bundler
bundler -v

Step 2f. Installing Jekyll:

Even though Jekyll is not supported officially on Windows, it is fully supported on Linux, therefore we will take advantage of that. To install Jekyll run the following command and it will install all jekyll and its dependencies. Once installation completes check the version using the -v flag.

gem install jekyll
jekyll -v

Step 3. Building and serving website

Extract the zip file you downloaded in step 1 and go to the download location from the bash shell. All the local drives are present in the /mnt/ folder.
For example:
Windows Location: D:\emerald-master\emerald-master
Bash Location: /mnt/d/emerald-master/emerald-master

cd /mnt/d/emerald-master/emerald-master

Step 3a. Configuring the _config.yml file:

Open up any text editor and edit the _config.yml file before we start building. Add the following line in the build settings “gems: [jekyll-paginate]”. jekyll-paginate is a plugin which helps us in displaying the posts into a smaller list of posts on the main page. After adding the line your build setting will look something like this.

# Build settings
baseurl: /emerald/ # Change this to your relative path (ex: /blog/), or leave just a /
markdown: kramdown
source: .
destination: ./_site
permalink: /:title
paginate: 8
paginate_path: /page:num/
gems: [jekyll-paginate]

Step 3b. Building and serving the website locally:

Navigate to the root of your source code folder containing the _config.yml to build and serve the website and execute the following command.

jekyll serve

Jekyll monitors your source code and regenerates files on the fly by default. This is termed as watching the source folder for any changes, and in some cases, Jekyll might fail to watch when you try to serve your website. If you get an error similar to "Error: Invalid argument - Failed to watch", just execute the following command and would resolve your issue.

jekyll serve --force_polling

If in some cases it still fails to watch, just serve the website using the --no-watch flag, which essentially means you will have to build and serve every time you make a change.

jekyll serve --no-watch

Step 3c. Opening the website locally:

Once the build and serve are completed in step 3b, you should get an output similar to the one given below. There are 3 main elements to look out for

Configuration file: This tells us the configuration file used. Make sure the correct file is used.
Destination: This tells us the output folder, in which the source code is built into.
Server address: This tells us the local address of the website, which we can use to visit our website hosted on a local server.

Go to the server address http://127.0.0.1:4000/emerald/ to see your website.

Configuration file: /mnt/d/emerald-master/emerald-master/_config.yml
Source: .
Destination: ./_site
Incremental build: disabled. Enable with --incremental
Generating...
                    done in 0.744 seconds.
Auto-regeneration: enabled for '.'
Configuration file: /mnt/d/emerald-master/emerald-master/_config.yml
Server address: http://127.0.0.1:4000/emerald/
Server running... press ctrl-c to stop.

Step 4. Hosting and uploading the website on Github.io

After you have setup and tested everything locally, the next part is setting up a GitHub repository with the username.github.io, where username is your username on GitHub. Be very careful to make sure the username is correct, as a mismatching username will not work. Once a new repository is created online, we will upload the site that we have built locally onto the repository username.github.io.

Step 4a. Setup and push your code to GitHub repo username.github.io:

Note the destination folder in step 3c, the default destination folder is _site. From your root source folder, navigate into the _site folder, initialize a new git repository, commit the change and push them to repository username.github.io. GitHub gives the option of hosting your markdown code in the master branch and static website code in the gh-pages branch. In our case we will be hosting just the static website code on the master branch, rather than two seperate branches.

cd _site/
apt-get install git
git init
git add .
git commit -m "initial commit"
git remote add origin https://github.com/username/username.github.io.git
git push -u origin master

Step 5. Final check

Once your code is successfully pushed, you can go to the repository settings and confirm everything is working correctly. https://github.com/username/username.github.io/settings

Go to https://username.github.io/ to see your website in action.

Making changes and updating the website: Repeat step 3b , 3c, 4 and 5 For step 4 repeat only

git add .
git commit -m "initial commit"
git remote add origin https://github.com/username/username.github.io.git
git push -u origin master

Final note

If you still face any problems or have any questions, feel free to leave a comment and I will be happy to help. Cheers :)

Check out the links below for detailed information:
Jekyll on Bash on Ubuntu on Windows
Run Jekyll on Windows