<InkCanvas x:Name=”InkCanvas”/>

<InkToolbar TargetInkCanvas=”{x:Bind InkCanvas}”/>

In more sophisticated scenarios, app developers will want to draw their own ink.  Those types of scenarios include:

• Interleave visual elements with ink
• Applying effects to ink using toolkits like Win2D
• Sketching applications that will likely have lots of ink strokes
• Large canvas apps that can scroll and zoom

Once an app developer decides to manage their own ink in the InkCanvas, they need write code for a few things:

• Storing ink once the user completes a stroke
• Drawing ink
• Erasing ink (including erasing all ink on the canvas)

I wrote a sample that demonstrates how to do each of these tasks.

Storing Ink

Windows Ink Platform (DirectInk) has two different types of ink, “wet ink” and “dry ink”.  The engineers on the Windows team did lots of work to make ink flow from the pen with as little latency as possible, even predictively rendering where the ink is going to go. 

The InkCanvas Control in Xaml processes input and routes rendering to the InkPresenter which renders “wet ink” in its own high-priority thread.  Once the pen is lifted from the screen, that is then rendered by the InkCanvas’s “dry ink” renderer.  App developers can hook into this event by activating custom drying and then waiting for strokes to be collected:

private void MainPage_Loaded(object sender, RoutedEventArgs e)

{

    var inkPresenter = InkCanvas.InkPresenter;

    _inkSynchronizer = inkPresenter.ActivateCustomDrying();

    inkPresenter.StrokesCollected += InkPresenter_StrokesCollected;

}

Then each time the user draws on the screen, the StrokesCollected event is triggered, use the Ink Synchronizer to get the strokes to add and add them to the your app’s storage – in this case, _strokes is a List<InkStrokeContainer>.  Once that is done, the Ink Synchronizer is used to tell the InkCanvas that it can remove the wet strokes, and then the DrawingCanvas is invalidated – the DrawingCanvas is the Win2d CanvasControl where the dry ink will get rendered.

private void InkPresenter_StrokesCollected(InkPresenter sender, InkStrokesCollectedEventArgs args)
{
    var strokes = _inkSynchronizer.BeginDry();

 

    var container = new InkStrokeContainer();

 

    container.AddStrokes(from item in strokes
        select item.Clone());

 

    _strokes.Add(container);

 

    _inkSynchronizer.EndDry();

 

    DrawingCanvas.Invalidate();
}

Drawing Dry Ink with Win2D

On Windows, if you want to draw 2D graphics with the fastest, most powerful API, you will want to use Direct2D, a COM-based API that is used under the hood for most graphics on Windows but is a bit hard to use, especially for C# developers.  To remedy that, Microsoft created Win2D as a UWP class-oriented wrapper for Direct2D that is meant to work great in Xaml-based apps.  Win2d has a very easy to use API for drawing Ink that makes it a great match for custom dry ink: CanvasDrawingSession.DrawInk().  Add the Win2D.UWP package to the app project and then you can add the Win2D CanvasControl to the Xaml behind the InkCanvas:

<Page
    x:Class="InkToolbarTest.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:canvas="using:Microsoft.Graphics.Canvas.UI.Xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <Grid>
        <canvas:CanvasControl Draw="DrawCanvas"

             ClearColor="Beige" x:Name="DrawingCanvas"/>
        <InkCanvas x:Name="InkCanvas"/>
        <InkToolbar TargetInkCanvas="{x:Bind InkCanvas}"

             VerticalAlignment="Top" x:Name="InkToolbar"/>
    </Grid>
</Page>

The CanvasControl has a Draw event which is triggered every time the control needs to draw itself.  The event is also triggered by the CanvasControl.Invalidate() method in the InkPresenter_StrokesCollected event handler.  The code to draw the ink in that DrawCanvas() method can be as simple as calling CanvasDrawingSession.DrawInk() on the lists of InkStrokes in the InkStrokeContainers, but I wanted to show how easy it is to use Win2d Effects to jazz up the ink – adding a drop shadow to each stroke:

private void DrawCanvas(CanvasControl sender, CanvasDrawEventArgs args)
{
    DrawInk(args.DrawingSession);
}

private void DrawInk(CanvasDrawingSession session)
{
    foreach (var item in _strokes)
    {
        var strokes = item.GetStrokes();

 

        using (var list = new CanvasCommandList(session))
        {
            using (var listSession = list.CreateDrawingSession())
            {
                listSession.DrawInk(strokes);
            }

            using (var shadowEffect = new ShadowEffect
            {
                ShadowColor = Colors.DarkRed,
                Source = list
            })
            {
                session.DrawImage(shadowEffect, new Vector2(2, 2));
            }
        }

        session.DrawInk(strokes);
    }
}

