Inside Microsoft Photos App

Microsoft Photos App is the App that comes with Windows 10.

I turns out you can back it up or move it to another user if you copy the following directory:

C:\Users\<your_username>\AppData\Local\Packages\Microsoft.Windows.Photos_8wekyb3d8bbwe-av.zip\Microsoft.Windows.Photos_8wekyb3d8bbwe

Where <your_username> is your username. This contains things like the photos, albums, face recognition data, tags, etc.

Microsoft has conveniently placed all this information in a SQLite database which is located at:
C:\Users\<your_username>\AppData\Local\Packages\Microsoft.Windows.Photos_8wekyb3d8bbwe\LocalState\MediaDb.v1.sqlite

To view the data you can easily do so using DB Browser for SQLite.

If you are a developer this gives you a lot of information along with a pretty nice UI backed by Cognitive Services Face API (or so I assume). The difference is you don't have to pay for use of it because Microsoft is giving it to you for free with the Photos App (indirectly). All you have to do is query the SQLite database for any data you might want. Pretty nice. Thanks Microsoft.

Some tables you might find useful are:

TagVarient - the name of the tag (airplane, ocean, house, etc)
Tag - related to TagVarient and
Item - your photo or video name, size, location, duration, metadata, etc 
ItemTags - joins the Tag and Item tables includes confidence score
Folder - the folders that contain your pictures and their sub folders.
Location - cities where the photos / videos were taken
Person - the people that it tagged and you grouped or it grouped. Represents the items on the People tab in the app. Includes count of people that match that face.
Face - information of where the faces are in each picture
Album - albums (generated). Not sure if self-created ones are here, but I assume they are.

Changing Styles for print media query

I had a situation where I needed to change what would be printed based on what button on the web page the user clicked. Here is an easy way to do that.



<style type="text/css" media="print" id="printStyles">
</style>

<script>
    function printOptionA() {
        var styles = "#optionA {display: block;} #optionB {display:none;}";
        $('#printStyles').text(styles);
        window.print();
    }

 function printOptionB() {
        var styles = "#optionB {display: block;} #optionA {display:none;}";
        $('#printStyles').text(styles);
        window.print();
    }
</script>

The two functions can be called from button, hyperlinks, etc.

If the user just does a Control-P to print in the browser it will print the page as expected (neither of these changes). There is no need to undo these changes after printing.

Save objects in Visual Studio for reuse later

One easy way to save an object while debugging in Visual Studio so that you can use it later for troubleshooting, or maybe use in LINQPad is to serialize the object to disk.

All the libraries you need are built into .NET and can be done in the Immediate Prompt in Visual Studio.

Save the Object to disk

string json = new System.Web.Script.Serialization.JavaScriptSerializer().Serialize(myObject);
System.IO.File.WriteAllText($@"c:\dev\{nameof(myObject)}.json", json);

Read the Object from disk

string json = System.IO.File.ReadAllText(@"c:\dev\myObject.json");
           
var company = new System.Web.Script.Serialization.JavaScriptSerializer().Deserialize<MyClass>(json);

The caveat to this is that you will need the MyClass available when you bring it back to life.You can also pass Object instead of MyClass if you don't have it.

Testing XPath

If you write XPath it is helpful to have a quick way to test what you are doing. You can give it a try using an online tool XPathTestBed. This is pretty easy to use.

If you are doing XPath on page source you can use the Console built into Chrome or Firefox and get immediate results. Just F12 to get into the developer tools. Go to the Console, and enter the following to get all div tags for example.

$x('//div')

Very useful and easy to use.

Angular - Creating a Component using Angular CLI

Install Angular CLI

If you don't have Angular CLI you will need to install it using npm

npm install -g @angular/cli

Usage

ng g c products/product-detail.component --flat

ng = Angular CLI
g = generate
c = component
--flat = no folder will be created

This will create 4 files:

  src\app\products\product-detail\product-detail.component.css
  src\app\products\product-detail\product-detail.component.html
  src\app\products\product-detail\product-detail.component.spec.ts
  src\app\products\product-detail\product-detail.component.ts

