Reworked to be cleaner UX

Author: profexorgeek

WebServices/CognitiveSpeechService/CognitiveSpeechService/CognitiveSpeechService/App.xaml.cs

@@ -10,7 +10,7 @@ public App()
         {
             InitializeComponent();
 
-            MainPage = new MainPage();
+            MainPage = new NavigationPage(new MainPage());
         }
 
         protected override void OnStart()

WebServices/CognitiveSpeechService/CognitiveSpeechService/CognitiveSpeechService/MainPage.xaml

@@ -4,22 +4,43 @@
              xmlns:d="http://xamarin.com/schemas/2014/forms/design"
              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
              mc:Ignorable="d"
-             x:Class="CognitiveSpeechService.MainPage">
+             x:Class="CognitiveSpeechService.MainPage"
+             Title="Speech Services Transcription"
+             Padding="10,35,10,10">
 
     <StackLayout>
-        <Button Text="Enable Microphone"
-                HorizontalOptions="CenterAndExpand"
-                VerticalOptions="Start"
-                Clicked="EnableMicClicked" />
+        <Frame BorderColor="DarkGray"
+               CornerRadius="10"
+               HeightRequest="300"
+               WidthRequest="280"
+               HorizontalOptions="Center"
+               VerticalOptions="Start"
+               BackgroundColor="LightGray">
+            <ScrollView x:Name="scroll">
+                <Label x:Name="transcribedText"
+                       Margin="10,10,10,10"
+                       />
+            </ScrollView>
+        </Frame>
 
-        <Button Text="Start Transcribing" 
-           HorizontalOptions="Center"
-           VerticalOptions="Start"
-           Clicked="StartTranscribingClicked"/>
-        <Label x:Name="transcribedText"
-              Text="Press the Start Transcribing button to begin transcribing speech..."
-              HorizontalOptions="Center"
-              VerticalOptions="CenterAndExpand" />
+        <ActivityIndicator x:Name="transcribingIndicator"
+                           HorizontalOptions="Center"
+                           VerticalOptions="Start"
+                           WidthRequest="300"
+                           IsRunning="False" />
+        <Button x:Name="transcribeButton"
+                WidthRequest="300"
+                HeightRequest="50"
+                Text="Transcribe"
+                TextColor="White"
+                CornerRadius="10"
+                BackgroundColor="Green"
+                BorderColor="DarkGray"
+                BorderWidth="1"
+                FontAttributes="Bold"
+                HorizontalOptions="Center"
+                VerticalOptions="Start"
+                Clicked="TranscribeClicked"/>
     </StackLayout>
 
 </ContentPage>

WebServices/CognitiveSpeechService/CognitiveSpeechService/CognitiveSpeechService/MainPage.xaml.cs

@@ -13,52 +13,116 @@ namespace CognitiveSpeechService
     public partial class MainPage : ContentPage
     {
         SpeechRecognizer recognizer;
-        IMicrophoneService microphoneService;
+        IMicrophoneService micService;
+        bool isTranscribing = false;
 
         public MainPage()
         {
             InitializeComponent();
 
-            microphoneService = DependencyService.Resolve<IMicrophoneService>();
+            micService = DependencyService.Resolve<IMicrophoneService>();
         }
 
-        async void EnableMicClicked(object sender, EventArgs e)
+        async void TranscribeClicked(object sender, EventArgs e)
         {
-            bool isMicEnabled = await microphoneService.GetPermissionAsync();
-            if(!isMicEnabled)
+            bool isMicEnabled = await micService.GetPermissionAsync();
+
+            // Speech recognizer 
+            if(recognizer == null)
             {
-                UpdateTranscription("Please grant access to the microphone!", true);
+                var config = SpeechConfig.FromSubscription(Constants.CognitiveServicesApiKey, Constants.CognitiveServicesRegion);
+                recognizer = new SpeechRecognizer(config);
+                recognizer.Recognized += (obj, args) =>
+                {
+                    UpdateTranscription(args.Result.Text);
+                };
             }
-        }
 
-        void StartTranscribingClicked(object sender, EventArgs e)
-        {
-            var config = SpeechConfig.FromSubscription(Constants.CognitiveServicesApiKey, Constants.CognitiveServicesRegion);
+            // EARLY OUT: make sure mic is accessible
+            if (!isMicEnabled)
+            {
+                UpdateTranscription("Please grant access to the microphone!");
+                return;
+            }
+
+            // if already transcribing, stop speech recognizer
+            if(isTranscribing)
+            {
+                Device.BeginInvokeOnMainThread(() =>
+                {
+                    transcribingIndicator.IsRunning = false;
+                });
 
-            UpdateTranscription("", true);
+                try
+                {
+                    await recognizer.StopContinuousRecognitionAsync();
+                }
+                catch(Exception ex)
+                {
+                    UpdateTranscription(ex.Message);
+                }
+                
+                isTranscribing = false;
+            }
 
-            recognizer = new SpeechRecognizer(config);
-            recognizer.StartContinuousRecognitionAsync();
-            recognizer.Recognized += (obj, args) =>
+            // if not transcribing, clear existing text and start speech recognizer
+            else
             {
-                UpdateTranscription(args.Result.Text);
-            };
+                Device.BeginInvokeOnMainThread(() =>
+                {
+                    transcribingIndicator.IsRunning = true;
+                    InsertDateTimeRecord();
+                });
+
+                try
+                {
+                    await recognizer.StartContinuousRecognitionAsync();
+                }
+                catch(Exception ex)
+                {
+                    UpdateTranscription(ex.Message);
+                }
+                
+                isTranscribing = true;
+            }
+
+            UpdateButton();
         }
 
-        void UpdateTranscription(string newText, bool clearText = false)
+        void UpdateTranscription(string newText)
         {
-            // Force on main thread since this is likely called
-            // from a background event
             Device.BeginInvokeOnMainThread(() =>
             {
-                if(clearText)
+                if(!string.IsNullOrWhiteSpace(newText))
                 {
-                    transcribedText.Text = "";
+                    transcribedText.Text += $"{newText}\n";
+                    scroll.ScrollToAsync(0, scroll.Height, true);
                 }
-
-                transcribedText.Text += newText;
             });
 
         }
+
+        void InsertDateTimeRecord()
+        {
+            var msg = $"=================\n{DateTime.Now.ToString()}\n=================";
+            UpdateTranscription(msg);
+        }
+
+        void UpdateButton()
+        {
+            Device.BeginInvokeOnMainThread(() =>
+            {
+                if(isTranscribing)
+                {
+                    transcribeButton.Text = "Stop";
+                    transcribeButton.BackgroundColor = Color.Red;
+                }
+                else
+                {
+                    transcribeButton.Text = "Transcribe";
+                    transcribeButton.BackgroundColor = Color.Green;
+                }
+            });
+        }
     }
 }