The end result of the drop shadows is most visible with thick pen strokes.  The end result is that the shadow appears to pops in under the strokes as the pen is lifted from the screen.

This works great – now you can use all of the drawing tools and the ruler to draw, but when you try using the eraser, nothing happens. 

Erasing Dry Ink

This is because the InkToolbar eraser doesn’t know about any of the dry ink; the application has taken control of dry ink rendering.  Now if you want to implement erasing you have to handle that yourself by doing two things:

1. When the user has selected the eraser tool, handle pointer events and do hit-testing on the ink.  The InkStrokeContainer make this easy to do.
2. If you hold your pointer (finger, mouse, or pen) over the eraser button, you will see an option to “Erase All Ink”.  You will need to override this behavior to erase all the ink that has been collected.

Once the page has loaded, get the eraser button and handle the Checked and Unchecked events (it’s just a styled radio button)

var eraser = InkToolbar.GetToolButton(InkToolbarTool.Eraser) as InkToolbarEraserButton;

if (eraser != null)
{
    eraser.Checked += Eraser_Checked;
    eraser.Unchecked += Eraser_Unchecked;
}

Then in the Checked event handler, attach pointer events and set the input processing mode; in the Unchecked event to the opposite:

private void Eraser_Checked(object sender, RoutedEventArgs e)
{
    var unprocessedInput = InkCanvas.InkPresenter.UnprocessedInput;

    unprocessedInput.PointerPressed += UnprocessedInput_PointerPressed;
    unprocessedInput.PointerMoved += UnprocessedInput_PointerMoved;
    unprocessedInput.PointerReleased += UnprocessedInput_PointerReleased;
    unprocessedInput.PointerExited += UnprocessedInput_PointerExited;
    unprocessedInput.PointerLost += UnprocessedInput_PointerLost;

    InkCanvas.InkPresenter.InputProcessingConfiguration.Mode = InkInputProcessingMode.None;
}

private void Eraser_Unchecked(object sender, RoutedEventArgs e)
{
    var unprocessedInput = InkCanvas.InkPresenter.UnprocessedInput;

    unprocessedInput.PointerPressed -= UnprocessedInput_PointerPressed;
    unprocessedInput.PointerMoved -= UnprocessedInput_PointerMoved;
    unprocessedInput.PointerReleased -= UnprocessedInput_PointerReleased;
    unprocessedInput.PointerExited -= UnprocessedInput_PointerExited;
    unprocessedInput.PointerLost -= UnprocessedInput_PointerLost;

    InkCanvas.InkPresenter.InputProcessingConfiguration.Mode = InkInputProcessingMode.Inking;
}

All of the pointer event handlers are trivial, except for the PointerMoved event handler which does the hit testing using the InkStrokeContainer.SelectWithLine() API.  If the stroke of the eraser crosses any of the strokes, the bounding box of the selected stroke will be returned otherwise it would be empty  In the pointer moved event handler, items in the _strokes list are removed if the eraser intersects them:

private void UnprocessedInput_PointerMoved(InkUnprocessedInput sender, PointerEventArgs args)
        {
            if (!_isErasing)
            {
                return;
            }

            var invalidate = false;

            foreach (var item in _strokes.ToArray())
            {
                var rect = item.SelectWithLine(_lastPoint, args.CurrentPoint.Position);

                if (rect.IsEmpty)
                {
                    continue;
                }

                if (rect.Width * rect.Height > 0)
                {
                    _strokes.Remove(item);

                    invalidate = true;
                }
            }

            _lastPoint = args.CurrentPoint.Position;

            args.Handled = true;

            if (invalidate)
            {
                DrawingCanvas.Invalidate();
            }
        }

        private void UnprocessedInput_PointerLost(InkUnprocessedInput sender, PointerEventArgs args)
        {
            if (_isErasing)
            {
                args.Handled = true;
            }

            _isErasing = false;
        }

        private void UnprocessedInput_PointerExited(InkUnprocessedInput sender, PointerEventArgs args)
        {
            if (_isErasing)
            {
                args.Handled = true;
            }

            _isErasing = true;
        }

        private void UnprocessedInput_PointerPressed(InkUnprocessedInput sender, PointerEventArgs args)
        {
            _lastPoint = args.CurrentPoint.Position;

            args.Handled = true;

            _isErasing = true;
        }

        private void UnprocessedInput_PointerReleased(InkUnprocessedInput sender, PointerEventArgs args)
        {
            if (_isErasing)
            {
                args.Handled = true;
            }

            _isErasing = false;
        }