It will update the file which will register the component in the app.module.ts:
  src\app\app.module.ts

It will also wire the components together putting some useful code in
src\app\products\product-detail\product-detail.component.ts

Angular - TypeScript Basic Syntax

Common Data Types

string
number
boolean
any - when we don't care what the type is

Using Data Types

export class MyClass {

      name: string = "Test";

}

Functions

export class MyClass {

      doSomething(name: string) : void {
      }

}

Interface

export interface IMyClass {

    name: string;

    code: string;

    doSomething(name: string) : void

}

Class Inheriting from Interface

import { IMyClass } from './myClass';

export class MyClass implements IMyClass {

    constructor(name: string, code: string) {

    }

    doSomething(name: string) : void { ... }

}

Angular - Interactive Nested Components

Now we want to extend our Display-Only nested component to take input from the user. If the user clicks the stars then notify the parent component.

In the Parent component

Using the nested component

We use it just as you would any component. To get data from the nested component we use the banana in the box [()] syntax.

<myApp-star [rating]='product.starRating' 
      [(notify)]='onRatingClicked($event)'></myApp-star>

$event passes along the appropriate information associated with the event.

Handle the event in the parent component

Add this to the parent component class (.ts file).

  onRatingClicked(message: string) : void {

        // do something with the data sent to us via the message parameter

    }

Implementing the Nested Component

star.component.ts

import { Component, OnChanges, Input } from "@angular/core";
import { Component, OnChanges, Input, Output, EventEmitter } from "@angular/core";

@Component({
    selector: 'pm-star',
    templateUrl: './star.component.html',
    styleUrls: ['./star.component.css']
})
export class StarComponent implements OnChanges {
    @Input() rating: number;

    starWidth: number;

    @Output() ratingClicked: EventEmitter<string> = new EventEmitter<string>();

    ngOnChanges(): void {
        this.starWidth = this.rating * 86/5;
    }

    onClick() : void {
        this.ratingClicked.emit('The rating ' + this.rating + ' was clicked');
    }    

}

Passing data from the nested container to the parent component

The only way to pass data to the parent component is using an event. It needs to be decorated with the @Output for this to work. In this example we are passing a type string, but it could be any object for more complex data. 

star.component.html

<div class="crop" 
    [style.width.px]="starWidth"
    [title]="rating"
    (click)='onClick()'>
    <div style="width: 86px">
        <span class="glyphicon glyphicon-star"></span>
        <span class="glyphicon glyphicon-star"></span>
        <span class="glyphicon glyphicon-star"></span>
        <span class="glyphicon glyphicon-star"></span>
        <span class="glyphicon glyphicon-star"></span>
    </div>
</div>

Notice that rating is a property in the star component and so is title

Angular - Display-Only Nested Components

Using the nested component

If we assume the source below is from some parent component html file it might look like this if we are showing a numeric value for the rating of a product.

{{product.startRating}}

If we then want to use a custom component (nested component) to show a nice graphical star rating instead of the numeric value we would use the syntax (property binding syntax) below assuming our component has a selector of myApp-star and has an input property called rating.

<myApp-star [rating]='product.starRating'></myApp-star>

Implementing the Nested Component

Typically nested components are kept in the shared directory of the project.

Use the component by adding it to the module as a declaration.

Input is sent from the parent component to the child (nested) component using a property on the nested component. 

star.component.ts

import { Component, OnChanges, Input } from "@angular/core";

@Component({
    selector: 'myApp-star',
    templateUrl: './star.component.html',
    styleUrls: ['./star.component.css']
})
export class StarComponent implements OnChanges {
    @Input() rating: number;

    starWidth: number;

    ngOnChanges(): void {
        this.starWidth = this.rating * 86/5;
    }
}

Passing data from parent to nested component

Notice the @Input decorator. It is required to expose a property to a parent component in the html file. The starWidth is recalculated whenever the rating property changes.

star.component.html

