Sketch 360 comes to the Microsoft Surface Duo

In 2018 Michael Scherotter, a Microsoft Principal Program Manager, released Sketch 360 to the Microsoft Store.

The app lets you 360 panoramic sketches easily on your Windows tablet.

Today Scherotter published a blog post on his process of bringing the same app to Android and specifically enhancing it for the Surface Duo.

He notes that thee Surface Duo uniquely supported the pressure-sensitive Surface Pen, and also had a dual-screen interface which matched very well with the two-pane UI of Sketch 360 on Windows.

He, therefore, decided to rebuilt Sketch 360 using Xamarin.Forms, so he could target Surface Duo, other pen-native Android devices like the Samsung Galaxy Note, and any other modern Android devices as well as Apple iOS devices with a single app.

The architecture of the app consists of two sides, a drawing canvas, and a 360 view. Every time the user adds a stroke, the 360 view is updated and pans to the ending point of the stroke just added. The drawing canvas on Windows used the native InkCanvas control which made it easy to collect and render ink. In moving to Xamarin Forms, he needed to rewrite most of the C# and Xaml code and needed to find something to provide ink input since there was no analog to the InkCanvas for Xamarin Forms. He created an InkCanvasView using SkiaSharp which handled inking input and rendering, tooled to offer a similar API surface to UWP InkCanvas, and implementing just enough of it to support the Sketch 360 core scenarios:

• Drawing and erasing ink strokes
• Pressure-sensitive ink strokes with multiple colors and variable thickness
• A virtual canvas that supports panning and zooming
• Wet stroke updating to enable curved guides while drawing
• Loading and saving vector ink data

In Xamarin Forms he serialized ink to a simple JSON format and modified the Windows version to be able to read that format in addition to the Windows ink. This means that you can start a sketch on your phone, save the .sketch360 file to your OneDrive, and open it up again on a larger Surface device to complete it.

Michael found the new Xamarin Forms TwoPaneView API for dual-screen devices made it easy to define a UI that adapts fluidly from a single pane to two, portrait, or landscape.

Landscape	Portrait
Spanned horizontally	Spanned vertically

Xamarin forms made the process of creating a cross-platform mobile creative app straightforward, and with the additional tools in the Xamarin Essentials, he was able to make it as functional and performant as a native app. He was also able to do most of the development using the Surface Duo Emulator without having a physical device in-hand.

The 360 view is a WebView control using Babylon.JS, an open-source JavaScript 3D framework which has a PhotoDome API.  He was able to use the HTML/JavaScript code using Babylon.JS with very little modifications from the Windows version.

The completed app is now available on Google Play and works with any modern Android device, but works best with devices that support pressure-sensitive pens like the Surface Duo and Samsung Galaxy Note.

Check out the app here, and read about the full development process at the Microsoft DevBlog.

[appbox googleplay com.microsoft.garage.sketch360app]