/documentation/videos/04-phonebook.html

http://eyes-free.googlecode.com/ · HTML · 194 lines · 164 code · 30 blank · 0 comment · 0 complexity · 89fc5781d1f6063aa3f1163cba9bd1ab MD5 · raw file 

    

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    2. 

  2.                "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    3. 

  3. <html xmlns="http://www.w3.org/1999/xhtml"
    4. 

  4. lang="en" xml:lang="en">
    5. 

  5. <head>
    6. 

  6. <title>Video: Talking Phonebook: Eyes-Free Communication Device</title>
    7. 

  7. <meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1"/>
    8. 

  8. <meta name="generator" content="Org-mode"/>
    9. 

  9. <meta name="generated" content="2009-03-30 Mon"/>
    10. 

  10. <meta name="author" content="T.V Raman"/>
    11. 

  11. <style type="text/css">
    12. 

  12.   html { font-family: Times, serif; font-size: 12pt; }
    13. 

  13.   .title  { text-align: center; }
    14. 

  14.   .todo   { color: red; }
    15. 

  15.   .done   { color: green; }
    16. 

  16.   .tag    { background-color:lightblue; font-weight:normal }
    17. 

  17.   .target { }
    18. 

  18.   .timestamp { color: grey }
    19. 

  19.   .timestamp-kwd { color: CadetBlue }
    20. 

  20.   p.verse { margin-left: 3% }
    21. 

  21.   pre {
    22. 

  22. 	border: 1pt solid #AEBDCC;
    23. 

  23. 	background-color: #F3F5F7;
    24. 

  24. 	padding: 5pt;
    25. 

  25. 	font-family: courier, monospace;
    26. 

  26.         font-size: 90%;
    27. 

  27.         overflow:auto;
    28. 

  28.   }
    29. 

  29.   table { border-collapse: collapse; }
    30. 

  30.   td, th { vertical-align: top; }
    31. 

  31.   dt { font-weight: bold; }
    32. 

  32. 

  33.   .org-info-js_info-navigation { border-style:none; }
    34. 

  34.   #org-info-js_console-label { font-size:10px; font-weight:bold;
    35. 

  35.                                white-space:nowrap; }
    36. 

  36.   .org-info-js_search-highlight {background-color:#ffff00; color:#000000;
    37. 

  37.                                  font-weight:bold; }
    38. 

  38. 

  39. </style>
    40. 

  40. </head><body>
    41. 

  41. <h1 class="title">Video: Talking Phonebook: Eyes-Free Communication Device</h1>
    42. 

  42. 

  43. 

  44. 

  45. <div id="outline-container-1" class="outline-2">
    46. 

  46. <h2 id="sec-1">1 <a href="http://www.youtube.com/watch?v=UPIU2tj7dBI">Video: Talking Phonebook: Eyes-Free Communication Device</a></h2>
    47. 

  47. <div id="text-1">
    48. 

  48. 

  49. 

  50. <p>
    51. 

  51. Pressing the <u>menu</u> button while in the <i>Talking Dialer</i> toggles
    52. 

  52. between <u>dialing mode</u> and <u>phonebook</u>.
    53. 

  53. When in <u>phonebook</u>, you get eyes-free access to your contacts
    54. 

  54. with the ability to quickly move to the  contact  that you wish
    55. 

  55. to call.
    56. 

  56. </p>
    57. 

  57. <p>
    58. 

  58. When in the  <u>phonebook</u>, you can 
    59. 

  59. scroll through your contacts  and press the <u>call</u> button to call
    60. 

  60. the <i>current</i> contact.  In addition, you can use <i>stroke dialing</i>
    61. 

  61. as explained below to quickly move to a specific contact.
    62. 

  62. </p>
    63. 

  63. 

  64. </div>
    65. 

  65. 

  66. <div id="outline-container-1.1" class="outline-3">
    67. 

  67. <h3 id="sec-1.1">1.1 Entering Letters Using Stroke dialing </h3>
    68. 

  68. <div id="text-1.1">
    69. 

  69. 

  70. 

  71. <p>
    72. 

  72. We covered eyes-free input with the touch screen in the <a href="./02-strokes.html">earlier video on stroke dialing</a>
    73. 

  73. &mdash; in that video, we illustrated the concept via a traditional
    74. 

  74. phone keypad. Here, we  extend that technique
    75. 

  75. to enable   textual input. 
    76. 

  76. In the explanation below, we will use compass directions  to help
    77. 

  77. with orientation.
    78. 

  78. As before, we will use relative positioning i.e., for the rest of
    79. 

  79. this explanation, you can start <i>anywhere</i> on the touch-screen
    80. 

  80. &mdash; though we recommend (for reasons that  will become  evident)
    81. 

  81. that you start somewhere close to the middle of the screen.
    82. 

  82. </p>
    83. 

  83. </div>
    84. 

  84. 

  85. </div>
    86. 

  86. 

  87. <div id="outline-container-1.2" class="outline-3">
    88. 

  88. <h3 id="sec-1.2">1.2 The Eight Compass Directions</h3>
    89. 

  89. <div id="text-1.2">
    90. 

  90. 

  91. 

  92. <p>
    93. 

  93. Defining the <i>center</i> as where you first touch down on the
    94. 

  94. screen, notice that  you can stroke in any one of the <u>8</u> compass
    95. 

  95. directions, and that  opposite pairs of compass directions e.g.,
    96. 

  96. North and South, can be thought of as <i>opposites</i>.
    97. 

  97. So we get <u>4</u> pairs. We enumerate these below,
    98. 

  98. associate them with the <u>4</u> Google colors,  and  equate them
    99. 

  99. to their equivalent strokes from the <i>stroke dialer</i>:
    100. 

  100. </p>
    101. 

  101. 

  102. <ul>
    103. 

  103. <li>
    104. 

  104. Red: North-West and South-east <u>1</u> and <u>9</u>.
    105. 

  105. </li>
    106. 

  106. <li>
    107. 

  107. Blue: North and South  &mdash; <u>2</u> and <u>8</u>.
    108. 

  108. </li>
    109. 

  109. <li>
    110. 

  110. Green: North-East and South-West &mdash; <u>3</u> and <u>7</u>.
    111. 

  111. </li>
    112. 

  112. <li>
    113. 

  113. Yellow: East and West &mdash; <u>4</u> and <u>6</u>.
    114. 

  114. 

  115. </li>
    116. 

  116. </ul>
    117. 

  117. 

  118. <p>Now, let's place the letters of the alphabet on these <u>4</u> circles
    119. 

  119. as follows:
    120. 

  120. </p>
    121. 

  121. <ul>
    122. 

  122. <li>
    123. 

  123. Red: <u>A</u> &hellip; <u>H</u>
    124. 

  124. </li>
    125. 

  125. <li>
    126. 

  126. Blue: <u>I</u> &hellip; <u>P</u>
    127. 

  127. </li>
    128. 

  128. <li>
    129. 

  129. Green: <u>Q</u> &hellip; <u>X</u>
    130. 

  130. </li>
    131. 

  131. <li>
    132. 

  132. Yellow: <u>Y</u> &hellip; <u>Z</u>.
    133. 

  133. 

  134. </li>
    135. 

  135. </ul>
    136. 

  136. 

  137. <p>To input a given letter, we <i>stroke</i> to the circle containing the
    138. 

  138. desired letter, trace along the circle till we hear the letter we
    139. 

  139. want, and lift up the finger to make the selection. Letters are
    140. 

  140. spoken in a female voice while moving along the selected circle;
    141. 

  141. lifting up the finger speaks the selected letter in a male voice.
    142. 

  142. </p>
    143. 

  143. <p>
    144. 

  144. Notice that conceptually, we have defined a fairly simple mapping
    145. 

  145. from strokes to letters of the alphabet!
    146. 

  146. </p></div>
    147. 

  147. 

  148. </div>
    149. 

  149. 

  150. <div id="outline-container-1.3" class="outline-3">
    151. 

  151. <h3 id="sec-1.3">1.3 Skimming  The Contact List</h3>
    152. 

  152. <div id="text-1.3">
    153. 

  153. 

  154. 

  155. <p>
    156. 

  156. So to cut a long story short, you <i>dont need to</i> scroll through
    157. 

  157. the contact list. To quickly jump to a contact, use the technique
    158. 

  158. described above to input the first letter from the contact's name
    159. 

  159. &mdash; the aplication jumps to contacts starting with that
    160. 

  160. letter. At that point, you can either scroll, or enter additional
    161. 

  161. letters to further filter the contact list.
    162. 

  162. </p>
    163. 

  163. 

  164. </div>
    165. 

  165. 

  166. </div>
    167. 

  167. 

  168. <div id="outline-container-1.4" class="outline-3">
    169. 

  169. <h3 id="sec-1.4">1.4 Examples Of Using Strokes For Letters</h3>
    170. 

  170. <div id="text-1.4">
    171. 

  171. 

  172. 

  173. 

  174. <p>
    175. 

  175. Notice from the mapping shown earlier that we can <i>enter</i> each
    176. 

  176. circle either at the <u>top</u> or <u>bottom</u>. Thus, entering the red
    177. 

  177. circle at the <u>top</u> gets to <u>A</u>, while entering it at the
    178. 

  178. <u>bottom</u> gets us to <u>E</u>. This means that the <u>8</u> letters on any
    179. 

  179. given circle are no more than <u>3</u> steps away &mdash; for example, to
    180. 

  180. enter <u>C</u>, one needs to trace clockwise from <u>A</u>, or
    181. 

  181. counter-clockwise from <u>E</u>. As an example, <u>H</u> is only <u>1</u> step
    182. 

  182. from <u>A</u> on the red circle. similarly, <u>P</u> is only <u>1</u> step from
    183. 

  183. <u>I</u> on the blue circle.
    184. 

  184. </p>
    185. 

  185. </div>
    186. 

  186. </div>
    187. 

  187. </div>
    188. 

  188. <div id="postamble"><p class="author"> Author: T.V Raman
    189. 

  189. <a href="mailto:raman@google.com">&lt;raman@google.com&gt;</a>
    190. 

  190. </p>
    191. 

  191. <p class="date"> Date: 2009-03-30 Mon</p>
    192. 

  192. <p>HTML generated by org-mode 6.08c in emacs 23</p>
    193. 

  193. </div></body>
    194. 

  194. </html>
    195.