<div class="crop" 

    [style.width.px]="starWidth"

    [title]="rating">

    <div style="width: 86px">

        <span class="glyphicon glyphicon-star"></span>

        <span class="glyphicon glyphicon-star"></span>

        <span class="glyphicon glyphicon-star"></span>

        <span class="glyphicon glyphicon-star"></span>

        <span class="glyphicon glyphicon-star"></span>

    </div>

</div>

Notice that rating is a property in the star component and so is title

star.component.css

.crop {

    overflow: hidden;

}

div {

    cursor: pointer;

}

app module

Tell the module that contains the parent component where to find our star component be adding it to the declarations in the module. In the most basic of cases this is the app.modules.ts.

app.module.ts

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';

import { StarComponent } from './shared/star.component';

@NgModule({

  declarations: [ AppComponent, StarComponent ],

  imports: [ BrowserModule, FormsModule ],

  providers: [],

  bootstrap: [AppComponent]

})

export class AppModule { }

Angular - Component Life Cycle Hooks

Common Lifecycle Hooks

OnInit

Perform component initialization and retrieve data

import { Component, OnInit } from '@angular/core';

export class MyComponent implements OnInit {

    ngOnInit(): void {

        console.log('In OnInit');

    }

}

OnChanges

Perform action after change to input properties

OnDestroy

Perform cleanup for the component

Angular - Transforming Data with Pipes

Sometimes we need to transform bound properties before it is displayed. Such is the case with formatting dates, currency, decimals, etc. Pipes can be chained.

Built-in Pipes

• date
• number, decimal, percent, currency
• json, slice, etc

The complete list and more information can be found here.

Examples (no parameters):

{{ product.productCode | lowercase }}

<img [src]='product.imageUrl' [title]='product.productName | uppercase'>

{{ product.price | currency | lowercase }}

Examples (with parameters)

NOTE: Parameters are separated by colons

{{ product.price | currency: 'USD' : true : '1.2-2' }}

Custom Pipe

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({name: 'myTransform'})

export class MyTransform implements PipeTransform {

     transform(value: string, customParam1: string): string { ... }

}

Add it to your module (i.e. app.module.ts) as shown here:

@NgModule({

imports: ...

declarations: [ AppComponent, MyTransform ],

bootstrap: ...

})

Use it just like the built in pipes

Angular - Property and Event Bindings

Binding with Interpolation

Use {{expression}} to pull (only one way binding) in content from the component class. The expression can have many forms.

For example:

{{propertyName}}

{{'ABC' + functionName()}}

{{'Answer is ' + 3*2}}
{{showImage ? 'Hide' : 'Show'}} Image

<img src={{product.imageUrl}}>

Notice that it does not use quotes!

Property Binding

Property Binding is one way just like interpolation.

We could use interpolation to set the src url for an image using:

<img src={{product.imageUrl}}>

or 

<img src='http://someUrl/{{product.imageUrl}}'>

We can use Property binding to do the first case, but not the second case.

<img [src]='product.imageUrl'>

The syntax for Property Binding has a two parts:

• Binding Target - Is always in surrounded by []
• Binding Source - Is Surrounded by '' (two single quotes).

Generally, Property Binding is preferred instead of interpolation.

Event Binding

When the user clicks something an event is generated. We can listen for these events using Event Binding. Here is the syntax.

<button (click)='doSomething()'>

The syntax for Property Binding has a two parts:

• Target Event - Is always in surrounded by ()
• Template Statement - Is Surrounded by '' (two single quotes).

In this example, when the button is clicked the doSomething() method in our component class is executed.

List of Events

Two-way Binding

This is useful for having the component and dom in sync such as in the case of an input field on a form.

<input [(ngModel)]='someProperty'>

The Banana in a Box metaphor can be used to remember the order of the parenthesis. Imagine the [()] to have a banana as () in a box as [].

The class for the component would be something like this.

export class MyComponent {

    someProperty: string = 'abc';

}

ngModel is a keyword defined in the FormsModule. The FormsModule will need to be added to the AppModule. To do this open your app.module.ts and add to the top of the file the following:

import { FormsModule } from '@angular/forms';

Next, in the same app.module.ts file add FormsModule to the array of imports in the @NgModule().

Angular - Page Layout syntax