The last thing to do with erasing is to implement the Erase All Ink button.  Since in custom dry mode, the InkToolbar has no control over the application-owned InkStrokeContainer, you need to override some of its built-in behavior.  The control template for the InkToolbarEraserButton uses a Button in an attached Flyout to trigger the InkCanvas erase all function.  In this code, the button is replaced with another button that has a different event handler:

var eraser = InkToolbar.GetToolButton(InkToolbarTool.Eraser) as InkToolbarEraserButton;

if (eraser != null)
{
    eraser.Checked += Eraser_Checked;
    eraser.Unchecked += Eraser_Unchecked;
}

var flyout = FlyoutBase.GetAttachedFlyout(eraser) as Flyout;

if (flyout != null)
{
    var button = flyout.Content as Button;

    if (button != null)
    {
        var newButton = new Button();
        newButton.Style = button.Style;
        newButton.Content = button.Content;

        newButton.Click += EraseAllInk;
        flyout.Content = newButton;
    }
}

Then the EraseAllInk is trivial:

private void EraseAllInk(object sender, RoutedEventArgs e)
{
    _strokes.Clear();

    DrawingCanvas.Invalidate();
}

Simultaneous Pen and Touch

One new feature in the Windows 10 anniversary edition is the ability for apps to use pen and touch simultaneously. This can be most easily seen with the new Ruler tool that can be shown on the InkCanvas.  An easy way to take advantage of simultaneous pen and touch is to put the InkCanvas into a ScrollViewer and enable zooming in the ScrollViewer.  Doing this enables one-finger panning and two finger pinch to zoom.  I’ve implemented the ScrollViewer zooming and panning features via a Style, “ZoomableScrollViewer” and by using that and giving the contents of the ScrollViewer a size, you get panning and scrolling.  For fun, try drawing a horizontal or vertical line by putting the pen down and then flicking the canvas with your finger up, down, left or right.  The scroll “rails” will keep the scrolling to a single axis at a time.  See the Xaml changes here:

<Page
    x:Class="InkToolbarTest.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:canvas="using:Microsoft.Graphics.Canvas.UI.Xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <Page.Resources>
        <Style TargetType="ScrollViewer" x:Key="ZoomableScrollViewer">
            <Setter Property="ZoomMode" Value="Enabled"/>
            <Setter Property="HorizontalScrollMode" Value="Enabled"/>
            <Setter Property="VerticalScrollMode" Value="Enabled"/>
            <Setter Property="HorizontalScrollBarVisibility" Value="Auto"/>
            <Setter Property="VerticalScrollBarVisibility" Value="Auto"/>
        </Style>
    </Page.Resources>
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <ScrollViewer Style="{StaticResource ZoomableScrollViewer}">
            <Grid Width="3000" Height="2000">
                <canvas:CanvasControl Draw="DrawCanvas" ClearColor="Beige" x:Name="DrawingCanvas"/>
                <InkCanvas x:Name="InkCanvas"/>
            </Grid>
        </ScrollViewer>
        <InkToolbar TargetInkCanvas="{x:Bind InkCanvas}" VerticalAlignment="Top" x:Name="InkToolbar">
            <InkToolbarCustomToolButton Content="" FontFamily="Segoe MDL2 Assets" Click="OnShare" ToolTipService.ToolTip="Share"/>
        </InkToolbar>
    </Grid>
</Page>

private async void OnShare(object sender, RoutedEventArgs e)
{
    var activeTool = InkToolbar.ActiveTool;

    // Show the share UI
    DataTransferManager.ShowShareUI();

    await Task.Delay(TimeSpan.FromSeconds(0.1));

    // reset the active tool after pressing the share button
    InkToolbar.ActiveTool = activeTool;
}

Helpful Links

• Get the full source here for the project.
• InkCanvas control
• InkToolbar control
• Win2D library
• Pen and Ink: Inking at the Speed of Thought from //Build 2016

 

I have been drawing my whole life – my career in software started over 20 years ago when I was in architecture school and I experimented with a computer that I could draw on.   I am very excited about the possibilities of combining the great UX (InkToolbar and InkCanvas) with great graphic processing power (Win2D) with great hardware (Surface).  The future is bright for someone who draws with a pen.  Take a look at my latest pen drawings that I did on a Surface Pro 3.  How do they compare with drawings I did in a traditional journal?  What new experiences can you craft with Ink on Windows?

