Ink Recognizer with Xamarin |

I am using Azure Cognitive Services for many projects. In this article, I am going to explain how to use Ink Recognizer with mobile projects

You have to create Ink Recognizer Service in Marketplace then you can get keys at the resource management tab

I create a new Xamarin.Forms app with .netstandart library then I install SignaturePad nuget package.

I’ll try translate drawing object to text with Ink Recognizer. I Just added SignaturePad.Forms to xaml namespace on my MainPage

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:controls="clr-namespace:SignaturePad.Forms;assembly=SignaturePad.Forms"
             x:Class="InkRecognizerSample.MainPage">

    <StackLayout>
        <controls:SignaturePadView
	            x:Name="signatureView"
                HorizontalOptions="FillAndExpand"
                VerticalOptions="FillAndExpand"
	            StrokeWidth="3"
	            StrokeColor="Black"
	            BackgroundColor="White"
                PromptText="" />
        <Button Text="Save"
                Clicked="Save"/>
    </StackLayout>

</ContentPage>

public partial class MainPage : ContentPage
    {
        static readonly HttpClient client = new HttpClient();
        public MainPage()
        {
            InitializeComponent();

            client.DefaultRequestHeaders.Add("x-ms-client-request-id", "");
            client.DefaultRequestHeaders.Add("Ocp-Apim-Subscription-Key",
                "your key");
            client.DefaultRequestHeaders.Add("Accept", "application/json");
        }

        async void Save(object sender, EventArgs e)
        {
            var signatureStrokes = signatureView.Strokes;
            var id = 100;

            var requestModel = new InkServiceRequestModel
            {
                language = "tr-TR"
            };

            foreach (var strokes in signatureStrokes)
            {
                var stroke = new Stroke
                {
                    id = id
                };
                foreach (var s in strokes)
                {
                    var x = s.X.ToString("##.####").Replace(',', '.');
                    var y = s.Y.ToString("##.####").Replace(',', '.');
                    stroke.points += $"{x},{y},";
                }

                stroke.points = stroke.points.Remove(stroke.points.Length - 1);
                requestModel.strokes.Add(stroke);

                id++;
            }
            var body = JsonConvert.SerializeObject(requestModel);
            var result = await client.PutAsync("https://api.cognitive.microsoft.com/inkrecognizer/v1.0-preview/recognize",
                new StringContent(body, Encoding.UTF8, "application/json"));

            var response = await result.Content.ReadAsStringAsync();

            var data = JsonConvert.DeserializeObject<InkServiceResponseModel>(response);
        }
    }

We can get X and Y points collection in Strokes property.