Built-in Structural Directives

*ngIf

This adds control flow to the page for hiding and showing content based on conditional logic.

<div *ngIf='someLogic()'>

      Some content to show

</div>

*ngFor

This adds control flow to the page for looping over content like a for loop.

<div *ngFor='let obj of objects'>

      <div>{{obj.PropertyHere}}</div>

</div>

Angular - Creating a Component in Angular

Component

A Component has 3 parts

• Template
• View layout
• Created with HTML
• Includes binding and directives
• Class
• Code supporting the view
• Created with TypeScript (.ts file)
• Properties for data
• Methods for logic
• CSS
• A CSS file for the styling needed for the component
• Metadata
• Extra data for Angular
• Defined with a decorator

Example

app.component.ts file

import { Component } from '@angular/core';

@Component({

  selector: 'myApp-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css']

})

export class AppComponent {

  title = 'Hello World';

}

• The import pulls in dependency references
• @Component is the metadata / decorator that says the class is a component. This is similar to an [Attribute] in C#
• export makes the class definition available for user elsewhere.
• The selector is a unique value for this component in the application. It is suggested you prefix selectors with something that identifies it as part of your app. This is also what is used as a tag to use this component in another component. In this case it is <myApp-root><myApp-root>
• It is common to append "Component" to the name name of the class so that it is clear that it is a component.

app.component.html

<div>

  <h1>

    Hello{{title}}!!

  </h1>

</div>

This is the HTML that defines the layout. Anything in {{...}} tags are binds to properties in the class associated with this component.

app.component.css

h1 { text-align:center }

This is a standard CSS file, except these styles will be unique to this component automatically. They will not affect other styles in the project.

Imports

Some common Angular Modules you may need to import are:

• @angular/core (as we have done above)
• @angular/animate
• @angular/http
• @angular/router

Using the Component

This is how you would use it in index.html for example:

<body>

<myApp-root></myApp-root>

</body>

Telling index.html about our Component

In app.module.ts you list what angular modules should be included in our application#

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

@NgModule({

  declarations: [ AppComponent ],

  imports: [ BrowserModule ],

  providers: [],

  bootstrap: [AppComponent]

})

export class AppModule { }

Angular - Getting Started with Angular and Visual Studio Code

Download and Install

Visual Studio Code (could use Visual Studio also or many other editors)
npm
Angular CLI
Angular Quickstart App

Setup

Open the View -> Interactive Terminal and type npm install to install all the packages specified in packages.json. Files will be put in node_modules which can safely be excluded from source control if desired since it can be rather large.

Running your app

Open the View -> Interactive Terminal and type npm start. This will build, start the web server, and open the browser.

Stopping your app

Go back to the Interactive Terminal and type Control-C and then Y to stop the web server.

Making Changes

If you make changes to the .html files the changes are automatically updated in the browser.

Blocking

Task.Delay()

If you are in an async method and you want to have it wait for a period of time before continuing your first thought might be to use Thread.Sleep(), but this would work the way you may think. Task.Delay() is what you want to use. Sleep just sleeps on the current thread which is the same as the thread that is calling the async method. Having an async method does NOT create threads unless the

Task.Run()

Task.Run() method is used to run a non-async method on another thread (from the thread pool by default). This is essentially just a background thread and has nothing to do with async. However since Task.Run() returns a Task you can await the result. This makes tracking the task and getting the result very easy.

Task.Run() is a good way to run a non-async method from an async method. There is overhead of spinning up an additional thread just to run this non-async code and then we would await the completion of the thread. This overhead is sometimes the only option if there is no async method available to call and all you have is a non-async method to call and you don't have access to change it.

Async in C#

Tips

A thread is a relatively heavy weight structure. 1 thread takes 1M of Stack Space. A task is NOT a thread. You can have multiple tasks running on a single thread (such as UI thread).

Task.Delay() is like Thread.Sleep(), but it is a Task that won't complete for a specified amount of time.

The keyword async is not part of the method signature. For example, it doesn't show up in interfaces. It is convention to add Async to the end of a method name though. This tell the reader it is async.

Return Task, not void.