1. App Services that can run in the application’s process instead of in a background task 
2. Remote Systems API that enables connecting apps across devices and platforms.

On its own, Console Output doesn’t do anything special when you run it, but if you launch it from another app by activating the consoleoutput: protocol handler consoleoutput:?title=My app name you can then send text output to it with app services.

When you install and run Console Output, you will see a full code sample in C# showing how to launch Console Output with the Launcher.LaunchUriAsync() API and then open an AppServiceConnection communications channel for bi-directional communications with Console Output.  The sample code is at the bottom of this article.  Console Output is also enabled for remote activation so doing debugging and testing of devices nearby or through the cloud becomes possible as well.  I have also shared the source code for a Console Output Tester app that demonstrates how an app might use Console Output.

Sample C# Code

using System;
using Windows.ApplicationModel.AppService;
using Windows.Foundation.Collections;
using Windows.System;

public class ConsolLoggingTester : IDisposable
{
    private AppServiceConnection _appServiceConnection;
   
    public ConsolLoggingTester()
    {
        InitializeAppServiceConnection();
    }

    private async void InitializeAppServiceConnection()
    {
        // this is the unique package family name of the Console Ouput app
        const string consoleOutputPackageFamilyName = "49752MichaelS.Scherotter.ConsoleOutput_9eg5g21zq32qm";

        var options = new LauncherOptions
        {
            PreferredApplicationDisplayName = "Console Output",
            PreferredApplicationPackageFamilyName = consoleOutputPackageFamilyName,
            TargetApplicationPackageFamilyName = consoleOutputPackageFamilyName,
        };

        // launch the ConsoleOutput app
        var uri = new Uri("consoleoutput:?Title=Console Output Tester&input=true");

        if (!await Launcher.LaunchUriAsync(uri, options))
        {
            return;
        }

        var appServiceConnection = new AppServiceConnection
        {
            AppServiceName =  "consoleoutput",
            PackageFamilyName = consoleOutputPackageFamilyName
        };

        var status = await appServiceConnection.OpenAsync();

        if (status == AppServiceConnectionStatus.Success)
        {
            _appServiceConnection = appServiceConnection;
   
            // because we want to get messages back from the console, we
            // launched the app with the input=true parameter
            _appServiceConnection.RequestReceived += OnRequestReceived;
        }
    }

    public async void LogMessage(string messageText)
    {
        if (_appServiceConnection == null)
        {
            return;
        }

        var message = new ValueSet
        {
            ["Message"] = messageText
        };

        await _appServiceConnection.SendMessageAsync(message);
    }

    public void Dispose()
    {
        if (_appServiceConnection != null)
        {
            _appServiceConnection.Dispose();
            _appServiceConnection = null;
        }
    }

    private void OnRequestReceived(
        AppServiceConnection sender,
        AppServiceRequestReceivedEventArgs args)
    {
        var message = args.Request.Message["Message"] as string;

        // handle message input from Console Ouptut app
    }
}

Links

• Console Output in the Windows Store

• Console Output Tester source code on GitHub
  

Please tell me if you start using Console Output and if you find it useful!

Watercoloring

My latest creative journey stared with the fact that my watercolor kit, filled with character and memories,  has gotten rusty and has started to fall apart after 25 years of usage.

Since I have been working with 3D printers lately, I though that I would design a new watercolor palette – but first I needed to get my ideas out – and for me my journal is the best tool for that – I still haven’t gone digital for my favorite creative tool.  I did a few quick sketches with an ultra-fine point Sharpie and added a little color – and had the germ of an idea – a watercolor kit where I could put my travel brushes in as well.

3D Printing

I took my design and then started making a model in 3D Builder, the 3D design and printing app that comes with Windows 10.  In 3D Builder, you can make very complex shapes by taking simple shapes (cubes, cylinders, wedges, etc.) and doing transforms (translate, scale, rotate) and Boolean operations (add, subtract, intersect) on them.

3D Builder is very powerful but it does have its limitations – think of it as WordPad for 3D printing – it comes with Windows 10 now and is very easy to use, but doing something like changing the size of the holes I created for the brushes will typically involve a complex repair because it doesn’t keep the parameters that I used to make the hole in the model: Boolean operations are destructive in 3D Builder.  There is a simple workflow to account for this involving making copies of objects before doing Boolean operations on them. As a software developer, I wanted to automate the process – I wanted to code it.  What I really wanted to do was to make a parametric model where I could change the various numerical values that make up the model.  When he got into 3D printing, my colleague Scott Hanselman wrote a great article about the basics of 3D printing and in the article pointed to the site openjscad.org where you can write JavaScript to make a model that you could then send to a 3D Printer.  This was exactly what I was looking for.

