Developer docs by Indraneel PoleSolution to a lot of hair pulling problems with cloud, mobile, and IoT development.http://developers.de/blogs/indraneel/atom.aspxCommunity Server2016-04-22T14:52:21ZKill a process in Windows by Port Number/blogs/indraneel/archive/2017/10/18/kill-a-process-in-windows-by-port-number.aspx2017-10-18T09:20:44Z2017-10-18T09:20:44Z<p> </p> <p><font size="2">While working with Angular projects, a lot of times I forget to kill the running NPM process before closing the command line tool. And then when I want to run the app on same port again it throws me an error that the port is used by some other process. Now, this is just an example, but it is quite possible that this might have happened with you as well while working on some web project. In case you are scratching your head for which command to use to kill the process just by knowing the port number, here is the post that might help you. Well I know this is not that great a problem, but sometimes we spend hours solving the dumbest problems. <img class="wlEmoticon wlEmoticon-smile" style="border-top-style:none;border-left-style:none;border-bottom-style:none;border-right-style:none;" alt="Smile" src="http://developers.de/cfs-file.ashx/__key/CommunityServer.Blogs.Components.WeblogFiles/indraneel/wlEmoticon_2D00_smile_5F00_40CAAD76.png" /></font></p> <p><font size="2">So first you need to find the PID of your process that is running on that specific port. Here is the command that gives you list of all process with port numbers. Shoot this command in command prompt.</font> </p> <p><font size="5">“netstat -a -o –n”</font></p> <p><font size="2">It will show you a similar output -</font> </p> <p><a href="http://developers.de/cfs-file.ashx/__key/CommunityServer.Blogs.Components.WeblogFiles/indraneel/image_5F00_0BBE1E46.png"><img title="image" style="border-top:0px;border-right:0px;background-image:none;border-bottom:0px;padding-top:0px;padding-left:0px;border-left:0px;display:inline;padding-right:0px;" border="0" alt="image" src="http://developers.de/cfs-file.ashx/__key/CommunityServer.Blogs.Components.WeblogFiles/indraneel/image_5F00_thumb_5F00_595A4AC6.png" width="392" height="264" /></a></p> <p><font size="2">Now type Ctl + F to find the port that you are looking for. For me, it was 4200. Note the PID of this process in the last column. For me it was 15508</font></p> <p><a href="http://developers.de/cfs-file.ashx/__key/CommunityServer.Blogs.Components.WeblogFiles/indraneel/image_5F00_20436DC4.png"><img title="image" style="border-top:0px;border-right:0px;background-image:none;border-bottom:0px;padding-top:0px;padding-left:0px;border-left:0px;display:inline;padding-right:0px;" border="0" alt="image" src="http://developers.de/cfs-file.ashx/__key/CommunityServer.Blogs.Components.WeblogFiles/indraneel/image_5F00_thumb_5F00_2E15B3BF.png" width="385" height="228" /></a></p> <p> </p> <p><font size="2">Now simply use the command to kill the process by PID -</font> </p> <p><font size="5">“taskkill /F /PID 15508”</font></p> <p><font size="5"></font></p> <p><font size="2">Make sure to change the PID to your own PID. And that is it. You can run the new process on same port now.</font></p><div style="clear:both;"></div><img src="http://developers.de/aggbug.aspx?PostID=1809760" width="1" height="1">ipolehttp://developers.de/members/ipole/default.aspxRaspberry Pi Windows 10 IoT Core - How to find isolated storage of your application?/blogs/indraneel/archive/2017/09/14/raspberry-pi-windows-10-iot-core-how-to-find-isolated-storage-of-your-application.aspx2017-09-14T07:04:07Z2017-09-14T07:04:07Z<p> </p> <p>While working on IoT projects, if you are using Windows 10 IoT Core, things can be really painful sometimes. There are advantages and disadvantages of using Windows 10IoT Core. Advantage being you can apply most of your Windows knowledge in some way to Windows 10 IoT Core. The bad thing a lot of times it is the same but the different and that confusion makes your life hell. It recently happened with me when I used Isolated Storage on Raspberry Pi in my project and it took me 2 hours to find the path of it. So if anybody is wondering with the same question, here is where it lies. </p> <p>The isolated storage lies inside Package folder of your app. Every app that is installed on Windows OS creates an app package. On normal Windows machines, your app packages are installed at C drive at your user account inside AppData\Local. The Path looks something like - </p> <p align="center">C:\Users\XYZ\AppData\Local\Packages</p> <p align="left">And inside this lies your package inside which you can access the isolated storage files.</p> <p>On Windows 10 IoT Core however you have two “Users” folders, one is directly on the root level and another is inside the Data folder. If you try to find inside Users folder you still go to packages folder, but you will not find anything in there. To go to app packages you have to go inside Data\Users folder and then select “DefaultAccount” which is a hidden folder. This DefaultAccount then has a similar path as of Windows machine. The path looks like this -</p> <p><a>\\IP_Address_Of_Your_Machine\c$\Data\Users\DefaultAccount\AppData\Local\Packages\20c45e87-953a-4d99-919b-c6ee7e9642d3_h95tnwbrnsgam\LocalState\</a></p> <p>The GUID inside packages folder is your app folder and inside local state you can access isolated storage.</p> <p>I hope it helps <img class="wlEmoticon wlEmoticon-smile" style="border-top-style:none;border-left-style:none;border-bottom-style:none;border-right-style:none;" alt="Smile" src="http://developers.de/cfs-file.ashx/__key/CommunityServer.Blogs.Components.WeblogFiles/indraneel/wlEmoticon_2D00_smile_5F00_5973A7B3.png" /></p><div style="clear:both;"></div><img src="http://developers.de/aggbug.aspx?PostID=1808993" width="1" height="1">ipolehttp://developers.de/members/ipole/default.aspxASP.NET Core Error : Authorization failed for the request at filter 'Microsoft.AspNetCore.Mvc.RequireHttpsAttribute'/blogs/indraneel/archive/2017/05/09/asp-net-core-error-authorization-failed-for-the-request-at-filter-microsoft-aspnetcore-mvc-requirehttpsattribute.aspx2017-05-09T15:51:00Z2017-05-09T15:51:00Z<p> </p> <p align="center"><font size="4">Behavior / Steps to reproduce</font></p> <p> Running ASP.NET Core application on Kestrel Web Server. Every time the app is run, it makes a strange redirect to “https”, and the call doesn’t work. In console you see the following error. </p> <p> </p> <p><a href="http://developers.de/cfs-file.ashx/__key/CommunityServer.Blogs.Components.WeblogFiles/indraneel/image_5F00_1EF9B901.png"><img title="image" style="border-top:0px;border-right:0px;background-image:none;border-bottom:0px;float:none;padding-top:0px;padding-left:0px;margin-left:auto;border-left:0px;display:block;padding-right:0px;margin-right:auto;" border="0" alt="image" src="http://developers.de/cfs-file.ashx/__key/CommunityServer.Blogs.Components.WeblogFiles/indraneel/image_5F00_thumb_5F00_30D64CCE.png" width="372" height="173" /></a></p> <p><strong><font size="2">Notice :</font></strong> This error doesn’t occur while running on IIS Express.</p> <p align="center"><font size="4">Explanation</font></p> <p>This happens if in your startup file you have services configured with filters to have only Https attributes</p> <p><a href="http://developers.de/cfs-file.ashx/__key/CommunityServer.Blogs.Components.WeblogFiles/indraneel/image_5F00_25ACC284.png"><img title="image" style="border-top:0px;border-right:0px;background-image:none;border-bottom:0px;float:none;padding-top:0px;padding-left:0px;margin-left:auto;border-left:0px;display:block;padding-right:0px;margin-right:auto;" border="0" alt="image" src="http://developers.de/cfs-file.ashx/__key/CommunityServer.Blogs.Components.WeblogFiles/indraneel/image_5F00_thumb_5F00_57A4630E.png" width="373" height="115" /></a></p> <p>This will require you to have local certificate. In case of IIS Express, IIS Express takes care of it for you. However, for other web server such as Kestrel this doesn’t work.</p> <p align="center"><font size="4">How to fix this</font> </p> <p>If you are just testing locally, you can simply comment this filter out, and everything will work. However, if you have to use the SSL, you should create a certificate and use it in your code. How to create Certificate is explained in this <a href="https://wildermuth.com/2016/10/26/Testing-SSL-in-ASP-NET-Core">awesome post</a>. To use it in your app, you need to call this certificate in your app, and configure this certificate in your WebHostBuilder as shown in this <a href="http://stackoverflow.com/a/41395063/3751816">Answer</a>.</p><div style="clear:both;"></div><img src="http://developers.de/aggbug.aspx?PostID=1806263" width="1" height="1">ipolehttp://developers.de/members/ipole/default.aspxUsing Azure Cognitive Services FACE API in UWP App/blogs/indraneel/archive/2017/05/03/using-azure-cognitive-services-face-api-in-uwp-app.aspx2017-05-03T13:41:29Z2017-05-03T13:41:29Z<p> </p> <p>I have been playing around with Cognitive Services since sometime now, as I find them mind blowing APIs to do a lot of Artificial Intelligence tasks without spending much time building AI algorithms yourself. Take FACE API for example. Normally the most common way to do face detection/recognition is to use Eigenface  classification algorithm. For this you need to know basics of AI such as Regression and Classification, as well as basics of algorithms such as SVD, Neural Networks and so on. Even if you use a library such as OpenCV, you still need some knowledge of Artificial Intelligence to make sure you use the correct set of parameters from the library.</p> <p>Cognitive Services however, make this demand completely obsolete and put the power of AI truly in the hands of common developer. You don’t need to learn complicated mathematics to use the AI tools anymore. This is good because as AI becomes more and more common in software world, it should also be accessible to the lowest common denominator of developers world who might not have the high degrees in science and mathematics, but who know how to code. The downside of it? The APIs are somewhat restricted in what they can do. But this might change in future (Or, so we should hope for).</p> <p>Today I am going to talk about Using the Face Api from Microsoft Azure Cognitive Services, to build a simple UWP application that can tell some of the characteristics of a face (Such as age, emotion, smile, facial hair etc.)</p> <p>To do so, first open Visual Studio –> Create New Project –> Select Windows Universal Blank App. This is your UWP application. To use Azure Cognitive Services in this project you would have to do two things.  </p> <p>1. Subscribe to Face API in Azure Cognitive Services portal – To do so, go to <a href="https://www.microsoft.com/cognitive-services/en-US/subscriptions#">Cognitive Services Subscription</a>, log on with your account, and Face API. Once you do, you will see following </p> <p><a href="http://developers.de/cfs-file.ashx/__key/CommunityServer.Blogs.Components.WeblogFiles/indraneel/image_5F00_4DE3BC26.png"><img title="image" style="border-top:0px;border-right:0px;background-image:none;border-bottom:0px;float:none;padding-top:0px;padding-left:0px;margin-left:auto;border-left:0px;display:block;padding-right:0px;margin-right:auto;" border="0" alt="image" src="http://developers.de/cfs-file.ashx/__key/CommunityServer.Blogs.Components.WeblogFiles/indraneel/image_5F00_thumb_5F00_46C47FAE.png" width="531" height="195" /></a></p> <p>You will need the key from here later in the code to subscribe to Face API client.</p> <p>2. Go To Solution Explorer in Visual Studio –> Right Click on Project –> Manage Nuget Packages –> Search for Microsoft.ProjectOxford.Face and Install it. Then in MainPage.xaml.cs,  add following lines of code at the top - </p> <div id="codeSnippetWrapper" style="font-size:8pt;overflow:auto;cursor:text;border-top:silver 1px solid;font-family:'Courier New', courier, monospace;border-right:silver 1px solid;width:97.5%;border-bottom:silver 1px solid;padding-bottom:4px;direction:ltr;text-align:left;padding-top:4px;padding-left:4px;border-left:silver 1px solid;margin:20px 0px 10px;line-height:12pt;padding-right:4px;max-height:200px;background-color:#f4f4f4;"> <div id="codeSnippet" style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;line-height:12pt;padding-right:0px;background-color:#f4f4f4;"> <pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:white;"><span id="lnum1" style="color:#606060;"> 1:</span> <span style="color:#0000ff;">using</span> Microsoft.ProjectOxford.Face;</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:#f4f4f4;"><span id="lnum2" style="color:#606060;"> 2:</span> <span style="color:#0000ff;">using</span> Microsoft.ProjectOxford.Face.Contract;</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:white;"><span id="lnum3" style="color:#606060;"> 3:</span> <span style="color:#0000ff;">using</span> Microsoft.ProjectOxford.Common.Contract;</pre>
</div>
</div>
<p>Now you are all set to create the Universal App for Face Detection using Cognitive Services.</p>
<p>To do so, you need to do following things - </p>
<p>1. Access the device camera</p>
<p>2. Run the camera stream in the app</p>
<p>3. Capture the image</p>
<p>4. Call Face API.</p>
<p>We will look into them one by one.</p>
<p>First, let us access the camera and start streaming the video in the app. To do so, in MainPage.xaml add CaputreElement. See the following code snippet - </p>
<div id="codeSnippetWrapper" style="font-size:8pt;overflow:auto;cursor:text;border-top:silver 1px solid;font-family:'Courier New', courier, monospace;border-right:silver 1px solid;width:97.5%;border-bottom:silver 1px solid;padding-bottom:4px;direction:ltr;text-align:left;padding-top:4px;padding-left:4px;border-left:silver 1px solid;margin:20px 0px 10px;line-height:12pt;padding-right:4px;max-height:200px;background-color:#f4f4f4;">
<div id="codeSnippet" style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;line-height:12pt;padding-right:0px;background-color:#f4f4f4;">
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:white;"><span id="lnum1" style="color:#606060;"> 1:</span> <CaptureElement Name=<span style="color:#006080;">"PreviewControl"</span> Stretch=<span style="color:#006080;">"Uniform"</span> Margin=<span style="color:#006080;">"0,0,0,0"</span> Grid.Row=<span style="color:#006080;">"0"</span>/></pre>
</div>
</div>
<p>Then create a Windows.Media.Capture.MediaCapture object and initialize it. Add this as a source to CaptureElement and call the StartPreviewAsync() method. Following code snippet might make it clearer</p>
<div id="codeSnippetWrapper" style="font-size:8pt;overflow:auto;cursor:text;border-top:silver 1px solid;font-family:'Courier New', courier, monospace;border-right:silver 1px solid;width:97.5%;border-bottom:silver 1px solid;padding-bottom:4px;direction:ltr;text-align:left;padding-top:4px;padding-left:4px;border-left:silver 1px solid;margin:20px 0px 10px;line-height:12pt;padding-right:4px;max-height:200px;background-color:#f4f4f4;">
<div id="codeSnippet" style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;line-height:12pt;padding-right:0px;background-color:#f4f4f4;">
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:white;"><span id="lnum1" style="color:#606060;"> 1:</span> <span style="color:#0000ff;">try</span></pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:#f4f4f4;"><span id="lnum2" style="color:#606060;"> 2:</span> {</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:white;"><span id="lnum3" style="color:#606060;"> 3:</span> m_mediaCapture = <span style="color:#0000ff;">new</span> MediaCapture();</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:#f4f4f4;"><span id="lnum4" style="color:#606060;"> 4:</span> await m_mediaCapture.InitializeAsync();</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:white;"><span id="lnum5" style="color:#606060;"> 5:</span>  </pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:#f4f4f4;"><span id="lnum6" style="color:#606060;"> 6:</span> m_displayRequest.RequestActive();</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:white;"><span id="lnum7" style="color:#606060;"> 7:</span> DisplayInformation.AutoRotationPreferences = DisplayOrientations.Landscape;</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:#f4f4f4;"><span id="lnum8" style="color:#606060;"> 8:</span> </pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:white;"><span id="lnum9" style="color:#606060;"> 9:</span> PreviewControl.Source = m_mediaCapture;</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:#f4f4f4;"><span id="lnum10" style="color:#606060;"> 10:</span> await m_mediaCapture.StartPreviewAsync();</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:white;"><span id="lnum11" style="color:#606060;"> 11:</span> m_isPreviewing = <span style="color:#0000ff;">true</span>;</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:#f4f4f4;"><span id="lnum12" style="color:#606060;"> 12:</span> }</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:white;"><span id="lnum13" style="color:#606060;"> 13:</span> <span style="color:#0000ff;">catch</span>(Exception ex)</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:#f4f4f4;"><span id="lnum14" style="color:#606060;"> 14:</span> {</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:white;"><span id="lnum15" style="color:#606060;"> 15:</span> <span style="color:#008000;">//Handle Exception</span></pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:#f4f4f4;"><span id="lnum16" style="color:#606060;"> 16:</span> }</pre>
</div>
</div>
<p>This will start video streaming from the camera in your application. Now to capture the image and process it, create a button in MainPage.xaml, and add a event handler to this button. In the event handler, call the FaceServiceClient that you should initialize in the initializing code of your app. </p>
<div id="codeSnippetWrapper" style="font-size:8pt;overflow:auto;cursor:text;border-top:silver 1px solid;font-family:'Courier New', courier, monospace;border-right:silver 1px solid;width:97.5%;border-bottom:silver 1px solid;padding-bottom:4px;direction:ltr;text-align:left;padding-top:4px;padding-left:4px;border-left:silver 1px solid;margin:20px 0px 10px;line-height:12pt;padding-right:4px;max-height:200px;background-color:#f4f4f4;">
<div id="codeSnippet" style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;line-height:12pt;padding-right:0px;background-color:#f4f4f4;">
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:white;"><span id="lnum1" style="color:#606060;"> 1:</span> FaceServiceClient fClient = <span style="color:#0000ff;">new</span> FaceServiceClient(<span style="color:#006080;">"Here your subscription key"</span>);</pre>
</div>
</div>
<p>And then, use this InMemoryRandomAccessStream object to capture the Photo in JPG encoding and then call DetectAsync from the FaceServiceClient to get the information about faces.
<div id="codeSnippetWrapper" style="font-size:8pt;overflow:auto;cursor:text;border-top:silver 1px solid;font-family:'Courier New', courier, monospace;border-right:silver 1px solid;width:97.5%;border-bottom:silver 1px solid;padding-bottom:4px;direction:ltr;text-align:left;padding-top:4px;padding-left:4px;border-left:silver 1px solid;margin:20px 0px 10px;line-height:12pt;padding-right:4px;max-height:200px;background-color:#f4f4f4;">
<div id="codeSnippet" style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;line-height:12pt;padding-right:0px;background-color:#f4f4f4;">
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:white;"><span id="lnum1" style="color:#606060;"> 1:</span> <span style="color:#0000ff;">using</span> (var captureStream = <span style="color:#0000ff;">new</span> InMemoryRandomAccessStream())</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:#f4f4f4;"><span id="lnum2" style="color:#606060;"> 2:</span> {</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:white;"><span id="lnum3" style="color:#606060;"> 3:</span> await m_mediaCapture.CapturePhotoToStreamAsync(ImageEncodingProperties.CreateJpeg(), captureStream);</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:#f4f4f4;"><span id="lnum4" style="color:#606060;"> 4:</span> captureStream.Seek(0);</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:white;"><span id="lnum5" style="color:#606060;"> 5:</span> var faces = await fClient.DetectAsync(captureStream.AsStream(), returnFaceLandmarks: <span style="color:#0000ff;">true</span>, returnFaceAttributes: <span style="color:#0000ff;">new</span> FaceAttributes().GetAll());</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:#f4f4f4;"><span id="lnum6" style="color:#606060;"> 6:</span> };</pre>
</div>
</div>
</p>
<p>returnFaceLandmarks and returnFaceAttributes are two important properties that you need to take care of in order to get the full Detect information from the API. When returnFaceLandmarks is set to true, you get all the information of location of your face parts such as Pupils, Nose, Mouth and so on. The information that comes back looks like following
<div id="codeSnippetWrapper" style="font-size:8pt;overflow:auto;cursor:text;border-top:silver 1px solid;font-family:'Courier New', courier, monospace;border-right:silver 1px solid;width:97.5%;border-bottom:silver 1px solid;padding-bottom:4px;direction:ltr;text-align:left;padding-top:4px;padding-left:4px;border-left:silver 1px solid;margin:20px 0px 10px;line-height:12pt;padding-right:4px;max-height:200px;background-color:#f4f4f4;">
<div id="codeSnippet" style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;line-height:12pt;padding-right:0px;background-color:#f4f4f4;">
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:white;"><span id="lnum1" style="color:#606060;"> 1:</span> <span style="color:#006080;">"faceLandmarks"</span>: {</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:#f4f4f4;"><span id="lnum2" style="color:#606060;"> 2:</span> <span style="color:#006080;">"pupilLeft"</span>: {</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:white;"><span id="lnum3" style="color:#606060;"> 3:</span> <span style="color:#006080;">"x"</span>: 504.4,</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:#f4f4f4;"><span id="lnum4" style="color:#606060;"> 4:</span> <span style="color:#006080;">"y"</span>: 202.8</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:white;"><span id="lnum5" style="color:#606060;"> 5:</span> },</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:#f4f4f4;"><span id="lnum6" style="color:#606060;"> 6:</span> <span style="color:#006080;">"pupilRight"</span>: {</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:white;"><span id="lnum7" style="color:#606060;"> 7:</span> <span style="color:#006080;">"x"</span>: 607.7,</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:#f4f4f4;"><span id="lnum8" style="color:#606060;"> 8:</span> <span style="color:#006080;">"y"</span>: 175.9</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:white;"><span id="lnum9" style="color:#606060;"> 9:</span> },</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:#f4f4f4;"><span id="lnum10" style="color:#606060;"> 10:</span> <span style="color:#006080;">"noseTip"</span>: {</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:white;"><span id="lnum11" style="color:#606060;"> 11:</span> <span style="color:#006080;">"x"</span>: 598.5,</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:#f4f4f4;"><span id="lnum12" style="color:#606060;"> 12:</span> <span style="color:#006080;">"y"</span>: 250.9</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:white;"><span id="lnum13" style="color:#606060;"> 13:</span> },</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:#f4f4f4;"><span id="lnum14" style="color:#606060;"> 14:</span> <span style="color:#006080;">"mouthLeft"</span>: {</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:white;"><span id="lnum15" style="color:#606060;"> 15:</span> <span style="color:#006080;">"x"</span>: 527.7,</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:#f4f4f4;"><span id="lnum16" style="color:#606060;"> 16:</span> <span style="color:#006080;">"y"</span>: 298.9</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:white;"><span id="lnum17" style="color:#606060;"> 17:</span> },</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:#f4f4f4;"><span id="lnum18" style="color:#606060;"> 18:</span> <span style="color:#006080;">"mouthRight"</span>: {</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:white;"><span id="lnum19" style="color:#606060;"> 19:</span> <span style="color:#006080;">"x"</span>: 626.4,</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:#f4f4f4;"><span id="lnum20" style="color:#606060;"> 20:</span> <span style="color:#006080;">"y"</span>: 271.5</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:white;"><span id="lnum21" style="color:#606060;"> 21:</span> },</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:#f4f4f4;"><span id="lnum22" style="color:#606060;"> 22:</span> <span style="color:#006080;">"eyebrowLeftOuter"</span>: {</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:white;"><span id="lnum23" style="color:#606060;"> 23:</span> <span style="color:#006080;">"x"</span>: 452.3,</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:#f4f4f4;"><span id="lnum24" style="color:#606060;"> 24:</span> <span style="color:#006080;">"y"</span>: 191</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:white;"><span id="lnum25" style="color:#606060;"> 25:</span> },</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:#f4f4f4;"><span id="lnum26" style="color:#606060;"> 26:</span> <span style="color:#006080;">"eyebrowLeftInner"</span>: {</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:white;"><span id="lnum27" style="color:#606060;"> 27:</span> <span style="color:#006080;">"x"</span>: 531.4,</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:#f4f4f4;"><span id="lnum28" style="color:#606060;"> 28:</span> <span style="color:#006080;">"y"</span>: 180.2</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:white;"><span id="lnum29" style="color:#606060;"> 29:</span> },</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:#f4f4f4;"><span id="lnum30" style="color:#606060;"> 30:</span> <span style="color:#006080;">"eyeLeftOuter"</span>: {</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:white;"><span id="lnum31" style="color:#606060;"> 31:</span> <span style="color:#006080;">"x"</span>: 487.6,</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:#f4f4f4;"><span id="lnum32" style="color:#606060;"> 32:</span> <span style="color:#006080;">"y"</span>: 207.9</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:white;"><span id="lnum33" style="color:#606060;"> 33:</span> },</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:#f4f4f4;"><span id="lnum34" style="color:#606060;"> 34:</span> <span style="color:#006080;">"eyeLeftTop"</span>: {</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:white;"><span id="lnum35" style="color:#606060;"> 35:</span> <span style="color:#006080;">"x"</span>: 506.7,</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:#f4f4f4;"><span id="lnum36" style="color:#606060;"> 36:</span> <span style="color:#006080;">"y"</span>: 196.6</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:white;"><span id="lnum37" style="color:#606060;"> 37:</span> },</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:#f4f4f4;"><span id="lnum38" style="color:#606060;"> 38:</span> <span style="color:#006080;">"eyeLeftBottom"</span>: {</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:white;"><span id="lnum39" style="color:#606060;"> 39:</span> <span style="color:#006080;">"x"</span>: 506.8,</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:#f4f4f4;"><span id="lnum40" style="color:#606060;"> 40:</span> <span style="color:#006080;">"y"</span>: 212.9</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:white;"><span id="lnum41" style="color:#606060;"> 41:</span> },</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:#f4f4f4;"><span id="lnum42" style="color:#606060;"> 42:</span> <span style="color:#006080;">"eyeLeftInner"</span>: {</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:white;"><span id="lnum43" style="color:#606060;"> 43:</span> <span style="color:#006080;">"x"</span>: 526.5,</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:#f4f4f4;"><span id="lnum44" style="color:#606060;"> 44:</span> <span style="color:#006080;">"y"</span>: 204.3</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:white;"><span id="lnum45" style="color:#606060;"> 45:</span> },</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:#f4f4f4;"><span id="lnum46" style="color:#606060;"> 46:</span> <span style="color:#006080;">"eyebrowRightInner"</span>: {</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:white;"><span id="lnum47" style="color:#606060;"> 47:</span> <span style="color:#006080;">"x"</span>: 583.7,</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:#f4f4f4;"><span id="lnum48" style="color:#606060;"> 48:</span> <span style="color:#006080;">"y"</span>: 167.6</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:white;"><span id="lnum49" style="color:#606060;"> 49:</span> },</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:#f4f4f4;"><span id="lnum50" style="color:#606060;"> 50:</span> <span style="color:#006080;">"eyebrowRightOuter"</span>: {</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:white;"><span id="lnum51" style="color:#606060;"> 51:</span> <span style="color:#006080;">"x"</span>: 635.8,</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:#f4f4f4;"><span id="lnum52" style="color:#606060;"> 52:</span> <span style="color:#006080;">"y"</span>: 141.4</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:white;"><span id="lnum53" style="color:#606060;"> 53:</span> },</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:#f4f4f4;"><span id="lnum54" style="color:#606060;"> 54:</span> <span style="color:#006080;">"eyeRightInner"</span>: {</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:white;"><span id="lnum55" style="color:#606060;"> 55:</span> <span style="color:#006080;">"x"</span>: 592,</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:#f4f4f4;"><span id="lnum56" style="color:#606060;"> 56:</span> <span style="color:#006080;">"y"</span>: 185</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:white;"><span id="lnum57" style="color:#606060;"> 57:</span> },</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:#f4f4f4;"><span id="lnum58" style="color:#606060;"> 58:</span> <span style="color:#006080;">"eyeRightTop"</span>: {</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:white;"><span id="lnum59" style="color:#606060;"> 59:</span> <span style="color:#006080;">"x"</span>: 607.3,</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:#f4f4f4;"><span id="lnum60" style="color:#606060;"> 60:</span> <span style="color:#006080;">"y"</span>: 170.1</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:white;"><span id="lnum61" style="color:#606060;"> 61:</span> },</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:#f4f4f4;"><span id="lnum62" style="color:#606060;"> 62:</span> <span style="color:#006080;">"eyeRightBottom"</span>: {</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:white;"><span id="lnum63" style="color:#606060;"> 63:</span> <span style="color:#006080;">"x"</span>: 612.2,</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:#f4f4f4;"><span id="lnum64" style="color:#606060;"> 64:</span> <span style="color:#006080;">"y"</span>: 183.4</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:white;"><span id="lnum65" style="color:#606060;"> 65:</span> },</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:#f4f4f4;"><span id="lnum66" style="color:#606060;"> 66:</span> <span style="color:#006080;">"eyeRightOuter"</span>: {</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:white;"><span id="lnum67" style="color:#606060;"> 67:</span> <span style="color:#006080;">"x"</span>: 626.6,</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:#f4f4f4;"><span id="lnum68" style="color:#606060;"> 68:</span> <span style="color:#006080;">"y"</span>: 171.7</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:white;"><span id="lnum69" style="color:#606060;"> 69:</span> },</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:#f4f4f4;"><span id="lnum70" style="color:#606060;"> 70:</span> <span style="color:#006080;">"noseRootLeft"</span>: {</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:white;"><span id="lnum71" style="color:#606060;"> 71:</span> <span style="color:#006080;">"x"</span>: 549.7,</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:#f4f4f4;"><span id="lnum72" style="color:#606060;"> 72:</span> <span style="color:#006080;">"y"</span>: 201</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:white;"><span id="lnum73" style="color:#606060;"> 73:</span> },</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:#f4f4f4;"><span id="lnum74" style="color:#606060;"> 74:</span> <span style="color:#006080;">"noseRootRight"</span>: {</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:white;"><span id="lnum75" style="color:#606060;"> 75:</span> <span style="color:#006080;">"x"</span>: 581.7,</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:#f4f4f4;"><span id="lnum76" style="color:#606060;"> 76:</span> <span style="color:#006080;">"y"</span>: 192.9</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:white;"><span id="lnum77" style="color:#606060;"> 77:</span> },</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:#f4f4f4;"><span id="lnum78" style="color:#606060;"> 78:</span> <span style="color:#006080;">"noseLeftAlarTop"</span>: {</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:white;"><span id="lnum79" style="color:#606060;"> 79:</span> <span style="color:#006080;">"x"</span>: 557.5,</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:#f4f4f4;"><span id="lnum80" style="color:#606060;"> 80:</span> <span style="color:#006080;">"y"</span>: 241.1</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:white;"><span id="lnum81" style="color:#606060;"> 81:</span> },</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:#f4f4f4;"><span id="lnum82" style="color:#606060;"> 82:</span> <span style="color:#006080;">"noseRightAlarTop"</span>: {</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:white;"><span id="lnum83" style="color:#606060;"> 83:</span> <span style="color:#006080;">"x"</span>: 603.7,</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:#f4f4f4;"><span id="lnum84" style="color:#606060;"> 84:</span> <span style="color:#006080;">"y"</span>: 228.5</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:white;"><span id="lnum85" style="color:#606060;"> 85:</span> },</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:#f4f4f4;"><span id="lnum86" style="color:#606060;"> 86:</span> <span style="color:#006080;">"noseLeftAlarOutTip"</span>: {</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:white;"><span id="lnum87" style="color:#606060;"> 87:</span> <span style="color:#006080;">"x"</span>: 549.4,</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:#f4f4f4;"><span id="lnum88" style="color:#606060;"> 88:</span> <span style="color:#006080;">"y"</span>: 261.8</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:white;"><span id="lnum89" style="color:#606060;"> 89:</span> },</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:#f4f4f4;"><span id="lnum90" style="color:#606060;"> 90:</span> <span style="color:#006080;">"noseRightAlarOutTip"</span>: {</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:white;"><span id="lnum91" style="color:#606060;"> 91:</span> <span style="color:#006080;">"x"</span>: 616.7,</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:#f4f4f4;"><span id="lnum92" style="color:#606060;"> 92:</span> <span style="color:#006080;">"y"</span>: 241.7</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:white;"><span id="lnum93" style="color:#606060;"> 93:</span> },</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:#f4f4f4;"><span id="lnum94" style="color:#606060;"> 94:</span> <span style="color:#006080;">"upperLipTop"</span>: {</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:white;"><span id="lnum95" style="color:#606060;"> 95:</span> <span style="color:#006080;">"x"</span>: 593.2,</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:#f4f4f4;"><span id="lnum96" style="color:#606060;"> 96:</span> <span style="color:#006080;">"y"</span>: 283.5</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:white;"><span id="lnum97" style="color:#606060;"> 97:</span> },</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:#f4f4f4;"><span id="lnum98" style="color:#606060;"> 98:</span> <span style="color:#006080;">"upperLipBottom"</span>: {</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:white;"><span id="lnum99" style="color:#606060;"> 99:</span> <span style="color:#006080;">"x"</span>: 594.1,</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:#f4f4f4;"><span id="lnum100" style="color:#606060;"> 100:</span> <span style="color:#006080;">"y"</span>: 291.6</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:white;"><span id="lnum101" style="color:#606060;"> 101:</span> },</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:#f4f4f4;"><span id="lnum102" style="color:#606060;"> 102:</span> <span style="color:#006080;">"underLipTop"</span>: {</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:white;"><span id="lnum103" style="color:#606060;"> 103:</span> <span style="color:#006080;">"x"</span>: 595.6,</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:#f4f4f4;"><span id="lnum104" style="color:#606060;"> 104:</span> <span style="color:#006080;">"y"</span>: 307</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:white;"><span id="lnum105" style="color:#606060;"> 105:</span> },</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:#f4f4f4;"><span id="lnum106" style="color:#606060;"> 106:</span> <span style="color:#006080;">"underLipBottom"</span>: {</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:white;"><span id="lnum107" style="color:#606060;"> 107:</span> <span style="color:#006080;">"x"</span>: 598,</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:#f4f4f4;"><span id="lnum108" style="color:#606060;"> 108:</span> <span style="color:#006080;">"y"</span>: 320.7</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:white;"><span id="lnum109" style="color:#606060;"> 109:</span> }</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:#f4f4f4;"><span id="lnum110" style="color:#606060;"> 110:</span> }</pre>
</div>
</div>
</p>
<p>In faceAttributes properties you should give the FaceAttributeType that you want to have such as following. In my application I created a class from which I return all of them in a list with a method called GetAll().</p>
<div id="codeSnippetWrapper" style="font-size:8pt;overflow:auto;cursor:text;border-top:silver 1px solid;font-family:'Courier New', courier, monospace;border-right:silver 1px solid;width:97.5%;border-bottom:silver 1px solid;padding-bottom:4px;direction:ltr;text-align:left;padding-top:4px;padding-left:4px;border-left:silver 1px solid;margin:20px 0px 10px;line-height:12pt;padding-right:4px;max-height:200px;background-color:#f4f4f4;">
<div id="codeSnippet" style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;line-height:12pt;padding-right:0px;background-color:#f4f4f4;">
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:white;"><span id="lnum1" style="color:#606060;"> 1:</span> FaceAttributeType.Age,</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:#f4f4f4;"><span id="lnum2" style="color:#606060;"> 2:</span> FaceAttributeType.Emotion,</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:white;"><span id="lnum3" style="color:#606060;"> 3:</span> FaceAttributeType.FacialHair,</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:#f4f4f4;"><span id="lnum4" style="color:#606060;"> 4:</span> FaceAttributeType.Gender,</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:white;"><span id="lnum5" style="color:#606060;"> 5:</span> FaceAttributeType.Glasses,</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:#f4f4f4;"><span id="lnum6" style="color:#606060;"> 6:</span> FaceAttributeType.HeadPose,</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:white;"><span id="lnum7" style="color:#606060;"> 7:</span> FaceAttributeType.Smile</pre>
</div>
</div>
<p>The result will look similar to this</p>
<div id="codeSnippetWrapper" style="font-size:8pt;overflow:auto;cursor:text;border-top:silver 1px solid;font-family:'Courier New', courier, monospace;border-right:silver 1px solid;width:97.5%;border-bottom:silver 1px solid;padding-bottom:4px;direction:ltr;text-align:left;padding-top:4px;padding-left:4px;border-left:silver 1px solid;margin:20px 0px 10px;line-height:12pt;padding-right:4px;max-height:200px;background-color:#f4f4f4;">
<div id="codeSnippet" style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;line-height:12pt;padding-right:0px;background-color:#f4f4f4;">
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:white;"><span id="lnum1" style="color:#606060;"> 1:</span> <span style="color:#006080;">"faceAttributes"</span>: {</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:#f4f4f4;"><span id="lnum2" style="color:#606060;"> 2:</span> <span style="color:#006080;">"age"</span>: 23.8,</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:white;"><span id="lnum3" style="color:#606060;"> 3:</span> <span style="color:#006080;">"gender"</span>: <span style="color:#006080;">"female"</span>,</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:#f4f4f4;"><span id="lnum4" style="color:#606060;"> 4:</span> <span style="color:#006080;">"headPose"</span>: {</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:white;"><span id="lnum5" style="color:#606060;"> 5:</span> <span style="color:#006080;">"roll"</span>: -16.9,</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:#f4f4f4;"><span id="lnum6" style="color:#606060;"> 6:</span> <span style="color:#006080;">"yaw"</span>: 21.3,</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:white;"><span id="lnum7" style="color:#606060;"> 7:</span> <span style="color:#006080;">"pitch"</span>: 0</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:#f4f4f4;"><span id="lnum8" style="color:#606060;"> 8:</span> },</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:white;"><span id="lnum9" style="color:#606060;"> 9:</span> <span style="color:#006080;">"smile"</span>: 0.826,</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:#f4f4f4;"><span id="lnum10" style="color:#606060;"> 10:</span> <span style="color:#006080;">"facialHair"</span>: {</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:white;"><span id="lnum11" style="color:#606060;"> 11:</span> <span style="color:#006080;">"moustache"</span>: 0,</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:#f4f4f4;"><span id="lnum12" style="color:#606060;"> 12:</span> <span style="color:#006080;">"beard"</span>: 0,</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:white;"><span id="lnum13" style="color:#606060;"> 13:</span> <span style="color:#006080;">"sideburns"</span>: 0</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:#f4f4f4;"><span id="lnum14" style="color:#606060;"> 14:</span> },</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:white;"><span id="lnum15" style="color:#606060;"> 15:</span> <span style="color:#006080;">"glasses"</span>: <span style="color:#006080;">"ReadingGlasses"</span>,</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:#f4f4f4;"><span id="lnum16" style="color:#606060;"> 16:</span> <span style="color:#006080;">"emotion"</span>: {</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:white;"><span id="lnum17" style="color:#606060;"> 17:</span> <span style="color:#006080;">"anger"</span>: 0.103,</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:#f4f4f4;"><span id="lnum18" style="color:#606060;"> 18:</span> <span style="color:#006080;">"contempt"</span>: 0.003,</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:white;"><span id="lnum19" style="color:#606060;"> 19:</span> <span style="color:#006080;">"disgust"</span>: 0.038,</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:#f4f4f4;"><span id="lnum20" style="color:#606060;"> 20:</span> <span style="color:#006080;">"fear"</span>: 0.003,</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:white;"><span id="lnum21" style="color:#606060;"> 21:</span> <span style="color:#006080;">"happiness"</span>: 0.826,</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:#f4f4f4;"><span id="lnum22" style="color:#606060;"> 22:</span> <span style="color:#006080;">"neutral"</span>: 0.006,</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:white;"><span id="lnum23" style="color:#606060;"> 23:</span> <span style="color:#006080;">"sadness"</span>: 0.001,</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:#f4f4f4;"><span id="lnum24" style="color:#606060;"> 24:</span> <span style="color:#006080;">"surprise"</span>: 0.02</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:white;"><span id="lnum25" style="color:#606060;"> 25:</span> }</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:#f4f4f4;"><span id="lnum26" style="color:#606060;"> 26:</span> }</pre>
</div>
</div>
<p>These are float values between 0 and 1 with 1 being maximum and 0 is being least. In my application I wrote a basic threshold method that can display if I am smiling, angry, happy, etc in UI based on these values. The final result looks like this - </p>
<p><a href="http://developers.de/cfs-file.ashx/__key/CommunityServer.Blogs.Components.WeblogFiles/indraneel/image_5F00_5496C5A9.png"><img title="image" style="border-top:0px;border-right:0px;background-image:none;border-bottom:0px;float:none;padding-top:0px;padding-left:0px;margin-left:auto;border-left:0px;display:block;padding-right:0px;margin-right:auto;" border="0" alt="image" src="http://developers.de/cfs-file.ashx/__key/CommunityServer.Blogs.Components.WeblogFiles/indraneel/image_5F00_thumb_5F00_496D3B5F.png" width="610" height="211" /></a>It failed to detect my age (Because when I tested it, I was using a warm light bulb for lighting. Tip: Lighting matters a lot in age detection from Face API. Use cold lights if you want to look younger <img class="wlEmoticon wlEmoticon-winkingsmile" style="border-top-style:none;border-left-style:none;border-bottom-style:none;border-right-style:none;" alt="Winking smile" src="http://developers.de/cfs-file.ashx/__key/CommunityServer.Blogs.Components.WeblogFiles/indraneel/wlEmoticon_2D00_winkingsmile_5F00_10565E5D.png" />). But apart from that the other information was quite correct. I was indeed smiling, my face was happy, I wasn’t wearing glasses and have some beard. <img class="wlEmoticon wlEmoticon-winkingsmile" style="border-top-style:none;border-left-style:none;border-bottom-style:none;border-right-style:none;" alt="Winking smile" src="http://developers.de/cfs-file.ashx/__key/CommunityServer.Blogs.Components.WeblogFiles/indraneel/wlEmoticon_2D00_winkingsmile_5F00_10565E5D.png" /></p>
<p>At the first look, Face API looks really interesting. You can do a lot with other endpoints of API such as  Verification, Identification etc. I would try to cover these other functions in next posts.</p>
<p>Till then. </p><div style="clear:both;"></div><img src="http://developers.de/aggbug.aspx?PostID=1806240" width="1" height="1">ipolehttp://developers.de/members/ipole/default.aspxFunction overloading in TypeScript/blogs/indraneel/archive/2017/02/15/function-overloading-in-typescript.aspx2017-02-15T13:37:29Z2017-02-15T13:37:29Z<p> </p> <p>I come from C# development background, and thus things like method overloading comes to my mind naturally when tackling a certain type of problem. However, when coding in languages like JavaScript, this becomes a problem.  </p> <p>As TypeScript compiles into JavaScript, this becomes a problem of TypeScript as well. One can eventually achieve function overloading in TypeScript but it is quite a work and frankly a bit awkward.</p> <p>However if you absolutely have to do Function overloading in typescript, here is how to do it. Lets say you have function called testFunction and you want to overload it n times. Then you have to define this function n+1 times. Here is the code snippet of function testFunction with two overloads.</p> <div id="codeSnippetWrapper" style="font-size:8pt;overflow:auto;cursor:text;border-top:silver 1px solid;font-family:'Courier New', courier, monospace;border-right:silver 1px solid;width:97.5%;border-bottom:silver 1px solid;padding-bottom:4px;direction:ltr;text-align:left;padding-top:4px;padding-left:4px;border-left:silver 1px solid;margin:20px 0px 10px;line-height:12pt;padding-right:4px;max-height:200px;background-color:#f4f4f4;"> <div id="codeSnippet" style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;line-height:12pt;padding-right:0px;background-color:#f4f4f4;"> <pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:white;"><span id="lnum1" style="color:#606060;"> 1:</span>  </pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:#f4f4f4;"><span id="lnum2" style="color:#606060;"> 2:</span> testFunction(param1: <span style="color:#0000ff;">string</span> ,param2:<span style="color:#0000ff;">string</span>):<span style="color:#0000ff;">void</span>;</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:white;"><span id="lnum3" style="color:#606060;"> 3:</span> testFunction(param1:<span style="color:#0000ff;">string</span>,param2:number):<span style="color:#0000ff;">void</span>;</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:#f4f4f4;"><span id="lnum4" style="color:#606060;"> 4:</span>  </pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:white;"><span id="lnum5" style="color:#606060;"> 5:</span> testFunction(param1:<span style="color:#0000ff;">string</span>,param2:any):<span style="color:#0000ff;">void</span>{</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:#f4f4f4;"><span id="lnum6" style="color:#606060;"> 6:</span> <span style="color:#0000ff;">if</span>(<span style="color:#0000ff;">typeof</span> param2==<span style="color:#006080;">"string"</span>){</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:white;"><span id="lnum7" style="color:#606060;"> 7:</span> <span style="color:#008000;">//Do what you want to do in first function</span></pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:#f4f4f4;"><span id="lnum8" style="color:#606060;"> 8:</span> }</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:white;"><span id="lnum9" style="color:#606060;"> 9:</span> <span style="color:#0000ff;">else</span> <span style="color:#0000ff;">if</span>(<span style="color:#0000ff;">typeof</span> param2==<span style="color:#006080;">"number"</span>){</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:#f4f4f4;"><span id="lnum10" style="color:#606060;"> 10:</span> <span style="color:#008000;">//Do what you want to do in second function</span></pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:white;"><span id="lnum11" style="color:#606060;"> 11:</span> }</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:#f4f4f4;"><span id="lnum12" style="color:#606060;"> 12:</span> }</pre>
</div>
</div>
<p> </p>
<p>So basically first you have to declare both the function and then write third function that checks which function is called based on the type of the parameter. </p>
<p>Now lets say you have to do it with one and two parameters respectively. That is also possible - </p>
<div id="codeSnippetWrapper" style="font-size:8pt;overflow:auto;cursor:text;border-top:silver 1px solid;font-family:'Courier New', courier, monospace;border-right:silver 1px solid;width:97.5%;border-bottom:silver 1px solid;padding-bottom:4px;direction:ltr;text-align:left;padding-top:4px;padding-left:4px;border-left:silver 1px solid;margin:20px 0px 10px;line-height:12pt;padding-right:4px;max-height:200px;background-color:#f4f4f4;">
<div id="codeSnippet" style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;line-height:12pt;padding-right:0px;background-color:#f4f4f4;">
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:white;"><span id="lnum1" style="color:#606060;"> 1:</span> testFunction(param1:number):<span style="color:#0000ff;">void</span>;</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:#f4f4f4;"><span id="lnum2" style="color:#606060;"> 2:</span> testFunction(param1:<span style="color:#0000ff;">string</span>,param2:<span style="color:#0000ff;">string</span>):<span style="color:#0000ff;">void</span>;</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:white;"><span id="lnum3" style="color:#606060;"> 3:</span>  </pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:#f4f4f4;"><span id="lnum4" style="color:#606060;"> 4:</span> testFunction(param1:any,param2?:<span style="color:#0000ff;">string</span>):<span style="color:#0000ff;">void</span>{</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:white;"><span id="lnum5" style="color:#606060;"> 5:</span> <span style="color:#0000ff;">if</span>(<span style="color:#0000ff;">typeof</span> param1 ==<span style="color:#006080;">"number"</span>){</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:#f4f4f4;"><span id="lnum6" style="color:#606060;"> 6:</span> <span style="color:#008000;">//Do what you want to do in first function</span></pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:white;"><span id="lnum7" style="color:#606060;"> 7:</span> }</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:#f4f4f4;"><span id="lnum8" style="color:#606060;"> 8:</span> <span style="color:#0000ff;">else</span> <span style="color:#0000ff;">if</span>(param2&&<span style="color:#0000ff;">typeof</span> param2 ==<span style="color:#006080;">"string"</span>){</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:white;"><span id="lnum9" style="color:#606060;"> 9:</span> <span style="color:#008000;">//Do what you want to do in second function</span></pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:#f4f4f4;"><span id="lnum10" style="color:#606060;"> 10:</span> }</pre>
</div>
</div><div style="clear:both;"></div><img src="http://developers.de/aggbug.aspx?PostID=1805979" width="1" height="1">ipolehttp://developers.de/members/ipole/default.aspxHandling child event in parent component with EventEmitter : Angular 2 TypeScript/blogs/indraneel/archive/2016/11/16/handling-child-event-in-parent-component-with-eventemitter-angular-2-typescript.aspx2016-11-16T11:12:11Z2016-11-16T11:12:11Z<p> </p> <p>A lot of times you might stuck in a situation when you have tell the parent that something has happened in the children and if you are new to Angular 2 (Or coming from Angular 1 background) you might be scratching your head on how to do this. This has not been talked about in the QuickStart guide of the Angular 2 tutorials. And if you do not want to spend significant time going through the documentation to figure this out yourself, this is the correct place to catch up.</p> <p>Actually Angular 2 handles this quite amazingly. Way better than Angular 1 for sure. Here is what I am going to do to show you how it is achieved - </p> <p>1. Create A parent component with some template</p> <p>2. Child component which is used in the parent component template</p> <p>3. EventEmitter object in child component that emits some value to parent when a certain event is raised</p> <p>So let’s begin -</p> <p>First, lets create parent component. Here I have created a sample component - </p> <div id="codeSnippetWrapper" style="font-size:8pt;overflow:auto;cursor:text;border-top:silver 1px solid;height:242px;font-family:'Courier New', courier, monospace;border-right:silver 1px solid;width:89.39%;border-bottom:silver 1px solid;padding-bottom:4px;direction:ltr;text-align:left;padding-top:4px;padding-left:4px;border-left:silver 1px solid;margin:20px 0px 10px;line-height:12pt;padding-right:4px;max-height:200px;background-color:#f4f4f4;"> <div id="codeSnippet" style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;height:646px;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;line-height:12pt;padding-right:0px;background-color:#f4f4f4;"> <pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:white;"><span id="lnum1" style="color:#606060;"> 1:</span> import { Component, OnInit } from <span style="color:#006080;">'@angular/core'</span>;</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:#f4f4f4;"><span id="lnum2" style="color:#606060;"> 2:</span> import { TranslationService } from <span style="color:#006080;">'./service/translation.service'</span>;</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:white;"><span id="lnum3" style="color:#606060;"> 3:</span> import { TestService } from <span style="color:#006080;">'./service/test.service'</span>;</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:#f4f4f4;"><span id="lnum4" style="color:#606060;"> 4:</span>  </pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:white;"><span id="lnum5" style="color:#606060;"> 5:</span> @Component({</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:#f4f4f4;"><span id="lnum6" style="color:#606060;"> 6:</span> moduleId: module.id,</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:white;"><span id="lnum7" style="color:#606060;"> 7:</span> selector: <span style="color:#006080;">'test2'</span>,</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:#f4f4f4;"><span id="lnum8" style="color:#606060;"> 8:</span> templateUrl: <span style="color:#006080;">'./test2.html'</span>,</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;height:25px;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:white;"><span id="lnum9" style="color:#606060;"> 9:</span> providers: [TestService]</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:#f4f4f4;"><span id="lnum10" style="color:#606060;"> 10:</span> })</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:white;"><span id="lnum11" style="color:#606060;"> 11:</span>  </pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:#f4f4f4;"><span id="lnum12" style="color:#606060;"> 12:</span> export <span style="color:#0000ff;">class</span> Test2 implements OnInit {</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:white;"><span id="lnum13" style="color:#606060;"> 13:</span>  </pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:#f4f4f4;"><span id="lnum14" style="color:#606060;"> 14:</span> constructor(<span style="color:#0000ff;">private</span> testService: TestService) {</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:white;"><span id="lnum15" style="color:#606060;"> 15:</span> }</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:#f4f4f4;"><span id="lnum16" style="color:#606060;"> 16:</span>  </pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:white;"><span id="lnum17" style="color:#606060;"> 17:</span> ngOnInit(): <span style="color:#0000ff;">void</span> {</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:#f4f4f4;"><span id="lnum18" style="color:#606060;"> 18:</span> }</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:white;"><span id="lnum19" style="color:#606060;"> 19:</span>  </pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:#f4f4f4;"><span id="lnum20" style="color:#606060;"> 20:</span> addNewEntry(<span style="color:#0000ff;">event</span>) {</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:white;"><span id="lnum21" style="color:#606060;"> 21:</span> console.log(<span style="color:#0000ff;">event</span>);</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:#f4f4f4;"><span id="lnum22" style="color:#606060;"> 22:</span> }</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:white;"><span id="lnum23" style="color:#606060;"> 23:</span>  </pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:#f4f4f4;"><span id="lnum24" style="color:#606060;"> 24:</span> }</pre>
</div>
</div>
<p> </p>
<p>For now forget about service provider, that is not in the scope of this article. Let us look at addNewEntry function. It simply takes an event as input. Let us now dive in the Html template of this component.</p>
<div id="codeSnippetWrapper" style="font-size:8pt;overflow:auto;cursor:text;border-top:silver 1px solid;font-family:'Courier New', courier, monospace;border-right:silver 1px solid;width:97.5%;border-bottom:silver 1px solid;padding-bottom:4px;direction:ltr;text-align:left;padding-top:4px;padding-left:4px;border-left:silver 1px solid;margin:20px 0px 10px;line-height:12pt;padding-right:4px;max-height:200px;background-color:#f4f4f4;">
<div id="codeSnippet" style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;line-height:12pt;padding-right:0px;background-color:#f4f4f4;">
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:white;"><span id="lnum1" style="color:#606060;"> 1:</span> <span style="color:#0000ff;"><</span><span style="color:#800000;">add-object</span> (<span style="color:#ff0000;">onNewEntryAdded</span>)<span style="color:#0000ff;">="addNewEntry($event)"</span><span style="color:#0000ff;">></</span><span style="color:#800000;">add-object</span><span style="color:#0000ff;">></span></pre>
</div>
</div>
<p>So we just have one line here with add-object attribute. add-object is our child component. Notice that we have added an event to this attribute called onNewEntryAdded, and this is handled in our addNewEntry function where we pass the event. Now let us go in the child component to see how we create and raise this event there.</p>
<p>This is our addObject html class - </p>
<div id="codeSnippetWrapper" style="font-size:8pt;overflow:auto;cursor:text;border-top:silver 1px solid;font-family:'Courier New', courier, monospace;border-right:silver 1px solid;width:97.5%;border-bottom:silver 1px solid;padding-bottom:4px;direction:ltr;text-align:left;padding-top:4px;padding-left:4px;border-left:silver 1px solid;margin:20px 0px 10px;line-height:12pt;padding-right:4px;max-height:200px;background-color:#f4f4f4;">
<div id="codeSnippet" style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;line-height:12pt;padding-right:0px;background-color:#f4f4f4;">
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:white;"><span id="lnum1" style="color:#606060;"> 1:</span> <span style="color:#0000ff;"><</span><span style="color:#800000;">div</span> <span style="color:#ff0000;">class</span><span style="color:#0000ff;">="form-group"</span><span style="color:#0000ff;">></span></pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:#f4f4f4;"><span id="lnum2" style="color:#606060;"> 2:</span> <span style="color:#0000ff;"><</span><span style="color:#800000;">div</span> <span style="color:#ff0000;">class</span><span style="color:#0000ff;">="row"</span><span style="color:#0000ff;">></span></pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:white;"><span id="lnum3" style="color:#606060;"> 3:</span> <span style="color:#0000ff;"><</span><span style="color:#800000;">div</span> <span style="color:#ff0000;">class</span><span style="color:#0000ff;">="col-sm-12"</span><span style="color:#0000ff;">></span></pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:#f4f4f4;"><span id="lnum4" style="color:#606060;"> 4:</span> <span style="color:#0000ff;"><</span><span style="color:#800000;">button</span> <span style="color:#ff0000;">type</span><span style="color:#0000ff;">="button"</span> <span style="color:#ff0000;">class</span><span style="color:#0000ff;">="btn btn-default"</span> (<span style="color:#ff0000;">click</span>)<span style="color:#0000ff;">="addNewEntry()"</span><span style="color:#0000ff;">></span>Add new entry<span style="color:#0000ff;"></</span><span style="color:#800000;">button</span><span style="color:#0000ff;">></span></pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:white;"><span id="lnum5" style="color:#606060;"> 5:</span> <span style="color:#0000ff;"></</span><span style="color:#800000;">div</span><span style="color:#0000ff;">></span></pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:#f4f4f4;"><span id="lnum6" style="color:#606060;"> 6:</span> <span style="color:#0000ff;"></</span><span style="color:#800000;">div</span><span style="color:#0000ff;">></span></pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:white;"><span id="lnum7" style="color:#606060;"> 7:</span> <span style="color:#0000ff;"></</span><span style="color:#800000;">div</span><span style="color:#0000ff;">></span></pre>
</div>
</div>
<p>As you can see we have a button  which is handled in addNewEntry method in the component when clicked. So far, so simple. Here is our child component - </p>
<div id="codeSnippetWrapper" style="font-size:8pt;overflow:auto;cursor:text;border-top:silver 1px solid;font-family:'Courier New', courier, monospace;border-right:silver 1px solid;width:97.5%;border-bottom:silver 1px solid;padding-bottom:4px;direction:ltr;text-align:left;padding-top:4px;padding-left:4px;border-left:silver 1px solid;margin:20px 0px 10px;line-height:12pt;padding-right:4px;max-height:200px;background-color:#f4f4f4;">
<div id="codeSnippet" style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;line-height:12pt;padding-right:0px;background-color:#f4f4f4;">
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:white;"><span id="lnum1" style="color:#606060;"> 1:</span> import { Component, OnInit, Output, Input, EventEmitter } from <span style="color:#006080;">'@angular/core'</span>;</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:#f4f4f4;"><span id="lnum2" style="color:#606060;"> 2:</span>  </pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:white;"><span id="lnum3" style="color:#606060;"> 3:</span> @Component({</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:#f4f4f4;"><span id="lnum4" style="color:#606060;"> 4:</span> moduleId: module.id,</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:white;"><span id="lnum5" style="color:#606060;"> 5:</span> selector: <span style="color:#006080;">'add-object'</span>,</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:#f4f4f4;"><span id="lnum6" style="color:#606060;"> 6:</span> templateUrl: <span style="color:#006080;">'./add-object.html'</span>,</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:white;"><span id="lnum7" style="color:#606060;"> 7:</span> outputs:[<span style="color:#006080;">'onNewEntryAdded'</span>]</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:#f4f4f4;"><span id="lnum8" style="color:#606060;"> 8:</span> })</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:white;"><span id="lnum9" style="color:#606060;"> 9:</span>  </pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:#f4f4f4;"><span id="lnum10" style="color:#606060;"> 10:</span> export <span style="color:#0000ff;">class</span> AddObject implements OnInit {</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:white;"><span id="lnum11" style="color:#606060;"> 11:</span>  </pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:#f4f4f4;"><span id="lnum12" style="color:#606060;"> 12:</span> <span style="color:#008000;">//@Input()</span></pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:white;"><span id="lnum13" style="color:#606060;"> 13:</span> <span style="color:#0000ff;">public</span> newObject: <span style="color:#0000ff;">string</span>;</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:#f4f4f4;"><span id="lnum14" style="color:#606060;"> 14:</span>  </pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:white;"><span id="lnum15" style="color:#606060;"> 15:</span> <span style="color:#008000;">//@Output()</span></pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:#f4f4f4;"><span id="lnum16" style="color:#606060;"> 16:</span> <span style="color:#0000ff;">public</span> onNewEntryAdded = <span style="color:#0000ff;">new</span> EventEmitter();</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:white;"><span id="lnum17" style="color:#606060;"> 17:</span>  </pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:#f4f4f4;"><span id="lnum18" style="color:#606060;"> 18:</span> ngOnInit(): <span style="color:#0000ff;">void</span> {</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:white;"><span id="lnum19" style="color:#606060;"> 19:</span> <span style="color:#0000ff;">this</span>.newObject = <span style="color:#006080;">"Test"</span>;</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:#f4f4f4;"><span id="lnum20" style="color:#606060;"> 20:</span> }</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:white;"><span id="lnum21" style="color:#606060;"> 21:</span>  </pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:#f4f4f4;"><span id="lnum22" style="color:#606060;"> 22:</span> addNewEntry(): <span style="color:#0000ff;">void</span> {</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:white;"><span id="lnum23" style="color:#606060;"> 23:</span> <span style="color:#0000ff;">this</span>.onNewEntryAdded.emit({</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:#f4f4f4;"><span id="lnum24" style="color:#606060;"> 24:</span> value: <span style="color:#0000ff;">this</span>.newObject</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:white;"><span id="lnum25" style="color:#606060;"> 25:</span> })</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:#f4f4f4;"><span id="lnum26" style="color:#606060;"> 26:</span> }</pre>
<pre style="border-top-style:none;font-size:8pt;overflow:visible;border-left-style:none;font-family:'Courier New', courier, monospace;width:100%;border-bottom-style:none;color:black;padding-bottom:0px;direction:ltr;text-align:left;padding-top:0px;border-right-style:none;padding-left:0px;margin:0em;line-height:12pt;padding-right:0px;background-color:white;"><span id="lnum27" style="color:#606060;"> 27:</span> }</pre>
</div>
</div>
<p>
<br /></p>
<p>The important things needed to be imported from core for this are – Output and EventEmitter</p>
<p>As you can see  we have a string object and an EventEmitter object called onNewEntryAdded. If you see up this is the same event that we have handled in parent component. This can either be decorated with @Output() decorator (Which I have commented out in this snippet) OR with outputs property in @Component decorator (Which I have used) But remember not both!</p>
<p>That’s basically all. When the button is clicked, in button event handler, you simply call emit function of our EventEmitter and set our string object to value. This value can be read in parent with event.value in the eventhandler of onNewEntryAdded event.</p>
<p>Tada! And you are ready to handle children event in parent components. Quite simple!</p><div style="clear:both;"></div><img src="http://developers.de/aggbug.aspx?PostID=1802486" width="1" height="1">ipolehttp://developers.de/members/ipole/default.aspxUnity and Visual Studio Team Foundation Server–Why not all files from unity always checked in TFS?/blogs/indraneel/archive/2016/10/06/unity-and-visual-studio-team-foundation-server-why-not-all-files-from-unity-always-checked-in-tfs.aspx2016-10-06T12:40:00Z2016-10-06T12:40:00Z<p> </p>
<p>I am a traditional software developer who is dependent a lot on source code management systems like TFS and Git for project collaboration. However, lately my foray into Augmented Reality and HoloLens has taken me into the wild west of Unity and 3D game development and the source code management is not as simple here as one would like it to be.</p>
<p>Now Unity is awesome and gives you a lot of controls to play around with 3D models, prefabs and what not. But as soon as you start checking in your code into source control, you have a huge problem of missing files, missing scenes and what not. I have spent hours and hours just trying to get the latest version of my Unity project from TFS and still missing vital files. So, here is the attempt to help someone out there who might still be facing the same issue in this same environment.</p>
<p>To start with, the very first thing is, it is not possible to check-in the actual solution file to the TFS, because every time unity builds it, there is new solution file. Actually, it is not needed to check in as well.</p>
<p>The second confusing road block is, if you are a traditional Visual Studio user, you are used to just right clicking on the solution or project and saying “get latest version” or “check-in”. However that is not how it happens with Unity bound projects. Because the project is recreated every time when you build it from unity, it is not source bound. So you have to go to Team Explorer and click on Pending changes to check in latest change. </p>
<p>However, once you check-in, more often than not, some or other files, scripts, assets are missing in the source control. And this can be real pain in the ass. This is because whenever you create an asset, prefab, or script in the Unity, it is not by default added to your project in Visual Studio and in turns Team Explorer. To fix this, you have to make sure that the file you add to the project in the Unity is manually added to the TFS. To do so, after adding the file in the Unity, go to the respective folder in the Source Control Explorer inside Team Explorer, right click on the window, and then click on “Add items to folder”. Select the item you added in unity, click on Finish. </p>
<p><a href="http://developers.de/cfs-file.ashx/__key/CommunityServer.Blogs.Components.WeblogFiles/indraneel/image_5F00_1250A8F6.png"><img height="189" width="244" src="http://developers.de/cfs-file.ashx/__key/CommunityServer.Blogs.Components.WeblogFiles/indraneel/image_5F00_thumb_5F00_0007E234.png" alt="image" border="0" style="border-top:0px;border-right:0px;background-image:none;border-bottom:0px;float:none;padding-top:0px;padding-left:0px;margin-left:auto;border-left:0px;display:block;padding-right:0px;margin-right:auto;" title="image" /></a></p>
<p>Then you will see this item in source control explorer. This is added to source control but not yet checked in. To check-in, right click on this item and select “check-in pending changes”. I know this is tiresome method to do so for every file you add through Unity, but that is how it is.</p>
<p>Now, another thing is this huge library folder which contains a large number of meta files and you don’t know what to do with them. Well, thankfully you don’t need to take care of them, as in Unity there is an option which takes care of meta files and source control integration.</p>
<p>Go to Unity –> Edit –> Project Settings –> Editor. In inspector, under version control, select the mode to be Visible Meta Files. Also while we are at it, set the Asset serialization to Force Text. TFS is better at integrating text files to source control than the binary files. </p>
<p align="center"><a href="http://developers.de/cfs-file.ashx/__key/CommunityServer.Blogs.Components.WeblogFiles/indraneel/image_5F00_5FECD576.png"><img height="228" width="244" src="http://developers.de/cfs-file.ashx/__key/CommunityServer.Blogs.Components.WeblogFiles/indraneel/image_5F00_thumb_5F00_2AE04646.png" alt="image" border="0" style="border-top:0px;border-right:0px;background-image:none;border-bottom:0px;padding-top:0px;padding-left:0px;border-left:0px;margin:0px;display:inline;padding-right:0px;" title="image" /></a></p>
<p><span style="text-decoration:line-through;">This still doesn’t insure that you absolutely won’t miss some binding in the unity when you get the latest version from the TFS (Can tell you from my own experience) However, this at least makes sure that all your files are on TFS.</span> So I found out why I was missing some bindings finally. And here is why - Making the mode Visible Meta Files is not enough when you are dealing with the TFS. This will only ensure that you can see these meta files in your folder. However, to make sure that all bindings and information about your assets is available across all the systems that you are working with, you need to check in these files into source control explorer. Now they are not automatically added to souce control solution of your project, and you have to manually add them to your solution on Source Control. To do so, do what we have already done for normal asstes files. Go to Source Control Explorer in the Visual Studio. Go to the specific folder, right clicj and click on add items to the folder. Select Meta files, add them, and then check them in. That's all. This is enough to make sure that your Unity 3d project is available completely on the Team Foundation Server.</p>
<p> </p>
<p>Hope it helps. <img src="http://developers.de/cfs-file.ashx/__key/CommunityServer.Blogs.Components.WeblogFiles/indraneel/wlEmoticon_2D00_smile_5F00_38B28C41.png" alt="Smile" style="border-top-style:none;border-left-style:none;border-bottom-style:none;border-right-style:none;" class="wlEmoticon wlEmoticon-smile" /></p><div style="clear:both;"></div><img src="http://developers.de/aggbug.aspx?PostID=1800052" width="1" height="1">ipolehttp://developers.de/members/ipole/default.aspxIndustry 4.0 in Practice–Data Visualization meetup summary/blogs/indraneel/archive/2016/09/26/industry-4-0-in-practice-data-visualization-meetup-summary.aspx2016-09-26T20:12:00Z2016-09-26T20:12:00Z<p> </p>
<p>So last week, I got an opportunity to talk about Industry 4.0 and the role of data analytics in it at Data visualization Rhein Main meetup. (Very cool meetup, people living around Frankfurt – go visit if you are into data). And I thought I should update the summary of my talk here.</p>
<p>The talk started with what industry 4.0 is, and why data scientists should pay attention to it. A lot has been talked about the connecting and sensors side of Industry 4.0 but the data part of it is still to an large extent ignored. And this is what should be probed more. </p>
<p><a href="http://developers.de/cfs-file.ashx/__key/CommunityServer.Blogs.Components.WeblogFiles/indraneel/Industry40Talk_5F00_5B4A9A41.png"><img height="270" width="364" src="http://developers.de/cfs-file.ashx/__key/CommunityServer.Blogs.Components.WeblogFiles/indraneel/Industry40Talk_5F00_thumb_5F00_35E0A6D3.png" alt="Industry40Talk" border="0" style="border-top:0px;border-right:0px;background-image:none;border-bottom:0px;float:none;padding-top:0px;padding-left:0px;margin-left:auto;border-left:0px;display:block;padding-right:0px;margin-right:auto;" title="Industry40Talk" /></a></p>
<p>Heavy industries for a long time have been cut away from the cutting edge data analytics tools and Industry 4.0 is their chance to make use of data analytics and data visualization for increasing efficiency as well as making sure they stay ahead on the industrial revolution.</p>
<p>I talked about how Microsoft Azure is playing a vital role in achieving this step. Services like Microsoft Service Bus, Event Hubs, IoT Hub, and Azure stream analytics can streamline large chunk of data in appropriate data channels, and tools like Power BI can be used to achieve the Data visualization with great efficiency and ease.</p>
<p><a href="http://developers.de/cfs-file.ashx/__key/CommunityServer.Blogs.Components.WeblogFiles/indraneel/Cs0QRAFXYAAGrNK_5F00_5118FFD4.jpg"><img height="336" width="253" src="http://developers.de/cfs-file.ashx/__key/CommunityServer.Blogs.Components.WeblogFiles/indraneel/Cs0QRAFXYAAGrNK_5F00_thumb_5F00_20F1B511.jpg" alt="Cs0QRAFXYAAGrNK" border="0" style="border-top:0px;border-right:0px;background-image:none;border-bottom:0px;float:none;padding-top:0px;padding-left:0px;margin-left:auto;border-left:0px;display:block;padding-right:0px;margin-right:auto;" title="Cs0QRAFXYAAGrNK" /></a></p>
<p>I told a story of fictitious person Max Mustermann who owns an SME that deals with Inventory management and Logistics. Further I showed the live presentation of how by using a simple Raspberry Pi, his machines can be connected to cloud and the data from those machines can be used for data analytics to achieve complex decisions like Predictive Analysis and Predictive Mentainance.</p>
<p>The second part of talk was focused on Data Visualization with Augmented and Virtual Reality. I presented a sample of Data visualization in graph and charts format with HoloLens. Devices like HoloLens can achieve greater interaction with data as well as better understanding of visualized data.</p>
<p>You can find the presentation of my talk <a href="http://www.slideshare.net/poleindraneel/industy-40-in-practice">here</a>. <span style="text-decoration:line-through;">The video will also be up soon</span>. The video is uploaded now on YouTube by TEDx Rhein Main team. Huge thanks to them. You can see the video of the talk <a target="_blank" href="https://www.youtube.com/watch?v=RzCUk_TRfT4">here</a>. <img src="http://developers.de/cfs-file.ashx/__key/CommunityServer.Blogs.Components.WeblogFiles/indraneel/wlEmoticon_2D00_smile_5F00_5CB14DC4.png" alt="Smile" style="border-top-style:none;border-left-style:none;border-bottom-style:none;border-right-style:none;" class="wlEmoticon wlEmoticon-smile" /></p><div style="clear:both;"></div><img src="http://developers.de/aggbug.aspx?PostID=1799301" width="1" height="1">ipolehttp://developers.de/members/ipole/default.aspxGuide to create orientation awareness in Sencha Touch Apache Cordova App – Part 1/blogs/indraneel/archive/2016/08/18/guide-to-create-orientation-awareness-in-sencha-touch-apache-cordova-app-part-1.aspx2016-08-18T12:47:04Z2016-08-18T12:47:04Z<p> </p> <p>I have been writing about Sencha Touch and Cordova for sometime now. In a sense it is documentation of my learning of these two platforms in last couple of months which might help somebody out there, who is struggling with the same issues that I once had. I have never used Sencha Architect for my development environment. I am using Visual Studio as Text Editor as well as Packager for Cordova Applications with TACO extension.</p> <p>In my path of mastering Cordova and Sencha Touch, I have stumbled upon building orientation aware applications using these frameworks, and this is the part 1 of multi-part tutorial about how to create orientation aware cross platform application using these two frameworks.</p> <p>For any orientation aware application there are two things that the developer should take care of - </p> <p>1. Device orientation at the start of the application.</p> <p>2. Orientation change events</p> <p>But first we need to look into the application architecture to decide how to incorporate orientation change in the application. As you know Sencha Touch framework works on MVC architecture with a slight twist of Stores and Profiles. If you are interested in Sencha Touch architecture and how profiles work in Sencha Touch, <a href="http://www.c-sharpcorner.com/UploadFile/8ea0e0/how-to-use-profiles-in-mvc-of-sencha-sencha-touchapache-co/">this post</a> might be useful for you. Right now our focus is not on Models, Controllers, and Stores but purely on Views of the application as the orientation will only affect the views of the application. In the context of Sencha Touch, profiles also play a crucial role while designing orientation awareness. A lot of times, your views are different for different profiles of the application. For the simplicity of tutorial, I am going to take 2 profiles - one tablet, and one phone, and build orientation awareness for both of them.</p> <p>Here are the steps that we are going to follow while building orientation aware application -</p> <p>1. Create a sample application with two profiles – Tablet and Mobile</p> <p>2. Install Orientation Plugin from Cordova plugin manager.</p> <p>3. Create views and controller</p> <p>4. Add views to viewport based on the orientation of the device at the start of the application</p> <p>5. Handle the orientation change event</p> <p>6. Take care of stylesheets.</p> <p>To start with I have created a sample Cordova application in Visual Studio 2015 named OrientationTutorial. I have added Sencha-Touch-Debug.js and Sencha-Touch.css files to my application’s root folder and loaded them in index.html. Pretty normal stuff, isn’t it? The tricky part is, unlike Sencha Architect Visual Studio doesn’t have desired visual builder for sencha touch that can let you build your views, controllers, models, stores, and profiles in different folders and build a nice app.js for you in the end. So we have to do it ourselves. </p> <p>In app.js, I create the application, while in view, profile, and controller folders, I create respective views, profile, and controllers. I load all the files in index.html body, and pray to God that everything works fine. (Kidding, when Sencha Touch breaks, even God cannot fix it). The solution explorer looks something like this - </p> <p><a href="http://developers.de/cfs-file.ashx/__key/CommunityServer.Blogs.Components.WeblogFiles/indraneel/Screenshot_2D00_312_5F00_7281BFF0.png"><img title="Screenshot (312)" style="border-left-width:0px;border-right-width:0px;background-image:none;border-bottom-width:0px;float:none;padding-top:0px;padding-left:0px;margin-left:auto;display:block;padding-right:0px;border-top-width:0px;margin-right:auto;" border="0" alt="Screenshot (312)" src="http://developers.de/cfs-file.ashx/__key/CommunityServer.Blogs.Components.WeblogFiles/indraneel/Screenshot_2D00_312_5F00_thumb_5F00_194FD631.png" width="241" height="366" /></a></p> <p>Main view is basically just the toolbar on the top of the application. Home view has some example buttons which do nothing basically. (At least for now). So here is how we are going to do it. We create main view, which is a container with a toolbar on the top, and stick it to the application forever. Then based on the orientation of the application we change add the appropriate home view to the application.</p> <p>Go to config.xml, open plugin tab and add orientation plugin to your application. It should look something like this - </p> <p><a href="http://developers.de/cfs-file.ashx/__key/CommunityServer.Blogs.Components.WeblogFiles/indraneel/Screenshot_2D00_313_5F00_324BA676.png"><img title="Screenshot (313)" style="border-left-width:0px;border-right-width:0px;background-image:none;border-bottom-width:0px;float:none;padding-top:0px;padding-left:0px;margin-left:auto;display:block;padding-right:0px;border-top-width:0px;margin-right:auto;" border="0" alt="Screenshot (313)" src="http://developers.de/cfs-file.ashx/__key/CommunityServer.Blogs.Components.WeblogFiles/indraneel/Screenshot_2D00_313_5F00_thumb_5F00_401DEC71.png" width="435" height="196" /></a></p> <p>I have created the main view at the launch of the respective profile. That means the Main view is add when the phone/tablet profile is launched.</p> <p>All the default views such as homePhone and homeTablet are by default landscape views. We will create portrait view differently. For that, add the folder to the view folder called ‘portrait’. Inside this, create homePortrait view.</p> <p>Now, some important things. In our design architecture, we are going to create views based on their alias’. Sencha Touch creates alias’ based on xtypes in the background. Which means we cannot use same xtype for views which are essentially same but are designed differently for different profiles and orientation. For example, the home view has 5 buttons, which all work the same. But based on whether the view is rendered on tablet or phone and whether the orientation is portrait or landscape, the position of these buttons change. So for these different rendering we have different views. But we might need same xtype in the controller for these views, to tie these to some model or load data from store. To overcome this problem, we use two approaches. We tie different profile views to same widget by inserting profile name between them explicitly at the initialization of the profile. This way the views can share same xtype but are rendered based on their profile names. This works for profiles because on one device only one profile is activated. The code looks something like this - </p> <pre>Ext.ClassManager.setAlias('OrientationTutorialApp.view.tablet.Home', 'widget.homeView');
</pre>
<p>However, what about orientation? Orientation can change multiple times while using the application. And so we cannot even explicitly tie the orientation view to the alias. To fix this, we simply create the view by adding widget.portrait.* to the item id of the view whenever the portrait view is to be created, and for landscape view we just use normal alias. Also, inside controller we avoid using alias in configuration refs. That is because when you use alias in config refs and you have to use the views inside controllers, you have to invoke them twice with two different alias. This increases duplicate code. Instead one can either use IDs or Ref. IDs are advised against by Sencha Developer Team and rightfully so. IDs add a lot of confusion as well as if you don’t destroy the views with same ids, you are in a deep trouble with multiple hours of debugging one line of code. Ref however, in my opinion is the best approach to tackle this issue. The configuration inside controller should look something similar to - </p>
<p><a href="http://developers.de/cfs-file.ashx/__key/CommunityServer.Blogs.Components.WeblogFiles/indraneel/Screenshot_2D00_336_5F00_33ADC672.png"><img title="Screenshot (336)" style="border-top:0px;border-right:0px;background-image:none;border-bottom:0px;float:none;padding-top:0px;padding-left:0px;margin-left:auto;border-left:0px;display:block;padding-right:0px;margin-right:auto;" border="0" alt="Screenshot (336)" src="http://developers.de/cfs-file.ashx/__key/CommunityServer.Blogs.Components.WeblogFiles/indraneel/Screenshot_2D00_336_5F00_thumb_5F00_41800C6D.png" width="419" height="160" /></a></p>
<p>Notice the refs in the Config.</p>
<p>And here is how the landscape view of the home looks - </p>
<p><a href="http://developers.de/cfs-file.ashx/__key/CommunityServer.Blogs.Components.WeblogFiles/indraneel/Screenshot_2D00_332_5F00_72158CFB.png"><img title="Screenshot (332)" style="border-left-width:0px;border-right-width:0px;background-image:none;border-bottom-width:0px;float:none;padding-top:0px;padding-left:0px;margin-left:auto;display:block;padding-right:0px;border-top-width:0px;margin-right:auto;" border="0" alt="Screenshot (332)" src="http://developers.de/cfs-file.ashx/__key/CommunityServer.Blogs.Components.WeblogFiles/indraneel/Screenshot_2D00_332_5F00_thumb_5F00_66EC02B1.png" width="405" height="225" /></a></p>
<p>I have created five sample buttons and arranged them in a bit vbox container and then smaller hbox containers. The arrangement has been handled in the sencha view while positioning and sizes are configured in css.</p>
<p>When the application is launched, the showTab function is launched with the id of homeView. showTab function checks the current orientation of device, and accordingly adds prefix to id in order to create correct widget with alias. The code snippet is as following - </p>
<p><a href="http://developers.de/cfs-file.ashx/__key/CommunityServer.Blogs.Components.WeblogFiles/indraneel/Screenshot_2D00_337_5F00_36568223.png"><img title="Screenshot (337)" style="border-top:0px;border-right:0px;background-image:none;border-bottom:0px;float:none;padding-top:0px;padding-left:0px;margin-left:auto;border-left:0px;display:block;padding-right:0px;margin-right:auto;" border="0" alt="Screenshot (337)" src="http://developers.de/cfs-file.ashx/__key/CommunityServer.Blogs.Components.WeblogFiles/indraneel/Screenshot_2D00_337_5F00_thumb_5F00_3A60CFF5.png" width="389" height="243" /></a></p>
<p>Now without creating portrait view of home, if we just apply orientation change event, this happens - </p>
<p><a href="http://developers.de/cfs-file.ashx/__key/CommunityServer.Blogs.Components.WeblogFiles/indraneel/Screenshot_2D00_334_5F00_18E3A33C.png"><img title="Screenshot (334)" style="border-top:0px;border-right:0px;background-image:none;border-bottom:0px;float:none;padding-top:0px;padding-left:0px;margin-left:auto;border-left:0px;display:block;padding-right:0px;margin-right:auto;" border="0" alt="Screenshot (334)" src="http://developers.de/cfs-file.ashx/__key/CommunityServer.Blogs.Components.WeblogFiles/indraneel/Screenshot_2D00_334_5F00_thumb_5F00_5FCCC639.png" width="202" height="334" /></a></p>
<p>As you can see, the view is totally distorted, buttons cannot be seen, and Title bar cannot hold complete text. Some of this can be handled by CSS (Which I will cover in the next part of this tutorial), However, in order to give seamless experience to the end user, one needs to design a different view altogether. </p>
<p>So I created a portrait version of the home view. Notice that it has same id and same ref but NOT same xtype. This is very important. You cannot have two views with same xtype. It creates hell of a confusion inside framework, and more often than not, framework gives you wrong view for wrong orientation.</p>
<p><a href="http://developers.de/cfs-file.ashx/__key/CommunityServer.Blogs.Components.WeblogFiles/indraneel/Screenshot_2D00_339_5F00_2F3745AB.png"><img title="Screenshot (339)" style="border-top:0px;border-right:0px;background-image:none;border-bottom:0px;float:none;padding-top:0px;padding-left:0px;margin-left:auto;border-left:0px;display:block;padding-right:0px;margin-right:auto;" border="0" alt="Screenshot (339)" src="http://developers.de/cfs-file.ashx/__key/CommunityServer.Blogs.Components.WeblogFiles/indraneel/Screenshot_2D00_339_5F00_thumb_5F00_0F1C38EE.png" width="449" height="275" /></a>  </p>
<p>The view looks like this - </p>
<p><a href="http://developers.de/cfs-file.ashx/__key/CommunityServer.Blogs.Components.WeblogFiles/indraneel/Screenshot_2D00_335_5F00_54A33BEF.png"><img title="Screenshot (335)" style="border-top:0px;border-right:0px;background-image:none;border-bottom:0px;float:none;padding-top:0px;padding-left:0px;margin-left:auto;border-left:0px;display:block;padding-right:0px;margin-right:auto;" border="0" alt="Screenshot (335)" src="http://developers.de/cfs-file.ashx/__key/CommunityServer.Blogs.Components.WeblogFiles/indraneel/Screenshot_2D00_335_5F00_thumb_5F00_1B8C5EED.png" width="233" height="402" /></a></p>
<p>As you can see the view is still not perfect. Background is not exactly in the center, nor is it visible, as well as buttons need better alignment and title bar can do with smaller font to accommodate complete text. However, we will take care of that with CSS.</p>
<p>Now the only thing that remains is handling the orientation change event. For that, we add <em>orientationchange</em> event to viewport, and handle it in onOrientationChange function. Well, there is actually nothing much to handle, just get the active items id which in this case is homeView. destroy the landscape component, and add the portrait with the help of showTab function which I have already described above.</p>
<p>In Main controller, I added control to viewport inside config, and the function onOrientationChange is created in Main controller as given below -</p>
<p><a href="http://developers.de/cfs-file.ashx/__key/CommunityServer.Blogs.Components.WeblogFiles/indraneel/Screenshot_2D00_339_5F00_56055BEB.png"><img title="Screenshot (339)" style="border-top:0px;border-right:0px;background-image:none;border-bottom:0px;float:none;padding-top:0px;padding-left:0px;margin-left:auto;border-left:0px;display:block;padding-right:0px;margin-right:auto;" border="0" alt="Screenshot (339)" src="http://developers.de/cfs-file.ashx/__key/CommunityServer.Blogs.Components.WeblogFiles/indraneel/Screenshot_2D00_339_5F00_thumb_5F00_7CD3722B.png" width="474" height="167" /></a></p>
<p>That’s all. The basic orientation awareness is implemented. In the next part, I would talk about creating different classes for different orientation, and handling multiple views.</p><div style="clear:both;"></div><img src="http://developers.de/aggbug.aspx?PostID=1796646" width="1" height="1">ipolehttp://developers.de/members/ipole/default.aspx“background-size:cover” css property doesn’t work on Android Tablets in Portrait mode/blogs/indraneel/archive/2016/07/05/background-size-cover-css-property-doesn-t-work-on-android-tablets-in-portrait-mode.aspx2016-07-05T10:10:00Z2016-07-05T10:10:00Z<p> </p>
<p>Now, this is a very quirky issue that I faced recently while developing my Android application using Apache Cordova as cross platform application development environment. CSS is anyway too confusing at times, thanks to so many browser instances that a web developer (And with the great Cross Platform application development, also the mobile application developers) have to support.</p>
<p>My task was simple. Or so I thought. I had to assign a background image to the welcome page of my application. I set the background URL and then set the background-size to cover as I want this background to be full screen. Here is how my code looked - </p>
<p><a href="http://developers.de/cfs-file.ashx/__key/CommunityServer.Blogs.Components.WeblogFiles/indraneel/Screenshot_2D00_287_5F00_38ADC15F.png"><img height="153" width="372" src="http://developers.de/cfs-file.ashx/__key/CommunityServer.Blogs.Components.WeblogFiles/indraneel/Screenshot_2D00_287_5F00_thumb_5F00_4680075A.png" alt="Screenshot (287)" border="0" style="border-top:0px;border-right:0px;background-image:none;border-bottom:0px;float:none;padding-top:0px;padding-left:0px;margin-left:auto;border-left:0px;display:block;padding-right:0px;margin-right:auto;" title="Screenshot (287)" /></a></p>
<p>Works well on Ripple Browser emulation, several emulators, as well as Android phones. I tested it on Android tablet and everything seems fine in Landscape mode but as soon as I changed the orientation to Portrait, it didn’t work. Great. Now starts the long hours of debugging. Thankfully, this time I didn’t have to spend too much time on debugging as accidently I found out how to fix this issue. While playing around the code, I mistakenly deleted “fixed” from the property, and Voila! It worked. I don’t know how and why, but on this specific tablet that I am using for testing (Which has Android OS 4.1.1 BTW) If you set “background” property to fixed, it doesn’t work. </p>
<p>So if you want the fixed property on your background, well better to set it on the higher element (div that is holding this image for example) to make it work on all set of devices in all orientations.</p>
<p>I hope it helps somebody. <img src="http://developers.de/cfs-file.ashx/__key/CommunityServer.Blogs.Components.WeblogFiles/indraneel/wlEmoticon_2D00_smile_5F00_7877A7E4.png" alt="Smile" style="border-top-style:none;border-left-style:none;border-bottom-style:none;border-right-style:none;" class="wlEmoticon wlEmoticon-smile" /></p><div style="clear:both;"></div><img src="http://developers.de/aggbug.aspx?PostID=1793720" width="1" height="1">ipolehttp://developers.de/members/ipole/default.aspxReading version of your Cordova Application from Config.xml/blogs/indraneel/archive/2016/06/16/reading-version-of-your-cordova-application-from-config-xml.aspx2016-06-16T13:15:00Z2016-06-16T13:15:00Z<p> </p>
<p>The version of your Cordova application is always mentioned in config.xml file of the application. This is inside the Element “widget” with Attribute “version”.</p>
<p>One might need to read this version of application inside the application code itself for various reasons, and to do so you need to read this from config.xml file. </p>
<p><a href="http://developers.de/cfs-file.ashx/__key/CommunityServer.Blogs.Components.WeblogFiles/indraneel/image_5F00_727347A0.png"><img title="image" style="border-left-width:0px;border-right-width:0px;background-image:none;border-bottom-width:0px;float:none;padding-top:0px;padding-left:0px;margin-left:auto;display:block;padding-right:0px;border-top-width:0px;margin-right:auto;" border="0" alt="image" src="http://developers.de/cfs-file.ashx/__key/CommunityServer.Blogs.Components.WeblogFiles/indraneel/image_5F00_thumb_5F00_6B540B28.png" width="341" height="122" /></a></p>
<p>Now, to do so, one can either write their own function in native JavaScript to go through Elements of XML and their Attributes until and read the value of version attribute. This I will talk about in my next post.</p>
<p>One can however, also use an out of the box plugin that does this task for them. I really like the plugin system of Cordova and the ease with which it is integrated in Visual Studio Environment.</p>
<p>An open source plugin called <a href="https://github.com/Wizcorp/phonegap-plugin-wizUtils">wizUtils</a> is capable of providing general utility functions to access information from the native OS including reading the version of application. In this post, I am going to talk about how to use this plugin to read application version - </p>
<p>1. Double click on config.xml file in Visual Studio Solution Explorer. Go to plugins tab, click on custom, select git, add <a href="https://github.com/Wizcorp/phonegap-plugin-wizUtils">this</a> link in the address bar, and enter. The plugin will be added to your application.</p>
<p><a href="http://developers.de/cfs-file.ashx/__key/CommunityServer.Blogs.Components.WeblogFiles/indraneel/image_5F00_1D4BABB3.png"><img title="image" style="border-top:0px;border-right:0px;background-image:none;border-bottom:0px;float:none;padding-top:0px;padding-left:0px;margin-left:auto;border-left:0px;display:block;padding-right:0px;margin-right:auto;" border="0" alt="image" src="http://developers.de/cfs-file.ashx/__key/CommunityServer.Blogs.Components.WeblogFiles/indraneel/image_5F00_thumb_5F00_12222169.png" width="317" height="151" /></a></p>
<p>2. Go to your JavaScript file. As I am using ExtJS framework in my application, I am going to read this version inside app.js file of the application. Call wizUtils.getBundleVersion(successCallback) method of wizUtils class. Here successCallback is callback function that decides what to do with the version. In my case I am simply logging this function to the console to show.</p>
<p>Here is how the code for this looks - </p>
<p><a href="http://developers.de/cfs-file.ashx/__key/CommunityServer.Blogs.Components.WeblogFiles/indraneel/image_5F00_4419C1F3.png"><img title="image" style="border-top:0px;border-right:0px;background-image:none;border-bottom:0px;float:none;padding-top:0px;padding-left:0px;margin-left:auto;border-left:0px;display:block;padding-right:0px;margin-right:auto;" border="0" alt="image" src="http://developers.de/cfs-file.ashx/__key/CommunityServer.Blogs.Components.WeblogFiles/indraneel/image_5F00_thumb_5F00_0B02E4F1.png" width="342" height="111" /></a></p>
<p>Warning – If you are using Ripple Browser for testing your application, this plugin won’t work. This has to be tested on a physical device or Android Emulator.</p><div style="clear:both;"></div><img src="http://developers.de/aggbug.aspx?PostID=1792271" width="1" height="1">ipolehttp://developers.de/members/ipole/default.aspxHow to add icon to your Cordova App with Visual Studio Tools for Apache Cordova/blogs/indraneel/archive/2016/06/02/how-to-add-icon-to-your-cordova-app-with-visual-studio-tools-for-apache-cordova.aspx2016-06-02T14:45:36Z2016-06-02T14:45:36Z<p> </p> <p>Setting app icon is usually very straight forward task in application development, and thus should not require a dedicated blogpost for this. However, while using Apache Cordova in Visual Studio environment, it becomes slightly tricky.</p> <p>So, why is it tricky? That is because Visual Studio TACO (<strong>T</strong>ools for <strong>A</strong>pache <strong>CO</strong>rdova) shows the config.xml file differently than you usually see XML file. It shows all the important configurations such as plugins, version, name of the application etc. in a user friendly interface - </p> <p><a href="http://developers.de/cfs-file.ashx/__key/CommunityServer.Blogs.Components.WeblogFiles/indraneel/image_5F00_190E43EF.png"><img title="image" style="border-top:0px;border-right:0px;background-image:none;border-bottom:0px;float:none;padding-top:0px;padding-left:0px;margin-left:auto;border-left:0px;display:block;padding-right:0px;margin-right:auto;" border="0" alt="image" src="http://developers.de/cfs-file.ashx/__key/CommunityServer.Blogs.Components.WeblogFiles/indraneel/image_5F00_thumb_5F00_58D82A74.png" width="349" height="162" /></a></p> <p>However this doesn’t show where the icon should be set. To do so, you need to see the actual XML code and make changes there.</p> <p>First, add the icon image in your application’s res folder under the platform that you are using. for me it is Android. </p> <p><a href="http://developers.de/cfs-file.ashx/__key/CommunityServer.Blogs.Components.WeblogFiles/indraneel/image_5F00_1FC14D72.png"><img title="image" style="border-top:0px;border-right:0px;background-image:none;border-bottom:0px;float:none;padding-top:0px;padding-left:0px;margin-left:auto;border-left:0px;display:block;padding-right:0px;margin-right:auto;" border="0" alt="image" src="http://developers.de/cfs-file.ashx/__key/CommunityServer.Blogs.Components.WeblogFiles/indraneel/image_5F00_thumb_5F00_7FA640B4.png" width="244" height="222" /></a></p> <p>Once that is done, right click on config.xml and click on view code (Can also be done with F7) Now here, inside every platform attribute, you will have an icon attribute. Add your icon path as source here. You can optionally select density (For Android) or width and height (For iOS and Windows).  </p> <p><a href="http://developers.de/cfs-file.ashx/__key/CommunityServer.Blogs.Components.WeblogFiles/indraneel/image_5F00_468F63B2.png"><img title="image" style="border-top:0px;border-right:0px;background-image:none;border-bottom:0px;float:none;padding-top:0px;padding-left:0px;margin-left:auto;border-left:0px;display:block;padding-right:0px;margin-right:auto;" border="0" alt="image" src="http://developers.de/cfs-file.ashx/__key/CommunityServer.Blogs.Components.WeblogFiles/indraneel/image_5F00_thumb_5F00_7887043C.png" width="244" height="43" /></a></p> <p>And that’s all. The icon is set for the application.</p><div style="clear:both;"></div><img src="http://developers.de/aggbug.aspx?PostID=1790956" width="1" height="1">ipolehttp://developers.de/members/ipole/default.aspxCreating custom blob filter using AForge .NET in UWP Application/blogs/indraneel/archive/2016/05/24/creating-custom-blob-filter-using-aforge-net-in-uwp-application.aspx2016-05-24T13:08:30Z2016-05-24T13:08:30Z<p> </p> <p>As you might already know, AForge is a .NET library for Image Processing. A lot of people prefer using .NET wrapper for OpenCV known as EmguCV, and no doubt it has stronger image processing capabilities. However, being a wrapper, it has its own limitations and sometimes AForge proves to be a better choice than EmguCV, for example while trying to process an image in Universal Windows Application. I am not going to discuss the comparison between AForge and EmguCV, I am just going to talk about how to use AForge with custom filters for object detection.</p> <p>AForge comes with a lot of <em>out of the box</em> shape detection methods such as whether the blob is circle, triangle and so on. On the other hand it also has BlobsFiltering method that can detect object based on minimum width, minimum height, maximum width, and maximum height. But what if you have to detect a shape based on custom features. Such as ratio of height to width, or specific color, or anything else. In such case, custom filters come handy.</p> <p>AForge provides Filtering class called <a href="http://www.aforgenet.com/framework/docs/html/4a83d944-d776-ba2c-9847-3254fe3dbfdd.htm">BlobsFiltering</a>. While one can use this class directly to filter blobs using width and height of blob. However, you can pass a custom filter that inherits from <a href="http://www.aforgenet.com/framework/docs/html/4caa69aa-6c67-b2b7-cb4d-ab0beff3f6bc.htm">IBlobsFilter</a> interface. </p> <p>Before diving into the code, some background – I have used AForge not in usual .NET environment but the new .NET Core environment which is the environment for UWP applications. The library for .NET Core is available on <a href="https://github.com/cureos/aforge">GitHub</a>. Why is this important? Because it gives us the infinite opportunity to use AForge with not only usual Forms or backend applications, but also with Phones, IoT devices such as Raspberry Pi, and even HoloLens to not only detect and identify objects, but to use machine learning algorithms such as supervised perceptron learning to make these vast variety of devices “Intelligent”.</p> <p>Now, I have created a sample filter called BlobFilter that inherits from IBlobsFilter interface. Here is how it looks - </p> <p><a href="http://developers.de/cfs-file.ashx/__key/CommunityServer.Blogs.Components.WeblogFiles/indraneel/image_5F00_6A4F5ED7.png"><img title="image" style="border-top:0px;border-right:0px;background-image:none;border-bottom:0px;float:none;padding-top:0px;padding-left:0px;margin-left:auto;border-left:0px;display:block;padding-right:0px;margin-right:auto;" border="0" alt="image" src="http://developers.de/cfs-file.ashx/__key/CommunityServer.Blogs.Components.WeblogFiles/indraneel/image_5F00_thumb_5F00_4A34521A.png" width="244" height="103" /></a></p> <p>I am checking if the blob that is detected is triangle, circle, quadrilateral or convex polygon, and if it is, then I remove these from the image. If the check method returns true, it means the object should be removed from the image.</p> <p>Then I create a BlobsFiltering object with this filter. And then, I just apply the filter on the image. It gives me the image without the shapes that I mentioned. </p> <p><a href="http://developers.de/cfs-file.ashx/__key/CommunityServer.Blogs.Components.WeblogFiles/indraneel/image_5F00_3F0AC7D0.png"><img title="image" style="border-top:0px;border-right:0px;background-image:none;border-bottom:0px;float:none;padding-top:0px;padding-left:0px;margin-left:auto;border-left:0px;display:block;padding-right:0px;margin-right:auto;" border="0" alt="image" src="http://developers.de/cfs-file.ashx/__key/CommunityServer.Blogs.Components.WeblogFiles/indraneel/image_5F00_thumb_5F00_7102685A.png" width="244" height="57" /></a></p> <p>To show the example, here I uploaded the sample image from AForge website in my application - </p> <p><a href="http://developers.de/cfs-file.ashx/__key/CommunityServer.Blogs.Components.WeblogFiles/indraneel/image_5F00_09FE38A0.png"><img title="image" style="border-top:0px;border-right:0px;background-image:none;border-bottom:0px;float:none;padding-top:0px;padding-left:0px;margin-left:auto;border-left:0px;display:block;padding-right:0px;margin-right:auto;" border="0" alt="image" src="http://developers.de/cfs-file.ashx/__key/CommunityServer.Blogs.Components.WeblogFiles/indraneel/image_5F00_thumb_5F00_50E75B9D.png" width="244" height="193" /></a></p> <p>And when I click on Remove shapes button, I get the output - </p> <p><a href="http://developers.de/cfs-file.ashx/__key/CommunityServer.Blogs.Components.WeblogFiles/indraneel/image_5F00_17D07E9B.png"><img title="image" style="border-top:0px;border-right:0px;background-image:none;border-bottom:0px;float:none;padding-top:0px;padding-left:0px;margin-left:auto;border-left:0px;display:block;padding-right:0px;margin-right:auto;" border="0" alt="image" src="http://developers.de/cfs-file.ashx/__key/CommunityServer.Blogs.Components.WeblogFiles/indraneel/image_5F00_thumb_5F00_5EB9A198.png" width="244" height="155" /></a></p> <p>The two circle like objects are actually elliptical and thus are not removed from the image. </p> <p>Using machine learning functions, this custom filter can be made really advanced where it can remove more complex figures such as numbers, characters, or even real world objects like cars, chairs, etc.</p> <p>Next time I will talk about how we can use supervised learning algorithm in AForge to create the custom filters that can remove more complex shapes.</p> <p>Tip – If you are new to Image processing and confused about what does it mean by blob, well, a blob is any object that is detected by the algorithm inside the image.</p><div style="clear:both;"></div><img src="http://developers.de/aggbug.aspx?PostID=1789975" width="1" height="1">ipolehttp://developers.de/members/ipole/default.aspxIoT, Industry 4.0, and Hannover Messe 2016/blogs/indraneel/archive/2016/05/02/iot-industry-4-0-and-hannover-messe-2016.aspx2016-05-02T15:58:16Z2016-05-02T15:58:16Z<p> </p> <p>Trade fairs, typically known as messe in Germany are a great way to push the new technological innovations and present them in front of the world. So when <a>daenet</a> offered me the opportunity to attend world’s largest messe for automation industry Hannover Messe 2016, I literally grabbed the chance and hopped the bus for Hannover.</p> <p>This year, hannover messe was completely dedicated to industry 4.0 which is seen as the fourth industrial revolution. Industry 4.0 is the way to connect IoT with industry and take the automation to next level. </p> <p>IoT and cloud was underlying theme for the messe, which was quite evident from various IoT showcases on almost all the stand of big giants of software and automation industry including but not limited to Microsoft, Kuka, Siemens, T-Systems and many others. </p> <p><a href="http://developers.de/cfs-file.ashx/__key/CommunityServer.Blogs.Components.WeblogFiles/indraneel/IMG_2D00_20160427_2D00_WA0043_5F00_00DFFD1B.jpg"><img title="IMG-20160427-WA0043" style="border-top:0px;border-right:0px;background-image:none;border-bottom:0px;float:none;padding-top:0px;padding-left:0px;margin-left:auto;border-left:0px;display:block;padding-right:0px;margin-right:auto;" border="0" alt="IMG-20160427-WA0043" src="http://developers.de/cfs-file.ashx/__key/CommunityServer.Blogs.Components.WeblogFiles/indraneel/IMG_2D00_20160427_2D00_WA0043_5F00_thumb_5F00_0EB24316.jpg" width="353" height="266" /></a> </p> <p><strong>daenet</strong>, with collaboration of University of Applied Sciences Frankfurt and Microsoft, presented some cool use cases that included Drones, PLC machines, Weather stations, Microsoft Band and so on. The theme of daenet show case was <strong>Machine to Machine</strong> and <strong>Human to Machine</strong> interfaces that can change the game for SMEs, and OEMs in automation industry.</p> <p>I also got the chance to present our use cases in front of industry representatives from various organizations, which was an amazing experience in itself. And highlight of the event – I was lucky enough to meet Microsoft CEO, <strong>Mr. Satya Nadella</strong>. A very down to earth and friendly guy. </p> <p><a href="http://developers.de/cfs-file.ashx/__key/CommunityServer.Blogs.Components.WeblogFiles/indraneel/InstagramCapture_5F00_83e488fd_2D00_83d6_2D00_4305_2D00_b527_2D00_745ba0d107be_5F00_40A9E3A0.jpg"><img title="InstagramCapture_83e488fd-83d6-4305-b527-745ba0d107be" style="border-top:0px;border-right:0px;background-image:none;border-bottom:0px;float:none;padding-top:0px;padding-left:0px;margin-left:auto;border-left:0px;display:block;padding-right:0px;margin-right:auto;" border="0" alt="InstagramCapture_83e488fd-83d6-4305-b527-745ba0d107be" src="http://developers.de/cfs-file.ashx/__key/CommunityServer.Blogs.Components.WeblogFiles/indraneel/InstagramCapture_5F00_83e488fd_2D00_83d6_2D00_4305_2D00_b527_2D00_745ba0d107be_5F00_thumb_5F00_0793069E.jpg" width="291" height="291" /></a></p> <p>All in all, Hannover messe has underlined one thing, IoT and Industry 4.0 is here to stay. When used in the optimum way, industry 4.0 is capable of making SMEs in automation industry way more productive than they are today.</p> <p>Before, wrapping up this summary of messe experience, here is the <a>Microsoft blog</a> that has covered our show cases and quotes our lead architect <a href="http://developers.de/members/ddobric/default.aspx">Damir Dobric</a> on how our solutions can be used to help Mittelstand or SMEs to be in the front row of technological race.</p><div style="clear:both;"></div><img src="http://developers.de/aggbug.aspx?PostID=1786540" width="1" height="1">ipolehttp://developers.de/members/ipole/default.aspxHow to disable the auto update on Windows 10 IoT Core?/blogs/indraneel/archive/2016/04/22/how-to-disable-the-auto-update-on-windows-10-iot-core.aspx2016-04-22T12:52:21Z2016-04-22T12:52:21Z<p> </p> <p>Windows 10 IoT core has pushing update to its latest OS version once you download the OS version 10.0.10586.0. The update is 10.0.10586.63. However, the device never asks you if you want to download the updates and just re-flashes the card on its own. If your Pi is running in headless state over internet connection to do some mission critical stuff, this is a very crappy way to find out your pi has stopped working. However, you can stop the Pi from running the auto update. Here is a set of PowerShell commands that does this for you - </p> <p>First connect to your Pi through remote session - </p> <p>net start winrm </p> <p>//IP Address of PI</p> <p>Set-Item WSMan:\localhost\Client\TrustedHosts –Value $ipAddress</p> <p>Enter-PSSession -ComputerName $ipAddress -Credential $ipAddress\Administrator</p> <p>Now once you have established remote session with Pi, you can use these commands to check and disable auto updating</p> <p>sc.exe config wuauserv start=disabled </p> <p>sc.exe query wuauserv </p> <p>sc.exe stop wuauserv </p> <p>sc.exe query wuauserv </p> <p>REG.exe QUERY HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Services\wuauserv /v Start <br /></p> <ol> <li>Line 1. Disable Windows Update service </li> <li>Line 2. Check service status. If it's not running skip line 3 and 4 </li> <li>Line 3. Stop Windows Update service (if running). </li> <li>Line 4. Check service status again. It would not stop sometimes. </li> <li>Line 5. Check if service is really disabled (Start should be 0x4)</li> </ol> <p>I hope it helps. <img class="wlEmoticon wlEmoticon-smile" style="border-top-style:none;border-left-style:none;border-bottom-style:none;border-right-style:none;" alt="Smile" src="http://developers.de/cfs-file.ashx/__key/CommunityServer.Blogs.Components.WeblogFiles/indraneel/wlEmoticon_2D00_smile_5F00_7899CD14.png" /></p><div style="clear:both;"></div><img src="http://developers.de/aggbug.aspx?PostID=1784286" width="1" height="1">ipolehttp://developers.de/members/ipole/default.aspx