await

Frees thread to do other things such as update UI, etc. Before await is called the stack trace is in the method you called it from which makes sense. The potentially surprising thing is that the line after the await does NOT have the same stack trace. It is now in the same thread, but clearly not in the same calling method anymore. This is because the compiler creates a state machine when the code is complied. It's building what would have been done by hand before we had the keyword await in C#.

• await frees a thread while we wait for an operation to complete. For example, handle another request in web scenario, update UI thread in desktop scenario. 
• It does NOT block the thread, it actually frees the thread to do something else. 
• The execution is stopped until the task is complete. 
• When the task is complete the thread gets focus and execution continues. This is similar in concept to a callback after something is complete.

Exception Handling

If there is an exception in an async method it will be thrown and can be caught as if it was not an async method. For example, a simple try-catch.

Free resources for Parallel Programming

Below is a list of free resources for parallel programming with .NET.

Microsoft's main site for all things parallel

• http://msdn.microsoft.com/concurrency

Parallel Programming in the .NET Framework

• https://docs.microsoft.com/en-us/dotnet/standard/parallel-programming/index

Parallel Programming with Microsoft .NET: Design Patterns for Decomposition and Coordination on Multicore Architectures.

• https://msdn.microsoft.com/en-us/library/ff963553.aspx
• Highly recommended, easy to read FREE ebook.

Passing data to a Task using parameter to avoid race condition

Requirements

Consider the scenario where you want to pass the current value of i to a new task that gets created in a for loop. We want each task to have a unique value of i (0...9).

The wrong approach (closures)

In general, it is a bad idea do use closures to pass data to a task when the value will change before the task starts. Below is a classic race condition such that the value of i is not read until the task starts, but before most of the tasks start all the tasks have been created. This will result in gotParamNow being equal to 10 (or any value really, but not what we intended).

for (int i=0; i<10; i++)

{

Task.Factory.StartNew( () =>

{

int gotParamNow = i;

}

);

}

The right approach (parameter)

If you want to pass data when the Task is CREATED (not when started as it would do when using closures) then you can pass the data to the StartNew method as shown below.

for (int i=0; i<10; i++)
{
Task.Factory.StartNew( (arg) =>
{
int gotParamNow = (int)arg;
},
i
);
}

In the code above the value i changes over time, so we want to pass it to the StartNew method so that when the task starts the data has the value that was passed to it and will result in each task having a unique value of i passed to it and thus gotParamNow will be unique as well.

Task Cancellation

Intro

When doing speculative work (starting multiple thread and only caring about the first result that comes back) these thread can take up valuable resources such as cpu or are long running, etc. We can just let these threads run to completion, but that won't free up the resources until they are done. Ideally once we have the result we want to cancel the threads once we don't need them to run anymore.

Cooperative Model

Creator passes a cancellation token, starts the task, later signals cancel, etc
Task monitors the token, if it is cancelled then it performs the cleanup and throws an exception.

Status on Task is set to "Canceled"


var cts = new CancellationTokenSource();
var token = ctx.Token;

Task t = Task.Factory.StartNew( () =>
{
try{
while (...)
{
// check for cancellation at start of each iteration
if (token.IsCancellationRequested)
{
// clean up
// NB: Make sure this exception bubbles up (as shown here) to the caller.
token.ThrowIfCancellationRequested();
}

// do the stuff would normally do here
...
}
}
catch (OperationCancelledException)
{
throw;
}
catch (Exception ex)
{
// handle exception
}
}, 
token // allows .NET to set status appropriately
);

// this may be invoked by a menu, keystroke, or other reason.
// This will trigger the canelling of the task.
// This would typically not be in the same location as the rest of the code here.
if (some condition occurs) {
cts.Cancel();
cts = new CancellationTokenSource(); // If need to re-run
}

try 
{ 
t.Wait(); // throws exception if cancelled
}
catch (AggregateException ae) {
ae = ae.Flatten();
foreach(var ex in ae.InnerExceptions)
{
if (ex is OperationCancelledException)
// do something (ignoring it now)
else
// handle exception (ex.Message will get error message)
}

}

