update ui to use properties over hard coded (#21)

CatalystCode · Jan 30, 2020 · ac80d4e · ac80d4e
1 parent ac0a13c
commit ac80d4e
Show file tree

Hide file tree

Showing 5 changed files with 67 additions and 17 deletions.
diff --git a/examples/ionic-angular/package.json b/examples/ionic-angular/package.json
@@ -24,6 +24,7 @@
     "@ionic-native/status-bar": "^5.0.0",
     "@ionic/angular": "^4.11.8",
     "cordova-android": "8.1.0",
+    "cordova-browser": "6.0.0",
     "cordova-ios": "^5.1.1",
     "core-js": "^2.5.4",
     "rxjs": "~6.5.1",
@@ -76,7 +77,8 @@
     },
     "platforms": [
       "android",
-      "ios"
+      "ios",
+      "browser"
     ]
   }
-}
+}
diff --git a/examples/ionic-angular/src/app/speechToTextTab/speechToText.page.html b/examples/ionic-angular/src/app/speechToTextTab/speechToText.page.html
@@ -20,11 +20,14 @@
   auto-grow="true"> 
   </ion-textarea>
 </ion-item>
-  <ion-button 
-  (click)="captureSpeechButtonClicked()"
-  name="captureButton"
-  expand="block" 
-  fill="outline">
-    Capture Speech
-  </ion-button>
+<ion-button 
+name="captureButton"
+round
+outline
+(click)="captureSpeechButtonClicked()"
+expand="block"
+color="{{captureButtonColor}}"
+>
+  {{captureButtonText}}
+</ion-button>
 </ion-content>
diff --git a/examples/ionic-angular/src/app/speechToTextTab/speechToText.page.ts b/examples/ionic-angular/src/app/speechToTextTab/speechToText.page.ts
@@ -1,15 +1,36 @@
-import { Component } from '@angular/core';
+import { Component, ViewChild, ElementRef } from '@angular/core';
 
 @Component({
   selector: 'app-speechToTextTab',
   templateUrl: 'speechToText.page.html',
   styleUrls: ['speechToText.page.scss']
 })
+
 export class SpeechToTextPage {
+  captureButtonText = 'Capture Speech';
+  captureButtonColor = 'primary';
+  capturePressed = false;
 
-  constructor() {}
+  constructor() { }
 
   captureSpeechButtonClicked() {
-    // Capture voice input
+    this.toggleSpeechButton(!this.capturePressed);
+  }
+
+  stopAudioCapture() {
+    this.toggleSpeechButton(false);
+  }
+
+  toggleSpeechButton(state: boolean) {
+    if (state) {
+      this.capturePressed = true;
+      this.captureButtonText = 'Stop Capture';
+      this.captureButtonColor = 'danger';
+    } else {
+      alert('Audio capture ended');
+      this.capturePressed = false;
+      this.captureButtonText = 'Capture Speech';
+      this.captureButtonColor = 'primary';
+    }
   }
 }
diff --git a/examples/ionic-angular/src/app/textToSpeech/textToSpeech.page.html b/examples/ionic-angular/src/app/textToSpeech/textToSpeech.page.html
@@ -21,10 +21,13 @@
     </ion-textarea>
   </ion-item>
   <ion-button 
-  (click)="playbackButtonClicked()"
   name="playbackButton"
-  expand="block" 
-  fill="outline">
-    Speak Text
+  round
+  outline
+  (click)="playbackButtonClicked()"
+  expand="block"
+  color="{{playbackButtonColor}}"
+  >
+    {{playbackButtonText}}
   </ion-button>
 </ion-content>
diff --git a/examples/ionic-angular/src/app/textToSpeech/textToSpeech.page.ts b/examples/ionic-angular/src/app/textToSpeech/textToSpeech.page.ts
@@ -5,11 +5,32 @@ import { Component } from '@angular/core';
   templateUrl: 'textToSpeech.page.html',
   styleUrls: ['textToSpeech.page.scss']
 })
+
 export class TextToSpeechPage {
+  playbackButtonText = 'Speak Text';
+  playbackButtonColor = 'primary';
+  playbackButtonPressed = false;
 
   constructor() {}
 
   playbackButtonClicked() {
-    // Read back text
+    this.togglePlaybackButton(!this.playbackButtonPressed);
+  }
+
+  stopAudioPlayback() {
+    this.togglePlaybackButton(false);
+  }
+
+  togglePlaybackButton(state: boolean) {
+    if (state) {
+      this.playbackButtonPressed = true;
+      this.playbackButtonText = 'Stop Playback';
+      this.playbackButtonColor = 'danger';
+    } else {
+      alert('Playback stopped');
+      this.playbackButtonPressed = false;
+      this.playbackButtonText = 'Speak Text';
+      this.playbackButtonColor = 'primary';
+    }
   }
 }