CAD: Computer Aided Design

I wrote the code for watercolor palette, and published the JavaScript source to GitHub.  The model is made up of a simple reusable functions I combined to make a complex model.  For example to make the edges rounded, I subtracted a quarter-round solid from each edge.  The code to make the quarter round is here where the height is the length in millimeters:

[sourcecode language='javascript'  padlinenumbers='true']
// Generate a quarter-round used to radius the edges (4mm radius)
function corner(height) {
    if (!height) {
        height = 140;
    }
    return color("white", cube({ size: [4, 4, height] })
     .translate([0, 0, 0])
     .subtract(cylinder({ r: 4, h: height }))
     .rotateY(90));
}
[/sourcecode]

In addition to publishing the source code for the model, I even published the model in both STL and .3MF format (still a work in progress) to Thingiverse.

In the process of using the OpenJSCAD.org site, I found some things that I could improve upon and since the site has a link at the bottom to clone/fork the site on GitHub, I did just that.

My Fork of OpenJSCAD.org

Here is what I wanted to do that triggered my decision to fork OpenJSCAD.org and make my own version that you can view the code for on GitHub and try out here.

1. Make the site work on Azure (by adding a Web.config file)
2. Enable the site to work on Internet Explorer and Microsoft Edge
3. Adds Blockly-based block coding so that kids can try drag-and-drop CAD-coding
4. Enable the site to work as a hosted web app when in a Windows 10 app that adds the following features
   1. Enables direct 3D Printing via new Windows 10 3D Printing APIs
   2. Enable file association with .jscad files so that when you double-click on one, it launches the app with the file
   3. Adds saving to the new 3D Manufacturing Format (.3MF)
   4. Enable block coding file saving and loading to Windows 10 roaming storage

You can try out the site I put up on Azure Websites:
http://openjscad.azurewebsites.net/

Hour of Code and Block Programming

When I heard that Microsoft would be creating Minecraft-based content for the Hour of Code I was very excited since I was planning on helping my partners 21st Century Fox and Adobe Systems run Hour of Code events at their companies.  Here is a photo of my son Sam, age 10, who accompanied me to assist teaching an Hour of Code at the 20th Century Fox Innovation Lab in Los Angeles.  When I showed the OpenJSCAD JavaScript programming to Sam, he was a bit stuck on the JavaScript syntax – but after he ran through the Minecraft-based coding exercises with drag-and-drop block programming, I got an idea: why not add this to my fork of OpenJSCAD.

The Minecraft-based coding exercises use a block-based programming tool called Blockly, I wanted to see how easy it would be to integrate that into my fork of OpenJSCAD.  I saw that millions of kids were going to learn how to program with blocks over the course of the Hour of Code Week December 7-11 and I wanted to find a way for kids to leverage those new coding skills to build 3D Models.

I started that by cloning the Blockly GitHub repository and merging that with my fork of the OpenJSCAD site.  If anyone knows of a best practice for merging two different forks of two seemingly unrelated GitHub repositories, please share that with me.  My moniker is Synergist – and true to its definition, I like combining things in new ways.  For me, combining technologies in ways people hadn’t thought of before is my passion – so this kind of creative mixing of GitHub repositories, while keeping those repositories current is essential.

In my Block-coding implementation of OpenJSCAD, I made blocks for the various basic solids like Cube, Sphere, Cylinder, blocks for transforms like translate, rotate, and scale, and blocks for Boolean operations like union and subtract.  In Blockly, you define the blocks separately from the code generators – since Blockly could generate code for any text-based languages.  You can see the blocks and generators for the CAD objects, transforms and operations here.  II t is still a work in progress – I am still trying to get touch working as well as it does on http://code.org/mc and getting variables working is a bit tricky.

then generates this code:

[sourcecode language='javascript'  padlinenumbers='true']
function main() { 

    return cube({size:[10, 10, 10], center: true}) 

.subtract(  sphere({r:6, center:true})) 

.translate([0, 0, 5]); 

} 
[/sourcecode]

This was my son Sam’s first code model and he saw that blocks=code=model=real object.  He got it!

Hosted Web App