Note: By passing the same token to several tasks will cause all the tasks to be cancelled when cts.Cancel() is called.

Caveat: Once Cancel() has been called on a task, the token passed to the Task cannot be used again once its status has been changed to Canceled. If you re-run the task you will need to create a new token as shown above. A good place is right after Cancel() is called.

Alternative approach

Use a global variable and check it to see if the task has been canceled. The trick in either implementation is to get the right level of polling. Too often will have performance implications and too little and cancelling won't be quick enough and waste resources.

Reference

Content is based on Pluralsight video called Introduction to Async and Parallel Programming in .NET 4 by Dr. Joe Hummel. 

Exception handling of Tasks in .NET

Exception Handling rules

Task Parallel Library (TPL) handles exceptions well.

If a task throws an exception E that goes unhandled:

• task is terminated
• E is caught, saved as part of an AggregateException AE, and stored in task object's Exception property.
• AE is re-thrown when one of the following is called: .Wait, .Result, or .WaitAll

Example with no exception handling:

Task<int> t = Task.Factory.StartNew(code);

int r = t.Result;

Simple example with exception handling:

Task<int> t = Task.Factory.StartNew(code);

try { int r = t.Result; }

catch (AggregateException ae) 

{

Console.WriteLine(ae.InnerException.Message);

}

Working with AggregateException graph (preferred way)

The above handling is not really sufficient. When catching the AggregateException it can be an graph of Exceptions connected via the InnerExceptions property. For example, AggregateException.InnerExceptions can contain another AggregateExceptions or Exceptions. We need to look at the leaves of the graph to get the real exceptions of interest. An easy way to do this is to use the Flatten() method;

Task<int> t = Task.Factory.StartNew(code);

try { int r = t.Result; }

catch (AggregateException ae) 

{

ae = ae.Flatten();

foreach (Exception ex in ae.InnerExceptions)

Console.WriteLine(ex.Message);

}

Example of what happens when an exception is NOT "observed"

Task t = Task.Factory.StartNew(() =>
{
int d = 0;
int answer = 100 / d;
}
);

This will cause the application to crash when garbage collection is executed.

Exception handling Design and the need for observing

It is highly recommended that you "observe" all unhandled exceptions so that when the task is garbage-collected the exception will be re-thrown then. Unfortunately, this is not the ideal place to handle the exception.

To observe you can do it by doing one of the following:

• call .Wait or touch .Result - the exception is re-thrown at this point
• call Task.WaitAll - the exception(s) are re-thrown when all have finished
• touch the task's Exception property after the task has completed
• subscribe to TaskScheduler.UnobservedTaskException which is particularly useful if a third party block of code throws the exception.

NOTE: Task.WaitAny() does NOT observe the exception.

Wait Example

try { t.Wait(); }

catch (AggregateException ae) { ... }

Exception accessed Example

if (t.Exception != null)

{ ... }

Result accessed Example

try { var r = t.Result; }

catch (AggregateException ae) { ... }

Last resort exception handling

If you don't "observe" an exception you can still handle it by subscribing to the TaskScheduler.UnobservedTaskException. 

Use cases for using this method:

• speculative tasks that you don't cancel and don't really care about the result once you get one result. If one of those tasks throws an exception you don't want it to be thrown when garbage collection takes place.
• Using a third party library that you don't trust and don't know if it will throw any exceptions.

You only want to subscribe once to the event. Good places to do this are in the application startup code, a static constructor, etc.

How to subscribe:

TaskScheduler.UnobservedTaskException += new EventHandler<UnobservedTaskExceptionEventArgs>(MyErrorHandler);

Example handling the error

static void MyErrorHandler(object sender, UnobservedTaskExcpetionEventArgs e)

{

Console.WriteLine($"Unobserved error:{e.Exception.Message}");

e.SetObserved();

}

Note the call to e.SetObserved(). This is what tells .NET that we have observed the Exception and now it will not be thrown at garbage collection. 

Reference

Content is based on Pluralsight video called Introduction to Async and Parallel Programming in .NET 4 by Dr. Joe Hummel.