Skip to content

Commit 3705fd8

Browse files
avivaceavivace
committed
Implemented TTS, TTS popup, Take photo, Record Video API call and button UI logic
1 parent 64077a8 commit 3705fd8

File tree

1 file changed

+60
-30
lines changed

1 file changed

+60
-30
lines changed

‎src/components/Control.vue

Lines changed: 60 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -30,8 +30,7 @@
3030
<v-layout row wrap>
3131
<v-flex xs12 lg6>
3232
<img :src="webcamStream"/>
33-
34-
</v-flex>
33+
</v-flex>
3534
<v-flex xs12 lg6>
3635
<br>
3736
<v-layout row wrap>
@@ -62,36 +61,28 @@
6261
</v-flex>
6362
<v-flex xs12 sm12>
6463
<br><br><br>
65-
<v-btn-toggle>
66-
<v-btn large color="blue-grey darken-4" class="white--text" v-on:click="say()">
67-
Pronuncia
68-
<v-icon dark>chat_bubble_outline</v-icon>
69-
</v-btn>
70-
</v-btn-toggle>
64+
<v-btn large color="blue-grey darken-1" v-on:click="ttsdialog = true" class="controlBtn" :disabled="!ttsBtnEnabled">
65+
Pronuncia
66+
<v-icon>chat_bubble_outline</v-icon>
67+
</v-btn>
7168
</v-flex>
7269
<v-flex xs12 sm12>
73-
<v-btn-toggle>
74-
<v-btn large color="blue-grey darken-4" class="white--text" v-on:click="takePhoto()" :disabled="!photoBtnEnabled">
75-
Scatta foto
76-
<v-icon dark>camera_alt</v-icon>
77-
</v-btn>
78-
</v-btn-toggle>
70+
<v-btn large color="blue-grey darken-1" class="controlBtn" v-on:click="takePhoto()" :disabled="!photoBtnEnabled">
71+
Scatta foto
72+
<v-icon dark>camera_alt</v-icon>
73+
</v-btn>
7974
</v-flex>
8075
<v-flex xs12 sm12>
81-
<v-btn-toggle>
82-
<v-btn large color="blue-grey darken-4" class="white--text" v-on:click="videoHandler()" :disabled="!videoBtn.enabled">
83-
{{ videoBtn.text }}
84-
<v-icon dark>{{ videoBtn.icon }} </v-icon>
85-
</v-btn>
86-
</v-btn-toggle>
76+
<v-btn large color="blue-grey darken-1" class="controlBtn" v-on:click="videoHandler()" :disabled="!videoBtn.enabled">
77+
{{ videoBtn.text }}
78+
<v-icon dark>{{ videoBtn.icon }} </v-icon>
79+
</v-btn>
8780
</v-flex>
8881
<v-flex xs12 sm12>
89-
<v-btn-toggle>
90-
<v-btn large color="blue-grey darken-4" class="white--text" v-on:click="showGallery()">
91-
Galleria
92-
<v-icon dark>photo_library</v-icon>
93-
</v-btn>
94-
</v-btn-toggle>
82+
<v-btn large color="blue-grey darken-1" class="controlBtn" v-on:click="showGallery()">
83+
Galleria
84+
<v-icon dark>photo_library</v-icon>
85+
</v-btn>
9586
</v-flex>
9687
</v-layout>
9788
</v-flex>
@@ -111,6 +102,21 @@
111102
Chiudi
112103
</v-btn>
113104
</v-snackbar>
105+
<v-dialog v-model="ttsdialog" width="600px">
106+
<v-card>
107+
<v-card-title>
108+
<span class="headline">Text to Speech</span>
109+
</v-card-title>
110+
<v-card-text>
111+
<v-text-field v-model="ttstext" label="Frase da pronunciare" solo></v-text-field>
112+
</v-card-text>
113+
<v-card-actions>
114+
<v-spacer></v-spacer>
115+
<v-btn color="gray darken-1" flat="flat" @click="ttsdialog=false">Annulla</v-btn>
116+
<v-btn color="green darken-1" flat="flat" @click="say()">Pronuncia</v-btn>
117+
</v-card-actions>
118+
</v-card>
119+
</v-dialog>
114120
</v-app>
115121
</template>
116122
<script>
@@ -121,12 +127,23 @@ export default {
121127
name: 'HelloWorld',
122128
methods: {
123129
say() {
124-
130+
let CBv1 = this.$data.CBv1
131+
let axios = this.$axios;
132+
axios.get(CBv1 + '/bot', { params: { 'cmd': 'say', 'param1': this.$data.ttstext } })
133+
.then(function(response) {
134+
this.$data.ttsBtnEnabled = false
135+
this.$data.ttsdialog = false
136+
this.$data.snackText = 'Sto pronunciando'
137+
this.$data.snackbar = true
138+
setTimeout(function() {
139+
this.$data.ttsBtnEnabled = true
140+
}.bind(this), this.$data.ttstext.length * 200)
141+
}.bind(this))
125142
},
126143
takePhoto() {
127144
let CBv1 = this.$data.CBv1
128145
let axios = this.$axios;
129-
axios.get(CBv1, { params: { 'cmd': 'take_photo' } })
146+
axios.get(CBv1 + '/bot', { params: { 'cmd': 'take_photo' } })
130147
.then(function(response) {
131148
this.$data.snackText = 'Foto scattata'
132149
this.$data.snackbar = true
@@ -146,10 +163,11 @@ export default {
146163
recordVideo() {
147164
let CBv1 = this.$data.CBv1
148165
let axios = this.$axios;
149-
axios.get(CBv1, { params: { 'cmd': 'video_rec' } })
166+
axios.get(CBv1 + '/bot', { params: { 'cmd': 'video_rec' } })
150167
.then(function(response) {
151168
this.$data.snackText = 'Registrazione Avviata'
152169
this.$data.snackbar = true
170+
this.$data.photoBtnEnabled = false
153171
this.$data.videoBtn.text = 'Ferma registrazione video'
154172
this.$data.videoBtn.icon = 'stop'
155173
this.videoBtn.action = 'stop'
@@ -159,7 +177,7 @@ export default {
159177
stopVideoRecording() {
160178
let CBv1 = this.$data.CBv1
161179
let axios = this.$axios;
162-
axios.get(CBv1, { params: { 'cmd': 'video_rec' } })
180+
axios.get(CBv1 + '/bot', { params: { 'cmd': 'video_stop' } })
163181
.then(function(response) {
164182
this.$data.snackText = 'Registrazione terminata'
165183
this.$data.snackbar = true
@@ -169,6 +187,7 @@ export default {
169187
this.$data.videoBtn.enabled = true
170188
this.$data.videoBtn.text = 'Registra Video'
171189
this.$data.videoBtn.icon = 'videocam'
190+
this.$data.photoBtnEnabled = true
172191
}.bind(this), 1000)
173192
}.bind(this))
174193
},
@@ -278,13 +297,16 @@ export default {
278297
},
279298
data() {
280299
return {
300+
ttstext: null,
301+
ttsdialog: false,
281302
snackText: null,
282303
snackbar: false,
283304
webcamStream: process.env.CB_ENDPOINT + process.env.APIv1 + '/video/stream',
284305
CB: process.env.CB_ENDPOINT + process.env.APIv2,
285306
CBv1: process.env.CB_ENDPOINT + process.env.APIv1,
286307
status: null,
287308
pressDuration: null,
309+
ttsBtnEnabled: true,
288310
photoBtnEnabled: true,
289311
videoBtn: {
290312
'text': 'Registra Video',
@@ -306,4 +328,12 @@ export default {
306328
</script>
307329
<!-- Add "scoped" attribute to limit CSS to this component only -->
308330
<style scoped>
331+
.controlBtn {
332+
color: white;
333+
margin: 2px 3px;
334+
padding-right: 25px; /* 32 - icon additional margin */
335+
}
336+
.controlBtn .v-icon {
337+
margin: 7px;
338+
}
309339
</style>

0 commit comments

Comments
 (0)