One of the very powerful ways to build a Windows 10 App is called a Hosted Web App.  A Hosted Web App can have almost all of the capabilities of a native app except the majority of its code resides on the web instead of the app package.  This enables a single code base to support a website and an app while doing feature detection to enable certain features when running in the app context.  In the case of the OpenJSCAD app, the Windows 10 specific code around 3d Printing is all in the Windows3DPrinting.js file.  Once you have detected that you are running in the Windows App context on a page that has been whitelisted in the application manifest, you can start calling Windows Runtime APIs:

Last month, Microsoft released an update to Windows that added some new functionality available to developers.  One area that was enhanced was in 3D printing and because of this, I needed to have some code branches in specific areas around creating 3D Models.  Take a look where I am using the IsTH2() function in the Windows3DPrinting.js code.

[sourcecode language='javascript'  padlinenumbers='true']
function isTh2(){
        /// <summary>Is Windows Threshold 2 (November 2015 Update)?</summary>
        /// <returns type="bool">true if running Windows TH2 (November 2015 Update)</returns>

        var apiInformation = Windows.Foundation.Metadata.ApiInformation,
            universalApiContract = "Windows.Foundation.UniversalApiContract";

        return apiInformation.isApiContractPresent(universalApiContract, 2);
}
[/sourcecode]

The hosted web app adds Windows 10 functionality specifically to the following areas:

• 3D Printing and 3D Manufacturing Format file creation
• saving and loading block coding files to roaming storage
• .jscad file association – in this case I needed to include some file activation code in the app package
• Handling case where there is no internet connection

The Creative Process

As you can see by now, my creative process is much more of a journey where I combine my interests rather than a destination.  In this creative process, I created a painting, a watercolor kit, a website, and an app – and taught some kids to code on the way.

In my house I have a front door that swings and hits a counter top and because there is a recessed toe plate, there is no place to put a door stop by the base of the door.  I wanted to prevent the door from banging into the counter top. I decided to make a door stop that could clip onto the counter.

Windows 10 comes with a free app, called 3D Builder which has basic solid modeling capabilities, giving me the ability to make a complex shape by adding together a few basic shapes and then subtracting another shape and then “slicing” it to make a final object that I could print.  The software is extremely easy to use but also very powerful.  Since any app in Windows 10 can now use the 3D printing facilities built into the operating system, plug-and-play 3D printers are now really easy to setup and get running in Windows.  The printing technology is still a very hands-on process but it is incredibly rewarding to come up with an idea that solves a problem, design a solution, and manufacture the result.

Next Steps

Now it’s your turn.  Take a look at the model I uploaded to Thingiverse – download it, print it out, change it, make it better, make it yours.  What problem (big or small) have you solved with 3D printing?

Since then, Neon Hitch has joined the Microsoft BizSpark program which gets her production company and label free software and Azure cloud services.  BizSpark is actually great for an independent artist who wants to do something innovative with technology because many musicians fit the BizSpark criteria:

• Developing software or apps
• Less than 5 years old and privately held
• Making less than US$1M annually

Because Neon’s API is run with Azure API Management, the cost for her to manage and run the API, is basically $0.  Because Neon released an API, new opportunities can open up.  Here is one:

Kinetic Typography

I have had a fascination with Kinetic Typography.  Here is one of my favorite examples is Ira Glass talking about the creative process:

I like Kinetic Typography so much, I built an app for Windows to create it.  One of the reasons that I created it was to learn about how to use CSS Animations – it turns out you can do all sorts of things with CSS Animation today in any modern browser.

Since I released the app last year, I have added audio from NASA and words from some of my favorite poems, Jabberwocky by Lewis Carrol and Ozymandias by Percy Bysshe Shelley.  I just released an update to the app which uses the Neon API to let her fans create kinetic typography videos with her songs which she released with a Creative Commons License. 

Now make your own Neon Hitch Lyric Videos!

Get Kinetic Typography today for Windows 8.1: it’s free!

I’d love to see what people create with this – please post here if you make something cool with Kinetic Typography.

We have been working recently with an innovative  newly-independent artist, Neon Hitch (also on Xbox Music) to allow her to express herself in an entirely new way: with her own API.  Neon owns all the content in the API and will be releasing it on her own interactive label she created called FanLabel.  Neon wanted to engage her fans and now software developers in a new way, in her own voice.  Working side-by-side with her (best working lunch ever!), our team created an API in her voice using the new Microsoft Azure API Management service.

