-
Notifications
You must be signed in to change notification settings - Fork 35
Expand file tree
/
Copy pathnotext2.html
More file actions
754 lines (753 loc) · 21.2 KB
/
Copy pathnotext2.html
File metadata and controls
754 lines (753 loc) · 21.2 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta content="App Inventor for Android" name="description" />
<meta content="Android, Blocks App Inventor, Mobile, Phone, IDE" name="keywords" />
<title>
No Text While Driving (Part 2) - App Inventor for Android
</title>
<link href="/static/images/appinventor-16.png" rel="SHORTCUT ICON" type="image/ico" />
<link href="/static/images/appinventor-16.png" rel="icon" type="image/png" />
<link href="/static/css/appinventor.css" rel="stylesheet" />
<script src="http://www.google.com/js/gweb/analytics/autotrack.js">
</script>
<script>
var tracker = new gweb.analytics.AutoTrack({
profile: 'UA-5856106-2'
});
</script>
<script language = "JavaScript" src="/static/scripts/HeaderAndFooter.js"></script>
<style>
img.c2 {border-width:0}
div.c1 {clear:both;}
</style>
</head>
<body>
<script language = "JavaScript">createHeader('<div id="navigation-breadcrumb"> <a href="/learn/">Learn</a> > <a href="/learn/tutorials">Tutorials</a> > No Text While Driving Part 2 ');</script><br>
<div id="aiac">
<div class="main-container">
<div class="customhr customhr-gray">
</div>
<div class="content">
<div class="content-body">
<div class="learn-page">
<h1>
No Text While Driving, Part 2
</h1>
<div class="imagecontainer">
<img align="right" alt="" border="0" src="NoText2Assets/emulator.png" />
</div>
<span align="RIGHT"><a href = "http://cs.usfca.edu/~wolber/appinventor/bookSplits/ch4NoTexting.pdf" title="Get the updated, refined version of this tutorial from the book, App Inventor: Create your own Android Apps">Download Book Chapter</a><img src="/static/images/pdficon_small.png" /></span>
<p>
You know that texting while driving is dangerous, so you've created and installed
the
<a href="/learn/tutorials/notext/notext.html">
No Text While Driving app
</a>
on
your phone. Now, when you drive you open that app and let it auto-respond to
incoming texts.
</p>
<p>
But the jingle of the texts coming in is killing you with curiosity-- wouldn't it
be great if you could hear the texts spoken aloud? With Part II of the tutorial,
you'll extend the app so that it speaks out both the message and who sent it. And
since you're making some changes anyway, you'll modify the auto-response so it
reports your whereabouts in the reply: "Sorry, I'm driving and I'm at 1600
Pennsylvania Avenue".
<br />
</p>
<p>
Before completing this tutorial you should complete
<a href="/learn/tutorials/notext/notext.html">
part I
</a>
.
</p>
<h2>
Getting Started
</h2>
<p>
For this app to work, you'll need to load a text-to-speech module,
<em>
Text-To-Speech Extended
</em>
, on your phone. App Inventor and other apps rely
on this module for the underlying voice synthesis. If you don't already have it,
you can download onto your phone using the Android Market:
</p>
<ul>
<li>
On your phone, open the Market app
</li>
<li>
Search for TTS
</li>
<li>
Select the app
<em>
Text-To-Speech Extended
</em>
to install
</li>
</ul>
<p>
Once the
<em>
Text-To-Speech
</em>
module is installed, open it to test its features.
When it opens, set the default language as desired. Then select "Listen to
Preview". If you don't hear anything, make sure the volume on your phone is turned
on. You can also change the default Engine which can enhance the quality of the
spoken words.
</p>
<p>
Once the Text-To-Speech module is installed and configured as desired, you can use
the
<span class="ButtonText">
TextToSpeech
</span>
component within App Inventor.
Begin by opening App Inventor and your NoTextWhileDriving project from part I.
<span class="ButtonText">
SaveAs
</span>
the project and name the new copy
"NoTextWhileDriving2".
</p>
<h2>
What you'll learn
</h2>
<p>
The app demonstrates two powerful components:
</p>
<ul>
<li>
The
<span class="ButtonText">
LocationSensor
</span>
component to determine the
phone's location, and
</li>
<li>
The
<span class="ButtonText">
TextToSpeech
</span>
component to speak the
incoming texts aloud.
</li>
</ul>
<p>
These components encapsulate some advanced functionality, but using them in
building an app is relatively straight-forward.
<br />
</p>
<h2>
Set up the Components
<br />
</h2>
<p>
Leave the user interface for
<em>
NoTextWhileDriving, part II
</em>
the same as in
part I. But in the Component Designer, add two non-visual components: a
<span class="ButtonText">
LocationSensor
</span>
and a
<span class="ButtonText">
TextToSpeech
</span>
component. You do not need to set any properties
of the components.
</p>
<h2>
Add behaviors to the components
<br />
</h2>
<p>
The behavior for part I of
<em>
No Text While Driving
</em>
was: "when a text is
received, the message the user has put in
<span class="ButtonText">
MessageTextbox
</span>
is sent as a text message response to the
sender."
</p>
<p>
For part II, the behavior will be changed to: "when a text is received, it is
spoken aloud and a message, including the text in
<span class="ButtonText">
MessageTextbox
</span>
and the phone's current location, is sent in
response to the sender.
</p>
<h2>
<strong>
Speaking the text aloud
</strong>
</h2>
<p>
When a text message is received by the phone, the
<span class="ButtonText">
Texting.MessageReceived
</span>
event is triggered. The blocks from
Part I handle this event by setting the
<span class="ButtonText">
PhoneNumber
</span>
and
<span class="ButtonText">
Message
</span>
properties of the
<span class="ButtonText">
Texting
</span>
component appropriately and then sending the response
text.
</p>
<p>
Extend the blocks from Part I by using the
<span class="ButtonText">
TextToSpeech
</span>
component to speak both the sender's phone number
and the message. You'll add the following blocks to the exisiting
<span class="ButtonText">
Texting.MessageReceived
</span>
blocks:
</p>
<div class="advtutorial">
<table>
<tbody>
<tr>
<td class="tbl-header">
Block Type
</td>
<td class="tbl-header">
Drawer
</td>
<td class="tbl-header">
Purpose
</td>
</tr>
<tr>
<td>
<span class="ButtonText">
TextToSpeech1.Speak
</span>
</td>
<td>
TextToSpeech1
</td>
<td>
speak out the message received
</td>
</tr>
<tr>
<td>
<span class="ButtonText">
make text
</span>
</td>
<td>
Text
</td>
<td>
build the words that are to be spoken
</td>
</tr>
<tr>
<td>
<span class="ButtonText">
text "
</span>
message from "
</td>
<td>
Text
</td>
<td>
First words spoken, put a space at end
</td>
</tr>
<tr>
<td>
<span class="ButtonText">
number
</span>
</td>
<td>
My Definitions
</td>
<td>
This is the number the original text was received from
</td>
</tr>
<tr>
<td>
<span class="ButtonText">
text "
</span>
"
</td>
<td>
Text
</td>
<td>
Put a space in between number and message
</td>
</tr>
<tr>
<td>
<span class="ButtonText">
messageText
</span>
</td>
<td>
My Definitions
</td>
<td>
This is the original message received
</td>
</tr>
</tbody>
</table>
</div>
<p>
The blocks should look like this:
</p>
<div class="imagecontainer">
<img alt="" height="359" src="NoText2Assets/MessageReceivedSpoken.png" width="620" />
</div>
<h2>
How the Blocks Work
</h2>
<p>
After the response is sent, the
<span class="ButtonText">
TextToSpeech1.Speak
</span>
functon is called. You can plug any text object into the
<span class="ButtonText">
message
</span>
slot of the
<span class="ButtonText">
Speak
</span>
function. In this case,
<span class="ButtonText">
make text
</span>
is used to build
the words to be spoken, including the text "message from", the phone number from
which the message was received (
<span class="ButtonText">
number),
</span>
a blank
text, and the message received (
<span class="ButtonText">
messageText
</span>
). If
the text "hello" was received from the number "111-2222", the words "message from
111-2222. hello." would be spoken.
</p>
<blockquote class="testing">
<strong>
Test the behavior.
</strong>
You'll need a second phone to test the
behaviors in this app. From the second phone, send a text to the phone that is
running the app. Does the second phone speak the text aloud? Does it still send an
automated response?
<br />
</blockquote>
<h2>
Adding location information to the auto-response
</h2>
<p>
Next, add a
<span class="ButtonText">
LocationSensor.LocationChanged
</span>
event
handler which places the current address into a variable,
<span class="ButtonText">
lastKnownLocation
</span>
. When a text comes in, the value of that
variable can be added to the response message. Here are the blocks you'll need:
</p>
<div class="advtutorial">
<table>
<tbody>
<tr>
<td class="tbl-header">
Block Type
</td>
<td class="tbl-header">
Drawer
</td>
<td class="tbl-header">
Purpose
</td>
</tr>
<tr>
<td>
<span class="ButtonText">
def variable
</span>
(lastKnownLocation)
</td>
<td>
Definitions
</td>
<td>
create a variable to hold the last read address
</td>
</tr>
<tr>
<td>
<span class="ButtonText">
text
</span>
("unknown")
</td>
<td>
Text
</td>
<td>
set the default value in case the phone's sensor is not working
</td>
</tr>
<tr>
<td>
<span class="ButtonText">
LocationSensor1.LocationChanged
</span>
</td>
<td>
LocationSensor1
</td>
<td>
this is triggered on the first location reading and every change.
</td>
</tr>
<tr>
<td>
<span class="ButtonText">
set lastKnownLocation
</span>
to
<br />
</td>
<td>
My Definitions
<br />
</td>
<td>
set this variable to be used later.
<br />
</td>
</tr>
<tr>
<td>
<span class="ButtonText">
LocationSensor1.CurrentAddress
</span>
</td>
<td>
LocationSensor1
</td>
<td>
this is a street address such as "2222 Willard Street, Atlanta, Georgia"
</td>
</tr>
</tbody>
</table>
</div>
<p>
Here are the blocks:
</p>
<div class="imagecontainer">
<img alt="" src="NoText2Assets/lastLocation.png" />
</div>
<h2>
How the Blocks Work
</h2>
<p>
<span class="ButtonText">
LocationSensor1.LocationChanged
</span>
is called the first
time the sensor gets a reading and each time the phone is moved enough to trigger a
new reading. These blocks just place the current (street) address into the variable
<span class="ButtonText">
lastKnownLocation
</span>
, which you'll use later when you
change the auto-response that is sent out.
</p>
<h2>
Modify the message with location information
</h2>
<p>
Next, modify the
<span class="ButtonText">
Texting1.MessageReceived
</span>
event-handler so that the current address is added to the response. You'll need the
following blocks:
</p>
<div class="advtutorial">
<table>
<tbody>
<tr>
<td class="tbl-header">
Block Type
</td>
<td class="tbl-header">
Drawer
</td>
<td class="tbl-header">
Purpose
</td>
</tr>
<tr>
<td>
<span class="ButtonText">
make text
</span>
</td>
<td>
Text
</td>
<td>
if there is a location reading, build a compound text object
</td>
</tr>
<tr>
<td>
<span class="ButtonText">
MessageTextBox.Text
</span>
<br />
</td>
<td>
MessageTextBox
<br />
</td>
<td>
this is the (custom) message in the text box
<br />
</td>
</tr>
<tr>
<td>
<span class="ButtonText">
text
</span>
( "My location is:")
</td>
<td>
Text
</td>
<td>
This will be spoken after the custom message (note the leading space)
</td>
</tr>
<tr>
<td>
<span class="ButtonText">
global lastKnownLocation
</span>
</td>
<td>
LocatonSensor
</td>
<td>
This is an address such as "2222 Willard Street, Atlanta, Georgia"
</td>
</tr>
</tbody>
</table>
</div>
<p>
The blocks should look like this:
</p>
<div class="imagecontainer">
<img alt="" height="445" src="NoText2Assets/ReceivedText.png" width="621" />
</div>
<h2>
How the Blocks Work
</h2>
<p>
Instead of directly sending a message of the text in
<span class="ButtonText">
MessageTextbox.Text
</span>
, the app first builds a message using
<span class="ButtonText">
make text
</span>
. It combines the response text in
<span class="ButtonText">
MessageTextBox.Text
</span>
with the text " My location is
" and then the variable
<span class="ButtonText">
lastKnownLocation
</span>
.
</p>
<blockquote class="testing">
<strong>
Test the behavior.
</strong>
From the second phone, send a text to the phone
that is running the app. Does the second phone receive the response text? Does it
include location information?
<br />
</blockquote>
<h2>
Final Program
</h2>
<div class="imagecontainer">
<img alt="" height="562" src="NoText2Assets/finalProg.png" width="940" />
</div>
<div class="advtutorial">
<h2>
Variations
</h2>
<p>
Once you get the app working, you might want to explore some variations. For
example,
</p>
<ul>
<li>
Write a version that lets the user define custom responses for particular
phone numbers.
</li>
<li>
Write a version that sounds an alarm when a text is received from a number in
a "notify" list.
</li>
</ul>
<br />
<h2>
Review
</h2>
<p>
Here are some of the ideas covered in this tutorial:
<br />
</p>
<ul>
<li>
The
<span class="ButtonText">
TextToSpeech
</span>
component takes any text
object and speaks it aloud. It relies on an Android module, T
<em>
ext-To-Speech
Extended
</em>
, which must be downloaded to the phone for the app to work.
</li>
<li>
make text is used to piece together (concatenate) separate text items into a
single text object.
</li>
<li>
The
<span class="ButtonText">
LocationSensor
</span>
component can report the
phone's latitude, longitude, and current street address. To ensure that it has a
reading, you should access Its data in its
<span class="ButtonText">
LocationChanged
</span>
event-handler, which is triggered the first
time a reading is made and on every change thereafter.
<br />
</li>
</ul>
<h2>
Scan the Sample App to your Phone
</h2>
<p>
Scan the following barcode onto your phone to install and run the sample app.
</p>
<div class="imagecontainer">
<img alt="" height="215" src="NoText2Assets/barcode.png" width="254" />
</div>
<h2>
Download Source Code
</h2>
If you'd like to customize this sample in App Inventor, download the
<a href="NoText2Assets/notextwhiledriving2.zip">
source code
</a>
to your computer, then open
App Inventor, go to the
<span class="ButtonText">
My Projects
</span>
page, and
choose
<span class="ButtonText">
More Actions | Upload Source
</span>
.
</div>
<blockquote class="notice">
Google is grateful to
<a href="http://www.appinventor.org/">
Professor David
Wolber
</a>
, CS Professor at The University of San Francisco, for developing this
tutorial.
</blockquote>
</div>
</div>
</div>
<div class="footer">
<script language = "JavaScript">createFooter();</script><br>
<div class="footer-lastupdate">
<script>
if (document.lastModified != '') {
var m = "Page last updated: " + document.lastModified;
var p = m.length-8;
document.writeln("<center>");
document.write(m.substring(p, 0));
document.writeln("<\/center>");
}
</script>
</div>
</div>
</div>
</div>
</body>
</html>