This API lets app developers “snatch” content including choons (songs), flicks (videos), and fotos (pictures) and lets them mash it up in new creative ways.   With her songs, Neon wanted to include more metadata than the typical music API might expose, like the “bevy”, “grub”, “hood”, “mood” to make the API hers.  It was a really fun collaboration creating an API that was expressive and a bit cheeky.  Take a look at the Neon API portal here.

Neon’s interesting background has given her a unique perspective and her songs have empowered many people, including girls and people in the LBGT community.  Microsoft’s efforts to include more people in the world of coding and software development, makes a Neon Hitch API a great match with Microsoft’s mission.  Hopefully more of Neon’s fans will try coding first with her API.

Because we used the Azure API Management service, Neon was able to design the API with her own terminology as well as monitor usage and have an fully-featured API portal created automatically.  All she needed to do was “Neonize” it.  The API portal has a testing console for each of the Snatch APIs as well as code samples generated in JavaScript, C#, PHP, Ruby, Curl, Java, and Objective C to make it simple to start using the API.

We released the API today at the South by Southwest Music Hackathon in Austin, Texas and developers have already started their 24-hour hacking marathon using APIs from Neon, Ableton, Kinect for Windows, and more.  We can’t wait to see what developers do with it.  You can start with the Neon API now and sign up for a free Royal key today.

https://neonhitch.portal.azure-api.net/

I would like to walk you through the process of using the MAT with WPF applications, where the process is slightly different than with Windows Store and Phone apps.

Prerequisites

1. Install Microsoft Visual Studio 2013 Update 4
2. Install Microsoft Multilingual App Toolkit

Start Using MAT with WPF Apps

1. Open the WPF project in Visual Studio
2. In the project settings, Application…Assembly Info, set the Neutral Language to your language; I selected English (United States)
3. In the Tools menu, select Enable Multilingual App Toolkit.  When you do this, a Resources.qps-ploc.xlf file will be automatically added to the project Properties.  This will be used to create “Pseudo” translation.  Pseudo Language is an artificial modification of the software product intended to simulate real language localization. The pseudo language can be used to detect potential localizability issues or bugs early in the project cycle, before the actual localization starts.
4. In the Solution Explorer, open the Properties…..Resources.resx and in the top bar of the editor, change the Access Modifier from Internal to Public
5. During the build process, the MAT will automatically update the .xlf files, keeping them in sync. 
6. When you add new strings to the Resources.resx file, build the project and then right click on .xlf files in the solution explorer and select Generate machine translations.
7. For the strings in Xaml, you should use the x:Static extension to have the strings point to the .resx file:
   <Window x:Class="MultilingualApp.MainWindow"
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   xmlns:properties="clr-namespace:MultilingualApp.Properties"
   Height="350" Width="525">
       <Grid>
           <StackPanel>
               <TextBlock
                    Text="{x:Static properties:Resources.TranslateMe}"/>
               <Button
                    Content="{x:Static properties:Resources.PressMe}"/>
           </StackPanel>
       </Grid>
   </Window>
   
8. You should use the Resources.resx file for all of the localizable strings in your app.
9. Add additional languages by right-clicking on the project, and selecting Add translation languages…
10. You can use the Microsoft Translator Service to generate translations or send the .xlf files to translation services as it is in the localization industry standard XLIFF file format.

11. In addition to language translations, the MAT also use the Microsoft Terminology APIs (Language Portal Provider).  This enables direct access to Microsoft’s product translation memories.  See this article for more details: http://blogs.msdn.com/b/matdev/archive/2014/07/01/new-version-of-microsoft-terminology-api-launched.aspx

Testing Pseudo Language

WPF uses the OS language by default so Thread.CurrentThread.CurrentUICulture and Thread.CurrentThread.CurrentCulture need to be manually set to ‘qps-PLOC’ since it is not a log-in language.  Here is how you can easily do that:

You can now see what the Xaml above translated to with the Pseudo translation:

Summary

The Multilingual App Toolkit along with the Microsoft Translator Service has made a difficult and often expensive process of globalizing and localizing apps easy and straightforward.  Now it is easy to localize WPF application as well as Windows Store and Windows Phone apps.

Thanks

Thanks to Cameron Lerum from the MAT team for helping with this article.

Apps for Office

Now with Office 2013 and Office 365, there is a new development model where developers can build “Apps for Office” using HTML, CSS, and JavaScript to build apps that can be added to Microsoft Office.  With this, Microsoft also launched an Apps for Office store where these apps can be listed and sold.  I was able to take what I built earlier as a Word add-in and move it to the cloud with Microsoft Azure Websites and listed it in the Apps for Office store.  This enables users of Office 2013 and Office 365 to now use the Xaml Generator in Microsoft Office Word wherever they are seeing it.

Xaml Generator

With this new App for Office, you select the text that you want to convert in Microsoft Word and then press the [Generate Xaml] button.  The generated text is then put in the task pane which you can then copy to Visual Studio to use in an app.  With this new release, I added Windows Xaml which can be used for Windows Universal Apps released for Windows 8.1 and Windows Phone 8.1.

To use the Xaml Generator in Word 2013

1. Open the Insert tab and press the Xaml Generator button or find it in the Store button in the insert tab.  Once you install the app, it should show up as a task pane to the right of the editing workspace.
2. Select the text that you want to convert in Word.
3. Choose the Xaml type in the drop-down and press the Generate Xaml button.  The appropriate Xaml will then be generated and put into the text area.
4. Press the Copy to clipboard button to copy the text in the output window to your clipboard.
5. Paste the Xaml in your clipboard into Visual Studio or Expression Blend.

Get Xaml Generator here.

I’d loved your feedback on the app as it’s my first App for Office.

Working with a partner, we found out that the typical Xaml page navigation events (Page.OnNavigatedTo and Page.OnNavigatedFrom) don’t fire immediately when the user clicks on one of the companion ads on Windows.  This can be problematic if you need to pause the video playback when the user clicks on the ad.  In this case, you need to handle the CoreWindow.VisibilityChanged event.  Attach this event on Page.OnNavigatedTo and detach it on the Page.OnNavigatedFrom. 

protected override void OnNavigatedTo(NavigationEventArgs e)
{
    base.OnNavigatedTo(e);

    this.navigationHelper.OnNavigatedTo(e);

    CoreWindow.GetForCurrentThread().VisibilityChanged += 

        this.OnVisibilityChanged;
}

protected override void OnNavigatedFrom(NavigationEventArgs e)
{
    base.OnNavigatedFrom(e);

    CoreWindow.GetForCurrentThread().VisibilityChanged –= 

        this.OnVisibilityChanged;
}

At that point, the code that you need to call would be something like this:

private void OnVisibilityChanged(

    CoreWindow sender, 

    VisibilityChangedEventArgs args)
{
    if (args.Visible)
    {
        this.Player.InteractiveViewModel.PlayResume();
    }
    else
    {
        this.Player.InteractiveViewModel.Pause();
    }
}

As the Player Framework is Open Source, the app developer community is encouraged to download the source code, fork it, and suggestion fixes and enhancements.  The latest source code in the player framework is in the “universal” branch. 

Because the Surface Pro 3 has a very high resolution screen (2160 x1440) I have found it useful to adjust both Windows and Photoshop CC 2014 to make the UI text a bit bigger than normal.  If you find the menus and UI text too small to read in Photoshop on the Surface’s screen, here is what you can do to make them bigger:

Configuring Windows

1. From the start screen, tap on the Desktop tile, or press the search icon in the upper right and type “desktop” to get to the desktop
2. With your trackpad, right-click on an empty space on the desktop to see a context menu or tap and hold your finger on the desktop and then pull your finger away from the screen. 
   
3. Tap on the Screen resolution menu item
4. In the Screen resolution window, tap on the link Make text and other items larger or smaller
   
5. In the Display window, move the slider all the way to the right (Larger) and press the Apply button at the bottom of the Window.  You may have to wait a moment while the settings are applied.
    
6. Once that is done, press the [x] button in the upper right of the Display window.

Configuring Photoshop CC 2014

1. Press the Windows Key on the keyboard or the right side of the screen to go the start screen
2. From the start screen, launch Photoshop:
1. Type “photo” and you will see “Adobe Photoshop CC 2014” listed in the search results: tap that or
2. Swipe up with your finger on the start screen and you will see the full app list – where “Adobe Photoshop CC 2014” is listed
3. Once Photoshop has started, open the preferences dialog from the top menu: Edit…Preferences…Experimental Features…
4. Check the option to “Scale UI 200% for high-density displays, press OK and restart Photoshop.
   

Palm-Block Technology

When writing or drawing on Windows you can rest your palm on the screen once the pen is within range (about 1cm).   This takes a bit on getting used to but once you have the muscle-memory, drawing with the pressure-sensitive pen gets really fun and intuitive. 

More Tips and Resources

As you explore your new Surface, here are some more resources to get acquainted or re-acquainted with Windows:

• Windows How-To
• Surface for Creative Professionals
• Surface Support